You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59859 lines
1.9 MiB
59859 lines
1.9 MiB
/*! Element Plus v2.8.4 */
|
|
|
|
import { getCurrentScope, onScopeDispose, unref, readonly, shallowRef, watchEffect, ref, watch, getCurrentInstance, onMounted, nextTick, computed, defineComponent, openBlock, createElementBlock, createElementVNode, warn, isVNode, Fragment, Comment, onBeforeUnmount, isRef, inject, onUnmounted, h as h$1, Teleport as Teleport$1, onBeforeMount, provide, renderSlot, normalizeClass, normalizeStyle, mergeProps, useSlots, createBlock, Transition, withCtx, withDirectives, resolveDynamicComponent, createCommentVNode, createTextVNode, toDisplayString, createVNode, vShow, toRef, reactive, toRefs, onUpdated, TransitionGroup, useAttrs as useAttrs$1, withModifiers, onActivated, cloneVNode, Text as Text$1, onDeactivated, renderList, withKeys, createSlots, normalizeProps, guardReactiveProps, toRaw, vModelCheckbox, vModelRadio, resolveComponent, onBeforeUpdate, vModelText, toHandlers, markRaw, effectScope, resolveDirective, toHandlerKey, render, createApp, shallowReactive } from 'vue';
|
|
|
|
const FOCUSABLE_ELEMENT_SELECTORS = `a[href],button:not([disabled]),button:not([hidden]),:not([tabindex="-1"]),input:not([disabled]),input:not([type="hidden"]),select:not([disabled]),textarea:not([disabled])`;
|
|
const isVisible = (element) => {
|
|
const computed = getComputedStyle(element);
|
|
return computed.position === "fixed" ? false : element.offsetParent !== null;
|
|
};
|
|
const obtainAllFocusableElements$1 = (element) => {
|
|
return Array.from(element.querySelectorAll(FOCUSABLE_ELEMENT_SELECTORS)).filter((item) => isFocusable(item) && isVisible(item));
|
|
};
|
|
const isFocusable = (element) => {
|
|
if (element.tabIndex > 0 || element.tabIndex === 0 && element.getAttribute("tabIndex") !== null) {
|
|
return true;
|
|
}
|
|
if (element.disabled) {
|
|
return false;
|
|
}
|
|
switch (element.nodeName) {
|
|
case "A": {
|
|
return !!element.href && element.rel !== "ignore";
|
|
}
|
|
case "INPUT": {
|
|
return !(element.type === "hidden" || element.type === "file");
|
|
}
|
|
case "BUTTON":
|
|
case "SELECT":
|
|
case "TEXTAREA": {
|
|
return true;
|
|
}
|
|
default: {
|
|
return false;
|
|
}
|
|
}
|
|
};
|
|
const triggerEvent = function(elm, name, ...opts) {
|
|
let eventName;
|
|
if (name.includes("mouse") || name.includes("click")) {
|
|
eventName = "MouseEvents";
|
|
} else if (name.includes("key")) {
|
|
eventName = "KeyboardEvent";
|
|
} else {
|
|
eventName = "HTMLEvents";
|
|
}
|
|
const evt = document.createEvent(eventName);
|
|
evt.initEvent(name, ...opts);
|
|
elm.dispatchEvent(evt);
|
|
return elm;
|
|
};
|
|
const isLeaf = (el) => !el.getAttribute("aria-owns");
|
|
const getSibling = (el, distance, elClass) => {
|
|
const { parentNode } = el;
|
|
if (!parentNode)
|
|
return null;
|
|
const siblings = parentNode.querySelectorAll(elClass);
|
|
const index = Array.prototype.indexOf.call(siblings, el);
|
|
return siblings[index + distance] || null;
|
|
};
|
|
const focusNode = (el) => {
|
|
if (!el)
|
|
return;
|
|
el.focus();
|
|
!isLeaf(el) && el.click();
|
|
};
|
|
|
|
const composeEventHandlers = (theirsHandler, oursHandler, { checkForDefaultPrevented = true } = {}) => {
|
|
const handleEvent = (event) => {
|
|
const shouldPrevent = theirsHandler == null ? void 0 : theirsHandler(event);
|
|
if (checkForDefaultPrevented === false || !shouldPrevent) {
|
|
return oursHandler == null ? void 0 : oursHandler(event);
|
|
}
|
|
};
|
|
return handleEvent;
|
|
};
|
|
const whenMouse = (handler) => {
|
|
return (e) => e.pointerType === "mouse" ? handler(e) : void 0;
|
|
};
|
|
|
|
var __defProp$9 = Object.defineProperty;
|
|
var __defProps$6 = Object.defineProperties;
|
|
var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
|
|
var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$b = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$9 = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$b.call(b, prop))
|
|
__defNormalProp$9(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$b)
|
|
for (var prop of __getOwnPropSymbols$b(b)) {
|
|
if (__propIsEnum$b.call(b, prop))
|
|
__defNormalProp$9(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
|
|
function computedEager(fn, options) {
|
|
var _a;
|
|
const result = shallowRef();
|
|
watchEffect(() => {
|
|
result.value = fn();
|
|
}, __spreadProps$6(__spreadValues$9({}, options), {
|
|
flush: (_a = options == null ? void 0 : options.flush) != null ? _a : "sync"
|
|
}));
|
|
return readonly(result);
|
|
}
|
|
|
|
var _a;
|
|
const isClient = typeof window !== "undefined";
|
|
const isDef = (val) => typeof val !== "undefined";
|
|
const isString$2 = (val) => typeof val === "string";
|
|
const noop$1 = () => {
|
|
};
|
|
const isIOS = isClient && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
|
|
|
|
function resolveUnref(r) {
|
|
return typeof r === "function" ? r() : unref(r);
|
|
}
|
|
|
|
function createFilterWrapper(filter, fn) {
|
|
function wrapper(...args) {
|
|
filter(() => fn.apply(this, args), { fn, thisArg: this, args });
|
|
}
|
|
return wrapper;
|
|
}
|
|
function debounceFilter(ms, options = {}) {
|
|
let timer;
|
|
let maxTimer;
|
|
const filter = (invoke) => {
|
|
const duration = resolveUnref(ms);
|
|
const maxDuration = resolveUnref(options.maxWait);
|
|
if (timer)
|
|
clearTimeout(timer);
|
|
if (duration <= 0 || maxDuration !== void 0 && maxDuration <= 0) {
|
|
if (maxTimer) {
|
|
clearTimeout(maxTimer);
|
|
maxTimer = null;
|
|
}
|
|
return invoke();
|
|
}
|
|
if (maxDuration && !maxTimer) {
|
|
maxTimer = setTimeout(() => {
|
|
if (timer)
|
|
clearTimeout(timer);
|
|
maxTimer = null;
|
|
invoke();
|
|
}, maxDuration);
|
|
}
|
|
timer = setTimeout(() => {
|
|
if (maxTimer)
|
|
clearTimeout(maxTimer);
|
|
maxTimer = null;
|
|
invoke();
|
|
}, duration);
|
|
};
|
|
return filter;
|
|
}
|
|
function throttleFilter(ms, trailing = true, leading = true) {
|
|
let lastExec = 0;
|
|
let timer;
|
|
let isLeading = true;
|
|
const clear = () => {
|
|
if (timer) {
|
|
clearTimeout(timer);
|
|
timer = void 0;
|
|
}
|
|
};
|
|
const filter = (invoke) => {
|
|
const duration = resolveUnref(ms);
|
|
const elapsed = Date.now() - lastExec;
|
|
clear();
|
|
if (duration <= 0) {
|
|
lastExec = Date.now();
|
|
return invoke();
|
|
}
|
|
if (elapsed > duration && (leading || !isLeading)) {
|
|
lastExec = Date.now();
|
|
invoke();
|
|
} else if (trailing) {
|
|
timer = setTimeout(() => {
|
|
lastExec = Date.now();
|
|
isLeading = true;
|
|
clear();
|
|
invoke();
|
|
}, duration);
|
|
}
|
|
if (!leading && !timer)
|
|
timer = setTimeout(() => isLeading = true, duration);
|
|
isLeading = false;
|
|
};
|
|
return filter;
|
|
}
|
|
function identity$1(arg) {
|
|
return arg;
|
|
}
|
|
|
|
function tryOnScopeDispose(fn) {
|
|
if (getCurrentScope()) {
|
|
onScopeDispose(fn);
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function useDebounceFn(fn, ms = 200, options = {}) {
|
|
return createFilterWrapper(debounceFilter(ms, options), fn);
|
|
}
|
|
|
|
function refDebounced(value, ms = 200, options = {}) {
|
|
if (ms <= 0)
|
|
return value;
|
|
const debounced = ref(value.value);
|
|
const updater = useDebounceFn(() => {
|
|
debounced.value = value.value;
|
|
}, ms, options);
|
|
watch(value, () => updater());
|
|
return debounced;
|
|
}
|
|
|
|
function useThrottleFn(fn, ms = 200, trailing = false, leading = true) {
|
|
return createFilterWrapper(throttleFilter(ms, trailing, leading), fn);
|
|
}
|
|
|
|
function tryOnMounted(fn, sync = true) {
|
|
if (getCurrentInstance())
|
|
onMounted(fn);
|
|
else if (sync)
|
|
fn();
|
|
else
|
|
nextTick(fn);
|
|
}
|
|
|
|
function useTimeoutFn(cb, interval, options = {}) {
|
|
const {
|
|
immediate = true
|
|
} = options;
|
|
const isPending = ref(false);
|
|
let timer = null;
|
|
function clear() {
|
|
if (timer) {
|
|
clearTimeout(timer);
|
|
timer = null;
|
|
}
|
|
}
|
|
function stop() {
|
|
isPending.value = false;
|
|
clear();
|
|
}
|
|
function start(...args) {
|
|
clear();
|
|
isPending.value = true;
|
|
timer = setTimeout(() => {
|
|
isPending.value = false;
|
|
timer = null;
|
|
cb(...args);
|
|
}, resolveUnref(interval));
|
|
}
|
|
if (immediate) {
|
|
isPending.value = true;
|
|
if (isClient)
|
|
start();
|
|
}
|
|
tryOnScopeDispose(stop);
|
|
return {
|
|
isPending,
|
|
start,
|
|
stop
|
|
};
|
|
}
|
|
|
|
function unrefElement(elRef) {
|
|
var _a;
|
|
const plain = resolveUnref(elRef);
|
|
return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
|
|
}
|
|
|
|
const defaultWindow = isClient ? window : void 0;
|
|
const defaultDocument = isClient ? window.document : void 0;
|
|
|
|
function useEventListener(...args) {
|
|
let target;
|
|
let event;
|
|
let listener;
|
|
let options;
|
|
if (isString$2(args[0])) {
|
|
[event, listener, options] = args;
|
|
target = defaultWindow;
|
|
} else {
|
|
[target, event, listener, options] = args;
|
|
}
|
|
if (!target)
|
|
return noop$1;
|
|
let cleanup = noop$1;
|
|
const stopWatch = watch(() => unrefElement(target), (el) => {
|
|
cleanup();
|
|
if (!el)
|
|
return;
|
|
el.addEventListener(event, listener, options);
|
|
cleanup = () => {
|
|
el.removeEventListener(event, listener, options);
|
|
cleanup = noop$1;
|
|
};
|
|
}, { immediate: true, flush: "post" });
|
|
const stop = () => {
|
|
stopWatch();
|
|
cleanup();
|
|
};
|
|
tryOnScopeDispose(stop);
|
|
return stop;
|
|
}
|
|
|
|
function onClickOutside(target, handler, options = {}) {
|
|
const { window = defaultWindow, ignore, capture = true, detectIframe = false } = options;
|
|
if (!window)
|
|
return;
|
|
const shouldListen = ref(true);
|
|
let fallback;
|
|
const listener = (event) => {
|
|
window.clearTimeout(fallback);
|
|
const el = unrefElement(target);
|
|
const composedPath = event.composedPath();
|
|
if (!el || el === event.target || composedPath.includes(el) || !shouldListen.value)
|
|
return;
|
|
if (ignore && ignore.length > 0) {
|
|
if (ignore.some((target2) => {
|
|
const el2 = unrefElement(target2);
|
|
return el2 && (event.target === el2 || composedPath.includes(el2));
|
|
}))
|
|
return;
|
|
}
|
|
handler(event);
|
|
};
|
|
const cleanup = [
|
|
useEventListener(window, "click", listener, { passive: true, capture }),
|
|
useEventListener(window, "pointerdown", (e) => {
|
|
const el = unrefElement(target);
|
|
shouldListen.value = !!el && !e.composedPath().includes(el);
|
|
}, { passive: true }),
|
|
useEventListener(window, "pointerup", (e) => {
|
|
if (e.button === 0) {
|
|
const path = e.composedPath();
|
|
e.composedPath = () => path;
|
|
fallback = window.setTimeout(() => listener(e), 50);
|
|
}
|
|
}, { passive: true }),
|
|
detectIframe && useEventListener(window, "blur", (event) => {
|
|
var _a;
|
|
const el = unrefElement(target);
|
|
if (((_a = document.activeElement) == null ? void 0 : _a.tagName) === "IFRAME" && !(el == null ? void 0 : el.contains(document.activeElement)))
|
|
handler(event);
|
|
})
|
|
].filter(Boolean);
|
|
const stop = () => cleanup.forEach((fn) => fn());
|
|
return stop;
|
|
}
|
|
|
|
function useActiveElement(options = {}) {
|
|
const { window = defaultWindow } = options;
|
|
const counter = ref(0);
|
|
if (window) {
|
|
useEventListener(window, "blur", () => counter.value += 1, true);
|
|
useEventListener(window, "focus", () => counter.value += 1, true);
|
|
}
|
|
return computed(() => {
|
|
counter.value;
|
|
return window == null ? void 0 : window.document.activeElement;
|
|
});
|
|
}
|
|
|
|
function useSupported(callback, sync = false) {
|
|
const isSupported = ref();
|
|
const update = () => isSupported.value = Boolean(callback());
|
|
update();
|
|
tryOnMounted(update, sync);
|
|
return isSupported;
|
|
}
|
|
|
|
const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
|
|
const globalKey = "__vueuse_ssr_handlers__";
|
|
_global[globalKey] = _global[globalKey] || {};
|
|
_global[globalKey];
|
|
|
|
function useCssVar(prop, target, { window = defaultWindow, initialValue = "" } = {}) {
|
|
const variable = ref(initialValue);
|
|
const elRef = computed(() => {
|
|
var _a;
|
|
return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
|
|
});
|
|
watch([elRef, () => resolveUnref(prop)], ([el, prop2]) => {
|
|
var _a;
|
|
if (el && window) {
|
|
const value = (_a = window.getComputedStyle(el).getPropertyValue(prop2)) == null ? void 0 : _a.trim();
|
|
variable.value = value || initialValue;
|
|
}
|
|
}, { immediate: true });
|
|
watch(variable, (val) => {
|
|
var _a;
|
|
if ((_a = elRef.value) == null ? void 0 : _a.style)
|
|
elRef.value.style.setProperty(resolveUnref(prop), val);
|
|
});
|
|
return variable;
|
|
}
|
|
|
|
function useDocumentVisibility({ document = defaultDocument } = {}) {
|
|
if (!document)
|
|
return ref("visible");
|
|
const visibility = ref(document.visibilityState);
|
|
useEventListener(document, "visibilitychange", () => {
|
|
visibility.value = document.visibilityState;
|
|
});
|
|
return visibility;
|
|
}
|
|
|
|
var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$f = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
|
|
var __objRest$2 = (source, exclude) => {
|
|
var target = {};
|
|
for (var prop in source)
|
|
if (__hasOwnProp$f.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
target[prop] = source[prop];
|
|
if (source != null && __getOwnPropSymbols$f)
|
|
for (var prop of __getOwnPropSymbols$f(source)) {
|
|
if (exclude.indexOf(prop) < 0 && __propIsEnum$f.call(source, prop))
|
|
target[prop] = source[prop];
|
|
}
|
|
return target;
|
|
};
|
|
function useResizeObserver(target, callback, options = {}) {
|
|
const _a = options, { window = defaultWindow } = _a, observerOptions = __objRest$2(_a, ["window"]);
|
|
let observer;
|
|
const isSupported = useSupported(() => window && "ResizeObserver" in window);
|
|
const cleanup = () => {
|
|
if (observer) {
|
|
observer.disconnect();
|
|
observer = void 0;
|
|
}
|
|
};
|
|
const stopWatch = watch(() => unrefElement(target), (el) => {
|
|
cleanup();
|
|
if (isSupported.value && window && el) {
|
|
observer = new ResizeObserver(callback);
|
|
observer.observe(el, observerOptions);
|
|
}
|
|
}, { immediate: true, flush: "post" });
|
|
const stop = () => {
|
|
cleanup();
|
|
stopWatch();
|
|
};
|
|
tryOnScopeDispose(stop);
|
|
return {
|
|
isSupported,
|
|
stop
|
|
};
|
|
}
|
|
|
|
function useElementBounding(target, options = {}) {
|
|
const {
|
|
reset = true,
|
|
windowResize = true,
|
|
windowScroll = true,
|
|
immediate = true
|
|
} = options;
|
|
const height = ref(0);
|
|
const bottom = ref(0);
|
|
const left = ref(0);
|
|
const right = ref(0);
|
|
const top = ref(0);
|
|
const width = ref(0);
|
|
const x = ref(0);
|
|
const y = ref(0);
|
|
function update() {
|
|
const el = unrefElement(target);
|
|
if (!el) {
|
|
if (reset) {
|
|
height.value = 0;
|
|
bottom.value = 0;
|
|
left.value = 0;
|
|
right.value = 0;
|
|
top.value = 0;
|
|
width.value = 0;
|
|
x.value = 0;
|
|
y.value = 0;
|
|
}
|
|
return;
|
|
}
|
|
const rect = el.getBoundingClientRect();
|
|
height.value = rect.height;
|
|
bottom.value = rect.bottom;
|
|
left.value = rect.left;
|
|
right.value = rect.right;
|
|
top.value = rect.top;
|
|
width.value = rect.width;
|
|
x.value = rect.x;
|
|
y.value = rect.y;
|
|
}
|
|
useResizeObserver(target, update);
|
|
watch(() => unrefElement(target), (ele) => !ele && update());
|
|
if (windowScroll)
|
|
useEventListener("scroll", update, { passive: true });
|
|
if (windowResize)
|
|
useEventListener("resize", update, { passive: true });
|
|
tryOnMounted(() => {
|
|
if (immediate)
|
|
update();
|
|
});
|
|
return {
|
|
height,
|
|
bottom,
|
|
left,
|
|
right,
|
|
top,
|
|
width,
|
|
x,
|
|
y,
|
|
update
|
|
};
|
|
}
|
|
|
|
var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
|
|
var __objRest$1 = (source, exclude) => {
|
|
var target = {};
|
|
for (var prop in source)
|
|
if (__hasOwnProp$7.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
target[prop] = source[prop];
|
|
if (source != null && __getOwnPropSymbols$7)
|
|
for (var prop of __getOwnPropSymbols$7(source)) {
|
|
if (exclude.indexOf(prop) < 0 && __propIsEnum$7.call(source, prop))
|
|
target[prop] = source[prop];
|
|
}
|
|
return target;
|
|
};
|
|
function useMutationObserver(target, callback, options = {}) {
|
|
const _a = options, { window = defaultWindow } = _a, mutationOptions = __objRest$1(_a, ["window"]);
|
|
let observer;
|
|
const isSupported = useSupported(() => window && "MutationObserver" in window);
|
|
const cleanup = () => {
|
|
if (observer) {
|
|
observer.disconnect();
|
|
observer = void 0;
|
|
}
|
|
};
|
|
const stopWatch = watch(() => unrefElement(target), (el) => {
|
|
cleanup();
|
|
if (isSupported.value && window && el) {
|
|
observer = new MutationObserver(callback);
|
|
observer.observe(el, mutationOptions);
|
|
}
|
|
}, { immediate: true });
|
|
const stop = () => {
|
|
cleanup();
|
|
stopWatch();
|
|
};
|
|
tryOnScopeDispose(stop);
|
|
return {
|
|
isSupported,
|
|
stop
|
|
};
|
|
}
|
|
|
|
var SwipeDirection;
|
|
(function(SwipeDirection2) {
|
|
SwipeDirection2["UP"] = "UP";
|
|
SwipeDirection2["RIGHT"] = "RIGHT";
|
|
SwipeDirection2["DOWN"] = "DOWN";
|
|
SwipeDirection2["LEFT"] = "LEFT";
|
|
SwipeDirection2["NONE"] = "NONE";
|
|
})(SwipeDirection || (SwipeDirection = {}));
|
|
|
|
var __defProp = Object.defineProperty;
|
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp.call(b, prop))
|
|
__defNormalProp(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols)
|
|
for (var prop of __getOwnPropSymbols(b)) {
|
|
if (__propIsEnum.call(b, prop))
|
|
__defNormalProp(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
const _TransitionPresets = {
|
|
easeInSine: [0.12, 0, 0.39, 0],
|
|
easeOutSine: [0.61, 1, 0.88, 1],
|
|
easeInOutSine: [0.37, 0, 0.63, 1],
|
|
easeInQuad: [0.11, 0, 0.5, 0],
|
|
easeOutQuad: [0.5, 1, 0.89, 1],
|
|
easeInOutQuad: [0.45, 0, 0.55, 1],
|
|
easeInCubic: [0.32, 0, 0.67, 0],
|
|
easeOutCubic: [0.33, 1, 0.68, 1],
|
|
easeInOutCubic: [0.65, 0, 0.35, 1],
|
|
easeInQuart: [0.5, 0, 0.75, 0],
|
|
easeOutQuart: [0.25, 1, 0.5, 1],
|
|
easeInOutQuart: [0.76, 0, 0.24, 1],
|
|
easeInQuint: [0.64, 0, 0.78, 0],
|
|
easeOutQuint: [0.22, 1, 0.36, 1],
|
|
easeInOutQuint: [0.83, 0, 0.17, 1],
|
|
easeInExpo: [0.7, 0, 0.84, 0],
|
|
easeOutExpo: [0.16, 1, 0.3, 1],
|
|
easeInOutExpo: [0.87, 0, 0.13, 1],
|
|
easeInCirc: [0.55, 0, 1, 0.45],
|
|
easeOutCirc: [0, 0.55, 0.45, 1],
|
|
easeInOutCirc: [0.85, 0, 0.15, 1],
|
|
easeInBack: [0.36, 0, 0.66, -0.56],
|
|
easeOutBack: [0.34, 1.56, 0.64, 1],
|
|
easeInOutBack: [0.68, -0.6, 0.32, 1.6]
|
|
};
|
|
__spreadValues({
|
|
linear: identity$1
|
|
}, _TransitionPresets);
|
|
|
|
function useVModel(props, key, emit, options = {}) {
|
|
var _a, _b, _c;
|
|
const {
|
|
passive = false,
|
|
eventName,
|
|
deep = false,
|
|
defaultValue
|
|
} = options;
|
|
const vm = getCurrentInstance();
|
|
const _emit = emit || (vm == null ? void 0 : vm.emit) || ((_a = vm == null ? void 0 : vm.$emit) == null ? void 0 : _a.bind(vm)) || ((_c = (_b = vm == null ? void 0 : vm.proxy) == null ? void 0 : _b.$emit) == null ? void 0 : _c.bind(vm == null ? void 0 : vm.proxy));
|
|
let event = eventName;
|
|
if (!key) {
|
|
{
|
|
key = "modelValue";
|
|
}
|
|
}
|
|
event = eventName || event || `update:${key.toString()}`;
|
|
const getValue = () => isDef(props[key]) ? props[key] : defaultValue;
|
|
if (passive) {
|
|
const proxy = ref(getValue());
|
|
watch(() => props[key], (v) => proxy.value = v);
|
|
watch(proxy, (v) => {
|
|
if (v !== props[key] || deep)
|
|
_emit(event, v);
|
|
}, {
|
|
deep
|
|
});
|
|
return proxy;
|
|
} else {
|
|
return computed({
|
|
get() {
|
|
return getValue();
|
|
},
|
|
set(value) {
|
|
_emit(event, value);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function useWindowFocus({ window = defaultWindow } = {}) {
|
|
if (!window)
|
|
return ref(false);
|
|
const focused = ref(window.document.hasFocus());
|
|
useEventListener(window, "blur", () => {
|
|
focused.value = false;
|
|
});
|
|
useEventListener(window, "focus", () => {
|
|
focused.value = true;
|
|
});
|
|
return focused;
|
|
}
|
|
|
|
function useWindowSize(options = {}) {
|
|
const {
|
|
window = defaultWindow,
|
|
initialWidth = Infinity,
|
|
initialHeight = Infinity,
|
|
listenOrientation = true
|
|
} = options;
|
|
const width = ref(initialWidth);
|
|
const height = ref(initialHeight);
|
|
const update = () => {
|
|
if (window) {
|
|
width.value = window.innerWidth;
|
|
height.value = window.innerHeight;
|
|
}
|
|
};
|
|
update();
|
|
tryOnMounted(update);
|
|
useEventListener("resize", update, { passive: true });
|
|
if (listenOrientation)
|
|
useEventListener("orientationchange", update, { passive: true });
|
|
return { width, height };
|
|
}
|
|
|
|
const isFirefox = () => isClient && /firefox/i.test(window.navigator.userAgent);
|
|
|
|
const isInContainer = (el, container) => {
|
|
if (!isClient || !el || !container)
|
|
return false;
|
|
const elRect = el.getBoundingClientRect();
|
|
let containerRect;
|
|
if (container instanceof Element) {
|
|
containerRect = container.getBoundingClientRect();
|
|
} else {
|
|
containerRect = {
|
|
top: 0,
|
|
right: window.innerWidth,
|
|
bottom: window.innerHeight,
|
|
left: 0
|
|
};
|
|
}
|
|
return elRect.top < containerRect.bottom && elRect.bottom > containerRect.top && elRect.right > containerRect.left && elRect.left < containerRect.right;
|
|
};
|
|
const getOffsetTop = (el) => {
|
|
let offset = 0;
|
|
let parent = el;
|
|
while (parent) {
|
|
offset += parent.offsetTop;
|
|
parent = parent.offsetParent;
|
|
}
|
|
return offset;
|
|
};
|
|
const getOffsetTopDistance = (el, containerEl) => {
|
|
return Math.abs(getOffsetTop(el) - getOffsetTop(containerEl));
|
|
};
|
|
const getClientXY = (event) => {
|
|
let clientX;
|
|
let clientY;
|
|
if (event.type === "touchend") {
|
|
clientY = event.changedTouches[0].clientY;
|
|
clientX = event.changedTouches[0].clientX;
|
|
} else 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
|
|
};
|
|
};
|
|
|
|
function easeInOutCubic(t, b, c, d) {
|
|
const cc = c - b;
|
|
t /= d / 2;
|
|
if (t < 1) {
|
|
return cc / 2 * t * t * t + b;
|
|
}
|
|
return cc / 2 * ((t -= 2) * t * t + 2) + b;
|
|
}
|
|
|
|
const NOOP = () => {
|
|
};
|
|
const hasOwnProperty$p = Object.prototype.hasOwnProperty;
|
|
const hasOwn = (val, key) => hasOwnProperty$p.call(val, key);
|
|
const isArray$1 = Array.isArray;
|
|
const isDate$1 = (val) => toTypeString(val) === "[object Date]";
|
|
const isFunction$1 = (val) => typeof val === "function";
|
|
const isString$1 = (val) => typeof val === "string";
|
|
const isObject$1 = (val) => val !== null && typeof val === "object";
|
|
const isPromise = (val) => {
|
|
return isObject$1(val) && isFunction$1(val.then) && isFunction$1(val.catch);
|
|
};
|
|
const objectToString$1 = Object.prototype.toString;
|
|
const toTypeString = (value) => objectToString$1.call(value);
|
|
const toRawType = (value) => {
|
|
return toTypeString(value).slice(8, -1);
|
|
};
|
|
const isPlainObject$1 = (val) => toTypeString(val) === "[object Object]";
|
|
const cacheStringFunction = (fn) => {
|
|
const cache = /* @__PURE__ */ Object.create(null);
|
|
return (str) => {
|
|
const hit = cache[str];
|
|
return hit || (cache[str] = fn(str));
|
|
};
|
|
};
|
|
const camelizeRE = /-(\w)/g;
|
|
const camelize = cacheStringFunction((str) => {
|
|
return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : "");
|
|
});
|
|
const hyphenateRE = /\B([A-Z])/g;
|
|
const hyphenate = cacheStringFunction((str) => str.replace(hyphenateRE, "-$1").toLowerCase());
|
|
const capitalize$2 = cacheStringFunction((str) => str.charAt(0).toUpperCase() + str.slice(1));
|
|
|
|
var freeGlobal = typeof global == "object" && global && global.Object === Object && global;
|
|
|
|
var freeSelf = typeof self == "object" && self && self.Object === Object && self;
|
|
var root = freeGlobal || freeSelf || Function("return this")();
|
|
|
|
var Symbol$1 = root.Symbol;
|
|
|
|
var objectProto$s = Object.prototype;
|
|
var hasOwnProperty$o = objectProto$s.hasOwnProperty;
|
|
var nativeObjectToString$3 = objectProto$s.toString;
|
|
var symToStringTag$1 = Symbol$1 ? Symbol$1.toStringTag : void 0;
|
|
function getRawTag(value) {
|
|
var isOwn = hasOwnProperty$o.call(value, symToStringTag$1), tag = value[symToStringTag$1];
|
|
try {
|
|
value[symToStringTag$1] = void 0;
|
|
var unmasked = true;
|
|
} catch (e) {
|
|
}
|
|
var result = nativeObjectToString$3.call(value);
|
|
if (unmasked) {
|
|
if (isOwn) {
|
|
value[symToStringTag$1] = tag;
|
|
} else {
|
|
delete value[symToStringTag$1];
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
var objectProto$r = Object.prototype;
|
|
var nativeObjectToString$2 = objectProto$r.toString;
|
|
function objectToString(value) {
|
|
return nativeObjectToString$2.call(value);
|
|
}
|
|
|
|
var nullTag = "[object Null]";
|
|
var undefinedTag = "[object Undefined]";
|
|
var symToStringTag = Symbol$1 ? Symbol$1.toStringTag : void 0;
|
|
function baseGetTag(value) {
|
|
if (value == null) {
|
|
return value === void 0 ? undefinedTag : nullTag;
|
|
}
|
|
return symToStringTag && symToStringTag in Object(value) ? getRawTag(value) : objectToString(value);
|
|
}
|
|
|
|
function isObjectLike(value) {
|
|
return value != null && typeof value == "object";
|
|
}
|
|
|
|
var symbolTag$3 = "[object Symbol]";
|
|
function isSymbol(value) {
|
|
return typeof value == "symbol" || isObjectLike(value) && baseGetTag(value) == symbolTag$3;
|
|
}
|
|
|
|
var NAN$2 = 0 / 0;
|
|
function baseToNumber(value) {
|
|
if (typeof value == "number") {
|
|
return value;
|
|
}
|
|
if (isSymbol(value)) {
|
|
return NAN$2;
|
|
}
|
|
return +value;
|
|
}
|
|
|
|
function arrayMap(array, iteratee) {
|
|
var index = -1, length = array == null ? 0 : array.length, result = Array(length);
|
|
while (++index < length) {
|
|
result[index] = iteratee(array[index], index, array);
|
|
}
|
|
return result;
|
|
}
|
|
|
|
var isArray = Array.isArray;
|
|
|
|
var INFINITY$5 = 1 / 0;
|
|
var symbolProto$2 = Symbol$1 ? Symbol$1.prototype : void 0;
|
|
var symbolToString = symbolProto$2 ? symbolProto$2.toString : void 0;
|
|
function baseToString(value) {
|
|
if (typeof value == "string") {
|
|
return value;
|
|
}
|
|
if (isArray(value)) {
|
|
return arrayMap(value, baseToString) + "";
|
|
}
|
|
if (isSymbol(value)) {
|
|
return symbolToString ? symbolToString.call(value) : "";
|
|
}
|
|
var result = value + "";
|
|
return result == "0" && 1 / value == -INFINITY$5 ? "-0" : result;
|
|
}
|
|
|
|
function createMathOperation(operator, defaultValue) {
|
|
return function(value, other) {
|
|
var result;
|
|
if (value === void 0 && other === void 0) {
|
|
return defaultValue;
|
|
}
|
|
if (value !== void 0) {
|
|
result = value;
|
|
}
|
|
if (other !== void 0) {
|
|
if (result === void 0) {
|
|
return other;
|
|
}
|
|
if (typeof value == "string" || typeof other == "string") {
|
|
value = baseToString(value);
|
|
other = baseToString(other);
|
|
} else {
|
|
value = baseToNumber(value);
|
|
other = baseToNumber(other);
|
|
}
|
|
result = operator(value, other);
|
|
}
|
|
return result;
|
|
};
|
|
}
|
|
|
|
var add = createMathOperation(function(augend, addend) {
|
|
return augend + addend;
|
|
}, 0);
|
|
|
|
var reWhitespace = /\s/;
|
|
function trimmedEndIndex(string) {
|
|
var index = string.length;
|
|
while (index-- && reWhitespace.test(string.charAt(index))) {
|
|
}
|
|
return index;
|
|
}
|
|
|
|
var reTrimStart$2 = /^\s+/;
|
|
function baseTrim(string) {
|
|
return string ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart$2, "") : string;
|
|
}
|
|
|
|
function isObject(value) {
|
|
var type = typeof value;
|
|
return value != null && (type == "object" || type == "function");
|
|
}
|
|
|
|
var NAN$1 = 0 / 0;
|
|
var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
|
|
var reIsBinary = /^0b[01]+$/i;
|
|
var reIsOctal = /^0o[0-7]+$/i;
|
|
var freeParseInt = parseInt;
|
|
function toNumber(value) {
|
|
if (typeof value == "number") {
|
|
return value;
|
|
}
|
|
if (isSymbol(value)) {
|
|
return NAN$1;
|
|
}
|
|
if (isObject(value)) {
|
|
var other = typeof value.valueOf == "function" ? value.valueOf() : value;
|
|
value = isObject(other) ? other + "" : other;
|
|
}
|
|
if (typeof value != "string") {
|
|
return value === 0 ? value : +value;
|
|
}
|
|
value = baseTrim(value);
|
|
var isBinary = reIsBinary.test(value);
|
|
return isBinary || reIsOctal.test(value) ? freeParseInt(value.slice(2), isBinary ? 2 : 8) : reIsBadHex.test(value) ? NAN$1 : +value;
|
|
}
|
|
|
|
var INFINITY$4 = 1 / 0;
|
|
var MAX_INTEGER = 17976931348623157e292;
|
|
function toFinite(value) {
|
|
if (!value) {
|
|
return value === 0 ? value : 0;
|
|
}
|
|
value = toNumber(value);
|
|
if (value === INFINITY$4 || value === -INFINITY$4) {
|
|
var sign = value < 0 ? -1 : 1;
|
|
return sign * MAX_INTEGER;
|
|
}
|
|
return value === value ? value : 0;
|
|
}
|
|
|
|
function toInteger(value) {
|
|
var result = toFinite(value), remainder = result % 1;
|
|
return result === result ? remainder ? result - remainder : result : 0;
|
|
}
|
|
|
|
var FUNC_ERROR_TEXT$b = "Expected a function";
|
|
function after(n, func) {
|
|
if (typeof func != "function") {
|
|
throw new TypeError(FUNC_ERROR_TEXT$b);
|
|
}
|
|
n = toInteger(n);
|
|
return function() {
|
|
if (--n < 1) {
|
|
return func.apply(this, arguments);
|
|
}
|
|
};
|
|
}
|
|
|
|
function identity(value) {
|
|
return value;
|
|
}
|
|
|
|
var asyncTag = "[object AsyncFunction]";
|
|
var funcTag$2 = "[object Function]";
|
|
var genTag$1 = "[object GeneratorFunction]";
|
|
var proxyTag = "[object Proxy]";
|
|
function isFunction(value) {
|
|
if (!isObject(value)) {
|
|
return false;
|
|
}
|
|
var tag = baseGetTag(value);
|
|
return tag == funcTag$2 || tag == genTag$1 || tag == asyncTag || tag == proxyTag;
|
|
}
|
|
|
|
var coreJsData = root["__core-js_shared__"];
|
|
|
|
var maskSrcKey = function() {
|
|
var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || "");
|
|
return uid ? "Symbol(src)_1." + uid : "";
|
|
}();
|
|
function isMasked(func) {
|
|
return !!maskSrcKey && maskSrcKey in func;
|
|
}
|
|
|
|
var funcProto$2 = Function.prototype;
|
|
var funcToString$2 = funcProto$2.toString;
|
|
function toSource(func) {
|
|
if (func != null) {
|
|
try {
|
|
return funcToString$2.call(func);
|
|
} catch (e) {
|
|
}
|
|
try {
|
|
return func + "";
|
|
} catch (e) {
|
|
}
|
|
}
|
|
return "";
|
|
}
|
|
|
|
var reRegExpChar$1 = /[\\^$.*+?()[\]{}|]/g;
|
|
var reIsHostCtor = /^\[object .+?Constructor\]$/;
|
|
var funcProto$1 = Function.prototype;
|
|
var objectProto$q = Object.prototype;
|
|
var funcToString$1 = funcProto$1.toString;
|
|
var hasOwnProperty$n = objectProto$q.hasOwnProperty;
|
|
var reIsNative = RegExp("^" + funcToString$1.call(hasOwnProperty$n).replace(reRegExpChar$1, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$");
|
|
function baseIsNative(value) {
|
|
if (!isObject(value) || isMasked(value)) {
|
|
return false;
|
|
}
|
|
var pattern = isFunction(value) ? reIsNative : reIsHostCtor;
|
|
return pattern.test(toSource(value));
|
|
}
|
|
|
|
function getValue$1(object, key) {
|
|
return object == null ? void 0 : object[key];
|
|
}
|
|
|
|
function getNative(object, key) {
|
|
var value = getValue$1(object, key);
|
|
return baseIsNative(value) ? value : void 0;
|
|
}
|
|
|
|
var WeakMap = getNative(root, "WeakMap");
|
|
|
|
var metaMap = WeakMap && new WeakMap();
|
|
|
|
var baseSetData = !metaMap ? identity : function(func, data) {
|
|
metaMap.set(func, data);
|
|
return func;
|
|
};
|
|
|
|
var objectCreate = Object.create;
|
|
var baseCreate = function() {
|
|
function object() {
|
|
}
|
|
return function(proto) {
|
|
if (!isObject(proto)) {
|
|
return {};
|
|
}
|
|
if (objectCreate) {
|
|
return objectCreate(proto);
|
|
}
|
|
object.prototype = proto;
|
|
var result = new object();
|
|
object.prototype = void 0;
|
|
return result;
|
|
};
|
|
}();
|
|
|
|
function createCtor(Ctor) {
|
|
return function() {
|
|
var args = arguments;
|
|
switch (args.length) {
|
|
case 0:
|
|
return new Ctor();
|
|
case 1:
|
|
return new Ctor(args[0]);
|
|
case 2:
|
|
return new Ctor(args[0], args[1]);
|
|
case 3:
|
|
return new Ctor(args[0], args[1], args[2]);
|
|
case 4:
|
|
return new Ctor(args[0], args[1], args[2], args[3]);
|
|
case 5:
|
|
return new Ctor(args[0], args[1], args[2], args[3], args[4]);
|
|
case 6:
|
|
return new Ctor(args[0], args[1], args[2], args[3], args[4], args[5]);
|
|
case 7:
|
|
return new Ctor(args[0], args[1], args[2], args[3], args[4], args[5], args[6]);
|
|
}
|
|
var thisBinding = baseCreate(Ctor.prototype), result = Ctor.apply(thisBinding, args);
|
|
return isObject(result) ? result : thisBinding;
|
|
};
|
|
}
|
|
|
|
var WRAP_BIND_FLAG$8 = 1;
|
|
function createBind(func, bitmask, thisArg) {
|
|
var isBind = bitmask & WRAP_BIND_FLAG$8, Ctor = createCtor(func);
|
|
function wrapper() {
|
|
var fn = this && this !== root && this instanceof wrapper ? Ctor : func;
|
|
return fn.apply(isBind ? thisArg : this, arguments);
|
|
}
|
|
return wrapper;
|
|
}
|
|
|
|
function apply(func, thisArg, args) {
|
|
switch (args.length) {
|
|
case 0:
|
|
return func.call(thisArg);
|
|
case 1:
|
|
return func.call(thisArg, args[0]);
|
|
case 2:
|
|
return func.call(thisArg, args[0], args[1]);
|
|
case 3:
|
|
return func.call(thisArg, args[0], args[1], args[2]);
|
|
}
|
|
return func.apply(thisArg, args);
|
|
}
|
|
|
|
var nativeMax$g = Math.max;
|
|
function composeArgs(args, partials, holders, isCurried) {
|
|
var argsIndex = -1, argsLength = args.length, holdersLength = holders.length, leftIndex = -1, leftLength = partials.length, rangeLength = nativeMax$g(argsLength - holdersLength, 0), result = Array(leftLength + rangeLength), isUncurried = !isCurried;
|
|
while (++leftIndex < leftLength) {
|
|
result[leftIndex] = partials[leftIndex];
|
|
}
|
|
while (++argsIndex < holdersLength) {
|
|
if (isUncurried || argsIndex < argsLength) {
|
|
result[holders[argsIndex]] = args[argsIndex];
|
|
}
|
|
}
|
|
while (rangeLength--) {
|
|
result[leftIndex++] = args[argsIndex++];
|
|
}
|
|
return result;
|
|
}
|
|
|
|
var nativeMax$f = Math.max;
|
|
function composeArgsRight(args, partials, holders, isCurried) {
|
|
var argsIndex = -1, argsLength = args.length, holdersIndex = -1, holdersLength = holders.length, rightIndex = -1, rightLength = partials.length, rangeLength = nativeMax$f(argsLength - holdersLength, 0), result = Array(rangeLength + rightLength), isUncurried = !isCurried;
|
|
while (++argsIndex < rangeLength) {
|
|
result[argsIndex] = args[argsIndex];
|
|
}
|
|
var offset = argsIndex;
|
|
while (++rightIndex < rightLength) {
|
|
result[offset + rightIndex] = partials[rightIndex];
|
|
}
|
|
while (++holdersIndex < holdersLength) {
|
|
if (isUncurried || argsIndex < argsLength) {
|
|
result[offset + holders[holdersIndex]] = args[argsIndex++];
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function countHolders(array, placeholder) {
|
|
var length = array.length, result = 0;
|
|
while (length--) {
|
|
if (array[length] === placeholder) {
|
|
++result;
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function baseLodash() {
|
|
}
|
|
|
|
var MAX_ARRAY_LENGTH$6 = 4294967295;
|
|
function LazyWrapper(value) {
|
|
this.__wrapped__ = value;
|
|
this.__actions__ = [];
|
|
this.__dir__ = 1;
|
|
this.__filtered__ = false;
|
|
this.__iteratees__ = [];
|
|
this.__takeCount__ = MAX_ARRAY_LENGTH$6;
|
|
this.__views__ = [];
|
|
}
|
|
LazyWrapper.prototype = baseCreate(baseLodash.prototype);
|
|
LazyWrapper.prototype.constructor = LazyWrapper;
|
|
|
|
function noop() {
|
|
}
|
|
|
|
var getData = !metaMap ? noop : function(func) {
|
|
return metaMap.get(func);
|
|
};
|
|
|
|
var realNames = {};
|
|
|
|
var objectProto$p = Object.prototype;
|
|
var hasOwnProperty$m = objectProto$p.hasOwnProperty;
|
|
function getFuncName(func) {
|
|
var result = func.name + "", array = realNames[result], length = hasOwnProperty$m.call(realNames, result) ? array.length : 0;
|
|
while (length--) {
|
|
var data = array[length], otherFunc = data.func;
|
|
if (otherFunc == null || otherFunc == func) {
|
|
return data.name;
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function LodashWrapper(value, chainAll) {
|
|
this.__wrapped__ = value;
|
|
this.__actions__ = [];
|
|
this.__chain__ = !!chainAll;
|
|
this.__index__ = 0;
|
|
this.__values__ = void 0;
|
|
}
|
|
LodashWrapper.prototype = baseCreate(baseLodash.prototype);
|
|
LodashWrapper.prototype.constructor = LodashWrapper;
|
|
|
|
function copyArray(source, array) {
|
|
var index = -1, length = source.length;
|
|
array || (array = Array(length));
|
|
while (++index < length) {
|
|
array[index] = source[index];
|
|
}
|
|
return array;
|
|
}
|
|
|
|
function wrapperClone(wrapper) {
|
|
if (wrapper instanceof LazyWrapper) {
|
|
return wrapper.clone();
|
|
}
|
|
var result = new LodashWrapper(wrapper.__wrapped__, wrapper.__chain__);
|
|
result.__actions__ = copyArray(wrapper.__actions__);
|
|
result.__index__ = wrapper.__index__;
|
|
result.__values__ = wrapper.__values__;
|
|
return result;
|
|
}
|
|
|
|
var objectProto$o = Object.prototype;
|
|
var hasOwnProperty$l = objectProto$o.hasOwnProperty;
|
|
function lodash(value) {
|
|
if (isObjectLike(value) && !isArray(value) && !(value instanceof LazyWrapper)) {
|
|
if (value instanceof LodashWrapper) {
|
|
return value;
|
|
}
|
|
if (hasOwnProperty$l.call(value, "__wrapped__")) {
|
|
return wrapperClone(value);
|
|
}
|
|
}
|
|
return new LodashWrapper(value);
|
|
}
|
|
lodash.prototype = baseLodash.prototype;
|
|
lodash.prototype.constructor = lodash;
|
|
|
|
function isLaziable(func) {
|
|
var funcName = getFuncName(func), other = lodash[funcName];
|
|
if (typeof other != "function" || !(funcName in LazyWrapper.prototype)) {
|
|
return false;
|
|
}
|
|
if (func === other) {
|
|
return true;
|
|
}
|
|
var data = getData(other);
|
|
return !!data && func === data[0];
|
|
}
|
|
|
|
var HOT_COUNT = 800;
|
|
var HOT_SPAN = 16;
|
|
var nativeNow = Date.now;
|
|
function shortOut(func) {
|
|
var count = 0, lastCalled = 0;
|
|
return function() {
|
|
var stamp = nativeNow(), remaining = HOT_SPAN - (stamp - lastCalled);
|
|
lastCalled = stamp;
|
|
if (remaining > 0) {
|
|
if (++count >= HOT_COUNT) {
|
|
return arguments[0];
|
|
}
|
|
} else {
|
|
count = 0;
|
|
}
|
|
return func.apply(void 0, arguments);
|
|
};
|
|
}
|
|
|
|
var setData = shortOut(baseSetData);
|
|
|
|
var reWrapDetails = /\{\n\/\* \[wrapped with (.+)\] \*/;
|
|
var reSplitDetails = /,? & /;
|
|
function getWrapDetails(source) {
|
|
var match = source.match(reWrapDetails);
|
|
return match ? match[1].split(reSplitDetails) : [];
|
|
}
|
|
|
|
var reWrapComment = /\{(?:\n\/\* \[wrapped with .+\] \*\/)?\n?/;
|
|
function insertWrapDetails(source, details) {
|
|
var length = details.length;
|
|
if (!length) {
|
|
return source;
|
|
}
|
|
var lastIndex = length - 1;
|
|
details[lastIndex] = (length > 1 ? "& " : "") + details[lastIndex];
|
|
details = details.join(length > 2 ? ", " : " ");
|
|
return source.replace(reWrapComment, "{\n/* [wrapped with " + details + "] */\n");
|
|
}
|
|
|
|
function constant(value) {
|
|
return function() {
|
|
return value;
|
|
};
|
|
}
|
|
|
|
var defineProperty = function() {
|
|
try {
|
|
var func = getNative(Object, "defineProperty");
|
|
func({}, "", {});
|
|
return func;
|
|
} catch (e) {
|
|
}
|
|
}();
|
|
|
|
var baseSetToString = !defineProperty ? identity : function(func, string) {
|
|
return defineProperty(func, "toString", {
|
|
"configurable": true,
|
|
"enumerable": false,
|
|
"value": constant(string),
|
|
"writable": true
|
|
});
|
|
};
|
|
|
|
var setToString = shortOut(baseSetToString);
|
|
|
|
function arrayEach(array, iteratee) {
|
|
var index = -1, length = array == null ? 0 : array.length;
|
|
while (++index < length) {
|
|
if (iteratee(array[index], index, array) === false) {
|
|
break;
|
|
}
|
|
}
|
|
return array;
|
|
}
|
|
|
|
function baseFindIndex(array, predicate, fromIndex, fromRight) {
|
|
var length = array.length, index = fromIndex + (fromRight ? 1 : -1);
|
|
while (fromRight ? index-- : ++index < length) {
|
|
if (predicate(array[index], index, array)) {
|
|
return index;
|
|
}
|
|
}
|
|
return -1;
|
|
}
|
|
|
|
function baseIsNaN(value) {
|
|
return value !== value;
|
|
}
|
|
|
|
function strictIndexOf(array, value, fromIndex) {
|
|
var index = fromIndex - 1, length = array.length;
|
|
while (++index < length) {
|
|
if (array[index] === value) {
|
|
return index;
|
|
}
|
|
}
|
|
return -1;
|
|
}
|
|
|
|
function baseIndexOf(array, value, fromIndex) {
|
|
return value === value ? strictIndexOf(array, value, fromIndex) : baseFindIndex(array, baseIsNaN, fromIndex);
|
|
}
|
|
|
|
function arrayIncludes(array, value) {
|
|
var length = array == null ? 0 : array.length;
|
|
return !!length && baseIndexOf(array, value, 0) > -1;
|
|
}
|
|
|
|
var WRAP_BIND_FLAG$7 = 1;
|
|
var WRAP_BIND_KEY_FLAG$6 = 2;
|
|
var WRAP_CURRY_FLAG$6 = 8;
|
|
var WRAP_CURRY_RIGHT_FLAG$3 = 16;
|
|
var WRAP_PARTIAL_FLAG$6 = 32;
|
|
var WRAP_PARTIAL_RIGHT_FLAG$3 = 64;
|
|
var WRAP_ARY_FLAG$4 = 128;
|
|
var WRAP_REARG_FLAG$3 = 256;
|
|
var WRAP_FLIP_FLAG$2 = 512;
|
|
var wrapFlags = [
|
|
["ary", WRAP_ARY_FLAG$4],
|
|
["bind", WRAP_BIND_FLAG$7],
|
|
["bindKey", WRAP_BIND_KEY_FLAG$6],
|
|
["curry", WRAP_CURRY_FLAG$6],
|
|
["curryRight", WRAP_CURRY_RIGHT_FLAG$3],
|
|
["flip", WRAP_FLIP_FLAG$2],
|
|
["partial", WRAP_PARTIAL_FLAG$6],
|
|
["partialRight", WRAP_PARTIAL_RIGHT_FLAG$3],
|
|
["rearg", WRAP_REARG_FLAG$3]
|
|
];
|
|
function updateWrapDetails(details, bitmask) {
|
|
arrayEach(wrapFlags, function(pair) {
|
|
var value = "_." + pair[0];
|
|
if (bitmask & pair[1] && !arrayIncludes(details, value)) {
|
|
details.push(value);
|
|
}
|
|
});
|
|
return details.sort();
|
|
}
|
|
|
|
function setWrapToString(wrapper, reference, bitmask) {
|
|
var source = reference + "";
|
|
return setToString(wrapper, insertWrapDetails(source, updateWrapDetails(getWrapDetails(source), bitmask)));
|
|
}
|
|
|
|
var WRAP_BIND_FLAG$6 = 1;
|
|
var WRAP_BIND_KEY_FLAG$5 = 2;
|
|
var WRAP_CURRY_BOUND_FLAG$1 = 4;
|
|
var WRAP_CURRY_FLAG$5 = 8;
|
|
var WRAP_PARTIAL_FLAG$5 = 32;
|
|
var WRAP_PARTIAL_RIGHT_FLAG$2 = 64;
|
|
function createRecurry(func, bitmask, wrapFunc, placeholder, thisArg, partials, holders, argPos, ary, arity) {
|
|
var isCurry = bitmask & WRAP_CURRY_FLAG$5, newHolders = isCurry ? holders : void 0, newHoldersRight = isCurry ? void 0 : holders, newPartials = isCurry ? partials : void 0, newPartialsRight = isCurry ? void 0 : partials;
|
|
bitmask |= isCurry ? WRAP_PARTIAL_FLAG$5 : WRAP_PARTIAL_RIGHT_FLAG$2;
|
|
bitmask &= ~(isCurry ? WRAP_PARTIAL_RIGHT_FLAG$2 : WRAP_PARTIAL_FLAG$5);
|
|
if (!(bitmask & WRAP_CURRY_BOUND_FLAG$1)) {
|
|
bitmask &= ~(WRAP_BIND_FLAG$6 | WRAP_BIND_KEY_FLAG$5);
|
|
}
|
|
var newData = [
|
|
func,
|
|
bitmask,
|
|
thisArg,
|
|
newPartials,
|
|
newHolders,
|
|
newPartialsRight,
|
|
newHoldersRight,
|
|
argPos,
|
|
ary,
|
|
arity
|
|
];
|
|
var result = wrapFunc.apply(void 0, newData);
|
|
if (isLaziable(func)) {
|
|
setData(result, newData);
|
|
}
|
|
result.placeholder = placeholder;
|
|
return setWrapToString(result, func, bitmask);
|
|
}
|
|
|
|
function getHolder(func) {
|
|
var object = func;
|
|
return object.placeholder;
|
|
}
|
|
|
|
var MAX_SAFE_INTEGER$5 = 9007199254740991;
|
|
var reIsUint = /^(?:0|[1-9]\d*)$/;
|
|
function isIndex(value, length) {
|
|
var type = typeof value;
|
|
length = length == null ? MAX_SAFE_INTEGER$5 : length;
|
|
return !!length && (type == "number" || type != "symbol" && reIsUint.test(value)) && (value > -1 && value % 1 == 0 && value < length);
|
|
}
|
|
|
|
var nativeMin$e = Math.min;
|
|
function reorder(array, indexes) {
|
|
var arrLength = array.length, length = nativeMin$e(indexes.length, arrLength), oldArray = copyArray(array);
|
|
while (length--) {
|
|
var index = indexes[length];
|
|
array[length] = isIndex(index, arrLength) ? oldArray[index] : void 0;
|
|
}
|
|
return array;
|
|
}
|
|
|
|
var PLACEHOLDER$1 = "__lodash_placeholder__";
|
|
function replaceHolders(array, placeholder) {
|
|
var index = -1, length = array.length, resIndex = 0, result = [];
|
|
while (++index < length) {
|
|
var value = array[index];
|
|
if (value === placeholder || value === PLACEHOLDER$1) {
|
|
array[index] = PLACEHOLDER$1;
|
|
result[resIndex++] = index;
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
var WRAP_BIND_FLAG$5 = 1;
|
|
var WRAP_BIND_KEY_FLAG$4 = 2;
|
|
var WRAP_CURRY_FLAG$4 = 8;
|
|
var WRAP_CURRY_RIGHT_FLAG$2 = 16;
|
|
var WRAP_ARY_FLAG$3 = 128;
|
|
var WRAP_FLIP_FLAG$1 = 512;
|
|
function createHybrid(func, bitmask, thisArg, partials, holders, partialsRight, holdersRight, argPos, ary, arity) {
|
|
var isAry = bitmask & WRAP_ARY_FLAG$3, isBind = bitmask & WRAP_BIND_FLAG$5, isBindKey = bitmask & WRAP_BIND_KEY_FLAG$4, isCurried = bitmask & (WRAP_CURRY_FLAG$4 | WRAP_CURRY_RIGHT_FLAG$2), isFlip = bitmask & WRAP_FLIP_FLAG$1, Ctor = isBindKey ? void 0 : createCtor(func);
|
|
function wrapper() {
|
|
var length = arguments.length, args = Array(length), index = length;
|
|
while (index--) {
|
|
args[index] = arguments[index];
|
|
}
|
|
if (isCurried) {
|
|
var placeholder = getHolder(wrapper), holdersCount = countHolders(args, placeholder);
|
|
}
|
|
if (partials) {
|
|
args = composeArgs(args, partials, holders, isCurried);
|
|
}
|
|
if (partialsRight) {
|
|
args = composeArgsRight(args, partialsRight, holdersRight, isCurried);
|
|
}
|
|
length -= holdersCount;
|
|
if (isCurried && length < arity) {
|
|
var newHolders = replaceHolders(args, placeholder);
|
|
return createRecurry(func, bitmask, createHybrid, wrapper.placeholder, thisArg, args, newHolders, argPos, ary, arity - length);
|
|
}
|
|
var thisBinding = isBind ? thisArg : this, fn = isBindKey ? thisBinding[func] : func;
|
|
length = args.length;
|
|
if (argPos) {
|
|
args = reorder(args, argPos);
|
|
} else if (isFlip && length > 1) {
|
|
args.reverse();
|
|
}
|
|
if (isAry && ary < length) {
|
|
args.length = ary;
|
|
}
|
|
if (this && this !== root && this instanceof wrapper) {
|
|
fn = Ctor || createCtor(fn);
|
|
}
|
|
return fn.apply(thisBinding, args);
|
|
}
|
|
return wrapper;
|
|
}
|
|
|
|
function createCurry(func, bitmask, arity) {
|
|
var Ctor = createCtor(func);
|
|
function wrapper() {
|
|
var length = arguments.length, args = Array(length), index = length, placeholder = getHolder(wrapper);
|
|
while (index--) {
|
|
args[index] = arguments[index];
|
|
}
|
|
var holders = length < 3 && args[0] !== placeholder && args[length - 1] !== placeholder ? [] : replaceHolders(args, placeholder);
|
|
length -= holders.length;
|
|
if (length < arity) {
|
|
return createRecurry(func, bitmask, createHybrid, wrapper.placeholder, void 0, args, holders, void 0, void 0, arity - length);
|
|
}
|
|
var fn = this && this !== root && this instanceof wrapper ? Ctor : func;
|
|
return apply(fn, this, args);
|
|
}
|
|
return wrapper;
|
|
}
|
|
|
|
var WRAP_BIND_FLAG$4 = 1;
|
|
function createPartial(func, bitmask, thisArg, partials) {
|
|
var isBind = bitmask & WRAP_BIND_FLAG$4, Ctor = createCtor(func);
|
|
function wrapper() {
|
|
var argsIndex = -1, argsLength = arguments.length, leftIndex = -1, leftLength = partials.length, args = Array(leftLength + argsLength), fn = this && this !== root && this instanceof wrapper ? Ctor : func;
|
|
while (++leftIndex < leftLength) {
|
|
args[leftIndex] = partials[leftIndex];
|
|
}
|
|
while (argsLength--) {
|
|
args[leftIndex++] = arguments[++argsIndex];
|
|
}
|
|
return apply(fn, isBind ? thisArg : this, args);
|
|
}
|
|
return wrapper;
|
|
}
|
|
|
|
var PLACEHOLDER = "__lodash_placeholder__";
|
|
var WRAP_BIND_FLAG$3 = 1;
|
|
var WRAP_BIND_KEY_FLAG$3 = 2;
|
|
var WRAP_CURRY_BOUND_FLAG = 4;
|
|
var WRAP_CURRY_FLAG$3 = 8;
|
|
var WRAP_ARY_FLAG$2 = 128;
|
|
var WRAP_REARG_FLAG$2 = 256;
|
|
var nativeMin$d = Math.min;
|
|
function mergeData(data, source) {
|
|
var bitmask = data[1], srcBitmask = source[1], newBitmask = bitmask | srcBitmask, isCommon = newBitmask < (WRAP_BIND_FLAG$3 | WRAP_BIND_KEY_FLAG$3 | WRAP_ARY_FLAG$2);
|
|
var isCombo = srcBitmask == WRAP_ARY_FLAG$2 && bitmask == WRAP_CURRY_FLAG$3 || srcBitmask == WRAP_ARY_FLAG$2 && bitmask == WRAP_REARG_FLAG$2 && data[7].length <= source[8] || srcBitmask == (WRAP_ARY_FLAG$2 | WRAP_REARG_FLAG$2) && source[7].length <= source[8] && bitmask == WRAP_CURRY_FLAG$3;
|
|
if (!(isCommon || isCombo)) {
|
|
return data;
|
|
}
|
|
if (srcBitmask & WRAP_BIND_FLAG$3) {
|
|
data[2] = source[2];
|
|
newBitmask |= bitmask & WRAP_BIND_FLAG$3 ? 0 : WRAP_CURRY_BOUND_FLAG;
|
|
}
|
|
var value = source[3];
|
|
if (value) {
|
|
var partials = data[3];
|
|
data[3] = partials ? composeArgs(partials, value, source[4]) : value;
|
|
data[4] = partials ? replaceHolders(data[3], PLACEHOLDER) : source[4];
|
|
}
|
|
value = source[5];
|
|
if (value) {
|
|
partials = data[5];
|
|
data[5] = partials ? composeArgsRight(partials, value, source[6]) : value;
|
|
data[6] = partials ? replaceHolders(data[5], PLACEHOLDER) : source[6];
|
|
}
|
|
value = source[7];
|
|
if (value) {
|
|
data[7] = value;
|
|
}
|
|
if (srcBitmask & WRAP_ARY_FLAG$2) {
|
|
data[8] = data[8] == null ? source[8] : nativeMin$d(data[8], source[8]);
|
|
}
|
|
if (data[9] == null) {
|
|
data[9] = source[9];
|
|
}
|
|
data[0] = source[0];
|
|
data[1] = newBitmask;
|
|
return data;
|
|
}
|
|
|
|
var FUNC_ERROR_TEXT$a = "Expected a function";
|
|
var WRAP_BIND_FLAG$2 = 1;
|
|
var WRAP_BIND_KEY_FLAG$2 = 2;
|
|
var WRAP_CURRY_FLAG$2 = 8;
|
|
var WRAP_CURRY_RIGHT_FLAG$1 = 16;
|
|
var WRAP_PARTIAL_FLAG$4 = 32;
|
|
var WRAP_PARTIAL_RIGHT_FLAG$1 = 64;
|
|
var nativeMax$e = Math.max;
|
|
function createWrap(func, bitmask, thisArg, partials, holders, argPos, ary, arity) {
|
|
var isBindKey = bitmask & WRAP_BIND_KEY_FLAG$2;
|
|
if (!isBindKey && typeof func != "function") {
|
|
throw new TypeError(FUNC_ERROR_TEXT$a);
|
|
}
|
|
var length = partials ? partials.length : 0;
|
|
if (!length) {
|
|
bitmask &= ~(WRAP_PARTIAL_FLAG$4 | WRAP_PARTIAL_RIGHT_FLAG$1);
|
|
partials = holders = void 0;
|
|
}
|
|
ary = ary === void 0 ? ary : nativeMax$e(toInteger(ary), 0);
|
|
arity = arity === void 0 ? arity : toInteger(arity);
|
|
length -= holders ? holders.length : 0;
|
|
if (bitmask & WRAP_PARTIAL_RIGHT_FLAG$1) {
|
|
var partialsRight = partials, holdersRight = holders;
|
|
partials = holders = void 0;
|
|
}
|
|
var data = isBindKey ? void 0 : getData(func);
|
|
var newData = [
|
|
func,
|
|
bitmask,
|
|
thisArg,
|
|
partials,
|
|
holders,
|
|
partialsRight,
|
|
holdersRight,
|
|
argPos,
|
|
ary,
|
|
arity
|
|
];
|
|
if (data) {
|
|
mergeData(newData, data);
|
|
}
|
|
func = newData[0];
|
|
bitmask = newData[1];
|
|
thisArg = newData[2];
|
|
partials = newData[3];
|
|
holders = newData[4];
|
|
arity = newData[9] = newData[9] === void 0 ? isBindKey ? 0 : func.length : nativeMax$e(newData[9] - length, 0);
|
|
if (!arity && bitmask & (WRAP_CURRY_FLAG$2 | WRAP_CURRY_RIGHT_FLAG$1)) {
|
|
bitmask &= ~(WRAP_CURRY_FLAG$2 | WRAP_CURRY_RIGHT_FLAG$1);
|
|
}
|
|
if (!bitmask || bitmask == WRAP_BIND_FLAG$2) {
|
|
var result = createBind(func, bitmask, thisArg);
|
|
} else if (bitmask == WRAP_CURRY_FLAG$2 || bitmask == WRAP_CURRY_RIGHT_FLAG$1) {
|
|
result = createCurry(func, bitmask, arity);
|
|
} else if ((bitmask == WRAP_PARTIAL_FLAG$4 || bitmask == (WRAP_BIND_FLAG$2 | WRAP_PARTIAL_FLAG$4)) && !holders.length) {
|
|
result = createPartial(func, bitmask, thisArg, partials);
|
|
} else {
|
|
result = createHybrid.apply(void 0, newData);
|
|
}
|
|
var setter = data ? baseSetData : setData;
|
|
return setWrapToString(setter(result, newData), func, bitmask);
|
|
}
|
|
|
|
var WRAP_ARY_FLAG$1 = 128;
|
|
function ary(func, n, guard) {
|
|
n = guard ? void 0 : n;
|
|
n = func && n == null ? func.length : n;
|
|
return createWrap(func, WRAP_ARY_FLAG$1, void 0, void 0, void 0, void 0, n);
|
|
}
|
|
|
|
function baseAssignValue(object, key, value) {
|
|
if (key == "__proto__" && defineProperty) {
|
|
defineProperty(object, key, {
|
|
"configurable": true,
|
|
"enumerable": true,
|
|
"value": value,
|
|
"writable": true
|
|
});
|
|
} else {
|
|
object[key] = value;
|
|
}
|
|
}
|
|
|
|
function eq(value, other) {
|
|
return value === other || value !== value && other !== other;
|
|
}
|
|
|
|
var objectProto$n = Object.prototype;
|
|
var hasOwnProperty$k = objectProto$n.hasOwnProperty;
|
|
function assignValue(object, key, value) {
|
|
var objValue = object[key];
|
|
if (!(hasOwnProperty$k.call(object, key) && eq(objValue, value)) || value === void 0 && !(key in object)) {
|
|
baseAssignValue(object, key, value);
|
|
}
|
|
}
|
|
|
|
function copyObject(source, props, object, customizer) {
|
|
var isNew = !object;
|
|
object || (object = {});
|
|
var index = -1, length = props.length;
|
|
while (++index < length) {
|
|
var key = props[index];
|
|
var newValue = customizer ? customizer(object[key], source[key], key, object, source) : void 0;
|
|
if (newValue === void 0) {
|
|
newValue = source[key];
|
|
}
|
|
if (isNew) {
|
|
baseAssignValue(object, key, newValue);
|
|
} else {
|
|
assignValue(object, key, newValue);
|
|
}
|
|
}
|
|
return object;
|
|
}
|
|
|
|
var nativeMax$d = Math.max;
|
|
function overRest(func, start, transform) {
|
|
start = nativeMax$d(start === void 0 ? func.length - 1 : start, 0);
|
|
return function() {
|
|
var args = arguments, index = -1, length = nativeMax$d(args.length - start, 0), array = Array(length);
|
|
while (++index < length) {
|
|
array[index] = args[start + index];
|
|
}
|
|
index = -1;
|
|
var otherArgs = Array(start + 1);
|
|
while (++index < start) {
|
|
otherArgs[index] = args[index];
|
|
}
|
|
otherArgs[start] = transform(array);
|
|
return apply(func, this, otherArgs);
|
|
};
|
|
}
|
|
|
|
function baseRest(func, start) {
|
|
return setToString(overRest(func, start, identity), func + "");
|
|
}
|
|
|
|
var MAX_SAFE_INTEGER$4 = 9007199254740991;
|
|
function isLength(value) {
|
|
return typeof value == "number" && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER$4;
|
|
}
|
|
|
|
function isArrayLike(value) {
|
|
return value != null && isLength(value.length) && !isFunction(value);
|
|
}
|
|
|
|
function isIterateeCall(value, index, object) {
|
|
if (!isObject(object)) {
|
|
return false;
|
|
}
|
|
var type = typeof index;
|
|
if (type == "number" ? isArrayLike(object) && isIndex(index, object.length) : type == "string" && index in object) {
|
|
return eq(object[index], value);
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function createAssigner(assigner) {
|
|
return baseRest(function(object, sources) {
|
|
var index = -1, length = sources.length, customizer = length > 1 ? sources[length - 1] : void 0, guard = length > 2 ? sources[2] : void 0;
|
|
customizer = assigner.length > 3 && typeof customizer == "function" ? (length--, customizer) : void 0;
|
|
if (guard && isIterateeCall(sources[0], sources[1], guard)) {
|
|
customizer = length < 3 ? void 0 : customizer;
|
|
length = 1;
|
|
}
|
|
object = Object(object);
|
|
while (++index < length) {
|
|
var source = sources[index];
|
|
if (source) {
|
|
assigner(object, source, index, customizer);
|
|
}
|
|
}
|
|
return object;
|
|
});
|
|
}
|
|
|
|
var objectProto$m = Object.prototype;
|
|
function isPrototype(value) {
|
|
var Ctor = value && value.constructor, proto = typeof Ctor == "function" && Ctor.prototype || objectProto$m;
|
|
return value === proto;
|
|
}
|
|
|
|
function baseTimes(n, iteratee) {
|
|
var index = -1, result = Array(n);
|
|
while (++index < n) {
|
|
result[index] = iteratee(index);
|
|
}
|
|
return result;
|
|
}
|
|
|
|
var argsTag$3 = "[object Arguments]";
|
|
function baseIsArguments(value) {
|
|
return isObjectLike(value) && baseGetTag(value) == argsTag$3;
|
|
}
|
|
|
|
var objectProto$l = Object.prototype;
|
|
var hasOwnProperty$j = objectProto$l.hasOwnProperty;
|
|
var propertyIsEnumerable$1 = objectProto$l.propertyIsEnumerable;
|
|
var isArguments = baseIsArguments(function() {
|
|
return arguments;
|
|
}()) ? baseIsArguments : function(value) {
|
|
return isObjectLike(value) && hasOwnProperty$j.call(value, "callee") && !propertyIsEnumerable$1.call(value, "callee");
|
|
};
|
|
|
|
function stubFalse() {
|
|
return false;
|
|
}
|
|
|
|
var freeExports$2 = typeof exports == "object" && exports && !exports.nodeType && exports;
|
|
var freeModule$2 = freeExports$2 && typeof module == "object" && module && !module.nodeType && module;
|
|
var moduleExports$2 = freeModule$2 && freeModule$2.exports === freeExports$2;
|
|
var Buffer$1 = moduleExports$2 ? root.Buffer : void 0;
|
|
var nativeIsBuffer = Buffer$1 ? Buffer$1.isBuffer : void 0;
|
|
var isBuffer = nativeIsBuffer || stubFalse;
|
|
|
|
var argsTag$2 = "[object Arguments]";
|
|
var arrayTag$2 = "[object Array]";
|
|
var boolTag$4 = "[object Boolean]";
|
|
var dateTag$4 = "[object Date]";
|
|
var errorTag$3 = "[object Error]";
|
|
var funcTag$1 = "[object Function]";
|
|
var mapTag$9 = "[object Map]";
|
|
var numberTag$4 = "[object Number]";
|
|
var objectTag$4 = "[object Object]";
|
|
var regexpTag$4 = "[object RegExp]";
|
|
var setTag$9 = "[object Set]";
|
|
var stringTag$4 = "[object String]";
|
|
var weakMapTag$3 = "[object WeakMap]";
|
|
var arrayBufferTag$4 = "[object ArrayBuffer]";
|
|
var dataViewTag$4 = "[object DataView]";
|
|
var float32Tag$2 = "[object Float32Array]";
|
|
var float64Tag$2 = "[object Float64Array]";
|
|
var int8Tag$2 = "[object Int8Array]";
|
|
var int16Tag$2 = "[object Int16Array]";
|
|
var int32Tag$2 = "[object Int32Array]";
|
|
var uint8Tag$2 = "[object Uint8Array]";
|
|
var uint8ClampedTag$2 = "[object Uint8ClampedArray]";
|
|
var uint16Tag$2 = "[object Uint16Array]";
|
|
var uint32Tag$2 = "[object Uint32Array]";
|
|
var typedArrayTags = {};
|
|
typedArrayTags[float32Tag$2] = typedArrayTags[float64Tag$2] = typedArrayTags[int8Tag$2] = typedArrayTags[int16Tag$2] = typedArrayTags[int32Tag$2] = typedArrayTags[uint8Tag$2] = typedArrayTags[uint8ClampedTag$2] = typedArrayTags[uint16Tag$2] = typedArrayTags[uint32Tag$2] = true;
|
|
typedArrayTags[argsTag$2] = typedArrayTags[arrayTag$2] = typedArrayTags[arrayBufferTag$4] = typedArrayTags[boolTag$4] = typedArrayTags[dataViewTag$4] = typedArrayTags[dateTag$4] = typedArrayTags[errorTag$3] = typedArrayTags[funcTag$1] = typedArrayTags[mapTag$9] = typedArrayTags[numberTag$4] = typedArrayTags[objectTag$4] = typedArrayTags[regexpTag$4] = typedArrayTags[setTag$9] = typedArrayTags[stringTag$4] = typedArrayTags[weakMapTag$3] = false;
|
|
function baseIsTypedArray(value) {
|
|
return isObjectLike(value) && isLength(value.length) && !!typedArrayTags[baseGetTag(value)];
|
|
}
|
|
|
|
function baseUnary(func) {
|
|
return function(value) {
|
|
return func(value);
|
|
};
|
|
}
|
|
|
|
var freeExports$1 = typeof exports == "object" && exports && !exports.nodeType && exports;
|
|
var freeModule$1 = freeExports$1 && typeof module == "object" && module && !module.nodeType && module;
|
|
var moduleExports$1 = freeModule$1 && freeModule$1.exports === freeExports$1;
|
|
var freeProcess = moduleExports$1 && freeGlobal.process;
|
|
var nodeUtil = function() {
|
|
try {
|
|
var types = freeModule$1 && freeModule$1.require && freeModule$1.require("util").types;
|
|
if (types) {
|
|
return types;
|
|
}
|
|
return freeProcess && freeProcess.binding && freeProcess.binding("util");
|
|
} catch (e) {
|
|
}
|
|
}();
|
|
|
|
var nodeIsTypedArray = nodeUtil && nodeUtil.isTypedArray;
|
|
var isTypedArray = nodeIsTypedArray ? baseUnary(nodeIsTypedArray) : baseIsTypedArray;
|
|
|
|
var objectProto$k = Object.prototype;
|
|
var hasOwnProperty$i = objectProto$k.hasOwnProperty;
|
|
function arrayLikeKeys(value, inherited) {
|
|
var isArr = isArray(value), isArg = !isArr && isArguments(value), isBuff = !isArr && !isArg && isBuffer(value), isType = !isArr && !isArg && !isBuff && isTypedArray(value), skipIndexes = isArr || isArg || isBuff || isType, result = skipIndexes ? baseTimes(value.length, String) : [], length = result.length;
|
|
for (var key in value) {
|
|
if ((inherited || hasOwnProperty$i.call(value, key)) && !(skipIndexes && (key == "length" || isBuff && (key == "offset" || key == "parent") || isType && (key == "buffer" || key == "byteLength" || key == "byteOffset") || isIndex(key, length)))) {
|
|
result.push(key);
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function overArg(func, transform) {
|
|
return function(arg) {
|
|
return func(transform(arg));
|
|
};
|
|
}
|
|
|
|
var nativeKeys = overArg(Object.keys, Object);
|
|
|
|
var objectProto$j = Object.prototype;
|
|
var hasOwnProperty$h = objectProto$j.hasOwnProperty;
|
|
function baseKeys(object) {
|
|
if (!isPrototype(object)) {
|
|
return nativeKeys(object);
|
|
}
|
|
var result = [];
|
|
for (var key in Object(object)) {
|
|
if (hasOwnProperty$h.call(object, key) && key != "constructor") {
|
|
result.push(key);
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function keys(object) {
|
|
return isArrayLike(object) ? arrayLikeKeys(object) : baseKeys(object);
|
|
}
|
|
|
|
var objectProto$i = Object.prototype;
|
|
var hasOwnProperty$g = objectProto$i.hasOwnProperty;
|
|
var assign = createAssigner(function(object, source) {
|
|
if (isPrototype(source) || isArrayLike(source)) {
|
|
copyObject(source, keys(source), object);
|
|
return;
|
|
}
|
|
for (var key in source) {
|
|
if (hasOwnProperty$g.call(source, key)) {
|
|
assignValue(object, key, source[key]);
|
|
}
|
|
}
|
|
});
|
|
|
|
function nativeKeysIn(object) {
|
|
var result = [];
|
|
if (object != null) {
|
|
for (var key in Object(object)) {
|
|
result.push(key);
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
var objectProto$h = Object.prototype;
|
|
var hasOwnProperty$f = objectProto$h.hasOwnProperty;
|
|
function baseKeysIn(object) {
|
|
if (!isObject(object)) {
|
|
return nativeKeysIn(object);
|
|
}
|
|
var isProto = isPrototype(object), result = [];
|
|
for (var key in object) {
|
|
if (!(key == "constructor" && (isProto || !hasOwnProperty$f.call(object, key)))) {
|
|
result.push(key);
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function keysIn(object) {
|
|
return isArrayLike(object) ? arrayLikeKeys(object, true) : baseKeysIn(object);
|
|
}
|
|
|
|
var assignIn = createAssigner(function(object, source) {
|
|
copyObject(source, keysIn(source), object);
|
|
});
|
|
|
|
var assignInWith = createAssigner(function(object, source, srcIndex, customizer) {
|
|
copyObject(source, keysIn(source), object, customizer);
|
|
});
|
|
|
|
var assignWith = createAssigner(function(object, source, srcIndex, customizer) {
|
|
copyObject(source, keys(source), object, customizer);
|
|
});
|
|
|
|
var reIsDeepProp = /\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/;
|
|
var reIsPlainProp = /^\w*$/;
|
|
function isKey(value, object) {
|
|
if (isArray(value)) {
|
|
return false;
|
|
}
|
|
var type = typeof value;
|
|
if (type == "number" || type == "symbol" || type == "boolean" || value == null || isSymbol(value)) {
|
|
return true;
|
|
}
|
|
return reIsPlainProp.test(value) || !reIsDeepProp.test(value) || object != null && value in Object(object);
|
|
}
|
|
|
|
var nativeCreate = getNative(Object, "create");
|
|
|
|
function hashClear() {
|
|
this.__data__ = nativeCreate ? nativeCreate(null) : {};
|
|
this.size = 0;
|
|
}
|
|
|
|
function hashDelete(key) {
|
|
var result = this.has(key) && delete this.__data__[key];
|
|
this.size -= result ? 1 : 0;
|
|
return result;
|
|
}
|
|
|
|
var HASH_UNDEFINED$2 = "__lodash_hash_undefined__";
|
|
var objectProto$g = Object.prototype;
|
|
var hasOwnProperty$e = objectProto$g.hasOwnProperty;
|
|
function hashGet(key) {
|
|
var data = this.__data__;
|
|
if (nativeCreate) {
|
|
var result = data[key];
|
|
return result === HASH_UNDEFINED$2 ? void 0 : result;
|
|
}
|
|
return hasOwnProperty$e.call(data, key) ? data[key] : void 0;
|
|
}
|
|
|
|
var objectProto$f = Object.prototype;
|
|
var hasOwnProperty$d = objectProto$f.hasOwnProperty;
|
|
function hashHas(key) {
|
|
var data = this.__data__;
|
|
return nativeCreate ? data[key] !== void 0 : hasOwnProperty$d.call(data, key);
|
|
}
|
|
|
|
var HASH_UNDEFINED$1 = "__lodash_hash_undefined__";
|
|
function hashSet(key, value) {
|
|
var data = this.__data__;
|
|
this.size += this.has(key) ? 0 : 1;
|
|
data[key] = nativeCreate && value === void 0 ? HASH_UNDEFINED$1 : value;
|
|
return this;
|
|
}
|
|
|
|
function Hash(entries) {
|
|
var index = -1, length = entries == null ? 0 : entries.length;
|
|
this.clear();
|
|
while (++index < length) {
|
|
var entry = entries[index];
|
|
this.set(entry[0], entry[1]);
|
|
}
|
|
}
|
|
Hash.prototype.clear = hashClear;
|
|
Hash.prototype["delete"] = hashDelete;
|
|
Hash.prototype.get = hashGet;
|
|
Hash.prototype.has = hashHas;
|
|
Hash.prototype.set = hashSet;
|
|
|
|
function listCacheClear() {
|
|
this.__data__ = [];
|
|
this.size = 0;
|
|
}
|
|
|
|
function assocIndexOf(array, key) {
|
|
var length = array.length;
|
|
while (length--) {
|
|
if (eq(array[length][0], key)) {
|
|
return length;
|
|
}
|
|
}
|
|
return -1;
|
|
}
|
|
|
|
var arrayProto$5 = Array.prototype;
|
|
var splice$2 = arrayProto$5.splice;
|
|
function listCacheDelete(key) {
|
|
var data = this.__data__, index = assocIndexOf(data, key);
|
|
if (index < 0) {
|
|
return false;
|
|
}
|
|
var lastIndex = data.length - 1;
|
|
if (index == lastIndex) {
|
|
data.pop();
|
|
} else {
|
|
splice$2.call(data, index, 1);
|
|
}
|
|
--this.size;
|
|
return true;
|
|
}
|
|
|
|
function listCacheGet(key) {
|
|
var data = this.__data__, index = assocIndexOf(data, key);
|
|
return index < 0 ? void 0 : data[index][1];
|
|
}
|
|
|
|
function listCacheHas(key) {
|
|
return assocIndexOf(this.__data__, key) > -1;
|
|
}
|
|
|
|
function listCacheSet(key, value) {
|
|
var data = this.__data__, index = assocIndexOf(data, key);
|
|
if (index < 0) {
|
|
++this.size;
|
|
data.push([key, value]);
|
|
} else {
|
|
data[index][1] = value;
|
|
}
|
|
return this;
|
|
}
|
|
|
|
function ListCache(entries) {
|
|
var index = -1, length = entries == null ? 0 : entries.length;
|
|
this.clear();
|
|
while (++index < length) {
|
|
var entry = entries[index];
|
|
this.set(entry[0], entry[1]);
|
|
}
|
|
}
|
|
ListCache.prototype.clear = listCacheClear;
|
|
ListCache.prototype["delete"] = listCacheDelete;
|
|
ListCache.prototype.get = listCacheGet;
|
|
ListCache.prototype.has = listCacheHas;
|
|
ListCache.prototype.set = listCacheSet;
|
|
|
|
var Map$1 = getNative(root, "Map");
|
|
|
|
function mapCacheClear() {
|
|
this.size = 0;
|
|
this.__data__ = {
|
|
"hash": new Hash(),
|
|
"map": new (Map$1 || ListCache)(),
|
|
"string": new Hash()
|
|
};
|
|
}
|
|
|
|
function isKeyable(value) {
|
|
var type = typeof value;
|
|
return type == "string" || type == "number" || type == "symbol" || type == "boolean" ? value !== "__proto__" : value === null;
|
|
}
|
|
|
|
function getMapData(map, key) {
|
|
var data = map.__data__;
|
|
return isKeyable(key) ? data[typeof key == "string" ? "string" : "hash"] : data.map;
|
|
}
|
|
|
|
function mapCacheDelete(key) {
|
|
var result = getMapData(this, key)["delete"](key);
|
|
this.size -= result ? 1 : 0;
|
|
return result;
|
|
}
|
|
|
|
function mapCacheGet(key) {
|
|
return getMapData(this, key).get(key);
|
|
}
|
|
|
|
function mapCacheHas(key) {
|
|
return getMapData(this, key).has(key);
|
|
}
|
|
|
|
function mapCacheSet(key, value) {
|
|
var data = getMapData(this, key), size = data.size;
|
|
data.set(key, value);
|
|
this.size += data.size == size ? 0 : 1;
|
|
return this;
|
|
}
|
|
|
|
function MapCache(entries) {
|
|
var index = -1, length = entries == null ? 0 : entries.length;
|
|
this.clear();
|
|
while (++index < length) {
|
|
var entry = entries[index];
|
|
this.set(entry[0], entry[1]);
|
|
}
|
|
}
|
|
MapCache.prototype.clear = mapCacheClear;
|
|
MapCache.prototype["delete"] = mapCacheDelete;
|
|
MapCache.prototype.get = mapCacheGet;
|
|
MapCache.prototype.has = mapCacheHas;
|
|
MapCache.prototype.set = mapCacheSet;
|
|
|
|
var FUNC_ERROR_TEXT$9 = "Expected a function";
|
|
function memoize(func, resolver) {
|
|
if (typeof func != "function" || resolver != null && typeof resolver != "function") {
|
|
throw new TypeError(FUNC_ERROR_TEXT$9);
|
|
}
|
|
var memoized = function() {
|
|
var args = arguments, key = resolver ? resolver.apply(this, args) : args[0], cache = memoized.cache;
|
|
if (cache.has(key)) {
|
|
return cache.get(key);
|
|
}
|
|
var result = func.apply(this, args);
|
|
memoized.cache = cache.set(key, result) || cache;
|
|
return result;
|
|
};
|
|
memoized.cache = new (memoize.Cache || MapCache)();
|
|
return memoized;
|
|
}
|
|
memoize.Cache = MapCache;
|
|
|
|
var MAX_MEMOIZE_SIZE = 500;
|
|
function memoizeCapped(func) {
|
|
var result = memoize(func, function(key) {
|
|
if (cache.size === MAX_MEMOIZE_SIZE) {
|
|
cache.clear();
|
|
}
|
|
return key;
|
|
});
|
|
var cache = result.cache;
|
|
return result;
|
|
}
|
|
|
|
var rePropName = /[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g;
|
|
var reEscapeChar = /\\(\\)?/g;
|
|
var stringToPath = memoizeCapped(function(string) {
|
|
var result = [];
|
|
if (string.charCodeAt(0) === 46) {
|
|
result.push("");
|
|
}
|
|
string.replace(rePropName, function(match, number, quote, subString) {
|
|
result.push(quote ? subString.replace(reEscapeChar, "$1") : number || match);
|
|
});
|
|
return result;
|
|
});
|
|
|
|
function toString(value) {
|
|
return value == null ? "" : baseToString(value);
|
|
}
|
|
|
|
function castPath(value, object) {
|
|
if (isArray(value)) {
|
|
return value;
|
|
}
|
|
return isKey(value, object) ? [value] : stringToPath(toString(value));
|
|
}
|
|
|
|
var INFINITY$3 = 1 / 0;
|
|
function toKey(value) {
|
|
if (typeof value == "string" || isSymbol(value)) {
|
|
return value;
|
|
}
|
|
var result = value + "";
|
|
return result == "0" && 1 / value == -INFINITY$3 ? "-0" : result;
|
|
}
|
|
|
|
function baseGet(object, path) {
|
|
path = castPath(path, object);
|
|
var index = 0, length = path.length;
|
|
while (object != null && index < length) {
|
|
object = object[toKey(path[index++])];
|
|
}
|
|
return index && index == length ? object : void 0;
|
|
}
|
|
|
|
function get(object, path, defaultValue) {
|
|
var result = object == null ? void 0 : baseGet(object, path);
|
|
return result === void 0 ? defaultValue : result;
|
|
}
|
|
|
|
function baseAt(object, paths) {
|
|
var index = -1, length = paths.length, result = Array(length), skip = object == null;
|
|
while (++index < length) {
|
|
result[index] = skip ? void 0 : get(object, paths[index]);
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function arrayPush(array, values) {
|
|
var index = -1, length = values.length, offset = array.length;
|
|
while (++index < length) {
|
|
array[offset + index] = values[index];
|
|
}
|
|
return array;
|
|
}
|
|
|
|
var spreadableSymbol = Symbol$1 ? Symbol$1.isConcatSpreadable : void 0;
|
|
function isFlattenable(value) {
|
|
return isArray(value) || isArguments(value) || !!(spreadableSymbol && value && value[spreadableSymbol]);
|
|
}
|
|
|
|
function baseFlatten(array, depth, predicate, isStrict, result) {
|
|
var index = -1, length = array.length;
|
|
predicate || (predicate = isFlattenable);
|
|
result || (result = []);
|
|
while (++index < length) {
|
|
var value = array[index];
|
|
if (depth > 0 && predicate(value)) {
|
|
if (depth > 1) {
|
|
baseFlatten(value, depth - 1, predicate, isStrict, result);
|
|
} else {
|
|
arrayPush(result, value);
|
|
}
|
|
} else if (!isStrict) {
|
|
result[result.length] = value;
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function flatten(array) {
|
|
var length = array == null ? 0 : array.length;
|
|
return length ? baseFlatten(array, 1) : [];
|
|
}
|
|
|
|
function flatRest(func) {
|
|
return setToString(overRest(func, void 0, flatten), func + "");
|
|
}
|
|
|
|
var at$1 = flatRest(baseAt);
|
|
|
|
var getPrototype = overArg(Object.getPrototypeOf, Object);
|
|
|
|
var objectTag$3 = "[object Object]";
|
|
var funcProto = Function.prototype;
|
|
var objectProto$e = Object.prototype;
|
|
var funcToString = funcProto.toString;
|
|
var hasOwnProperty$c = objectProto$e.hasOwnProperty;
|
|
var objectCtorString = funcToString.call(Object);
|
|
function isPlainObject(value) {
|
|
if (!isObjectLike(value) || baseGetTag(value) != objectTag$3) {
|
|
return false;
|
|
}
|
|
var proto = getPrototype(value);
|
|
if (proto === null) {
|
|
return true;
|
|
}
|
|
var Ctor = hasOwnProperty$c.call(proto, "constructor") && proto.constructor;
|
|
return typeof Ctor == "function" && Ctor instanceof Ctor && funcToString.call(Ctor) == objectCtorString;
|
|
}
|
|
|
|
var domExcTag = "[object DOMException]";
|
|
var errorTag$2 = "[object Error]";
|
|
function isError(value) {
|
|
if (!isObjectLike(value)) {
|
|
return false;
|
|
}
|
|
var tag = baseGetTag(value);
|
|
return tag == errorTag$2 || tag == domExcTag || typeof value.message == "string" && typeof value.name == "string" && !isPlainObject(value);
|
|
}
|
|
|
|
var attempt = baseRest(function(func, args) {
|
|
try {
|
|
return apply(func, void 0, args);
|
|
} catch (e) {
|
|
return isError(e) ? e : new Error(e);
|
|
}
|
|
});
|
|
|
|
var FUNC_ERROR_TEXT$8 = "Expected a function";
|
|
function before(n, func) {
|
|
var result;
|
|
if (typeof func != "function") {
|
|
throw new TypeError(FUNC_ERROR_TEXT$8);
|
|
}
|
|
n = toInteger(n);
|
|
return function() {
|
|
if (--n > 0) {
|
|
result = func.apply(this, arguments);
|
|
}
|
|
if (n <= 1) {
|
|
func = void 0;
|
|
}
|
|
return result;
|
|
};
|
|
}
|
|
|
|
var WRAP_BIND_FLAG$1 = 1;
|
|
var WRAP_PARTIAL_FLAG$3 = 32;
|
|
var bind = baseRest(function(func, thisArg, partials) {
|
|
var bitmask = WRAP_BIND_FLAG$1;
|
|
if (partials.length) {
|
|
var holders = replaceHolders(partials, getHolder(bind));
|
|
bitmask |= WRAP_PARTIAL_FLAG$3;
|
|
}
|
|
return createWrap(func, bitmask, thisArg, partials, holders);
|
|
});
|
|
bind.placeholder = {};
|
|
|
|
var bindAll = flatRest(function(object, methodNames) {
|
|
arrayEach(methodNames, function(key) {
|
|
key = toKey(key);
|
|
baseAssignValue(object, key, bind(object[key], object));
|
|
});
|
|
return object;
|
|
});
|
|
|
|
var WRAP_BIND_FLAG = 1;
|
|
var WRAP_BIND_KEY_FLAG$1 = 2;
|
|
var WRAP_PARTIAL_FLAG$2 = 32;
|
|
var bindKey = baseRest(function(object, key, partials) {
|
|
var bitmask = WRAP_BIND_FLAG | WRAP_BIND_KEY_FLAG$1;
|
|
if (partials.length) {
|
|
var holders = replaceHolders(partials, getHolder(bindKey));
|
|
bitmask |= WRAP_PARTIAL_FLAG$2;
|
|
}
|
|
return createWrap(key, bitmask, object, partials, holders);
|
|
});
|
|
bindKey.placeholder = {};
|
|
|
|
function baseSlice(array, start, end) {
|
|
var index = -1, length = array.length;
|
|
if (start < 0) {
|
|
start = -start > length ? 0 : length + start;
|
|
}
|
|
end = end > length ? length : end;
|
|
if (end < 0) {
|
|
end += length;
|
|
}
|
|
length = start > end ? 0 : end - start >>> 0;
|
|
start >>>= 0;
|
|
var result = Array(length);
|
|
while (++index < length) {
|
|
result[index] = array[index + start];
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function castSlice(array, start, end) {
|
|
var length = array.length;
|
|
end = end === void 0 ? length : end;
|
|
return !start && end >= length ? array : baseSlice(array, start, end);
|
|
}
|
|
|
|
var rsAstralRange$3 = "\\ud800-\\udfff";
|
|
var rsComboMarksRange$4 = "\\u0300-\\u036f";
|
|
var reComboHalfMarksRange$4 = "\\ufe20-\\ufe2f";
|
|
var rsComboSymbolsRange$4 = "\\u20d0-\\u20ff";
|
|
var rsComboRange$4 = rsComboMarksRange$4 + reComboHalfMarksRange$4 + rsComboSymbolsRange$4;
|
|
var rsVarRange$3 = "\\ufe0e\\ufe0f";
|
|
var rsZWJ$3 = "\\u200d";
|
|
var reHasUnicode = RegExp("[" + rsZWJ$3 + rsAstralRange$3 + rsComboRange$4 + rsVarRange$3 + "]");
|
|
function hasUnicode(string) {
|
|
return reHasUnicode.test(string);
|
|
}
|
|
|
|
function asciiToArray(string) {
|
|
return string.split("");
|
|
}
|
|
|
|
var rsAstralRange$2 = "\\ud800-\\udfff";
|
|
var rsComboMarksRange$3 = "\\u0300-\\u036f";
|
|
var reComboHalfMarksRange$3 = "\\ufe20-\\ufe2f";
|
|
var rsComboSymbolsRange$3 = "\\u20d0-\\u20ff";
|
|
var rsComboRange$3 = rsComboMarksRange$3 + reComboHalfMarksRange$3 + rsComboSymbolsRange$3;
|
|
var rsVarRange$2 = "\\ufe0e\\ufe0f";
|
|
var rsAstral$1 = "[" + rsAstralRange$2 + "]";
|
|
var rsCombo$3 = "[" + rsComboRange$3 + "]";
|
|
var rsFitz$2 = "\\ud83c[\\udffb-\\udfff]";
|
|
var rsModifier$2 = "(?:" + rsCombo$3 + "|" + rsFitz$2 + ")";
|
|
var rsNonAstral$2 = "[^" + rsAstralRange$2 + "]";
|
|
var rsRegional$2 = "(?:\\ud83c[\\udde6-\\uddff]){2}";
|
|
var rsSurrPair$2 = "[\\ud800-\\udbff][\\udc00-\\udfff]";
|
|
var rsZWJ$2 = "\\u200d";
|
|
var reOptMod$2 = rsModifier$2 + "?";
|
|
var rsOptVar$2 = "[" + rsVarRange$2 + "]?";
|
|
var rsOptJoin$2 = "(?:" + rsZWJ$2 + "(?:" + [rsNonAstral$2, rsRegional$2, rsSurrPair$2].join("|") + ")" + rsOptVar$2 + reOptMod$2 + ")*";
|
|
var rsSeq$2 = rsOptVar$2 + reOptMod$2 + rsOptJoin$2;
|
|
var rsSymbol$1 = "(?:" + [rsNonAstral$2 + rsCombo$3 + "?", rsCombo$3, rsRegional$2, rsSurrPair$2, rsAstral$1].join("|") + ")";
|
|
var reUnicode$1 = RegExp(rsFitz$2 + "(?=" + rsFitz$2 + ")|" + rsSymbol$1 + rsSeq$2, "g");
|
|
function unicodeToArray(string) {
|
|
return string.match(reUnicode$1) || [];
|
|
}
|
|
|
|
function stringToArray(string) {
|
|
return hasUnicode(string) ? unicodeToArray(string) : asciiToArray(string);
|
|
}
|
|
|
|
function createCaseFirst(methodName) {
|
|
return function(string) {
|
|
string = toString(string);
|
|
var strSymbols = hasUnicode(string) ? stringToArray(string) : void 0;
|
|
var chr = strSymbols ? strSymbols[0] : string.charAt(0);
|
|
var trailing = strSymbols ? castSlice(strSymbols, 1).join("") : string.slice(1);
|
|
return chr[methodName]() + trailing;
|
|
};
|
|
}
|
|
|
|
var upperFirst = createCaseFirst("toUpperCase");
|
|
|
|
function capitalize$1(string) {
|
|
return upperFirst(toString(string).toLowerCase());
|
|
}
|
|
|
|
function arrayReduce(array, iteratee, accumulator, initAccum) {
|
|
var index = -1, length = array == null ? 0 : array.length;
|
|
if (initAccum && length) {
|
|
accumulator = array[++index];
|
|
}
|
|
while (++index < length) {
|
|
accumulator = iteratee(accumulator, array[index], index, array);
|
|
}
|
|
return accumulator;
|
|
}
|
|
|
|
function basePropertyOf(object) {
|
|
return function(key) {
|
|
return object == null ? void 0 : object[key];
|
|
};
|
|
}
|
|
|
|
var deburredLetters = {
|
|
"\xC0": "A",
|
|
"\xC1": "A",
|
|
"\xC2": "A",
|
|
"\xC3": "A",
|
|
"\xC4": "A",
|
|
"\xC5": "A",
|
|
"\xE0": "a",
|
|
"\xE1": "a",
|
|
"\xE2": "a",
|
|
"\xE3": "a",
|
|
"\xE4": "a",
|
|
"\xE5": "a",
|
|
"\xC7": "C",
|
|
"\xE7": "c",
|
|
"\xD0": "D",
|
|
"\xF0": "d",
|
|
"\xC8": "E",
|
|
"\xC9": "E",
|
|
"\xCA": "E",
|
|
"\xCB": "E",
|
|
"\xE8": "e",
|
|
"\xE9": "e",
|
|
"\xEA": "e",
|
|
"\xEB": "e",
|
|
"\xCC": "I",
|
|
"\xCD": "I",
|
|
"\xCE": "I",
|
|
"\xCF": "I",
|
|
"\xEC": "i",
|
|
"\xED": "i",
|
|
"\xEE": "i",
|
|
"\xEF": "i",
|
|
"\xD1": "N",
|
|
"\xF1": "n",
|
|
"\xD2": "O",
|
|
"\xD3": "O",
|
|
"\xD4": "O",
|
|
"\xD5": "O",
|
|
"\xD6": "O",
|
|
"\xD8": "O",
|
|
"\xF2": "o",
|
|
"\xF3": "o",
|
|
"\xF4": "o",
|
|
"\xF5": "o",
|
|
"\xF6": "o",
|
|
"\xF8": "o",
|
|
"\xD9": "U",
|
|
"\xDA": "U",
|
|
"\xDB": "U",
|
|
"\xDC": "U",
|
|
"\xF9": "u",
|
|
"\xFA": "u",
|
|
"\xFB": "u",
|
|
"\xFC": "u",
|
|
"\xDD": "Y",
|
|
"\xFD": "y",
|
|
"\xFF": "y",
|
|
"\xC6": "Ae",
|
|
"\xE6": "ae",
|
|
"\xDE": "Th",
|
|
"\xFE": "th",
|
|
"\xDF": "ss",
|
|
"\u0100": "A",
|
|
"\u0102": "A",
|
|
"\u0104": "A",
|
|
"\u0101": "a",
|
|
"\u0103": "a",
|
|
"\u0105": "a",
|
|
"\u0106": "C",
|
|
"\u0108": "C",
|
|
"\u010A": "C",
|
|
"\u010C": "C",
|
|
"\u0107": "c",
|
|
"\u0109": "c",
|
|
"\u010B": "c",
|
|
"\u010D": "c",
|
|
"\u010E": "D",
|
|
"\u0110": "D",
|
|
"\u010F": "d",
|
|
"\u0111": "d",
|
|
"\u0112": "E",
|
|
"\u0114": "E",
|
|
"\u0116": "E",
|
|
"\u0118": "E",
|
|
"\u011A": "E",
|
|
"\u0113": "e",
|
|
"\u0115": "e",
|
|
"\u0117": "e",
|
|
"\u0119": "e",
|
|
"\u011B": "e",
|
|
"\u011C": "G",
|
|
"\u011E": "G",
|
|
"\u0120": "G",
|
|
"\u0122": "G",
|
|
"\u011D": "g",
|
|
"\u011F": "g",
|
|
"\u0121": "g",
|
|
"\u0123": "g",
|
|
"\u0124": "H",
|
|
"\u0126": "H",
|
|
"\u0125": "h",
|
|
"\u0127": "h",
|
|
"\u0128": "I",
|
|
"\u012A": "I",
|
|
"\u012C": "I",
|
|
"\u012E": "I",
|
|
"\u0130": "I",
|
|
"\u0129": "i",
|
|
"\u012B": "i",
|
|
"\u012D": "i",
|
|
"\u012F": "i",
|
|
"\u0131": "i",
|
|
"\u0134": "J",
|
|
"\u0135": "j",
|
|
"\u0136": "K",
|
|
"\u0137": "k",
|
|
"\u0138": "k",
|
|
"\u0139": "L",
|
|
"\u013B": "L",
|
|
"\u013D": "L",
|
|
"\u013F": "L",
|
|
"\u0141": "L",
|
|
"\u013A": "l",
|
|
"\u013C": "l",
|
|
"\u013E": "l",
|
|
"\u0140": "l",
|
|
"\u0142": "l",
|
|
"\u0143": "N",
|
|
"\u0145": "N",
|
|
"\u0147": "N",
|
|
"\u014A": "N",
|
|
"\u0144": "n",
|
|
"\u0146": "n",
|
|
"\u0148": "n",
|
|
"\u014B": "n",
|
|
"\u014C": "O",
|
|
"\u014E": "O",
|
|
"\u0150": "O",
|
|
"\u014D": "o",
|
|
"\u014F": "o",
|
|
"\u0151": "o",
|
|
"\u0154": "R",
|
|
"\u0156": "R",
|
|
"\u0158": "R",
|
|
"\u0155": "r",
|
|
"\u0157": "r",
|
|
"\u0159": "r",
|
|
"\u015A": "S",
|
|
"\u015C": "S",
|
|
"\u015E": "S",
|
|
"\u0160": "S",
|
|
"\u015B": "s",
|
|
"\u015D": "s",
|
|
"\u015F": "s",
|
|
"\u0161": "s",
|
|
"\u0162": "T",
|
|
"\u0164": "T",
|
|
"\u0166": "T",
|
|
"\u0163": "t",
|
|
"\u0165": "t",
|
|
"\u0167": "t",
|
|
"\u0168": "U",
|
|
"\u016A": "U",
|
|
"\u016C": "U",
|
|
"\u016E": "U",
|
|
"\u0170": "U",
|
|
"\u0172": "U",
|
|
"\u0169": "u",
|
|
"\u016B": "u",
|
|
"\u016D": "u",
|
|
"\u016F": "u",
|
|
"\u0171": "u",
|
|
"\u0173": "u",
|
|
"\u0174": "W",
|
|
"\u0175": "w",
|
|
"\u0176": "Y",
|
|
"\u0177": "y",
|
|
"\u0178": "Y",
|
|
"\u0179": "Z",
|
|
"\u017B": "Z",
|
|
"\u017D": "Z",
|
|
"\u017A": "z",
|
|
"\u017C": "z",
|
|
"\u017E": "z",
|
|
"\u0132": "IJ",
|
|
"\u0133": "ij",
|
|
"\u0152": "Oe",
|
|
"\u0153": "oe",
|
|
"\u0149": "'n",
|
|
"\u017F": "s"
|
|
};
|
|
var deburrLetter = basePropertyOf(deburredLetters);
|
|
|
|
var reLatin = /[\xc0-\xd6\xd8-\xf6\xf8-\xff\u0100-\u017f]/g;
|
|
var rsComboMarksRange$2 = "\\u0300-\\u036f";
|
|
var reComboHalfMarksRange$2 = "\\ufe20-\\ufe2f";
|
|
var rsComboSymbolsRange$2 = "\\u20d0-\\u20ff";
|
|
var rsComboRange$2 = rsComboMarksRange$2 + reComboHalfMarksRange$2 + rsComboSymbolsRange$2;
|
|
var rsCombo$2 = "[" + rsComboRange$2 + "]";
|
|
var reComboMark = RegExp(rsCombo$2, "g");
|
|
function deburr(string) {
|
|
string = toString(string);
|
|
return string && string.replace(reLatin, deburrLetter).replace(reComboMark, "");
|
|
}
|
|
|
|
var reAsciiWord = /[^\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]+/g;
|
|
function asciiWords(string) {
|
|
return string.match(reAsciiWord) || [];
|
|
}
|
|
|
|
var reHasUnicodeWord = /[a-z][A-Z]|[A-Z]{2}[a-z]|[0-9][a-zA-Z]|[a-zA-Z][0-9]|[^a-zA-Z0-9 ]/;
|
|
function hasUnicodeWord(string) {
|
|
return reHasUnicodeWord.test(string);
|
|
}
|
|
|
|
var rsAstralRange$1 = "\\ud800-\\udfff";
|
|
var rsComboMarksRange$1 = "\\u0300-\\u036f";
|
|
var reComboHalfMarksRange$1 = "\\ufe20-\\ufe2f";
|
|
var rsComboSymbolsRange$1 = "\\u20d0-\\u20ff";
|
|
var rsComboRange$1 = rsComboMarksRange$1 + reComboHalfMarksRange$1 + rsComboSymbolsRange$1;
|
|
var rsDingbatRange = "\\u2700-\\u27bf";
|
|
var rsLowerRange = "a-z\\xdf-\\xf6\\xf8-\\xff";
|
|
var rsMathOpRange = "\\xac\\xb1\\xd7\\xf7";
|
|
var rsNonCharRange = "\\x00-\\x2f\\x3a-\\x40\\x5b-\\x60\\x7b-\\xbf";
|
|
var rsPunctuationRange = "\\u2000-\\u206f";
|
|
var rsSpaceRange = " \\t\\x0b\\f\\xa0\\ufeff\\n\\r\\u2028\\u2029\\u1680\\u180e\\u2000\\u2001\\u2002\\u2003\\u2004\\u2005\\u2006\\u2007\\u2008\\u2009\\u200a\\u202f\\u205f\\u3000";
|
|
var rsUpperRange = "A-Z\\xc0-\\xd6\\xd8-\\xde";
|
|
var rsVarRange$1 = "\\ufe0e\\ufe0f";
|
|
var rsBreakRange = rsMathOpRange + rsNonCharRange + rsPunctuationRange + rsSpaceRange;
|
|
var rsApos$1 = "['\u2019]";
|
|
var rsBreak = "[" + rsBreakRange + "]";
|
|
var rsCombo$1 = "[" + rsComboRange$1 + "]";
|
|
var rsDigits = "\\d+";
|
|
var rsDingbat = "[" + rsDingbatRange + "]";
|
|
var rsLower = "[" + rsLowerRange + "]";
|
|
var rsMisc = "[^" + rsAstralRange$1 + rsBreakRange + rsDigits + rsDingbatRange + rsLowerRange + rsUpperRange + "]";
|
|
var rsFitz$1 = "\\ud83c[\\udffb-\\udfff]";
|
|
var rsModifier$1 = "(?:" + rsCombo$1 + "|" + rsFitz$1 + ")";
|
|
var rsNonAstral$1 = "[^" + rsAstralRange$1 + "]";
|
|
var rsRegional$1 = "(?:\\ud83c[\\udde6-\\uddff]){2}";
|
|
var rsSurrPair$1 = "[\\ud800-\\udbff][\\udc00-\\udfff]";
|
|
var rsUpper = "[" + rsUpperRange + "]";
|
|
var rsZWJ$1 = "\\u200d";
|
|
var rsMiscLower = "(?:" + rsLower + "|" + rsMisc + ")";
|
|
var rsMiscUpper = "(?:" + rsUpper + "|" + rsMisc + ")";
|
|
var rsOptContrLower = "(?:" + rsApos$1 + "(?:d|ll|m|re|s|t|ve))?";
|
|
var rsOptContrUpper = "(?:" + rsApos$1 + "(?:D|LL|M|RE|S|T|VE))?";
|
|
var reOptMod$1 = rsModifier$1 + "?";
|
|
var rsOptVar$1 = "[" + rsVarRange$1 + "]?";
|
|
var rsOptJoin$1 = "(?:" + rsZWJ$1 + "(?:" + [rsNonAstral$1, rsRegional$1, rsSurrPair$1].join("|") + ")" + rsOptVar$1 + reOptMod$1 + ")*";
|
|
var rsOrdLower = "\\d*(?:1st|2nd|3rd|(?![123])\\dth)(?=\\b|[A-Z_])";
|
|
var rsOrdUpper = "\\d*(?:1ST|2ND|3RD|(?![123])\\dTH)(?=\\b|[a-z_])";
|
|
var rsSeq$1 = rsOptVar$1 + reOptMod$1 + rsOptJoin$1;
|
|
var rsEmoji = "(?:" + [rsDingbat, rsRegional$1, rsSurrPair$1].join("|") + ")" + rsSeq$1;
|
|
var reUnicodeWord = RegExp([
|
|
rsUpper + "?" + rsLower + "+" + rsOptContrLower + "(?=" + [rsBreak, rsUpper, "$"].join("|") + ")",
|
|
rsMiscUpper + "+" + rsOptContrUpper + "(?=" + [rsBreak, rsUpper + rsMiscLower, "$"].join("|") + ")",
|
|
rsUpper + "?" + rsMiscLower + "+" + rsOptContrLower,
|
|
rsUpper + "+" + rsOptContrUpper,
|
|
rsOrdUpper,
|
|
rsOrdLower,
|
|
rsDigits,
|
|
rsEmoji
|
|
].join("|"), "g");
|
|
function unicodeWords(string) {
|
|
return string.match(reUnicodeWord) || [];
|
|
}
|
|
|
|
function words(string, pattern, guard) {
|
|
string = toString(string);
|
|
pattern = guard ? void 0 : pattern;
|
|
if (pattern === void 0) {
|
|
return hasUnicodeWord(string) ? unicodeWords(string) : asciiWords(string);
|
|
}
|
|
return string.match(pattern) || [];
|
|
}
|
|
|
|
var rsApos = "['\u2019]";
|
|
var reApos = RegExp(rsApos, "g");
|
|
function createCompounder(callback) {
|
|
return function(string) {
|
|
return arrayReduce(words(deburr(string).replace(reApos, "")), callback, "");
|
|
};
|
|
}
|
|
|
|
var camelCase = createCompounder(function(result, word, index) {
|
|
word = word.toLowerCase();
|
|
return result + (index ? capitalize$1(word) : word);
|
|
});
|
|
|
|
function castArray$1() {
|
|
if (!arguments.length) {
|
|
return [];
|
|
}
|
|
var value = arguments[0];
|
|
return isArray(value) ? value : [value];
|
|
}
|
|
|
|
var nativeIsFinite$1 = root.isFinite;
|
|
var nativeMin$c = Math.min;
|
|
function createRound(methodName) {
|
|
var func = Math[methodName];
|
|
return function(number, precision) {
|
|
number = toNumber(number);
|
|
precision = precision == null ? 0 : nativeMin$c(toInteger(precision), 292);
|
|
if (precision && nativeIsFinite$1(number)) {
|
|
var pair = (toString(number) + "e").split("e"), value = func(pair[0] + "e" + (+pair[1] + precision));
|
|
pair = (toString(value) + "e").split("e");
|
|
return +(pair[0] + "e" + (+pair[1] - precision));
|
|
}
|
|
return func(number);
|
|
};
|
|
}
|
|
|
|
var ceil = createRound("ceil");
|
|
|
|
function chain(value) {
|
|
var result = lodash(value);
|
|
result.__chain__ = true;
|
|
return result;
|
|
}
|
|
|
|
var nativeCeil$3 = Math.ceil;
|
|
var nativeMax$c = Math.max;
|
|
function chunk(array, size, guard) {
|
|
if (guard ? isIterateeCall(array, size, guard) : size === void 0) {
|
|
size = 1;
|
|
} else {
|
|
size = nativeMax$c(toInteger(size), 0);
|
|
}
|
|
var length = array == null ? 0 : array.length;
|
|
if (!length || size < 1) {
|
|
return [];
|
|
}
|
|
var index = 0, resIndex = 0, result = Array(nativeCeil$3(length / size));
|
|
while (index < length) {
|
|
result[resIndex++] = baseSlice(array, index, index += size);
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function baseClamp(number, lower, upper) {
|
|
if (number === number) {
|
|
if (upper !== void 0) {
|
|
number = number <= upper ? number : upper;
|
|
}
|
|
if (lower !== void 0) {
|
|
number = number >= lower ? number : lower;
|
|
}
|
|
}
|
|
return number;
|
|
}
|
|
|
|
function clamp(number, lower, upper) {
|
|
if (upper === void 0) {
|
|
upper = lower;
|
|
lower = void 0;
|
|
}
|
|
if (upper !== void 0) {
|
|
upper = toNumber(upper);
|
|
upper = upper === upper ? upper : 0;
|
|
}
|
|
if (lower !== void 0) {
|
|
lower = toNumber(lower);
|
|
lower = lower === lower ? lower : 0;
|
|
}
|
|
return baseClamp(toNumber(number), lower, upper);
|
|
}
|
|
|
|
function stackClear() {
|
|
this.__data__ = new ListCache();
|
|
this.size = 0;
|
|
}
|
|
|
|
function stackDelete(key) {
|
|
var data = this.__data__, result = data["delete"](key);
|
|
this.size = data.size;
|
|
return result;
|
|
}
|
|
|
|
function stackGet(key) {
|
|
return this.__data__.get(key);
|
|
}
|
|
|
|
function stackHas(key) {
|
|
return this.__data__.has(key);
|
|
}
|
|
|
|
var LARGE_ARRAY_SIZE$2 = 200;
|
|
function stackSet(key, value) {
|
|
var data = this.__data__;
|
|
if (data instanceof ListCache) {
|
|
var pairs = data.__data__;
|
|
if (!Map$1 || pairs.length < LARGE_ARRAY_SIZE$2 - 1) {
|
|
pairs.push([key, value]);
|
|
this.size = ++data.size;
|
|
return this;
|
|
}
|
|
data = this.__data__ = new MapCache(pairs);
|
|
}
|
|
data.set(key, value);
|
|
this.size = data.size;
|
|
return this;
|
|
}
|
|
|
|
function Stack(entries) {
|
|
var data = this.__data__ = new ListCache(entries);
|
|
this.size = data.size;
|
|
}
|
|
Stack.prototype.clear = stackClear;
|
|
Stack.prototype["delete"] = stackDelete;
|
|
Stack.prototype.get = stackGet;
|
|
Stack.prototype.has = stackHas;
|
|
Stack.prototype.set = stackSet;
|
|
|
|
function baseAssign(object, source) {
|
|
return object && copyObject(source, keys(source), object);
|
|
}
|
|
|
|
function baseAssignIn(object, source) {
|
|
return object && copyObject(source, keysIn(source), object);
|
|
}
|
|
|
|
var freeExports = typeof exports == "object" && exports && !exports.nodeType && exports;
|
|
var freeModule = freeExports && typeof module == "object" && module && !module.nodeType && module;
|
|
var moduleExports = freeModule && freeModule.exports === freeExports;
|
|
var Buffer = moduleExports ? root.Buffer : void 0;
|
|
var allocUnsafe = Buffer ? Buffer.allocUnsafe : void 0;
|
|
function cloneBuffer(buffer, isDeep) {
|
|
if (isDeep) {
|
|
return buffer.slice();
|
|
}
|
|
var length = buffer.length, result = allocUnsafe ? allocUnsafe(length) : new buffer.constructor(length);
|
|
buffer.copy(result);
|
|
return result;
|
|
}
|
|
|
|
function arrayFilter(array, predicate) {
|
|
var index = -1, length = array == null ? 0 : array.length, resIndex = 0, result = [];
|
|
while (++index < length) {
|
|
var value = array[index];
|
|
if (predicate(value, index, array)) {
|
|
result[resIndex++] = value;
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function stubArray() {
|
|
return [];
|
|
}
|
|
|
|
var objectProto$d = Object.prototype;
|
|
var propertyIsEnumerable = objectProto$d.propertyIsEnumerable;
|
|
var nativeGetSymbols$1 = Object.getOwnPropertySymbols;
|
|
var getSymbols = !nativeGetSymbols$1 ? stubArray : function(object) {
|
|
if (object == null) {
|
|
return [];
|
|
}
|
|
object = Object(object);
|
|
return arrayFilter(nativeGetSymbols$1(object), function(symbol) {
|
|
return propertyIsEnumerable.call(object, symbol);
|
|
});
|
|
};
|
|
|
|
function copySymbols(source, object) {
|
|
return copyObject(source, getSymbols(source), object);
|
|
}
|
|
|
|
var nativeGetSymbols = Object.getOwnPropertySymbols;
|
|
var getSymbolsIn = !nativeGetSymbols ? stubArray : function(object) {
|
|
var result = [];
|
|
while (object) {
|
|
arrayPush(result, getSymbols(object));
|
|
object = getPrototype(object);
|
|
}
|
|
return result;
|
|
};
|
|
|
|
function copySymbolsIn(source, object) {
|
|
return copyObject(source, getSymbolsIn(source), object);
|
|
}
|
|
|
|
function baseGetAllKeys(object, keysFunc, symbolsFunc) {
|
|
var result = keysFunc(object);
|
|
return isArray(object) ? result : arrayPush(result, symbolsFunc(object));
|
|
}
|
|
|
|
function getAllKeys(object) {
|
|
return baseGetAllKeys(object, keys, getSymbols);
|
|
}
|
|
|
|
function getAllKeysIn(object) {
|
|
return baseGetAllKeys(object, keysIn, getSymbolsIn);
|
|
}
|
|
|
|
var DataView = getNative(root, "DataView");
|
|
|
|
var Promise$1 = getNative(root, "Promise");
|
|
|
|
var Set$1 = getNative(root, "Set");
|
|
|
|
var mapTag$8 = "[object Map]";
|
|
var objectTag$2 = "[object Object]";
|
|
var promiseTag = "[object Promise]";
|
|
var setTag$8 = "[object Set]";
|
|
var weakMapTag$2 = "[object WeakMap]";
|
|
var dataViewTag$3 = "[object DataView]";
|
|
var dataViewCtorString = toSource(DataView);
|
|
var mapCtorString = toSource(Map$1);
|
|
var promiseCtorString = toSource(Promise$1);
|
|
var setCtorString = toSource(Set$1);
|
|
var weakMapCtorString = toSource(WeakMap);
|
|
var getTag = baseGetTag;
|
|
if (DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag$3 || Map$1 && getTag(new Map$1()) != mapTag$8 || Promise$1 && getTag(Promise$1.resolve()) != promiseTag || Set$1 && getTag(new Set$1()) != setTag$8 || WeakMap && getTag(new WeakMap()) != weakMapTag$2) {
|
|
getTag = function(value) {
|
|
var result = baseGetTag(value), Ctor = result == objectTag$2 ? value.constructor : void 0, ctorString = Ctor ? toSource(Ctor) : "";
|
|
if (ctorString) {
|
|
switch (ctorString) {
|
|
case dataViewCtorString:
|
|
return dataViewTag$3;
|
|
case mapCtorString:
|
|
return mapTag$8;
|
|
case promiseCtorString:
|
|
return promiseTag;
|
|
case setCtorString:
|
|
return setTag$8;
|
|
case weakMapCtorString:
|
|
return weakMapTag$2;
|
|
}
|
|
}
|
|
return result;
|
|
};
|
|
}
|
|
var getTag$1 = getTag;
|
|
|
|
var objectProto$c = Object.prototype;
|
|
var hasOwnProperty$b = objectProto$c.hasOwnProperty;
|
|
function initCloneArray(array) {
|
|
var length = array.length, result = new array.constructor(length);
|
|
if (length && typeof array[0] == "string" && hasOwnProperty$b.call(array, "index")) {
|
|
result.index = array.index;
|
|
result.input = array.input;
|
|
}
|
|
return result;
|
|
}
|
|
|
|
var Uint8Array = root.Uint8Array;
|
|
|
|
function cloneArrayBuffer(arrayBuffer) {
|
|
var result = new arrayBuffer.constructor(arrayBuffer.byteLength);
|
|
new Uint8Array(result).set(new Uint8Array(arrayBuffer));
|
|
return result;
|
|
}
|
|
|
|
function cloneDataView(dataView, isDeep) {
|
|
var buffer = isDeep ? cloneArrayBuffer(dataView.buffer) : dataView.buffer;
|
|
return new dataView.constructor(buffer, dataView.byteOffset, dataView.byteLength);
|
|
}
|
|
|
|
var reFlags$1 = /\w*$/;
|
|
function cloneRegExp(regexp) {
|
|
var result = new regexp.constructor(regexp.source, reFlags$1.exec(regexp));
|
|
result.lastIndex = regexp.lastIndex;
|
|
return result;
|
|
}
|
|
|
|
var symbolProto$1 = Symbol$1 ? Symbol$1.prototype : void 0;
|
|
var symbolValueOf$1 = symbolProto$1 ? symbolProto$1.valueOf : void 0;
|
|
function cloneSymbol(symbol) {
|
|
return symbolValueOf$1 ? Object(symbolValueOf$1.call(symbol)) : {};
|
|
}
|
|
|
|
function cloneTypedArray(typedArray, isDeep) {
|
|
var buffer = isDeep ? cloneArrayBuffer(typedArray.buffer) : typedArray.buffer;
|
|
return new typedArray.constructor(buffer, typedArray.byteOffset, typedArray.length);
|
|
}
|
|
|
|
var boolTag$3 = "[object Boolean]";
|
|
var dateTag$3 = "[object Date]";
|
|
var mapTag$7 = "[object Map]";
|
|
var numberTag$3 = "[object Number]";
|
|
var regexpTag$3 = "[object RegExp]";
|
|
var setTag$7 = "[object Set]";
|
|
var stringTag$3 = "[object String]";
|
|
var symbolTag$2 = "[object Symbol]";
|
|
var arrayBufferTag$3 = "[object ArrayBuffer]";
|
|
var dataViewTag$2 = "[object DataView]";
|
|
var float32Tag$1 = "[object Float32Array]";
|
|
var float64Tag$1 = "[object Float64Array]";
|
|
var int8Tag$1 = "[object Int8Array]";
|
|
var int16Tag$1 = "[object Int16Array]";
|
|
var int32Tag$1 = "[object Int32Array]";
|
|
var uint8Tag$1 = "[object Uint8Array]";
|
|
var uint8ClampedTag$1 = "[object Uint8ClampedArray]";
|
|
var uint16Tag$1 = "[object Uint16Array]";
|
|
var uint32Tag$1 = "[object Uint32Array]";
|
|
function initCloneByTag(object, tag, isDeep) {
|
|
var Ctor = object.constructor;
|
|
switch (tag) {
|
|
case arrayBufferTag$3:
|
|
return cloneArrayBuffer(object);
|
|
case boolTag$3:
|
|
case dateTag$3:
|
|
return new Ctor(+object);
|
|
case dataViewTag$2:
|
|
return cloneDataView(object, isDeep);
|
|
case float32Tag$1:
|
|
case float64Tag$1:
|
|
case int8Tag$1:
|
|
case int16Tag$1:
|
|
case int32Tag$1:
|
|
case uint8Tag$1:
|
|
case uint8ClampedTag$1:
|
|
case uint16Tag$1:
|
|
case uint32Tag$1:
|
|
return cloneTypedArray(object, isDeep);
|
|
case mapTag$7:
|
|
return new Ctor();
|
|
case numberTag$3:
|
|
case stringTag$3:
|
|
return new Ctor(object);
|
|
case regexpTag$3:
|
|
return cloneRegExp(object);
|
|
case setTag$7:
|
|
return new Ctor();
|
|
case symbolTag$2:
|
|
return cloneSymbol(object);
|
|
}
|
|
}
|
|
|
|
function initCloneObject(object) {
|
|
return typeof object.constructor == "function" && !isPrototype(object) ? baseCreate(getPrototype(object)) : {};
|
|
}
|
|
|
|
var mapTag$6 = "[object Map]";
|
|
function baseIsMap(value) {
|
|
return isObjectLike(value) && getTag$1(value) == mapTag$6;
|
|
}
|
|
|
|
var nodeIsMap = nodeUtil && nodeUtil.isMap;
|
|
var isMap = nodeIsMap ? baseUnary(nodeIsMap) : baseIsMap;
|
|
|
|
var setTag$6 = "[object Set]";
|
|
function baseIsSet(value) {
|
|
return isObjectLike(value) && getTag$1(value) == setTag$6;
|
|
}
|
|
|
|
var nodeIsSet = nodeUtil && nodeUtil.isSet;
|
|
var isSet = nodeIsSet ? baseUnary(nodeIsSet) : baseIsSet;
|
|
|
|
var CLONE_DEEP_FLAG$7 = 1;
|
|
var CLONE_FLAT_FLAG$1 = 2;
|
|
var CLONE_SYMBOLS_FLAG$5 = 4;
|
|
var argsTag$1 = "[object Arguments]";
|
|
var arrayTag$1 = "[object Array]";
|
|
var boolTag$2 = "[object Boolean]";
|
|
var dateTag$2 = "[object Date]";
|
|
var errorTag$1 = "[object Error]";
|
|
var funcTag = "[object Function]";
|
|
var genTag = "[object GeneratorFunction]";
|
|
var mapTag$5 = "[object Map]";
|
|
var numberTag$2 = "[object Number]";
|
|
var objectTag$1 = "[object Object]";
|
|
var regexpTag$2 = "[object RegExp]";
|
|
var setTag$5 = "[object Set]";
|
|
var stringTag$2 = "[object String]";
|
|
var symbolTag$1 = "[object Symbol]";
|
|
var weakMapTag$1 = "[object WeakMap]";
|
|
var arrayBufferTag$2 = "[object ArrayBuffer]";
|
|
var dataViewTag$1 = "[object DataView]";
|
|
var float32Tag = "[object Float32Array]";
|
|
var float64Tag = "[object Float64Array]";
|
|
var int8Tag = "[object Int8Array]";
|
|
var int16Tag = "[object Int16Array]";
|
|
var int32Tag = "[object Int32Array]";
|
|
var uint8Tag = "[object Uint8Array]";
|
|
var uint8ClampedTag = "[object Uint8ClampedArray]";
|
|
var uint16Tag = "[object Uint16Array]";
|
|
var uint32Tag = "[object Uint32Array]";
|
|
var cloneableTags = {};
|
|
cloneableTags[argsTag$1] = cloneableTags[arrayTag$1] = cloneableTags[arrayBufferTag$2] = cloneableTags[dataViewTag$1] = cloneableTags[boolTag$2] = cloneableTags[dateTag$2] = cloneableTags[float32Tag] = cloneableTags[float64Tag] = cloneableTags[int8Tag] = cloneableTags[int16Tag] = cloneableTags[int32Tag] = cloneableTags[mapTag$5] = cloneableTags[numberTag$2] = cloneableTags[objectTag$1] = cloneableTags[regexpTag$2] = cloneableTags[setTag$5] = cloneableTags[stringTag$2] = cloneableTags[symbolTag$1] = cloneableTags[uint8Tag] = cloneableTags[uint8ClampedTag] = cloneableTags[uint16Tag] = cloneableTags[uint32Tag] = true;
|
|
cloneableTags[errorTag$1] = cloneableTags[funcTag] = cloneableTags[weakMapTag$1] = false;
|
|
function baseClone(value, bitmask, customizer, key, object, stack) {
|
|
var result, isDeep = bitmask & CLONE_DEEP_FLAG$7, isFlat = bitmask & CLONE_FLAT_FLAG$1, isFull = bitmask & CLONE_SYMBOLS_FLAG$5;
|
|
if (customizer) {
|
|
result = object ? customizer(value, key, object, stack) : customizer(value);
|
|
}
|
|
if (result !== void 0) {
|
|
return result;
|
|
}
|
|
if (!isObject(value)) {
|
|
return value;
|
|
}
|
|
var isArr = isArray(value);
|
|
if (isArr) {
|
|
result = initCloneArray(value);
|
|
if (!isDeep) {
|
|
return copyArray(value, result);
|
|
}
|
|
} else {
|
|
var tag = getTag$1(value), isFunc = tag == funcTag || tag == genTag;
|
|
if (isBuffer(value)) {
|
|
return cloneBuffer(value, isDeep);
|
|
}
|
|
if (tag == objectTag$1 || tag == argsTag$1 || isFunc && !object) {
|
|
result = isFlat || isFunc ? {} : initCloneObject(value);
|
|
if (!isDeep) {
|
|
return isFlat ? copySymbolsIn(value, baseAssignIn(result, value)) : copySymbols(value, baseAssign(result, value));
|
|
}
|
|
} else {
|
|
if (!cloneableTags[tag]) {
|
|
return object ? value : {};
|
|
}
|
|
result = initCloneByTag(value, tag, isDeep);
|
|
}
|
|
}
|
|
stack || (stack = new Stack());
|
|
var stacked = stack.get(value);
|
|
if (stacked) {
|
|
return stacked;
|
|
}
|
|
stack.set(value, result);
|
|
if (isSet(value)) {
|
|
value.forEach(function(subValue) {
|
|
result.add(baseClone(subValue, bitmask, customizer, subValue, value, stack));
|
|
});
|
|
} else if (isMap(value)) {
|
|
value.forEach(function(subValue, key2) {
|
|
result.set(key2, baseClone(subValue, bitmask, customizer, key2, value, stack));
|
|
});
|
|
}
|
|
var keysFunc = isFull ? isFlat ? getAllKeysIn : getAllKeys : isFlat ? keysIn : keys;
|
|
var props = isArr ? void 0 : keysFunc(value);
|
|
arrayEach(props || value, function(subValue, key2) {
|
|
if (props) {
|
|
key2 = subValue;
|
|
subValue = value[key2];
|
|
}
|
|
assignValue(result, key2, baseClone(subValue, bitmask, customizer, key2, value, stack));
|
|
});
|
|
return result;
|
|
}
|
|
|
|
var CLONE_SYMBOLS_FLAG$4 = 4;
|
|
function clone(value) {
|
|
return baseClone(value, CLONE_SYMBOLS_FLAG$4);
|
|
}
|
|
|
|
var CLONE_DEEP_FLAG$6 = 1;
|
|
var CLONE_SYMBOLS_FLAG$3 = 4;
|
|
function cloneDeep(value) {
|
|
return baseClone(value, CLONE_DEEP_FLAG$6 | CLONE_SYMBOLS_FLAG$3);
|
|
}
|
|
|
|
var CLONE_DEEP_FLAG$5 = 1;
|
|
var CLONE_SYMBOLS_FLAG$2 = 4;
|
|
function cloneDeepWith(value, customizer) {
|
|
customizer = typeof customizer == "function" ? customizer : void 0;
|
|
return baseClone(value, CLONE_DEEP_FLAG$5 | CLONE_SYMBOLS_FLAG$2, customizer);
|
|
}
|
|
|
|
var CLONE_SYMBOLS_FLAG$1 = 4;
|
|
function cloneWith(value, customizer) {
|
|
customizer = typeof customizer == "function" ? customizer : void 0;
|
|
return baseClone(value, CLONE_SYMBOLS_FLAG$1, customizer);
|
|
}
|
|
|
|
function wrapperCommit() {
|
|
return new LodashWrapper(this.value(), this.__chain__);
|
|
}
|
|
|
|
function compact(array) {
|
|
var index = -1, length = array == null ? 0 : array.length, resIndex = 0, result = [];
|
|
while (++index < length) {
|
|
var value = array[index];
|
|
if (value) {
|
|
result[resIndex++] = value;
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function concat() {
|
|
var length = arguments.length;
|
|
if (!length) {
|
|
return [];
|
|
}
|
|
var args = Array(length - 1), array = arguments[0], index = length;
|
|
while (index--) {
|
|
args[index - 1] = arguments[index];
|
|
}
|
|
return arrayPush(isArray(array) ? copyArray(array) : [array], baseFlatten(args, 1));
|
|
}
|
|
|
|
var HASH_UNDEFINED = "__lodash_hash_undefined__";
|
|
function setCacheAdd(value) {
|
|
this.__data__.set(value, HASH_UNDEFINED);
|
|
return this;
|
|
}
|
|
|
|
function setCacheHas(value) {
|
|
return this.__data__.has(value);
|
|
}
|
|
|
|
function SetCache(values) {
|
|
var index = -1, length = values == null ? 0 : values.length;
|
|
this.__data__ = new MapCache();
|
|
while (++index < length) {
|
|
this.add(values[index]);
|
|
}
|
|
}
|
|
SetCache.prototype.add = SetCache.prototype.push = setCacheAdd;
|
|
SetCache.prototype.has = setCacheHas;
|
|
|
|
function arraySome(array, predicate) {
|
|
var index = -1, length = array == null ? 0 : array.length;
|
|
while (++index < length) {
|
|
if (predicate(array[index], index, array)) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function cacheHas(cache, key) {
|
|
return cache.has(key);
|
|
}
|
|
|
|
var COMPARE_PARTIAL_FLAG$5 = 1;
|
|
var COMPARE_UNORDERED_FLAG$3 = 2;
|
|
function equalArrays(array, other, bitmask, customizer, equalFunc, stack) {
|
|
var isPartial = bitmask & COMPARE_PARTIAL_FLAG$5, arrLength = array.length, othLength = other.length;
|
|
if (arrLength != othLength && !(isPartial && othLength > arrLength)) {
|
|
return false;
|
|
}
|
|
var arrStacked = stack.get(array);
|
|
var othStacked = stack.get(other);
|
|
if (arrStacked && othStacked) {
|
|
return arrStacked == other && othStacked == array;
|
|
}
|
|
var index = -1, result = true, seen = bitmask & COMPARE_UNORDERED_FLAG$3 ? new SetCache() : void 0;
|
|
stack.set(array, other);
|
|
stack.set(other, array);
|
|
while (++index < arrLength) {
|
|
var arrValue = array[index], othValue = other[index];
|
|
if (customizer) {
|
|
var compared = isPartial ? customizer(othValue, arrValue, index, other, array, stack) : customizer(arrValue, othValue, index, array, other, stack);
|
|
}
|
|
if (compared !== void 0) {
|
|
if (compared) {
|
|
continue;
|
|
}
|
|
result = false;
|
|
break;
|
|
}
|
|
if (seen) {
|
|
if (!arraySome(other, function(othValue2, othIndex) {
|
|
if (!cacheHas(seen, othIndex) && (arrValue === othValue2 || equalFunc(arrValue, othValue2, bitmask, customizer, stack))) {
|
|
return seen.push(othIndex);
|
|
}
|
|
})) {
|
|
result = false;
|
|
break;
|
|
}
|
|
} else if (!(arrValue === othValue || equalFunc(arrValue, othValue, bitmask, customizer, stack))) {
|
|
result = false;
|
|
break;
|
|
}
|
|
}
|
|
stack["delete"](array);
|
|
stack["delete"](other);
|
|
return result;
|
|
}
|
|
|
|
function mapToArray(map) {
|
|
var index = -1, result = Array(map.size);
|
|
map.forEach(function(value, key) {
|
|
result[++index] = [key, value];
|
|
});
|
|
return result;
|
|
}
|
|
|
|
function setToArray(set) {
|
|
var index = -1, result = Array(set.size);
|
|
set.forEach(function(value) {
|
|
result[++index] = value;
|
|
});
|
|
return result;
|
|
}
|
|
|
|
var COMPARE_PARTIAL_FLAG$4 = 1;
|
|
var COMPARE_UNORDERED_FLAG$2 = 2;
|
|
var boolTag$1 = "[object Boolean]";
|
|
var dateTag$1 = "[object Date]";
|
|
var errorTag = "[object Error]";
|
|
var mapTag$4 = "[object Map]";
|
|
var numberTag$1 = "[object Number]";
|
|
var regexpTag$1 = "[object RegExp]";
|
|
var setTag$4 = "[object Set]";
|
|
var stringTag$1 = "[object String]";
|
|
var symbolTag = "[object Symbol]";
|
|
var arrayBufferTag$1 = "[object ArrayBuffer]";
|
|
var dataViewTag = "[object DataView]";
|
|
var symbolProto = Symbol$1 ? Symbol$1.prototype : void 0;
|
|
var symbolValueOf = symbolProto ? symbolProto.valueOf : void 0;
|
|
function equalByTag(object, other, tag, bitmask, customizer, equalFunc, stack) {
|
|
switch (tag) {
|
|
case dataViewTag:
|
|
if (object.byteLength != other.byteLength || object.byteOffset != other.byteOffset) {
|
|
return false;
|
|
}
|
|
object = object.buffer;
|
|
other = other.buffer;
|
|
case arrayBufferTag$1:
|
|
if (object.byteLength != other.byteLength || !equalFunc(new Uint8Array(object), new Uint8Array(other))) {
|
|
return false;
|
|
}
|
|
return true;
|
|
case boolTag$1:
|
|
case dateTag$1:
|
|
case numberTag$1:
|
|
return eq(+object, +other);
|
|
case errorTag:
|
|
return object.name == other.name && object.message == other.message;
|
|
case regexpTag$1:
|
|
case stringTag$1:
|
|
return object == other + "";
|
|
case mapTag$4:
|
|
var convert = mapToArray;
|
|
case setTag$4:
|
|
var isPartial = bitmask & COMPARE_PARTIAL_FLAG$4;
|
|
convert || (convert = setToArray);
|
|
if (object.size != other.size && !isPartial) {
|
|
return false;
|
|
}
|
|
var stacked = stack.get(object);
|
|
if (stacked) {
|
|
return stacked == other;
|
|
}
|
|
bitmask |= COMPARE_UNORDERED_FLAG$2;
|
|
stack.set(object, other);
|
|
var result = equalArrays(convert(object), convert(other), bitmask, customizer, equalFunc, stack);
|
|
stack["delete"](object);
|
|
return result;
|
|
case symbolTag:
|
|
if (symbolValueOf) {
|
|
return symbolValueOf.call(object) == symbolValueOf.call(other);
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
var COMPARE_PARTIAL_FLAG$3 = 1;
|
|
var objectProto$b = Object.prototype;
|
|
var hasOwnProperty$a = objectProto$b.hasOwnProperty;
|
|
function equalObjects(object, other, bitmask, customizer, equalFunc, stack) {
|
|
var isPartial = bitmask & COMPARE_PARTIAL_FLAG$3, objProps = getAllKeys(object), objLength = objProps.length, othProps = getAllKeys(other), othLength = othProps.length;
|
|
if (objLength != othLength && !isPartial) {
|
|
return false;
|
|
}
|
|
var index = objLength;
|
|
while (index--) {
|
|
var key = objProps[index];
|
|
if (!(isPartial ? key in other : hasOwnProperty$a.call(other, key))) {
|
|
return false;
|
|
}
|
|
}
|
|
var objStacked = stack.get(object);
|
|
var othStacked = stack.get(other);
|
|
if (objStacked && othStacked) {
|
|
return objStacked == other && othStacked == object;
|
|
}
|
|
var result = true;
|
|
stack.set(object, other);
|
|
stack.set(other, object);
|
|
var skipCtor = isPartial;
|
|
while (++index < objLength) {
|
|
key = objProps[index];
|
|
var objValue = object[key], othValue = other[key];
|
|
if (customizer) {
|
|
var compared = isPartial ? customizer(othValue, objValue, key, other, object, stack) : customizer(objValue, othValue, key, object, other, stack);
|
|
}
|
|
if (!(compared === void 0 ? objValue === othValue || equalFunc(objValue, othValue, bitmask, customizer, stack) : compared)) {
|
|
result = false;
|
|
break;
|
|
}
|
|
skipCtor || (skipCtor = key == "constructor");
|
|
}
|
|
if (result && !skipCtor) {
|
|
var objCtor = object.constructor, othCtor = other.constructor;
|
|
if (objCtor != othCtor && ("constructor" in object && "constructor" in other) && !(typeof objCtor == "function" && objCtor instanceof objCtor && typeof othCtor == "function" && othCtor instanceof othCtor)) {
|
|
result = false;
|
|
}
|
|
}
|
|
stack["delete"](object);
|
|
stack["delete"](other);
|
|
return result;
|
|
}
|
|
|
|
var COMPARE_PARTIAL_FLAG$2 = 1;
|
|
var argsTag = "[object Arguments]";
|
|
var arrayTag = "[object Array]";
|
|
var objectTag = "[object Object]";
|
|
var objectProto$a = Object.prototype;
|
|
var hasOwnProperty$9 = objectProto$a.hasOwnProperty;
|
|
function baseIsEqualDeep(object, other, bitmask, customizer, equalFunc, stack) {
|
|
var objIsArr = isArray(object), othIsArr = isArray(other), objTag = objIsArr ? arrayTag : getTag$1(object), othTag = othIsArr ? arrayTag : getTag$1(other);
|
|
objTag = objTag == argsTag ? objectTag : objTag;
|
|
othTag = othTag == argsTag ? objectTag : othTag;
|
|
var objIsObj = objTag == objectTag, othIsObj = othTag == objectTag, isSameTag = objTag == othTag;
|
|
if (isSameTag && isBuffer(object)) {
|
|
if (!isBuffer(other)) {
|
|
return false;
|
|
}
|
|
objIsArr = true;
|
|
objIsObj = false;
|
|
}
|
|
if (isSameTag && !objIsObj) {
|
|
stack || (stack = new Stack());
|
|
return objIsArr || isTypedArray(object) ? equalArrays(object, other, bitmask, customizer, equalFunc, stack) : equalByTag(object, other, objTag, bitmask, customizer, equalFunc, stack);
|
|
}
|
|
if (!(bitmask & COMPARE_PARTIAL_FLAG$2)) {
|
|
var objIsWrapped = objIsObj && hasOwnProperty$9.call(object, "__wrapped__"), othIsWrapped = othIsObj && hasOwnProperty$9.call(other, "__wrapped__");
|
|
if (objIsWrapped || othIsWrapped) {
|
|
var objUnwrapped = objIsWrapped ? object.value() : object, othUnwrapped = othIsWrapped ? other.value() : other;
|
|
stack || (stack = new Stack());
|
|
return equalFunc(objUnwrapped, othUnwrapped, bitmask, customizer, stack);
|
|
}
|
|
}
|
|
if (!isSameTag) {
|
|
return false;
|
|
}
|
|
stack || (stack = new Stack());
|
|
return equalObjects(object, other, bitmask, customizer, equalFunc, stack);
|
|
}
|
|
|
|
function baseIsEqual(value, other, bitmask, customizer, stack) {
|
|
if (value === other) {
|
|
return true;
|
|
}
|
|
if (value == null || other == null || !isObjectLike(value) && !isObjectLike(other)) {
|
|
return value !== value && other !== other;
|
|
}
|
|
return baseIsEqualDeep(value, other, bitmask, customizer, baseIsEqual, stack);
|
|
}
|
|
|
|
var COMPARE_PARTIAL_FLAG$1 = 1;
|
|
var COMPARE_UNORDERED_FLAG$1 = 2;
|
|
function baseIsMatch(object, source, matchData, customizer) {
|
|
var index = matchData.length, length = index, noCustomizer = !customizer;
|
|
if (object == null) {
|
|
return !length;
|
|
}
|
|
object = Object(object);
|
|
while (index--) {
|
|
var data = matchData[index];
|
|
if (noCustomizer && data[2] ? data[1] !== object[data[0]] : !(data[0] in object)) {
|
|
return false;
|
|
}
|
|
}
|
|
while (++index < length) {
|
|
data = matchData[index];
|
|
var key = data[0], objValue = object[key], srcValue = data[1];
|
|
if (noCustomizer && data[2]) {
|
|
if (objValue === void 0 && !(key in object)) {
|
|
return false;
|
|
}
|
|
} else {
|
|
var stack = new Stack();
|
|
if (customizer) {
|
|
var result = customizer(objValue, srcValue, key, object, source, stack);
|
|
}
|
|
if (!(result === void 0 ? baseIsEqual(srcValue, objValue, COMPARE_PARTIAL_FLAG$1 | COMPARE_UNORDERED_FLAG$1, customizer, stack) : result)) {
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function isStrictComparable(value) {
|
|
return value === value && !isObject(value);
|
|
}
|
|
|
|
function getMatchData(object) {
|
|
var result = keys(object), length = result.length;
|
|
while (length--) {
|
|
var key = result[length], value = object[key];
|
|
result[length] = [key, value, isStrictComparable(value)];
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function matchesStrictComparable(key, srcValue) {
|
|
return function(object) {
|
|
if (object == null) {
|
|
return false;
|
|
}
|
|
return object[key] === srcValue && (srcValue !== void 0 || key in Object(object));
|
|
};
|
|
}
|
|
|
|
function baseMatches(source) {
|
|
var matchData = getMatchData(source);
|
|
if (matchData.length == 1 && matchData[0][2]) {
|
|
return matchesStrictComparable(matchData[0][0], matchData[0][1]);
|
|
}
|
|
return function(object) {
|
|
return object === source || baseIsMatch(object, source, matchData);
|
|
};
|
|
}
|
|
|
|
function baseHasIn(object, key) {
|
|
return object != null && key in Object(object);
|
|
}
|
|
|
|
function hasPath(object, path, hasFunc) {
|
|
path = castPath(path, object);
|
|
var index = -1, length = path.length, result = false;
|
|
while (++index < length) {
|
|
var key = toKey(path[index]);
|
|
if (!(result = object != null && hasFunc(object, key))) {
|
|
break;
|
|
}
|
|
object = object[key];
|
|
}
|
|
if (result || ++index != length) {
|
|
return result;
|
|
}
|
|
length = object == null ? 0 : object.length;
|
|
return !!length && isLength(length) && isIndex(key, length) && (isArray(object) || isArguments(object));
|
|
}
|
|
|
|
function hasIn(object, path) {
|
|
return object != null && hasPath(object, path, baseHasIn);
|
|
}
|
|
|
|
var COMPARE_PARTIAL_FLAG = 1;
|
|
var COMPARE_UNORDERED_FLAG = 2;
|
|
function baseMatchesProperty(path, srcValue) {
|
|
if (isKey(path) && isStrictComparable(srcValue)) {
|
|
return matchesStrictComparable(toKey(path), srcValue);
|
|
}
|
|
return function(object) {
|
|
var objValue = get(object, path);
|
|
return objValue === void 0 && objValue === srcValue ? hasIn(object, path) : baseIsEqual(srcValue, objValue, COMPARE_PARTIAL_FLAG | COMPARE_UNORDERED_FLAG);
|
|
};
|
|
}
|
|
|
|
function baseProperty(key) {
|
|
return function(object) {
|
|
return object == null ? void 0 : object[key];
|
|
};
|
|
}
|
|
|
|
function basePropertyDeep(path) {
|
|
return function(object) {
|
|
return baseGet(object, path);
|
|
};
|
|
}
|
|
|
|
function property(path) {
|
|
return isKey(path) ? baseProperty(toKey(path)) : basePropertyDeep(path);
|
|
}
|
|
|
|
function baseIteratee(value) {
|
|
if (typeof value == "function") {
|
|
return value;
|
|
}
|
|
if (value == null) {
|
|
return identity;
|
|
}
|
|
if (typeof value == "object") {
|
|
return isArray(value) ? baseMatchesProperty(value[0], value[1]) : baseMatches(value);
|
|
}
|
|
return property(value);
|
|
}
|
|
|
|
var FUNC_ERROR_TEXT$7 = "Expected a function";
|
|
function cond(pairs) {
|
|
var length = pairs == null ? 0 : pairs.length, toIteratee = baseIteratee;
|
|
pairs = !length ? [] : arrayMap(pairs, function(pair) {
|
|
if (typeof pair[1] != "function") {
|
|
throw new TypeError(FUNC_ERROR_TEXT$7);
|
|
}
|
|
return [toIteratee(pair[0]), pair[1]];
|
|
});
|
|
return baseRest(function(args) {
|
|
var index = -1;
|
|
while (++index < length) {
|
|
var pair = pairs[index];
|
|
if (apply(pair[0], this, args)) {
|
|
return apply(pair[1], this, args);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function baseConformsTo(object, source, props) {
|
|
var length = props.length;
|
|
if (object == null) {
|
|
return !length;
|
|
}
|
|
object = Object(object);
|
|
while (length--) {
|
|
var key = props[length], predicate = source[key], value = object[key];
|
|
if (value === void 0 && !(key in object) || !predicate(value)) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function baseConforms(source) {
|
|
var props = keys(source);
|
|
return function(object) {
|
|
return baseConformsTo(object, source, props);
|
|
};
|
|
}
|
|
|
|
var CLONE_DEEP_FLAG$4 = 1;
|
|
function conforms(source) {
|
|
return baseConforms(baseClone(source, CLONE_DEEP_FLAG$4));
|
|
}
|
|
|
|
function conformsTo(object, source) {
|
|
return source == null || baseConformsTo(object, source, keys(source));
|
|
}
|
|
|
|
function arrayAggregator(array, setter, iteratee, accumulator) {
|
|
var index = -1, length = array == null ? 0 : array.length;
|
|
while (++index < length) {
|
|
var value = array[index];
|
|
setter(accumulator, value, iteratee(value), array);
|
|
}
|
|
return accumulator;
|
|
}
|
|
|
|
function createBaseFor(fromRight) {
|
|
return function(object, iteratee, keysFunc) {
|
|
var index = -1, iterable = Object(object), props = keysFunc(object), length = props.length;
|
|
while (length--) {
|
|
var key = props[fromRight ? length : ++index];
|
|
if (iteratee(iterable[key], key, iterable) === false) {
|
|
break;
|
|
}
|
|
}
|
|
return object;
|
|
};
|
|
}
|
|
|
|
var baseFor = createBaseFor();
|
|
|
|
function baseForOwn(object, iteratee) {
|
|
return object && baseFor(object, iteratee, keys);
|
|
}
|
|
|
|
function createBaseEach(eachFunc, fromRight) {
|
|
return function(collection, iteratee) {
|
|
if (collection == null) {
|
|
return collection;
|
|
}
|
|
if (!isArrayLike(collection)) {
|
|
return eachFunc(collection, iteratee);
|
|
}
|
|
var length = collection.length, index = fromRight ? length : -1, iterable = Object(collection);
|
|
while (fromRight ? index-- : ++index < length) {
|
|
if (iteratee(iterable[index], index, iterable) === false) {
|
|
break;
|
|
}
|
|
}
|
|
return collection;
|
|
};
|
|
}
|
|
|
|
var baseEach = createBaseEach(baseForOwn);
|
|
|
|
function baseAggregator(collection, setter, iteratee, accumulator) {
|
|
baseEach(collection, function(value, key, collection2) {
|
|
setter(accumulator, value, iteratee(value), collection2);
|
|
});
|
|
return accumulator;
|
|
}
|
|
|
|
function createAggregator(setter, initializer) {
|
|
return function(collection, iteratee) {
|
|
var func = isArray(collection) ? arrayAggregator : baseAggregator, accumulator = initializer ? initializer() : {};
|
|
return func(collection, setter, baseIteratee(iteratee), accumulator);
|
|
};
|
|
}
|
|
|
|
var objectProto$9 = Object.prototype;
|
|
var hasOwnProperty$8 = objectProto$9.hasOwnProperty;
|
|
var countBy = createAggregator(function(result, value, key) {
|
|
if (hasOwnProperty$8.call(result, key)) {
|
|
++result[key];
|
|
} else {
|
|
baseAssignValue(result, key, 1);
|
|
}
|
|
});
|
|
|
|
function create(prototype, properties) {
|
|
var result = baseCreate(prototype);
|
|
return properties == null ? result : baseAssign(result, properties);
|
|
}
|
|
|
|
var WRAP_CURRY_FLAG$1 = 8;
|
|
function curry(func, arity, guard) {
|
|
arity = guard ? void 0 : arity;
|
|
var result = createWrap(func, WRAP_CURRY_FLAG$1, void 0, void 0, void 0, void 0, void 0, arity);
|
|
result.placeholder = curry.placeholder;
|
|
return result;
|
|
}
|
|
curry.placeholder = {};
|
|
|
|
var WRAP_CURRY_RIGHT_FLAG = 16;
|
|
function curryRight(func, arity, guard) {
|
|
arity = guard ? void 0 : arity;
|
|
var result = createWrap(func, WRAP_CURRY_RIGHT_FLAG, void 0, void 0, void 0, void 0, void 0, arity);
|
|
result.placeholder = curryRight.placeholder;
|
|
return result;
|
|
}
|
|
curryRight.placeholder = {};
|
|
|
|
var now = function() {
|
|
return root.Date.now();
|
|
};
|
|
|
|
var FUNC_ERROR_TEXT$6 = "Expected a function";
|
|
var nativeMax$b = Math.max;
|
|
var nativeMin$b = Math.min;
|
|
function debounce(func, wait, options) {
|
|
var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
|
|
if (typeof func != "function") {
|
|
throw new TypeError(FUNC_ERROR_TEXT$6);
|
|
}
|
|
wait = toNumber(wait) || 0;
|
|
if (isObject(options)) {
|
|
leading = !!options.leading;
|
|
maxing = "maxWait" in options;
|
|
maxWait = maxing ? nativeMax$b(toNumber(options.maxWait) || 0, wait) : maxWait;
|
|
trailing = "trailing" in options ? !!options.trailing : trailing;
|
|
}
|
|
function invokeFunc(time) {
|
|
var args = lastArgs, thisArg = lastThis;
|
|
lastArgs = lastThis = void 0;
|
|
lastInvokeTime = time;
|
|
result = func.apply(thisArg, args);
|
|
return result;
|
|
}
|
|
function leadingEdge(time) {
|
|
lastInvokeTime = time;
|
|
timerId = setTimeout(timerExpired, wait);
|
|
return leading ? invokeFunc(time) : result;
|
|
}
|
|
function remainingWait(time) {
|
|
var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime, timeWaiting = wait - timeSinceLastCall;
|
|
return maxing ? nativeMin$b(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting;
|
|
}
|
|
function shouldInvoke(time) {
|
|
var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime;
|
|
return lastCallTime === void 0 || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait;
|
|
}
|
|
function timerExpired() {
|
|
var time = now();
|
|
if (shouldInvoke(time)) {
|
|
return trailingEdge(time);
|
|
}
|
|
timerId = setTimeout(timerExpired, remainingWait(time));
|
|
}
|
|
function trailingEdge(time) {
|
|
timerId = void 0;
|
|
if (trailing && lastArgs) {
|
|
return invokeFunc(time);
|
|
}
|
|
lastArgs = lastThis = void 0;
|
|
return result;
|
|
}
|
|
function cancel() {
|
|
if (timerId !== void 0) {
|
|
clearTimeout(timerId);
|
|
}
|
|
lastInvokeTime = 0;
|
|
lastArgs = lastCallTime = lastThis = timerId = void 0;
|
|
}
|
|
function flush() {
|
|
return timerId === void 0 ? result : trailingEdge(now());
|
|
}
|
|
function debounced() {
|
|
var time = now(), isInvoking = shouldInvoke(time);
|
|
lastArgs = arguments;
|
|
lastThis = this;
|
|
lastCallTime = time;
|
|
if (isInvoking) {
|
|
if (timerId === void 0) {
|
|
return leadingEdge(lastCallTime);
|
|
}
|
|
if (maxing) {
|
|
clearTimeout(timerId);
|
|
timerId = setTimeout(timerExpired, wait);
|
|
return invokeFunc(lastCallTime);
|
|
}
|
|
}
|
|
if (timerId === void 0) {
|
|
timerId = setTimeout(timerExpired, wait);
|
|
}
|
|
return result;
|
|
}
|
|
debounced.cancel = cancel;
|
|
debounced.flush = flush;
|
|
return debounced;
|
|
}
|
|
|
|
function defaultTo(value, defaultValue) {
|
|
return value == null || value !== value ? defaultValue : value;
|
|
}
|
|
|
|
var objectProto$8 = Object.prototype;
|
|
var hasOwnProperty$7 = objectProto$8.hasOwnProperty;
|
|
var defaults = baseRest(function(object, sources) {
|
|
object = Object(object);
|
|
var index = -1;
|
|
var length = sources.length;
|
|
var guard = length > 2 ? sources[2] : void 0;
|
|
if (guard && isIterateeCall(sources[0], sources[1], guard)) {
|
|
length = 1;
|
|
}
|
|
while (++index < length) {
|
|
var source = sources[index];
|
|
var props = keysIn(source);
|
|
var propsIndex = -1;
|
|
var propsLength = props.length;
|
|
while (++propsIndex < propsLength) {
|
|
var key = props[propsIndex];
|
|
var value = object[key];
|
|
if (value === void 0 || eq(value, objectProto$8[key]) && !hasOwnProperty$7.call(object, key)) {
|
|
object[key] = source[key];
|
|
}
|
|
}
|
|
}
|
|
return object;
|
|
});
|
|
|
|
function assignMergeValue(object, key, value) {
|
|
if (value !== void 0 && !eq(object[key], value) || value === void 0 && !(key in object)) {
|
|
baseAssignValue(object, key, value);
|
|
}
|
|
}
|
|
|
|
function isArrayLikeObject(value) {
|
|
return isObjectLike(value) && isArrayLike(value);
|
|
}
|
|
|
|
function safeGet(object, key) {
|
|
if (key === "constructor" && typeof object[key] === "function") {
|
|
return;
|
|
}
|
|
if (key == "__proto__") {
|
|
return;
|
|
}
|
|
return object[key];
|
|
}
|
|
|
|
function toPlainObject(value) {
|
|
return copyObject(value, keysIn(value));
|
|
}
|
|
|
|
function baseMergeDeep(object, source, key, srcIndex, mergeFunc, customizer, stack) {
|
|
var objValue = safeGet(object, key), srcValue = safeGet(source, key), stacked = stack.get(srcValue);
|
|
if (stacked) {
|
|
assignMergeValue(object, key, stacked);
|
|
return;
|
|
}
|
|
var newValue = customizer ? customizer(objValue, srcValue, key + "", object, source, stack) : void 0;
|
|
var isCommon = newValue === void 0;
|
|
if (isCommon) {
|
|
var isArr = isArray(srcValue), isBuff = !isArr && isBuffer(srcValue), isTyped = !isArr && !isBuff && isTypedArray(srcValue);
|
|
newValue = srcValue;
|
|
if (isArr || isBuff || isTyped) {
|
|
if (isArray(objValue)) {
|
|
newValue = objValue;
|
|
} else if (isArrayLikeObject(objValue)) {
|
|
newValue = copyArray(objValue);
|
|
} else if (isBuff) {
|
|
isCommon = false;
|
|
newValue = cloneBuffer(srcValue, true);
|
|
} else if (isTyped) {
|
|
isCommon = false;
|
|
newValue = cloneTypedArray(srcValue, true);
|
|
} else {
|
|
newValue = [];
|
|
}
|
|
} else if (isPlainObject(srcValue) || isArguments(srcValue)) {
|
|
newValue = objValue;
|
|
if (isArguments(objValue)) {
|
|
newValue = toPlainObject(objValue);
|
|
} else if (!isObject(objValue) || isFunction(objValue)) {
|
|
newValue = initCloneObject(srcValue);
|
|
}
|
|
} else {
|
|
isCommon = false;
|
|
}
|
|
}
|
|
if (isCommon) {
|
|
stack.set(srcValue, newValue);
|
|
mergeFunc(newValue, srcValue, srcIndex, customizer, stack);
|
|
stack["delete"](srcValue);
|
|
}
|
|
assignMergeValue(object, key, newValue);
|
|
}
|
|
|
|
function baseMerge(object, source, srcIndex, customizer, stack) {
|
|
if (object === source) {
|
|
return;
|
|
}
|
|
baseFor(source, function(srcValue, key) {
|
|
stack || (stack = new Stack());
|
|
if (isObject(srcValue)) {
|
|
baseMergeDeep(object, source, key, srcIndex, baseMerge, customizer, stack);
|
|
} else {
|
|
var newValue = customizer ? customizer(safeGet(object, key), srcValue, key + "", object, source, stack) : void 0;
|
|
if (newValue === void 0) {
|
|
newValue = srcValue;
|
|
}
|
|
assignMergeValue(object, key, newValue);
|
|
}
|
|
}, keysIn);
|
|
}
|
|
|
|
function customDefaultsMerge(objValue, srcValue, key, object, source, stack) {
|
|
if (isObject(objValue) && isObject(srcValue)) {
|
|
stack.set(srcValue, objValue);
|
|
baseMerge(objValue, srcValue, void 0, customDefaultsMerge, stack);
|
|
stack["delete"](srcValue);
|
|
}
|
|
return objValue;
|
|
}
|
|
|
|
var mergeWith = createAssigner(function(object, source, srcIndex, customizer) {
|
|
baseMerge(object, source, srcIndex, customizer);
|
|
});
|
|
|
|
var defaultsDeep = baseRest(function(args) {
|
|
args.push(void 0, customDefaultsMerge);
|
|
return apply(mergeWith, void 0, args);
|
|
});
|
|
|
|
var FUNC_ERROR_TEXT$5 = "Expected a function";
|
|
function baseDelay(func, wait, args) {
|
|
if (typeof func != "function") {
|
|
throw new TypeError(FUNC_ERROR_TEXT$5);
|
|
}
|
|
return setTimeout(function() {
|
|
func.apply(void 0, args);
|
|
}, wait);
|
|
}
|
|
|
|
var defer = baseRest(function(func, args) {
|
|
return baseDelay(func, 1, args);
|
|
});
|
|
|
|
var delay = baseRest(function(func, wait, args) {
|
|
return baseDelay(func, toNumber(wait) || 0, args);
|
|
});
|
|
|
|
function arrayIncludesWith(array, value, comparator) {
|
|
var index = -1, length = array == null ? 0 : array.length;
|
|
while (++index < length) {
|
|
if (comparator(value, array[index])) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
var LARGE_ARRAY_SIZE$1 = 200;
|
|
function baseDifference(array, values, iteratee, comparator) {
|
|
var index = -1, includes = arrayIncludes, isCommon = true, length = array.length, result = [], valuesLength = values.length;
|
|
if (!length) {
|
|
return result;
|
|
}
|
|
if (iteratee) {
|
|
values = arrayMap(values, baseUnary(iteratee));
|
|
}
|
|
if (comparator) {
|
|
includes = arrayIncludesWith;
|
|
isCommon = false;
|
|
} else if (values.length >= LARGE_ARRAY_SIZE$1) {
|
|
includes = cacheHas;
|
|
isCommon = false;
|
|
values = new SetCache(values);
|
|
}
|
|
outer:
|
|
while (++index < length) {
|
|
var value = array[index], computed = iteratee == null ? value : iteratee(value);
|
|
value = comparator || value !== 0 ? value : 0;
|
|
if (isCommon && computed === computed) {
|
|
var valuesIndex = valuesLength;
|
|
while (valuesIndex--) {
|
|
if (values[valuesIndex] === computed) {
|
|
continue outer;
|
|
}
|
|
}
|
|
result.push(value);
|
|
} else if (!includes(values, computed, comparator)) {
|
|
result.push(value);
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
var difference = baseRest(function(array, values) {
|
|
return isArrayLikeObject(array) ? baseDifference(array, baseFlatten(values, 1, isArrayLikeObject, true)) : [];
|
|
});
|
|
|
|
function last(array) {
|
|
var length = array == null ? 0 : array.length;
|
|
return length ? array[length - 1] : void 0;
|
|
}
|
|
|
|
var differenceBy = baseRest(function(array, values) {
|
|
var iteratee = last(values);
|
|
if (isArrayLikeObject(iteratee)) {
|
|
iteratee = void 0;
|
|
}
|
|
return isArrayLikeObject(array) ? baseDifference(array, baseFlatten(values, 1, isArrayLikeObject, true), baseIteratee(iteratee)) : [];
|
|
});
|
|
|
|
var differenceWith = baseRest(function(array, values) {
|
|
var comparator = last(values);
|
|
if (isArrayLikeObject(comparator)) {
|
|
comparator = void 0;
|
|
}
|
|
return isArrayLikeObject(array) ? baseDifference(array, baseFlatten(values, 1, isArrayLikeObject, true), void 0, comparator) : [];
|
|
});
|
|
|
|
var divide = createMathOperation(function(dividend, divisor) {
|
|
return dividend / divisor;
|
|
}, 1);
|
|
|
|
function drop(array, n, guard) {
|
|
var length = array == null ? 0 : array.length;
|
|
if (!length) {
|
|
return [];
|
|
}
|
|
n = guard || n === void 0 ? 1 : toInteger(n);
|
|
return baseSlice(array, n < 0 ? 0 : n, length);
|
|
}
|
|
|
|
function dropRight(array, n, guard) {
|
|
var length = array == null ? 0 : array.length;
|
|
if (!length) {
|
|
return [];
|
|
}
|
|
n = guard || n === void 0 ? 1 : toInteger(n);
|
|
n = length - n;
|
|
return baseSlice(array, 0, n < 0 ? 0 : n);
|
|
}
|
|
|
|
function baseWhile(array, predicate, isDrop, fromRight) {
|
|
var length = array.length, index = fromRight ? length : -1;
|
|
while ((fromRight ? index-- : ++index < length) && predicate(array[index], index, array)) {
|
|
}
|
|
return isDrop ? baseSlice(array, fromRight ? 0 : index, fromRight ? index + 1 : length) : baseSlice(array, fromRight ? index + 1 : 0, fromRight ? length : index);
|
|
}
|
|
|
|
function dropRightWhile(array, predicate) {
|
|
return array && array.length ? baseWhile(array, baseIteratee(predicate), true, true) : [];
|
|
}
|
|
|
|
function dropWhile(array, predicate) {
|
|
return array && array.length ? baseWhile(array, baseIteratee(predicate), true) : [];
|
|
}
|
|
|
|
function castFunction(value) {
|
|
return typeof value == "function" ? value : identity;
|
|
}
|
|
|
|
function forEach(collection, iteratee) {
|
|
var func = isArray(collection) ? arrayEach : baseEach;
|
|
return func(collection, castFunction(iteratee));
|
|
}
|
|
|
|
function arrayEachRight(array, iteratee) {
|
|
var length = array == null ? 0 : array.length;
|
|
while (length--) {
|
|
if (iteratee(array[length], length, array) === false) {
|
|
break;
|
|
}
|
|
}
|
|
return array;
|
|
}
|
|
|
|
var baseForRight = createBaseFor(true);
|
|
|
|
function baseForOwnRight(object, iteratee) {
|
|
return object && baseForRight(object, iteratee, keys);
|
|
}
|
|
|
|
var baseEachRight = createBaseEach(baseForOwnRight, true);
|
|
|
|
function forEachRight(collection, iteratee) {
|
|
var func = isArray(collection) ? arrayEachRight : baseEachRight;
|
|
return func(collection, castFunction(iteratee));
|
|
}
|
|
|
|
function endsWith(string, target, position) {
|
|
string = toString(string);
|
|
target = baseToString(target);
|
|
var length = string.length;
|
|
position = position === void 0 ? length : baseClamp(toInteger(position), 0, length);
|
|
var end = position;
|
|
position -= target.length;
|
|
return position >= 0 && string.slice(position, end) == target;
|
|
}
|
|
|
|
function baseToPairs(object, props) {
|
|
return arrayMap(props, function(key) {
|
|
return [key, object[key]];
|
|
});
|
|
}
|
|
|
|
function setToPairs(set) {
|
|
var index = -1, result = Array(set.size);
|
|
set.forEach(function(value) {
|
|
result[++index] = [value, value];
|
|
});
|
|
return result;
|
|
}
|
|
|
|
var mapTag$3 = "[object Map]";
|
|
var setTag$3 = "[object Set]";
|
|
function createToPairs(keysFunc) {
|
|
return function(object) {
|
|
var tag = getTag$1(object);
|
|
if (tag == mapTag$3) {
|
|
return mapToArray(object);
|
|
}
|
|
if (tag == setTag$3) {
|
|
return setToPairs(object);
|
|
}
|
|
return baseToPairs(object, keysFunc(object));
|
|
};
|
|
}
|
|
|
|
var toPairs = createToPairs(keys);
|
|
|
|
var toPairsIn = createToPairs(keysIn);
|
|
|
|
var htmlEscapes = {
|
|
"&": "&",
|
|
"<": "<",
|
|
">": ">",
|
|
'"': """,
|
|
"'": "'"
|
|
};
|
|
var escapeHtmlChar = basePropertyOf(htmlEscapes);
|
|
|
|
var reUnescapedHtml = /[&<>"']/g;
|
|
var reHasUnescapedHtml = RegExp(reUnescapedHtml.source);
|
|
function escape(string) {
|
|
string = toString(string);
|
|
return string && reHasUnescapedHtml.test(string) ? string.replace(reUnescapedHtml, escapeHtmlChar) : string;
|
|
}
|
|
|
|
var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
|
|
var reHasRegExpChar = RegExp(reRegExpChar.source);
|
|
function escapeRegExp(string) {
|
|
string = toString(string);
|
|
return string && reHasRegExpChar.test(string) ? string.replace(reRegExpChar, "\\$&") : string;
|
|
}
|
|
|
|
function arrayEvery(array, predicate) {
|
|
var index = -1, length = array == null ? 0 : array.length;
|
|
while (++index < length) {
|
|
if (!predicate(array[index], index, array)) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function baseEvery(collection, predicate) {
|
|
var result = true;
|
|
baseEach(collection, function(value, index, collection2) {
|
|
result = !!predicate(value, index, collection2);
|
|
return result;
|
|
});
|
|
return result;
|
|
}
|
|
|
|
function every(collection, predicate, guard) {
|
|
var func = isArray(collection) ? arrayEvery : baseEvery;
|
|
if (guard && isIterateeCall(collection, predicate, guard)) {
|
|
predicate = void 0;
|
|
}
|
|
return func(collection, baseIteratee(predicate));
|
|
}
|
|
|
|
var MAX_ARRAY_LENGTH$5 = 4294967295;
|
|
function toLength(value) {
|
|
return value ? baseClamp(toInteger(value), 0, MAX_ARRAY_LENGTH$5) : 0;
|
|
}
|
|
|
|
function baseFill(array, value, start, end) {
|
|
var length = array.length;
|
|
start = toInteger(start);
|
|
if (start < 0) {
|
|
start = -start > length ? 0 : length + start;
|
|
}
|
|
end = end === void 0 || end > length ? length : toInteger(end);
|
|
if (end < 0) {
|
|
end += length;
|
|
}
|
|
end = start > end ? 0 : toLength(end);
|
|
while (start < end) {
|
|
array[start++] = value;
|
|
}
|
|
return array;
|
|
}
|
|
|
|
function fill(array, value, start, end) {
|
|
var length = array == null ? 0 : array.length;
|
|
if (!length) {
|
|
return [];
|
|
}
|
|
if (start && typeof start != "number" && isIterateeCall(array, value, start)) {
|
|
start = 0;
|
|
end = length;
|
|
}
|
|
return baseFill(array, value, start, end);
|
|
}
|
|
|
|
function baseFilter(collection, predicate) {
|
|
var result = [];
|
|
baseEach(collection, function(value, index, collection2) {
|
|
if (predicate(value, index, collection2)) {
|
|
result.push(value);
|
|
}
|
|
});
|
|
return result;
|
|
}
|
|
|
|
function filter(collection, predicate) {
|
|
var func = isArray(collection) ? arrayFilter : baseFilter;
|
|
return func(collection, baseIteratee(predicate));
|
|
}
|
|
|
|
function createFind(findIndexFunc) {
|
|
return function(collection, predicate, fromIndex) {
|
|
var iterable = Object(collection);
|
|
if (!isArrayLike(collection)) {
|
|
var iteratee = baseIteratee(predicate);
|
|
collection = keys(collection);
|
|
predicate = function(key) {
|
|
return iteratee(iterable[key], key, iterable);
|
|
};
|
|
}
|
|
var index = findIndexFunc(collection, predicate, fromIndex);
|
|
return index > -1 ? iterable[iteratee ? collection[index] : index] : void 0;
|
|
};
|
|
}
|
|
|
|
var nativeMax$a = Math.max;
|
|
function findIndex(array, predicate, fromIndex) {
|
|
var length = array == null ? 0 : array.length;
|
|
if (!length) {
|
|
return -1;
|
|
}
|
|
var index = fromIndex == null ? 0 : toInteger(fromIndex);
|
|
if (index < 0) {
|
|
index = nativeMax$a(length + index, 0);
|
|
}
|
|
return baseFindIndex(array, baseIteratee(predicate), index);
|
|
}
|
|
|
|
var find = createFind(findIndex);
|
|
|
|
function baseFindKey(collection, predicate, eachFunc) {
|
|
var result;
|
|
eachFunc(collection, function(value, key, collection2) {
|
|
if (predicate(value, key, collection2)) {
|
|
result = key;
|
|
return false;
|
|
}
|
|
});
|
|
return result;
|
|
}
|
|
|
|
function findKey(object, predicate) {
|
|
return baseFindKey(object, baseIteratee(predicate), baseForOwn);
|
|
}
|
|
|
|
var nativeMax$9 = Math.max;
|
|
var nativeMin$a = Math.min;
|
|
function findLastIndex(array, predicate, fromIndex) {
|
|
var length = array == null ? 0 : array.length;
|
|
if (!length) {
|
|
return -1;
|
|
}
|
|
var index = length - 1;
|
|
if (fromIndex !== void 0) {
|
|
index = toInteger(fromIndex);
|
|
index = fromIndex < 0 ? nativeMax$9(length + index, 0) : nativeMin$a(index, length - 1);
|
|
}
|
|
return baseFindIndex(array, baseIteratee(predicate), index, true);
|
|
}
|
|
|
|
var findLast = createFind(findLastIndex);
|
|
|
|
function findLastKey(object, predicate) {
|
|
return baseFindKey(object, baseIteratee(predicate), baseForOwnRight);
|
|
}
|
|
|
|
function head(array) {
|
|
return array && array.length ? array[0] : void 0;
|
|
}
|
|
|
|
function baseMap(collection, iteratee) {
|
|
var index = -1, result = isArrayLike(collection) ? Array(collection.length) : [];
|
|
baseEach(collection, function(value, key, collection2) {
|
|
result[++index] = iteratee(value, key, collection2);
|
|
});
|
|
return result;
|
|
}
|
|
|
|
function map(collection, iteratee) {
|
|
var func = isArray(collection) ? arrayMap : baseMap;
|
|
return func(collection, baseIteratee(iteratee));
|
|
}
|
|
|
|
function flatMap(collection, iteratee) {
|
|
return baseFlatten(map(collection, iteratee), 1);
|
|
}
|
|
|
|
var INFINITY$2 = 1 / 0;
|
|
function flatMapDeep(collection, iteratee) {
|
|
return baseFlatten(map(collection, iteratee), INFINITY$2);
|
|
}
|
|
|
|
function flatMapDepth(collection, iteratee, depth) {
|
|
depth = depth === void 0 ? 1 : toInteger(depth);
|
|
return baseFlatten(map(collection, iteratee), depth);
|
|
}
|
|
|
|
var INFINITY$1 = 1 / 0;
|
|
function flattenDeep(array) {
|
|
var length = array == null ? 0 : array.length;
|
|
return length ? baseFlatten(array, INFINITY$1) : [];
|
|
}
|
|
|
|
function flattenDepth(array, depth) {
|
|
var length = array == null ? 0 : array.length;
|
|
if (!length) {
|
|
return [];
|
|
}
|
|
depth = depth === void 0 ? 1 : toInteger(depth);
|
|
return baseFlatten(array, depth);
|
|
}
|
|
|
|
var WRAP_FLIP_FLAG = 512;
|
|
function flip$1(func) {
|
|
return createWrap(func, WRAP_FLIP_FLAG);
|
|
}
|
|
|
|
var floor$1 = createRound("floor");
|
|
|
|
var FUNC_ERROR_TEXT$4 = "Expected a function";
|
|
var WRAP_CURRY_FLAG = 8;
|
|
var WRAP_PARTIAL_FLAG$1 = 32;
|
|
var WRAP_ARY_FLAG = 128;
|
|
var WRAP_REARG_FLAG$1 = 256;
|
|
function createFlow(fromRight) {
|
|
return flatRest(function(funcs) {
|
|
var length = funcs.length, index = length, prereq = LodashWrapper.prototype.thru;
|
|
if (fromRight) {
|
|
funcs.reverse();
|
|
}
|
|
while (index--) {
|
|
var func = funcs[index];
|
|
if (typeof func != "function") {
|
|
throw new TypeError(FUNC_ERROR_TEXT$4);
|
|
}
|
|
if (prereq && !wrapper && getFuncName(func) == "wrapper") {
|
|
var wrapper = new LodashWrapper([], true);
|
|
}
|
|
}
|
|
index = wrapper ? index : length;
|
|
while (++index < length) {
|
|
func = funcs[index];
|
|
var funcName = getFuncName(func), data = funcName == "wrapper" ? getData(func) : void 0;
|
|
if (data && isLaziable(data[0]) && data[1] == (WRAP_ARY_FLAG | WRAP_CURRY_FLAG | WRAP_PARTIAL_FLAG$1 | WRAP_REARG_FLAG$1) && !data[4].length && data[9] == 1) {
|
|
wrapper = wrapper[getFuncName(data[0])].apply(wrapper, data[3]);
|
|
} else {
|
|
wrapper = func.length == 1 && isLaziable(func) ? wrapper[funcName]() : wrapper.thru(func);
|
|
}
|
|
}
|
|
return function() {
|
|
var args = arguments, value = args[0];
|
|
if (wrapper && args.length == 1 && isArray(value)) {
|
|
return wrapper.plant(value).value();
|
|
}
|
|
var index2 = 0, result = length ? funcs[index2].apply(this, args) : value;
|
|
while (++index2 < length) {
|
|
result = funcs[index2].call(this, result);
|
|
}
|
|
return result;
|
|
};
|
|
});
|
|
}
|
|
|
|
var flow = createFlow();
|
|
|
|
var flowRight = createFlow(true);
|
|
|
|
function forIn(object, iteratee) {
|
|
return object == null ? object : baseFor(object, castFunction(iteratee), keysIn);
|
|
}
|
|
|
|
function forInRight(object, iteratee) {
|
|
return object == null ? object : baseForRight(object, castFunction(iteratee), keysIn);
|
|
}
|
|
|
|
function forOwn(object, iteratee) {
|
|
return object && baseForOwn(object, castFunction(iteratee));
|
|
}
|
|
|
|
function forOwnRight(object, iteratee) {
|
|
return object && baseForOwnRight(object, castFunction(iteratee));
|
|
}
|
|
|
|
function fromPairs(pairs) {
|
|
var index = -1, length = pairs == null ? 0 : pairs.length, result = {};
|
|
while (++index < length) {
|
|
var pair = pairs[index];
|
|
result[pair[0]] = pair[1];
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function baseFunctions(object, props) {
|
|
return arrayFilter(props, function(key) {
|
|
return isFunction(object[key]);
|
|
});
|
|
}
|
|
|
|
function functions(object) {
|
|
return object == null ? [] : baseFunctions(object, keys(object));
|
|
}
|
|
|
|
function functionsIn(object) {
|
|
return object == null ? [] : baseFunctions(object, keysIn(object));
|
|
}
|
|
|
|
var objectProto$7 = Object.prototype;
|
|
var hasOwnProperty$6 = objectProto$7.hasOwnProperty;
|
|
var groupBy = createAggregator(function(result, value, key) {
|
|
if (hasOwnProperty$6.call(result, key)) {
|
|
result[key].push(value);
|
|
} else {
|
|
baseAssignValue(result, key, [value]);
|
|
}
|
|
});
|
|
|
|
function baseGt(value, other) {
|
|
return value > other;
|
|
}
|
|
|
|
function createRelationalOperation(operator) {
|
|
return function(value, other) {
|
|
if (!(typeof value == "string" && typeof other == "string")) {
|
|
value = toNumber(value);
|
|
other = toNumber(other);
|
|
}
|
|
return operator(value, other);
|
|
};
|
|
}
|
|
|
|
var gt$1 = createRelationalOperation(baseGt);
|
|
|
|
var gte = createRelationalOperation(function(value, other) {
|
|
return value >= other;
|
|
});
|
|
|
|
var objectProto$6 = Object.prototype;
|
|
var hasOwnProperty$5 = objectProto$6.hasOwnProperty;
|
|
function baseHas(object, key) {
|
|
return object != null && hasOwnProperty$5.call(object, key);
|
|
}
|
|
|
|
function has(object, path) {
|
|
return object != null && hasPath(object, path, baseHas);
|
|
}
|
|
|
|
var nativeMax$8 = Math.max;
|
|
var nativeMin$9 = Math.min;
|
|
function baseInRange(number, start, end) {
|
|
return number >= nativeMin$9(start, end) && number < nativeMax$8(start, end);
|
|
}
|
|
|
|
function inRange(number, start, end) {
|
|
start = toFinite(start);
|
|
if (end === void 0) {
|
|
end = start;
|
|
start = 0;
|
|
} else {
|
|
end = toFinite(end);
|
|
}
|
|
number = toNumber(number);
|
|
return baseInRange(number, start, end);
|
|
}
|
|
|
|
var stringTag = "[object String]";
|
|
function isString(value) {
|
|
return typeof value == "string" || !isArray(value) && isObjectLike(value) && baseGetTag(value) == stringTag;
|
|
}
|
|
|
|
function baseValues(object, props) {
|
|
return arrayMap(props, function(key) {
|
|
return object[key];
|
|
});
|
|
}
|
|
|
|
function values(object) {
|
|
return object == null ? [] : baseValues(object, keys(object));
|
|
}
|
|
|
|
var nativeMax$7 = Math.max;
|
|
function includes(collection, value, fromIndex, guard) {
|
|
collection = isArrayLike(collection) ? collection : values(collection);
|
|
fromIndex = fromIndex && !guard ? toInteger(fromIndex) : 0;
|
|
var length = collection.length;
|
|
if (fromIndex < 0) {
|
|
fromIndex = nativeMax$7(length + fromIndex, 0);
|
|
}
|
|
return isString(collection) ? fromIndex <= length && collection.indexOf(value, fromIndex) > -1 : !!length && baseIndexOf(collection, value, fromIndex) > -1;
|
|
}
|
|
|
|
var nativeMax$6 = Math.max;
|
|
function indexOf(array, value, fromIndex) {
|
|
var length = array == null ? 0 : array.length;
|
|
if (!length) {
|
|
return -1;
|
|
}
|
|
var index = fromIndex == null ? 0 : toInteger(fromIndex);
|
|
if (index < 0) {
|
|
index = nativeMax$6(length + index, 0);
|
|
}
|
|
return baseIndexOf(array, value, index);
|
|
}
|
|
|
|
function initial$1(array) {
|
|
var length = array == null ? 0 : array.length;
|
|
return length ? baseSlice(array, 0, -1) : [];
|
|
}
|
|
|
|
var nativeMin$8 = Math.min;
|
|
function baseIntersection(arrays, iteratee, comparator) {
|
|
var includes = comparator ? arrayIncludesWith : arrayIncludes, length = arrays[0].length, othLength = arrays.length, othIndex = othLength, caches = Array(othLength), maxLength = Infinity, result = [];
|
|
while (othIndex--) {
|
|
var array = arrays[othIndex];
|
|
if (othIndex && iteratee) {
|
|
array = arrayMap(array, baseUnary(iteratee));
|
|
}
|
|
maxLength = nativeMin$8(array.length, maxLength);
|
|
caches[othIndex] = !comparator && (iteratee || length >= 120 && array.length >= 120) ? new SetCache(othIndex && array) : void 0;
|
|
}
|
|
array = arrays[0];
|
|
var index = -1, seen = caches[0];
|
|
outer:
|
|
while (++index < length && result.length < maxLength) {
|
|
var value = array[index], computed = iteratee ? iteratee(value) : value;
|
|
value = comparator || value !== 0 ? value : 0;
|
|
if (!(seen ? cacheHas(seen, computed) : includes(result, computed, comparator))) {
|
|
othIndex = othLength;
|
|
while (--othIndex) {
|
|
var cache = caches[othIndex];
|
|
if (!(cache ? cacheHas(cache, computed) : includes(arrays[othIndex], computed, comparator))) {
|
|
continue outer;
|
|
}
|
|
}
|
|
if (seen) {
|
|
seen.push(computed);
|
|
}
|
|
result.push(value);
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function castArrayLikeObject(value) {
|
|
return isArrayLikeObject(value) ? value : [];
|
|
}
|
|
|
|
var intersection = baseRest(function(arrays) {
|
|
var mapped = arrayMap(arrays, castArrayLikeObject);
|
|
return mapped.length && mapped[0] === arrays[0] ? baseIntersection(mapped) : [];
|
|
});
|
|
|
|
var intersectionBy = baseRest(function(arrays) {
|
|
var iteratee = last(arrays), mapped = arrayMap(arrays, castArrayLikeObject);
|
|
if (iteratee === last(mapped)) {
|
|
iteratee = void 0;
|
|
} else {
|
|
mapped.pop();
|
|
}
|
|
return mapped.length && mapped[0] === arrays[0] ? baseIntersection(mapped, baseIteratee(iteratee)) : [];
|
|
});
|
|
|
|
var intersectionWith = baseRest(function(arrays) {
|
|
var comparator = last(arrays), mapped = arrayMap(arrays, castArrayLikeObject);
|
|
comparator = typeof comparator == "function" ? comparator : void 0;
|
|
if (comparator) {
|
|
mapped.pop();
|
|
}
|
|
return mapped.length && mapped[0] === arrays[0] ? baseIntersection(mapped, void 0, comparator) : [];
|
|
});
|
|
|
|
function baseInverter(object, setter, iteratee, accumulator) {
|
|
baseForOwn(object, function(value, key, object2) {
|
|
setter(accumulator, iteratee(value), key, object2);
|
|
});
|
|
return accumulator;
|
|
}
|
|
|
|
function createInverter(setter, toIteratee) {
|
|
return function(object, iteratee) {
|
|
return baseInverter(object, setter, toIteratee(iteratee), {});
|
|
};
|
|
}
|
|
|
|
var objectProto$5 = Object.prototype;
|
|
var nativeObjectToString$1 = objectProto$5.toString;
|
|
var invert = createInverter(function(result, value, key) {
|
|
if (value != null && typeof value.toString != "function") {
|
|
value = nativeObjectToString$1.call(value);
|
|
}
|
|
result[value] = key;
|
|
}, constant(identity));
|
|
|
|
var objectProto$4 = Object.prototype;
|
|
var hasOwnProperty$4 = objectProto$4.hasOwnProperty;
|
|
var nativeObjectToString = objectProto$4.toString;
|
|
var invertBy = createInverter(function(result, value, key) {
|
|
if (value != null && typeof value.toString != "function") {
|
|
value = nativeObjectToString.call(value);
|
|
}
|
|
if (hasOwnProperty$4.call(result, value)) {
|
|
result[value].push(key);
|
|
} else {
|
|
result[value] = [key];
|
|
}
|
|
}, baseIteratee);
|
|
|
|
function parent(object, path) {
|
|
return path.length < 2 ? object : baseGet(object, baseSlice(path, 0, -1));
|
|
}
|
|
|
|
function baseInvoke(object, path, args) {
|
|
path = castPath(path, object);
|
|
object = parent(object, path);
|
|
var func = object == null ? object : object[toKey(last(path))];
|
|
return func == null ? void 0 : apply(func, object, args);
|
|
}
|
|
|
|
var invoke = baseRest(baseInvoke);
|
|
|
|
var invokeMap = baseRest(function(collection, path, args) {
|
|
var index = -1, isFunc = typeof path == "function", result = isArrayLike(collection) ? Array(collection.length) : [];
|
|
baseEach(collection, function(value) {
|
|
result[++index] = isFunc ? apply(path, value, args) : baseInvoke(value, path, args);
|
|
});
|
|
return result;
|
|
});
|
|
|
|
var arrayBufferTag = "[object ArrayBuffer]";
|
|
function baseIsArrayBuffer(value) {
|
|
return isObjectLike(value) && baseGetTag(value) == arrayBufferTag;
|
|
}
|
|
|
|
var nodeIsArrayBuffer = nodeUtil && nodeUtil.isArrayBuffer;
|
|
var isArrayBuffer = nodeIsArrayBuffer ? baseUnary(nodeIsArrayBuffer) : baseIsArrayBuffer;
|
|
|
|
var boolTag = "[object Boolean]";
|
|
function isBoolean$1(value) {
|
|
return value === true || value === false || isObjectLike(value) && baseGetTag(value) == boolTag;
|
|
}
|
|
|
|
var dateTag = "[object Date]";
|
|
function baseIsDate(value) {
|
|
return isObjectLike(value) && baseGetTag(value) == dateTag;
|
|
}
|
|
|
|
var nodeIsDate = nodeUtil && nodeUtil.isDate;
|
|
var isDate = nodeIsDate ? baseUnary(nodeIsDate) : baseIsDate;
|
|
|
|
function isElement$2(value) {
|
|
return isObjectLike(value) && value.nodeType === 1 && !isPlainObject(value);
|
|
}
|
|
|
|
var mapTag$2 = "[object Map]";
|
|
var setTag$2 = "[object Set]";
|
|
var objectProto$3 = Object.prototype;
|
|
var hasOwnProperty$3 = objectProto$3.hasOwnProperty;
|
|
function isEmpty$1(value) {
|
|
if (value == null) {
|
|
return true;
|
|
}
|
|
if (isArrayLike(value) && (isArray(value) || typeof value == "string" || typeof value.splice == "function" || isBuffer(value) || isTypedArray(value) || isArguments(value))) {
|
|
return !value.length;
|
|
}
|
|
var tag = getTag$1(value);
|
|
if (tag == mapTag$2 || tag == setTag$2) {
|
|
return !value.size;
|
|
}
|
|
if (isPrototype(value)) {
|
|
return !baseKeys(value).length;
|
|
}
|
|
for (var key in value) {
|
|
if (hasOwnProperty$3.call(value, key)) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function isEqual$1(value, other) {
|
|
return baseIsEqual(value, other);
|
|
}
|
|
|
|
function isEqualWith(value, other, customizer) {
|
|
customizer = typeof customizer == "function" ? customizer : void 0;
|
|
var result = customizer ? customizer(value, other) : void 0;
|
|
return result === void 0 ? baseIsEqual(value, other, void 0, customizer) : !!result;
|
|
}
|
|
|
|
var nativeIsFinite = root.isFinite;
|
|
function isFinite(value) {
|
|
return typeof value == "number" && nativeIsFinite(value);
|
|
}
|
|
|
|
function isInteger(value) {
|
|
return typeof value == "number" && value == toInteger(value);
|
|
}
|
|
|
|
function isMatch(object, source) {
|
|
return object === source || baseIsMatch(object, source, getMatchData(source));
|
|
}
|
|
|
|
function isMatchWith(object, source, customizer) {
|
|
customizer = typeof customizer == "function" ? customizer : void 0;
|
|
return baseIsMatch(object, source, getMatchData(source), customizer);
|
|
}
|
|
|
|
var numberTag = "[object Number]";
|
|
function isNumber$1(value) {
|
|
return typeof value == "number" || isObjectLike(value) && baseGetTag(value) == numberTag;
|
|
}
|
|
|
|
function isNaN$1(value) {
|
|
return isNumber$1(value) && value != +value;
|
|
}
|
|
|
|
var isMaskable = coreJsData ? isFunction : stubFalse;
|
|
|
|
var CORE_ERROR_TEXT = "Unsupported core-js use. Try https://npms.io/search?q=ponyfill.";
|
|
function isNative(value) {
|
|
if (isMaskable(value)) {
|
|
throw new Error(CORE_ERROR_TEXT);
|
|
}
|
|
return baseIsNative(value);
|
|
}
|
|
|
|
function isNil(value) {
|
|
return value == null;
|
|
}
|
|
|
|
function isNull(value) {
|
|
return value === null;
|
|
}
|
|
|
|
var regexpTag = "[object RegExp]";
|
|
function baseIsRegExp(value) {
|
|
return isObjectLike(value) && baseGetTag(value) == regexpTag;
|
|
}
|
|
|
|
var nodeIsRegExp = nodeUtil && nodeUtil.isRegExp;
|
|
var isRegExp = nodeIsRegExp ? baseUnary(nodeIsRegExp) : baseIsRegExp;
|
|
|
|
var MAX_SAFE_INTEGER$3 = 9007199254740991;
|
|
function isSafeInteger(value) {
|
|
return isInteger(value) && value >= -MAX_SAFE_INTEGER$3 && value <= MAX_SAFE_INTEGER$3;
|
|
}
|
|
|
|
function isUndefined$1(value) {
|
|
return value === void 0;
|
|
}
|
|
|
|
var weakMapTag = "[object WeakMap]";
|
|
function isWeakMap(value) {
|
|
return isObjectLike(value) && getTag$1(value) == weakMapTag;
|
|
}
|
|
|
|
var weakSetTag = "[object WeakSet]";
|
|
function isWeakSet(value) {
|
|
return isObjectLike(value) && baseGetTag(value) == weakSetTag;
|
|
}
|
|
|
|
var CLONE_DEEP_FLAG$3 = 1;
|
|
function iteratee(func) {
|
|
return baseIteratee(typeof func == "function" ? func : baseClone(func, CLONE_DEEP_FLAG$3));
|
|
}
|
|
|
|
var arrayProto$4 = Array.prototype;
|
|
var nativeJoin = arrayProto$4.join;
|
|
function join(array, separator) {
|
|
return array == null ? "" : nativeJoin.call(array, separator);
|
|
}
|
|
|
|
var kebabCase = createCompounder(function(result, word, index) {
|
|
return result + (index ? "-" : "") + word.toLowerCase();
|
|
});
|
|
|
|
var keyBy = createAggregator(function(result, value, key) {
|
|
baseAssignValue(result, key, value);
|
|
});
|
|
|
|
function strictLastIndexOf(array, value, fromIndex) {
|
|
var index = fromIndex + 1;
|
|
while (index--) {
|
|
if (array[index] === value) {
|
|
return index;
|
|
}
|
|
}
|
|
return index;
|
|
}
|
|
|
|
var nativeMax$5 = Math.max;
|
|
var nativeMin$7 = Math.min;
|
|
function lastIndexOf(array, value, fromIndex) {
|
|
var length = array == null ? 0 : array.length;
|
|
if (!length) {
|
|
return -1;
|
|
}
|
|
var index = length;
|
|
if (fromIndex !== void 0) {
|
|
index = toInteger(fromIndex);
|
|
index = index < 0 ? nativeMax$5(length + index, 0) : nativeMin$7(index, length - 1);
|
|
}
|
|
return value === value ? strictLastIndexOf(array, value, index) : baseFindIndex(array, baseIsNaN, index, true);
|
|
}
|
|
|
|
var lowerCase = createCompounder(function(result, word, index) {
|
|
return result + (index ? " " : "") + word.toLowerCase();
|
|
});
|
|
|
|
var lowerFirst = createCaseFirst("toLowerCase");
|
|
|
|
function baseLt(value, other) {
|
|
return value < other;
|
|
}
|
|
|
|
var lt$1 = createRelationalOperation(baseLt);
|
|
|
|
var lte = createRelationalOperation(function(value, other) {
|
|
return value <= other;
|
|
});
|
|
|
|
function mapKeys(object, iteratee) {
|
|
var result = {};
|
|
iteratee = baseIteratee(iteratee);
|
|
baseForOwn(object, function(value, key, object2) {
|
|
baseAssignValue(result, iteratee(value, key, object2), value);
|
|
});
|
|
return result;
|
|
}
|
|
|
|
function mapValues(object, iteratee) {
|
|
var result = {};
|
|
iteratee = baseIteratee(iteratee);
|
|
baseForOwn(object, function(value, key, object2) {
|
|
baseAssignValue(result, key, iteratee(value, key, object2));
|
|
});
|
|
return result;
|
|
}
|
|
|
|
var CLONE_DEEP_FLAG$2 = 1;
|
|
function matches(source) {
|
|
return baseMatches(baseClone(source, CLONE_DEEP_FLAG$2));
|
|
}
|
|
|
|
var CLONE_DEEP_FLAG$1 = 1;
|
|
function matchesProperty(path, srcValue) {
|
|
return baseMatchesProperty(path, baseClone(srcValue, CLONE_DEEP_FLAG$1));
|
|
}
|
|
|
|
function baseExtremum(array, iteratee, comparator) {
|
|
var index = -1, length = array.length;
|
|
while (++index < length) {
|
|
var value = array[index], current = iteratee(value);
|
|
if (current != null && (computed === void 0 ? current === current && !isSymbol(current) : comparator(current, computed))) {
|
|
var computed = current, result = value;
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function max$3(array) {
|
|
return array && array.length ? baseExtremum(array, identity, baseGt) : void 0;
|
|
}
|
|
|
|
function maxBy(array, iteratee) {
|
|
return array && array.length ? baseExtremum(array, baseIteratee(iteratee), baseGt) : void 0;
|
|
}
|
|
|
|
function baseSum(array, iteratee) {
|
|
var result, index = -1, length = array.length;
|
|
while (++index < length) {
|
|
var current = iteratee(array[index]);
|
|
if (current !== void 0) {
|
|
result = result === void 0 ? current : result + current;
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
var NAN = 0 / 0;
|
|
function baseMean(array, iteratee) {
|
|
var length = array == null ? 0 : array.length;
|
|
return length ? baseSum(array, iteratee) / length : NAN;
|
|
}
|
|
|
|
function mean(array) {
|
|
return baseMean(array, identity);
|
|
}
|
|
|
|
function meanBy(array, iteratee) {
|
|
return baseMean(array, baseIteratee(iteratee));
|
|
}
|
|
|
|
var merge = createAssigner(function(object, source, srcIndex) {
|
|
baseMerge(object, source, srcIndex);
|
|
});
|
|
|
|
var method = baseRest(function(path, args) {
|
|
return function(object) {
|
|
return baseInvoke(object, path, args);
|
|
};
|
|
});
|
|
|
|
var methodOf = baseRest(function(object, args) {
|
|
return function(path) {
|
|
return baseInvoke(object, path, args);
|
|
};
|
|
});
|
|
|
|
function min$3(array) {
|
|
return array && array.length ? baseExtremum(array, identity, baseLt) : void 0;
|
|
}
|
|
|
|
function minBy(array, iteratee) {
|
|
return array && array.length ? baseExtremum(array, baseIteratee(iteratee), baseLt) : void 0;
|
|
}
|
|
|
|
function mixin$1(object, source, options) {
|
|
var props = keys(source), methodNames = baseFunctions(source, props);
|
|
var chain = !(isObject(options) && "chain" in options) || !!options.chain, isFunc = isFunction(object);
|
|
arrayEach(methodNames, function(methodName) {
|
|
var func = source[methodName];
|
|
object[methodName] = func;
|
|
if (isFunc) {
|
|
object.prototype[methodName] = function() {
|
|
var chainAll = this.__chain__;
|
|
if (chain || chainAll) {
|
|
var result = object(this.__wrapped__), actions = result.__actions__ = copyArray(this.__actions__);
|
|
actions.push({ "func": func, "args": arguments, "thisArg": object });
|
|
result.__chain__ = chainAll;
|
|
return result;
|
|
}
|
|
return func.apply(object, arrayPush([this.value()], arguments));
|
|
};
|
|
}
|
|
});
|
|
return object;
|
|
}
|
|
|
|
var multiply = createMathOperation(function(multiplier, multiplicand) {
|
|
return multiplier * multiplicand;
|
|
}, 1);
|
|
|
|
var FUNC_ERROR_TEXT$3 = "Expected a function";
|
|
function negate(predicate) {
|
|
if (typeof predicate != "function") {
|
|
throw new TypeError(FUNC_ERROR_TEXT$3);
|
|
}
|
|
return function() {
|
|
var args = arguments;
|
|
switch (args.length) {
|
|
case 0:
|
|
return !predicate.call(this);
|
|
case 1:
|
|
return !predicate.call(this, args[0]);
|
|
case 2:
|
|
return !predicate.call(this, args[0], args[1]);
|
|
case 3:
|
|
return !predicate.call(this, args[0], args[1], args[2]);
|
|
}
|
|
return !predicate.apply(this, args);
|
|
};
|
|
}
|
|
|
|
function iteratorToArray(iterator) {
|
|
var data, result = [];
|
|
while (!(data = iterator.next()).done) {
|
|
result.push(data.value);
|
|
}
|
|
return result;
|
|
}
|
|
|
|
var mapTag$1 = "[object Map]";
|
|
var setTag$1 = "[object Set]";
|
|
var symIterator$1 = Symbol$1 ? Symbol$1.iterator : void 0;
|
|
function toArray(value) {
|
|
if (!value) {
|
|
return [];
|
|
}
|
|
if (isArrayLike(value)) {
|
|
return isString(value) ? stringToArray(value) : copyArray(value);
|
|
}
|
|
if (symIterator$1 && value[symIterator$1]) {
|
|
return iteratorToArray(value[symIterator$1]());
|
|
}
|
|
var tag = getTag$1(value), func = tag == mapTag$1 ? mapToArray : tag == setTag$1 ? setToArray : values;
|
|
return func(value);
|
|
}
|
|
|
|
function wrapperNext() {
|
|
if (this.__values__ === void 0) {
|
|
this.__values__ = toArray(this.value());
|
|
}
|
|
var done = this.__index__ >= this.__values__.length, value = done ? void 0 : this.__values__[this.__index__++];
|
|
return { "done": done, "value": value };
|
|
}
|
|
|
|
function baseNth(array, n) {
|
|
var length = array.length;
|
|
if (!length) {
|
|
return;
|
|
}
|
|
n += n < 0 ? length : 0;
|
|
return isIndex(n, length) ? array[n] : void 0;
|
|
}
|
|
|
|
function nth(array, n) {
|
|
return array && array.length ? baseNth(array, toInteger(n)) : void 0;
|
|
}
|
|
|
|
function nthArg(n) {
|
|
n = toInteger(n);
|
|
return baseRest(function(args) {
|
|
return baseNth(args, n);
|
|
});
|
|
}
|
|
|
|
function baseUnset(object, path) {
|
|
path = castPath(path, object);
|
|
object = parent(object, path);
|
|
return object == null || delete object[toKey(last(path))];
|
|
}
|
|
|
|
function customOmitClone(value) {
|
|
return isPlainObject(value) ? void 0 : value;
|
|
}
|
|
|
|
var CLONE_DEEP_FLAG = 1;
|
|
var CLONE_FLAT_FLAG = 2;
|
|
var CLONE_SYMBOLS_FLAG = 4;
|
|
var omit = flatRest(function(object, paths) {
|
|
var result = {};
|
|
if (object == null) {
|
|
return result;
|
|
}
|
|
var isDeep = false;
|
|
paths = arrayMap(paths, function(path) {
|
|
path = castPath(path, object);
|
|
isDeep || (isDeep = path.length > 1);
|
|
return path;
|
|
});
|
|
copyObject(object, getAllKeysIn(object), result);
|
|
if (isDeep) {
|
|
result = baseClone(result, CLONE_DEEP_FLAG | CLONE_FLAT_FLAG | CLONE_SYMBOLS_FLAG, customOmitClone);
|
|
}
|
|
var length = paths.length;
|
|
while (length--) {
|
|
baseUnset(result, paths[length]);
|
|
}
|
|
return result;
|
|
});
|
|
|
|
function baseSet(object, path, value, customizer) {
|
|
if (!isObject(object)) {
|
|
return object;
|
|
}
|
|
path = castPath(path, object);
|
|
var index = -1, length = path.length, lastIndex = length - 1, nested = object;
|
|
while (nested != null && ++index < length) {
|
|
var key = toKey(path[index]), newValue = value;
|
|
if (key === "__proto__" || key === "constructor" || key === "prototype") {
|
|
return object;
|
|
}
|
|
if (index != lastIndex) {
|
|
var objValue = nested[key];
|
|
newValue = customizer ? customizer(objValue, key, nested) : void 0;
|
|
if (newValue === void 0) {
|
|
newValue = isObject(objValue) ? objValue : isIndex(path[index + 1]) ? [] : {};
|
|
}
|
|
}
|
|
assignValue(nested, key, newValue);
|
|
nested = nested[key];
|
|
}
|
|
return object;
|
|
}
|
|
|
|
function basePickBy(object, paths, predicate) {
|
|
var index = -1, length = paths.length, result = {};
|
|
while (++index < length) {
|
|
var path = paths[index], value = baseGet(object, path);
|
|
if (predicate(value, path)) {
|
|
baseSet(result, castPath(path, object), value);
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function pickBy(object, predicate) {
|
|
if (object == null) {
|
|
return {};
|
|
}
|
|
var props = arrayMap(getAllKeysIn(object), function(prop) {
|
|
return [prop];
|
|
});
|
|
predicate = baseIteratee(predicate);
|
|
return basePickBy(object, props, function(value, path) {
|
|
return predicate(value, path[0]);
|
|
});
|
|
}
|
|
|
|
function omitBy(object, predicate) {
|
|
return pickBy(object, negate(baseIteratee(predicate)));
|
|
}
|
|
|
|
function once(func) {
|
|
return before(2, func);
|
|
}
|
|
|
|
function baseSortBy(array, comparer) {
|
|
var length = array.length;
|
|
array.sort(comparer);
|
|
while (length--) {
|
|
array[length] = array[length].value;
|
|
}
|
|
return array;
|
|
}
|
|
|
|
function compareAscending(value, other) {
|
|
if (value !== other) {
|
|
var valIsDefined = value !== void 0, valIsNull = value === null, valIsReflexive = value === value, valIsSymbol = isSymbol(value);
|
|
var othIsDefined = other !== void 0, othIsNull = other === null, othIsReflexive = other === other, othIsSymbol = isSymbol(other);
|
|
if (!othIsNull && !othIsSymbol && !valIsSymbol && value > other || valIsSymbol && othIsDefined && othIsReflexive && !othIsNull && !othIsSymbol || valIsNull && othIsDefined && othIsReflexive || !valIsDefined && othIsReflexive || !valIsReflexive) {
|
|
return 1;
|
|
}
|
|
if (!valIsNull && !valIsSymbol && !othIsSymbol && value < other || othIsSymbol && valIsDefined && valIsReflexive && !valIsNull && !valIsSymbol || othIsNull && valIsDefined && valIsReflexive || !othIsDefined && valIsReflexive || !othIsReflexive) {
|
|
return -1;
|
|
}
|
|
}
|
|
return 0;
|
|
}
|
|
|
|
function compareMultiple(object, other, orders) {
|
|
var index = -1, objCriteria = object.criteria, othCriteria = other.criteria, length = objCriteria.length, ordersLength = orders.length;
|
|
while (++index < length) {
|
|
var result = compareAscending(objCriteria[index], othCriteria[index]);
|
|
if (result) {
|
|
if (index >= ordersLength) {
|
|
return result;
|
|
}
|
|
var order = orders[index];
|
|
return result * (order == "desc" ? -1 : 1);
|
|
}
|
|
}
|
|
return object.index - other.index;
|
|
}
|
|
|
|
function baseOrderBy(collection, iteratees, orders) {
|
|
if (iteratees.length) {
|
|
iteratees = arrayMap(iteratees, function(iteratee) {
|
|
if (isArray(iteratee)) {
|
|
return function(value) {
|
|
return baseGet(value, iteratee.length === 1 ? iteratee[0] : iteratee);
|
|
};
|
|
}
|
|
return iteratee;
|
|
});
|
|
} else {
|
|
iteratees = [identity];
|
|
}
|
|
var index = -1;
|
|
iteratees = arrayMap(iteratees, baseUnary(baseIteratee));
|
|
var result = baseMap(collection, function(value, key, collection2) {
|
|
var criteria = arrayMap(iteratees, function(iteratee) {
|
|
return iteratee(value);
|
|
});
|
|
return { "criteria": criteria, "index": ++index, "value": value };
|
|
});
|
|
return baseSortBy(result, function(object, other) {
|
|
return compareMultiple(object, other, orders);
|
|
});
|
|
}
|
|
|
|
function orderBy$1(collection, iteratees, orders, guard) {
|
|
if (collection == null) {
|
|
return [];
|
|
}
|
|
if (!isArray(iteratees)) {
|
|
iteratees = iteratees == null ? [] : [iteratees];
|
|
}
|
|
orders = guard ? void 0 : orders;
|
|
if (!isArray(orders)) {
|
|
orders = orders == null ? [] : [orders];
|
|
}
|
|
return baseOrderBy(collection, iteratees, orders);
|
|
}
|
|
|
|
function createOver(arrayFunc) {
|
|
return flatRest(function(iteratees) {
|
|
iteratees = arrayMap(iteratees, baseUnary(baseIteratee));
|
|
return baseRest(function(args) {
|
|
var thisArg = this;
|
|
return arrayFunc(iteratees, function(iteratee) {
|
|
return apply(iteratee, thisArg, args);
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
var over = createOver(arrayMap);
|
|
|
|
var castRest = baseRest;
|
|
|
|
var nativeMin$6 = Math.min;
|
|
var overArgs = castRest(function(func, transforms) {
|
|
transforms = transforms.length == 1 && isArray(transforms[0]) ? arrayMap(transforms[0], baseUnary(baseIteratee)) : arrayMap(baseFlatten(transforms, 1), baseUnary(baseIteratee));
|
|
var funcsLength = transforms.length;
|
|
return baseRest(function(args) {
|
|
var index = -1, length = nativeMin$6(args.length, funcsLength);
|
|
while (++index < length) {
|
|
args[index] = transforms[index].call(this, args[index]);
|
|
}
|
|
return apply(func, this, args);
|
|
});
|
|
});
|
|
|
|
var overEvery = createOver(arrayEvery);
|
|
|
|
var overSome = createOver(arraySome);
|
|
|
|
var MAX_SAFE_INTEGER$2 = 9007199254740991;
|
|
var nativeFloor$3 = Math.floor;
|
|
function baseRepeat(string, n) {
|
|
var result = "";
|
|
if (!string || n < 1 || n > MAX_SAFE_INTEGER$2) {
|
|
return result;
|
|
}
|
|
do {
|
|
if (n % 2) {
|
|
result += string;
|
|
}
|
|
n = nativeFloor$3(n / 2);
|
|
if (n) {
|
|
string += string;
|
|
}
|
|
} while (n);
|
|
return result;
|
|
}
|
|
|
|
var asciiSize = baseProperty("length");
|
|
|
|
var rsAstralRange = "\\ud800-\\udfff";
|
|
var rsComboMarksRange = "\\u0300-\\u036f";
|
|
var reComboHalfMarksRange = "\\ufe20-\\ufe2f";
|
|
var rsComboSymbolsRange = "\\u20d0-\\u20ff";
|
|
var rsComboRange = rsComboMarksRange + reComboHalfMarksRange + rsComboSymbolsRange;
|
|
var rsVarRange = "\\ufe0e\\ufe0f";
|
|
var rsAstral = "[" + rsAstralRange + "]";
|
|
var rsCombo = "[" + rsComboRange + "]";
|
|
var rsFitz = "\\ud83c[\\udffb-\\udfff]";
|
|
var rsModifier = "(?:" + rsCombo + "|" + rsFitz + ")";
|
|
var rsNonAstral = "[^" + rsAstralRange + "]";
|
|
var rsRegional = "(?:\\ud83c[\\udde6-\\uddff]){2}";
|
|
var rsSurrPair = "[\\ud800-\\udbff][\\udc00-\\udfff]";
|
|
var rsZWJ = "\\u200d";
|
|
var reOptMod = rsModifier + "?";
|
|
var rsOptVar = "[" + rsVarRange + "]?";
|
|
var rsOptJoin = "(?:" + rsZWJ + "(?:" + [rsNonAstral, rsRegional, rsSurrPair].join("|") + ")" + rsOptVar + reOptMod + ")*";
|
|
var rsSeq = rsOptVar + reOptMod + rsOptJoin;
|
|
var rsSymbol = "(?:" + [rsNonAstral + rsCombo + "?", rsCombo, rsRegional, rsSurrPair, rsAstral].join("|") + ")";
|
|
var reUnicode = RegExp(rsFitz + "(?=" + rsFitz + ")|" + rsSymbol + rsSeq, "g");
|
|
function unicodeSize(string) {
|
|
var result = reUnicode.lastIndex = 0;
|
|
while (reUnicode.test(string)) {
|
|
++result;
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function stringSize(string) {
|
|
return hasUnicode(string) ? unicodeSize(string) : asciiSize(string);
|
|
}
|
|
|
|
var nativeCeil$2 = Math.ceil;
|
|
function createPadding(length, chars) {
|
|
chars = chars === void 0 ? " " : baseToString(chars);
|
|
var charsLength = chars.length;
|
|
if (charsLength < 2) {
|
|
return charsLength ? baseRepeat(chars, length) : chars;
|
|
}
|
|
var result = baseRepeat(chars, nativeCeil$2(length / stringSize(chars)));
|
|
return hasUnicode(chars) ? castSlice(stringToArray(result), 0, length).join("") : result.slice(0, length);
|
|
}
|
|
|
|
var nativeCeil$1 = Math.ceil;
|
|
var nativeFloor$2 = Math.floor;
|
|
function pad(string, length, chars) {
|
|
string = toString(string);
|
|
length = toInteger(length);
|
|
var strLength = length ? stringSize(string) : 0;
|
|
if (!length || strLength >= length) {
|
|
return string;
|
|
}
|
|
var mid = (length - strLength) / 2;
|
|
return createPadding(nativeFloor$2(mid), chars) + string + createPadding(nativeCeil$1(mid), chars);
|
|
}
|
|
|
|
function padEnd(string, length, chars) {
|
|
string = toString(string);
|
|
length = toInteger(length);
|
|
var strLength = length ? stringSize(string) : 0;
|
|
return length && strLength < length ? string + createPadding(length - strLength, chars) : string;
|
|
}
|
|
|
|
function padStart(string, length, chars) {
|
|
string = toString(string);
|
|
length = toInteger(length);
|
|
var strLength = length ? stringSize(string) : 0;
|
|
return length && strLength < length ? createPadding(length - strLength, chars) + string : string;
|
|
}
|
|
|
|
var reTrimStart$1 = /^\s+/;
|
|
var nativeParseInt = root.parseInt;
|
|
function parseInt$1(string, radix, guard) {
|
|
if (guard || radix == null) {
|
|
radix = 0;
|
|
} else if (radix) {
|
|
radix = +radix;
|
|
}
|
|
return nativeParseInt(toString(string).replace(reTrimStart$1, ""), radix || 0);
|
|
}
|
|
|
|
var WRAP_PARTIAL_FLAG = 32;
|
|
var partial = baseRest(function(func, partials) {
|
|
var holders = replaceHolders(partials, getHolder(partial));
|
|
return createWrap(func, WRAP_PARTIAL_FLAG, void 0, partials, holders);
|
|
});
|
|
partial.placeholder = {};
|
|
|
|
var WRAP_PARTIAL_RIGHT_FLAG = 64;
|
|
var partialRight = baseRest(function(func, partials) {
|
|
var holders = replaceHolders(partials, getHolder(partialRight));
|
|
return createWrap(func, WRAP_PARTIAL_RIGHT_FLAG, void 0, partials, holders);
|
|
});
|
|
partialRight.placeholder = {};
|
|
|
|
var partition = createAggregator(function(result, value, key) {
|
|
result[key ? 0 : 1].push(value);
|
|
}, function() {
|
|
return [[], []];
|
|
});
|
|
|
|
function basePick(object, paths) {
|
|
return basePickBy(object, paths, function(value, path) {
|
|
return hasIn(object, path);
|
|
});
|
|
}
|
|
|
|
var pick = flatRest(function(object, paths) {
|
|
return object == null ? {} : basePick(object, paths);
|
|
});
|
|
|
|
function wrapperPlant(value) {
|
|
var result, parent = this;
|
|
while (parent instanceof baseLodash) {
|
|
var clone = wrapperClone(parent);
|
|
clone.__index__ = 0;
|
|
clone.__values__ = void 0;
|
|
if (result) {
|
|
previous.__wrapped__ = clone;
|
|
} else {
|
|
result = clone;
|
|
}
|
|
var previous = clone;
|
|
parent = parent.__wrapped__;
|
|
}
|
|
previous.__wrapped__ = value;
|
|
return result;
|
|
}
|
|
|
|
function propertyOf(object) {
|
|
return function(path) {
|
|
return object == null ? void 0 : baseGet(object, path);
|
|
};
|
|
}
|
|
|
|
function baseIndexOfWith(array, value, fromIndex, comparator) {
|
|
var index = fromIndex - 1, length = array.length;
|
|
while (++index < length) {
|
|
if (comparator(array[index], value)) {
|
|
return index;
|
|
}
|
|
}
|
|
return -1;
|
|
}
|
|
|
|
var arrayProto$3 = Array.prototype;
|
|
var splice$1 = arrayProto$3.splice;
|
|
function basePullAll(array, values, iteratee, comparator) {
|
|
var indexOf = comparator ? baseIndexOfWith : baseIndexOf, index = -1, length = values.length, seen = array;
|
|
if (array === values) {
|
|
values = copyArray(values);
|
|
}
|
|
if (iteratee) {
|
|
seen = arrayMap(array, baseUnary(iteratee));
|
|
}
|
|
while (++index < length) {
|
|
var fromIndex = 0, value = values[index], computed = iteratee ? iteratee(value) : value;
|
|
while ((fromIndex = indexOf(seen, computed, fromIndex, comparator)) > -1) {
|
|
if (seen !== array) {
|
|
splice$1.call(seen, fromIndex, 1);
|
|
}
|
|
splice$1.call(array, fromIndex, 1);
|
|
}
|
|
}
|
|
return array;
|
|
}
|
|
|
|
function pullAll(array, values) {
|
|
return array && array.length && values && values.length ? basePullAll(array, values) : array;
|
|
}
|
|
|
|
var pull = baseRest(pullAll);
|
|
|
|
function pullAllBy(array, values, iteratee) {
|
|
return array && array.length && values && values.length ? basePullAll(array, values, baseIteratee(iteratee)) : array;
|
|
}
|
|
|
|
function pullAllWith(array, values, comparator) {
|
|
return array && array.length && values && values.length ? basePullAll(array, values, void 0, comparator) : array;
|
|
}
|
|
|
|
var arrayProto$2 = Array.prototype;
|
|
var splice = arrayProto$2.splice;
|
|
function basePullAt(array, indexes) {
|
|
var length = array ? indexes.length : 0, lastIndex = length - 1;
|
|
while (length--) {
|
|
var index = indexes[length];
|
|
if (length == lastIndex || index !== previous) {
|
|
var previous = index;
|
|
if (isIndex(index)) {
|
|
splice.call(array, index, 1);
|
|
} else {
|
|
baseUnset(array, index);
|
|
}
|
|
}
|
|
}
|
|
return array;
|
|
}
|
|
|
|
var pullAt = flatRest(function(array, indexes) {
|
|
var length = array == null ? 0 : array.length, result = baseAt(array, indexes);
|
|
basePullAt(array, arrayMap(indexes, function(index) {
|
|
return isIndex(index, length) ? +index : index;
|
|
}).sort(compareAscending));
|
|
return result;
|
|
});
|
|
|
|
var nativeFloor$1 = Math.floor;
|
|
var nativeRandom$1 = Math.random;
|
|
function baseRandom(lower, upper) {
|
|
return lower + nativeFloor$1(nativeRandom$1() * (upper - lower + 1));
|
|
}
|
|
|
|
var freeParseFloat = parseFloat;
|
|
var nativeMin$5 = Math.min;
|
|
var nativeRandom = Math.random;
|
|
function random(lower, upper, floating) {
|
|
if (floating && typeof floating != "boolean" && isIterateeCall(lower, upper, floating)) {
|
|
upper = floating = void 0;
|
|
}
|
|
if (floating === void 0) {
|
|
if (typeof upper == "boolean") {
|
|
floating = upper;
|
|
upper = void 0;
|
|
} else if (typeof lower == "boolean") {
|
|
floating = lower;
|
|
lower = void 0;
|
|
}
|
|
}
|
|
if (lower === void 0 && upper === void 0) {
|
|
lower = 0;
|
|
upper = 1;
|
|
} else {
|
|
lower = toFinite(lower);
|
|
if (upper === void 0) {
|
|
upper = lower;
|
|
lower = 0;
|
|
} else {
|
|
upper = toFinite(upper);
|
|
}
|
|
}
|
|
if (lower > upper) {
|
|
var temp = lower;
|
|
lower = upper;
|
|
upper = temp;
|
|
}
|
|
if (floating || lower % 1 || upper % 1) {
|
|
var rand = nativeRandom();
|
|
return nativeMin$5(lower + rand * (upper - lower + freeParseFloat("1e-" + ((rand + "").length - 1))), upper);
|
|
}
|
|
return baseRandom(lower, upper);
|
|
}
|
|
|
|
var nativeCeil = Math.ceil;
|
|
var nativeMax$4 = Math.max;
|
|
function baseRange(start, end, step, fromRight) {
|
|
var index = -1, length = nativeMax$4(nativeCeil((end - start) / (step || 1)), 0), result = Array(length);
|
|
while (length--) {
|
|
result[fromRight ? length : ++index] = start;
|
|
start += step;
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function createRange(fromRight) {
|
|
return function(start, end, step) {
|
|
if (step && typeof step != "number" && isIterateeCall(start, end, step)) {
|
|
end = step = void 0;
|
|
}
|
|
start = toFinite(start);
|
|
if (end === void 0) {
|
|
end = start;
|
|
start = 0;
|
|
} else {
|
|
end = toFinite(end);
|
|
}
|
|
step = step === void 0 ? start < end ? 1 : -1 : toFinite(step);
|
|
return baseRange(start, end, step, fromRight);
|
|
};
|
|
}
|
|
|
|
var range$1 = createRange();
|
|
|
|
var rangeRight = createRange(true);
|
|
|
|
var WRAP_REARG_FLAG = 256;
|
|
var rearg = flatRest(function(func, indexes) {
|
|
return createWrap(func, WRAP_REARG_FLAG, void 0, void 0, void 0, indexes);
|
|
});
|
|
|
|
function baseReduce(collection, iteratee, accumulator, initAccum, eachFunc) {
|
|
eachFunc(collection, function(value, index, collection2) {
|
|
accumulator = initAccum ? (initAccum = false, value) : iteratee(accumulator, value, index, collection2);
|
|
});
|
|
return accumulator;
|
|
}
|
|
|
|
function reduce(collection, iteratee, accumulator) {
|
|
var func = isArray(collection) ? arrayReduce : baseReduce, initAccum = arguments.length < 3;
|
|
return func(collection, baseIteratee(iteratee), accumulator, initAccum, baseEach);
|
|
}
|
|
|
|
function arrayReduceRight(array, iteratee, accumulator, initAccum) {
|
|
var length = array == null ? 0 : array.length;
|
|
if (initAccum && length) {
|
|
accumulator = array[--length];
|
|
}
|
|
while (length--) {
|
|
accumulator = iteratee(accumulator, array[length], length, array);
|
|
}
|
|
return accumulator;
|
|
}
|
|
|
|
function reduceRight(collection, iteratee, accumulator) {
|
|
var func = isArray(collection) ? arrayReduceRight : baseReduce, initAccum = arguments.length < 3;
|
|
return func(collection, baseIteratee(iteratee), accumulator, initAccum, baseEachRight);
|
|
}
|
|
|
|
function reject(collection, predicate) {
|
|
var func = isArray(collection) ? arrayFilter : baseFilter;
|
|
return func(collection, negate(baseIteratee(predicate)));
|
|
}
|
|
|
|
function remove(array, predicate) {
|
|
var result = [];
|
|
if (!(array && array.length)) {
|
|
return result;
|
|
}
|
|
var index = -1, indexes = [], length = array.length;
|
|
predicate = baseIteratee(predicate);
|
|
while (++index < length) {
|
|
var value = array[index];
|
|
if (predicate(value, index, array)) {
|
|
result.push(value);
|
|
indexes.push(index);
|
|
}
|
|
}
|
|
basePullAt(array, indexes);
|
|
return result;
|
|
}
|
|
|
|
function repeat(string, n, guard) {
|
|
if (guard ? isIterateeCall(string, n, guard) : n === void 0) {
|
|
n = 1;
|
|
} else {
|
|
n = toInteger(n);
|
|
}
|
|
return baseRepeat(toString(string), n);
|
|
}
|
|
|
|
function replace() {
|
|
var args = arguments, string = toString(args[0]);
|
|
return args.length < 3 ? string : string.replace(args[1], args[2]);
|
|
}
|
|
|
|
var FUNC_ERROR_TEXT$2 = "Expected a function";
|
|
function rest(func, start) {
|
|
if (typeof func != "function") {
|
|
throw new TypeError(FUNC_ERROR_TEXT$2);
|
|
}
|
|
start = start === void 0 ? start : toInteger(start);
|
|
return baseRest(func, start);
|
|
}
|
|
|
|
function result(object, path, defaultValue) {
|
|
path = castPath(path, object);
|
|
var index = -1, length = path.length;
|
|
if (!length) {
|
|
length = 1;
|
|
object = void 0;
|
|
}
|
|
while (++index < length) {
|
|
var value = object == null ? void 0 : object[toKey(path[index])];
|
|
if (value === void 0) {
|
|
index = length;
|
|
value = defaultValue;
|
|
}
|
|
object = isFunction(value) ? value.call(object) : value;
|
|
}
|
|
return object;
|
|
}
|
|
|
|
var arrayProto$1 = Array.prototype;
|
|
var nativeReverse = arrayProto$1.reverse;
|
|
function reverse(array) {
|
|
return array == null ? array : nativeReverse.call(array);
|
|
}
|
|
|
|
var round$1 = createRound("round");
|
|
|
|
function arraySample(array) {
|
|
var length = array.length;
|
|
return length ? array[baseRandom(0, length - 1)] : void 0;
|
|
}
|
|
|
|
function baseSample(collection) {
|
|
return arraySample(values(collection));
|
|
}
|
|
|
|
function sample(collection) {
|
|
var func = isArray(collection) ? arraySample : baseSample;
|
|
return func(collection);
|
|
}
|
|
|
|
function shuffleSelf(array, size) {
|
|
var index = -1, length = array.length, lastIndex = length - 1;
|
|
size = size === void 0 ? length : size;
|
|
while (++index < size) {
|
|
var rand = baseRandom(index, lastIndex), value = array[rand];
|
|
array[rand] = array[index];
|
|
array[index] = value;
|
|
}
|
|
array.length = size;
|
|
return array;
|
|
}
|
|
|
|
function arraySampleSize(array, n) {
|
|
return shuffleSelf(copyArray(array), baseClamp(n, 0, array.length));
|
|
}
|
|
|
|
function baseSampleSize(collection, n) {
|
|
var array = values(collection);
|
|
return shuffleSelf(array, baseClamp(n, 0, array.length));
|
|
}
|
|
|
|
function sampleSize(collection, n, guard) {
|
|
if (guard ? isIterateeCall(collection, n, guard) : n === void 0) {
|
|
n = 1;
|
|
} else {
|
|
n = toInteger(n);
|
|
}
|
|
var func = isArray(collection) ? arraySampleSize : baseSampleSize;
|
|
return func(collection, n);
|
|
}
|
|
|
|
function set(object, path, value) {
|
|
return object == null ? object : baseSet(object, path, value);
|
|
}
|
|
|
|
function setWith(object, path, value, customizer) {
|
|
customizer = typeof customizer == "function" ? customizer : void 0;
|
|
return object == null ? object : baseSet(object, path, value, customizer);
|
|
}
|
|
|
|
function arrayShuffle(array) {
|
|
return shuffleSelf(copyArray(array));
|
|
}
|
|
|
|
function baseShuffle(collection) {
|
|
return shuffleSelf(values(collection));
|
|
}
|
|
|
|
function shuffle(collection) {
|
|
var func = isArray(collection) ? arrayShuffle : baseShuffle;
|
|
return func(collection);
|
|
}
|
|
|
|
var mapTag = "[object Map]";
|
|
var setTag = "[object Set]";
|
|
function size(collection) {
|
|
if (collection == null) {
|
|
return 0;
|
|
}
|
|
if (isArrayLike(collection)) {
|
|
return isString(collection) ? stringSize(collection) : collection.length;
|
|
}
|
|
var tag = getTag$1(collection);
|
|
if (tag == mapTag || tag == setTag) {
|
|
return collection.size;
|
|
}
|
|
return baseKeys(collection).length;
|
|
}
|
|
|
|
function slice(array, start, end) {
|
|
var length = array == null ? 0 : array.length;
|
|
if (!length) {
|
|
return [];
|
|
}
|
|
if (end && typeof end != "number" && isIterateeCall(array, start, end)) {
|
|
start = 0;
|
|
end = length;
|
|
} else {
|
|
start = start == null ? 0 : toInteger(start);
|
|
end = end === void 0 ? length : toInteger(end);
|
|
}
|
|
return baseSlice(array, start, end);
|
|
}
|
|
|
|
var snakeCase = createCompounder(function(result, word, index) {
|
|
return result + (index ? "_" : "") + word.toLowerCase();
|
|
});
|
|
|
|
function baseSome(collection, predicate) {
|
|
var result;
|
|
baseEach(collection, function(value, index, collection2) {
|
|
result = predicate(value, index, collection2);
|
|
return !result;
|
|
});
|
|
return !!result;
|
|
}
|
|
|
|
function some(collection, predicate, guard) {
|
|
var func = isArray(collection) ? arraySome : baseSome;
|
|
if (guard && isIterateeCall(collection, predicate, guard)) {
|
|
predicate = void 0;
|
|
}
|
|
return func(collection, baseIteratee(predicate));
|
|
}
|
|
|
|
var sortBy = baseRest(function(collection, iteratees) {
|
|
if (collection == null) {
|
|
return [];
|
|
}
|
|
var length = iteratees.length;
|
|
if (length > 1 && isIterateeCall(collection, iteratees[0], iteratees[1])) {
|
|
iteratees = [];
|
|
} else if (length > 2 && isIterateeCall(iteratees[0], iteratees[1], iteratees[2])) {
|
|
iteratees = [iteratees[0]];
|
|
}
|
|
return baseOrderBy(collection, baseFlatten(iteratees, 1), []);
|
|
});
|
|
|
|
var MAX_ARRAY_LENGTH$4 = 4294967295;
|
|
var MAX_ARRAY_INDEX = MAX_ARRAY_LENGTH$4 - 1;
|
|
var nativeFloor = Math.floor;
|
|
var nativeMin$4 = Math.min;
|
|
function baseSortedIndexBy(array, value, iteratee, retHighest) {
|
|
var low = 0, high = array == null ? 0 : array.length;
|
|
if (high === 0) {
|
|
return 0;
|
|
}
|
|
value = iteratee(value);
|
|
var valIsNaN = value !== value, valIsNull = value === null, valIsSymbol = isSymbol(value), valIsUndefined = value === void 0;
|
|
while (low < high) {
|
|
var mid = nativeFloor((low + high) / 2), computed = iteratee(array[mid]), othIsDefined = computed !== void 0, othIsNull = computed === null, othIsReflexive = computed === computed, othIsSymbol = isSymbol(computed);
|
|
if (valIsNaN) {
|
|
var setLow = retHighest || othIsReflexive;
|
|
} else if (valIsUndefined) {
|
|
setLow = othIsReflexive && (retHighest || othIsDefined);
|
|
} else if (valIsNull) {
|
|
setLow = othIsReflexive && othIsDefined && (retHighest || !othIsNull);
|
|
} else if (valIsSymbol) {
|
|
setLow = othIsReflexive && othIsDefined && !othIsNull && (retHighest || !othIsSymbol);
|
|
} else if (othIsNull || othIsSymbol) {
|
|
setLow = false;
|
|
} else {
|
|
setLow = retHighest ? computed <= value : computed < value;
|
|
}
|
|
if (setLow) {
|
|
low = mid + 1;
|
|
} else {
|
|
high = mid;
|
|
}
|
|
}
|
|
return nativeMin$4(high, MAX_ARRAY_INDEX);
|
|
}
|
|
|
|
var MAX_ARRAY_LENGTH$3 = 4294967295;
|
|
var HALF_MAX_ARRAY_LENGTH = MAX_ARRAY_LENGTH$3 >>> 1;
|
|
function baseSortedIndex(array, value, retHighest) {
|
|
var low = 0, high = array == null ? low : array.length;
|
|
if (typeof value == "number" && value === value && high <= HALF_MAX_ARRAY_LENGTH) {
|
|
while (low < high) {
|
|
var mid = low + high >>> 1, computed = array[mid];
|
|
if (computed !== null && !isSymbol(computed) && (retHighest ? computed <= value : computed < value)) {
|
|
low = mid + 1;
|
|
} else {
|
|
high = mid;
|
|
}
|
|
}
|
|
return high;
|
|
}
|
|
return baseSortedIndexBy(array, value, identity, retHighest);
|
|
}
|
|
|
|
function sortedIndex(array, value) {
|
|
return baseSortedIndex(array, value);
|
|
}
|
|
|
|
function sortedIndexBy(array, value, iteratee) {
|
|
return baseSortedIndexBy(array, value, baseIteratee(iteratee));
|
|
}
|
|
|
|
function sortedIndexOf(array, value) {
|
|
var length = array == null ? 0 : array.length;
|
|
if (length) {
|
|
var index = baseSortedIndex(array, value);
|
|
if (index < length && eq(array[index], value)) {
|
|
return index;
|
|
}
|
|
}
|
|
return -1;
|
|
}
|
|
|
|
function sortedLastIndex(array, value) {
|
|
return baseSortedIndex(array, value, true);
|
|
}
|
|
|
|
function sortedLastIndexBy(array, value, iteratee) {
|
|
return baseSortedIndexBy(array, value, baseIteratee(iteratee), true);
|
|
}
|
|
|
|
function sortedLastIndexOf(array, value) {
|
|
var length = array == null ? 0 : array.length;
|
|
if (length) {
|
|
var index = baseSortedIndex(array, value, true) - 1;
|
|
if (eq(array[index], value)) {
|
|
return index;
|
|
}
|
|
}
|
|
return -1;
|
|
}
|
|
|
|
function baseSortedUniq(array, iteratee) {
|
|
var index = -1, length = array.length, resIndex = 0, result = [];
|
|
while (++index < length) {
|
|
var value = array[index], computed = iteratee ? iteratee(value) : value;
|
|
if (!index || !eq(computed, seen)) {
|
|
var seen = computed;
|
|
result[resIndex++] = value === 0 ? 0 : value;
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function sortedUniq(array) {
|
|
return array && array.length ? baseSortedUniq(array) : [];
|
|
}
|
|
|
|
function sortedUniqBy(array, iteratee) {
|
|
return array && array.length ? baseSortedUniq(array, baseIteratee(iteratee)) : [];
|
|
}
|
|
|
|
var MAX_ARRAY_LENGTH$2 = 4294967295;
|
|
function split(string, separator, limit) {
|
|
if (limit && typeof limit != "number" && isIterateeCall(string, separator, limit)) {
|
|
separator = limit = void 0;
|
|
}
|
|
limit = limit === void 0 ? MAX_ARRAY_LENGTH$2 : limit >>> 0;
|
|
if (!limit) {
|
|
return [];
|
|
}
|
|
string = toString(string);
|
|
if (string && (typeof separator == "string" || separator != null && !isRegExp(separator))) {
|
|
separator = baseToString(separator);
|
|
if (!separator && hasUnicode(string)) {
|
|
return castSlice(stringToArray(string), 0, limit);
|
|
}
|
|
}
|
|
return string.split(separator, limit);
|
|
}
|
|
|
|
var FUNC_ERROR_TEXT$1 = "Expected a function";
|
|
var nativeMax$3 = Math.max;
|
|
function spread(func, start) {
|
|
if (typeof func != "function") {
|
|
throw new TypeError(FUNC_ERROR_TEXT$1);
|
|
}
|
|
start = start == null ? 0 : nativeMax$3(toInteger(start), 0);
|
|
return baseRest(function(args) {
|
|
var array = args[start], otherArgs = castSlice(args, 0, start);
|
|
if (array) {
|
|
arrayPush(otherArgs, array);
|
|
}
|
|
return apply(func, this, otherArgs);
|
|
});
|
|
}
|
|
|
|
var startCase = createCompounder(function(result, word, index) {
|
|
return result + (index ? " " : "") + upperFirst(word);
|
|
});
|
|
|
|
function startsWith(string, target, position) {
|
|
string = toString(string);
|
|
position = position == null ? 0 : baseClamp(toInteger(position), 0, string.length);
|
|
target = baseToString(target);
|
|
return string.slice(position, position + target.length) == target;
|
|
}
|
|
|
|
function stubObject() {
|
|
return {};
|
|
}
|
|
|
|
function stubString() {
|
|
return "";
|
|
}
|
|
|
|
function stubTrue() {
|
|
return true;
|
|
}
|
|
|
|
var subtract = createMathOperation(function(minuend, subtrahend) {
|
|
return minuend - subtrahend;
|
|
}, 0);
|
|
|
|
function sum$1(array) {
|
|
return array && array.length ? baseSum(array, identity) : 0;
|
|
}
|
|
|
|
function sumBy(array, iteratee) {
|
|
return array && array.length ? baseSum(array, baseIteratee(iteratee)) : 0;
|
|
}
|
|
|
|
function tail(array) {
|
|
var length = array == null ? 0 : array.length;
|
|
return length ? baseSlice(array, 1, length) : [];
|
|
}
|
|
|
|
function take(array, n, guard) {
|
|
if (!(array && array.length)) {
|
|
return [];
|
|
}
|
|
n = guard || n === void 0 ? 1 : toInteger(n);
|
|
return baseSlice(array, 0, n < 0 ? 0 : n);
|
|
}
|
|
|
|
function takeRight(array, n, guard) {
|
|
var length = array == null ? 0 : array.length;
|
|
if (!length) {
|
|
return [];
|
|
}
|
|
n = guard || n === void 0 ? 1 : toInteger(n);
|
|
n = length - n;
|
|
return baseSlice(array, n < 0 ? 0 : n, length);
|
|
}
|
|
|
|
function takeRightWhile(array, predicate) {
|
|
return array && array.length ? baseWhile(array, baseIteratee(predicate), false, true) : [];
|
|
}
|
|
|
|
function takeWhile(array, predicate) {
|
|
return array && array.length ? baseWhile(array, baseIteratee(predicate)) : [];
|
|
}
|
|
|
|
function tap(value, interceptor) {
|
|
interceptor(value);
|
|
return value;
|
|
}
|
|
|
|
var objectProto$2 = Object.prototype;
|
|
var hasOwnProperty$2 = objectProto$2.hasOwnProperty;
|
|
function customDefaultsAssignIn(objValue, srcValue, key, object) {
|
|
if (objValue === void 0 || eq(objValue, objectProto$2[key]) && !hasOwnProperty$2.call(object, key)) {
|
|
return srcValue;
|
|
}
|
|
return objValue;
|
|
}
|
|
|
|
var stringEscapes = {
|
|
"\\": "\\",
|
|
"'": "'",
|
|
"\n": "n",
|
|
"\r": "r",
|
|
"\u2028": "u2028",
|
|
"\u2029": "u2029"
|
|
};
|
|
function escapeStringChar(chr) {
|
|
return "\\" + stringEscapes[chr];
|
|
}
|
|
|
|
var reInterpolate = /<%=([\s\S]+?)%>/g;
|
|
|
|
var reEscape = /<%-([\s\S]+?)%>/g;
|
|
|
|
var reEvaluate = /<%([\s\S]+?)%>/g;
|
|
|
|
var templateSettings = {
|
|
"escape": reEscape,
|
|
"evaluate": reEvaluate,
|
|
"interpolate": reInterpolate,
|
|
"variable": "",
|
|
"imports": {
|
|
"_": { "escape": escape }
|
|
}
|
|
};
|
|
|
|
var INVALID_TEMPL_VAR_ERROR_TEXT = "Invalid `variable` option passed into `_.template`";
|
|
var reEmptyStringLeading = /\b__p \+= '';/g;
|
|
var reEmptyStringMiddle = /\b(__p \+=) '' \+/g;
|
|
var reEmptyStringTrailing = /(__e\(.*?\)|\b__t\)) \+\n'';/g;
|
|
var reForbiddenIdentifierChars = /[()=,{}\[\]\/\s]/;
|
|
var reEsTemplate = /\$\{([^\\}]*(?:\\.[^\\}]*)*)\}/g;
|
|
var reNoMatch = /($^)/;
|
|
var reUnescapedString = /['\n\r\u2028\u2029\\]/g;
|
|
var objectProto$1 = Object.prototype;
|
|
var hasOwnProperty$1 = objectProto$1.hasOwnProperty;
|
|
function template(string, options, guard) {
|
|
var settings = templateSettings.imports._.templateSettings || templateSettings;
|
|
if (guard && isIterateeCall(string, options, guard)) {
|
|
options = void 0;
|
|
}
|
|
string = toString(string);
|
|
options = assignInWith({}, options, settings, customDefaultsAssignIn);
|
|
var imports = assignInWith({}, options.imports, settings.imports, customDefaultsAssignIn), importsKeys = keys(imports), importsValues = baseValues(imports, importsKeys);
|
|
var isEscaping, isEvaluating, index = 0, interpolate = options.interpolate || reNoMatch, source = "__p += '";
|
|
var reDelimiters = RegExp((options.escape || reNoMatch).source + "|" + interpolate.source + "|" + (interpolate === reInterpolate ? reEsTemplate : reNoMatch).source + "|" + (options.evaluate || reNoMatch).source + "|$", "g");
|
|
var sourceURL = hasOwnProperty$1.call(options, "sourceURL") ? "//# sourceURL=" + (options.sourceURL + "").replace(/\s/g, " ") + "\n" : "";
|
|
string.replace(reDelimiters, function(match, escapeValue, interpolateValue, esTemplateValue, evaluateValue, offset) {
|
|
interpolateValue || (interpolateValue = esTemplateValue);
|
|
source += string.slice(index, offset).replace(reUnescapedString, escapeStringChar);
|
|
if (escapeValue) {
|
|
isEscaping = true;
|
|
source += "' +\n__e(" + escapeValue + ") +\n'";
|
|
}
|
|
if (evaluateValue) {
|
|
isEvaluating = true;
|
|
source += "';\n" + evaluateValue + ";\n__p += '";
|
|
}
|
|
if (interpolateValue) {
|
|
source += "' +\n((__t = (" + interpolateValue + ")) == null ? '' : __t) +\n'";
|
|
}
|
|
index = offset + match.length;
|
|
return match;
|
|
});
|
|
source += "';\n";
|
|
var variable = hasOwnProperty$1.call(options, "variable") && options.variable;
|
|
if (!variable) {
|
|
source = "with (obj) {\n" + source + "\n}\n";
|
|
} else if (reForbiddenIdentifierChars.test(variable)) {
|
|
throw new Error(INVALID_TEMPL_VAR_ERROR_TEXT);
|
|
}
|
|
source = (isEvaluating ? source.replace(reEmptyStringLeading, "") : source).replace(reEmptyStringMiddle, "$1").replace(reEmptyStringTrailing, "$1;");
|
|
source = "function(" + (variable || "obj") + ") {\n" + (variable ? "" : "obj || (obj = {});\n") + "var __t, __p = ''" + (isEscaping ? ", __e = _.escape" : "") + (isEvaluating ? ", __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n" : ";\n") + source + "return __p\n}";
|
|
var result = attempt(function() {
|
|
return Function(importsKeys, sourceURL + "return " + source).apply(void 0, importsValues);
|
|
});
|
|
result.source = source;
|
|
if (isError(result)) {
|
|
throw result;
|
|
}
|
|
return result;
|
|
}
|
|
|
|
var FUNC_ERROR_TEXT = "Expected a function";
|
|
function throttle(func, wait, options) {
|
|
var leading = true, trailing = true;
|
|
if (typeof func != "function") {
|
|
throw new TypeError(FUNC_ERROR_TEXT);
|
|
}
|
|
if (isObject(options)) {
|
|
leading = "leading" in options ? !!options.leading : leading;
|
|
trailing = "trailing" in options ? !!options.trailing : trailing;
|
|
}
|
|
return debounce(func, wait, {
|
|
"leading": leading,
|
|
"maxWait": wait,
|
|
"trailing": trailing
|
|
});
|
|
}
|
|
|
|
function thru(value, interceptor) {
|
|
return interceptor(value);
|
|
}
|
|
|
|
var MAX_SAFE_INTEGER$1 = 9007199254740991;
|
|
var MAX_ARRAY_LENGTH$1 = 4294967295;
|
|
var nativeMin$3 = Math.min;
|
|
function times(n, iteratee) {
|
|
n = toInteger(n);
|
|
if (n < 1 || n > MAX_SAFE_INTEGER$1) {
|
|
return [];
|
|
}
|
|
var index = MAX_ARRAY_LENGTH$1, length = nativeMin$3(n, MAX_ARRAY_LENGTH$1);
|
|
iteratee = castFunction(iteratee);
|
|
n -= MAX_ARRAY_LENGTH$1;
|
|
var result = baseTimes(length, iteratee);
|
|
while (++index < n) {
|
|
iteratee(index);
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function wrapperToIterator() {
|
|
return this;
|
|
}
|
|
|
|
function baseWrapperValue(value, actions) {
|
|
var result = value;
|
|
if (result instanceof LazyWrapper) {
|
|
result = result.value();
|
|
}
|
|
return arrayReduce(actions, function(result2, action) {
|
|
return action.func.apply(action.thisArg, arrayPush([result2], action.args));
|
|
}, result);
|
|
}
|
|
|
|
function wrapperValue() {
|
|
return baseWrapperValue(this.__wrapped__, this.__actions__);
|
|
}
|
|
|
|
function toLower(value) {
|
|
return toString(value).toLowerCase();
|
|
}
|
|
|
|
function toPath(value) {
|
|
if (isArray(value)) {
|
|
return arrayMap(value, toKey);
|
|
}
|
|
return isSymbol(value) ? [value] : copyArray(stringToPath(toString(value)));
|
|
}
|
|
|
|
var MAX_SAFE_INTEGER = 9007199254740991;
|
|
function toSafeInteger(value) {
|
|
return value ? baseClamp(toInteger(value), -MAX_SAFE_INTEGER, MAX_SAFE_INTEGER) : value === 0 ? value : 0;
|
|
}
|
|
|
|
function toUpper(value) {
|
|
return toString(value).toUpperCase();
|
|
}
|
|
|
|
function transform(object, iteratee, accumulator) {
|
|
var isArr = isArray(object), isArrLike = isArr || isBuffer(object) || isTypedArray(object);
|
|
iteratee = baseIteratee(iteratee);
|
|
if (accumulator == null) {
|
|
var Ctor = object && object.constructor;
|
|
if (isArrLike) {
|
|
accumulator = isArr ? new Ctor() : [];
|
|
} else if (isObject(object)) {
|
|
accumulator = isFunction(Ctor) ? baseCreate(getPrototype(object)) : {};
|
|
} else {
|
|
accumulator = {};
|
|
}
|
|
}
|
|
(isArrLike ? arrayEach : baseForOwn)(object, function(value, index, object2) {
|
|
return iteratee(accumulator, value, index, object2);
|
|
});
|
|
return accumulator;
|
|
}
|
|
|
|
function charsEndIndex(strSymbols, chrSymbols) {
|
|
var index = strSymbols.length;
|
|
while (index-- && baseIndexOf(chrSymbols, strSymbols[index], 0) > -1) {
|
|
}
|
|
return index;
|
|
}
|
|
|
|
function charsStartIndex(strSymbols, chrSymbols) {
|
|
var index = -1, length = strSymbols.length;
|
|
while (++index < length && baseIndexOf(chrSymbols, strSymbols[index], 0) > -1) {
|
|
}
|
|
return index;
|
|
}
|
|
|
|
function trim(string, chars, guard) {
|
|
string = toString(string);
|
|
if (string && (guard || chars === void 0)) {
|
|
return baseTrim(string);
|
|
}
|
|
if (!string || !(chars = baseToString(chars))) {
|
|
return string;
|
|
}
|
|
var strSymbols = stringToArray(string), chrSymbols = stringToArray(chars), start = charsStartIndex(strSymbols, chrSymbols), end = charsEndIndex(strSymbols, chrSymbols) + 1;
|
|
return castSlice(strSymbols, start, end).join("");
|
|
}
|
|
|
|
function trimEnd(string, chars, guard) {
|
|
string = toString(string);
|
|
if (string && (guard || chars === void 0)) {
|
|
return string.slice(0, trimmedEndIndex(string) + 1);
|
|
}
|
|
if (!string || !(chars = baseToString(chars))) {
|
|
return string;
|
|
}
|
|
var strSymbols = stringToArray(string), end = charsEndIndex(strSymbols, stringToArray(chars)) + 1;
|
|
return castSlice(strSymbols, 0, end).join("");
|
|
}
|
|
|
|
var reTrimStart = /^\s+/;
|
|
function trimStart(string, chars, guard) {
|
|
string = toString(string);
|
|
if (string && (guard || chars === void 0)) {
|
|
return string.replace(reTrimStart, "");
|
|
}
|
|
if (!string || !(chars = baseToString(chars))) {
|
|
return string;
|
|
}
|
|
var strSymbols = stringToArray(string), start = charsStartIndex(strSymbols, stringToArray(chars));
|
|
return castSlice(strSymbols, start).join("");
|
|
}
|
|
|
|
var DEFAULT_TRUNC_LENGTH = 30;
|
|
var DEFAULT_TRUNC_OMISSION = "...";
|
|
var reFlags = /\w*$/;
|
|
function truncate(string, options) {
|
|
var length = DEFAULT_TRUNC_LENGTH, omission = DEFAULT_TRUNC_OMISSION;
|
|
if (isObject(options)) {
|
|
var separator = "separator" in options ? options.separator : separator;
|
|
length = "length" in options ? toInteger(options.length) : length;
|
|
omission = "omission" in options ? baseToString(options.omission) : omission;
|
|
}
|
|
string = toString(string);
|
|
var strLength = string.length;
|
|
if (hasUnicode(string)) {
|
|
var strSymbols = stringToArray(string);
|
|
strLength = strSymbols.length;
|
|
}
|
|
if (length >= strLength) {
|
|
return string;
|
|
}
|
|
var end = length - stringSize(omission);
|
|
if (end < 1) {
|
|
return omission;
|
|
}
|
|
var result = strSymbols ? castSlice(strSymbols, 0, end).join("") : string.slice(0, end);
|
|
if (separator === void 0) {
|
|
return result + omission;
|
|
}
|
|
if (strSymbols) {
|
|
end += result.length - end;
|
|
}
|
|
if (isRegExp(separator)) {
|
|
if (string.slice(end).search(separator)) {
|
|
var match, substring = result;
|
|
if (!separator.global) {
|
|
separator = RegExp(separator.source, toString(reFlags.exec(separator)) + "g");
|
|
}
|
|
separator.lastIndex = 0;
|
|
while (match = separator.exec(substring)) {
|
|
var newEnd = match.index;
|
|
}
|
|
result = result.slice(0, newEnd === void 0 ? end : newEnd);
|
|
}
|
|
} else if (string.indexOf(baseToString(separator), end) != end) {
|
|
var index = result.lastIndexOf(separator);
|
|
if (index > -1) {
|
|
result = result.slice(0, index);
|
|
}
|
|
}
|
|
return result + omission;
|
|
}
|
|
|
|
function unary(func) {
|
|
return ary(func, 1);
|
|
}
|
|
|
|
var htmlUnescapes = {
|
|
"&": "&",
|
|
"<": "<",
|
|
">": ">",
|
|
""": '"',
|
|
"'": "'"
|
|
};
|
|
var unescapeHtmlChar = basePropertyOf(htmlUnescapes);
|
|
|
|
var reEscapedHtml = /&(?:amp|lt|gt|quot|#39);/g;
|
|
var reHasEscapedHtml = RegExp(reEscapedHtml.source);
|
|
function unescape(string) {
|
|
string = toString(string);
|
|
return string && reHasEscapedHtml.test(string) ? string.replace(reEscapedHtml, unescapeHtmlChar) : string;
|
|
}
|
|
|
|
var INFINITY = 1 / 0;
|
|
var createSet = !(Set$1 && 1 / setToArray(new Set$1([, -0]))[1] == INFINITY) ? noop : function(values) {
|
|
return new Set$1(values);
|
|
};
|
|
|
|
var LARGE_ARRAY_SIZE = 200;
|
|
function baseUniq(array, iteratee, comparator) {
|
|
var index = -1, includes = arrayIncludes, length = array.length, isCommon = true, result = [], seen = result;
|
|
if (comparator) {
|
|
isCommon = false;
|
|
includes = arrayIncludesWith;
|
|
} else if (length >= LARGE_ARRAY_SIZE) {
|
|
var set = iteratee ? null : createSet(array);
|
|
if (set) {
|
|
return setToArray(set);
|
|
}
|
|
isCommon = false;
|
|
includes = cacheHas;
|
|
seen = new SetCache();
|
|
} else {
|
|
seen = iteratee ? [] : result;
|
|
}
|
|
outer:
|
|
while (++index < length) {
|
|
var value = array[index], computed = iteratee ? iteratee(value) : value;
|
|
value = comparator || value !== 0 ? value : 0;
|
|
if (isCommon && computed === computed) {
|
|
var seenIndex = seen.length;
|
|
while (seenIndex--) {
|
|
if (seen[seenIndex] === computed) {
|
|
continue outer;
|
|
}
|
|
}
|
|
if (iteratee) {
|
|
seen.push(computed);
|
|
}
|
|
result.push(value);
|
|
} else if (!includes(seen, computed, comparator)) {
|
|
if (seen !== result) {
|
|
seen.push(computed);
|
|
}
|
|
result.push(value);
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
var union = baseRest(function(arrays) {
|
|
return baseUniq(baseFlatten(arrays, 1, isArrayLikeObject, true));
|
|
});
|
|
|
|
var unionBy = baseRest(function(arrays) {
|
|
var iteratee = last(arrays);
|
|
if (isArrayLikeObject(iteratee)) {
|
|
iteratee = void 0;
|
|
}
|
|
return baseUniq(baseFlatten(arrays, 1, isArrayLikeObject, true), baseIteratee(iteratee));
|
|
});
|
|
|
|
var unionWith = baseRest(function(arrays) {
|
|
var comparator = last(arrays);
|
|
comparator = typeof comparator == "function" ? comparator : void 0;
|
|
return baseUniq(baseFlatten(arrays, 1, isArrayLikeObject, true), void 0, comparator);
|
|
});
|
|
|
|
function uniq(array) {
|
|
return array && array.length ? baseUniq(array) : [];
|
|
}
|
|
|
|
function uniqBy(array, iteratee) {
|
|
return array && array.length ? baseUniq(array, baseIteratee(iteratee)) : [];
|
|
}
|
|
|
|
function uniqWith(array, comparator) {
|
|
comparator = typeof comparator == "function" ? comparator : void 0;
|
|
return array && array.length ? baseUniq(array, void 0, comparator) : [];
|
|
}
|
|
|
|
var idCounter = 0;
|
|
function uniqueId(prefix) {
|
|
var id = ++idCounter;
|
|
return toString(prefix) + id;
|
|
}
|
|
|
|
function unset(object, path) {
|
|
return object == null ? true : baseUnset(object, path);
|
|
}
|
|
|
|
var nativeMax$2 = Math.max;
|
|
function unzip(array) {
|
|
if (!(array && array.length)) {
|
|
return [];
|
|
}
|
|
var length = 0;
|
|
array = arrayFilter(array, function(group) {
|
|
if (isArrayLikeObject(group)) {
|
|
length = nativeMax$2(group.length, length);
|
|
return true;
|
|
}
|
|
});
|
|
return baseTimes(length, function(index) {
|
|
return arrayMap(array, baseProperty(index));
|
|
});
|
|
}
|
|
|
|
function unzipWith(array, iteratee) {
|
|
if (!(array && array.length)) {
|
|
return [];
|
|
}
|
|
var result = unzip(array);
|
|
if (iteratee == null) {
|
|
return result;
|
|
}
|
|
return arrayMap(result, function(group) {
|
|
return apply(iteratee, void 0, group);
|
|
});
|
|
}
|
|
|
|
function baseUpdate(object, path, updater, customizer) {
|
|
return baseSet(object, path, updater(baseGet(object, path)), customizer);
|
|
}
|
|
|
|
function update(object, path, updater) {
|
|
return object == null ? object : baseUpdate(object, path, castFunction(updater));
|
|
}
|
|
|
|
function updateWith(object, path, updater, customizer) {
|
|
customizer = typeof customizer == "function" ? customizer : void 0;
|
|
return object == null ? object : baseUpdate(object, path, castFunction(updater), customizer);
|
|
}
|
|
|
|
var upperCase = createCompounder(function(result, word, index) {
|
|
return result + (index ? " " : "") + word.toUpperCase();
|
|
});
|
|
|
|
function valuesIn(object) {
|
|
return object == null ? [] : baseValues(object, keysIn(object));
|
|
}
|
|
|
|
var without = baseRest(function(array, values) {
|
|
return isArrayLikeObject(array) ? baseDifference(array, values) : [];
|
|
});
|
|
|
|
function wrap(value, wrapper) {
|
|
return partial(castFunction(wrapper), value);
|
|
}
|
|
|
|
var wrapperAt = flatRest(function(paths) {
|
|
var length = paths.length, start = length ? paths[0] : 0, value = this.__wrapped__, interceptor = function(object) {
|
|
return baseAt(object, paths);
|
|
};
|
|
if (length > 1 || this.__actions__.length || !(value instanceof LazyWrapper) || !isIndex(start)) {
|
|
return this.thru(interceptor);
|
|
}
|
|
value = value.slice(start, +start + (length ? 1 : 0));
|
|
value.__actions__.push({
|
|
"func": thru,
|
|
"args": [interceptor],
|
|
"thisArg": void 0
|
|
});
|
|
return new LodashWrapper(value, this.__chain__).thru(function(array) {
|
|
if (length && !array.length) {
|
|
array.push(void 0);
|
|
}
|
|
return array;
|
|
});
|
|
});
|
|
|
|
function wrapperChain() {
|
|
return chain(this);
|
|
}
|
|
|
|
function wrapperReverse() {
|
|
var value = this.__wrapped__;
|
|
if (value instanceof LazyWrapper) {
|
|
var wrapped = value;
|
|
if (this.__actions__.length) {
|
|
wrapped = new LazyWrapper(this);
|
|
}
|
|
wrapped = wrapped.reverse();
|
|
wrapped.__actions__.push({
|
|
"func": thru,
|
|
"args": [reverse],
|
|
"thisArg": void 0
|
|
});
|
|
return new LodashWrapper(wrapped, this.__chain__);
|
|
}
|
|
return this.thru(reverse);
|
|
}
|
|
|
|
function baseXor(arrays, iteratee, comparator) {
|
|
var length = arrays.length;
|
|
if (length < 2) {
|
|
return length ? baseUniq(arrays[0]) : [];
|
|
}
|
|
var index = -1, result = Array(length);
|
|
while (++index < length) {
|
|
var array = arrays[index], othIndex = -1;
|
|
while (++othIndex < length) {
|
|
if (othIndex != index) {
|
|
result[index] = baseDifference(result[index] || array, arrays[othIndex], iteratee, comparator);
|
|
}
|
|
}
|
|
}
|
|
return baseUniq(baseFlatten(result, 1), iteratee, comparator);
|
|
}
|
|
|
|
var xor = baseRest(function(arrays) {
|
|
return baseXor(arrayFilter(arrays, isArrayLikeObject));
|
|
});
|
|
|
|
var xorBy = baseRest(function(arrays) {
|
|
var iteratee = last(arrays);
|
|
if (isArrayLikeObject(iteratee)) {
|
|
iteratee = void 0;
|
|
}
|
|
return baseXor(arrayFilter(arrays, isArrayLikeObject), baseIteratee(iteratee));
|
|
});
|
|
|
|
var xorWith = baseRest(function(arrays) {
|
|
var comparator = last(arrays);
|
|
comparator = typeof comparator == "function" ? comparator : void 0;
|
|
return baseXor(arrayFilter(arrays, isArrayLikeObject), void 0, comparator);
|
|
});
|
|
|
|
var zip = baseRest(unzip);
|
|
|
|
function baseZipObject(props, values, assignFunc) {
|
|
var index = -1, length = props.length, valsLength = values.length, result = {};
|
|
while (++index < length) {
|
|
var value = index < valsLength ? values[index] : void 0;
|
|
assignFunc(result, props[index], value);
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function zipObject(props, values) {
|
|
return baseZipObject(props || [], values || [], assignValue);
|
|
}
|
|
|
|
function zipObjectDeep(props, values) {
|
|
return baseZipObject(props || [], values || [], baseSet);
|
|
}
|
|
|
|
var zipWith = baseRest(function(arrays) {
|
|
var length = arrays.length, iteratee = length > 1 ? arrays[length - 1] : void 0;
|
|
iteratee = typeof iteratee == "function" ? (arrays.pop(), iteratee) : void 0;
|
|
return unzipWith(arrays, iteratee);
|
|
});
|
|
|
|
var array = {
|
|
chunk,
|
|
compact,
|
|
concat,
|
|
difference,
|
|
differenceBy,
|
|
differenceWith,
|
|
drop,
|
|
dropRight,
|
|
dropRightWhile,
|
|
dropWhile,
|
|
fill,
|
|
findIndex,
|
|
findLastIndex,
|
|
first: head,
|
|
flatten,
|
|
flattenDeep,
|
|
flattenDepth,
|
|
fromPairs,
|
|
head,
|
|
indexOf,
|
|
initial: initial$1,
|
|
intersection,
|
|
intersectionBy,
|
|
intersectionWith,
|
|
join,
|
|
last,
|
|
lastIndexOf,
|
|
nth,
|
|
pull,
|
|
pullAll,
|
|
pullAllBy,
|
|
pullAllWith,
|
|
pullAt,
|
|
remove,
|
|
reverse,
|
|
slice,
|
|
sortedIndex,
|
|
sortedIndexBy,
|
|
sortedIndexOf,
|
|
sortedLastIndex,
|
|
sortedLastIndexBy,
|
|
sortedLastIndexOf,
|
|
sortedUniq,
|
|
sortedUniqBy,
|
|
tail,
|
|
take,
|
|
takeRight,
|
|
takeRightWhile,
|
|
takeWhile,
|
|
union,
|
|
unionBy,
|
|
unionWith,
|
|
uniq,
|
|
uniqBy,
|
|
uniqWith,
|
|
unzip,
|
|
unzipWith,
|
|
without,
|
|
xor,
|
|
xorBy,
|
|
xorWith,
|
|
zip,
|
|
zipObject,
|
|
zipObjectDeep,
|
|
zipWith
|
|
};
|
|
|
|
var collection = {
|
|
countBy,
|
|
each: forEach,
|
|
eachRight: forEachRight,
|
|
every,
|
|
filter,
|
|
find,
|
|
findLast,
|
|
flatMap,
|
|
flatMapDeep,
|
|
flatMapDepth,
|
|
forEach,
|
|
forEachRight,
|
|
groupBy,
|
|
includes,
|
|
invokeMap,
|
|
keyBy,
|
|
map,
|
|
orderBy: orderBy$1,
|
|
partition,
|
|
reduce,
|
|
reduceRight,
|
|
reject,
|
|
sample,
|
|
sampleSize,
|
|
shuffle,
|
|
size,
|
|
some,
|
|
sortBy
|
|
};
|
|
|
|
var date = {
|
|
now
|
|
};
|
|
|
|
var func = {
|
|
after,
|
|
ary,
|
|
before,
|
|
bind,
|
|
bindKey,
|
|
curry,
|
|
curryRight,
|
|
debounce,
|
|
defer,
|
|
delay,
|
|
flip: flip$1,
|
|
memoize,
|
|
negate,
|
|
once,
|
|
overArgs,
|
|
partial,
|
|
partialRight,
|
|
rearg,
|
|
rest,
|
|
spread,
|
|
throttle,
|
|
unary,
|
|
wrap
|
|
};
|
|
|
|
var lang = {
|
|
castArray: castArray$1,
|
|
clone,
|
|
cloneDeep,
|
|
cloneDeepWith,
|
|
cloneWith,
|
|
conformsTo,
|
|
eq,
|
|
gt: gt$1,
|
|
gte,
|
|
isArguments,
|
|
isArray,
|
|
isArrayBuffer,
|
|
isArrayLike,
|
|
isArrayLikeObject,
|
|
isBoolean: isBoolean$1,
|
|
isBuffer,
|
|
isDate,
|
|
isElement: isElement$2,
|
|
isEmpty: isEmpty$1,
|
|
isEqual: isEqual$1,
|
|
isEqualWith,
|
|
isError,
|
|
isFinite,
|
|
isFunction,
|
|
isInteger,
|
|
isLength,
|
|
isMap,
|
|
isMatch,
|
|
isMatchWith,
|
|
isNaN: isNaN$1,
|
|
isNative,
|
|
isNil,
|
|
isNull,
|
|
isNumber: isNumber$1,
|
|
isObject,
|
|
isObjectLike,
|
|
isPlainObject,
|
|
isRegExp,
|
|
isSafeInteger,
|
|
isSet,
|
|
isString,
|
|
isSymbol,
|
|
isTypedArray,
|
|
isUndefined: isUndefined$1,
|
|
isWeakMap,
|
|
isWeakSet,
|
|
lt: lt$1,
|
|
lte,
|
|
toArray,
|
|
toFinite,
|
|
toInteger,
|
|
toLength,
|
|
toNumber,
|
|
toPlainObject,
|
|
toSafeInteger,
|
|
toString
|
|
};
|
|
|
|
var math = {
|
|
add,
|
|
ceil,
|
|
divide,
|
|
floor: floor$1,
|
|
max: max$3,
|
|
maxBy,
|
|
mean,
|
|
meanBy,
|
|
min: min$3,
|
|
minBy,
|
|
multiply,
|
|
round: round$1,
|
|
subtract,
|
|
sum: sum$1,
|
|
sumBy
|
|
};
|
|
|
|
var number = {
|
|
clamp,
|
|
inRange,
|
|
random
|
|
};
|
|
|
|
var object = {
|
|
assign,
|
|
assignIn,
|
|
assignInWith,
|
|
assignWith,
|
|
at: at$1,
|
|
create,
|
|
defaults,
|
|
defaultsDeep,
|
|
entries: toPairs,
|
|
entriesIn: toPairsIn,
|
|
extend: assignIn,
|
|
extendWith: assignInWith,
|
|
findKey,
|
|
findLastKey,
|
|
forIn,
|
|
forInRight,
|
|
forOwn,
|
|
forOwnRight,
|
|
functions,
|
|
functionsIn,
|
|
get,
|
|
has,
|
|
hasIn,
|
|
invert,
|
|
invertBy,
|
|
invoke,
|
|
keys,
|
|
keysIn,
|
|
mapKeys,
|
|
mapValues,
|
|
merge,
|
|
mergeWith,
|
|
omit,
|
|
omitBy,
|
|
pick,
|
|
pickBy,
|
|
result,
|
|
set,
|
|
setWith,
|
|
toPairs,
|
|
toPairsIn,
|
|
transform,
|
|
unset,
|
|
update,
|
|
updateWith,
|
|
values,
|
|
valuesIn
|
|
};
|
|
|
|
var seq = {
|
|
at: wrapperAt,
|
|
chain,
|
|
commit: wrapperCommit,
|
|
lodash,
|
|
next: wrapperNext,
|
|
plant: wrapperPlant,
|
|
reverse: wrapperReverse,
|
|
tap,
|
|
thru,
|
|
toIterator: wrapperToIterator,
|
|
toJSON: wrapperValue,
|
|
value: wrapperValue,
|
|
valueOf: wrapperValue,
|
|
wrapperChain
|
|
};
|
|
|
|
var string$1 = {
|
|
camelCase,
|
|
capitalize: capitalize$1,
|
|
deburr,
|
|
endsWith,
|
|
escape,
|
|
escapeRegExp,
|
|
kebabCase,
|
|
lowerCase,
|
|
lowerFirst,
|
|
pad,
|
|
padEnd,
|
|
padStart,
|
|
parseInt: parseInt$1,
|
|
repeat,
|
|
replace,
|
|
snakeCase,
|
|
split,
|
|
startCase,
|
|
startsWith,
|
|
template,
|
|
templateSettings,
|
|
toLower,
|
|
toUpper,
|
|
trim,
|
|
trimEnd,
|
|
trimStart,
|
|
truncate,
|
|
unescape,
|
|
upperCase,
|
|
upperFirst,
|
|
words
|
|
};
|
|
|
|
var util = {
|
|
attempt,
|
|
bindAll,
|
|
cond,
|
|
conforms,
|
|
constant,
|
|
defaultTo,
|
|
flow,
|
|
flowRight,
|
|
identity,
|
|
iteratee,
|
|
matches,
|
|
matchesProperty,
|
|
method,
|
|
methodOf,
|
|
mixin: mixin$1,
|
|
noop,
|
|
nthArg,
|
|
over,
|
|
overEvery,
|
|
overSome,
|
|
property,
|
|
propertyOf,
|
|
range: range$1,
|
|
rangeRight,
|
|
stubArray,
|
|
stubFalse,
|
|
stubObject,
|
|
stubString,
|
|
stubTrue,
|
|
times,
|
|
toPath,
|
|
uniqueId
|
|
};
|
|
|
|
function lazyClone() {
|
|
var result = new LazyWrapper(this.__wrapped__);
|
|
result.__actions__ = copyArray(this.__actions__);
|
|
result.__dir__ = this.__dir__;
|
|
result.__filtered__ = this.__filtered__;
|
|
result.__iteratees__ = copyArray(this.__iteratees__);
|
|
result.__takeCount__ = this.__takeCount__;
|
|
result.__views__ = copyArray(this.__views__);
|
|
return result;
|
|
}
|
|
|
|
function lazyReverse() {
|
|
if (this.__filtered__) {
|
|
var result = new LazyWrapper(this);
|
|
result.__dir__ = -1;
|
|
result.__filtered__ = true;
|
|
} else {
|
|
result = this.clone();
|
|
result.__dir__ *= -1;
|
|
}
|
|
return result;
|
|
}
|
|
|
|
var nativeMax$1 = Math.max;
|
|
var nativeMin$2 = Math.min;
|
|
function getView(start, end, transforms) {
|
|
var index = -1, length = transforms.length;
|
|
while (++index < length) {
|
|
var data = transforms[index], size = data.size;
|
|
switch (data.type) {
|
|
case "drop":
|
|
start += size;
|
|
break;
|
|
case "dropRight":
|
|
end -= size;
|
|
break;
|
|
case "take":
|
|
end = nativeMin$2(end, start + size);
|
|
break;
|
|
case "takeRight":
|
|
start = nativeMax$1(start, end - size);
|
|
break;
|
|
}
|
|
}
|
|
return { "start": start, "end": end };
|
|
}
|
|
|
|
var LAZY_FILTER_FLAG$1 = 1;
|
|
var LAZY_MAP_FLAG = 2;
|
|
var nativeMin$1 = Math.min;
|
|
function lazyValue() {
|
|
var array = this.__wrapped__.value(), dir = this.__dir__, isArr = isArray(array), isRight = dir < 0, arrLength = isArr ? array.length : 0, view = getView(0, arrLength, this.__views__), start = view.start, end = view.end, length = end - start, index = isRight ? end : start - 1, iteratees = this.__iteratees__, iterLength = iteratees.length, resIndex = 0, takeCount = nativeMin$1(length, this.__takeCount__);
|
|
if (!isArr || !isRight && arrLength == length && takeCount == length) {
|
|
return baseWrapperValue(array, this.__actions__);
|
|
}
|
|
var result = [];
|
|
outer:
|
|
while (length-- && resIndex < takeCount) {
|
|
index += dir;
|
|
var iterIndex = -1, value = array[index];
|
|
while (++iterIndex < iterLength) {
|
|
var data = iteratees[iterIndex], iteratee = data.iteratee, type = data.type, computed = iteratee(value);
|
|
if (type == LAZY_MAP_FLAG) {
|
|
value = computed;
|
|
} else if (!computed) {
|
|
if (type == LAZY_FILTER_FLAG$1) {
|
|
continue outer;
|
|
} else {
|
|
break outer;
|
|
}
|
|
}
|
|
}
|
|
result[resIndex++] = value;
|
|
}
|
|
return result;
|
|
}
|
|
|
|
var VERSION = "4.17.21";
|
|
var WRAP_BIND_KEY_FLAG = 2;
|
|
var LAZY_FILTER_FLAG = 1;
|
|
var LAZY_WHILE_FLAG = 3;
|
|
var MAX_ARRAY_LENGTH = 4294967295;
|
|
var arrayProto = Array.prototype;
|
|
var objectProto = Object.prototype;
|
|
var hasOwnProperty = objectProto.hasOwnProperty;
|
|
var symIterator = Symbol$1 ? Symbol$1.iterator : void 0;
|
|
var nativeMax = Math.max;
|
|
var nativeMin = Math.min;
|
|
var mixin = function(func2) {
|
|
return function(object2, source, options) {
|
|
if (options == null) {
|
|
var isObj = isObject(source), props = isObj && keys(source), methodNames = props && props.length && baseFunctions(source, props);
|
|
if (!(methodNames ? methodNames.length : isObj)) {
|
|
options = source;
|
|
source = object2;
|
|
object2 = this;
|
|
}
|
|
}
|
|
return func2(object2, source, options);
|
|
};
|
|
}(mixin$1);
|
|
lodash.after = func.after;
|
|
lodash.ary = func.ary;
|
|
lodash.assign = object.assign;
|
|
lodash.assignIn = object.assignIn;
|
|
lodash.assignInWith = object.assignInWith;
|
|
lodash.assignWith = object.assignWith;
|
|
lodash.at = object.at;
|
|
lodash.before = func.before;
|
|
lodash.bind = func.bind;
|
|
lodash.bindAll = util.bindAll;
|
|
lodash.bindKey = func.bindKey;
|
|
lodash.castArray = lang.castArray;
|
|
lodash.chain = seq.chain;
|
|
lodash.chunk = array.chunk;
|
|
lodash.compact = array.compact;
|
|
lodash.concat = array.concat;
|
|
lodash.cond = util.cond;
|
|
lodash.conforms = util.conforms;
|
|
lodash.constant = util.constant;
|
|
lodash.countBy = collection.countBy;
|
|
lodash.create = object.create;
|
|
lodash.curry = func.curry;
|
|
lodash.curryRight = func.curryRight;
|
|
lodash.debounce = func.debounce;
|
|
lodash.defaults = object.defaults;
|
|
lodash.defaultsDeep = object.defaultsDeep;
|
|
lodash.defer = func.defer;
|
|
lodash.delay = func.delay;
|
|
lodash.difference = array.difference;
|
|
lodash.differenceBy = array.differenceBy;
|
|
lodash.differenceWith = array.differenceWith;
|
|
lodash.drop = array.drop;
|
|
lodash.dropRight = array.dropRight;
|
|
lodash.dropRightWhile = array.dropRightWhile;
|
|
lodash.dropWhile = array.dropWhile;
|
|
lodash.fill = array.fill;
|
|
lodash.filter = collection.filter;
|
|
lodash.flatMap = collection.flatMap;
|
|
lodash.flatMapDeep = collection.flatMapDeep;
|
|
lodash.flatMapDepth = collection.flatMapDepth;
|
|
lodash.flatten = array.flatten;
|
|
lodash.flattenDeep = array.flattenDeep;
|
|
lodash.flattenDepth = array.flattenDepth;
|
|
lodash.flip = func.flip;
|
|
lodash.flow = util.flow;
|
|
lodash.flowRight = util.flowRight;
|
|
lodash.fromPairs = array.fromPairs;
|
|
lodash.functions = object.functions;
|
|
lodash.functionsIn = object.functionsIn;
|
|
lodash.groupBy = collection.groupBy;
|
|
lodash.initial = array.initial;
|
|
lodash.intersection = array.intersection;
|
|
lodash.intersectionBy = array.intersectionBy;
|
|
lodash.intersectionWith = array.intersectionWith;
|
|
lodash.invert = object.invert;
|
|
lodash.invertBy = object.invertBy;
|
|
lodash.invokeMap = collection.invokeMap;
|
|
lodash.iteratee = util.iteratee;
|
|
lodash.keyBy = collection.keyBy;
|
|
lodash.keys = keys;
|
|
lodash.keysIn = object.keysIn;
|
|
lodash.map = collection.map;
|
|
lodash.mapKeys = object.mapKeys;
|
|
lodash.mapValues = object.mapValues;
|
|
lodash.matches = util.matches;
|
|
lodash.matchesProperty = util.matchesProperty;
|
|
lodash.memoize = func.memoize;
|
|
lodash.merge = object.merge;
|
|
lodash.mergeWith = object.mergeWith;
|
|
lodash.method = util.method;
|
|
lodash.methodOf = util.methodOf;
|
|
lodash.mixin = mixin;
|
|
lodash.negate = negate;
|
|
lodash.nthArg = util.nthArg;
|
|
lodash.omit = object.omit;
|
|
lodash.omitBy = object.omitBy;
|
|
lodash.once = func.once;
|
|
lodash.orderBy = collection.orderBy;
|
|
lodash.over = util.over;
|
|
lodash.overArgs = func.overArgs;
|
|
lodash.overEvery = util.overEvery;
|
|
lodash.overSome = util.overSome;
|
|
lodash.partial = func.partial;
|
|
lodash.partialRight = func.partialRight;
|
|
lodash.partition = collection.partition;
|
|
lodash.pick = object.pick;
|
|
lodash.pickBy = object.pickBy;
|
|
lodash.property = util.property;
|
|
lodash.propertyOf = util.propertyOf;
|
|
lodash.pull = array.pull;
|
|
lodash.pullAll = array.pullAll;
|
|
lodash.pullAllBy = array.pullAllBy;
|
|
lodash.pullAllWith = array.pullAllWith;
|
|
lodash.pullAt = array.pullAt;
|
|
lodash.range = util.range;
|
|
lodash.rangeRight = util.rangeRight;
|
|
lodash.rearg = func.rearg;
|
|
lodash.reject = collection.reject;
|
|
lodash.remove = array.remove;
|
|
lodash.rest = func.rest;
|
|
lodash.reverse = array.reverse;
|
|
lodash.sampleSize = collection.sampleSize;
|
|
lodash.set = object.set;
|
|
lodash.setWith = object.setWith;
|
|
lodash.shuffle = collection.shuffle;
|
|
lodash.slice = array.slice;
|
|
lodash.sortBy = collection.sortBy;
|
|
lodash.sortedUniq = array.sortedUniq;
|
|
lodash.sortedUniqBy = array.sortedUniqBy;
|
|
lodash.split = string$1.split;
|
|
lodash.spread = func.spread;
|
|
lodash.tail = array.tail;
|
|
lodash.take = array.take;
|
|
lodash.takeRight = array.takeRight;
|
|
lodash.takeRightWhile = array.takeRightWhile;
|
|
lodash.takeWhile = array.takeWhile;
|
|
lodash.tap = seq.tap;
|
|
lodash.throttle = func.throttle;
|
|
lodash.thru = thru;
|
|
lodash.toArray = lang.toArray;
|
|
lodash.toPairs = object.toPairs;
|
|
lodash.toPairsIn = object.toPairsIn;
|
|
lodash.toPath = util.toPath;
|
|
lodash.toPlainObject = lang.toPlainObject;
|
|
lodash.transform = object.transform;
|
|
lodash.unary = func.unary;
|
|
lodash.union = array.union;
|
|
lodash.unionBy = array.unionBy;
|
|
lodash.unionWith = array.unionWith;
|
|
lodash.uniq = array.uniq;
|
|
lodash.uniqBy = array.uniqBy;
|
|
lodash.uniqWith = array.uniqWith;
|
|
lodash.unset = object.unset;
|
|
lodash.unzip = array.unzip;
|
|
lodash.unzipWith = array.unzipWith;
|
|
lodash.update = object.update;
|
|
lodash.updateWith = object.updateWith;
|
|
lodash.values = object.values;
|
|
lodash.valuesIn = object.valuesIn;
|
|
lodash.without = array.without;
|
|
lodash.words = string$1.words;
|
|
lodash.wrap = func.wrap;
|
|
lodash.xor = array.xor;
|
|
lodash.xorBy = array.xorBy;
|
|
lodash.xorWith = array.xorWith;
|
|
lodash.zip = array.zip;
|
|
lodash.zipObject = array.zipObject;
|
|
lodash.zipObjectDeep = array.zipObjectDeep;
|
|
lodash.zipWith = array.zipWith;
|
|
lodash.entries = object.toPairs;
|
|
lodash.entriesIn = object.toPairsIn;
|
|
lodash.extend = object.assignIn;
|
|
lodash.extendWith = object.assignInWith;
|
|
mixin(lodash, lodash);
|
|
lodash.add = math.add;
|
|
lodash.attempt = util.attempt;
|
|
lodash.camelCase = string$1.camelCase;
|
|
lodash.capitalize = string$1.capitalize;
|
|
lodash.ceil = math.ceil;
|
|
lodash.clamp = number.clamp;
|
|
lodash.clone = lang.clone;
|
|
lodash.cloneDeep = lang.cloneDeep;
|
|
lodash.cloneDeepWith = lang.cloneDeepWith;
|
|
lodash.cloneWith = lang.cloneWith;
|
|
lodash.conformsTo = lang.conformsTo;
|
|
lodash.deburr = string$1.deburr;
|
|
lodash.defaultTo = util.defaultTo;
|
|
lodash.divide = math.divide;
|
|
lodash.endsWith = string$1.endsWith;
|
|
lodash.eq = lang.eq;
|
|
lodash.escape = string$1.escape;
|
|
lodash.escapeRegExp = string$1.escapeRegExp;
|
|
lodash.every = collection.every;
|
|
lodash.find = collection.find;
|
|
lodash.findIndex = array.findIndex;
|
|
lodash.findKey = object.findKey;
|
|
lodash.findLast = collection.findLast;
|
|
lodash.findLastIndex = array.findLastIndex;
|
|
lodash.findLastKey = object.findLastKey;
|
|
lodash.floor = math.floor;
|
|
lodash.forEach = collection.forEach;
|
|
lodash.forEachRight = collection.forEachRight;
|
|
lodash.forIn = object.forIn;
|
|
lodash.forInRight = object.forInRight;
|
|
lodash.forOwn = object.forOwn;
|
|
lodash.forOwnRight = object.forOwnRight;
|
|
lodash.get = object.get;
|
|
lodash.gt = lang.gt;
|
|
lodash.gte = lang.gte;
|
|
lodash.has = object.has;
|
|
lodash.hasIn = object.hasIn;
|
|
lodash.head = array.head;
|
|
lodash.identity = identity;
|
|
lodash.includes = collection.includes;
|
|
lodash.indexOf = array.indexOf;
|
|
lodash.inRange = number.inRange;
|
|
lodash.invoke = object.invoke;
|
|
lodash.isArguments = lang.isArguments;
|
|
lodash.isArray = isArray;
|
|
lodash.isArrayBuffer = lang.isArrayBuffer;
|
|
lodash.isArrayLike = lang.isArrayLike;
|
|
lodash.isArrayLikeObject = lang.isArrayLikeObject;
|
|
lodash.isBoolean = lang.isBoolean;
|
|
lodash.isBuffer = lang.isBuffer;
|
|
lodash.isDate = lang.isDate;
|
|
lodash.isElement = lang.isElement;
|
|
lodash.isEmpty = lang.isEmpty;
|
|
lodash.isEqual = lang.isEqual;
|
|
lodash.isEqualWith = lang.isEqualWith;
|
|
lodash.isError = lang.isError;
|
|
lodash.isFinite = lang.isFinite;
|
|
lodash.isFunction = lang.isFunction;
|
|
lodash.isInteger = lang.isInteger;
|
|
lodash.isLength = lang.isLength;
|
|
lodash.isMap = lang.isMap;
|
|
lodash.isMatch = lang.isMatch;
|
|
lodash.isMatchWith = lang.isMatchWith;
|
|
lodash.isNaN = lang.isNaN;
|
|
lodash.isNative = lang.isNative;
|
|
lodash.isNil = lang.isNil;
|
|
lodash.isNull = lang.isNull;
|
|
lodash.isNumber = lang.isNumber;
|
|
lodash.isObject = isObject;
|
|
lodash.isObjectLike = lang.isObjectLike;
|
|
lodash.isPlainObject = lang.isPlainObject;
|
|
lodash.isRegExp = lang.isRegExp;
|
|
lodash.isSafeInteger = lang.isSafeInteger;
|
|
lodash.isSet = lang.isSet;
|
|
lodash.isString = lang.isString;
|
|
lodash.isSymbol = lang.isSymbol;
|
|
lodash.isTypedArray = lang.isTypedArray;
|
|
lodash.isUndefined = lang.isUndefined;
|
|
lodash.isWeakMap = lang.isWeakMap;
|
|
lodash.isWeakSet = lang.isWeakSet;
|
|
lodash.join = array.join;
|
|
lodash.kebabCase = string$1.kebabCase;
|
|
lodash.last = last;
|
|
lodash.lastIndexOf = array.lastIndexOf;
|
|
lodash.lowerCase = string$1.lowerCase;
|
|
lodash.lowerFirst = string$1.lowerFirst;
|
|
lodash.lt = lang.lt;
|
|
lodash.lte = lang.lte;
|
|
lodash.max = math.max;
|
|
lodash.maxBy = math.maxBy;
|
|
lodash.mean = math.mean;
|
|
lodash.meanBy = math.meanBy;
|
|
lodash.min = math.min;
|
|
lodash.minBy = math.minBy;
|
|
lodash.stubArray = util.stubArray;
|
|
lodash.stubFalse = util.stubFalse;
|
|
lodash.stubObject = util.stubObject;
|
|
lodash.stubString = util.stubString;
|
|
lodash.stubTrue = util.stubTrue;
|
|
lodash.multiply = math.multiply;
|
|
lodash.nth = array.nth;
|
|
lodash.noop = util.noop;
|
|
lodash.now = date.now;
|
|
lodash.pad = string$1.pad;
|
|
lodash.padEnd = string$1.padEnd;
|
|
lodash.padStart = string$1.padStart;
|
|
lodash.parseInt = string$1.parseInt;
|
|
lodash.random = number.random;
|
|
lodash.reduce = collection.reduce;
|
|
lodash.reduceRight = collection.reduceRight;
|
|
lodash.repeat = string$1.repeat;
|
|
lodash.replace = string$1.replace;
|
|
lodash.result = object.result;
|
|
lodash.round = math.round;
|
|
lodash.sample = collection.sample;
|
|
lodash.size = collection.size;
|
|
lodash.snakeCase = string$1.snakeCase;
|
|
lodash.some = collection.some;
|
|
lodash.sortedIndex = array.sortedIndex;
|
|
lodash.sortedIndexBy = array.sortedIndexBy;
|
|
lodash.sortedIndexOf = array.sortedIndexOf;
|
|
lodash.sortedLastIndex = array.sortedLastIndex;
|
|
lodash.sortedLastIndexBy = array.sortedLastIndexBy;
|
|
lodash.sortedLastIndexOf = array.sortedLastIndexOf;
|
|
lodash.startCase = string$1.startCase;
|
|
lodash.startsWith = string$1.startsWith;
|
|
lodash.subtract = math.subtract;
|
|
lodash.sum = math.sum;
|
|
lodash.sumBy = math.sumBy;
|
|
lodash.template = string$1.template;
|
|
lodash.times = util.times;
|
|
lodash.toFinite = lang.toFinite;
|
|
lodash.toInteger = toInteger;
|
|
lodash.toLength = lang.toLength;
|
|
lodash.toLower = string$1.toLower;
|
|
lodash.toNumber = lang.toNumber;
|
|
lodash.toSafeInteger = lang.toSafeInteger;
|
|
lodash.toString = lang.toString;
|
|
lodash.toUpper = string$1.toUpper;
|
|
lodash.trim = string$1.trim;
|
|
lodash.trimEnd = string$1.trimEnd;
|
|
lodash.trimStart = string$1.trimStart;
|
|
lodash.truncate = string$1.truncate;
|
|
lodash.unescape = string$1.unescape;
|
|
lodash.uniqueId = util.uniqueId;
|
|
lodash.upperCase = string$1.upperCase;
|
|
lodash.upperFirst = string$1.upperFirst;
|
|
lodash.each = collection.forEach;
|
|
lodash.eachRight = collection.forEachRight;
|
|
lodash.first = array.head;
|
|
mixin(lodash, function() {
|
|
var source = {};
|
|
baseForOwn(lodash, function(func2, methodName) {
|
|
if (!hasOwnProperty.call(lodash.prototype, methodName)) {
|
|
source[methodName] = func2;
|
|
}
|
|
});
|
|
return source;
|
|
}(), { "chain": false });
|
|
lodash.VERSION = VERSION;
|
|
(lodash.templateSettings = string$1.templateSettings).imports._ = lodash;
|
|
arrayEach(["bind", "bindKey", "curry", "curryRight", "partial", "partialRight"], function(methodName) {
|
|
lodash[methodName].placeholder = lodash;
|
|
});
|
|
arrayEach(["drop", "take"], function(methodName, index) {
|
|
LazyWrapper.prototype[methodName] = function(n) {
|
|
n = n === void 0 ? 1 : nativeMax(toInteger(n), 0);
|
|
var result = this.__filtered__ && !index ? new LazyWrapper(this) : this.clone();
|
|
if (result.__filtered__) {
|
|
result.__takeCount__ = nativeMin(n, result.__takeCount__);
|
|
} else {
|
|
result.__views__.push({
|
|
"size": nativeMin(n, MAX_ARRAY_LENGTH),
|
|
"type": methodName + (result.__dir__ < 0 ? "Right" : "")
|
|
});
|
|
}
|
|
return result;
|
|
};
|
|
LazyWrapper.prototype[methodName + "Right"] = function(n) {
|
|
return this.reverse()[methodName](n).reverse();
|
|
};
|
|
});
|
|
arrayEach(["filter", "map", "takeWhile"], function(methodName, index) {
|
|
var type = index + 1, isFilter = type == LAZY_FILTER_FLAG || type == LAZY_WHILE_FLAG;
|
|
LazyWrapper.prototype[methodName] = function(iteratee) {
|
|
var result = this.clone();
|
|
result.__iteratees__.push({
|
|
"iteratee": baseIteratee(iteratee),
|
|
"type": type
|
|
});
|
|
result.__filtered__ = result.__filtered__ || isFilter;
|
|
return result;
|
|
};
|
|
});
|
|
arrayEach(["head", "last"], function(methodName, index) {
|
|
var takeName = "take" + (index ? "Right" : "");
|
|
LazyWrapper.prototype[methodName] = function() {
|
|
return this[takeName](1).value()[0];
|
|
};
|
|
});
|
|
arrayEach(["initial", "tail"], function(methodName, index) {
|
|
var dropName = "drop" + (index ? "" : "Right");
|
|
LazyWrapper.prototype[methodName] = function() {
|
|
return this.__filtered__ ? new LazyWrapper(this) : this[dropName](1);
|
|
};
|
|
});
|
|
LazyWrapper.prototype.compact = function() {
|
|
return this.filter(identity);
|
|
};
|
|
LazyWrapper.prototype.find = function(predicate) {
|
|
return this.filter(predicate).head();
|
|
};
|
|
LazyWrapper.prototype.findLast = function(predicate) {
|
|
return this.reverse().find(predicate);
|
|
};
|
|
LazyWrapper.prototype.invokeMap = baseRest(function(path, args) {
|
|
if (typeof path == "function") {
|
|
return new LazyWrapper(this);
|
|
}
|
|
return this.map(function(value) {
|
|
return baseInvoke(value, path, args);
|
|
});
|
|
});
|
|
LazyWrapper.prototype.reject = function(predicate) {
|
|
return this.filter(negate(baseIteratee(predicate)));
|
|
};
|
|
LazyWrapper.prototype.slice = function(start, end) {
|
|
start = toInteger(start);
|
|
var result = this;
|
|
if (result.__filtered__ && (start > 0 || end < 0)) {
|
|
return new LazyWrapper(result);
|
|
}
|
|
if (start < 0) {
|
|
result = result.takeRight(-start);
|
|
} else if (start) {
|
|
result = result.drop(start);
|
|
}
|
|
if (end !== void 0) {
|
|
end = toInteger(end);
|
|
result = end < 0 ? result.dropRight(-end) : result.take(end - start);
|
|
}
|
|
return result;
|
|
};
|
|
LazyWrapper.prototype.takeRightWhile = function(predicate) {
|
|
return this.reverse().takeWhile(predicate).reverse();
|
|
};
|
|
LazyWrapper.prototype.toArray = function() {
|
|
return this.take(MAX_ARRAY_LENGTH);
|
|
};
|
|
baseForOwn(LazyWrapper.prototype, function(func2, methodName) {
|
|
var checkIteratee = /^(?:filter|find|map|reject)|While$/.test(methodName), isTaker = /^(?:head|last)$/.test(methodName), lodashFunc = lodash[isTaker ? "take" + (methodName == "last" ? "Right" : "") : methodName], retUnwrapped = isTaker || /^find/.test(methodName);
|
|
if (!lodashFunc) {
|
|
return;
|
|
}
|
|
lodash.prototype[methodName] = function() {
|
|
var value = this.__wrapped__, args = isTaker ? [1] : arguments, isLazy = value instanceof LazyWrapper, iteratee = args[0], useLazy = isLazy || isArray(value);
|
|
var interceptor = function(value2) {
|
|
var result2 = lodashFunc.apply(lodash, arrayPush([value2], args));
|
|
return isTaker && chainAll ? result2[0] : result2;
|
|
};
|
|
if (useLazy && checkIteratee && typeof iteratee == "function" && iteratee.length != 1) {
|
|
isLazy = useLazy = false;
|
|
}
|
|
var chainAll = this.__chain__, isHybrid = !!this.__actions__.length, isUnwrapped = retUnwrapped && !chainAll, onlyLazy = isLazy && !isHybrid;
|
|
if (!retUnwrapped && useLazy) {
|
|
value = onlyLazy ? value : new LazyWrapper(this);
|
|
var result = func2.apply(value, args);
|
|
result.__actions__.push({ "func": thru, "args": [interceptor], "thisArg": void 0 });
|
|
return new LodashWrapper(result, chainAll);
|
|
}
|
|
if (isUnwrapped && onlyLazy) {
|
|
return func2.apply(this, args);
|
|
}
|
|
result = this.thru(interceptor);
|
|
return isUnwrapped ? isTaker ? result.value()[0] : result.value() : result;
|
|
};
|
|
});
|
|
arrayEach(["pop", "push", "shift", "sort", "splice", "unshift"], function(methodName) {
|
|
var func2 = arrayProto[methodName], chainName = /^(?:push|sort|unshift)$/.test(methodName) ? "tap" : "thru", retUnwrapped = /^(?:pop|shift)$/.test(methodName);
|
|
lodash.prototype[methodName] = function() {
|
|
var args = arguments;
|
|
if (retUnwrapped && !this.__chain__) {
|
|
var value = this.value();
|
|
return func2.apply(isArray(value) ? value : [], args);
|
|
}
|
|
return this[chainName](function(value2) {
|
|
return func2.apply(isArray(value2) ? value2 : [], args);
|
|
});
|
|
};
|
|
});
|
|
baseForOwn(LazyWrapper.prototype, function(func2, methodName) {
|
|
var lodashFunc = lodash[methodName];
|
|
if (lodashFunc) {
|
|
var key = lodashFunc.name + "";
|
|
if (!hasOwnProperty.call(realNames, key)) {
|
|
realNames[key] = [];
|
|
}
|
|
realNames[key].push({ "name": methodName, "func": lodashFunc });
|
|
}
|
|
});
|
|
realNames[createHybrid(void 0, WRAP_BIND_KEY_FLAG).name] = [{
|
|
"name": "wrapper",
|
|
"func": void 0
|
|
}];
|
|
LazyWrapper.prototype.clone = lazyClone;
|
|
LazyWrapper.prototype.reverse = lazyReverse;
|
|
LazyWrapper.prototype.value = lazyValue;
|
|
lodash.prototype.at = seq.at;
|
|
lodash.prototype.chain = seq.wrapperChain;
|
|
lodash.prototype.commit = seq.commit;
|
|
lodash.prototype.next = seq.next;
|
|
lodash.prototype.plant = seq.plant;
|
|
lodash.prototype.reverse = seq.reverse;
|
|
lodash.prototype.toJSON = lodash.prototype.valueOf = lodash.prototype.value = seq.value;
|
|
lodash.prototype.first = lodash.prototype.head;
|
|
if (symIterator) {
|
|
lodash.prototype[symIterator] = seq.toIterator;
|
|
}
|
|
/**
|
|
* @license
|
|
* Lodash (Custom Build) <https://lodash.com/>
|
|
* Build: `lodash modularize exports="es" -o ./`
|
|
* Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
|
|
* Released under MIT license <https://lodash.com/license>
|
|
* Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
|
|
* Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
|
|
*/
|
|
|
|
const isUndefined = (val) => val === void 0;
|
|
const isBoolean = (val) => typeof val === "boolean";
|
|
const isNumber = (val) => typeof val === "number";
|
|
const isEmpty = (val) => !val && val !== 0 || isArray$1(val) && val.length === 0 || isObject$1(val) && !Object.keys(val).length;
|
|
const isElement$1 = (e) => {
|
|
if (typeof Element === "undefined")
|
|
return false;
|
|
return e instanceof Element;
|
|
};
|
|
const isPropAbsent = (prop) => {
|
|
return isNil(prop);
|
|
};
|
|
const isStringNumber = (val) => {
|
|
if (!isString$1(val)) {
|
|
return false;
|
|
}
|
|
return !Number.isNaN(Number(val));
|
|
};
|
|
const isWindow$1 = (val) => {
|
|
return val === window;
|
|
};
|
|
|
|
const rAF = (fn) => isClient ? window.requestAnimationFrame(fn) : setTimeout(fn, 16);
|
|
const cAF = (handle) => isClient ? window.cancelAnimationFrame(handle) : clearTimeout(handle);
|
|
|
|
const escapeStringRegexp = (string = "") => string.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&").replace(/-/g, "\\x2d");
|
|
const capitalize = (str) => capitalize$2(str);
|
|
|
|
const keysOf = (arr) => Object.keys(arr);
|
|
const entriesOf = (arr) => Object.entries(arr);
|
|
const getProp = (obj, path, defaultValue) => {
|
|
return {
|
|
get value() {
|
|
return get(obj, path, defaultValue);
|
|
},
|
|
set value(val) {
|
|
set(obj, path, val);
|
|
}
|
|
};
|
|
};
|
|
|
|
class ElementPlusError extends Error {
|
|
constructor(m) {
|
|
super(m);
|
|
this.name = "ElementPlusError";
|
|
}
|
|
}
|
|
function throwError(scope, m) {
|
|
throw new ElementPlusError(`[${scope}] ${m}`);
|
|
}
|
|
function debugWarn(scope, message) {
|
|
}
|
|
|
|
const classNameToArray = (cls = "") => cls.split(" ").filter((item) => !!item.trim());
|
|
const hasClass = (el, cls) => {
|
|
if (!el || !cls)
|
|
return false;
|
|
if (cls.includes(" "))
|
|
throw new Error("className should not contain space.");
|
|
return el.classList.contains(cls);
|
|
};
|
|
const addClass = (el, cls) => {
|
|
if (!el || !cls.trim())
|
|
return;
|
|
el.classList.add(...classNameToArray(cls));
|
|
};
|
|
const removeClass = (el, cls) => {
|
|
if (!el || !cls.trim())
|
|
return;
|
|
el.classList.remove(...classNameToArray(cls));
|
|
};
|
|
const getStyle = (element, styleName) => {
|
|
var _a;
|
|
if (!isClient || !element || !styleName)
|
|
return "";
|
|
let key = camelize(styleName);
|
|
if (key === "float")
|
|
key = "cssFloat";
|
|
try {
|
|
const style = element.style[key];
|
|
if (style)
|
|
return style;
|
|
const computed = (_a = document.defaultView) == null ? void 0 : _a.getComputedStyle(element, "");
|
|
return computed ? computed[key] : "";
|
|
} catch (e) {
|
|
return element.style[key];
|
|
}
|
|
};
|
|
function addUnit(value, defaultUnit = "px") {
|
|
if (!value)
|
|
return "";
|
|
if (isNumber(value) || isStringNumber(value)) {
|
|
return `${value}${defaultUnit}`;
|
|
} else if (isString$1(value)) {
|
|
return value;
|
|
}
|
|
}
|
|
|
|
const isScroll = (el, isVertical) => {
|
|
if (!isClient)
|
|
return false;
|
|
const key = {
|
|
undefined: "overflow",
|
|
true: "overflow-y",
|
|
false: "overflow-x"
|
|
}[String(isVertical)];
|
|
const overflow = getStyle(el, key);
|
|
return ["scroll", "auto", "overlay"].some((s) => overflow.includes(s));
|
|
};
|
|
const getScrollContainer = (el, isVertical) => {
|
|
if (!isClient)
|
|
return;
|
|
let parent = el;
|
|
while (parent) {
|
|
if ([window, document, document.documentElement].includes(parent))
|
|
return window;
|
|
if (isScroll(parent, isVertical))
|
|
return parent;
|
|
parent = parent.parentNode;
|
|
}
|
|
return parent;
|
|
};
|
|
let scrollBarWidth;
|
|
const getScrollBarWidth = (namespace) => {
|
|
var _a;
|
|
if (!isClient)
|
|
return 0;
|
|
if (scrollBarWidth !== void 0)
|
|
return scrollBarWidth;
|
|
const outer = document.createElement("div");
|
|
outer.className = `${namespace}-scrollbar__wrap`;
|
|
outer.style.visibility = "hidden";
|
|
outer.style.width = "100px";
|
|
outer.style.position = "absolute";
|
|
outer.style.top = "-9999px";
|
|
document.body.appendChild(outer);
|
|
const widthNoScroll = outer.offsetWidth;
|
|
outer.style.overflow = "scroll";
|
|
const inner = document.createElement("div");
|
|
inner.style.width = "100%";
|
|
outer.appendChild(inner);
|
|
const widthWithScroll = inner.offsetWidth;
|
|
(_a = outer.parentNode) == null ? void 0 : _a.removeChild(outer);
|
|
scrollBarWidth = widthNoScroll - widthWithScroll;
|
|
return scrollBarWidth;
|
|
};
|
|
function scrollIntoView(container, selected) {
|
|
if (!isClient)
|
|
return;
|
|
if (!selected) {
|
|
container.scrollTop = 0;
|
|
return;
|
|
}
|
|
const offsetParents = [];
|
|
let pointer = selected.offsetParent;
|
|
while (pointer !== null && container !== pointer && container.contains(pointer)) {
|
|
offsetParents.push(pointer);
|
|
pointer = pointer.offsetParent;
|
|
}
|
|
const top = selected.offsetTop + offsetParents.reduce((prev, curr) => prev + curr.offsetTop, 0);
|
|
const bottom = top + selected.offsetHeight;
|
|
const viewRectTop = container.scrollTop;
|
|
const viewRectBottom = viewRectTop + container.clientHeight;
|
|
if (top < viewRectTop) {
|
|
container.scrollTop = top;
|
|
} else if (bottom > viewRectBottom) {
|
|
container.scrollTop = bottom - container.clientHeight;
|
|
}
|
|
}
|
|
function animateScrollTo(container, from, to, duration, callback) {
|
|
const startTime = Date.now();
|
|
let handle;
|
|
const scroll = () => {
|
|
const timestamp = Date.now();
|
|
const time = timestamp - startTime;
|
|
const nextScrollTop = easeInOutCubic(time > duration ? duration : time, from, to, duration);
|
|
if (isWindow$1(container)) {
|
|
container.scrollTo(window.pageXOffset, nextScrollTop);
|
|
} else {
|
|
container.scrollTop = nextScrollTop;
|
|
}
|
|
if (time < duration) {
|
|
handle = rAF(scroll);
|
|
} else if (typeof callback === "function") {
|
|
callback();
|
|
}
|
|
};
|
|
scroll();
|
|
return () => {
|
|
handle && cAF(handle);
|
|
};
|
|
}
|
|
const getScrollElement = (target, container) => {
|
|
if (isWindow$1(container)) {
|
|
return target.ownerDocument.documentElement;
|
|
}
|
|
return container;
|
|
};
|
|
const getScrollTop = (container) => {
|
|
if (isWindow$1(container)) {
|
|
return window.scrollY;
|
|
}
|
|
return container.scrollTop;
|
|
};
|
|
|
|
const getElement = (target) => {
|
|
if (!isClient || target === "")
|
|
return null;
|
|
if (isString$1(target)) {
|
|
try {
|
|
return document.querySelector(target);
|
|
} catch (e) {
|
|
return null;
|
|
}
|
|
}
|
|
return target;
|
|
};
|
|
|
|
let target = !isClient ? void 0 : document.body;
|
|
function createGlobalNode(id) {
|
|
const el = document.createElement("div");
|
|
if (id !== void 0) {
|
|
el.setAttribute("id", id);
|
|
}
|
|
if (target) {
|
|
target.appendChild(el);
|
|
}
|
|
return el;
|
|
}
|
|
function removeGlobalNode(el) {
|
|
el.remove();
|
|
}
|
|
|
|
var arrow_down_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "ArrowDown",
|
|
__name: "arrow-down",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var arrow_down_default = arrow_down_vue_vue_type_script_setup_true_lang_default;
|
|
var arrow_left_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "ArrowLeft",
|
|
__name: "arrow-left",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var arrow_left_default = arrow_left_vue_vue_type_script_setup_true_lang_default;
|
|
var arrow_right_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "ArrowRight",
|
|
__name: "arrow-right",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var arrow_right_default = arrow_right_vue_vue_type_script_setup_true_lang_default;
|
|
var arrow_up_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "ArrowUp",
|
|
__name: "arrow-up",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "m488.832 344.32-339.84 356.672a32 32 0 0 0 0 44.16l.384.384a29.44 29.44 0 0 0 42.688 0l320-335.872 319.872 335.872a29.44 29.44 0 0 0 42.688 0l.384-.384a32 32 0 0 0 0-44.16L535.168 344.32a32 32 0 0 0-46.336 0"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var arrow_up_default = arrow_up_vue_vue_type_script_setup_true_lang_default;
|
|
var back_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "Back",
|
|
__name: "back",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M224 480h640a32 32 0 1 1 0 64H224a32 32 0 0 1 0-64"
|
|
}),
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "m237.248 512 265.408 265.344a32 32 0 0 1-45.312 45.312l-288-288a32 32 0 0 1 0-45.312l288-288a32 32 0 1 1 45.312 45.312z"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var back_default = back_vue_vue_type_script_setup_true_lang_default;
|
|
var calendar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "Calendar",
|
|
__name: "calendar",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M128 384v512h768V192H768v32a32 32 0 1 1-64 0v-32H320v32a32 32 0 0 1-64 0v-32H128v128h768v64zm192-256h384V96a32 32 0 1 1 64 0v32h160a32 32 0 0 1 32 32v768a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h160V96a32 32 0 0 1 64 0zm-32 384h64a32 32 0 0 1 0 64h-64a32 32 0 0 1 0-64m0 192h64a32 32 0 1 1 0 64h-64a32 32 0 1 1 0-64m192-192h64a32 32 0 0 1 0 64h-64a32 32 0 0 1 0-64m0 192h64a32 32 0 1 1 0 64h-64a32 32 0 1 1 0-64m192-192h64a32 32 0 1 1 0 64h-64a32 32 0 1 1 0-64m0 192h64a32 32 0 1 1 0 64h-64a32 32 0 1 1 0-64"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var calendar_default = calendar_vue_vue_type_script_setup_true_lang_default;
|
|
var caret_right_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "CaretRight",
|
|
__name: "caret-right",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M384 192v640l384-320.064z"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var caret_right_default = caret_right_vue_vue_type_script_setup_true_lang_default;
|
|
var caret_top_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "CaretTop",
|
|
__name: "caret-top",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M512 320 192 704h639.936z"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var caret_top_default = caret_top_vue_vue_type_script_setup_true_lang_default;
|
|
var check_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "Check",
|
|
__name: "check",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M406.656 706.944 195.84 496.256a32 32 0 1 0-45.248 45.248l256 256 512-512a32 32 0 0 0-45.248-45.248L406.592 706.944z"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var check_default = check_vue_vue_type_script_setup_true_lang_default;
|
|
var circle_check_filled_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "CircleCheckFilled",
|
|
__name: "circle-check-filled",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m-55.808 536.384-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.272 38.272 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336z"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var circle_check_filled_default = circle_check_filled_vue_vue_type_script_setup_true_lang_default;
|
|
var circle_check_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "CircleCheck",
|
|
__name: "circle-check",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768m0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896"
|
|
}),
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M745.344 361.344a32 32 0 0 1 45.312 45.312l-288 288a32 32 0 0 1-45.312 0l-160-160a32 32 0 1 1 45.312-45.312L480 626.752l265.344-265.408z"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var circle_check_default = circle_check_vue_vue_type_script_setup_true_lang_default;
|
|
var circle_close_filled_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "CircleCloseFilled",
|
|
__name: "circle-close-filled",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m0 393.664L407.936 353.6a38.4 38.4 0 1 0-54.336 54.336L457.664 512 353.6 616.064a38.4 38.4 0 1 0 54.336 54.336L512 566.336 616.064 670.4a38.4 38.4 0 1 0 54.336-54.336L566.336 512 670.4 407.936a38.4 38.4 0 1 0-54.336-54.336z"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var circle_close_filled_default = circle_close_filled_vue_vue_type_script_setup_true_lang_default;
|
|
var circle_close_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "CircleClose",
|
|
__name: "circle-close",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "m466.752 512-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248z"
|
|
}),
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768m0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var circle_close_default = circle_close_vue_vue_type_script_setup_true_lang_default;
|
|
var clock_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "Clock",
|
|
__name: "clock",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768m0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896"
|
|
}),
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M480 256a32 32 0 0 1 32 32v256a32 32 0 0 1-64 0V288a32 32 0 0 1 32-32"
|
|
}),
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M480 512h256q32 0 32 32t-32 32H480q-32 0-32-32t32-32"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var clock_default = clock_vue_vue_type_script_setup_true_lang_default;
|
|
var close_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "Close",
|
|
__name: "close",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var close_default = close_vue_vue_type_script_setup_true_lang_default;
|
|
var d_arrow_left_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "DArrowLeft",
|
|
__name: "d-arrow-left",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M529.408 149.376a29.12 29.12 0 0 1 41.728 0 30.592 30.592 0 0 1 0 42.688L259.264 511.936l311.872 319.936a30.592 30.592 0 0 1-.512 43.264 29.12 29.12 0 0 1-41.216-.512L197.76 534.272a32 32 0 0 1 0-44.672l331.648-340.224zm256 0a29.12 29.12 0 0 1 41.728 0 30.592 30.592 0 0 1 0 42.688L515.264 511.936l311.872 319.936a30.592 30.592 0 0 1-.512 43.264 29.12 29.12 0 0 1-41.216-.512L453.76 534.272a32 32 0 0 1 0-44.672l331.648-340.224z"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var d_arrow_left_default = d_arrow_left_vue_vue_type_script_setup_true_lang_default;
|
|
var d_arrow_right_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "DArrowRight",
|
|
__name: "d-arrow-right",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M452.864 149.312a29.12 29.12 0 0 1 41.728.064L826.24 489.664a32 32 0 0 1 0 44.672L494.592 874.624a29.12 29.12 0 0 1-41.728 0 30.592 30.592 0 0 1 0-42.752L764.736 512 452.864 192a30.592 30.592 0 0 1 0-42.688m-256 0a29.12 29.12 0 0 1 41.728.064L570.24 489.664a32 32 0 0 1 0 44.672L238.592 874.624a29.12 29.12 0 0 1-41.728 0 30.592 30.592 0 0 1 0-42.752L508.736 512 196.864 192a30.592 30.592 0 0 1 0-42.688z"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var d_arrow_right_default = d_arrow_right_vue_vue_type_script_setup_true_lang_default;
|
|
var delete_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "Delete",
|
|
__name: "delete",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M160 256H96a32 32 0 0 1 0-64h256V95.936a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V192h256a32 32 0 1 1 0 64h-64v672a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32zm448-64v-64H416v64zM224 896h576V256H224zm192-128a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32m192 0a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var delete_default = delete_vue_vue_type_script_setup_true_lang_default;
|
|
var document_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "Document",
|
|
__name: "document",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M832 384H576V128H192v768h640zm-26.496-64L640 154.496V320zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32m160 448h384v64H320zm0-192h160v64H320zm0 384h384v64H320z"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var document_default = document_vue_vue_type_script_setup_true_lang_default;
|
|
var full_screen_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "FullScreen",
|
|
__name: "full-screen",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "m160 96.064 192 .192a32 32 0 0 1 0 64l-192-.192V352a32 32 0 0 1-64 0V96h64zm0 831.872V928H96V672a32 32 0 1 1 64 0v191.936l192-.192a32 32 0 1 1 0 64zM864 96.064V96h64v256a32 32 0 1 1-64 0V160.064l-192 .192a32 32 0 1 1 0-64l192-.192zm0 831.872-192-.192a32 32 0 0 1 0-64l192 .192V672a32 32 0 1 1 64 0v256h-64z"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var full_screen_default = full_screen_vue_vue_type_script_setup_true_lang_default;
|
|
var hide_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "Hide",
|
|
__name: "hide",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M876.8 156.8c0-9.6-3.2-16-9.6-22.4-6.4-6.4-12.8-9.6-22.4-9.6-9.6 0-16 3.2-22.4 9.6L736 220.8c-64-32-137.6-51.2-224-60.8-160 16-288 73.6-377.6 176C44.8 438.4 0 496 0 512s48 73.6 134.4 176c22.4 25.6 44.8 48 73.6 67.2l-86.4 89.6c-6.4 6.4-9.6 12.8-9.6 22.4 0 9.6 3.2 16 9.6 22.4 6.4 6.4 12.8 9.6 22.4 9.6 9.6 0 16-3.2 22.4-9.6l704-710.4c3.2-6.4 6.4-12.8 6.4-22.4Zm-646.4 528c-76.8-70.4-128-128-153.6-172.8 28.8-48 80-105.6 153.6-172.8C304 272 400 230.4 512 224c64 3.2 124.8 19.2 176 44.8l-54.4 54.4C598.4 300.8 560 288 512 288c-64 0-115.2 22.4-160 64s-64 96-64 160c0 48 12.8 89.6 35.2 124.8L256 707.2c-9.6-6.4-19.2-16-25.6-22.4Zm140.8-96c-12.8-22.4-19.2-48-19.2-76.8 0-44.8 16-83.2 48-112 32-28.8 67.2-48 112-48 28.8 0 54.4 6.4 73.6 19.2zM889.599 336c-12.8-16-28.8-28.8-41.6-41.6l-48 48c73.6 67.2 124.8 124.8 150.4 169.6-28.8 48-80 105.6-153.6 172.8-73.6 67.2-172.8 108.8-284.8 115.2-51.2-3.2-99.2-12.8-140.8-28.8l-48 48c57.6 22.4 118.4 38.4 188.8 44.8 160-16 288-73.6 377.6-176C979.199 585.6 1024 528 1024 512s-48.001-73.6-134.401-176Z"
|
|
}),
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M511.998 672c-12.8 0-25.6-3.2-38.4-6.4l-51.2 51.2c28.8 12.8 57.6 19.2 89.6 19.2 64 0 115.2-22.4 160-64 41.6-41.6 64-96 64-160 0-32-6.4-64-19.2-89.6l-51.2 51.2c3.2 12.8 6.4 25.6 6.4 38.4 0 44.8-16 83.2-48 112-32 28.8-67.2 48-112 48Z"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var hide_default = hide_vue_vue_type_script_setup_true_lang_default;
|
|
var info_filled_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "InfoFilled",
|
|
__name: "info-filled",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M512 64a448 448 0 1 1 0 896.064A448 448 0 0 1 512 64m67.2 275.072c33.28 0 60.288-23.104 60.288-57.344s-27.072-57.344-60.288-57.344c-33.28 0-60.16 23.104-60.16 57.344s26.88 57.344 60.16 57.344M590.912 699.2c0-6.848 2.368-24.64 1.024-34.752l-52.608 60.544c-10.88 11.456-24.512 19.392-30.912 17.28a12.992 12.992 0 0 1-8.256-14.72l87.68-276.992c7.168-35.136-12.544-67.2-54.336-71.296-44.096 0-108.992 44.736-148.48 101.504 0 6.784-1.28 23.68.064 33.792l52.544-60.608c10.88-11.328 23.552-19.328 29.952-17.152a12.8 12.8 0 0 1 7.808 16.128L388.48 728.576c-10.048 32.256 8.96 63.872 55.04 71.04 67.84 0 107.904-43.648 147.456-100.416z"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var info_filled_default = info_filled_vue_vue_type_script_setup_true_lang_default;
|
|
var loading_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "Loading",
|
|
__name: "loading",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32m0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32m448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32m-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32M195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0m-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var loading_default = loading_vue_vue_type_script_setup_true_lang_default;
|
|
var minus_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "Minus",
|
|
__name: "minus",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M128 544h768a32 32 0 1 0 0-64H128a32 32 0 0 0 0 64"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var minus_default = minus_vue_vue_type_script_setup_true_lang_default;
|
|
var more_filled_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "MoreFilled",
|
|
__name: "more-filled",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M176 416a112 112 0 1 1 0 224 112 112 0 0 1 0-224m336 0a112 112 0 1 1 0 224 112 112 0 0 1 0-224m336 0a112 112 0 1 1 0 224 112 112 0 0 1 0-224"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var more_filled_default = more_filled_vue_vue_type_script_setup_true_lang_default;
|
|
var more_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "More",
|
|
__name: "more",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M176 416a112 112 0 1 0 0 224 112 112 0 0 0 0-224m0 64a48 48 0 1 1 0 96 48 48 0 0 1 0-96m336-64a112 112 0 1 1 0 224 112 112 0 0 1 0-224m0 64a48 48 0 1 0 0 96 48 48 0 0 0 0-96m336-64a112 112 0 1 1 0 224 112 112 0 0 1 0-224m0 64a48 48 0 1 0 0 96 48 48 0 0 0 0-96"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var more_default = more_vue_vue_type_script_setup_true_lang_default;
|
|
var picture_filled_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "PictureFilled",
|
|
__name: "picture-filled",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M96 896a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h832a32 32 0 0 1 32 32v704a32 32 0 0 1-32 32zm315.52-228.48-68.928-68.928a32 32 0 0 0-45.248 0L128 768.064h778.688l-242.112-290.56a32 32 0 0 0-49.216 0L458.752 665.408a32 32 0 0 1-47.232 2.112M256 384a96 96 0 1 0 192.064-.064A96 96 0 0 0 256 384"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var picture_filled_default = picture_filled_vue_vue_type_script_setup_true_lang_default;
|
|
var plus_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "Plus",
|
|
__name: "plus",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64z"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var plus_default = plus_vue_vue_type_script_setup_true_lang_default;
|
|
var question_filled_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "QuestionFilled",
|
|
__name: "question-filled",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m23.744 191.488c-52.096 0-92.928 14.784-123.2 44.352-30.976 29.568-45.76 70.4-45.76 122.496h80.256c0-29.568 5.632-52.8 17.6-68.992 13.376-19.712 35.2-28.864 66.176-28.864 23.936 0 42.944 6.336 56.32 19.712 12.672 13.376 19.712 31.68 19.712 54.912 0 17.6-6.336 34.496-19.008 49.984l-8.448 9.856c-45.76 40.832-73.216 70.4-82.368 89.408-9.856 19.008-14.08 42.24-14.08 68.992v9.856h80.96v-9.856c0-16.896 3.52-31.68 10.56-45.76 6.336-12.672 15.488-24.64 28.16-35.2 33.792-29.568 54.208-48.576 60.544-55.616 16.896-22.528 26.048-51.392 26.048-86.592 0-42.944-14.08-76.736-42.24-101.376-28.16-25.344-65.472-37.312-111.232-37.312zm-12.672 406.208a54.272 54.272 0 0 0-38.72 14.784 49.408 49.408 0 0 0-15.488 38.016c0 15.488 4.928 28.16 15.488 38.016A54.848 54.848 0 0 0 523.072 768c15.488 0 28.16-4.928 38.72-14.784a51.52 51.52 0 0 0 16.192-38.72 51.968 51.968 0 0 0-15.488-38.016 55.936 55.936 0 0 0-39.424-14.784z"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var question_filled_default = question_filled_vue_vue_type_script_setup_true_lang_default;
|
|
var refresh_left_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "RefreshLeft",
|
|
__name: "refresh-left",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M289.088 296.704h92.992a32 32 0 0 1 0 64H232.96a32 32 0 0 1-32-32V179.712a32 32 0 0 1 64 0v50.56a384 384 0 0 1 643.84 282.88 384 384 0 0 1-383.936 384 384 384 0 0 1-384-384h64a320 320 0 1 0 640 0 320 320 0 0 0-555.712-216.448z"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var refresh_left_default = refresh_left_vue_vue_type_script_setup_true_lang_default;
|
|
var refresh_right_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "RefreshRight",
|
|
__name: "refresh-right",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M784.512 230.272v-50.56a32 32 0 1 1 64 0v149.056a32 32 0 0 1-32 32H667.52a32 32 0 1 1 0-64h92.992A320 320 0 1 0 524.8 833.152a320 320 0 0 0 320-320h64a384 384 0 0 1-384 384 384 384 0 0 1-384-384 384 384 0 0 1 643.712-282.88z"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var refresh_right_default = refresh_right_vue_vue_type_script_setup_true_lang_default;
|
|
var scale_to_original_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "ScaleToOriginal",
|
|
__name: "scale-to-original",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M813.176 180.706a60.235 60.235 0 0 1 60.236 60.235v481.883a60.235 60.235 0 0 1-60.236 60.235H210.824a60.235 60.235 0 0 1-60.236-60.235V240.94a60.235 60.235 0 0 1 60.236-60.235h602.352zm0-60.235H210.824A120.47 120.47 0 0 0 90.353 240.94v481.883a120.47 120.47 0 0 0 120.47 120.47h602.353a120.47 120.47 0 0 0 120.471-120.47V240.94a120.47 120.47 0 0 0-120.47-120.47zm-120.47 180.705a30.118 30.118 0 0 0-30.118 30.118v301.177a30.118 30.118 0 0 0 60.236 0V331.294a30.118 30.118 0 0 0-30.118-30.118zm-361.412 0a30.118 30.118 0 0 0-30.118 30.118v301.177a30.118 30.118 0 1 0 60.236 0V331.294a30.118 30.118 0 0 0-30.118-30.118M512 361.412a30.118 30.118 0 0 0-30.118 30.117v30.118a30.118 30.118 0 0 0 60.236 0V391.53A30.118 30.118 0 0 0 512 361.412M512 512a30.118 30.118 0 0 0-30.118 30.118v30.117a30.118 30.118 0 0 0 60.236 0v-30.117A30.118 30.118 0 0 0 512 512"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var scale_to_original_default = scale_to_original_vue_vue_type_script_setup_true_lang_default;
|
|
var search_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "Search",
|
|
__name: "search",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var search_default = search_vue_vue_type_script_setup_true_lang_default;
|
|
var sort_down_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "SortDown",
|
|
__name: "sort-down",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M576 96v709.568L333.312 562.816A32 32 0 1 0 288 608l297.408 297.344A32 32 0 0 0 640 882.688V96a32 32 0 0 0-64 0"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var sort_down_default = sort_down_vue_vue_type_script_setup_true_lang_default;
|
|
var sort_up_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "SortUp",
|
|
__name: "sort-up",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M384 141.248V928a32 32 0 1 0 64 0V218.56l242.688 242.688A32 32 0 1 0 736 416L438.592 118.656A32 32 0 0 0 384 141.248"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var sort_up_default = sort_up_vue_vue_type_script_setup_true_lang_default;
|
|
var star_filled_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "StarFilled",
|
|
__name: "star-filled",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var star_filled_default = star_filled_vue_vue_type_script_setup_true_lang_default;
|
|
var star_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "Star",
|
|
__name: "star",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "m512 747.84 228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72zM313.6 924.48a70.4 70.4 0 0 1-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 0 1 128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 0 1 126.208 0l99.2 200.96 221.824 32.256a70.4 70.4 0 0 1 39.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 0 1-102.144 74.24L512 820.096l-198.4 104.32z"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var star_default = star_vue_vue_type_script_setup_true_lang_default;
|
|
var success_filled_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "SuccessFilled",
|
|
__name: "success-filled",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m-55.808 536.384-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.272 38.272 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336z"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var success_filled_default = success_filled_vue_vue_type_script_setup_true_lang_default;
|
|
var view_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "View",
|
|
__name: "view",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352m0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448m0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var view_default = view_vue_vue_type_script_setup_true_lang_default;
|
|
var warning_filled_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "WarningFilled",
|
|
__name: "warning-filled",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m0 192a58.432 58.432 0 0 0-58.24 63.744l23.36 256.384a35.072 35.072 0 0 0 69.76 0l23.296-256.384A58.432 58.432 0 0 0 512 256m0 512a51.2 51.2 0 1 0 0-102.4 51.2 51.2 0 0 0 0 102.4"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var warning_filled_default = warning_filled_vue_vue_type_script_setup_true_lang_default;
|
|
var zoom_in_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "ZoomIn",
|
|
__name: "zoom-in",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704m-32-384v-96a32 32 0 0 1 64 0v96h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64z"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var zoom_in_default = zoom_in_vue_vue_type_script_setup_true_lang_default;
|
|
var zoom_out_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
name: "ZoomOut",
|
|
__name: "zoom-out",
|
|
setup(__props) {
|
|
return (_ctx, _cache) => (openBlock(), createElementBlock("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 1024 1024"
|
|
}, [
|
|
createElementVNode("path", {
|
|
fill: "currentColor",
|
|
d: "m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704M352 448h256a32 32 0 0 1 0 64H352a32 32 0 0 1 0-64"
|
|
})
|
|
]));
|
|
}
|
|
});
|
|
var zoom_out_default = zoom_out_vue_vue_type_script_setup_true_lang_default;
|
|
/*! Element Plus Icons Vue v2.3.1 */
|
|
|
|
const epPropKey = "__epPropKey";
|
|
const definePropType = (val) => val;
|
|
const isEpProp = (val) => isObject$1(val) && !!val[epPropKey];
|
|
const buildProp = (prop, key) => {
|
|
if (!isObject$1(prop) || isEpProp(prop))
|
|
return prop;
|
|
const { values, required, default: defaultValue, type, validator } = prop;
|
|
const _validator = values || validator ? (val) => {
|
|
let valid = false;
|
|
let allowedValues = [];
|
|
if (values) {
|
|
allowedValues = Array.from(values);
|
|
if (hasOwn(prop, "default")) {
|
|
allowedValues.push(defaultValue);
|
|
}
|
|
valid || (valid = allowedValues.includes(val));
|
|
}
|
|
if (validator)
|
|
valid || (valid = validator(val));
|
|
if (!valid && allowedValues.length > 0) {
|
|
const allowValuesText = [...new Set(allowedValues)].map((value) => JSON.stringify(value)).join(", ");
|
|
warn(`Invalid prop: validation failed${key ? ` for prop "${key}"` : ""}. Expected one of [${allowValuesText}], got value ${JSON.stringify(val)}.`);
|
|
}
|
|
return valid;
|
|
} : void 0;
|
|
const epProp = {
|
|
type,
|
|
required: !!required,
|
|
validator: _validator,
|
|
[epPropKey]: true
|
|
};
|
|
if (hasOwn(prop, "default"))
|
|
epProp.default = defaultValue;
|
|
return epProp;
|
|
};
|
|
const buildProps = (props) => fromPairs(Object.entries(props).map(([key, option]) => [
|
|
key,
|
|
buildProp(option, key)
|
|
]));
|
|
|
|
const iconPropType = definePropType([
|
|
String,
|
|
Object,
|
|
Function
|
|
]);
|
|
const CloseComponents = {
|
|
Close: close_default
|
|
};
|
|
const TypeComponents = {
|
|
Close: close_default,
|
|
SuccessFilled: success_filled_default,
|
|
InfoFilled: info_filled_default,
|
|
WarningFilled: warning_filled_default,
|
|
CircleCloseFilled: circle_close_filled_default
|
|
};
|
|
const TypeComponentsMap = {
|
|
success: success_filled_default,
|
|
warning: warning_filled_default,
|
|
error: circle_close_filled_default,
|
|
info: info_filled_default
|
|
};
|
|
const ValidateComponentsMap = {
|
|
validating: loading_default,
|
|
success: circle_check_default,
|
|
error: circle_close_default
|
|
};
|
|
|
|
const withInstall = (main, extra) => {
|
|
main.install = (app) => {
|
|
for (const comp of [main, ...Object.values(extra != null ? extra : {})]) {
|
|
app.component(comp.name, comp);
|
|
}
|
|
};
|
|
if (extra) {
|
|
for (const [key, comp] of Object.entries(extra)) {
|
|
main[key] = comp;
|
|
}
|
|
}
|
|
return main;
|
|
};
|
|
const withInstallFunction = (fn, name) => {
|
|
fn.install = (app) => {
|
|
fn._context = app._context;
|
|
app.config.globalProperties[name] = fn;
|
|
};
|
|
return fn;
|
|
};
|
|
const withInstallDirective = (directive, name) => {
|
|
directive.install = (app) => {
|
|
app.directive(name, directive);
|
|
};
|
|
return directive;
|
|
};
|
|
const withNoopInstall = (component) => {
|
|
component.install = NOOP;
|
|
return component;
|
|
};
|
|
|
|
const composeRefs = (...refs) => {
|
|
return (el) => {
|
|
refs.forEach((ref) => {
|
|
if (isFunction$1(ref)) {
|
|
ref(el);
|
|
} else {
|
|
ref.value = el;
|
|
}
|
|
});
|
|
};
|
|
};
|
|
|
|
const EVENT_CODE = {
|
|
tab: "Tab",
|
|
enter: "Enter",
|
|
space: "Space",
|
|
left: "ArrowLeft",
|
|
up: "ArrowUp",
|
|
right: "ArrowRight",
|
|
down: "ArrowDown",
|
|
esc: "Escape",
|
|
delete: "Delete",
|
|
backspace: "Backspace",
|
|
numpadEnter: "NumpadEnter",
|
|
pageUp: "PageUp",
|
|
pageDown: "PageDown",
|
|
home: "Home",
|
|
end: "End"
|
|
};
|
|
|
|
const datePickTypes = [
|
|
"year",
|
|
"years",
|
|
"month",
|
|
"months",
|
|
"date",
|
|
"dates",
|
|
"week",
|
|
"datetime",
|
|
"datetimerange",
|
|
"daterange",
|
|
"monthrange",
|
|
"yearrange"
|
|
];
|
|
const WEEK_DAYS = [
|
|
"sun",
|
|
"mon",
|
|
"tue",
|
|
"wed",
|
|
"thu",
|
|
"fri",
|
|
"sat"
|
|
];
|
|
|
|
const UPDATE_MODEL_EVENT = "update:modelValue";
|
|
const CHANGE_EVENT = "change";
|
|
const INPUT_EVENT = "input";
|
|
|
|
const INSTALLED_KEY = Symbol("INSTALLED_KEY");
|
|
|
|
const componentSizes = ["", "default", "small", "large"];
|
|
const componentSizeMap = {
|
|
large: 40,
|
|
default: 32,
|
|
small: 24
|
|
};
|
|
|
|
const isValidComponentSize = (val) => ["", ...componentSizes].includes(val);
|
|
|
|
var PatchFlags = /* @__PURE__ */ ((PatchFlags2) => {
|
|
PatchFlags2[PatchFlags2["TEXT"] = 1] = "TEXT";
|
|
PatchFlags2[PatchFlags2["CLASS"] = 2] = "CLASS";
|
|
PatchFlags2[PatchFlags2["STYLE"] = 4] = "STYLE";
|
|
PatchFlags2[PatchFlags2["PROPS"] = 8] = "PROPS";
|
|
PatchFlags2[PatchFlags2["FULL_PROPS"] = 16] = "FULL_PROPS";
|
|
PatchFlags2[PatchFlags2["HYDRATE_EVENTS"] = 32] = "HYDRATE_EVENTS";
|
|
PatchFlags2[PatchFlags2["STABLE_FRAGMENT"] = 64] = "STABLE_FRAGMENT";
|
|
PatchFlags2[PatchFlags2["KEYED_FRAGMENT"] = 128] = "KEYED_FRAGMENT";
|
|
PatchFlags2[PatchFlags2["UNKEYED_FRAGMENT"] = 256] = "UNKEYED_FRAGMENT";
|
|
PatchFlags2[PatchFlags2["NEED_PATCH"] = 512] = "NEED_PATCH";
|
|
PatchFlags2[PatchFlags2["DYNAMIC_SLOTS"] = 1024] = "DYNAMIC_SLOTS";
|
|
PatchFlags2[PatchFlags2["HOISTED"] = -1] = "HOISTED";
|
|
PatchFlags2[PatchFlags2["BAIL"] = -2] = "BAIL";
|
|
return PatchFlags2;
|
|
})(PatchFlags || {});
|
|
function isFragment(node) {
|
|
return isVNode(node) && node.type === Fragment;
|
|
}
|
|
function isComment(node) {
|
|
return isVNode(node) && node.type === Comment;
|
|
}
|
|
function isValidElementNode(node) {
|
|
return isVNode(node) && !isFragment(node) && !isComment(node);
|
|
}
|
|
const getNormalizedProps = (node) => {
|
|
if (!isVNode(node)) {
|
|
return {};
|
|
}
|
|
const raw = node.props || {};
|
|
const type = (isVNode(node.type) ? node.type.props : void 0) || {};
|
|
const props = {};
|
|
Object.keys(type).forEach((key) => {
|
|
if (hasOwn(type[key], "default")) {
|
|
props[key] = type[key].default;
|
|
}
|
|
});
|
|
Object.keys(raw).forEach((key) => {
|
|
props[camelize(key)] = raw[key];
|
|
});
|
|
return props;
|
|
};
|
|
const ensureOnlyChild = (children) => {
|
|
if (!isArray$1(children) || children.length > 1) {
|
|
throw new Error("expect to receive a single Vue element child");
|
|
}
|
|
return children[0];
|
|
};
|
|
const flattedChildren = (children) => {
|
|
const vNodes = isArray$1(children) ? children : [children];
|
|
const result = [];
|
|
vNodes.forEach((child) => {
|
|
var _a;
|
|
if (isArray$1(child)) {
|
|
result.push(...flattedChildren(child));
|
|
} else if (isVNode(child) && isArray$1(child.children)) {
|
|
result.push(...flattedChildren(child.children));
|
|
} else {
|
|
result.push(child);
|
|
if (isVNode(child) && ((_a = child.component) == null ? void 0 : _a.subTree)) {
|
|
result.push(...flattedChildren(child.component.subTree));
|
|
}
|
|
}
|
|
});
|
|
return result;
|
|
};
|
|
|
|
const unique = (arr) => [...new Set(arr)];
|
|
const castArray = (arr) => {
|
|
if (!arr && arr !== 0)
|
|
return [];
|
|
return Array.isArray(arr) ? arr : [arr];
|
|
};
|
|
|
|
const isKorean = (text) => /([\uAC00-\uD7AF\u3130-\u318F])+/gi.test(text);
|
|
|
|
const mutable = (val) => val;
|
|
|
|
function throttleByRaf(cb) {
|
|
let timer = 0;
|
|
const throttle = (...args) => {
|
|
if (timer) {
|
|
cAF(timer);
|
|
}
|
|
timer = rAF(() => {
|
|
cb(...args);
|
|
timer = 0;
|
|
});
|
|
};
|
|
throttle.cancel = () => {
|
|
cAF(timer);
|
|
timer = 0;
|
|
};
|
|
return throttle;
|
|
}
|
|
|
|
const DEFAULT_EXCLUDE_KEYS = ["class", "style"];
|
|
const LISTENER_PREFIX = /^on[A-Z]/;
|
|
const useAttrs = (params = {}) => {
|
|
const { excludeListeners = false, excludeKeys } = params;
|
|
const allExcludeKeys = computed(() => {
|
|
return ((excludeKeys == null ? void 0 : excludeKeys.value) || []).concat(DEFAULT_EXCLUDE_KEYS);
|
|
});
|
|
const instance = getCurrentInstance();
|
|
if (!instance) {
|
|
return computed(() => ({}));
|
|
}
|
|
return computed(() => {
|
|
var _a;
|
|
return fromPairs(Object.entries((_a = instance.proxy) == null ? void 0 : _a.$attrs).filter(([key]) => !allExcludeKeys.value.includes(key) && !(excludeListeners && LISTENER_PREFIX.test(key))));
|
|
});
|
|
};
|
|
|
|
const useDeprecated = ({ from, replacement, scope, version, ref, type = "API" }, condition) => {
|
|
watch(() => unref(condition), (val) => {
|
|
}, {
|
|
immediate: true
|
|
});
|
|
};
|
|
|
|
const useDraggable = (targetRef, dragRef, draggable, overflow) => {
|
|
let transform = {
|
|
offsetX: 0,
|
|
offsetY: 0
|
|
};
|
|
const onMousedown = (e) => {
|
|
const downX = e.clientX;
|
|
const downY = e.clientY;
|
|
const { offsetX, offsetY } = transform;
|
|
const targetRect = targetRef.value.getBoundingClientRect();
|
|
const targetLeft = targetRect.left;
|
|
const targetTop = targetRect.top;
|
|
const targetWidth = targetRect.width;
|
|
const targetHeight = targetRect.height;
|
|
const clientWidth = document.documentElement.clientWidth;
|
|
const clientHeight = document.documentElement.clientHeight;
|
|
const minLeft = -targetLeft + offsetX;
|
|
const minTop = -targetTop + offsetY;
|
|
const maxLeft = clientWidth - targetLeft - targetWidth + offsetX;
|
|
const maxTop = clientHeight - targetTop - targetHeight + offsetY;
|
|
const onMousemove = (e2) => {
|
|
let moveX = offsetX + e2.clientX - downX;
|
|
let moveY = offsetY + e2.clientY - downY;
|
|
if (!(overflow == null ? void 0 : overflow.value)) {
|
|
moveX = Math.min(Math.max(moveX, minLeft), maxLeft);
|
|
moveY = Math.min(Math.max(moveY, minTop), maxTop);
|
|
}
|
|
transform = {
|
|
offsetX: moveX,
|
|
offsetY: moveY
|
|
};
|
|
if (targetRef.value) {
|
|
targetRef.value.style.transform = `translate(${addUnit(moveX)}, ${addUnit(moveY)})`;
|
|
}
|
|
};
|
|
const onMouseup = () => {
|
|
document.removeEventListener("mousemove", onMousemove);
|
|
document.removeEventListener("mouseup", onMouseup);
|
|
};
|
|
document.addEventListener("mousemove", onMousemove);
|
|
document.addEventListener("mouseup", onMouseup);
|
|
};
|
|
const onDraggable = () => {
|
|
if (dragRef.value && targetRef.value) {
|
|
dragRef.value.addEventListener("mousedown", onMousedown);
|
|
}
|
|
};
|
|
const offDraggable = () => {
|
|
if (dragRef.value && targetRef.value) {
|
|
dragRef.value.removeEventListener("mousedown", onMousedown);
|
|
}
|
|
};
|
|
const resetPosition = () => {
|
|
transform = {
|
|
offsetX: 0,
|
|
offsetY: 0
|
|
};
|
|
if (targetRef.value) {
|
|
targetRef.value.style.transform = "none";
|
|
}
|
|
};
|
|
onMounted(() => {
|
|
watchEffect(() => {
|
|
if (draggable.value) {
|
|
onDraggable();
|
|
} else {
|
|
offDraggable();
|
|
}
|
|
});
|
|
});
|
|
onBeforeUnmount(() => {
|
|
offDraggable();
|
|
});
|
|
return {
|
|
resetPosition
|
|
};
|
|
};
|
|
|
|
const useFocus = (el) => {
|
|
return {
|
|
focus: () => {
|
|
var _a, _b;
|
|
(_b = (_a = el.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
|
|
}
|
|
};
|
|
};
|
|
|
|
var English = {
|
|
name: "en",
|
|
el: {
|
|
breadcrumb: {
|
|
label: "Breadcrumb"
|
|
},
|
|
colorpicker: {
|
|
confirm: "OK",
|
|
clear: "Clear",
|
|
defaultLabel: "color picker",
|
|
description: "current color is {color}. press enter to select a new color.",
|
|
alphaLabel: "pick alpha value"
|
|
},
|
|
datepicker: {
|
|
now: "Now",
|
|
today: "Today",
|
|
cancel: "Cancel",
|
|
clear: "Clear",
|
|
confirm: "OK",
|
|
dateTablePrompt: "Use the arrow keys and enter to select the day of the month",
|
|
monthTablePrompt: "Use the arrow keys and enter to select the month",
|
|
yearTablePrompt: "Use the arrow keys and enter to select the year",
|
|
selectedDate: "Selected date",
|
|
selectDate: "Select date",
|
|
selectTime: "Select time",
|
|
startDate: "Start Date",
|
|
startTime: "Start Time",
|
|
endDate: "End Date",
|
|
endTime: "End Time",
|
|
prevYear: "Previous Year",
|
|
nextYear: "Next Year",
|
|
prevMonth: "Previous Month",
|
|
nextMonth: "Next Month",
|
|
year: "",
|
|
month1: "January",
|
|
month2: "February",
|
|
month3: "March",
|
|
month4: "April",
|
|
month5: "May",
|
|
month6: "June",
|
|
month7: "July",
|
|
month8: "August",
|
|
month9: "September",
|
|
month10: "October",
|
|
month11: "November",
|
|
month12: "December",
|
|
week: "week",
|
|
weeks: {
|
|
sun: "Sun",
|
|
mon: "Mon",
|
|
tue: "Tue",
|
|
wed: "Wed",
|
|
thu: "Thu",
|
|
fri: "Fri",
|
|
sat: "Sat"
|
|
},
|
|
weeksFull: {
|
|
sun: "Sunday",
|
|
mon: "Monday",
|
|
tue: "Tuesday",
|
|
wed: "Wednesday",
|
|
thu: "Thursday",
|
|
fri: "Friday",
|
|
sat: "Saturday"
|
|
},
|
|
months: {
|
|
jan: "Jan",
|
|
feb: "Feb",
|
|
mar: "Mar",
|
|
apr: "Apr",
|
|
may: "May",
|
|
jun: "Jun",
|
|
jul: "Jul",
|
|
aug: "Aug",
|
|
sep: "Sep",
|
|
oct: "Oct",
|
|
nov: "Nov",
|
|
dec: "Dec"
|
|
}
|
|
},
|
|
inputNumber: {
|
|
decrease: "decrease number",
|
|
increase: "increase number"
|
|
},
|
|
select: {
|
|
loading: "Loading",
|
|
noMatch: "No matching data",
|
|
noData: "No data",
|
|
placeholder: "Select"
|
|
},
|
|
mention: {
|
|
loading: "Loading"
|
|
},
|
|
dropdown: {
|
|
toggleDropdown: "Toggle Dropdown"
|
|
},
|
|
cascader: {
|
|
noMatch: "No matching data",
|
|
loading: "Loading",
|
|
placeholder: "Select",
|
|
noData: "No data"
|
|
},
|
|
pagination: {
|
|
goto: "Go to",
|
|
pagesize: "/page",
|
|
total: "Total {total}",
|
|
pageClassifier: "",
|
|
page: "Page",
|
|
prev: "Go to previous page",
|
|
next: "Go to next page",
|
|
currentPage: "page {pager}",
|
|
prevPages: "Previous {pager} pages",
|
|
nextPages: "Next {pager} pages",
|
|
deprecationWarning: "Deprecated usages detected, please refer to the el-pagination documentation for more details"
|
|
},
|
|
dialog: {
|
|
close: "Close this dialog"
|
|
},
|
|
drawer: {
|
|
close: "Close this dialog"
|
|
},
|
|
messagebox: {
|
|
title: "Message",
|
|
confirm: "OK",
|
|
cancel: "Cancel",
|
|
error: "Illegal input",
|
|
close: "Close this dialog"
|
|
},
|
|
upload: {
|
|
deleteTip: "press delete to remove",
|
|
delete: "Delete",
|
|
preview: "Preview",
|
|
continue: "Continue"
|
|
},
|
|
slider: {
|
|
defaultLabel: "slider between {min} and {max}",
|
|
defaultRangeStartLabel: "pick start value",
|
|
defaultRangeEndLabel: "pick end value"
|
|
},
|
|
table: {
|
|
emptyText: "No Data",
|
|
confirmFilter: "Confirm",
|
|
resetFilter: "Reset",
|
|
clearFilter: "All",
|
|
sumText: "Sum"
|
|
},
|
|
tour: {
|
|
next: "Next",
|
|
previous: "Previous",
|
|
finish: "Finish"
|
|
},
|
|
tree: {
|
|
emptyText: "No Data"
|
|
},
|
|
transfer: {
|
|
noMatch: "No matching data",
|
|
noData: "No data",
|
|
titles: ["List 1", "List 2"],
|
|
filterPlaceholder: "Enter keyword",
|
|
noCheckedFormat: "{total} items",
|
|
hasCheckedFormat: "{checked}/{total} checked"
|
|
},
|
|
image: {
|
|
error: "FAILED"
|
|
},
|
|
pageHeader: {
|
|
title: "Back"
|
|
},
|
|
popconfirm: {
|
|
confirmButtonText: "Yes",
|
|
cancelButtonText: "No"
|
|
},
|
|
carousel: {
|
|
leftArrow: "Carousel arrow left",
|
|
rightArrow: "Carousel arrow right",
|
|
indicator: "Carousel switch to index {index}"
|
|
}
|
|
}
|
|
};
|
|
|
|
const buildTranslator = (locale) => (path, option) => translate(path, option, unref(locale));
|
|
const translate = (path, option, locale) => get(locale, path, path).replace(/\{(\w+)\}/g, (_, key) => {
|
|
var _a;
|
|
return `${(_a = option == null ? void 0 : option[key]) != null ? _a : `{${key}}`}`;
|
|
});
|
|
const buildLocaleContext = (locale) => {
|
|
const lang = computed(() => unref(locale).name);
|
|
const localeRef = isRef(locale) ? locale : ref(locale);
|
|
return {
|
|
lang,
|
|
locale: localeRef,
|
|
t: buildTranslator(locale)
|
|
};
|
|
};
|
|
const localeContextKey = Symbol("localeContextKey");
|
|
const useLocale = (localeOverrides) => {
|
|
const locale = localeOverrides || inject(localeContextKey, ref());
|
|
return buildLocaleContext(computed(() => locale.value || English));
|
|
};
|
|
|
|
const defaultNamespace = "el";
|
|
const statePrefix = "is-";
|
|
const _bem = (namespace, block, blockSuffix, element, modifier) => {
|
|
let cls = `${namespace}-${block}`;
|
|
if (blockSuffix) {
|
|
cls += `-${blockSuffix}`;
|
|
}
|
|
if (element) {
|
|
cls += `__${element}`;
|
|
}
|
|
if (modifier) {
|
|
cls += `--${modifier}`;
|
|
}
|
|
return cls;
|
|
};
|
|
const namespaceContextKey = Symbol("namespaceContextKey");
|
|
const useGetDerivedNamespace = (namespaceOverrides) => {
|
|
const derivedNamespace = namespaceOverrides || (getCurrentInstance() ? inject(namespaceContextKey, ref(defaultNamespace)) : ref(defaultNamespace));
|
|
const namespace = computed(() => {
|
|
return unref(derivedNamespace) || defaultNamespace;
|
|
});
|
|
return namespace;
|
|
};
|
|
const useNamespace = (block, namespaceOverrides) => {
|
|
const namespace = useGetDerivedNamespace(namespaceOverrides);
|
|
const b = (blockSuffix = "") => _bem(namespace.value, block, blockSuffix, "", "");
|
|
const e = (element) => element ? _bem(namespace.value, block, "", element, "") : "";
|
|
const m = (modifier) => modifier ? _bem(namespace.value, block, "", "", modifier) : "";
|
|
const be = (blockSuffix, element) => blockSuffix && element ? _bem(namespace.value, block, blockSuffix, element, "") : "";
|
|
const em = (element, modifier) => element && modifier ? _bem(namespace.value, block, "", element, modifier) : "";
|
|
const bm = (blockSuffix, modifier) => blockSuffix && modifier ? _bem(namespace.value, block, blockSuffix, "", modifier) : "";
|
|
const bem = (blockSuffix, element, modifier) => blockSuffix && element && modifier ? _bem(namespace.value, block, blockSuffix, element, modifier) : "";
|
|
const is = (name, ...args) => {
|
|
const state = args.length >= 1 ? args[0] : true;
|
|
return name && state ? `${statePrefix}${name}` : "";
|
|
};
|
|
const cssVar = (object) => {
|
|
const styles = {};
|
|
for (const key in object) {
|
|
if (object[key]) {
|
|
styles[`--${namespace.value}-${key}`] = object[key];
|
|
}
|
|
}
|
|
return styles;
|
|
};
|
|
const cssVarBlock = (object) => {
|
|
const styles = {};
|
|
for (const key in object) {
|
|
if (object[key]) {
|
|
styles[`--${namespace.value}-${block}-${key}`] = object[key];
|
|
}
|
|
}
|
|
return styles;
|
|
};
|
|
const cssVarName = (name) => `--${namespace.value}-${name}`;
|
|
const cssVarBlockName = (name) => `--${namespace.value}-${block}-${name}`;
|
|
return {
|
|
namespace,
|
|
b,
|
|
e,
|
|
m,
|
|
be,
|
|
em,
|
|
bm,
|
|
bem,
|
|
is,
|
|
cssVar,
|
|
cssVarName,
|
|
cssVarBlock,
|
|
cssVarBlockName
|
|
};
|
|
};
|
|
|
|
const useLockscreen = (trigger, options = {}) => {
|
|
if (!isRef(trigger)) {
|
|
throwError("[useLockscreen]", "You need to pass a ref param to this function");
|
|
}
|
|
const ns = options.ns || useNamespace("popup");
|
|
const hiddenCls = computed(() => ns.bm("parent", "hidden"));
|
|
if (!isClient || hasClass(document.body, hiddenCls.value)) {
|
|
return;
|
|
}
|
|
let scrollBarWidth = 0;
|
|
let withoutHiddenClass = false;
|
|
let bodyWidth = "0";
|
|
const cleanup = () => {
|
|
setTimeout(() => {
|
|
removeClass(document == null ? void 0 : document.body, hiddenCls.value);
|
|
if (withoutHiddenClass && document) {
|
|
document.body.style.width = bodyWidth;
|
|
}
|
|
}, 200);
|
|
};
|
|
watch(trigger, (val) => {
|
|
if (!val) {
|
|
cleanup();
|
|
return;
|
|
}
|
|
withoutHiddenClass = !hasClass(document.body, hiddenCls.value);
|
|
if (withoutHiddenClass) {
|
|
bodyWidth = document.body.style.width;
|
|
}
|
|
scrollBarWidth = getScrollBarWidth(ns.namespace.value);
|
|
const bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight;
|
|
const bodyOverflowY = getStyle(document.body, "overflowY");
|
|
if (scrollBarWidth > 0 && (bodyHasOverflow || bodyOverflowY === "scroll") && withoutHiddenClass) {
|
|
document.body.style.width = `calc(100% - ${scrollBarWidth}px)`;
|
|
}
|
|
addClass(document.body, hiddenCls.value);
|
|
});
|
|
onScopeDispose(() => cleanup());
|
|
};
|
|
|
|
const modalStack = [];
|
|
const closeModal = (e) => {
|
|
if (modalStack.length === 0)
|
|
return;
|
|
if (e.code === EVENT_CODE.esc) {
|
|
e.stopPropagation();
|
|
const topModal = modalStack[modalStack.length - 1];
|
|
topModal.handleClose();
|
|
}
|
|
};
|
|
const useModal = (instance, visibleRef) => {
|
|
watch(visibleRef, (val) => {
|
|
if (val) {
|
|
modalStack.push(instance);
|
|
} else {
|
|
modalStack.splice(modalStack.indexOf(instance), 1);
|
|
}
|
|
});
|
|
};
|
|
if (isClient)
|
|
useEventListener(document, "keydown", closeModal);
|
|
|
|
const _prop = buildProp({
|
|
type: definePropType(Boolean),
|
|
default: null
|
|
});
|
|
const _event = buildProp({
|
|
type: definePropType(Function)
|
|
});
|
|
const createModelToggleComposable = (name) => {
|
|
const updateEventKey = `update:${name}`;
|
|
const updateEventKeyRaw = `onUpdate:${name}`;
|
|
const useModelToggleEmits2 = [updateEventKey];
|
|
const useModelToggleProps2 = {
|
|
[name]: _prop,
|
|
[updateEventKeyRaw]: _event
|
|
};
|
|
const useModelToggle2 = ({
|
|
indicator,
|
|
toggleReason,
|
|
shouldHideWhenRouteChanges,
|
|
shouldProceed,
|
|
onShow,
|
|
onHide
|
|
}) => {
|
|
const instance = getCurrentInstance();
|
|
const { emit } = instance;
|
|
const props = instance.props;
|
|
const hasUpdateHandler = computed(() => isFunction$1(props[updateEventKeyRaw]));
|
|
const isModelBindingAbsent = computed(() => props[name] === null);
|
|
const doShow = (event) => {
|
|
if (indicator.value === true) {
|
|
return;
|
|
}
|
|
indicator.value = true;
|
|
if (toggleReason) {
|
|
toggleReason.value = event;
|
|
}
|
|
if (isFunction$1(onShow)) {
|
|
onShow(event);
|
|
}
|
|
};
|
|
const doHide = (event) => {
|
|
if (indicator.value === false) {
|
|
return;
|
|
}
|
|
indicator.value = false;
|
|
if (toggleReason) {
|
|
toggleReason.value = event;
|
|
}
|
|
if (isFunction$1(onHide)) {
|
|
onHide(event);
|
|
}
|
|
};
|
|
const show = (event) => {
|
|
if (props.disabled === true || isFunction$1(shouldProceed) && !shouldProceed())
|
|
return;
|
|
const shouldEmit = hasUpdateHandler.value && isClient;
|
|
if (shouldEmit) {
|
|
emit(updateEventKey, true);
|
|
}
|
|
if (isModelBindingAbsent.value || !shouldEmit) {
|
|
doShow(event);
|
|
}
|
|
};
|
|
const hide = (event) => {
|
|
if (props.disabled === true || !isClient)
|
|
return;
|
|
const shouldEmit = hasUpdateHandler.value && isClient;
|
|
if (shouldEmit) {
|
|
emit(updateEventKey, false);
|
|
}
|
|
if (isModelBindingAbsent.value || !shouldEmit) {
|
|
doHide(event);
|
|
}
|
|
};
|
|
const onChange = (val) => {
|
|
if (!isBoolean(val))
|
|
return;
|
|
if (props.disabled && val) {
|
|
if (hasUpdateHandler.value) {
|
|
emit(updateEventKey, false);
|
|
}
|
|
} else if (indicator.value !== val) {
|
|
if (val) {
|
|
doShow();
|
|
} else {
|
|
doHide();
|
|
}
|
|
}
|
|
};
|
|
const toggle = () => {
|
|
if (indicator.value) {
|
|
hide();
|
|
} else {
|
|
show();
|
|
}
|
|
};
|
|
watch(() => props[name], onChange);
|
|
if (shouldHideWhenRouteChanges && instance.appContext.config.globalProperties.$route !== void 0) {
|
|
watch(() => ({
|
|
...instance.proxy.$route
|
|
}), () => {
|
|
if (shouldHideWhenRouteChanges.value && indicator.value) {
|
|
hide();
|
|
}
|
|
});
|
|
}
|
|
onMounted(() => {
|
|
onChange(props[name]);
|
|
});
|
|
return {
|
|
hide,
|
|
show,
|
|
toggle,
|
|
hasUpdateHandler
|
|
};
|
|
};
|
|
return {
|
|
useModelToggle: useModelToggle2,
|
|
useModelToggleProps: useModelToggleProps2,
|
|
useModelToggleEmits: useModelToggleEmits2
|
|
};
|
|
};
|
|
const { useModelToggle, useModelToggleProps, useModelToggleEmits } = createModelToggleComposable("modelValue");
|
|
|
|
const usePreventGlobal = (indicator, evt, cb) => {
|
|
const prevent = (e) => {
|
|
if (cb(e))
|
|
e.stopImmediatePropagation();
|
|
};
|
|
let stop = void 0;
|
|
watch(() => indicator.value, (val) => {
|
|
if (val) {
|
|
stop = useEventListener(document, evt, prevent, true);
|
|
} else {
|
|
stop == null ? void 0 : stop();
|
|
}
|
|
}, { immediate: true });
|
|
};
|
|
|
|
const useProp = (name) => {
|
|
const vm = getCurrentInstance();
|
|
return computed(() => {
|
|
var _a, _b;
|
|
return (_b = (_a = vm == null ? void 0 : vm.proxy) == null ? void 0 : _a.$props) == null ? void 0 : _b[name];
|
|
});
|
|
};
|
|
|
|
var E$1="top",R="bottom",W="right",P$1="left",me="auto",G=[E$1,R,W,P$1],U$1="start",J="end",Xe="clippingParents",je="viewport",K="popper",Ye="reference",De=G.reduce(function(t,e){return t.concat([e+"-"+U$1,e+"-"+J])},[]),Ee=[].concat(G,[me]).reduce(function(t,e){return t.concat([e,e+"-"+U$1,e+"-"+J])},[]),Ge="beforeRead",Je="read",Ke="afterRead",Qe="beforeMain",Ze="main",et="afterMain",tt="beforeWrite",nt="write",rt="afterWrite",ot=[Ge,Je,Ke,Qe,Ze,et,tt,nt,rt];function C(t){return t?(t.nodeName||"").toLowerCase():null}function H(t){if(t==null)return window;if(t.toString()!=="[object Window]"){var e=t.ownerDocument;return e&&e.defaultView||window}return t}function Q(t){var e=H(t).Element;return t instanceof e||t instanceof Element}function B(t){var e=H(t).HTMLElement;return t instanceof e||t instanceof HTMLElement}function Pe(t){if(typeof ShadowRoot=="undefined")return !1;var e=H(t).ShadowRoot;return t instanceof e||t instanceof ShadowRoot}function Mt(t){var e=t.state;Object.keys(e.elements).forEach(function(n){var r=e.styles[n]||{},o=e.attributes[n]||{},i=e.elements[n];!B(i)||!C(i)||(Object.assign(i.style,r),Object.keys(o).forEach(function(a){var s=o[a];s===!1?i.removeAttribute(a):i.setAttribute(a,s===!0?"":s);}));});}function Rt(t){var e=t.state,n={popper:{position:e.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};return Object.assign(e.elements.popper.style,n.popper),e.styles=n,e.elements.arrow&&Object.assign(e.elements.arrow.style,n.arrow),function(){Object.keys(e.elements).forEach(function(r){var o=e.elements[r],i=e.attributes[r]||{},a=Object.keys(e.styles.hasOwnProperty(r)?e.styles[r]:n[r]),s=a.reduce(function(f,c){return f[c]="",f},{});!B(o)||!C(o)||(Object.assign(o.style,s),Object.keys(i).forEach(function(f){o.removeAttribute(f);}));});}}var Ae={name:"applyStyles",enabled:!0,phase:"write",fn:Mt,effect:Rt,requires:["computeStyles"]};function q(t){return t.split("-")[0]}var X$1=Math.max,ve=Math.min,Z=Math.round;function ee(t,e){e===void 0&&(e=!1);var n=t.getBoundingClientRect(),r=1,o=1;if(B(t)&&e){var i=t.offsetHeight,a=t.offsetWidth;a>0&&(r=Z(n.width)/a||1),i>0&&(o=Z(n.height)/i||1);}return {width:n.width/r,height:n.height/o,top:n.top/o,right:n.right/r,bottom:n.bottom/o,left:n.left/r,x:n.left/r,y:n.top/o}}function ke(t){var e=ee(t),n=t.offsetWidth,r=t.offsetHeight;return Math.abs(e.width-n)<=1&&(n=e.width),Math.abs(e.height-r)<=1&&(r=e.height),{x:t.offsetLeft,y:t.offsetTop,width:n,height:r}}function it(t,e){var n=e.getRootNode&&e.getRootNode();if(t.contains(e))return !0;if(n&&Pe(n)){var r=e;do{if(r&&t.isSameNode(r))return !0;r=r.parentNode||r.host;}while(r)}return !1}function N$1(t){return H(t).getComputedStyle(t)}function Wt(t){return ["table","td","th"].indexOf(C(t))>=0}function I$1(t){return ((Q(t)?t.ownerDocument:t.document)||window.document).documentElement}function ge(t){return C(t)==="html"?t:t.assignedSlot||t.parentNode||(Pe(t)?t.host:null)||I$1(t)}function at(t){return !B(t)||N$1(t).position==="fixed"?null:t.offsetParent}function Bt(t){var e=navigator.userAgent.toLowerCase().indexOf("firefox")!==-1,n=navigator.userAgent.indexOf("Trident")!==-1;if(n&&B(t)){var r=N$1(t);if(r.position==="fixed")return null}var o=ge(t);for(Pe(o)&&(o=o.host);B(o)&&["html","body"].indexOf(C(o))<0;){var i=N$1(o);if(i.transform!=="none"||i.perspective!=="none"||i.contain==="paint"||["transform","perspective"].indexOf(i.willChange)!==-1||e&&i.willChange==="filter"||e&&i.filter&&i.filter!=="none")return o;o=o.parentNode;}return null}function se(t){for(var e=H(t),n=at(t);n&&Wt(n)&&N$1(n).position==="static";)n=at(n);return n&&(C(n)==="html"||C(n)==="body"&&N$1(n).position==="static")?e:n||Bt(t)||e}function Le(t){return ["top","bottom"].indexOf(t)>=0?"x":"y"}function fe(t,e,n){return X$1(t,ve(e,n))}function St(t,e,n){var r=fe(t,e,n);return r>n?n:r}function st(){return {top:0,right:0,bottom:0,left:0}}function ft(t){return Object.assign({},st(),t)}function ct(t,e){return e.reduce(function(n,r){return n[r]=t,n},{})}var Tt=function(t,e){return t=typeof t=="function"?t(Object.assign({},e.rects,{placement:e.placement})):t,ft(typeof t!="number"?t:ct(t,G))};function Ht(t){var e,n=t.state,r=t.name,o=t.options,i=n.elements.arrow,a=n.modifiersData.popperOffsets,s=q(n.placement),f=Le(s),c=[P$1,W].indexOf(s)>=0,u=c?"height":"width";if(!(!i||!a)){var m=Tt(o.padding,n),v=ke(i),l=f==="y"?E$1:P$1,h=f==="y"?R:W,p=n.rects.reference[u]+n.rects.reference[f]-a[f]-n.rects.popper[u],g=a[f]-n.rects.reference[f],x=se(i),y=x?f==="y"?x.clientHeight||0:x.clientWidth||0:0,$=p/2-g/2,d=m[l],b=y-v[u]-m[h],w=y/2-v[u]/2+$,O=fe(d,w,b),j=f;n.modifiersData[r]=(e={},e[j]=O,e.centerOffset=O-w,e);}}function Ct(t){var e=t.state,n=t.options,r=n.element,o=r===void 0?"[data-popper-arrow]":r;o!=null&&(typeof o=="string"&&(o=e.elements.popper.querySelector(o),!o)||!it(e.elements.popper,o)||(e.elements.arrow=o));}var pt={name:"arrow",enabled:!0,phase:"main",fn:Ht,effect:Ct,requires:["popperOffsets"],requiresIfExists:["preventOverflow"]};function te(t){return t.split("-")[1]}var qt={top:"auto",right:"auto",bottom:"auto",left:"auto"};function Vt(t){var e=t.x,n=t.y,r=window,o=r.devicePixelRatio||1;return {x:Z(e*o)/o||0,y:Z(n*o)/o||0}}function ut(t){var e,n=t.popper,r=t.popperRect,o=t.placement,i=t.variation,a=t.offsets,s=t.position,f=t.gpuAcceleration,c=t.adaptive,u=t.roundOffsets,m=t.isFixed,v=a.x,l=v===void 0?0:v,h=a.y,p=h===void 0?0:h,g=typeof u=="function"?u({x:l,y:p}):{x:l,y:p};l=g.x,p=g.y;var x=a.hasOwnProperty("x"),y=a.hasOwnProperty("y"),$=P$1,d=E$1,b=window;if(c){var w=se(n),O="clientHeight",j="clientWidth";if(w===H(n)&&(w=I$1(n),N$1(w).position!=="static"&&s==="absolute"&&(O="scrollHeight",j="scrollWidth")),w=w,o===E$1||(o===P$1||o===W)&&i===J){d=R;var A=m&&w===b&&b.visualViewport?b.visualViewport.height:w[O];p-=A-r.height,p*=f?1:-1;}if(o===P$1||(o===E$1||o===R)&&i===J){$=W;var k=m&&w===b&&b.visualViewport?b.visualViewport.width:w[j];l-=k-r.width,l*=f?1:-1;}}var D=Object.assign({position:s},c&&qt),S=u===!0?Vt({x:l,y:p}):{x:l,y:p};if(l=S.x,p=S.y,f){var L;return Object.assign({},D,(L={},L[d]=y?"0":"",L[$]=x?"0":"",L.transform=(b.devicePixelRatio||1)<=1?"translate("+l+"px, "+p+"px)":"translate3d("+l+"px, "+p+"px, 0)",L))}return Object.assign({},D,(e={},e[d]=y?p+"px":"",e[$]=x?l+"px":"",e.transform="",e))}function Nt(t){var e=t.state,n=t.options,r=n.gpuAcceleration,o=r===void 0?!0:r,i=n.adaptive,a=i===void 0?!0:i,s=n.roundOffsets,f=s===void 0?!0:s,c={placement:q(e.placement),variation:te(e.placement),popper:e.elements.popper,popperRect:e.rects.popper,gpuAcceleration:o,isFixed:e.options.strategy==="fixed"};e.modifiersData.popperOffsets!=null&&(e.styles.popper=Object.assign({},e.styles.popper,ut(Object.assign({},c,{offsets:e.modifiersData.popperOffsets,position:e.options.strategy,adaptive:a,roundOffsets:f})))),e.modifiersData.arrow!=null&&(e.styles.arrow=Object.assign({},e.styles.arrow,ut(Object.assign({},c,{offsets:e.modifiersData.arrow,position:"absolute",adaptive:!1,roundOffsets:f})))),e.attributes.popper=Object.assign({},e.attributes.popper,{"data-popper-placement":e.placement});}var Me={name:"computeStyles",enabled:!0,phase:"beforeWrite",fn:Nt,data:{}},ye={passive:!0};function It(t){var e=t.state,n=t.instance,r=t.options,o=r.scroll,i=o===void 0?!0:o,a=r.resize,s=a===void 0?!0:a,f=H(e.elements.popper),c=[].concat(e.scrollParents.reference,e.scrollParents.popper);return i&&c.forEach(function(u){u.addEventListener("scroll",n.update,ye);}),s&&f.addEventListener("resize",n.update,ye),function(){i&&c.forEach(function(u){u.removeEventListener("scroll",n.update,ye);}),s&&f.removeEventListener("resize",n.update,ye);}}var Re={name:"eventListeners",enabled:!0,phase:"write",fn:function(){},effect:It,data:{}},_t={left:"right",right:"left",bottom:"top",top:"bottom"};function be(t){return t.replace(/left|right|bottom|top/g,function(e){return _t[e]})}var zt={start:"end",end:"start"};function lt(t){return t.replace(/start|end/g,function(e){return zt[e]})}function We(t){var e=H(t),n=e.pageXOffset,r=e.pageYOffset;return {scrollLeft:n,scrollTop:r}}function Be(t){return ee(I$1(t)).left+We(t).scrollLeft}function Ft(t){var e=H(t),n=I$1(t),r=e.visualViewport,o=n.clientWidth,i=n.clientHeight,a=0,s=0;return r&&(o=r.width,i=r.height,/^((?!chrome|android).)*safari/i.test(navigator.userAgent)||(a=r.offsetLeft,s=r.offsetTop)),{width:o,height:i,x:a+Be(t),y:s}}function Ut(t){var e,n=I$1(t),r=We(t),o=(e=t.ownerDocument)==null?void 0:e.body,i=X$1(n.scrollWidth,n.clientWidth,o?o.scrollWidth:0,o?o.clientWidth:0),a=X$1(n.scrollHeight,n.clientHeight,o?o.scrollHeight:0,o?o.clientHeight:0),s=-r.scrollLeft+Be(t),f=-r.scrollTop;return N$1(o||n).direction==="rtl"&&(s+=X$1(n.clientWidth,o?o.clientWidth:0)-i),{width:i,height:a,x:s,y:f}}function Se(t){var e=N$1(t),n=e.overflow,r=e.overflowX,o=e.overflowY;return /auto|scroll|overlay|hidden/.test(n+o+r)}function dt(t){return ["html","body","#document"].indexOf(C(t))>=0?t.ownerDocument.body:B(t)&&Se(t)?t:dt(ge(t))}function ce(t,e){var n;e===void 0&&(e=[]);var r=dt(t),o=r===((n=t.ownerDocument)==null?void 0:n.body),i=H(r),a=o?[i].concat(i.visualViewport||[],Se(r)?r:[]):r,s=e.concat(a);return o?s:s.concat(ce(ge(a)))}function Te(t){return Object.assign({},t,{left:t.x,top:t.y,right:t.x+t.width,bottom:t.y+t.height})}function Xt(t){var e=ee(t);return e.top=e.top+t.clientTop,e.left=e.left+t.clientLeft,e.bottom=e.top+t.clientHeight,e.right=e.left+t.clientWidth,e.width=t.clientWidth,e.height=t.clientHeight,e.x=e.left,e.y=e.top,e}function ht(t,e){return e===je?Te(Ft(t)):Q(e)?Xt(e):Te(Ut(I$1(t)))}function Yt(t){var e=ce(ge(t)),n=["absolute","fixed"].indexOf(N$1(t).position)>=0,r=n&&B(t)?se(t):t;return Q(r)?e.filter(function(o){return Q(o)&&it(o,r)&&C(o)!=="body"}):[]}function Gt(t,e,n){var r=e==="clippingParents"?Yt(t):[].concat(e),o=[].concat(r,[n]),i=o[0],a=o.reduce(function(s,f){var c=ht(t,f);return s.top=X$1(c.top,s.top),s.right=ve(c.right,s.right),s.bottom=ve(c.bottom,s.bottom),s.left=X$1(c.left,s.left),s},ht(t,i));return a.width=a.right-a.left,a.height=a.bottom-a.top,a.x=a.left,a.y=a.top,a}function mt(t){var e=t.reference,n=t.element,r=t.placement,o=r?q(r):null,i=r?te(r):null,a=e.x+e.width/2-n.width/2,s=e.y+e.height/2-n.height/2,f;switch(o){case E$1:f={x:a,y:e.y-n.height};break;case R:f={x:a,y:e.y+e.height};break;case W:f={x:e.x+e.width,y:s};break;case P$1:f={x:e.x-n.width,y:s};break;default:f={x:e.x,y:e.y};}var c=o?Le(o):null;if(c!=null){var u=c==="y"?"height":"width";switch(i){case U$1:f[c]=f[c]-(e[u]/2-n[u]/2);break;case J:f[c]=f[c]+(e[u]/2-n[u]/2);break}}return f}function ne(t,e){e===void 0&&(e={});var n=e,r=n.placement,o=r===void 0?t.placement:r,i=n.boundary,a=i===void 0?Xe:i,s=n.rootBoundary,f=s===void 0?je:s,c=n.elementContext,u=c===void 0?K:c,m=n.altBoundary,v=m===void 0?!1:m,l=n.padding,h=l===void 0?0:l,p=ft(typeof h!="number"?h:ct(h,G)),g=u===K?Ye:K,x=t.rects.popper,y=t.elements[v?g:u],$=Gt(Q(y)?y:y.contextElement||I$1(t.elements.popper),a,f),d=ee(t.elements.reference),b=mt({reference:d,element:x,strategy:"absolute",placement:o}),w=Te(Object.assign({},x,b)),O=u===K?w:d,j={top:$.top-O.top+p.top,bottom:O.bottom-$.bottom+p.bottom,left:$.left-O.left+p.left,right:O.right-$.right+p.right},A=t.modifiersData.offset;if(u===K&&A){var k=A[o];Object.keys(j).forEach(function(D){var S=[W,R].indexOf(D)>=0?1:-1,L=[E$1,R].indexOf(D)>=0?"y":"x";j[D]+=k[L]*S;});}return j}function Jt(t,e){e===void 0&&(e={});var n=e,r=n.placement,o=n.boundary,i=n.rootBoundary,a=n.padding,s=n.flipVariations,f=n.allowedAutoPlacements,c=f===void 0?Ee:f,u=te(r),m=u?s?De:De.filter(function(h){return te(h)===u}):G,v=m.filter(function(h){return c.indexOf(h)>=0});v.length===0&&(v=m);var l=v.reduce(function(h,p){return h[p]=ne(t,{placement:p,boundary:o,rootBoundary:i,padding:a})[q(p)],h},{});return Object.keys(l).sort(function(h,p){return l[h]-l[p]})}function Kt(t){if(q(t)===me)return [];var e=be(t);return [lt(t),e,lt(e)]}function Qt(t){var e=t.state,n=t.options,r=t.name;if(!e.modifiersData[r]._skip){for(var o=n.mainAxis,i=o===void 0?!0:o,a=n.altAxis,s=a===void 0?!0:a,f=n.fallbackPlacements,c=n.padding,u=n.boundary,m=n.rootBoundary,v=n.altBoundary,l=n.flipVariations,h=l===void 0?!0:l,p=n.allowedAutoPlacements,g=e.options.placement,x=q(g),y=x===g,$=f||(y||!h?[be(g)]:Kt(g)),d=[g].concat($).reduce(function(z,V){return z.concat(q(V)===me?Jt(e,{placement:V,boundary:u,rootBoundary:m,padding:c,flipVariations:h,allowedAutoPlacements:p}):V)},[]),b=e.rects.reference,w=e.rects.popper,O=new Map,j=!0,A=d[0],k=0;k<d.length;k++){var D=d[k],S=q(D),L=te(D)===U$1,re=[E$1,R].indexOf(S)>=0,oe=re?"width":"height",M=ne(e,{placement:D,boundary:u,rootBoundary:m,altBoundary:v,padding:c}),T=re?L?W:P$1:L?R:E$1;b[oe]>w[oe]&&(T=be(T));var pe=be(T),_=[];if(i&&_.push(M[S]<=0),s&&_.push(M[T]<=0,M[pe]<=0),_.every(function(z){return z})){A=D,j=!1;break}O.set(D,_);}if(j)for(var ue=h?3:1,xe=function(z){var V=d.find(function(de){var ae=O.get(de);if(ae)return ae.slice(0,z).every(function(Y){return Y})});if(V)return A=V,"break"},ie=ue;ie>0;ie--){var le=xe(ie);if(le==="break")break}e.placement!==A&&(e.modifiersData[r]._skip=!0,e.placement=A,e.reset=!0);}}var vt={name:"flip",enabled:!0,phase:"main",fn:Qt,requiresIfExists:["offset"],data:{_skip:!1}};function gt(t,e,n){return n===void 0&&(n={x:0,y:0}),{top:t.top-e.height-n.y,right:t.right-e.width+n.x,bottom:t.bottom-e.height+n.y,left:t.left-e.width-n.x}}function yt(t){return [E$1,W,R,P$1].some(function(e){return t[e]>=0})}function Zt(t){var e=t.state,n=t.name,r=e.rects.reference,o=e.rects.popper,i=e.modifiersData.preventOverflow,a=ne(e,{elementContext:"reference"}),s=ne(e,{altBoundary:!0}),f=gt(a,r),c=gt(s,o,i),u=yt(f),m=yt(c);e.modifiersData[n]={referenceClippingOffsets:f,popperEscapeOffsets:c,isReferenceHidden:u,hasPopperEscaped:m},e.attributes.popper=Object.assign({},e.attributes.popper,{"data-popper-reference-hidden":u,"data-popper-escaped":m});}var bt={name:"hide",enabled:!0,phase:"main",requiresIfExists:["preventOverflow"],fn:Zt};function en(t,e,n){var r=q(t),o=[P$1,E$1].indexOf(r)>=0?-1:1,i=typeof n=="function"?n(Object.assign({},e,{placement:t})):n,a=i[0],s=i[1];return a=a||0,s=(s||0)*o,[P$1,W].indexOf(r)>=0?{x:s,y:a}:{x:a,y:s}}function tn(t){var e=t.state,n=t.options,r=t.name,o=n.offset,i=o===void 0?[0,0]:o,a=Ee.reduce(function(u,m){return u[m]=en(m,e.rects,i),u},{}),s=a[e.placement],f=s.x,c=s.y;e.modifiersData.popperOffsets!=null&&(e.modifiersData.popperOffsets.x+=f,e.modifiersData.popperOffsets.y+=c),e.modifiersData[r]=a;}var wt={name:"offset",enabled:!0,phase:"main",requires:["popperOffsets"],fn:tn};function nn(t){var e=t.state,n=t.name;e.modifiersData[n]=mt({reference:e.rects.reference,element:e.rects.popper,strategy:"absolute",placement:e.placement});}var He={name:"popperOffsets",enabled:!0,phase:"read",fn:nn,data:{}};function rn(t){return t==="x"?"y":"x"}function on(t){var e=t.state,n=t.options,r=t.name,o=n.mainAxis,i=o===void 0?!0:o,a=n.altAxis,s=a===void 0?!1:a,f=n.boundary,c=n.rootBoundary,u=n.altBoundary,m=n.padding,v=n.tether,l=v===void 0?!0:v,h=n.tetherOffset,p=h===void 0?0:h,g=ne(e,{boundary:f,rootBoundary:c,padding:m,altBoundary:u}),x=q(e.placement),y=te(e.placement),$=!y,d=Le(x),b=rn(d),w=e.modifiersData.popperOffsets,O=e.rects.reference,j=e.rects.popper,A=typeof p=="function"?p(Object.assign({},e.rects,{placement:e.placement})):p,k=typeof A=="number"?{mainAxis:A,altAxis:A}:Object.assign({mainAxis:0,altAxis:0},A),D=e.modifiersData.offset?e.modifiersData.offset[e.placement]:null,S={x:0,y:0};if(w){if(i){var L,re=d==="y"?E$1:P$1,oe=d==="y"?R:W,M=d==="y"?"height":"width",T=w[d],pe=T+g[re],_=T-g[oe],ue=l?-j[M]/2:0,xe=y===U$1?O[M]:j[M],ie=y===U$1?-j[M]:-O[M],le=e.elements.arrow,z=l&&le?ke(le):{width:0,height:0},V=e.modifiersData["arrow#persistent"]?e.modifiersData["arrow#persistent"].padding:st(),de=V[re],ae=V[oe],Y=fe(0,O[M],z[M]),jt=$?O[M]/2-ue-Y-de-k.mainAxis:xe-Y-de-k.mainAxis,Dt=$?-O[M]/2+ue+Y+ae+k.mainAxis:ie+Y+ae+k.mainAxis,Oe=e.elements.arrow&&se(e.elements.arrow),Et=Oe?d==="y"?Oe.clientTop||0:Oe.clientLeft||0:0,Ce=(L=D==null?void 0:D[d])!=null?L:0,Pt=T+jt-Ce-Et,At=T+Dt-Ce,qe=fe(l?ve(pe,Pt):pe,T,l?X$1(_,At):_);w[d]=qe,S[d]=qe-T;}if(s){var Ve,kt=d==="x"?E$1:P$1,Lt=d==="x"?R:W,F=w[b],he=b==="y"?"height":"width",Ne=F+g[kt],Ie=F-g[Lt],$e=[E$1,P$1].indexOf(x)!==-1,_e=(Ve=D==null?void 0:D[b])!=null?Ve:0,ze=$e?Ne:F-O[he]-j[he]-_e+k.altAxis,Fe=$e?F+O[he]+j[he]-_e-k.altAxis:Ie,Ue=l&&$e?St(ze,F,Fe):fe(l?ze:Ne,F,l?Fe:Ie);w[b]=Ue,S[b]=Ue-F;}e.modifiersData[r]=S;}}var xt={name:"preventOverflow",enabled:!0,phase:"main",fn:on,requiresIfExists:["offset"]};function an(t){return {scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}}function sn(t){return t===H(t)||!B(t)?We(t):an(t)}function fn(t){var e=t.getBoundingClientRect(),n=Z(e.width)/t.offsetWidth||1,r=Z(e.height)/t.offsetHeight||1;return n!==1||r!==1}function cn(t,e,n){n===void 0&&(n=!1);var r=B(e),o=B(e)&&fn(e),i=I$1(e),a=ee(t,o),s={scrollLeft:0,scrollTop:0},f={x:0,y:0};return (r||!r&&!n)&&((C(e)!=="body"||Se(i))&&(s=sn(e)),B(e)?(f=ee(e,!0),f.x+=e.clientLeft,f.y+=e.clientTop):i&&(f.x=Be(i))),{x:a.left+s.scrollLeft-f.x,y:a.top+s.scrollTop-f.y,width:a.width,height:a.height}}function pn(t){var e=new Map,n=new Set,r=[];t.forEach(function(i){e.set(i.name,i);});function o(i){n.add(i.name);var a=[].concat(i.requires||[],i.requiresIfExists||[]);a.forEach(function(s){if(!n.has(s)){var f=e.get(s);f&&o(f);}}),r.push(i);}return t.forEach(function(i){n.has(i.name)||o(i);}),r}function un(t){var e=pn(t);return ot.reduce(function(n,r){return n.concat(e.filter(function(o){return o.phase===r}))},[])}function ln(t){var e;return function(){return e||(e=new Promise(function(n){Promise.resolve().then(function(){e=void 0,n(t());});})),e}}function dn(t){var e=t.reduce(function(n,r){var o=n[r.name];return n[r.name]=o?Object.assign({},o,r,{options:Object.assign({},o.options,r.options),data:Object.assign({},o.data,r.data)}):r,n},{});return Object.keys(e).map(function(n){return e[n]})}var Ot={placement:"bottom",modifiers:[],strategy:"absolute"};function $t(){for(var t=arguments.length,e=new Array(t),n=0;n<t;n++)e[n]=arguments[n];return !e.some(function(r){return !(r&&typeof r.getBoundingClientRect=="function")})}function we(t){t===void 0&&(t={});var e=t,n=e.defaultModifiers,r=n===void 0?[]:n,o=e.defaultOptions,i=o===void 0?Ot:o;return function(a,s,f){f===void 0&&(f=i);var c={placement:"bottom",orderedModifiers:[],options:Object.assign({},Ot,i),modifiersData:{},elements:{reference:a,popper:s},attributes:{},styles:{}},u=[],m=!1,v={state:c,setOptions:function(p){var g=typeof p=="function"?p(c.options):p;h(),c.options=Object.assign({},i,c.options,g),c.scrollParents={reference:Q(a)?ce(a):a.contextElement?ce(a.contextElement):[],popper:ce(s)};var x=un(dn([].concat(r,c.options.modifiers)));return c.orderedModifiers=x.filter(function(y){return y.enabled}),l(),v.update()},forceUpdate:function(){if(!m){var p=c.elements,g=p.reference,x=p.popper;if($t(g,x)){c.rects={reference:cn(g,se(x),c.options.strategy==="fixed"),popper:ke(x)},c.reset=!1,c.placement=c.options.placement,c.orderedModifiers.forEach(function(j){return c.modifiersData[j.name]=Object.assign({},j.data)});for(var y=0;y<c.orderedModifiers.length;y++){if(c.reset===!0){c.reset=!1,y=-1;continue}var $=c.orderedModifiers[y],d=$.fn,b=$.options,w=b===void 0?{}:b,O=$.name;typeof d=="function"&&(c=d({state:c,options:w,name:O,instance:v})||c);}}}},update:ln(function(){return new Promise(function(p){v.forceUpdate(),p(c);})}),destroy:function(){h(),m=!0;}};if(!$t(a,s))return v;v.setOptions(f).then(function(p){!m&&f.onFirstUpdate&&f.onFirstUpdate(p);});function l(){c.orderedModifiers.forEach(function(p){var g=p.name,x=p.options,y=x===void 0?{}:x,$=p.effect;if(typeof $=="function"){var d=$({state:c,name:g,instance:v,options:y}),b=function(){};u.push(d||b);}});}function h(){u.forEach(function(p){return p()}),u=[];}return v}}we();var mn=[Re,He,Me,Ae];we({defaultModifiers:mn});var gn=[Re,He,Me,Ae,wt,vt,xt,pt,bt],yn=we({defaultModifiers:gn});
|
|
|
|
const usePopper = (referenceElementRef, popperElementRef, opts = {}) => {
|
|
const stateUpdater = {
|
|
name: "updateState",
|
|
enabled: true,
|
|
phase: "write",
|
|
fn: ({ state }) => {
|
|
const derivedState = deriveState(state);
|
|
Object.assign(states.value, derivedState);
|
|
},
|
|
requires: ["computeStyles"]
|
|
};
|
|
const options = computed(() => {
|
|
const { onFirstUpdate, placement, strategy, modifiers } = unref(opts);
|
|
return {
|
|
onFirstUpdate,
|
|
placement: placement || "bottom",
|
|
strategy: strategy || "absolute",
|
|
modifiers: [
|
|
...modifiers || [],
|
|
stateUpdater,
|
|
{ name: "applyStyles", enabled: false }
|
|
]
|
|
};
|
|
});
|
|
const instanceRef = shallowRef();
|
|
const states = ref({
|
|
styles: {
|
|
popper: {
|
|
position: unref(options).strategy,
|
|
left: "0",
|
|
top: "0"
|
|
},
|
|
arrow: {
|
|
position: "absolute"
|
|
}
|
|
},
|
|
attributes: {}
|
|
});
|
|
const destroy = () => {
|
|
if (!instanceRef.value)
|
|
return;
|
|
instanceRef.value.destroy();
|
|
instanceRef.value = void 0;
|
|
};
|
|
watch(options, (newOptions) => {
|
|
const instance = unref(instanceRef);
|
|
if (instance) {
|
|
instance.setOptions(newOptions);
|
|
}
|
|
}, {
|
|
deep: true
|
|
});
|
|
watch([referenceElementRef, popperElementRef], ([referenceElement, popperElement]) => {
|
|
destroy();
|
|
if (!referenceElement || !popperElement)
|
|
return;
|
|
instanceRef.value = yn(referenceElement, popperElement, unref(options));
|
|
});
|
|
onBeforeUnmount(() => {
|
|
destroy();
|
|
});
|
|
return {
|
|
state: computed(() => {
|
|
var _a;
|
|
return { ...((_a = unref(instanceRef)) == null ? void 0 : _a.state) || {} };
|
|
}),
|
|
styles: computed(() => unref(states).styles),
|
|
attributes: computed(() => unref(states).attributes),
|
|
update: () => {
|
|
var _a;
|
|
return (_a = unref(instanceRef)) == null ? void 0 : _a.update();
|
|
},
|
|
forceUpdate: () => {
|
|
var _a;
|
|
return (_a = unref(instanceRef)) == null ? void 0 : _a.forceUpdate();
|
|
},
|
|
instanceRef: computed(() => unref(instanceRef))
|
|
};
|
|
};
|
|
function deriveState(state) {
|
|
const elements = Object.keys(state.elements);
|
|
const styles = fromPairs(elements.map((element) => [element, state.styles[element] || {}]));
|
|
const attributes = fromPairs(elements.map((element) => [element, state.attributes[element]]));
|
|
return {
|
|
styles,
|
|
attributes
|
|
};
|
|
}
|
|
|
|
const useSameTarget = (handleClick) => {
|
|
if (!handleClick) {
|
|
return { onClick: NOOP, onMousedown: NOOP, onMouseup: NOOP };
|
|
}
|
|
let mousedownTarget = false;
|
|
let mouseupTarget = false;
|
|
const onClick = (e) => {
|
|
if (mousedownTarget && mouseupTarget) {
|
|
handleClick(e);
|
|
}
|
|
mousedownTarget = mouseupTarget = false;
|
|
};
|
|
const onMousedown = (e) => {
|
|
mousedownTarget = e.target === e.currentTarget;
|
|
};
|
|
const onMouseup = (e) => {
|
|
mouseupTarget = e.target === e.currentTarget;
|
|
};
|
|
return { onClick, onMousedown, onMouseup };
|
|
};
|
|
|
|
const useTeleport = (contentRenderer, appendToBody) => {
|
|
const isTeleportVisible = ref(false);
|
|
if (!isClient) {
|
|
return {
|
|
isTeleportVisible,
|
|
showTeleport: NOOP,
|
|
hideTeleport: NOOP,
|
|
renderTeleport: NOOP
|
|
};
|
|
}
|
|
let $el = null;
|
|
const showTeleport = () => {
|
|
isTeleportVisible.value = true;
|
|
if ($el !== null)
|
|
return;
|
|
$el = createGlobalNode();
|
|
};
|
|
const hideTeleport = () => {
|
|
isTeleportVisible.value = false;
|
|
if ($el !== null) {
|
|
removeGlobalNode($el);
|
|
$el = null;
|
|
}
|
|
};
|
|
const renderTeleport = () => {
|
|
return appendToBody.value !== true ? contentRenderer() : isTeleportVisible.value ? [h$1(Teleport$1, { to: $el }, contentRenderer())] : void 0;
|
|
};
|
|
onUnmounted(hideTeleport);
|
|
return {
|
|
isTeleportVisible,
|
|
showTeleport,
|
|
hideTeleport,
|
|
renderTeleport
|
|
};
|
|
};
|
|
|
|
const useThrottleRender = (loading, throttle = 0) => {
|
|
if (throttle === 0)
|
|
return loading;
|
|
const throttled = ref(false);
|
|
let timeoutHandle = null;
|
|
const dispatchThrottling = () => {
|
|
if (timeoutHandle) {
|
|
clearTimeout(timeoutHandle);
|
|
}
|
|
timeoutHandle = setTimeout(() => {
|
|
throttled.value = loading.value;
|
|
}, throttle);
|
|
};
|
|
onMounted(dispatchThrottling);
|
|
watch(() => loading.value, (val) => {
|
|
if (val) {
|
|
dispatchThrottling();
|
|
} else {
|
|
throttled.value = val;
|
|
}
|
|
});
|
|
return throttled;
|
|
};
|
|
|
|
function useTimeout() {
|
|
let timeoutHandle;
|
|
const registerTimeout = (fn, delay) => {
|
|
cancelTimeout();
|
|
timeoutHandle = window.setTimeout(fn, delay);
|
|
};
|
|
const cancelTimeout = () => window.clearTimeout(timeoutHandle);
|
|
tryOnScopeDispose(() => cancelTimeout());
|
|
return {
|
|
registerTimeout,
|
|
cancelTimeout
|
|
};
|
|
}
|
|
|
|
const AFTER_APPEAR = "after-appear";
|
|
const AFTER_ENTER = "after-enter";
|
|
const AFTER_LEAVE = "after-leave";
|
|
const APPEAR = "appear";
|
|
const APPEAR_CANCELLED = "appear-cancelled";
|
|
const BEFORE_ENTER = "before-enter";
|
|
const BEFORE_LEAVE = "before-leave";
|
|
const ENTER = "enter";
|
|
const ENTER_CANCELLED = "enter-cancelled";
|
|
const LEAVE = "leave";
|
|
const LEAVE_CANCELLED = "leave-cancelled";
|
|
const useTransitionFallthroughEmits = [
|
|
AFTER_APPEAR,
|
|
AFTER_ENTER,
|
|
AFTER_LEAVE,
|
|
APPEAR,
|
|
APPEAR_CANCELLED,
|
|
BEFORE_ENTER,
|
|
BEFORE_LEAVE,
|
|
ENTER,
|
|
ENTER_CANCELLED,
|
|
LEAVE,
|
|
LEAVE_CANCELLED
|
|
];
|
|
const useTransitionFallthrough = () => {
|
|
const { emit } = getCurrentInstance();
|
|
return {
|
|
onAfterAppear: () => {
|
|
emit(AFTER_APPEAR);
|
|
},
|
|
onAfterEnter: () => {
|
|
emit(AFTER_ENTER);
|
|
},
|
|
onAfterLeave: () => {
|
|
emit(AFTER_LEAVE);
|
|
},
|
|
onAppearCancelled: () => {
|
|
emit(APPEAR_CANCELLED);
|
|
},
|
|
onBeforeEnter: () => {
|
|
emit(BEFORE_ENTER);
|
|
},
|
|
onBeforeLeave: () => {
|
|
emit(BEFORE_LEAVE);
|
|
},
|
|
onEnter: () => {
|
|
emit(ENTER);
|
|
},
|
|
onEnterCancelled: () => {
|
|
emit(ENTER_CANCELLED);
|
|
},
|
|
onLeave: () => {
|
|
emit(LEAVE);
|
|
},
|
|
onLeaveCancelled: () => {
|
|
emit(LEAVE_CANCELLED);
|
|
}
|
|
};
|
|
};
|
|
|
|
const defaultIdInjection = {
|
|
prefix: Math.floor(Math.random() * 1e4),
|
|
current: 0
|
|
};
|
|
const ID_INJECTION_KEY = Symbol("elIdInjection");
|
|
const useIdInjection = () => {
|
|
return getCurrentInstance() ? inject(ID_INJECTION_KEY, defaultIdInjection) : defaultIdInjection;
|
|
};
|
|
const useId = (deterministicId) => {
|
|
const idInjection = useIdInjection();
|
|
const namespace = useGetDerivedNamespace();
|
|
const idRef = computed(() => unref(deterministicId) || `${namespace.value}-id-${idInjection.prefix}-${idInjection.current++}`);
|
|
return idRef;
|
|
};
|
|
|
|
let registeredEscapeHandlers = [];
|
|
const cachedHandler = (e) => {
|
|
const event = e;
|
|
if (event.key === EVENT_CODE.esc) {
|
|
registeredEscapeHandlers.forEach((registeredHandler) => registeredHandler(event));
|
|
}
|
|
};
|
|
const useEscapeKeydown = (handler) => {
|
|
onMounted(() => {
|
|
if (registeredEscapeHandlers.length === 0) {
|
|
document.addEventListener("keydown", cachedHandler);
|
|
}
|
|
if (isClient)
|
|
registeredEscapeHandlers.push(handler);
|
|
});
|
|
onBeforeUnmount(() => {
|
|
registeredEscapeHandlers = registeredEscapeHandlers.filter((registeredHandler) => registeredHandler !== handler);
|
|
if (registeredEscapeHandlers.length === 0) {
|
|
if (isClient)
|
|
document.removeEventListener("keydown", cachedHandler);
|
|
}
|
|
});
|
|
};
|
|
|
|
let cachedContainer;
|
|
const usePopperContainerId = () => {
|
|
const namespace = useGetDerivedNamespace();
|
|
const idInjection = useIdInjection();
|
|
const id = computed(() => {
|
|
return `${namespace.value}-popper-container-${idInjection.prefix}`;
|
|
});
|
|
const selector = computed(() => `#${id.value}`);
|
|
return {
|
|
id,
|
|
selector
|
|
};
|
|
};
|
|
const createContainer = (id) => {
|
|
const container = document.createElement("div");
|
|
container.id = id;
|
|
document.body.appendChild(container);
|
|
return container;
|
|
};
|
|
const usePopperContainer = () => {
|
|
const { id, selector } = usePopperContainerId();
|
|
onBeforeMount(() => {
|
|
if (!isClient)
|
|
return;
|
|
if (!cachedContainer || !document.body.querySelector(selector.value)) {
|
|
cachedContainer = createContainer(id.value);
|
|
}
|
|
});
|
|
return {
|
|
id,
|
|
selector
|
|
};
|
|
};
|
|
|
|
const useDelayedRender = ({
|
|
indicator,
|
|
intermediateIndicator,
|
|
shouldSetIntermediate = () => true,
|
|
beforeShow,
|
|
afterShow,
|
|
afterHide,
|
|
beforeHide
|
|
}) => {
|
|
watch(() => unref(indicator), (val) => {
|
|
if (val) {
|
|
beforeShow == null ? void 0 : beforeShow();
|
|
nextTick(() => {
|
|
if (!unref(indicator))
|
|
return;
|
|
if (shouldSetIntermediate("show")) {
|
|
intermediateIndicator.value = true;
|
|
}
|
|
});
|
|
} else {
|
|
beforeHide == null ? void 0 : beforeHide();
|
|
nextTick(() => {
|
|
if (unref(indicator))
|
|
return;
|
|
if (shouldSetIntermediate("hide")) {
|
|
intermediateIndicator.value = false;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
watch(() => intermediateIndicator.value, (val) => {
|
|
if (val) {
|
|
afterShow == null ? void 0 : afterShow();
|
|
} else {
|
|
afterHide == null ? void 0 : afterHide();
|
|
}
|
|
});
|
|
};
|
|
|
|
const useDelayedToggleProps = buildProps({
|
|
showAfter: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
hideAfter: {
|
|
type: Number,
|
|
default: 200
|
|
},
|
|
autoClose: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
});
|
|
const useDelayedToggle = ({
|
|
showAfter,
|
|
hideAfter,
|
|
autoClose,
|
|
open,
|
|
close
|
|
}) => {
|
|
const { registerTimeout } = useTimeout();
|
|
const {
|
|
registerTimeout: registerTimeoutForAutoClose,
|
|
cancelTimeout: cancelTimeoutForAutoClose
|
|
} = useTimeout();
|
|
const onOpen = (event) => {
|
|
registerTimeout(() => {
|
|
open(event);
|
|
const _autoClose = unref(autoClose);
|
|
if (isNumber(_autoClose) && _autoClose > 0) {
|
|
registerTimeoutForAutoClose(() => {
|
|
close(event);
|
|
}, _autoClose);
|
|
}
|
|
}, unref(showAfter));
|
|
};
|
|
const onClose = (event) => {
|
|
cancelTimeoutForAutoClose();
|
|
registerTimeout(() => {
|
|
close(event);
|
|
}, unref(hideAfter));
|
|
};
|
|
return {
|
|
onOpen,
|
|
onClose
|
|
};
|
|
};
|
|
|
|
const FORWARD_REF_INJECTION_KEY = Symbol("elForwardRef");
|
|
const useForwardRef = (forwardRef) => {
|
|
const setForwardRef = (el) => {
|
|
forwardRef.value = el;
|
|
};
|
|
provide(FORWARD_REF_INJECTION_KEY, {
|
|
setForwardRef
|
|
});
|
|
};
|
|
const useForwardRefDirective = (setForwardRef) => {
|
|
return {
|
|
mounted(el) {
|
|
setForwardRef(el);
|
|
},
|
|
updated(el) {
|
|
setForwardRef(el);
|
|
},
|
|
unmounted() {
|
|
setForwardRef(null);
|
|
}
|
|
};
|
|
};
|
|
|
|
const initial = {
|
|
current: 0
|
|
};
|
|
const zIndex = ref(0);
|
|
const defaultInitialZIndex = 2e3;
|
|
const ZINDEX_INJECTION_KEY = Symbol("elZIndexContextKey");
|
|
const zIndexContextKey = Symbol("zIndexContextKey");
|
|
const useZIndex = (zIndexOverrides) => {
|
|
const increasingInjection = getCurrentInstance() ? inject(ZINDEX_INJECTION_KEY, initial) : initial;
|
|
const zIndexInjection = zIndexOverrides || (getCurrentInstance() ? inject(zIndexContextKey, void 0) : void 0);
|
|
const initialZIndex = computed(() => {
|
|
const zIndexFromInjection = unref(zIndexInjection);
|
|
return isNumber(zIndexFromInjection) ? zIndexFromInjection : defaultInitialZIndex;
|
|
});
|
|
const currentZIndex = computed(() => initialZIndex.value + zIndex.value);
|
|
const nextZIndex = () => {
|
|
increasingInjection.current++;
|
|
zIndex.value = increasingInjection.current;
|
|
return currentZIndex.value;
|
|
};
|
|
if (!isClient && !inject(ZINDEX_INJECTION_KEY)) ;
|
|
return {
|
|
initialZIndex,
|
|
currentZIndex,
|
|
nextZIndex
|
|
};
|
|
};
|
|
|
|
function getSide(placement) {
|
|
return placement.split('-')[0];
|
|
}
|
|
|
|
function getAlignment(placement) {
|
|
return placement.split('-')[1];
|
|
}
|
|
|
|
function getMainAxisFromPlacement(placement) {
|
|
return ['top', 'bottom'].includes(getSide(placement)) ? 'x' : 'y';
|
|
}
|
|
|
|
function getLengthFromAxis(axis) {
|
|
return axis === 'y' ? 'height' : 'width';
|
|
}
|
|
|
|
function computeCoordsFromPlacement(_ref, placement, rtl) {
|
|
let {
|
|
reference,
|
|
floating
|
|
} = _ref;
|
|
const commonX = reference.x + reference.width / 2 - floating.width / 2;
|
|
const commonY = reference.y + reference.height / 2 - floating.height / 2;
|
|
const mainAxis = getMainAxisFromPlacement(placement);
|
|
const length = getLengthFromAxis(mainAxis);
|
|
const commonAlign = reference[length] / 2 - floating[length] / 2;
|
|
const side = getSide(placement);
|
|
const isVertical = mainAxis === 'x';
|
|
let coords;
|
|
|
|
switch (side) {
|
|
case 'top':
|
|
coords = {
|
|
x: commonX,
|
|
y: reference.y - floating.height
|
|
};
|
|
break;
|
|
|
|
case 'bottom':
|
|
coords = {
|
|
x: commonX,
|
|
y: reference.y + reference.height
|
|
};
|
|
break;
|
|
|
|
case 'right':
|
|
coords = {
|
|
x: reference.x + reference.width,
|
|
y: commonY
|
|
};
|
|
break;
|
|
|
|
case 'left':
|
|
coords = {
|
|
x: reference.x - floating.width,
|
|
y: commonY
|
|
};
|
|
break;
|
|
|
|
default:
|
|
coords = {
|
|
x: reference.x,
|
|
y: reference.y
|
|
};
|
|
}
|
|
|
|
switch (getAlignment(placement)) {
|
|
case 'start':
|
|
coords[mainAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
|
|
break;
|
|
|
|
case 'end':
|
|
coords[mainAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
|
|
break;
|
|
}
|
|
|
|
return coords;
|
|
}
|
|
|
|
/**
|
|
* Computes the `x` and `y` coordinates that will place the floating element
|
|
* next to a reference element when it is given a certain positioning strategy.
|
|
*
|
|
* This export does not have any `platform` interface logic. You will need to
|
|
* write one for the platform you are using Floating UI with.
|
|
*/
|
|
|
|
const computePosition$1 = async (reference, floating, config) => {
|
|
const {
|
|
placement = 'bottom',
|
|
strategy = 'absolute',
|
|
middleware = [],
|
|
platform
|
|
} = config;
|
|
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
|
|
|
|
let rects = await platform.getElementRects({
|
|
reference,
|
|
floating,
|
|
strategy
|
|
});
|
|
let {
|
|
x,
|
|
y
|
|
} = computeCoordsFromPlacement(rects, placement, rtl);
|
|
let statefulPlacement = placement;
|
|
let middlewareData = {};
|
|
let resetCount = 0;
|
|
|
|
for (let i = 0; i < middleware.length; i++) {
|
|
const {
|
|
name,
|
|
fn
|
|
} = middleware[i];
|
|
const {
|
|
x: nextX,
|
|
y: nextY,
|
|
data,
|
|
reset
|
|
} = await fn({
|
|
x,
|
|
y,
|
|
initialPlacement: placement,
|
|
placement: statefulPlacement,
|
|
strategy,
|
|
middlewareData,
|
|
rects,
|
|
platform,
|
|
elements: {
|
|
reference,
|
|
floating
|
|
}
|
|
});
|
|
x = nextX != null ? nextX : x;
|
|
y = nextY != null ? nextY : y;
|
|
middlewareData = { ...middlewareData,
|
|
[name]: { ...middlewareData[name],
|
|
...data
|
|
}
|
|
};
|
|
|
|
if (reset && resetCount <= 50) {
|
|
resetCount++;
|
|
|
|
if (typeof reset === 'object') {
|
|
if (reset.placement) {
|
|
statefulPlacement = reset.placement;
|
|
}
|
|
|
|
if (reset.rects) {
|
|
rects = reset.rects === true ? await platform.getElementRects({
|
|
reference,
|
|
floating,
|
|
strategy
|
|
}) : reset.rects;
|
|
}
|
|
|
|
({
|
|
x,
|
|
y
|
|
} = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
|
|
}
|
|
|
|
i = -1;
|
|
continue;
|
|
}
|
|
}
|
|
|
|
return {
|
|
x,
|
|
y,
|
|
placement: statefulPlacement,
|
|
strategy,
|
|
middlewareData
|
|
};
|
|
};
|
|
|
|
function expandPaddingObject(padding) {
|
|
return {
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
left: 0,
|
|
...padding
|
|
};
|
|
}
|
|
|
|
function getSideObjectFromPadding(padding) {
|
|
return typeof padding !== 'number' ? expandPaddingObject(padding) : {
|
|
top: padding,
|
|
right: padding,
|
|
bottom: padding,
|
|
left: padding
|
|
};
|
|
}
|
|
|
|
function rectToClientRect(rect) {
|
|
return { ...rect,
|
|
top: rect.y,
|
|
left: rect.x,
|
|
right: rect.x + rect.width,
|
|
bottom: rect.y + rect.height
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Resolves with an object of overflow side offsets that determine how much the
|
|
* element is overflowing a given clipping boundary.
|
|
* - positive = overflowing the boundary by that number of pixels
|
|
* - negative = how many pixels left before it will overflow
|
|
* - 0 = lies flush with the boundary
|
|
* @see https://floating-ui.com/docs/detectOverflow
|
|
*/
|
|
async function detectOverflow(middlewareArguments, options) {
|
|
var _await$platform$isEle;
|
|
|
|
if (options === void 0) {
|
|
options = {};
|
|
}
|
|
|
|
const {
|
|
x,
|
|
y,
|
|
platform,
|
|
rects,
|
|
elements,
|
|
strategy
|
|
} = middlewareArguments;
|
|
const {
|
|
boundary = 'clippingAncestors',
|
|
rootBoundary = 'viewport',
|
|
elementContext = 'floating',
|
|
altBoundary = false,
|
|
padding = 0
|
|
} = options;
|
|
const paddingObject = getSideObjectFromPadding(padding);
|
|
const altContext = elementContext === 'floating' ? 'reference' : 'floating';
|
|
const element = elements[altBoundary ? altContext : elementContext];
|
|
const clippingClientRect = rectToClientRect(await platform.getClippingRect({
|
|
element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
|
|
boundary,
|
|
rootBoundary,
|
|
strategy
|
|
}));
|
|
const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
|
|
rect: elementContext === 'floating' ? { ...rects.floating,
|
|
x,
|
|
y
|
|
} : rects.reference,
|
|
offsetParent: await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating)),
|
|
strategy
|
|
}) : rects[elementContext]);
|
|
return {
|
|
top: clippingClientRect.top - elementClientRect.top + paddingObject.top,
|
|
bottom: elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom,
|
|
left: clippingClientRect.left - elementClientRect.left + paddingObject.left,
|
|
right: elementClientRect.right - clippingClientRect.right + paddingObject.right
|
|
};
|
|
}
|
|
|
|
const min$2 = Math.min;
|
|
const max$2 = Math.max;
|
|
|
|
function within(min$1, value, max$1) {
|
|
return max$2(min$1, min$2(value, max$1));
|
|
}
|
|
|
|
/**
|
|
* Positions an inner element of the floating element such that it is centered
|
|
* to the reference element.
|
|
* @see https://floating-ui.com/docs/arrow
|
|
*/
|
|
const arrow = options => ({
|
|
name: 'arrow',
|
|
options,
|
|
|
|
async fn(middlewareArguments) {
|
|
// Since `element` is required, we don't Partial<> the type
|
|
const {
|
|
element,
|
|
padding = 0
|
|
} = options != null ? options : {};
|
|
const {
|
|
x,
|
|
y,
|
|
placement,
|
|
rects,
|
|
platform
|
|
} = middlewareArguments;
|
|
|
|
if (element == null) {
|
|
|
|
return {};
|
|
}
|
|
|
|
const paddingObject = getSideObjectFromPadding(padding);
|
|
const coords = {
|
|
x,
|
|
y
|
|
};
|
|
const axis = getMainAxisFromPlacement(placement);
|
|
const alignment = getAlignment(placement);
|
|
const length = getLengthFromAxis(axis);
|
|
const arrowDimensions = await platform.getDimensions(element);
|
|
const minProp = axis === 'y' ? 'top' : 'left';
|
|
const maxProp = axis === 'y' ? 'bottom' : 'right';
|
|
const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
|
|
const startDiff = coords[axis] - rects.reference[axis];
|
|
const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
|
|
let clientSize = arrowOffsetParent ? axis === 'y' ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0;
|
|
|
|
if (clientSize === 0) {
|
|
clientSize = rects.floating[length];
|
|
}
|
|
|
|
const centerToReference = endDiff / 2 - startDiff / 2; // Make sure the arrow doesn't overflow the floating element if the center
|
|
// point is outside the floating element's bounds
|
|
|
|
const min = paddingObject[minProp];
|
|
const max = clientSize - arrowDimensions[length] - paddingObject[maxProp];
|
|
const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
|
|
const offset = within(min, center, max); // Make sure that arrow points at the reference
|
|
|
|
const alignmentPadding = alignment === 'start' ? paddingObject[minProp] : paddingObject[maxProp];
|
|
const shouldAddOffset = alignmentPadding > 0 && center !== offset && rects.reference[length] <= rects.floating[length];
|
|
const alignmentOffset = shouldAddOffset ? center < min ? min - center : max - center : 0;
|
|
return {
|
|
[axis]: coords[axis] - alignmentOffset,
|
|
data: {
|
|
[axis]: offset,
|
|
centerOffset: center - offset
|
|
}
|
|
};
|
|
}
|
|
|
|
});
|
|
|
|
const hash$1 = {
|
|
left: 'right',
|
|
right: 'left',
|
|
bottom: 'top',
|
|
top: 'bottom'
|
|
};
|
|
function getOppositePlacement(placement) {
|
|
return placement.replace(/left|right|bottom|top/g, matched => hash$1[matched]);
|
|
}
|
|
|
|
function getAlignmentSides(placement, rects, rtl) {
|
|
if (rtl === void 0) {
|
|
rtl = false;
|
|
}
|
|
|
|
const alignment = getAlignment(placement);
|
|
const mainAxis = getMainAxisFromPlacement(placement);
|
|
const length = getLengthFromAxis(mainAxis);
|
|
let mainAlignmentSide = mainAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
|
|
|
|
if (rects.reference[length] > rects.floating[length]) {
|
|
mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
|
|
}
|
|
|
|
return {
|
|
main: mainAlignmentSide,
|
|
cross: getOppositePlacement(mainAlignmentSide)
|
|
};
|
|
}
|
|
|
|
const hash = {
|
|
start: 'end',
|
|
end: 'start'
|
|
};
|
|
function getOppositeAlignmentPlacement(placement) {
|
|
return placement.replace(/start|end/g, matched => hash[matched]);
|
|
}
|
|
|
|
function getExpandedPlacements(placement) {
|
|
const oppositePlacement = getOppositePlacement(placement);
|
|
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
|
|
}
|
|
|
|
/**
|
|
* Changes the placement of the floating element to one that will fit if the
|
|
* initially specified `placement` does not.
|
|
* @see https://floating-ui.com/docs/flip
|
|
*/
|
|
const flip = function (options) {
|
|
if (options === void 0) {
|
|
options = {};
|
|
}
|
|
|
|
return {
|
|
name: 'flip',
|
|
options,
|
|
|
|
async fn(middlewareArguments) {
|
|
var _middlewareData$flip;
|
|
|
|
const {
|
|
placement,
|
|
middlewareData,
|
|
rects,
|
|
initialPlacement,
|
|
platform,
|
|
elements
|
|
} = middlewareArguments;
|
|
const {
|
|
mainAxis: checkMainAxis = true,
|
|
crossAxis: checkCrossAxis = true,
|
|
fallbackPlacements: specifiedFallbackPlacements,
|
|
fallbackStrategy = 'bestFit',
|
|
flipAlignment = true,
|
|
...detectOverflowOptions
|
|
} = options;
|
|
const side = getSide(placement);
|
|
const isBasePlacement = side === initialPlacement;
|
|
const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
|
|
const placements = [initialPlacement, ...fallbackPlacements];
|
|
const overflow = await detectOverflow(middlewareArguments, detectOverflowOptions);
|
|
const overflows = [];
|
|
let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
|
|
|
|
if (checkMainAxis) {
|
|
overflows.push(overflow[side]);
|
|
}
|
|
|
|
if (checkCrossAxis) {
|
|
const {
|
|
main,
|
|
cross
|
|
} = getAlignmentSides(placement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
|
|
overflows.push(overflow[main], overflow[cross]);
|
|
}
|
|
|
|
overflowsData = [...overflowsData, {
|
|
placement,
|
|
overflows
|
|
}]; // One or more sides is overflowing
|
|
|
|
if (!overflows.every(side => side <= 0)) {
|
|
var _middlewareData$flip$, _middlewareData$flip2;
|
|
|
|
const nextIndex = ((_middlewareData$flip$ = (_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) != null ? _middlewareData$flip$ : 0) + 1;
|
|
const nextPlacement = placements[nextIndex];
|
|
|
|
if (nextPlacement) {
|
|
// Try next placement and re-run the lifecycle
|
|
return {
|
|
data: {
|
|
index: nextIndex,
|
|
overflows: overflowsData
|
|
},
|
|
reset: {
|
|
placement: nextPlacement
|
|
}
|
|
};
|
|
}
|
|
|
|
let resetPlacement = 'bottom';
|
|
|
|
switch (fallbackStrategy) {
|
|
case 'bestFit':
|
|
{
|
|
var _overflowsData$map$so;
|
|
|
|
const placement = (_overflowsData$map$so = overflowsData.map(d => [d, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$map$so[0].placement;
|
|
|
|
if (placement) {
|
|
resetPlacement = placement;
|
|
}
|
|
|
|
break;
|
|
}
|
|
|
|
case 'initialPlacement':
|
|
resetPlacement = initialPlacement;
|
|
break;
|
|
}
|
|
|
|
if (placement !== resetPlacement) {
|
|
return {
|
|
reset: {
|
|
placement: resetPlacement
|
|
}
|
|
};
|
|
}
|
|
}
|
|
|
|
return {};
|
|
}
|
|
|
|
};
|
|
};
|
|
|
|
async function convertValueToCoords(middlewareArguments, value) {
|
|
const {
|
|
placement,
|
|
platform,
|
|
elements
|
|
} = middlewareArguments;
|
|
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
|
|
const side = getSide(placement);
|
|
const alignment = getAlignment(placement);
|
|
const isVertical = getMainAxisFromPlacement(placement) === 'x';
|
|
const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
|
|
const crossAxisMulti = rtl && isVertical ? -1 : 1;
|
|
const rawValue = typeof value === 'function' ? value(middlewareArguments) : value; // eslint-disable-next-line prefer-const
|
|
|
|
let {
|
|
mainAxis,
|
|
crossAxis,
|
|
alignmentAxis
|
|
} = typeof rawValue === 'number' ? {
|
|
mainAxis: rawValue,
|
|
crossAxis: 0,
|
|
alignmentAxis: null
|
|
} : {
|
|
mainAxis: 0,
|
|
crossAxis: 0,
|
|
alignmentAxis: null,
|
|
...rawValue
|
|
};
|
|
|
|
if (alignment && typeof alignmentAxis === 'number') {
|
|
crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
|
|
}
|
|
|
|
return isVertical ? {
|
|
x: crossAxis * crossAxisMulti,
|
|
y: mainAxis * mainAxisMulti
|
|
} : {
|
|
x: mainAxis * mainAxisMulti,
|
|
y: crossAxis * crossAxisMulti
|
|
};
|
|
}
|
|
/**
|
|
* Displaces the floating element from its reference element.
|
|
* @see https://floating-ui.com/docs/offset
|
|
*/
|
|
|
|
const offset = function (value) {
|
|
if (value === void 0) {
|
|
value = 0;
|
|
}
|
|
|
|
return {
|
|
name: 'offset',
|
|
options: value,
|
|
|
|
async fn(middlewareArguments) {
|
|
const {
|
|
x,
|
|
y
|
|
} = middlewareArguments;
|
|
const diffCoords = await convertValueToCoords(middlewareArguments, value);
|
|
return {
|
|
x: x + diffCoords.x,
|
|
y: y + diffCoords.y,
|
|
data: diffCoords
|
|
};
|
|
}
|
|
|
|
};
|
|
};
|
|
|
|
function getCrossAxis(axis) {
|
|
return axis === 'x' ? 'y' : 'x';
|
|
}
|
|
|
|
/**
|
|
* Shifts the floating element in order to keep it in view when it will overflow
|
|
* a clipping boundary.
|
|
* @see https://floating-ui.com/docs/shift
|
|
*/
|
|
const shift = function (options) {
|
|
if (options === void 0) {
|
|
options = {};
|
|
}
|
|
|
|
return {
|
|
name: 'shift',
|
|
options,
|
|
|
|
async fn(middlewareArguments) {
|
|
const {
|
|
x,
|
|
y,
|
|
placement
|
|
} = middlewareArguments;
|
|
const {
|
|
mainAxis: checkMainAxis = true,
|
|
crossAxis: checkCrossAxis = false,
|
|
limiter = {
|
|
fn: _ref => {
|
|
let {
|
|
x,
|
|
y
|
|
} = _ref;
|
|
return {
|
|
x,
|
|
y
|
|
};
|
|
}
|
|
},
|
|
...detectOverflowOptions
|
|
} = options;
|
|
const coords = {
|
|
x,
|
|
y
|
|
};
|
|
const overflow = await detectOverflow(middlewareArguments, detectOverflowOptions);
|
|
const mainAxis = getMainAxisFromPlacement(getSide(placement));
|
|
const crossAxis = getCrossAxis(mainAxis);
|
|
let mainAxisCoord = coords[mainAxis];
|
|
let crossAxisCoord = coords[crossAxis];
|
|
|
|
if (checkMainAxis) {
|
|
const minSide = mainAxis === 'y' ? 'top' : 'left';
|
|
const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
|
|
const min = mainAxisCoord + overflow[minSide];
|
|
const max = mainAxisCoord - overflow[maxSide];
|
|
mainAxisCoord = within(min, mainAxisCoord, max);
|
|
}
|
|
|
|
if (checkCrossAxis) {
|
|
const minSide = crossAxis === 'y' ? 'top' : 'left';
|
|
const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
|
|
const min = crossAxisCoord + overflow[minSide];
|
|
const max = crossAxisCoord - overflow[maxSide];
|
|
crossAxisCoord = within(min, crossAxisCoord, max);
|
|
}
|
|
|
|
const limitedCoords = limiter.fn({ ...middlewareArguments,
|
|
[mainAxis]: mainAxisCoord,
|
|
[crossAxis]: crossAxisCoord
|
|
});
|
|
return { ...limitedCoords,
|
|
data: {
|
|
x: limitedCoords.x - x,
|
|
y: limitedCoords.y - y
|
|
}
|
|
};
|
|
}
|
|
|
|
};
|
|
};
|
|
|
|
function isWindow(value) {
|
|
return value && value.document && value.location && value.alert && value.setInterval;
|
|
}
|
|
function getWindow(node) {
|
|
if (node == null) {
|
|
return window;
|
|
}
|
|
|
|
if (!isWindow(node)) {
|
|
const ownerDocument = node.ownerDocument;
|
|
return ownerDocument ? ownerDocument.defaultView || window : window;
|
|
}
|
|
|
|
return node;
|
|
}
|
|
|
|
function getComputedStyle$1(element) {
|
|
return getWindow(element).getComputedStyle(element);
|
|
}
|
|
|
|
function getNodeName(node) {
|
|
return isWindow(node) ? '' : node ? (node.nodeName || '').toLowerCase() : '';
|
|
}
|
|
|
|
function getUAString() {
|
|
const uaData = navigator.userAgentData;
|
|
|
|
if (uaData != null && uaData.brands) {
|
|
return uaData.brands.map(item => item.brand + "/" + item.version).join(' ');
|
|
}
|
|
|
|
return navigator.userAgent;
|
|
}
|
|
|
|
function isHTMLElement(value) {
|
|
return value instanceof getWindow(value).HTMLElement;
|
|
}
|
|
function isElement(value) {
|
|
return value instanceof getWindow(value).Element;
|
|
}
|
|
function isNode(value) {
|
|
return value instanceof getWindow(value).Node;
|
|
}
|
|
function isShadowRoot(node) {
|
|
// Browsers without `ShadowRoot` support
|
|
if (typeof ShadowRoot === 'undefined') {
|
|
return false;
|
|
}
|
|
|
|
const OwnElement = getWindow(node).ShadowRoot;
|
|
return node instanceof OwnElement || node instanceof ShadowRoot;
|
|
}
|
|
function isOverflowElement(element) {
|
|
// Firefox wants us to check `-x` and `-y` variations as well
|
|
const {
|
|
overflow,
|
|
overflowX,
|
|
overflowY
|
|
} = getComputedStyle$1(element);
|
|
return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX);
|
|
}
|
|
function isTableElement(element) {
|
|
return ['table', 'td', 'th'].includes(getNodeName(element));
|
|
}
|
|
function isContainingBlock(element) {
|
|
// TODO: Try and use feature detection here instead
|
|
const isFirefox = /firefox/i.test(getUAString());
|
|
const css = getComputedStyle$1(element); // This is non-exhaustive but covers the most common CSS properties that
|
|
// create a containing block.
|
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
|
|
|
return css.transform !== 'none' || css.perspective !== 'none' || // @ts-ignore (TS 4.1 compat)
|
|
css.contain === 'paint' || ['transform', 'perspective'].includes(css.willChange) || isFirefox && css.willChange === 'filter' || isFirefox && (css.filter ? css.filter !== 'none' : false);
|
|
}
|
|
function isLayoutViewport() {
|
|
// Not Safari
|
|
return !/^((?!chrome|android).)*safari/i.test(getUAString()); // Feature detection for this fails in various ways
|
|
// • Always-visible scrollbar or not
|
|
// • Width of <html>, etc.
|
|
// const vV = win.visualViewport;
|
|
// return vV ? Math.abs(win.innerWidth / vV.scale - vV.width) < 0.5 : true;
|
|
}
|
|
|
|
const min$1 = Math.min;
|
|
const max$1 = Math.max;
|
|
const round = Math.round;
|
|
|
|
function getBoundingClientRect(element, includeScale, isFixedStrategy) {
|
|
var _win$visualViewport$o, _win$visualViewport, _win$visualViewport$o2, _win$visualViewport2;
|
|
|
|
if (includeScale === void 0) {
|
|
includeScale = false;
|
|
}
|
|
|
|
if (isFixedStrategy === void 0) {
|
|
isFixedStrategy = false;
|
|
}
|
|
|
|
const clientRect = element.getBoundingClientRect();
|
|
let scaleX = 1;
|
|
let scaleY = 1;
|
|
|
|
if (includeScale && isHTMLElement(element)) {
|
|
scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1;
|
|
scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1;
|
|
}
|
|
|
|
const win = isElement(element) ? getWindow(element) : window;
|
|
const addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
|
|
const x = (clientRect.left + (addVisualOffsets ? (_win$visualViewport$o = (_win$visualViewport = win.visualViewport) == null ? void 0 : _win$visualViewport.offsetLeft) != null ? _win$visualViewport$o : 0 : 0)) / scaleX;
|
|
const y = (clientRect.top + (addVisualOffsets ? (_win$visualViewport$o2 = (_win$visualViewport2 = win.visualViewport) == null ? void 0 : _win$visualViewport2.offsetTop) != null ? _win$visualViewport$o2 : 0 : 0)) / scaleY;
|
|
const width = clientRect.width / scaleX;
|
|
const height = clientRect.height / scaleY;
|
|
return {
|
|
width,
|
|
height,
|
|
top: y,
|
|
right: x + width,
|
|
bottom: y + height,
|
|
left: x,
|
|
x,
|
|
y
|
|
};
|
|
}
|
|
|
|
function getDocumentElement(node) {
|
|
return ((isNode(node) ? node.ownerDocument : node.document) || window.document).documentElement;
|
|
}
|
|
|
|
function getNodeScroll(element) {
|
|
if (isElement(element)) {
|
|
return {
|
|
scrollLeft: element.scrollLeft,
|
|
scrollTop: element.scrollTop
|
|
};
|
|
}
|
|
|
|
return {
|
|
scrollLeft: element.pageXOffset,
|
|
scrollTop: element.pageYOffset
|
|
};
|
|
}
|
|
|
|
function getWindowScrollBarX(element) {
|
|
// If <html> has a CSS width greater than the viewport, then this will be
|
|
// incorrect for RTL.
|
|
return getBoundingClientRect(getDocumentElement(element)).left + getNodeScroll(element).scrollLeft;
|
|
}
|
|
|
|
function isScaled(element) {
|
|
const rect = getBoundingClientRect(element);
|
|
return round(rect.width) !== element.offsetWidth || round(rect.height) !== element.offsetHeight;
|
|
}
|
|
|
|
function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
const documentElement = getDocumentElement(offsetParent);
|
|
const rect = getBoundingClientRect(element, // @ts-ignore - checked above (TS 4.1 compat)
|
|
isOffsetParentAnElement && isScaled(offsetParent), strategy === 'fixed');
|
|
let scroll = {
|
|
scrollLeft: 0,
|
|
scrollTop: 0
|
|
};
|
|
const offsets = {
|
|
x: 0,
|
|
y: 0
|
|
};
|
|
|
|
if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
|
|
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
scroll = getNodeScroll(offsetParent);
|
|
}
|
|
|
|
if (isHTMLElement(offsetParent)) {
|
|
const offsetRect = getBoundingClientRect(offsetParent, true);
|
|
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
} else if (documentElement) {
|
|
offsets.x = getWindowScrollBarX(documentElement);
|
|
}
|
|
}
|
|
|
|
return {
|
|
x: rect.left + scroll.scrollLeft - offsets.x,
|
|
y: rect.top + scroll.scrollTop - offsets.y,
|
|
width: rect.width,
|
|
height: rect.height
|
|
};
|
|
}
|
|
|
|
function getParentNode(node) {
|
|
if (getNodeName(node) === 'html') {
|
|
return node;
|
|
}
|
|
|
|
return (// this is a quicker (but less type safe) way to save quite some bytes from the bundle
|
|
// @ts-ignore
|
|
node.assignedSlot || // step into the shadow DOM of the parent of a slotted node
|
|
node.parentNode || ( // DOM Element detected
|
|
isShadowRoot(node) ? node.host : null) || // ShadowRoot detected
|
|
getDocumentElement(node) // fallback
|
|
|
|
);
|
|
}
|
|
|
|
function getTrueOffsetParent(element) {
|
|
if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
|
|
return null;
|
|
}
|
|
|
|
return composedOffsetParent(element);
|
|
}
|
|
/**
|
|
* Polyfills the old offsetParent behavior from before the spec was changed:
|
|
* https://github.com/w3c/csswg-drafts/issues/159
|
|
*/
|
|
|
|
|
|
function composedOffsetParent(element) {
|
|
let {
|
|
offsetParent
|
|
} = element;
|
|
let ancestor = element;
|
|
let foundInsideSlot = false;
|
|
|
|
while (ancestor && ancestor !== offsetParent) {
|
|
const {
|
|
assignedSlot
|
|
} = ancestor;
|
|
|
|
if (assignedSlot) {
|
|
let newOffsetParent = assignedSlot.offsetParent;
|
|
|
|
if (getComputedStyle$1(assignedSlot).display === 'contents') {
|
|
const hadStyleAttribute = assignedSlot.hasAttribute('style');
|
|
const oldDisplay = assignedSlot.style.display;
|
|
assignedSlot.style.display = getComputedStyle$1(ancestor).display;
|
|
newOffsetParent = assignedSlot.offsetParent;
|
|
assignedSlot.style.display = oldDisplay;
|
|
|
|
if (!hadStyleAttribute) {
|
|
assignedSlot.removeAttribute('style');
|
|
}
|
|
}
|
|
|
|
ancestor = assignedSlot;
|
|
|
|
if (offsetParent !== newOffsetParent) {
|
|
offsetParent = newOffsetParent;
|
|
foundInsideSlot = true;
|
|
}
|
|
} else if (isShadowRoot(ancestor) && ancestor.host && foundInsideSlot) {
|
|
break;
|
|
}
|
|
|
|
ancestor = isShadowRoot(ancestor) && ancestor.host || ancestor.parentNode;
|
|
}
|
|
|
|
return offsetParent;
|
|
}
|
|
|
|
function getContainingBlock(element) {
|
|
let currentNode = getParentNode(element);
|
|
|
|
if (isShadowRoot(currentNode)) {
|
|
currentNode = currentNode.host;
|
|
}
|
|
|
|
while (isHTMLElement(currentNode) && !['html', 'body'].includes(getNodeName(currentNode))) {
|
|
if (isContainingBlock(currentNode)) {
|
|
return currentNode;
|
|
} else {
|
|
const parent = currentNode.parentNode;
|
|
currentNode = isShadowRoot(parent) ? parent.host : parent;
|
|
}
|
|
}
|
|
|
|
return null;
|
|
} // Gets the closest ancestor positioned element. Handles some edge cases,
|
|
// such as table ancestors and cross browser bugs.
|
|
|
|
|
|
function getOffsetParent(element) {
|
|
const window = getWindow(element);
|
|
let offsetParent = getTrueOffsetParent(element);
|
|
|
|
while (offsetParent && isTableElement(offsetParent) && getComputedStyle$1(offsetParent).position === 'static') {
|
|
offsetParent = getTrueOffsetParent(offsetParent);
|
|
}
|
|
|
|
if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle$1(offsetParent).position === 'static' && !isContainingBlock(offsetParent))) {
|
|
return window;
|
|
}
|
|
|
|
return offsetParent || getContainingBlock(element) || window;
|
|
}
|
|
|
|
function getDimensions(element) {
|
|
if (isHTMLElement(element)) {
|
|
return {
|
|
width: element.offsetWidth,
|
|
height: element.offsetHeight
|
|
};
|
|
}
|
|
|
|
const rect = getBoundingClientRect(element);
|
|
return {
|
|
width: rect.width,
|
|
height: rect.height
|
|
};
|
|
}
|
|
|
|
function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
let {
|
|
rect,
|
|
offsetParent,
|
|
strategy
|
|
} = _ref;
|
|
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
const documentElement = getDocumentElement(offsetParent);
|
|
|
|
if (offsetParent === documentElement) {
|
|
return rect;
|
|
}
|
|
|
|
let scroll = {
|
|
scrollLeft: 0,
|
|
scrollTop: 0
|
|
};
|
|
const offsets = {
|
|
x: 0,
|
|
y: 0
|
|
};
|
|
|
|
if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
|
|
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
scroll = getNodeScroll(offsetParent);
|
|
}
|
|
|
|
if (isHTMLElement(offsetParent)) {
|
|
const offsetRect = getBoundingClientRect(offsetParent, true);
|
|
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
} // This doesn't appear to be need to be negated.
|
|
// else if (documentElement) {
|
|
// offsets.x = getWindowScrollBarX(documentElement);
|
|
// }
|
|
|
|
}
|
|
|
|
return { ...rect,
|
|
x: rect.x - scroll.scrollLeft + offsets.x,
|
|
y: rect.y - scroll.scrollTop + offsets.y
|
|
};
|
|
}
|
|
|
|
function getViewportRect(element, strategy) {
|
|
const win = getWindow(element);
|
|
const html = getDocumentElement(element);
|
|
const visualViewport = win.visualViewport;
|
|
let width = html.clientWidth;
|
|
let height = html.clientHeight;
|
|
let x = 0;
|
|
let y = 0;
|
|
|
|
if (visualViewport) {
|
|
width = visualViewport.width;
|
|
height = visualViewport.height;
|
|
const layoutViewport = isLayoutViewport();
|
|
|
|
if (layoutViewport || !layoutViewport && strategy === 'fixed') {
|
|
x = visualViewport.offsetLeft;
|
|
y = visualViewport.offsetTop;
|
|
}
|
|
}
|
|
|
|
return {
|
|
width,
|
|
height,
|
|
x,
|
|
y
|
|
};
|
|
}
|
|
|
|
// of the `<html>` and `<body>` rect bounds if horizontally scrollable
|
|
|
|
function getDocumentRect(element) {
|
|
var _element$ownerDocumen;
|
|
|
|
const html = getDocumentElement(element);
|
|
const scroll = getNodeScroll(element);
|
|
const body = (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body;
|
|
const width = max$1(html.scrollWidth, html.clientWidth, body ? body.scrollWidth : 0, body ? body.clientWidth : 0);
|
|
const height = max$1(html.scrollHeight, html.clientHeight, body ? body.scrollHeight : 0, body ? body.clientHeight : 0);
|
|
let x = -scroll.scrollLeft + getWindowScrollBarX(element);
|
|
const y = -scroll.scrollTop;
|
|
|
|
if (getComputedStyle$1(body || html).direction === 'rtl') {
|
|
x += max$1(html.clientWidth, body ? body.clientWidth : 0) - width;
|
|
}
|
|
|
|
return {
|
|
width,
|
|
height,
|
|
x,
|
|
y
|
|
};
|
|
}
|
|
|
|
function getNearestOverflowAncestor(node) {
|
|
const parentNode = getParentNode(node);
|
|
|
|
if (['html', 'body', '#document'].includes(getNodeName(parentNode))) {
|
|
// @ts-ignore assume body is always available
|
|
return node.ownerDocument.body;
|
|
}
|
|
|
|
if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
|
|
return parentNode;
|
|
}
|
|
|
|
return getNearestOverflowAncestor(parentNode);
|
|
}
|
|
|
|
function getOverflowAncestors(node, list) {
|
|
var _node$ownerDocument;
|
|
|
|
if (list === void 0) {
|
|
list = [];
|
|
}
|
|
|
|
const scrollableAncestor = getNearestOverflowAncestor(node);
|
|
const isBody = scrollableAncestor === ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.body);
|
|
const win = getWindow(scrollableAncestor);
|
|
const target = isBody ? [win].concat(win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []) : scrollableAncestor;
|
|
const updatedList = list.concat(target);
|
|
return isBody ? updatedList : // @ts-ignore: isBody tells us target will be an HTMLElement here
|
|
updatedList.concat(getOverflowAncestors(target));
|
|
}
|
|
|
|
function contains(parent, child) {
|
|
const rootNode = child.getRootNode == null ? void 0 : child.getRootNode(); // First, attempt with faster native method
|
|
|
|
if (parent.contains(child)) {
|
|
return true;
|
|
} // then fallback to custom implementation with Shadow DOM support
|
|
else if (rootNode && isShadowRoot(rootNode)) {
|
|
let next = child;
|
|
|
|
do {
|
|
// use `===` replace node.isSameNode()
|
|
if (next && parent === next) {
|
|
return true;
|
|
} // @ts-ignore: need a better way to handle this...
|
|
|
|
|
|
next = next.parentNode || next.host;
|
|
} while (next);
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
function getInnerBoundingClientRect(element, strategy) {
|
|
const clientRect = getBoundingClientRect(element, false, strategy === 'fixed');
|
|
const top = clientRect.top + element.clientTop;
|
|
const left = clientRect.left + element.clientLeft;
|
|
return {
|
|
top,
|
|
left,
|
|
x: left,
|
|
y: top,
|
|
right: left + element.clientWidth,
|
|
bottom: top + element.clientHeight,
|
|
width: element.clientWidth,
|
|
height: element.clientHeight
|
|
};
|
|
}
|
|
|
|
function getClientRectFromClippingAncestor(element, clippingParent, strategy) {
|
|
if (clippingParent === 'viewport') {
|
|
return rectToClientRect(getViewportRect(element, strategy));
|
|
}
|
|
|
|
if (isElement(clippingParent)) {
|
|
return getInnerBoundingClientRect(clippingParent, strategy);
|
|
}
|
|
|
|
return rectToClientRect(getDocumentRect(getDocumentElement(element)));
|
|
} // A "clipping ancestor" is an overflowable container with the characteristic of
|
|
// clipping (or hiding) overflowing elements with a position different from
|
|
// `initial`
|
|
|
|
|
|
function getClippingAncestors(element) {
|
|
const clippingAncestors = getOverflowAncestors(element);
|
|
const canEscapeClipping = ['absolute', 'fixed'].includes(getComputedStyle$1(element).position);
|
|
const clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element;
|
|
|
|
if (!isElement(clipperElement)) {
|
|
return [];
|
|
} // @ts-ignore isElement check ensures we return Array<Element>
|
|
|
|
|
|
return clippingAncestors.filter(clippingAncestors => isElement(clippingAncestors) && contains(clippingAncestors, clipperElement) && getNodeName(clippingAncestors) !== 'body');
|
|
} // Gets the maximum area that the element is visible in due to any number of
|
|
// clipping ancestors
|
|
|
|
|
|
function getClippingRect(_ref) {
|
|
let {
|
|
element,
|
|
boundary,
|
|
rootBoundary,
|
|
strategy
|
|
} = _ref;
|
|
const mainClippingAncestors = boundary === 'clippingAncestors' ? getClippingAncestors(element) : [].concat(boundary);
|
|
const clippingAncestors = [...mainClippingAncestors, rootBoundary];
|
|
const firstClippingAncestor = clippingAncestors[0];
|
|
const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
|
|
const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
|
|
accRect.top = max$1(rect.top, accRect.top);
|
|
accRect.right = min$1(rect.right, accRect.right);
|
|
accRect.bottom = min$1(rect.bottom, accRect.bottom);
|
|
accRect.left = max$1(rect.left, accRect.left);
|
|
return accRect;
|
|
}, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
|
|
return {
|
|
width: clippingRect.right - clippingRect.left,
|
|
height: clippingRect.bottom - clippingRect.top,
|
|
x: clippingRect.left,
|
|
y: clippingRect.top
|
|
};
|
|
}
|
|
|
|
const platform = {
|
|
getClippingRect,
|
|
convertOffsetParentRelativeRectToViewportRelativeRect,
|
|
isElement,
|
|
getDimensions,
|
|
getOffsetParent,
|
|
getDocumentElement,
|
|
getElementRects: _ref => {
|
|
let {
|
|
reference,
|
|
floating,
|
|
strategy
|
|
} = _ref;
|
|
return {
|
|
reference: getRectRelativeToOffsetParent(reference, getOffsetParent(floating), strategy),
|
|
floating: { ...getDimensions(floating),
|
|
x: 0,
|
|
y: 0
|
|
}
|
|
};
|
|
},
|
|
getClientRects: element => Array.from(element.getClientRects()),
|
|
isRTL: element => getComputedStyle$1(element).direction === 'rtl'
|
|
};
|
|
|
|
/**
|
|
* Automatically updates the position of the floating element when necessary.
|
|
* @see https://floating-ui.com/docs/autoUpdate
|
|
*/
|
|
function autoUpdate(reference, floating, update, options) {
|
|
if (options === void 0) {
|
|
options = {};
|
|
}
|
|
|
|
const {
|
|
ancestorScroll: _ancestorScroll = true,
|
|
ancestorResize: _ancestorResize = true,
|
|
elementResize = true,
|
|
animationFrame = false
|
|
} = options;
|
|
const ancestorScroll = _ancestorScroll && !animationFrame;
|
|
const ancestorResize = _ancestorResize && !animationFrame;
|
|
const ancestors = ancestorScroll || ancestorResize ? [...(isElement(reference) ? getOverflowAncestors(reference) : []), ...getOverflowAncestors(floating)] : [];
|
|
ancestors.forEach(ancestor => {
|
|
ancestorScroll && ancestor.addEventListener('scroll', update, {
|
|
passive: true
|
|
});
|
|
ancestorResize && ancestor.addEventListener('resize', update);
|
|
});
|
|
let observer = null;
|
|
|
|
if (elementResize) {
|
|
let initialUpdate = true;
|
|
observer = new ResizeObserver(() => {
|
|
if (!initialUpdate) {
|
|
update();
|
|
}
|
|
|
|
initialUpdate = false;
|
|
});
|
|
isElement(reference) && !animationFrame && observer.observe(reference);
|
|
observer.observe(floating);
|
|
}
|
|
|
|
let frameId;
|
|
let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
|
|
|
|
if (animationFrame) {
|
|
frameLoop();
|
|
}
|
|
|
|
function frameLoop() {
|
|
const nextRefRect = getBoundingClientRect(reference);
|
|
|
|
if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
|
|
update();
|
|
}
|
|
|
|
prevRefRect = nextRefRect;
|
|
frameId = requestAnimationFrame(frameLoop);
|
|
}
|
|
|
|
update();
|
|
return () => {
|
|
var _observer;
|
|
|
|
ancestors.forEach(ancestor => {
|
|
ancestorScroll && ancestor.removeEventListener('scroll', update);
|
|
ancestorResize && ancestor.removeEventListener('resize', update);
|
|
});
|
|
(_observer = observer) == null ? void 0 : _observer.disconnect();
|
|
observer = null;
|
|
|
|
if (animationFrame) {
|
|
cancelAnimationFrame(frameId);
|
|
}
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Computes the `x` and `y` coordinates that will place the floating element
|
|
* next to a reference element when it is given a certain CSS positioning
|
|
* strategy.
|
|
*/
|
|
|
|
const computePosition = (reference, floating, options) => computePosition$1(reference, floating, {
|
|
platform,
|
|
...options
|
|
});
|
|
|
|
const useFloatingProps = buildProps({});
|
|
const unrefReference = (elRef) => {
|
|
if (!isClient)
|
|
return;
|
|
if (!elRef)
|
|
return elRef;
|
|
const unrefEl = unrefElement(elRef);
|
|
if (unrefEl)
|
|
return unrefEl;
|
|
return isRef(elRef) ? unrefEl : elRef;
|
|
};
|
|
const getPositionDataWithUnit = (record, key) => {
|
|
const value = record == null ? void 0 : record[key];
|
|
return isNil(value) ? "" : `${value}px`;
|
|
};
|
|
const useFloating$1 = ({
|
|
middleware,
|
|
placement,
|
|
strategy
|
|
}) => {
|
|
const referenceRef = ref();
|
|
const contentRef = ref();
|
|
const x = ref();
|
|
const y = ref();
|
|
const middlewareData = ref({});
|
|
const states = {
|
|
x,
|
|
y,
|
|
placement,
|
|
strategy,
|
|
middlewareData
|
|
};
|
|
const update = async () => {
|
|
if (!isClient)
|
|
return;
|
|
const referenceEl = unrefReference(referenceRef);
|
|
const contentEl = unrefElement(contentRef);
|
|
if (!referenceEl || !contentEl)
|
|
return;
|
|
const data = await computePosition(referenceEl, contentEl, {
|
|
placement: unref(placement),
|
|
strategy: unref(strategy),
|
|
middleware: unref(middleware)
|
|
});
|
|
keysOf(states).forEach((key) => {
|
|
states[key].value = data[key];
|
|
});
|
|
};
|
|
onMounted(() => {
|
|
watchEffect(() => {
|
|
update();
|
|
});
|
|
});
|
|
return {
|
|
...states,
|
|
update,
|
|
referenceRef,
|
|
contentRef
|
|
};
|
|
};
|
|
const arrowMiddleware = ({
|
|
arrowRef,
|
|
padding
|
|
}) => {
|
|
return {
|
|
name: "arrow",
|
|
options: {
|
|
element: arrowRef,
|
|
padding
|
|
},
|
|
fn(args) {
|
|
const arrowEl = unref(arrowRef);
|
|
if (!arrowEl)
|
|
return {};
|
|
return arrow({
|
|
element: arrowEl,
|
|
padding
|
|
}).fn(args);
|
|
}
|
|
};
|
|
};
|
|
|
|
function useCursor(input) {
|
|
let selectionInfo;
|
|
function recordCursor() {
|
|
if (input.value == void 0)
|
|
return;
|
|
const { selectionStart, selectionEnd, value } = input.value;
|
|
if (selectionStart == null || selectionEnd == null)
|
|
return;
|
|
const beforeTxt = value.slice(0, Math.max(0, selectionStart));
|
|
const afterTxt = value.slice(Math.max(0, selectionEnd));
|
|
selectionInfo = {
|
|
selectionStart,
|
|
selectionEnd,
|
|
value,
|
|
beforeTxt,
|
|
afterTxt
|
|
};
|
|
}
|
|
function setCursor() {
|
|
if (input.value == void 0 || selectionInfo == void 0)
|
|
return;
|
|
const { value } = input.value;
|
|
const { beforeTxt, afterTxt, selectionStart } = selectionInfo;
|
|
if (beforeTxt == void 0 || afterTxt == void 0 || selectionStart == void 0)
|
|
return;
|
|
let startPos = value.length;
|
|
if (value.endsWith(afterTxt)) {
|
|
startPos = value.length - afterTxt.length;
|
|
} else if (value.startsWith(beforeTxt)) {
|
|
startPos = beforeTxt.length;
|
|
} else {
|
|
const beforeLastChar = beforeTxt[selectionStart - 1];
|
|
const newIndex = value.indexOf(beforeLastChar, selectionStart - 1);
|
|
if (newIndex !== -1) {
|
|
startPos = newIndex + 1;
|
|
}
|
|
}
|
|
input.value.setSelectionRange(startPos, startPos);
|
|
}
|
|
return [recordCursor, setCursor];
|
|
}
|
|
|
|
const getOrderedChildren = (vm, childComponentName, children) => {
|
|
const nodes = flattedChildren(vm.subTree).filter((n) => {
|
|
var _a;
|
|
return isVNode(n) && ((_a = n.type) == null ? void 0 : _a.name) === childComponentName && !!n.component;
|
|
});
|
|
const uids = nodes.map((n) => n.component.uid);
|
|
return uids.map((uid) => children[uid]).filter((p) => !!p);
|
|
};
|
|
const useOrderedChildren = (vm, childComponentName) => {
|
|
const children = {};
|
|
const orderedChildren = shallowRef([]);
|
|
const addChild = (child) => {
|
|
children[child.uid] = child;
|
|
orderedChildren.value = getOrderedChildren(vm, childComponentName, children);
|
|
};
|
|
const removeChild = (uid) => {
|
|
delete children[uid];
|
|
orderedChildren.value = orderedChildren.value.filter((children2) => children2.uid !== uid);
|
|
};
|
|
return {
|
|
children: orderedChildren,
|
|
addChild,
|
|
removeChild
|
|
};
|
|
};
|
|
|
|
const useSizeProp = buildProp({
|
|
type: String,
|
|
values: componentSizes,
|
|
required: false
|
|
});
|
|
const useSizeProps = {
|
|
size: useSizeProp
|
|
};
|
|
const SIZE_INJECTION_KEY = Symbol("size");
|
|
const useGlobalSize = () => {
|
|
const injectedSize = inject(SIZE_INJECTION_KEY, {});
|
|
return computed(() => {
|
|
return unref(injectedSize.size) || "";
|
|
});
|
|
};
|
|
|
|
function useFocusController(target, {
|
|
beforeFocus,
|
|
afterFocus,
|
|
beforeBlur,
|
|
afterBlur
|
|
} = {}) {
|
|
const instance = getCurrentInstance();
|
|
const { emit } = instance;
|
|
const wrapperRef = shallowRef();
|
|
const isFocused = ref(false);
|
|
const handleFocus = (event) => {
|
|
const cancelFocus = isFunction$1(beforeFocus) ? beforeFocus(event) : false;
|
|
if (cancelFocus || isFocused.value)
|
|
return;
|
|
isFocused.value = true;
|
|
emit("focus", event);
|
|
afterFocus == null ? void 0 : afterFocus();
|
|
};
|
|
const handleBlur = (event) => {
|
|
var _a;
|
|
const cancelBlur = isFunction$1(beforeBlur) ? beforeBlur(event) : false;
|
|
if (cancelBlur || event.relatedTarget && ((_a = wrapperRef.value) == null ? void 0 : _a.contains(event.relatedTarget)))
|
|
return;
|
|
isFocused.value = false;
|
|
emit("blur", event);
|
|
afterBlur == null ? void 0 : afterBlur();
|
|
};
|
|
const handleClick = () => {
|
|
var _a, _b;
|
|
if (((_a = wrapperRef.value) == null ? void 0 : _a.contains(document.activeElement)) && wrapperRef.value !== document.activeElement)
|
|
return;
|
|
(_b = target.value) == null ? void 0 : _b.focus();
|
|
};
|
|
watch(wrapperRef, (el) => {
|
|
if (el) {
|
|
el.setAttribute("tabindex", "-1");
|
|
}
|
|
});
|
|
useEventListener(wrapperRef, "focus", handleFocus, true);
|
|
useEventListener(wrapperRef, "blur", handleBlur, true);
|
|
useEventListener(wrapperRef, "click", handleClick, true);
|
|
return {
|
|
isFocused,
|
|
wrapperRef,
|
|
handleFocus,
|
|
handleBlur
|
|
};
|
|
}
|
|
|
|
function useComposition({
|
|
afterComposition,
|
|
emit
|
|
}) {
|
|
const isComposing = ref(false);
|
|
const handleCompositionStart = (event) => {
|
|
emit == null ? void 0 : emit("compositionstart", event);
|
|
isComposing.value = true;
|
|
};
|
|
const handleCompositionUpdate = (event) => {
|
|
var _a;
|
|
emit == null ? void 0 : emit("compositionupdate", event);
|
|
const text = (_a = event.target) == null ? void 0 : _a.value;
|
|
const lastCharacter = text[text.length - 1] || "";
|
|
isComposing.value = !isKorean(lastCharacter);
|
|
};
|
|
const handleCompositionEnd = (event) => {
|
|
emit == null ? void 0 : emit("compositionend", event);
|
|
if (isComposing.value) {
|
|
isComposing.value = false;
|
|
nextTick(() => afterComposition(event));
|
|
}
|
|
};
|
|
const handleComposition = (event) => {
|
|
event.type === "compositionend" ? handleCompositionEnd(event) : handleCompositionUpdate(event);
|
|
};
|
|
return {
|
|
isComposing,
|
|
handleComposition,
|
|
handleCompositionStart,
|
|
handleCompositionUpdate,
|
|
handleCompositionEnd
|
|
};
|
|
}
|
|
|
|
const emptyValuesContextKey = Symbol("emptyValuesContextKey");
|
|
const SCOPE$3 = "use-empty-values";
|
|
const DEFAULT_EMPTY_VALUES = ["", void 0, null];
|
|
const DEFAULT_VALUE_ON_CLEAR = void 0;
|
|
const useEmptyValuesProps = buildProps({
|
|
emptyValues: Array,
|
|
valueOnClear: {
|
|
type: [String, Number, Boolean, Function],
|
|
default: void 0,
|
|
validator: (val) => isFunction$1(val) ? !val() : !val
|
|
}
|
|
});
|
|
const useEmptyValues = (props, defaultValue) => {
|
|
const config = getCurrentInstance() ? inject(emptyValuesContextKey, ref({})) : ref({});
|
|
const emptyValues = computed(() => props.emptyValues || config.value.emptyValues || DEFAULT_EMPTY_VALUES);
|
|
const valueOnClear = computed(() => {
|
|
if (isFunction$1(props.valueOnClear)) {
|
|
return props.valueOnClear();
|
|
} else if (props.valueOnClear !== void 0) {
|
|
return props.valueOnClear;
|
|
} else if (isFunction$1(config.value.valueOnClear)) {
|
|
return config.value.valueOnClear();
|
|
} else if (config.value.valueOnClear !== void 0) {
|
|
return config.value.valueOnClear;
|
|
}
|
|
return defaultValue !== void 0 ? defaultValue : DEFAULT_VALUE_ON_CLEAR;
|
|
});
|
|
const isEmptyValue = (value) => {
|
|
return emptyValues.value.includes(value);
|
|
};
|
|
if (!emptyValues.value.includes(valueOnClear.value)) ;
|
|
return {
|
|
emptyValues,
|
|
valueOnClear,
|
|
isEmptyValue
|
|
};
|
|
};
|
|
|
|
const ariaProps = buildProps({
|
|
ariaLabel: String,
|
|
ariaOrientation: {
|
|
type: String,
|
|
values: ["horizontal", "vertical", "undefined"]
|
|
},
|
|
ariaControls: String
|
|
});
|
|
const useAriaProps = (arias) => {
|
|
return pick(ariaProps, arias);
|
|
};
|
|
|
|
const configProviderContextKey = Symbol();
|
|
|
|
const globalConfig = ref();
|
|
function useGlobalConfig(key, defaultValue = void 0) {
|
|
const config = getCurrentInstance() ? inject(configProviderContextKey, globalConfig) : globalConfig;
|
|
if (key) {
|
|
return computed(() => {
|
|
var _a, _b;
|
|
return (_b = (_a = config.value) == null ? void 0 : _a[key]) != null ? _b : defaultValue;
|
|
});
|
|
} else {
|
|
return config;
|
|
}
|
|
}
|
|
function useGlobalComponentSettings(block, sizeFallback) {
|
|
const config = useGlobalConfig();
|
|
const ns = useNamespace(block, computed(() => {
|
|
var _a;
|
|
return ((_a = config.value) == null ? void 0 : _a.namespace) || defaultNamespace;
|
|
}));
|
|
const locale = useLocale(computed(() => {
|
|
var _a;
|
|
return (_a = config.value) == null ? void 0 : _a.locale;
|
|
}));
|
|
const zIndex = useZIndex(computed(() => {
|
|
var _a;
|
|
return ((_a = config.value) == null ? void 0 : _a.zIndex) || defaultInitialZIndex;
|
|
}));
|
|
const size = computed(() => {
|
|
var _a;
|
|
return unref(sizeFallback) || ((_a = config.value) == null ? void 0 : _a.size) || "";
|
|
});
|
|
provideGlobalConfig(computed(() => unref(config) || {}));
|
|
return {
|
|
ns,
|
|
locale,
|
|
zIndex,
|
|
size
|
|
};
|
|
}
|
|
const provideGlobalConfig = (config, app, global = false) => {
|
|
var _a;
|
|
const inSetup = !!getCurrentInstance();
|
|
const oldConfig = inSetup ? useGlobalConfig() : void 0;
|
|
const provideFn = (_a = app == null ? void 0 : app.provide) != null ? _a : inSetup ? provide : void 0;
|
|
if (!provideFn) {
|
|
return;
|
|
}
|
|
const context = computed(() => {
|
|
const cfg = unref(config);
|
|
if (!(oldConfig == null ? void 0 : oldConfig.value))
|
|
return cfg;
|
|
return mergeConfig(oldConfig.value, cfg);
|
|
});
|
|
provideFn(configProviderContextKey, context);
|
|
provideFn(localeContextKey, computed(() => context.value.locale));
|
|
provideFn(namespaceContextKey, computed(() => context.value.namespace));
|
|
provideFn(zIndexContextKey, computed(() => context.value.zIndex));
|
|
provideFn(SIZE_INJECTION_KEY, {
|
|
size: computed(() => context.value.size || "")
|
|
});
|
|
provideFn(emptyValuesContextKey, computed(() => ({
|
|
emptyValues: context.value.emptyValues,
|
|
valueOnClear: context.value.valueOnClear
|
|
})));
|
|
if (global || !globalConfig.value) {
|
|
globalConfig.value = context.value;
|
|
}
|
|
return context;
|
|
};
|
|
const mergeConfig = (a, b) => {
|
|
const keys = [.../* @__PURE__ */ new Set([...keysOf(a), ...keysOf(b)])];
|
|
const obj = {};
|
|
for (const key of keys) {
|
|
obj[key] = b[key] !== void 0 ? b[key] : a[key];
|
|
}
|
|
return obj;
|
|
};
|
|
|
|
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"
|
|
},
|
|
...useEmptyValuesProps
|
|
});
|
|
|
|
const messageConfig = {};
|
|
const ConfigProvider = defineComponent({
|
|
name: "ElConfigProvider",
|
|
props: configProviderProps,
|
|
setup(props, { slots }) {
|
|
watch(() => props.message, (val) => {
|
|
Object.assign(messageConfig, val != null ? val : {});
|
|
}, { immediate: true, deep: true });
|
|
const config = provideGlobalConfig(props);
|
|
return () => renderSlot(slots, "default", { config: config == null ? void 0 : config.value });
|
|
}
|
|
});
|
|
|
|
const ElConfigProvider = withInstall(ConfigProvider);
|
|
|
|
const version$1 = "2.8.4";
|
|
|
|
const makeInstaller = (components = []) => {
|
|
const install = (app, options) => {
|
|
if (app[INSTALLED_KEY])
|
|
return;
|
|
app[INSTALLED_KEY] = true;
|
|
components.forEach((c) => app.use(c));
|
|
if (options)
|
|
provideGlobalConfig(options, app, true);
|
|
};
|
|
return {
|
|
version: version$1,
|
|
install
|
|
};
|
|
};
|
|
|
|
const affixProps = buildProps({
|
|
zIndex: {
|
|
type: definePropType([Number, String]),
|
|
default: 100
|
|
},
|
|
target: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
offset: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
position: {
|
|
type: String,
|
|
values: ["top", "bottom"],
|
|
default: "top"
|
|
}
|
|
});
|
|
const affixEmits = {
|
|
scroll: ({ scrollTop, fixed }) => isNumber(scrollTop) && isBoolean(fixed),
|
|
[CHANGE_EVENT]: (fixed) => isBoolean(fixed)
|
|
};
|
|
|
|
var _export_sfc = (sfc, props) => {
|
|
const target = sfc.__vccOpts || sfc;
|
|
for (const [key, val] of props) {
|
|
target[key] = val;
|
|
}
|
|
return target;
|
|
};
|
|
|
|
const COMPONENT_NAME$n = "ElAffix";
|
|
const __default__$1O = defineComponent({
|
|
name: COMPONENT_NAME$n
|
|
});
|
|
const _sfc_main$2u = /* @__PURE__ */ defineComponent({
|
|
...__default__$1O,
|
|
props: affixProps,
|
|
emits: affixEmits,
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const ns = useNamespace("affix");
|
|
const target = shallowRef();
|
|
const root = shallowRef();
|
|
const scrollContainer = shallowRef();
|
|
const { height: windowHeight } = useWindowSize();
|
|
const {
|
|
height: rootHeight,
|
|
width: rootWidth,
|
|
top: rootTop,
|
|
bottom: rootBottom,
|
|
update: updateRoot
|
|
} = useElementBounding(root, { windowScroll: false });
|
|
const targetRect = useElementBounding(target);
|
|
const fixed = ref(false);
|
|
const scrollTop = ref(0);
|
|
const transform = ref(0);
|
|
const rootStyle = computed(() => {
|
|
return {
|
|
height: fixed.value ? `${rootHeight.value}px` : "",
|
|
width: fixed.value ? `${rootWidth.value}px` : ""
|
|
};
|
|
});
|
|
const affixStyle = computed(() => {
|
|
if (!fixed.value)
|
|
return {};
|
|
const offset = props.offset ? addUnit(props.offset) : 0;
|
|
return {
|
|
height: `${rootHeight.value}px`,
|
|
width: `${rootWidth.value}px`,
|
|
top: props.position === "top" ? offset : "",
|
|
bottom: props.position === "bottom" ? offset : "",
|
|
transform: transform.value ? `translateY(${transform.value}px)` : "",
|
|
zIndex: props.zIndex
|
|
};
|
|
});
|
|
const update = () => {
|
|
if (!scrollContainer.value)
|
|
return;
|
|
scrollTop.value = scrollContainer.value instanceof Window ? document.documentElement.scrollTop : scrollContainer.value.scrollTop || 0;
|
|
const { position, target: target2, offset } = props;
|
|
const rootHeightOffset = offset + rootHeight.value;
|
|
if (position === "top") {
|
|
if (target2) {
|
|
const difference = targetRect.bottom.value - rootHeightOffset;
|
|
fixed.value = offset > rootTop.value && targetRect.bottom.value > 0;
|
|
transform.value = difference < 0 ? difference : 0;
|
|
} else {
|
|
fixed.value = offset > rootTop.value;
|
|
}
|
|
} else if (target2) {
|
|
const difference = windowHeight.value - targetRect.top.value - rootHeightOffset;
|
|
fixed.value = windowHeight.value - offset < rootBottom.value && windowHeight.value > targetRect.top.value;
|
|
transform.value = difference < 0 ? -difference : 0;
|
|
} else {
|
|
fixed.value = windowHeight.value - offset < rootBottom.value;
|
|
}
|
|
};
|
|
const handleScroll = () => {
|
|
updateRoot();
|
|
emit("scroll", {
|
|
scrollTop: scrollTop.value,
|
|
fixed: fixed.value
|
|
});
|
|
};
|
|
watch(fixed, (val) => emit("change", val));
|
|
onMounted(() => {
|
|
var _a;
|
|
if (props.target) {
|
|
target.value = (_a = document.querySelector(props.target)) != null ? _a : void 0;
|
|
if (!target.value)
|
|
throwError(COMPONENT_NAME$n, `Target does not exist: ${props.target}`);
|
|
} else {
|
|
target.value = document.documentElement;
|
|
}
|
|
scrollContainer.value = getScrollContainer(root.value, true);
|
|
updateRoot();
|
|
});
|
|
useEventListener(scrollContainer, "scroll", handleScroll);
|
|
watchEffect(update);
|
|
expose({
|
|
update,
|
|
updateRoot
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
ref_key: "root",
|
|
ref: root,
|
|
class: normalizeClass(unref(ns).b()),
|
|
style: normalizeStyle(unref(rootStyle))
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass({ [unref(ns).m("fixed")]: fixed.value }),
|
|
style: normalizeStyle(unref(affixStyle))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 6)
|
|
], 6);
|
|
};
|
|
}
|
|
});
|
|
var Affix = /* @__PURE__ */ _export_sfc(_sfc_main$2u, [["__file", "affix.vue"]]);
|
|
|
|
const ElAffix = withInstall(Affix);
|
|
|
|
const iconProps = buildProps({
|
|
size: {
|
|
type: definePropType([Number, String])
|
|
},
|
|
color: {
|
|
type: String
|
|
}
|
|
});
|
|
|
|
const __default__$1N = defineComponent({
|
|
name: "ElIcon",
|
|
inheritAttrs: false
|
|
});
|
|
const _sfc_main$2t = /* @__PURE__ */ defineComponent({
|
|
...__default__$1N,
|
|
props: iconProps,
|
|
setup(__props) {
|
|
const props = __props;
|
|
const ns = useNamespace("icon");
|
|
const style = computed(() => {
|
|
const { size, color } = props;
|
|
if (!size && !color)
|
|
return {};
|
|
return {
|
|
fontSize: isUndefined(size) ? void 0 : addUnit(size),
|
|
"--color": color
|
|
};
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("i", mergeProps({
|
|
class: unref(ns).b(),
|
|
style: unref(style)
|
|
}, _ctx.$attrs), [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 16);
|
|
};
|
|
}
|
|
});
|
|
var Icon = /* @__PURE__ */ _export_sfc(_sfc_main$2t, [["__file", "icon.vue"]]);
|
|
|
|
const ElIcon = withInstall(Icon);
|
|
|
|
const alertEffects = ["light", "dark"];
|
|
const alertProps = buildProps({
|
|
title: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
description: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
type: {
|
|
type: String,
|
|
values: keysOf(TypeComponentsMap),
|
|
default: "info"
|
|
},
|
|
closable: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
closeText: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
showIcon: Boolean,
|
|
center: Boolean,
|
|
effect: {
|
|
type: String,
|
|
values: alertEffects,
|
|
default: "light"
|
|
}
|
|
});
|
|
const alertEmits = {
|
|
close: (evt) => evt instanceof MouseEvent
|
|
};
|
|
|
|
const __default__$1M = defineComponent({
|
|
name: "ElAlert"
|
|
});
|
|
const _sfc_main$2s = /* @__PURE__ */ defineComponent({
|
|
...__default__$1M,
|
|
props: alertProps,
|
|
emits: alertEmits,
|
|
setup(__props, { emit }) {
|
|
const props = __props;
|
|
const { Close } = TypeComponents;
|
|
const slots = useSlots();
|
|
const ns = useNamespace("alert");
|
|
const visible = ref(true);
|
|
const iconComponent = computed(() => TypeComponentsMap[props.type]);
|
|
const iconClass = computed(() => [
|
|
ns.e("icon"),
|
|
{ [ns.is("big")]: !!props.description || !!slots.default }
|
|
]);
|
|
const withDescription = computed(() => {
|
|
return { "with-description": props.description || slots.default };
|
|
});
|
|
const close = (evt) => {
|
|
visible.value = false;
|
|
emit("close", evt);
|
|
};
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createBlock(Transition, {
|
|
name: unref(ns).b("fade"),
|
|
persisted: ""
|
|
}, {
|
|
default: withCtx(() => [
|
|
withDirectives(createElementVNode("div", {
|
|
class: normalizeClass([unref(ns).b(), unref(ns).m(_ctx.type), unref(ns).is("center", _ctx.center), unref(ns).is(_ctx.effect)]),
|
|
role: "alert"
|
|
}, [
|
|
_ctx.showIcon && unref(iconComponent) ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 0,
|
|
class: normalizeClass(unref(iconClass))
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(unref(iconComponent))))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("content"))
|
|
}, [
|
|
_ctx.title || _ctx.$slots.title ? (openBlock(), createElementBlock("span", {
|
|
key: 0,
|
|
class: normalizeClass([unref(ns).e("title"), unref(withDescription)])
|
|
}, [
|
|
renderSlot(_ctx.$slots, "title", {}, () => [
|
|
createTextVNode(toDisplayString(_ctx.title), 1)
|
|
])
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
_ctx.$slots.default || _ctx.description ? (openBlock(), createElementBlock("p", {
|
|
key: 1,
|
|
class: normalizeClass(unref(ns).e("description"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default", {}, () => [
|
|
createTextVNode(toDisplayString(_ctx.description), 1)
|
|
])
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
_ctx.closable ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
|
|
_ctx.closeText ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass([unref(ns).e("close-btn"), unref(ns).is("customed")]),
|
|
onClick: close
|
|
}, toDisplayString(_ctx.closeText), 3)) : (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 1,
|
|
class: normalizeClass(unref(ns).e("close-btn")),
|
|
onClick: close
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(Close))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"]))
|
|
], 64)) : createCommentVNode("v-if", true)
|
|
], 2)
|
|
], 2), [
|
|
[vShow, visible.value]
|
|
])
|
|
]),
|
|
_: 3
|
|
}, 8, ["name"]);
|
|
};
|
|
}
|
|
});
|
|
var Alert = /* @__PURE__ */ _export_sfc(_sfc_main$2s, [["__file", "alert.vue"]]);
|
|
|
|
const ElAlert = withInstall(Alert);
|
|
|
|
const formContextKey = Symbol("formContextKey");
|
|
const formItemContextKey = Symbol("formItemContextKey");
|
|
|
|
const useFormSize = (fallback, ignore = {}) => {
|
|
const emptyRef = ref(void 0);
|
|
const size = ignore.prop ? emptyRef : useProp("size");
|
|
const globalConfig = ignore.global ? emptyRef : useGlobalSize();
|
|
const form = ignore.form ? { size: void 0 } : inject(formContextKey, void 0);
|
|
const formItem = ignore.formItem ? { size: void 0 } : inject(formItemContextKey, void 0);
|
|
return computed(() => size.value || unref(fallback) || (formItem == null ? void 0 : formItem.size) || (form == null ? void 0 : form.size) || globalConfig.value || "");
|
|
};
|
|
const useFormDisabled = (fallback) => {
|
|
const disabled = useProp("disabled");
|
|
const form = inject(formContextKey, void 0);
|
|
return computed(() => disabled.value || unref(fallback) || (form == null ? void 0 : form.disabled) || false);
|
|
};
|
|
const useSize = useFormSize;
|
|
const useDisabled = useFormDisabled;
|
|
|
|
const useFormItem = () => {
|
|
const form = inject(formContextKey, void 0);
|
|
const formItem = inject(formItemContextKey, void 0);
|
|
return {
|
|
form,
|
|
formItem
|
|
};
|
|
};
|
|
const useFormItemInputId = (props, {
|
|
formItemContext,
|
|
disableIdGeneration,
|
|
disableIdManagement
|
|
}) => {
|
|
if (!disableIdGeneration) {
|
|
disableIdGeneration = ref(false);
|
|
}
|
|
if (!disableIdManagement) {
|
|
disableIdManagement = ref(false);
|
|
}
|
|
const inputId = ref();
|
|
let idUnwatch = void 0;
|
|
const isLabeledByFormItem = computed(() => {
|
|
var _a;
|
|
return !!(!(props.label || props.ariaLabel) && formItemContext && formItemContext.inputIds && ((_a = formItemContext.inputIds) == null ? void 0 : _a.length) <= 1);
|
|
});
|
|
onMounted(() => {
|
|
idUnwatch = watch([toRef(props, "id"), disableIdGeneration], ([id, disableIdGeneration2]) => {
|
|
const newId = id != null ? id : !disableIdGeneration2 ? useId().value : void 0;
|
|
if (newId !== inputId.value) {
|
|
if (formItemContext == null ? void 0 : formItemContext.removeInputId) {
|
|
inputId.value && formItemContext.removeInputId(inputId.value);
|
|
if (!(disableIdManagement == null ? void 0 : disableIdManagement.value) && !disableIdGeneration2 && newId) {
|
|
formItemContext.addInputId(newId);
|
|
}
|
|
}
|
|
inputId.value = newId;
|
|
}
|
|
}, { immediate: true });
|
|
});
|
|
onUnmounted(() => {
|
|
idUnwatch && idUnwatch();
|
|
if (formItemContext == null ? void 0 : formItemContext.removeInputId) {
|
|
inputId.value && formItemContext.removeInputId(inputId.value);
|
|
}
|
|
});
|
|
return {
|
|
isLabeledByFormItem,
|
|
inputId
|
|
};
|
|
};
|
|
|
|
const formMetaProps = buildProps({
|
|
size: {
|
|
type: String,
|
|
values: componentSizes
|
|
},
|
|
disabled: Boolean
|
|
});
|
|
const formProps = buildProps({
|
|
...formMetaProps,
|
|
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
|
|
},
|
|
validateOnRuleChange: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
hideRequiredAsterisk: Boolean,
|
|
scrollToError: Boolean,
|
|
scrollIntoViewOptions: {
|
|
type: [Object, Boolean]
|
|
}
|
|
});
|
|
const formEmits = {
|
|
validate: (prop, isValid, message) => (isArray$1(prop) || isString$1(prop)) && isBoolean(isValid) && isString$1(message)
|
|
};
|
|
|
|
function useFormLabelWidth() {
|
|
const potentialLabelWidthArr = ref([]);
|
|
const autoLabelWidth = 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$m = "ElForm";
|
|
const __default__$1L = defineComponent({
|
|
name: COMPONENT_NAME$m
|
|
});
|
|
const _sfc_main$2r = /* @__PURE__ */ defineComponent({
|
|
...__default__$1L,
|
|
props: formProps,
|
|
emits: formEmits,
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const fields = [];
|
|
const formSize = useFormSize();
|
|
const ns = useNamespace("form");
|
|
const formClasses = computed(() => {
|
|
const { labelPosition, inline } = props;
|
|
return [
|
|
ns.b(),
|
|
ns.m(formSize.value || "default"),
|
|
{
|
|
[ns.m(`label-${labelPosition}`)]: labelPosition,
|
|
[ns.m("inline")]: inline
|
|
}
|
|
];
|
|
});
|
|
const getField = (prop) => {
|
|
return fields.find((field) => field.prop === prop);
|
|
};
|
|
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 = 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$1(callback);
|
|
try {
|
|
const result = await doValidateField(modelProps);
|
|
if (result === true) {
|
|
await (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]);
|
|
}
|
|
await (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(props.scrollIntoViewOptions);
|
|
}
|
|
};
|
|
watch(() => props.rules, () => {
|
|
if (props.validateOnRuleChange) {
|
|
validate().catch((err) => debugWarn());
|
|
}
|
|
}, { deep: true });
|
|
provide(formContextKey, reactive({
|
|
...toRefs(props),
|
|
emit,
|
|
resetFields,
|
|
clearValidate,
|
|
validateField,
|
|
getField,
|
|
addField,
|
|
removeField,
|
|
...useFormLabelWidth()
|
|
}));
|
|
expose({
|
|
validate,
|
|
validateField,
|
|
resetFields,
|
|
clearValidate,
|
|
scrollToField,
|
|
fields
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("form", {
|
|
class: normalizeClass(unref(formClasses))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var Form = /* @__PURE__ */ _export_sfc(_sfc_main$2r, [["__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 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.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: ""
|
|
},
|
|
labelPosition: {
|
|
type: String,
|
|
values: ["left", "right", "top", ""],
|
|
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$l = "ElLabelWrap";
|
|
var FormLabelWrap = defineComponent({
|
|
name: COMPONENT_NAME$l,
|
|
props: {
|
|
isAutoWidth: Boolean,
|
|
updateAll: Boolean
|
|
},
|
|
setup(props, {
|
|
slots
|
|
}) {
|
|
const formContext = inject(formContextKey, void 0);
|
|
const formItemContext = inject(formItemContextKey);
|
|
if (!formItemContext)
|
|
throwError(COMPONENT_NAME$l, "usage: <el-form-item><label-wrap /></el-form-item>");
|
|
const ns = useNamespace("form");
|
|
const el = ref();
|
|
const computedWidth = 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") => {
|
|
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");
|
|
onMounted(() => {
|
|
updateLabelWidthFn();
|
|
});
|
|
onBeforeUnmount(() => {
|
|
updateLabelWidth("remove");
|
|
});
|
|
onUpdated(() => updateLabelWidthFn());
|
|
watch(computedWidth, (val, oldVal) => {
|
|
if (props.updateAll) {
|
|
formContext == null ? void 0 : formContext.registerLabelWidth(val, oldVal);
|
|
}
|
|
});
|
|
useResizeObserver(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 labelPosition = formItemContext.labelPosition || formContext.labelPosition;
|
|
const marginPosition = labelPosition === "left" ? "marginRight" : "marginLeft";
|
|
if (marginWidth) {
|
|
style[marginPosition] = `${marginWidth}px`;
|
|
}
|
|
}
|
|
return createVNode("div", {
|
|
"ref": el,
|
|
"class": [ns.be("item", "label-wrap")],
|
|
"style": style
|
|
}, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
|
|
} else {
|
|
return createVNode(Fragment, {
|
|
"ref": el
|
|
}, [(_b = slots.default) == null ? void 0 : _b.call(slots)]);
|
|
}
|
|
};
|
|
}
|
|
});
|
|
|
|
const __default__$1K = defineComponent({
|
|
name: "ElFormItem"
|
|
});
|
|
const _sfc_main$2q = /* @__PURE__ */ defineComponent({
|
|
...__default__$1K,
|
|
props: formItemProps,
|
|
setup(__props, { expose }) {
|
|
const props = __props;
|
|
const slots = useSlots();
|
|
const formContext = inject(formContextKey, void 0);
|
|
const parentFormItemContext = inject(formItemContextKey, void 0);
|
|
const _size = useFormSize(void 0, { formItem: false });
|
|
const ns = useNamespace("form-item");
|
|
const labelId = useId().value;
|
|
const inputIds = ref([]);
|
|
const validateState = ref("");
|
|
const validateStateDebounced = refDebounced(validateState, 100);
|
|
const validateMessage = ref("");
|
|
const formItemRef = ref();
|
|
let initialValue = void 0;
|
|
let isResettingField = false;
|
|
const labelPosition = computed(() => props.labelPosition || (formContext == null ? void 0 : formContext.labelPosition));
|
|
const labelStyle = computed(() => {
|
|
if (labelPosition.value === "top") {
|
|
return {};
|
|
}
|
|
const labelWidth = addUnit(props.labelWidth || (formContext == null ? void 0 : formContext.labelWidth) || "");
|
|
if (labelWidth)
|
|
return { width: labelWidth };
|
|
return {};
|
|
});
|
|
const contentStyle = computed(() => {
|
|
if (labelPosition.value === "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 = 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,
|
|
[ns.m(`label-${labelPosition.value}`)]: labelPosition.value
|
|
}
|
|
]);
|
|
const _inlineMessage = computed(() => isBoolean(props.inlineMessage) ? props.inlineMessage : (formContext == null ? void 0 : formContext.inlineMessage) || false);
|
|
const validateClasses = computed(() => [
|
|
ns.e("error"),
|
|
{ [ns.em("error", "inline")]: _inlineMessage.value }
|
|
]);
|
|
const propString = computed(() => {
|
|
if (!props.prop)
|
|
return "";
|
|
return isString$1(props.prop) ? props.prop : props.prop.join(".");
|
|
});
|
|
const hasLabel = computed(() => {
|
|
return !!(props.label || slots.label);
|
|
});
|
|
const labelFor = computed(() => {
|
|
return props.for || (inputIds.value.length === 1 ? inputIds.value[0] : void 0);
|
|
});
|
|
const isGroup = computed(() => {
|
|
return !labelFor.value && hasLabel.value;
|
|
});
|
|
const isNested = !!parentFormItemContext;
|
|
const fieldValue = computed(() => {
|
|
const model = formContext == null ? void 0 : formContext.model;
|
|
if (!model || !props.prop) {
|
|
return;
|
|
}
|
|
return getProp(model, props.prop).value;
|
|
});
|
|
const normalizedRules = 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 = 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 = computed(() => normalizedRules.value.some((rule) => rule.required));
|
|
const shouldShowError = computed(() => {
|
|
var _a;
|
|
return validateStateDebounced.value === "error" && props.showMessage && ((_a = formContext == null ? void 0 : formContext.showMessage) != null ? _a : true);
|
|
});
|
|
const currentLabel = 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$1(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 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);
|
|
};
|
|
watch(() => props.error, (val) => {
|
|
validateMessage.value = val || "";
|
|
setValidationState(val ? "error" : "");
|
|
}, { immediate: true });
|
|
watch(() => props.validateStatus, (val) => setValidationState(val || ""));
|
|
const context = reactive({
|
|
...toRefs(props),
|
|
$el: formItemRef,
|
|
size: _size,
|
|
validateState,
|
|
labelId,
|
|
inputIds,
|
|
isGroup,
|
|
hasLabel,
|
|
fieldValue,
|
|
addInputId,
|
|
removeInputId,
|
|
resetField,
|
|
clearValidate,
|
|
validate
|
|
});
|
|
provide(formItemContextKey, context);
|
|
onMounted(() => {
|
|
if (props.prop) {
|
|
formContext == null ? void 0 : formContext.addField(context);
|
|
initialValue = clone(fieldValue.value);
|
|
}
|
|
});
|
|
onBeforeUnmount(() => {
|
|
formContext == null ? void 0 : formContext.removeField(context);
|
|
});
|
|
expose({
|
|
size: _size,
|
|
validateMessage,
|
|
validateState,
|
|
validate,
|
|
clearValidate,
|
|
resetField
|
|
});
|
|
return (_ctx, _cache) => {
|
|
var _a;
|
|
return openBlock(), createElementBlock("div", {
|
|
ref_key: "formItemRef",
|
|
ref: formItemRef,
|
|
class: normalizeClass(unref(formItemClasses)),
|
|
role: unref(isGroup) ? "group" : void 0,
|
|
"aria-labelledby": unref(isGroup) ? unref(labelId) : void 0
|
|
}, [
|
|
createVNode(unref(FormLabelWrap), {
|
|
"is-auto-width": unref(labelStyle).width === "auto",
|
|
"update-all": ((_a = unref(formContext)) == null ? void 0 : _a.labelWidth) === "auto"
|
|
}, {
|
|
default: withCtx(() => [
|
|
unref(hasLabel) ? (openBlock(), createBlock(resolveDynamicComponent(unref(labelFor) ? "label" : "div"), {
|
|
key: 0,
|
|
id: unref(labelId),
|
|
for: unref(labelFor),
|
|
class: normalizeClass(unref(ns).e("label")),
|
|
style: normalizeStyle(unref(labelStyle))
|
|
}, {
|
|
default: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "label", { label: unref(currentLabel) }, () => [
|
|
createTextVNode(toDisplayString(unref(currentLabel)), 1)
|
|
])
|
|
]),
|
|
_: 3
|
|
}, 8, ["id", "for", "class", "style"])) : createCommentVNode("v-if", true)
|
|
]),
|
|
_: 3
|
|
}, 8, ["is-auto-width", "update-all"]),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("content")),
|
|
style: normalizeStyle(unref(contentStyle))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default"),
|
|
createVNode(TransitionGroup, {
|
|
name: `${unref(ns).namespace.value}-zoom-in-top`
|
|
}, {
|
|
default: withCtx(() => [
|
|
unref(shouldShowError) ? renderSlot(_ctx.$slots, "error", {
|
|
key: 0,
|
|
error: validateMessage.value
|
|
}, () => [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(validateClasses))
|
|
}, toDisplayString(validateMessage.value), 3)
|
|
]) : createCommentVNode("v-if", true)
|
|
]),
|
|
_: 3
|
|
}, 8, ["name"])
|
|
], 6)
|
|
], 10, ["role", "aria-labelledby"]);
|
|
};
|
|
}
|
|
});
|
|
var FormItem = /* @__PURE__ */ _export_sfc(_sfc_main$2q, [["__file", "form-item.vue"]]);
|
|
|
|
const ElForm = withInstall(Form, {
|
|
FormItem
|
|
});
|
|
const ElFormItem = withNoopInstall(FormItem);
|
|
|
|
let hiddenTextarea = void 0;
|
|
const HIDDEN_STYLE = `
|
|
height:0 !important;
|
|
visibility:hidden !important;
|
|
${isFirefox() ? "" : "overflow:hidden !important;"}
|
|
position:absolute !important;
|
|
z-index:-1000 !important;
|
|
top:0 !important;
|
|
right:0 !important;
|
|
`;
|
|
const CONTEXT_STYLE = [
|
|
"letter-spacing",
|
|
"line-height",
|
|
"padding-top",
|
|
"padding-bottom",
|
|
"font-family",
|
|
"font-weight",
|
|
"font-size",
|
|
"text-rendering",
|
|
"text-transform",
|
|
"width",
|
|
"text-indent",
|
|
"padding-left",
|
|
"padding-right",
|
|
"border-width",
|
|
"box-sizing"
|
|
];
|
|
function calculateNodeStyling(targetElement) {
|
|
const style = window.getComputedStyle(targetElement);
|
|
const boxSizing = style.getPropertyValue("box-sizing");
|
|
const paddingSize = Number.parseFloat(style.getPropertyValue("padding-bottom")) + Number.parseFloat(style.getPropertyValue("padding-top"));
|
|
const borderSize = Number.parseFloat(style.getPropertyValue("border-bottom-width")) + Number.parseFloat(style.getPropertyValue("border-top-width"));
|
|
const contextStyle = CONTEXT_STYLE.map((name) => `${name}:${style.getPropertyValue(name)}`).join(";");
|
|
return { contextStyle, paddingSize, borderSize, boxSizing };
|
|
}
|
|
function calcTextareaHeight(targetElement, minRows = 1, maxRows) {
|
|
var _a;
|
|
if (!hiddenTextarea) {
|
|
hiddenTextarea = document.createElement("textarea");
|
|
document.body.appendChild(hiddenTextarea);
|
|
}
|
|
const { paddingSize, borderSize, boxSizing, contextStyle } = calculateNodeStyling(targetElement);
|
|
hiddenTextarea.setAttribute("style", `${contextStyle};${HIDDEN_STYLE}`);
|
|
hiddenTextarea.value = targetElement.value || targetElement.placeholder || "";
|
|
let height = hiddenTextarea.scrollHeight;
|
|
const result = {};
|
|
if (boxSizing === "border-box") {
|
|
height = height + borderSize;
|
|
} else if (boxSizing === "content-box") {
|
|
height = height - paddingSize;
|
|
}
|
|
hiddenTextarea.value = "";
|
|
const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
|
|
if (isNumber(minRows)) {
|
|
let minHeight = singleRowHeight * minRows;
|
|
if (boxSizing === "border-box") {
|
|
minHeight = minHeight + paddingSize + borderSize;
|
|
}
|
|
height = Math.max(minHeight, height);
|
|
result.minHeight = `${minHeight}px`;
|
|
}
|
|
if (isNumber(maxRows)) {
|
|
let maxHeight = singleRowHeight * maxRows;
|
|
if (boxSizing === "border-box") {
|
|
maxHeight = maxHeight + paddingSize + borderSize;
|
|
}
|
|
height = Math.min(maxHeight, height);
|
|
}
|
|
result.height = `${height}px`;
|
|
(_a = hiddenTextarea.parentNode) == null ? void 0 : _a.removeChild(hiddenTextarea);
|
|
hiddenTextarea = void 0;
|
|
return result;
|
|
}
|
|
|
|
const inputProps = buildProps({
|
|
id: {
|
|
type: String,
|
|
default: void 0
|
|
},
|
|
size: useSizeProp,
|
|
disabled: Boolean,
|
|
modelValue: {
|
|
type: definePropType([
|
|
String,
|
|
Number,
|
|
Object
|
|
]),
|
|
default: ""
|
|
},
|
|
maxlength: {
|
|
type: [String, Number]
|
|
},
|
|
minlength: {
|
|
type: [String, Number]
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: "text"
|
|
},
|
|
resize: {
|
|
type: String,
|
|
values: ["none", "both", "horizontal", "vertical"]
|
|
},
|
|
autosize: {
|
|
type: definePropType([Boolean, Object]),
|
|
default: false
|
|
},
|
|
autocomplete: {
|
|
type: String,
|
|
default: "off"
|
|
},
|
|
formatter: {
|
|
type: Function
|
|
},
|
|
parser: {
|
|
type: Function
|
|
},
|
|
placeholder: {
|
|
type: String
|
|
},
|
|
form: {
|
|
type: String
|
|
},
|
|
readonly: Boolean,
|
|
clearable: Boolean,
|
|
showPassword: Boolean,
|
|
showWordLimit: Boolean,
|
|
suffixIcon: {
|
|
type: iconPropType
|
|
},
|
|
prefixIcon: {
|
|
type: iconPropType
|
|
},
|
|
containerRole: {
|
|
type: String,
|
|
default: void 0
|
|
},
|
|
tabindex: {
|
|
type: [String, Number],
|
|
default: 0
|
|
},
|
|
validateEvent: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
inputStyle: {
|
|
type: definePropType([Object, Array, String]),
|
|
default: () => mutable({})
|
|
},
|
|
autofocus: Boolean,
|
|
rows: {
|
|
type: Number,
|
|
default: 2
|
|
},
|
|
...useAriaProps(["ariaLabel"])
|
|
});
|
|
const inputEmits = {
|
|
[UPDATE_MODEL_EVENT]: (value) => isString$1(value),
|
|
input: (value) => isString$1(value),
|
|
change: (value) => isString$1(value),
|
|
focus: (evt) => evt instanceof FocusEvent,
|
|
blur: (evt) => evt instanceof FocusEvent,
|
|
clear: () => true,
|
|
mouseleave: (evt) => evt instanceof MouseEvent,
|
|
mouseenter: (evt) => evt instanceof MouseEvent,
|
|
keydown: (evt) => evt instanceof Event,
|
|
compositionstart: (evt) => evt instanceof CompositionEvent,
|
|
compositionupdate: (evt) => evt instanceof CompositionEvent,
|
|
compositionend: (evt) => evt instanceof CompositionEvent
|
|
};
|
|
|
|
const __default__$1J = defineComponent({
|
|
name: "ElInput",
|
|
inheritAttrs: false
|
|
});
|
|
const _sfc_main$2p = /* @__PURE__ */ defineComponent({
|
|
...__default__$1J,
|
|
props: inputProps,
|
|
emits: inputEmits,
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const rawAttrs = useAttrs$1();
|
|
const slots = useSlots();
|
|
const containerAttrs = computed(() => {
|
|
const comboBoxAttrs = {};
|
|
if (props.containerRole === "combobox") {
|
|
comboBoxAttrs["aria-haspopup"] = rawAttrs["aria-haspopup"];
|
|
comboBoxAttrs["aria-owns"] = rawAttrs["aria-owns"];
|
|
comboBoxAttrs["aria-expanded"] = rawAttrs["aria-expanded"];
|
|
}
|
|
return comboBoxAttrs;
|
|
});
|
|
const containerKls = computed(() => [
|
|
props.type === "textarea" ? nsTextarea.b() : nsInput.b(),
|
|
nsInput.m(inputSize.value),
|
|
nsInput.is("disabled", inputDisabled.value),
|
|
nsInput.is("exceed", inputExceed.value),
|
|
{
|
|
[nsInput.b("group")]: slots.prepend || slots.append,
|
|
[nsInput.m("prefix")]: slots.prefix || props.prefixIcon,
|
|
[nsInput.m("suffix")]: slots.suffix || props.suffixIcon || props.clearable || props.showPassword,
|
|
[nsInput.bm("suffix", "password-clear")]: showClear.value && showPwdVisible.value,
|
|
[nsInput.b("hidden")]: props.type === "hidden"
|
|
},
|
|
rawAttrs.class
|
|
]);
|
|
const wrapperKls = computed(() => [
|
|
nsInput.e("wrapper"),
|
|
nsInput.is("focus", isFocused.value)
|
|
]);
|
|
const attrs = useAttrs({
|
|
excludeKeys: computed(() => {
|
|
return Object.keys(containerAttrs.value);
|
|
})
|
|
});
|
|
const { form: elForm, formItem: elFormItem } = useFormItem();
|
|
const { inputId } = useFormItemInputId(props, {
|
|
formItemContext: elFormItem
|
|
});
|
|
const inputSize = useFormSize();
|
|
const inputDisabled = useFormDisabled();
|
|
const nsInput = useNamespace("input");
|
|
const nsTextarea = useNamespace("textarea");
|
|
const input = shallowRef();
|
|
const textarea = shallowRef();
|
|
const hovering = ref(false);
|
|
const passwordVisible = ref(false);
|
|
const countStyle = ref();
|
|
const textareaCalcStyle = shallowRef(props.inputStyle);
|
|
const _ref = computed(() => input.value || textarea.value);
|
|
const { wrapperRef, isFocused, handleFocus, handleBlur } = useFocusController(_ref, {
|
|
beforeFocus() {
|
|
return inputDisabled.value;
|
|
},
|
|
afterBlur() {
|
|
var _a;
|
|
if (props.validateEvent) {
|
|
(_a = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "blur").catch((err) => debugWarn());
|
|
}
|
|
}
|
|
});
|
|
const needStatusIcon = computed(() => {
|
|
var _a;
|
|
return (_a = elForm == null ? void 0 : elForm.statusIcon) != null ? _a : false;
|
|
});
|
|
const validateState = computed(() => (elFormItem == null ? void 0 : elFormItem.validateState) || "");
|
|
const validateIcon = computed(() => validateState.value && ValidateComponentsMap[validateState.value]);
|
|
const passwordIcon = computed(() => passwordVisible.value ? view_default : hide_default);
|
|
const containerStyle = computed(() => [
|
|
rawAttrs.style
|
|
]);
|
|
const textareaStyle = computed(() => [
|
|
props.inputStyle,
|
|
textareaCalcStyle.value,
|
|
{ resize: props.resize }
|
|
]);
|
|
const nativeInputValue = computed(() => isNil(props.modelValue) ? "" : String(props.modelValue));
|
|
const showClear = computed(() => props.clearable && !inputDisabled.value && !props.readonly && !!nativeInputValue.value && (isFocused.value || hovering.value));
|
|
const showPwdVisible = computed(() => props.showPassword && !inputDisabled.value && !props.readonly && !!nativeInputValue.value && (!!nativeInputValue.value || isFocused.value));
|
|
const isWordLimitVisible = computed(() => props.showWordLimit && !!props.maxlength && (props.type === "text" || props.type === "textarea") && !inputDisabled.value && !props.readonly && !props.showPassword);
|
|
const textLength = computed(() => nativeInputValue.value.length);
|
|
const inputExceed = computed(() => !!isWordLimitVisible.value && textLength.value > Number(props.maxlength));
|
|
const suffixVisible = computed(() => !!slots.suffix || !!props.suffixIcon || showClear.value || props.showPassword || isWordLimitVisible.value || !!validateState.value && needStatusIcon.value);
|
|
const [recordCursor, setCursor] = useCursor(input);
|
|
useResizeObserver(textarea, (entries) => {
|
|
onceInitSizeTextarea();
|
|
if (!isWordLimitVisible.value || props.resize !== "both")
|
|
return;
|
|
const entry = entries[0];
|
|
const { width } = entry.contentRect;
|
|
countStyle.value = {
|
|
right: `calc(100% - ${width + 15 + 6}px)`
|
|
};
|
|
});
|
|
const resizeTextarea = () => {
|
|
const { type, autosize } = props;
|
|
if (!isClient || type !== "textarea" || !textarea.value)
|
|
return;
|
|
if (autosize) {
|
|
const minRows = isObject$1(autosize) ? autosize.minRows : void 0;
|
|
const maxRows = isObject$1(autosize) ? autosize.maxRows : void 0;
|
|
const textareaStyle2 = calcTextareaHeight(textarea.value, minRows, maxRows);
|
|
textareaCalcStyle.value = {
|
|
overflowY: "hidden",
|
|
...textareaStyle2
|
|
};
|
|
nextTick(() => {
|
|
textarea.value.offsetHeight;
|
|
textareaCalcStyle.value = textareaStyle2;
|
|
});
|
|
} else {
|
|
textareaCalcStyle.value = {
|
|
minHeight: calcTextareaHeight(textarea.value).minHeight
|
|
};
|
|
}
|
|
};
|
|
const createOnceInitResize = (resizeTextarea2) => {
|
|
let isInit = false;
|
|
return () => {
|
|
var _a;
|
|
if (isInit || !props.autosize)
|
|
return;
|
|
const isElHidden = ((_a = textarea.value) == null ? void 0 : _a.offsetParent) === null;
|
|
if (!isElHidden) {
|
|
resizeTextarea2();
|
|
isInit = true;
|
|
}
|
|
};
|
|
};
|
|
const onceInitSizeTextarea = createOnceInitResize(resizeTextarea);
|
|
const setNativeInputValue = () => {
|
|
const input2 = _ref.value;
|
|
const formatterValue = props.formatter ? props.formatter(nativeInputValue.value) : nativeInputValue.value;
|
|
if (!input2 || input2.value === formatterValue)
|
|
return;
|
|
input2.value = formatterValue;
|
|
};
|
|
const handleInput = async (event) => {
|
|
recordCursor();
|
|
let { value } = event.target;
|
|
if (props.formatter) {
|
|
value = props.parser ? props.parser(value) : value;
|
|
}
|
|
if (isComposing.value)
|
|
return;
|
|
if (value === nativeInputValue.value) {
|
|
setNativeInputValue();
|
|
return;
|
|
}
|
|
emit(UPDATE_MODEL_EVENT, value);
|
|
emit("input", value);
|
|
await nextTick();
|
|
setNativeInputValue();
|
|
setCursor();
|
|
};
|
|
const handleChange = (event) => {
|
|
emit("change", event.target.value);
|
|
};
|
|
const {
|
|
isComposing,
|
|
handleCompositionStart,
|
|
handleCompositionUpdate,
|
|
handleCompositionEnd
|
|
} = useComposition({ emit, afterComposition: handleInput });
|
|
const handlePasswordVisible = () => {
|
|
passwordVisible.value = !passwordVisible.value;
|
|
focus();
|
|
};
|
|
const focus = async () => {
|
|
var _a;
|
|
await nextTick();
|
|
(_a = _ref.value) == null ? void 0 : _a.focus();
|
|
};
|
|
const blur = () => {
|
|
var _a;
|
|
return (_a = _ref.value) == null ? void 0 : _a.blur();
|
|
};
|
|
const handleMouseLeave = (evt) => {
|
|
hovering.value = false;
|
|
emit("mouseleave", evt);
|
|
};
|
|
const handleMouseEnter = (evt) => {
|
|
hovering.value = true;
|
|
emit("mouseenter", evt);
|
|
};
|
|
const handleKeydown = (evt) => {
|
|
emit("keydown", evt);
|
|
};
|
|
const select = () => {
|
|
var _a;
|
|
(_a = _ref.value) == null ? void 0 : _a.select();
|
|
};
|
|
const clear = () => {
|
|
emit(UPDATE_MODEL_EVENT, "");
|
|
emit("change", "");
|
|
emit("clear");
|
|
emit("input", "");
|
|
};
|
|
watch(() => props.modelValue, () => {
|
|
var _a;
|
|
nextTick(() => resizeTextarea());
|
|
if (props.validateEvent) {
|
|
(_a = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change").catch((err) => debugWarn());
|
|
}
|
|
});
|
|
watch(nativeInputValue, () => setNativeInputValue());
|
|
watch(() => props.type, async () => {
|
|
await nextTick();
|
|
setNativeInputValue();
|
|
resizeTextarea();
|
|
});
|
|
onMounted(() => {
|
|
if (!props.formatter && props.parser) ;
|
|
setNativeInputValue();
|
|
nextTick(resizeTextarea);
|
|
});
|
|
expose({
|
|
input,
|
|
textarea,
|
|
ref: _ref,
|
|
textareaStyle,
|
|
autosize: toRef(props, "autosize"),
|
|
isComposing,
|
|
focus,
|
|
blur,
|
|
select,
|
|
clear,
|
|
resizeTextarea
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", mergeProps(unref(containerAttrs), {
|
|
class: [
|
|
unref(containerKls),
|
|
{
|
|
[unref(nsInput).bm("group", "append")]: _ctx.$slots.append,
|
|
[unref(nsInput).bm("group", "prepend")]: _ctx.$slots.prepend
|
|
}
|
|
],
|
|
style: unref(containerStyle),
|
|
role: _ctx.containerRole,
|
|
onMouseenter: handleMouseEnter,
|
|
onMouseleave: handleMouseLeave
|
|
}), [
|
|
createCommentVNode(" input "),
|
|
_ctx.type !== "textarea" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
createCommentVNode(" prepend slot "),
|
|
_ctx.$slots.prepend ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(nsInput).be("group", "prepend"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "prepend")
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", {
|
|
ref_key: "wrapperRef",
|
|
ref: wrapperRef,
|
|
class: normalizeClass(unref(wrapperKls))
|
|
}, [
|
|
createCommentVNode(" prefix slot "),
|
|
_ctx.$slots.prefix || _ctx.prefixIcon ? (openBlock(), createElementBlock("span", {
|
|
key: 0,
|
|
class: normalizeClass(unref(nsInput).e("prefix"))
|
|
}, [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(nsInput).e("prefix-inner"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "prefix"),
|
|
_ctx.prefixIcon ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 0,
|
|
class: normalizeClass(unref(nsInput).e("icon"))
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.prefixIcon)))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : createCommentVNode("v-if", true)
|
|
], 2)
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
createElementVNode("input", mergeProps({
|
|
id: unref(inputId),
|
|
ref_key: "input",
|
|
ref: input,
|
|
class: unref(nsInput).e("inner")
|
|
}, unref(attrs), {
|
|
minlength: _ctx.minlength,
|
|
maxlength: _ctx.maxlength,
|
|
type: _ctx.showPassword ? passwordVisible.value ? "text" : "password" : _ctx.type,
|
|
disabled: unref(inputDisabled),
|
|
readonly: _ctx.readonly,
|
|
autocomplete: _ctx.autocomplete,
|
|
tabindex: _ctx.tabindex,
|
|
"aria-label": _ctx.ariaLabel,
|
|
placeholder: _ctx.placeholder,
|
|
style: _ctx.inputStyle,
|
|
form: _ctx.form,
|
|
autofocus: _ctx.autofocus,
|
|
onCompositionstart: unref(handleCompositionStart),
|
|
onCompositionupdate: unref(handleCompositionUpdate),
|
|
onCompositionend: unref(handleCompositionEnd),
|
|
onInput: handleInput,
|
|
onChange: handleChange,
|
|
onKeydown: handleKeydown
|
|
}), null, 16, ["id", "minlength", "maxlength", "type", "disabled", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder", "form", "autofocus", "onCompositionstart", "onCompositionupdate", "onCompositionend"]),
|
|
createCommentVNode(" suffix slot "),
|
|
unref(suffixVisible) ? (openBlock(), createElementBlock("span", {
|
|
key: 1,
|
|
class: normalizeClass(unref(nsInput).e("suffix"))
|
|
}, [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(nsInput).e("suffix-inner"))
|
|
}, [
|
|
!unref(showClear) || !unref(showPwdVisible) || !unref(isWordLimitVisible) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
renderSlot(_ctx.$slots, "suffix"),
|
|
_ctx.suffixIcon ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 0,
|
|
class: normalizeClass(unref(nsInput).e("icon"))
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.suffixIcon)))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : createCommentVNode("v-if", true)
|
|
], 64)) : createCommentVNode("v-if", true),
|
|
unref(showClear) ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 1,
|
|
class: normalizeClass([unref(nsInput).e("icon"), unref(nsInput).e("clear")]),
|
|
onMousedown: withModifiers(unref(NOOP), ["prevent"]),
|
|
onClick: clear
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(circle_close_default))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class", "onMousedown"])) : createCommentVNode("v-if", true),
|
|
unref(showPwdVisible) ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 2,
|
|
class: normalizeClass([unref(nsInput).e("icon"), unref(nsInput).e("password")]),
|
|
onClick: handlePasswordVisible
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(unref(passwordIcon))))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : createCommentVNode("v-if", true),
|
|
unref(isWordLimitVisible) ? (openBlock(), createElementBlock("span", {
|
|
key: 3,
|
|
class: normalizeClass(unref(nsInput).e("count"))
|
|
}, [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(nsInput).e("count-inner"))
|
|
}, toDisplayString(unref(textLength)) + " / " + toDisplayString(_ctx.maxlength), 3)
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
unref(validateState) && unref(validateIcon) && unref(needStatusIcon) ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 4,
|
|
class: normalizeClass([
|
|
unref(nsInput).e("icon"),
|
|
unref(nsInput).e("validateIcon"),
|
|
unref(nsInput).is("loading", unref(validateState) === "validating")
|
|
])
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(unref(validateIcon))))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : createCommentVNode("v-if", true)
|
|
], 2)
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
], 2),
|
|
createCommentVNode(" append slot "),
|
|
_ctx.$slots.append ? (openBlock(), createElementBlock("div", {
|
|
key: 1,
|
|
class: normalizeClass(unref(nsInput).be("group", "append"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "append")
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
createCommentVNode(" textarea "),
|
|
createElementVNode("textarea", mergeProps({
|
|
id: unref(inputId),
|
|
ref_key: "textarea",
|
|
ref: textarea,
|
|
class: [unref(nsTextarea).e("inner"), unref(nsInput).is("focus", unref(isFocused))]
|
|
}, unref(attrs), {
|
|
minlength: _ctx.minlength,
|
|
maxlength: _ctx.maxlength,
|
|
tabindex: _ctx.tabindex,
|
|
disabled: unref(inputDisabled),
|
|
readonly: _ctx.readonly,
|
|
autocomplete: _ctx.autocomplete,
|
|
style: unref(textareaStyle),
|
|
"aria-label": _ctx.ariaLabel,
|
|
placeholder: _ctx.placeholder,
|
|
form: _ctx.form,
|
|
autofocus: _ctx.autofocus,
|
|
rows: _ctx.rows,
|
|
onCompositionstart: unref(handleCompositionStart),
|
|
onCompositionupdate: unref(handleCompositionUpdate),
|
|
onCompositionend: unref(handleCompositionEnd),
|
|
onInput: handleInput,
|
|
onFocus: unref(handleFocus),
|
|
onBlur: unref(handleBlur),
|
|
onChange: handleChange,
|
|
onKeydown: handleKeydown
|
|
}), null, 16, ["id", "minlength", "maxlength", "tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder", "form", "autofocus", "rows", "onCompositionstart", "onCompositionupdate", "onCompositionend", "onFocus", "onBlur"]),
|
|
unref(isWordLimitVisible) ? (openBlock(), createElementBlock("span", {
|
|
key: 0,
|
|
style: normalizeStyle(countStyle.value),
|
|
class: normalizeClass(unref(nsInput).e("count"))
|
|
}, toDisplayString(unref(textLength)) + " / " + toDisplayString(_ctx.maxlength), 7)) : createCommentVNode("v-if", true)
|
|
], 64))
|
|
], 16, ["role"]);
|
|
};
|
|
}
|
|
});
|
|
var Input = /* @__PURE__ */ _export_sfc(_sfc_main$2p, [["__file", "input.vue"]]);
|
|
|
|
const ElInput = withInstall(Input);
|
|
|
|
const GAP = 4;
|
|
const BAR_MAP = {
|
|
vertical: {
|
|
offset: "offsetHeight",
|
|
scroll: "scrollTop",
|
|
scrollSize: "scrollHeight",
|
|
size: "height",
|
|
key: "vertical",
|
|
axis: "Y",
|
|
client: "clientY",
|
|
direction: "top"
|
|
},
|
|
horizontal: {
|
|
offset: "offsetWidth",
|
|
scroll: "scrollLeft",
|
|
scrollSize: "scrollWidth",
|
|
size: "width",
|
|
key: "horizontal",
|
|
axis: "X",
|
|
client: "clientX",
|
|
direction: "left"
|
|
}
|
|
};
|
|
const renderThumbStyle$1 = ({
|
|
move,
|
|
size,
|
|
bar
|
|
}) => ({
|
|
[bar.size]: size,
|
|
transform: `translate${bar.axis}(${move}%)`
|
|
});
|
|
|
|
const scrollbarContextKey = Symbol("scrollbarContextKey");
|
|
|
|
const thumbProps = buildProps({
|
|
vertical: Boolean,
|
|
size: String,
|
|
move: Number,
|
|
ratio: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
always: Boolean
|
|
});
|
|
|
|
const COMPONENT_NAME$k = "Thumb";
|
|
const _sfc_main$2o = /* @__PURE__ */ defineComponent({
|
|
__name: "thumb",
|
|
props: thumbProps,
|
|
setup(__props) {
|
|
const props = __props;
|
|
const scrollbar = inject(scrollbarContextKey);
|
|
const ns = useNamespace("scrollbar");
|
|
if (!scrollbar)
|
|
throwError(COMPONENT_NAME$k, "can not inject scrollbar context");
|
|
const instance = ref();
|
|
const thumb = ref();
|
|
const thumbState = ref({});
|
|
const visible = ref(false);
|
|
let cursorDown = false;
|
|
let cursorLeave = false;
|
|
let originalOnSelectStart = isClient ? document.onselectstart : null;
|
|
const bar = computed(() => BAR_MAP[props.vertical ? "vertical" : "horizontal"]);
|
|
const thumbStyle = computed(() => renderThumbStyle$1({
|
|
size: props.size,
|
|
move: props.move,
|
|
bar: bar.value
|
|
}));
|
|
const offsetRatio = computed(() => instance.value[bar.value.offset] ** 2 / scrollbar.wrapElement[bar.value.scrollSize] / props.ratio / thumb.value[bar.value.offset]);
|
|
const clickThumbHandler = (e) => {
|
|
var _a;
|
|
e.stopPropagation();
|
|
if (e.ctrlKey || [1, 2].includes(e.button))
|
|
return;
|
|
(_a = window.getSelection()) == null ? void 0 : _a.removeAllRanges();
|
|
startDrag(e);
|
|
const el = e.currentTarget;
|
|
if (!el)
|
|
return;
|
|
thumbState.value[bar.value.axis] = el[bar.value.offset] - (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction]);
|
|
};
|
|
const clickTrackHandler = (e) => {
|
|
if (!thumb.value || !instance.value || !scrollbar.wrapElement)
|
|
return;
|
|
const offset = Math.abs(e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]);
|
|
const thumbHalf = thumb.value[bar.value.offset] / 2;
|
|
const thumbPositionPercentage = (offset - thumbHalf) * 100 * offsetRatio.value / instance.value[bar.value.offset];
|
|
scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 100;
|
|
};
|
|
const startDrag = (e) => {
|
|
e.stopImmediatePropagation();
|
|
cursorDown = true;
|
|
document.addEventListener("mousemove", mouseMoveDocumentHandler);
|
|
document.addEventListener("mouseup", mouseUpDocumentHandler);
|
|
originalOnSelectStart = document.onselectstart;
|
|
document.onselectstart = () => false;
|
|
};
|
|
const mouseMoveDocumentHandler = (e) => {
|
|
if (!instance.value || !thumb.value)
|
|
return;
|
|
if (cursorDown === false)
|
|
return;
|
|
const prevPage = thumbState.value[bar.value.axis];
|
|
if (!prevPage)
|
|
return;
|
|
const offset = (instance.value.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1;
|
|
const thumbClickPosition = thumb.value[bar.value.offset] - prevPage;
|
|
const thumbPositionPercentage = (offset - thumbClickPosition) * 100 * offsetRatio.value / instance.value[bar.value.offset];
|
|
scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 100;
|
|
};
|
|
const mouseUpDocumentHandler = () => {
|
|
cursorDown = false;
|
|
thumbState.value[bar.value.axis] = 0;
|
|
document.removeEventListener("mousemove", mouseMoveDocumentHandler);
|
|
document.removeEventListener("mouseup", mouseUpDocumentHandler);
|
|
restoreOnselectstart();
|
|
if (cursorLeave)
|
|
visible.value = false;
|
|
};
|
|
const mouseMoveScrollbarHandler = () => {
|
|
cursorLeave = false;
|
|
visible.value = !!props.size;
|
|
};
|
|
const mouseLeaveScrollbarHandler = () => {
|
|
cursorLeave = true;
|
|
visible.value = cursorDown;
|
|
};
|
|
onBeforeUnmount(() => {
|
|
restoreOnselectstart();
|
|
document.removeEventListener("mouseup", mouseUpDocumentHandler);
|
|
});
|
|
const restoreOnselectstart = () => {
|
|
if (document.onselectstart !== originalOnSelectStart)
|
|
document.onselectstart = originalOnSelectStart;
|
|
};
|
|
useEventListener(toRef(scrollbar, "scrollbarElement"), "mousemove", mouseMoveScrollbarHandler);
|
|
useEventListener(toRef(scrollbar, "scrollbarElement"), "mouseleave", mouseLeaveScrollbarHandler);
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createBlock(Transition, {
|
|
name: unref(ns).b("fade"),
|
|
persisted: ""
|
|
}, {
|
|
default: withCtx(() => [
|
|
withDirectives(createElementVNode("div", {
|
|
ref_key: "instance",
|
|
ref: instance,
|
|
class: normalizeClass([unref(ns).e("bar"), unref(ns).is(unref(bar).key)]),
|
|
onMousedown: clickTrackHandler
|
|
}, [
|
|
createElementVNode("div", {
|
|
ref_key: "thumb",
|
|
ref: thumb,
|
|
class: normalizeClass(unref(ns).e("thumb")),
|
|
style: normalizeStyle(unref(thumbStyle)),
|
|
onMousedown: clickThumbHandler
|
|
}, null, 38)
|
|
], 34), [
|
|
[vShow, _ctx.always || visible.value]
|
|
])
|
|
]),
|
|
_: 1
|
|
}, 8, ["name"]);
|
|
};
|
|
}
|
|
});
|
|
var Thumb = /* @__PURE__ */ _export_sfc(_sfc_main$2o, [["__file", "thumb.vue"]]);
|
|
|
|
const barProps = buildProps({
|
|
always: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
minSize: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const _sfc_main$2n = /* @__PURE__ */ defineComponent({
|
|
__name: "bar",
|
|
props: barProps,
|
|
setup(__props, { expose }) {
|
|
const props = __props;
|
|
const scrollbar = inject(scrollbarContextKey);
|
|
const moveX = ref(0);
|
|
const moveY = ref(0);
|
|
const sizeWidth = ref("");
|
|
const sizeHeight = ref("");
|
|
const ratioY = ref(1);
|
|
const ratioX = ref(1);
|
|
const handleScroll = (wrap) => {
|
|
if (wrap) {
|
|
const offsetHeight = wrap.offsetHeight - GAP;
|
|
const offsetWidth = wrap.offsetWidth - GAP;
|
|
moveY.value = wrap.scrollTop * 100 / offsetHeight * ratioY.value;
|
|
moveX.value = wrap.scrollLeft * 100 / offsetWidth * ratioX.value;
|
|
}
|
|
};
|
|
const update = () => {
|
|
const wrap = scrollbar == null ? void 0 : scrollbar.wrapElement;
|
|
if (!wrap)
|
|
return;
|
|
const offsetHeight = wrap.offsetHeight - GAP;
|
|
const offsetWidth = wrap.offsetWidth - GAP;
|
|
const originalHeight = offsetHeight ** 2 / wrap.scrollHeight;
|
|
const originalWidth = offsetWidth ** 2 / wrap.scrollWidth;
|
|
const height = Math.max(originalHeight, props.minSize);
|
|
const width = Math.max(originalWidth, props.minSize);
|
|
ratioY.value = originalHeight / (offsetHeight - originalHeight) / (height / (offsetHeight - height));
|
|
ratioX.value = originalWidth / (offsetWidth - originalWidth) / (width / (offsetWidth - width));
|
|
sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : "";
|
|
sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : "";
|
|
};
|
|
expose({
|
|
handleScroll,
|
|
update
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock(Fragment, null, [
|
|
createVNode(Thumb, {
|
|
move: moveX.value,
|
|
ratio: ratioX.value,
|
|
size: sizeWidth.value,
|
|
always: _ctx.always
|
|
}, null, 8, ["move", "ratio", "size", "always"]),
|
|
createVNode(Thumb, {
|
|
move: moveY.value,
|
|
ratio: ratioY.value,
|
|
size: sizeHeight.value,
|
|
vertical: "",
|
|
always: _ctx.always
|
|
}, null, 8, ["move", "ratio", "size", "always"])
|
|
], 64);
|
|
};
|
|
}
|
|
});
|
|
var Bar = /* @__PURE__ */ _export_sfc(_sfc_main$2n, [["__file", "bar.vue"]]);
|
|
|
|
const scrollbarProps = buildProps({
|
|
height: {
|
|
type: [String, Number],
|
|
default: ""
|
|
},
|
|
maxHeight: {
|
|
type: [String, Number],
|
|
default: ""
|
|
},
|
|
native: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
wrapStyle: {
|
|
type: definePropType([String, Object, Array]),
|
|
default: ""
|
|
},
|
|
wrapClass: {
|
|
type: [String, Array],
|
|
default: ""
|
|
},
|
|
viewClass: {
|
|
type: [String, Array],
|
|
default: ""
|
|
},
|
|
viewStyle: {
|
|
type: [String, Array, Object],
|
|
default: ""
|
|
},
|
|
noresize: Boolean,
|
|
tag: {
|
|
type: String,
|
|
default: "div"
|
|
},
|
|
always: Boolean,
|
|
minSize: {
|
|
type: Number,
|
|
default: 20
|
|
},
|
|
tabindex: {
|
|
type: [String, Number],
|
|
default: void 0
|
|
},
|
|
id: String,
|
|
role: String,
|
|
...useAriaProps(["ariaLabel", "ariaOrientation"])
|
|
});
|
|
const scrollbarEmits = {
|
|
scroll: ({
|
|
scrollTop,
|
|
scrollLeft
|
|
}) => [scrollTop, scrollLeft].every(isNumber)
|
|
};
|
|
|
|
const COMPONENT_NAME$j = "ElScrollbar";
|
|
const __default__$1I = defineComponent({
|
|
name: COMPONENT_NAME$j
|
|
});
|
|
const _sfc_main$2m = /* @__PURE__ */ defineComponent({
|
|
...__default__$1I,
|
|
props: scrollbarProps,
|
|
emits: scrollbarEmits,
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const ns = useNamespace("scrollbar");
|
|
let stopResizeObserver = void 0;
|
|
let stopResizeListener = void 0;
|
|
let wrapScrollTop = 0;
|
|
let wrapScrollLeft = 0;
|
|
const scrollbarRef = ref();
|
|
const wrapRef = ref();
|
|
const resizeRef = ref();
|
|
const barRef = ref();
|
|
const wrapStyle = computed(() => {
|
|
const style = {};
|
|
if (props.height)
|
|
style.height = addUnit(props.height);
|
|
if (props.maxHeight)
|
|
style.maxHeight = addUnit(props.maxHeight);
|
|
return [props.wrapStyle, style];
|
|
});
|
|
const wrapKls = computed(() => {
|
|
return [
|
|
props.wrapClass,
|
|
ns.e("wrap"),
|
|
{ [ns.em("wrap", "hidden-default")]: !props.native }
|
|
];
|
|
});
|
|
const resizeKls = computed(() => {
|
|
return [ns.e("view"), props.viewClass];
|
|
});
|
|
const handleScroll = () => {
|
|
var _a;
|
|
if (wrapRef.value) {
|
|
(_a = barRef.value) == null ? void 0 : _a.handleScroll(wrapRef.value);
|
|
wrapScrollTop = wrapRef.value.scrollTop;
|
|
wrapScrollLeft = wrapRef.value.scrollLeft;
|
|
emit("scroll", {
|
|
scrollTop: wrapRef.value.scrollTop,
|
|
scrollLeft: wrapRef.value.scrollLeft
|
|
});
|
|
}
|
|
};
|
|
function scrollTo(arg1, arg2) {
|
|
if (isObject$1(arg1)) {
|
|
wrapRef.value.scrollTo(arg1);
|
|
} else if (isNumber(arg1) && isNumber(arg2)) {
|
|
wrapRef.value.scrollTo(arg1, arg2);
|
|
}
|
|
}
|
|
const setScrollTop = (value) => {
|
|
if (!isNumber(value)) {
|
|
return;
|
|
}
|
|
wrapRef.value.scrollTop = value;
|
|
};
|
|
const setScrollLeft = (value) => {
|
|
if (!isNumber(value)) {
|
|
return;
|
|
}
|
|
wrapRef.value.scrollLeft = value;
|
|
};
|
|
const update = () => {
|
|
var _a;
|
|
(_a = barRef.value) == null ? void 0 : _a.update();
|
|
};
|
|
watch(() => props.noresize, (noresize) => {
|
|
if (noresize) {
|
|
stopResizeObserver == null ? void 0 : stopResizeObserver();
|
|
stopResizeListener == null ? void 0 : stopResizeListener();
|
|
} else {
|
|
({ stop: stopResizeObserver } = useResizeObserver(resizeRef, update));
|
|
stopResizeListener = useEventListener("resize", update);
|
|
}
|
|
}, { immediate: true });
|
|
watch(() => [props.maxHeight, props.height], () => {
|
|
if (!props.native)
|
|
nextTick(() => {
|
|
var _a;
|
|
update();
|
|
if (wrapRef.value) {
|
|
(_a = barRef.value) == null ? void 0 : _a.handleScroll(wrapRef.value);
|
|
}
|
|
});
|
|
});
|
|
provide(scrollbarContextKey, reactive({
|
|
scrollbarElement: scrollbarRef,
|
|
wrapElement: wrapRef
|
|
}));
|
|
onActivated(() => {
|
|
if (wrapRef.value) {
|
|
wrapRef.value.scrollTop = wrapScrollTop;
|
|
wrapRef.value.scrollLeft = wrapScrollLeft;
|
|
}
|
|
});
|
|
onMounted(() => {
|
|
if (!props.native)
|
|
nextTick(() => {
|
|
update();
|
|
});
|
|
});
|
|
onUpdated(() => update());
|
|
expose({
|
|
wrapRef,
|
|
update,
|
|
scrollTo,
|
|
setScrollTop,
|
|
setScrollLeft,
|
|
handleScroll
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
ref_key: "scrollbarRef",
|
|
ref: scrollbarRef,
|
|
class: normalizeClass(unref(ns).b())
|
|
}, [
|
|
createElementVNode("div", {
|
|
ref_key: "wrapRef",
|
|
ref: wrapRef,
|
|
class: normalizeClass(unref(wrapKls)),
|
|
style: normalizeStyle(unref(wrapStyle)),
|
|
tabindex: _ctx.tabindex,
|
|
onScroll: handleScroll
|
|
}, [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
|
|
id: _ctx.id,
|
|
ref_key: "resizeRef",
|
|
ref: resizeRef,
|
|
class: normalizeClass(unref(resizeKls)),
|
|
style: normalizeStyle(_ctx.viewStyle),
|
|
role: _ctx.role,
|
|
"aria-label": _ctx.ariaLabel,
|
|
"aria-orientation": _ctx.ariaOrientation
|
|
}, {
|
|
default: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "default")
|
|
]),
|
|
_: 3
|
|
}, 8, ["id", "class", "style", "role", "aria-label", "aria-orientation"]))
|
|
], 46, ["tabindex"]),
|
|
!_ctx.native ? (openBlock(), createBlock(Bar, {
|
|
key: 0,
|
|
ref_key: "barRef",
|
|
ref: barRef,
|
|
always: _ctx.always,
|
|
"min-size": _ctx.minSize
|
|
}, null, 8, ["always", "min-size"])) : createCommentVNode("v-if", true)
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var Scrollbar$1 = /* @__PURE__ */ _export_sfc(_sfc_main$2m, [["__file", "scrollbar.vue"]]);
|
|
|
|
const ElScrollbar = withInstall(Scrollbar$1);
|
|
|
|
const POPPER_INJECTION_KEY = Symbol("popper");
|
|
const POPPER_CONTENT_INJECTION_KEY = Symbol("popperContent");
|
|
|
|
const Effect = {
|
|
LIGHT: "light",
|
|
DARK: "dark"
|
|
};
|
|
const roleTypes = [
|
|
"dialog",
|
|
"grid",
|
|
"group",
|
|
"listbox",
|
|
"menu",
|
|
"navigation",
|
|
"tooltip",
|
|
"tree"
|
|
];
|
|
const popperProps = buildProps({
|
|
role: {
|
|
type: String,
|
|
values: roleTypes,
|
|
default: "tooltip"
|
|
}
|
|
});
|
|
const usePopperProps = popperProps;
|
|
|
|
const __default__$1H = defineComponent({
|
|
name: "ElPopper",
|
|
inheritAttrs: false
|
|
});
|
|
const _sfc_main$2l = /* @__PURE__ */ defineComponent({
|
|
...__default__$1H,
|
|
props: popperProps,
|
|
setup(__props, { expose }) {
|
|
const props = __props;
|
|
const triggerRef = ref();
|
|
const popperInstanceRef = ref();
|
|
const contentRef = ref();
|
|
const referenceRef = ref();
|
|
const role = computed(() => props.role);
|
|
const popperProvides = {
|
|
triggerRef,
|
|
popperInstanceRef,
|
|
contentRef,
|
|
referenceRef,
|
|
role
|
|
};
|
|
expose(popperProvides);
|
|
provide(POPPER_INJECTION_KEY, popperProvides);
|
|
return (_ctx, _cache) => {
|
|
return renderSlot(_ctx.$slots, "default");
|
|
};
|
|
}
|
|
});
|
|
var Popper = /* @__PURE__ */ _export_sfc(_sfc_main$2l, [["__file", "popper.vue"]]);
|
|
|
|
const popperArrowProps = buildProps({
|
|
arrowOffset: {
|
|
type: Number,
|
|
default: 5
|
|
}
|
|
});
|
|
const usePopperArrowProps = popperArrowProps;
|
|
|
|
const __default__$1G = defineComponent({
|
|
name: "ElPopperArrow",
|
|
inheritAttrs: false
|
|
});
|
|
const _sfc_main$2k = /* @__PURE__ */ defineComponent({
|
|
...__default__$1G,
|
|
props: popperArrowProps,
|
|
setup(__props, { expose }) {
|
|
const props = __props;
|
|
const ns = useNamespace("popper");
|
|
const { arrowOffset, arrowRef, arrowStyle } = inject(POPPER_CONTENT_INJECTION_KEY, void 0);
|
|
watch(() => props.arrowOffset, (val) => {
|
|
arrowOffset.value = val;
|
|
});
|
|
onBeforeUnmount(() => {
|
|
arrowRef.value = void 0;
|
|
});
|
|
expose({
|
|
arrowRef
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("span", {
|
|
ref_key: "arrowRef",
|
|
ref: arrowRef,
|
|
class: normalizeClass(unref(ns).e("arrow")),
|
|
style: normalizeStyle(unref(arrowStyle)),
|
|
"data-popper-arrow": ""
|
|
}, null, 6);
|
|
};
|
|
}
|
|
});
|
|
var ElPopperArrow = /* @__PURE__ */ _export_sfc(_sfc_main$2k, [["__file", "arrow.vue"]]);
|
|
|
|
const NAME = "ElOnlyChild";
|
|
const OnlyChild = defineComponent({
|
|
name: NAME,
|
|
setup(_, {
|
|
slots,
|
|
attrs
|
|
}) {
|
|
var _a;
|
|
const forwardRefInjection = inject(FORWARD_REF_INJECTION_KEY);
|
|
const forwardRefDirective = useForwardRefDirective((_a = forwardRefInjection == null ? void 0 : forwardRefInjection.setForwardRef) != null ? _a : NOOP);
|
|
return () => {
|
|
var _a2;
|
|
const defaultSlot = (_a2 = slots.default) == null ? void 0 : _a2.call(slots, attrs);
|
|
if (!defaultSlot)
|
|
return null;
|
|
if (defaultSlot.length > 1) {
|
|
return null;
|
|
}
|
|
const firstLegitNode = findFirstLegitChild(defaultSlot);
|
|
if (!firstLegitNode) {
|
|
return null;
|
|
}
|
|
return withDirectives(cloneVNode(firstLegitNode, attrs), [[forwardRefDirective]]);
|
|
};
|
|
}
|
|
});
|
|
function findFirstLegitChild(node) {
|
|
if (!node)
|
|
return null;
|
|
const children = node;
|
|
for (const child of children) {
|
|
if (isObject$1(child)) {
|
|
switch (child.type) {
|
|
case Comment:
|
|
continue;
|
|
case Text$1:
|
|
case "svg":
|
|
return wrapTextContent(child);
|
|
case Fragment:
|
|
return findFirstLegitChild(child.children);
|
|
default:
|
|
return child;
|
|
}
|
|
}
|
|
return wrapTextContent(child);
|
|
}
|
|
return null;
|
|
}
|
|
function wrapTextContent(s) {
|
|
const ns = useNamespace("only-child");
|
|
return createVNode("span", {
|
|
"class": ns.e("content")
|
|
}, [s]);
|
|
}
|
|
|
|
const popperTriggerProps = buildProps({
|
|
virtualRef: {
|
|
type: definePropType(Object)
|
|
},
|
|
virtualTriggering: Boolean,
|
|
onMouseenter: {
|
|
type: definePropType(Function)
|
|
},
|
|
onMouseleave: {
|
|
type: definePropType(Function)
|
|
},
|
|
onClick: {
|
|
type: definePropType(Function)
|
|
},
|
|
onKeydown: {
|
|
type: definePropType(Function)
|
|
},
|
|
onFocus: {
|
|
type: definePropType(Function)
|
|
},
|
|
onBlur: {
|
|
type: definePropType(Function)
|
|
},
|
|
onContextmenu: {
|
|
type: definePropType(Function)
|
|
},
|
|
id: String,
|
|
open: Boolean
|
|
});
|
|
const usePopperTriggerProps = popperTriggerProps;
|
|
|
|
const __default__$1F = defineComponent({
|
|
name: "ElPopperTrigger",
|
|
inheritAttrs: false
|
|
});
|
|
const _sfc_main$2j = /* @__PURE__ */ defineComponent({
|
|
...__default__$1F,
|
|
props: popperTriggerProps,
|
|
setup(__props, { expose }) {
|
|
const props = __props;
|
|
const { role, triggerRef } = inject(POPPER_INJECTION_KEY, void 0);
|
|
useForwardRef(triggerRef);
|
|
const ariaControls = computed(() => {
|
|
return ariaHaspopup.value ? props.id : void 0;
|
|
});
|
|
const ariaDescribedby = computed(() => {
|
|
if (role && role.value === "tooltip") {
|
|
return props.open && props.id ? props.id : void 0;
|
|
}
|
|
return void 0;
|
|
});
|
|
const ariaHaspopup = computed(() => {
|
|
if (role && role.value !== "tooltip") {
|
|
return role.value;
|
|
}
|
|
return void 0;
|
|
});
|
|
const ariaExpanded = computed(() => {
|
|
return ariaHaspopup.value ? `${props.open}` : void 0;
|
|
});
|
|
let virtualTriggerAriaStopWatch = void 0;
|
|
const TRIGGER_ELE_EVENTS = [
|
|
"onMouseenter",
|
|
"onMouseleave",
|
|
"onClick",
|
|
"onKeydown",
|
|
"onFocus",
|
|
"onBlur",
|
|
"onContextmenu"
|
|
];
|
|
onMounted(() => {
|
|
watch(() => props.virtualRef, (virtualEl) => {
|
|
if (virtualEl) {
|
|
triggerRef.value = unrefElement(virtualEl);
|
|
}
|
|
}, {
|
|
immediate: true
|
|
});
|
|
watch(triggerRef, (el, prevEl) => {
|
|
virtualTriggerAriaStopWatch == null ? void 0 : virtualTriggerAriaStopWatch();
|
|
virtualTriggerAriaStopWatch = void 0;
|
|
if (isElement$1(el)) {
|
|
TRIGGER_ELE_EVENTS.forEach((eventName) => {
|
|
var _a;
|
|
const handler = props[eventName];
|
|
if (handler) {
|
|
el.addEventListener(eventName.slice(2).toLowerCase(), handler);
|
|
(_a = prevEl == null ? void 0 : prevEl.removeEventListener) == null ? void 0 : _a.call(prevEl, eventName.slice(2).toLowerCase(), handler);
|
|
}
|
|
});
|
|
virtualTriggerAriaStopWatch = watch([ariaControls, ariaDescribedby, ariaHaspopup, ariaExpanded], (watches) => {
|
|
[
|
|
"aria-controls",
|
|
"aria-describedby",
|
|
"aria-haspopup",
|
|
"aria-expanded"
|
|
].forEach((key, idx) => {
|
|
isNil(watches[idx]) ? el.removeAttribute(key) : el.setAttribute(key, watches[idx]);
|
|
});
|
|
}, { immediate: true });
|
|
}
|
|
if (isElement$1(prevEl)) {
|
|
[
|
|
"aria-controls",
|
|
"aria-describedby",
|
|
"aria-haspopup",
|
|
"aria-expanded"
|
|
].forEach((key) => prevEl.removeAttribute(key));
|
|
}
|
|
}, {
|
|
immediate: true
|
|
});
|
|
});
|
|
onBeforeUnmount(() => {
|
|
virtualTriggerAriaStopWatch == null ? void 0 : virtualTriggerAriaStopWatch();
|
|
virtualTriggerAriaStopWatch = void 0;
|
|
if (triggerRef.value && isElement$1(triggerRef.value)) {
|
|
const el = triggerRef.value;
|
|
TRIGGER_ELE_EVENTS.forEach((eventName) => {
|
|
const handler = props[eventName];
|
|
if (handler) {
|
|
el.removeEventListener(eventName.slice(2).toLowerCase(), handler);
|
|
}
|
|
});
|
|
triggerRef.value = void 0;
|
|
}
|
|
});
|
|
expose({
|
|
triggerRef
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return !_ctx.virtualTriggering ? (openBlock(), createBlock(unref(OnlyChild), mergeProps({ key: 0 }, _ctx.$attrs, {
|
|
"aria-controls": unref(ariaControls),
|
|
"aria-describedby": unref(ariaDescribedby),
|
|
"aria-expanded": unref(ariaExpanded),
|
|
"aria-haspopup": unref(ariaHaspopup)
|
|
}), {
|
|
default: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "default")
|
|
]),
|
|
_: 3
|
|
}, 16, ["aria-controls", "aria-describedby", "aria-expanded", "aria-haspopup"])) : createCommentVNode("v-if", true);
|
|
};
|
|
}
|
|
});
|
|
var ElPopperTrigger = /* @__PURE__ */ _export_sfc(_sfc_main$2j, [["__file", "trigger.vue"]]);
|
|
|
|
const FOCUS_AFTER_TRAPPED = "focus-trap.focus-after-trapped";
|
|
const FOCUS_AFTER_RELEASED = "focus-trap.focus-after-released";
|
|
const FOCUSOUT_PREVENTED = "focus-trap.focusout-prevented";
|
|
const FOCUS_AFTER_TRAPPED_OPTS = {
|
|
cancelable: true,
|
|
bubbles: false
|
|
};
|
|
const FOCUSOUT_PREVENTED_OPTS = {
|
|
cancelable: true,
|
|
bubbles: false
|
|
};
|
|
const ON_TRAP_FOCUS_EVT = "focusAfterTrapped";
|
|
const ON_RELEASE_FOCUS_EVT = "focusAfterReleased";
|
|
const FOCUS_TRAP_INJECTION_KEY = Symbol("elFocusTrap");
|
|
|
|
const focusReason = ref();
|
|
const lastUserFocusTimestamp = ref(0);
|
|
const lastAutomatedFocusTimestamp = ref(0);
|
|
let focusReasonUserCount = 0;
|
|
const obtainAllFocusableElements = (element) => {
|
|
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) {
|
|
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 = () => {
|
|
onMounted(() => {
|
|
if (focusReasonUserCount === 0) {
|
|
document.addEventListener("mousedown", notifyFocusReasonPointer);
|
|
document.addEventListener("touchstart", notifyFocusReasonPointer);
|
|
document.addEventListener("keydown", notifyFocusReasonKeydown);
|
|
}
|
|
focusReasonUserCount++;
|
|
});
|
|
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$2i = 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 = 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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
provide(FOCUS_TRAP_INJECTION_KEY, {
|
|
focusTrapRef: forwardRef,
|
|
onKeydown
|
|
});
|
|
watch(() => props.focusTrapEl, (focusTrapEl) => {
|
|
if (focusTrapEl) {
|
|
forwardRef.value = focusTrapEl;
|
|
}
|
|
}, { immediate: true });
|
|
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 = 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 = 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 nextTick();
|
|
const trapContainer = 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) {
|
|
nextTick(() => {
|
|
let focusStartEl = props.focusStartEl;
|
|
if (!isString$1(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 = 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() || trapContainer.contains(document.activeElement))) {
|
|
tryFocus(lastFocusBeforeTrapped != null ? lastFocusBeforeTrapped : document.body);
|
|
}
|
|
trapContainer.removeEventListener(FOCUS_AFTER_RELEASED, releaseOnFocus);
|
|
focusableStack.remove(focusLayer);
|
|
}
|
|
}
|
|
onMounted(() => {
|
|
if (props.trapped) {
|
|
startTrap();
|
|
}
|
|
watch(() => props.trapped, (trapped) => {
|
|
if (trapped) {
|
|
startTrap();
|
|
} else {
|
|
stopTrap();
|
|
}
|
|
});
|
|
});
|
|
onBeforeUnmount(() => {
|
|
if (props.trapped) {
|
|
stopTrap();
|
|
}
|
|
if (forwardRef.value) {
|
|
forwardRef.value.removeEventListener("keydown", onKeydown);
|
|
forwardRef.value.removeEventListener("focusin", onFocusIn);
|
|
forwardRef.value.removeEventListener("focusout", onFocusOut);
|
|
forwardRef.value = void 0;
|
|
}
|
|
});
|
|
return {
|
|
onKeydown
|
|
};
|
|
}
|
|
});
|
|
function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
|
|
return renderSlot(_ctx.$slots, "default", { handleKeydown: _ctx.onKeydown });
|
|
}
|
|
var ElFocusTrap = /* @__PURE__ */ _export_sfc(_sfc_main$2i, [["render", _sfc_render$u], ["__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: definePropType(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
|
|
},
|
|
virtualTriggering: Boolean,
|
|
zIndex: Number,
|
|
...useAriaProps(["ariaLabel"])
|
|
});
|
|
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, modifiers = []) => {
|
|
const { placement, strategy, popperOptions } = props;
|
|
const options = {
|
|
placement,
|
|
strategy,
|
|
...popperOptions,
|
|
modifiers: [...genModifiers(props), ...modifiers]
|
|
};
|
|
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 deriveExtraModifiers(options, modifiers) {
|
|
if (modifiers) {
|
|
options.modifiers = [...options.modifiers, ...modifiers != null ? modifiers : []];
|
|
}
|
|
}
|
|
|
|
const DEFAULT_ARROW_OFFSET = 0;
|
|
const usePopperContent = (props) => {
|
|
const { popperInstanceRef, contentRef, triggerRef, role } = inject(POPPER_INJECTION_KEY, void 0);
|
|
const arrowRef = ref();
|
|
const arrowOffset = ref();
|
|
const eventListenerModifier = computed(() => {
|
|
return {
|
|
name: "eventListeners",
|
|
enabled: !!props.visible
|
|
};
|
|
});
|
|
const arrowModifier = computed(() => {
|
|
var _a;
|
|
const arrowEl = unref(arrowRef);
|
|
const offset = (_a = unref(arrowOffset)) != null ? _a : DEFAULT_ARROW_OFFSET;
|
|
return {
|
|
name: "arrow",
|
|
enabled: !isUndefined$1(arrowEl),
|
|
options: {
|
|
element: arrowEl,
|
|
padding: offset
|
|
}
|
|
};
|
|
});
|
|
const options = computed(() => {
|
|
return {
|
|
onFirstUpdate: () => {
|
|
update();
|
|
},
|
|
...buildPopperOptions(props, [
|
|
unref(arrowModifier),
|
|
unref(eventListenerModifier)
|
|
])
|
|
};
|
|
});
|
|
const computedReference = computed(() => unwrapMeasurableEl(props.referenceEl) || unref(triggerRef));
|
|
const { attributes, state, styles, update, forceUpdate, instanceRef } = usePopper(computedReference, contentRef, options);
|
|
watch(instanceRef, (instance) => popperInstanceRef.value = instance);
|
|
onMounted(() => {
|
|
watch(() => {
|
|
var _a;
|
|
return (_a = unref(computedReference)) == null ? void 0 : _a.getBoundingClientRect();
|
|
}, () => {
|
|
update();
|
|
});
|
|
});
|
|
return {
|
|
attributes,
|
|
arrowRef,
|
|
contentRef,
|
|
instanceRef,
|
|
state,
|
|
styles,
|
|
role,
|
|
forceUpdate,
|
|
update
|
|
};
|
|
};
|
|
|
|
const usePopperContentDOM = (props, {
|
|
attributes,
|
|
styles,
|
|
role
|
|
}) => {
|
|
const { nextZIndex } = useZIndex();
|
|
const ns = useNamespace("popper");
|
|
const contentAttrs = computed(() => unref(attributes).popper);
|
|
const contentZIndex = ref(isNumber(props.zIndex) ? props.zIndex : nextZIndex());
|
|
const contentClass = computed(() => [
|
|
ns.b(),
|
|
ns.is("pure", props.pure),
|
|
ns.is(props.effect),
|
|
props.popperClass
|
|
]);
|
|
const contentStyle = computed(() => {
|
|
return [
|
|
{ zIndex: unref(contentZIndex) },
|
|
unref(styles).popper,
|
|
props.popperStyle || {}
|
|
];
|
|
});
|
|
const ariaModal = computed(() => role.value === "dialog" ? "false" : void 0);
|
|
const arrowStyle = computed(() => unref(styles).arrow || {});
|
|
const updateZIndex = () => {
|
|
contentZIndex.value = isNumber(props.zIndex) ? props.zIndex : nextZIndex();
|
|
};
|
|
return {
|
|
ariaModal,
|
|
arrowStyle,
|
|
contentAttrs,
|
|
contentClass,
|
|
contentStyle,
|
|
contentZIndex,
|
|
updateZIndex
|
|
};
|
|
};
|
|
|
|
const usePopperContentFocusTrap = (props, emit) => {
|
|
const trapped = ref(false);
|
|
const focusStartRef = ref();
|
|
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");
|
|
};
|
|
return {
|
|
focusStartRef,
|
|
trapped,
|
|
onFocusAfterReleased,
|
|
onFocusAfterTrapped,
|
|
onFocusInTrap,
|
|
onFocusoutPrevented,
|
|
onReleaseRequested
|
|
};
|
|
};
|
|
|
|
const __default__$1E = defineComponent({
|
|
name: "ElPopperContent"
|
|
});
|
|
const _sfc_main$2h = /* @__PURE__ */ defineComponent({
|
|
...__default__$1E,
|
|
props: popperContentProps,
|
|
emits: popperContentEmits,
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const {
|
|
focusStartRef,
|
|
trapped,
|
|
onFocusAfterReleased,
|
|
onFocusAfterTrapped,
|
|
onFocusInTrap,
|
|
onFocusoutPrevented,
|
|
onReleaseRequested
|
|
} = usePopperContentFocusTrap(props, emit);
|
|
const { attributes, arrowRef, contentRef, styles, instanceRef, role, update } = usePopperContent(props);
|
|
const {
|
|
ariaModal,
|
|
arrowStyle,
|
|
contentAttrs,
|
|
contentClass,
|
|
contentStyle,
|
|
updateZIndex
|
|
} = usePopperContentDOM(props, {
|
|
styles,
|
|
attributes,
|
|
role
|
|
});
|
|
const formItemContext = inject(formItemContextKey, void 0);
|
|
const arrowOffset = ref();
|
|
provide(POPPER_CONTENT_INJECTION_KEY, {
|
|
arrowStyle,
|
|
arrowRef,
|
|
arrowOffset
|
|
});
|
|
if (formItemContext) {
|
|
provide(formItemContextKey, {
|
|
...formItemContext,
|
|
addInputId: NOOP,
|
|
removeInputId: NOOP
|
|
});
|
|
}
|
|
let triggerTargetAriaStopWatch = void 0;
|
|
const updatePopper = (shouldUpdateZIndex = true) => {
|
|
update();
|
|
shouldUpdateZIndex && updateZIndex();
|
|
};
|
|
const togglePopperAlive = () => {
|
|
updatePopper(false);
|
|
if (props.visible && props.focusOnShow) {
|
|
trapped.value = true;
|
|
} else if (props.visible === false) {
|
|
trapped.value = false;
|
|
}
|
|
};
|
|
onMounted(() => {
|
|
watch(() => props.triggerTargetEl, (triggerTargetEl, prevTriggerTargetEl) => {
|
|
triggerTargetAriaStopWatch == null ? void 0 : triggerTargetAriaStopWatch();
|
|
triggerTargetAriaStopWatch = void 0;
|
|
const el = unref(triggerTargetEl || contentRef.value);
|
|
const prevEl = unref(prevTriggerTargetEl || contentRef.value);
|
|
if (isElement$1(el)) {
|
|
triggerTargetAriaStopWatch = 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 });
|
|
watch(() => props.visible, togglePopperAlive, { immediate: true });
|
|
});
|
|
onBeforeUnmount(() => {
|
|
triggerTargetAriaStopWatch == null ? void 0 : triggerTargetAriaStopWatch();
|
|
triggerTargetAriaStopWatch = void 0;
|
|
});
|
|
expose({
|
|
popperContentRef: contentRef,
|
|
popperInstanceRef: instanceRef,
|
|
updatePopper,
|
|
contentStyle
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", mergeProps({
|
|
ref_key: "contentRef",
|
|
ref: contentRef
|
|
}, unref(contentAttrs), {
|
|
style: unref(contentStyle),
|
|
class: unref(contentClass),
|
|
tabindex: "-1",
|
|
onMouseenter: (e) => _ctx.$emit("mouseenter", e),
|
|
onMouseleave: (e) => _ctx.$emit("mouseleave", e)
|
|
}), [
|
|
createVNode(unref(ElFocusTrap), {
|
|
trapped: unref(trapped),
|
|
"trap-on-focus-in": true,
|
|
"focus-trap-el": unref(contentRef),
|
|
"focus-start-el": unref(focusStartRef),
|
|
onFocusAfterTrapped: unref(onFocusAfterTrapped),
|
|
onFocusAfterReleased: unref(onFocusAfterReleased),
|
|
onFocusin: unref(onFocusInTrap),
|
|
onFocusoutPrevented: unref(onFocusoutPrevented),
|
|
onReleaseRequested: unref(onReleaseRequested)
|
|
}, {
|
|
default: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "default")
|
|
]),
|
|
_: 3
|
|
}, 8, ["trapped", "focus-trap-el", "focus-start-el", "onFocusAfterTrapped", "onFocusAfterReleased", "onFocusin", "onFocusoutPrevented", "onReleaseRequested"])
|
|
], 16, ["onMouseenter", "onMouseleave"]);
|
|
};
|
|
}
|
|
});
|
|
var ElPopperContent = /* @__PURE__ */ _export_sfc(_sfc_main$2h, [["__file", "content.vue"]]);
|
|
|
|
const ElPopper = withInstall(Popper);
|
|
|
|
const TOOLTIP_INJECTION_KEY = Symbol("elTooltip");
|
|
|
|
const useTooltipContentProps = buildProps({
|
|
...useDelayedToggleProps,
|
|
...popperContentProps,
|
|
appendTo: {
|
|
type: definePropType([String, Object])
|
|
},
|
|
content: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
rawContent: Boolean,
|
|
persistent: Boolean,
|
|
visible: {
|
|
type: definePropType(Boolean),
|
|
default: null
|
|
},
|
|
transition: String,
|
|
teleported: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
disabled: Boolean,
|
|
...useAriaProps(["ariaLabel"])
|
|
});
|
|
|
|
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$1(trigger)) {
|
|
return trigger.includes(type);
|
|
}
|
|
return trigger === type;
|
|
};
|
|
const whenTrigger = (trigger, type, handler) => {
|
|
return (e) => {
|
|
isTriggerType(unref(trigger), type) && handler(e);
|
|
};
|
|
};
|
|
|
|
const __default__$1D = defineComponent({
|
|
name: "ElTooltipTrigger"
|
|
});
|
|
const _sfc_main$2g = /* @__PURE__ */ defineComponent({
|
|
...__default__$1D,
|
|
props: useTooltipTriggerProps,
|
|
setup(__props, { expose }) {
|
|
const props = __props;
|
|
const ns = useNamespace("tooltip");
|
|
const { controlled, id, open, onOpen, onClose, onToggle } = inject(TOOLTIP_INJECTION_KEY, void 0);
|
|
const triggerRef = ref(null);
|
|
const stopWhenControlledOrDisabled = () => {
|
|
if (unref(controlled) || props.disabled) {
|
|
return true;
|
|
}
|
|
};
|
|
const trigger = 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 openBlock(), createBlock(unref(ElPopperTrigger), {
|
|
id: unref(id),
|
|
"virtual-ref": _ctx.virtualRef,
|
|
open: unref(open),
|
|
"virtual-triggering": _ctx.virtualTriggering,
|
|
class: normalizeClass(unref(ns).e("trigger")),
|
|
onBlur: unref(onBlur),
|
|
onClick: unref(onClick),
|
|
onContextmenu: unref(onContextMenu),
|
|
onFocus: unref(onFocus),
|
|
onMouseenter: unref(onMouseenter),
|
|
onMouseleave: unref(onMouseleave),
|
|
onKeydown: unref(onKeydown)
|
|
}, {
|
|
default: withCtx(() => [
|
|
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$2g, [["__file", "trigger.vue"]]);
|
|
|
|
const teleportProps = buildProps({
|
|
to: {
|
|
type: definePropType([String, Object]),
|
|
required: true
|
|
},
|
|
disabled: Boolean
|
|
});
|
|
|
|
const _sfc_main$2f = /* @__PURE__ */ defineComponent({
|
|
__name: "teleport",
|
|
props: teleportProps,
|
|
setup(__props) {
|
|
return (_ctx, _cache) => {
|
|
return _ctx.disabled ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(), createBlock(Teleport$1, {
|
|
key: 1,
|
|
to: _ctx.to
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 8, ["to"]));
|
|
};
|
|
}
|
|
});
|
|
var Teleport = /* @__PURE__ */ _export_sfc(_sfc_main$2f, [["__file", "teleport.vue"]]);
|
|
|
|
const ElTeleport = withInstall(Teleport);
|
|
var ElTeleport$1 = ElTeleport;
|
|
|
|
const __default__$1C = defineComponent({
|
|
name: "ElTooltipContent",
|
|
inheritAttrs: false
|
|
});
|
|
const _sfc_main$2e = /* @__PURE__ */ defineComponent({
|
|
...__default__$1C,
|
|
props: useTooltipContentProps,
|
|
setup(__props, { expose }) {
|
|
const props = __props;
|
|
const { selector } = usePopperContainerId();
|
|
const ns = useNamespace("tooltip");
|
|
const contentRef = ref(null);
|
|
let stopHandle;
|
|
const {
|
|
controlled,
|
|
id,
|
|
open,
|
|
trigger,
|
|
onClose,
|
|
onOpen,
|
|
onShow,
|
|
onHide,
|
|
onBeforeShow,
|
|
onBeforeHide
|
|
} = inject(TOOLTIP_INJECTION_KEY, void 0);
|
|
const transitionClass = computed(() => {
|
|
return props.transition || `${ns.namespace.value}-fade-in-linear`;
|
|
});
|
|
const persistentRef = computed(() => {
|
|
return props.persistent;
|
|
});
|
|
onBeforeUnmount(() => {
|
|
stopHandle == null ? void 0 : stopHandle();
|
|
});
|
|
const shouldRender = computed(() => {
|
|
return unref(persistentRef) ? true : unref(open);
|
|
});
|
|
const shouldShow = computed(() => {
|
|
return props.disabled ? false : unref(open);
|
|
});
|
|
const appendTo = computed(() => {
|
|
return props.appendTo || selector.value;
|
|
});
|
|
const contentStyle = computed(() => {
|
|
var _a;
|
|
return (_a = props.style) != null ? _a : {};
|
|
});
|
|
const ariaHidden = ref(true);
|
|
const onTransitionLeave = () => {
|
|
onHide();
|
|
ariaHidden.value = true;
|
|
};
|
|
const stopWhenControlled = () => {
|
|
if (unref(controlled))
|
|
return true;
|
|
};
|
|
const onContentEnter = composeEventHandlers(stopWhenControlled, () => {
|
|
if (props.enterable && unref(trigger) === "hover") {
|
|
onOpen();
|
|
}
|
|
});
|
|
const onContentLeave = composeEventHandlers(stopWhenControlled, () => {
|
|
if (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(computed(() => {
|
|
var _a;
|
|
return (_a = contentRef.value) == null ? void 0 : _a.popperContentRef;
|
|
}), () => {
|
|
if (unref(controlled))
|
|
return;
|
|
const $trigger = unref(trigger);
|
|
if ($trigger !== "hover") {
|
|
onClose();
|
|
}
|
|
});
|
|
};
|
|
const onBlur = () => {
|
|
if (!props.virtualTriggering) {
|
|
onClose();
|
|
}
|
|
};
|
|
watch(() => unref(open), (val) => {
|
|
if (!val) {
|
|
stopHandle == null ? void 0 : stopHandle();
|
|
} else {
|
|
ariaHidden.value = false;
|
|
}
|
|
}, {
|
|
flush: "post"
|
|
});
|
|
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 openBlock(), createBlock(unref(ElTeleport$1), {
|
|
disabled: !_ctx.teleported,
|
|
to: unref(appendTo)
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(Transition, {
|
|
name: unref(transitionClass),
|
|
onAfterLeave: onTransitionLeave,
|
|
onBeforeEnter,
|
|
onAfterEnter: onAfterShow,
|
|
onBeforeLeave
|
|
}, {
|
|
default: withCtx(() => [
|
|
unref(shouldRender) ? withDirectives((openBlock(), createBlock(unref(ElPopperContent), mergeProps({
|
|
key: 0,
|
|
id: unref(id),
|
|
ref_key: "contentRef",
|
|
ref: contentRef
|
|
}, _ctx.$attrs, {
|
|
"aria-label": _ctx.ariaLabel,
|
|
"aria-hidden": ariaHidden.value,
|
|
"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, unref(contentStyle)],
|
|
"reference-el": _ctx.referenceEl,
|
|
"trigger-target-el": _ctx.triggerTargetEl,
|
|
visible: unref(shouldShow),
|
|
"z-index": _ctx.zIndex,
|
|
onMouseenter: unref(onContentEnter),
|
|
onMouseleave: unref(onContentLeave),
|
|
onBlur,
|
|
onClose: unref(onClose)
|
|
}), {
|
|
default: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "default")
|
|
]),
|
|
_: 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"])), [
|
|
[vShow, unref(shouldShow)]
|
|
]) : createCommentVNode("v-if", true)
|
|
]),
|
|
_: 3
|
|
}, 8, ["name"])
|
|
]),
|
|
_: 3
|
|
}, 8, ["disabled", "to"]);
|
|
};
|
|
}
|
|
});
|
|
var ElTooltipContent = /* @__PURE__ */ _export_sfc(_sfc_main$2e, [["__file", "content.vue"]]);
|
|
|
|
const __default__$1B = defineComponent({
|
|
name: "ElTooltip"
|
|
});
|
|
const _sfc_main$2d = /* @__PURE__ */ defineComponent({
|
|
...__default__$1B,
|
|
props: useTooltipProps,
|
|
emits: tooltipEmits,
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
usePopperContainer();
|
|
const id = useId();
|
|
const popperRef = ref();
|
|
const contentRef = ref();
|
|
const updatePopper = () => {
|
|
var _a;
|
|
const popperComponent = unref(popperRef);
|
|
if (popperComponent) {
|
|
(_a = popperComponent.popperInstanceRef) == null ? void 0 : _a.update();
|
|
}
|
|
};
|
|
const open = ref(false);
|
|
const toggleReason = ref();
|
|
const { show, hide, hasUpdateHandler } = useTooltipModelToggle({
|
|
indicator: open,
|
|
toggleReason
|
|
});
|
|
const { onOpen, onClose } = useDelayedToggle({
|
|
showAfter: toRef(props, "showAfter"),
|
|
hideAfter: toRef(props, "hideAfter"),
|
|
autoClose: toRef(props, "autoClose"),
|
|
open: show,
|
|
close: hide
|
|
});
|
|
const controlled = computed(() => isBoolean(props.visible) && !hasUpdateHandler.value);
|
|
provide(TOOLTIP_INJECTION_KEY, {
|
|
controlled,
|
|
id,
|
|
open: readonly(open),
|
|
trigger: toRef(props, "trigger"),
|
|
onOpen: (event) => {
|
|
onOpen(event);
|
|
},
|
|
onClose: (event) => {
|
|
onClose(event);
|
|
},
|
|
onToggle: (event) => {
|
|
if (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
|
|
});
|
|
watch(() => props.disabled, (disabled) => {
|
|
if (disabled && open.value) {
|
|
open.value = false;
|
|
}
|
|
});
|
|
const isFocusInsideContent = (event) => {
|
|
var _a, _b;
|
|
const popperContent = (_b = (_a = contentRef.value) == null ? void 0 : _a.contentRef) == null ? void 0 : _b.popperContentRef;
|
|
const activeElement = (event == null ? void 0 : event.relatedTarget) || document.activeElement;
|
|
return popperContent && popperContent.contains(activeElement);
|
|
};
|
|
onDeactivated(() => open.value && hide());
|
|
expose({
|
|
popperRef,
|
|
contentRef,
|
|
isFocusInsideContent,
|
|
updatePopper,
|
|
onOpen,
|
|
onClose,
|
|
hide
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createBlock(unref(ElPopper), {
|
|
ref_key: "popperRef",
|
|
ref: popperRef,
|
|
role: _ctx.role
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(ElTooltipTrigger, {
|
|
disabled: _ctx.disabled,
|
|
trigger: _ctx.trigger,
|
|
"trigger-keys": _ctx.triggerKeys,
|
|
"virtual-ref": _ctx.virtualRef,
|
|
"virtual-triggering": _ctx.virtualTriggering
|
|
}, {
|
|
default: withCtx(() => [
|
|
_ctx.$slots.default ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("v-if", true)
|
|
]),
|
|
_: 3
|
|
}, 8, ["disabled", "trigger", "trigger-keys", "virtual-ref", "virtual-triggering"]),
|
|
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: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "content", {}, () => [
|
|
_ctx.rawContent ? (openBlock(), createElementBlock("span", {
|
|
key: 0,
|
|
innerHTML: _ctx.content
|
|
}, null, 8, ["innerHTML"])) : (openBlock(), createElementBlock("span", { key: 1 }, toDisplayString(_ctx.content), 1))
|
|
]),
|
|
_ctx.showArrow ? (openBlock(), createBlock(unref(ElPopperArrow), {
|
|
key: 0,
|
|
"arrow-offset": _ctx.arrowOffset
|
|
}, null, 8, ["arrow-offset"])) : 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$2d, [["__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
|
|
},
|
|
teleported: useTooltipContentProps.teleported,
|
|
highlightFirstItem: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
fitInputWidth: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
clearable: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
name: String,
|
|
...useAriaProps(["ariaLabel"])
|
|
});
|
|
const autocompleteEmits = {
|
|
[UPDATE_MODEL_EVENT]: (value) => isString$1(value),
|
|
[INPUT_EVENT]: (value) => isString$1(value),
|
|
[CHANGE_EVENT]: (value) => isString$1(value),
|
|
focus: (evt) => evt instanceof FocusEvent,
|
|
blur: (evt) => evt instanceof FocusEvent,
|
|
clear: () => true,
|
|
select: (item) => isObject$1(item)
|
|
};
|
|
|
|
const COMPONENT_NAME$i = "ElAutocomplete";
|
|
const __default__$1A = defineComponent({
|
|
name: COMPONENT_NAME$i,
|
|
inheritAttrs: false
|
|
});
|
|
const _sfc_main$2c = /* @__PURE__ */ defineComponent({
|
|
...__default__$1A,
|
|
props: autocompleteProps,
|
|
emits: autocompleteEmits,
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const attrs = useAttrs();
|
|
const rawAttrs = useAttrs$1();
|
|
const disabled = useFormDisabled();
|
|
const ns = useNamespace("autocomplete");
|
|
const inputRef = ref();
|
|
const regionRef = ref();
|
|
const popperRef = ref();
|
|
const listboxRef = ref();
|
|
let readonly = false;
|
|
let ignoreFocusEvent = false;
|
|
const suggestions = ref([]);
|
|
const highlightedIndex = ref(-1);
|
|
const dropdownWidth = ref("");
|
|
const activated = ref(false);
|
|
const suggestionDisabled = ref(false);
|
|
const loading = ref(false);
|
|
const listboxId = useId();
|
|
const styles = computed(() => rawAttrs.style);
|
|
const suggestionVisible = computed(() => {
|
|
const isValidData = suggestions.value.length > 0;
|
|
return (isValidData || loading.value) && activated.value;
|
|
});
|
|
const suggestionLoading = computed(() => !props.hideLoading && loading.value);
|
|
const refInput = computed(() => {
|
|
if (inputRef.value) {
|
|
return Array.from(inputRef.value.$el.querySelectorAll("input"));
|
|
}
|
|
return [];
|
|
});
|
|
const onSuggestionShow = () => {
|
|
if (suggestionVisible.value) {
|
|
dropdownWidth.value = `${inputRef.value.$el.offsetWidth}px`;
|
|
}
|
|
};
|
|
const onHide = () => {
|
|
highlightedIndex.value = -1;
|
|
};
|
|
const getData = async (queryString) => {
|
|
if (suggestionDisabled.value)
|
|
return;
|
|
const cb = (suggestionList) => {
|
|
loading.value = false;
|
|
if (suggestionDisabled.value)
|
|
return;
|
|
if (isArray$1(suggestionList)) {
|
|
suggestions.value = suggestionList;
|
|
highlightedIndex.value = props.highlightFirstItem ? 0 : -1;
|
|
} else {
|
|
throwError(COMPONENT_NAME$i, "autocomplete suggestions must be an array");
|
|
}
|
|
};
|
|
loading.value = true;
|
|
if (isArray$1(props.fetchSuggestions)) {
|
|
cb(props.fetchSuggestions);
|
|
} else {
|
|
const result = await props.fetchSuggestions(queryString, cb);
|
|
if (isArray$1(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) {
|
|
activated.value = true;
|
|
emit("focus", evt);
|
|
if (props.triggerOnFocus && !readonly) {
|
|
debouncedGetData(String(props.modelValue));
|
|
}
|
|
} else {
|
|
ignoreFocusEvent = false;
|
|
}
|
|
};
|
|
const handleBlur = (evt) => {
|
|
setTimeout(() => {
|
|
var _a;
|
|
if ((_a = popperRef.value) == null ? void 0 : _a.isFocusInsideContent()) {
|
|
ignoreFocusEvent = true;
|
|
return;
|
|
}
|
|
activated.value && close();
|
|
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}`);
|
|
};
|
|
const stopHandle = onClickOutside(listboxRef, () => {
|
|
suggestionVisible.value && close();
|
|
});
|
|
onBeforeUnmount(() => {
|
|
stopHandle == null ? void 0 : stopHandle();
|
|
});
|
|
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,
|
|
getData
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createBlock(unref(ElTooltip), {
|
|
ref_key: "popperRef",
|
|
ref: popperRef,
|
|
visible: unref(suggestionVisible),
|
|
placement: _ctx.placement,
|
|
"fallback-placements": ["bottom-start", "top-start"],
|
|
"popper-class": [unref(ns).e("popper"), _ctx.popperClass],
|
|
teleported: _ctx.teleported,
|
|
"gpu-acceleration": false,
|
|
pure: "",
|
|
"manual-mode": "",
|
|
effect: "light",
|
|
trigger: "click",
|
|
transition: `${unref(ns).namespace.value}-zoom-in-top`,
|
|
persistent: "",
|
|
role: "listbox",
|
|
onBeforeShow: onSuggestionShow,
|
|
onHide
|
|
}, {
|
|
content: withCtx(() => [
|
|
createElementVNode("div", {
|
|
ref_key: "regionRef",
|
|
ref: regionRef,
|
|
class: normalizeClass([unref(ns).b("suggestion"), unref(ns).is("loading", unref(suggestionLoading))]),
|
|
style: normalizeStyle({
|
|
[_ctx.fitInputWidth ? "width" : "minWidth"]: dropdownWidth.value,
|
|
outline: "none"
|
|
}),
|
|
role: "region"
|
|
}, [
|
|
createVNode(unref(ElScrollbar), {
|
|
id: unref(listboxId),
|
|
tag: "ul",
|
|
"wrap-class": unref(ns).be("suggestion", "wrap"),
|
|
"view-class": unref(ns).be("suggestion", "list"),
|
|
role: "listbox"
|
|
}, {
|
|
default: withCtx(() => [
|
|
unref(suggestionLoading) ? (openBlock(), createElementBlock("li", { key: 0 }, [
|
|
renderSlot(_ctx.$slots, "loading", {}, () => [
|
|
createVNode(unref(ElIcon), {
|
|
class: normalizeClass(unref(ns).is("loading"))
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(loading_default))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])
|
|
])
|
|
])) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(suggestions.value, (item, index) => {
|
|
return openBlock(), createElementBlock("li", {
|
|
id: `${unref(listboxId)}-item-${index}`,
|
|
key: index,
|
|
class: normalizeClass({ highlighted: highlightedIndex.value === index }),
|
|
role: "option",
|
|
"aria-selected": highlightedIndex.value === index,
|
|
onClick: ($event) => handleSelect(item)
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default", { item }, () => [
|
|
createTextVNode(toDisplayString(item[_ctx.valueKey]), 1)
|
|
])
|
|
], 10, ["id", "aria-selected", "onClick"]);
|
|
}), 128))
|
|
]),
|
|
_: 3
|
|
}, 8, ["id", "wrap-class", "view-class"])
|
|
], 6)
|
|
]),
|
|
default: withCtx(() => [
|
|
createElementVNode("div", {
|
|
ref_key: "listboxRef",
|
|
ref: listboxRef,
|
|
class: normalizeClass([unref(ns).b(), _ctx.$attrs.class]),
|
|
style: normalizeStyle(unref(styles)),
|
|
role: "combobox",
|
|
"aria-haspopup": "listbox",
|
|
"aria-expanded": unref(suggestionVisible),
|
|
"aria-owns": unref(listboxId)
|
|
}, [
|
|
createVNode(unref(ElInput), mergeProps({
|
|
ref_key: "inputRef",
|
|
ref: inputRef
|
|
}, unref(attrs), {
|
|
clearable: _ctx.clearable,
|
|
disabled: unref(disabled),
|
|
name: _ctx.name,
|
|
"model-value": _ctx.modelValue,
|
|
"aria-label": _ctx.ariaLabel,
|
|
onInput: handleInput,
|
|
onChange: handleChange,
|
|
onFocus: handleFocus,
|
|
onBlur: handleBlur,
|
|
onClear: handleClear,
|
|
onKeydown: [
|
|
withKeys(withModifiers(($event) => highlight(highlightedIndex.value - 1), ["prevent"]), ["up"]),
|
|
withKeys(withModifiers(($event) => highlight(highlightedIndex.value + 1), ["prevent"]), ["down"]),
|
|
withKeys(handleKeyEnter, ["enter"]),
|
|
withKeys(close, ["tab"]),
|
|
withKeys(handleKeyEscape, ["esc"])
|
|
],
|
|
onMousedown: handleMouseDown
|
|
}), createSlots({ _: 2 }, [
|
|
_ctx.$slots.prepend ? {
|
|
name: "prepend",
|
|
fn: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "prepend")
|
|
])
|
|
} : void 0,
|
|
_ctx.$slots.append ? {
|
|
name: "append",
|
|
fn: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "append")
|
|
])
|
|
} : void 0,
|
|
_ctx.$slots.prefix ? {
|
|
name: "prefix",
|
|
fn: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "prefix")
|
|
])
|
|
} : void 0,
|
|
_ctx.$slots.suffix ? {
|
|
name: "suffix",
|
|
fn: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "suffix")
|
|
])
|
|
} : void 0
|
|
]), 1040, ["clearable", "disabled", "name", "model-value", "aria-label", "onKeydown"])
|
|
], 14, ["aria-expanded", "aria-owns"])
|
|
]),
|
|
_: 3
|
|
}, 8, ["visible", "placement", "popper-class", "teleported", "transition"]);
|
|
};
|
|
}
|
|
});
|
|
var Autocomplete = /* @__PURE__ */ _export_sfc(_sfc_main$2c, [["__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 __default__$1z = defineComponent({
|
|
name: "ElAvatar"
|
|
});
|
|
const _sfc_main$2b = /* @__PURE__ */ defineComponent({
|
|
...__default__$1z,
|
|
props: avatarProps,
|
|
emits: avatarEmits,
|
|
setup(__props, { emit }) {
|
|
const props = __props;
|
|
const ns = useNamespace("avatar");
|
|
const hasLoadError = ref(false);
|
|
const avatarClass = computed(() => {
|
|
const { size, icon, shape } = props;
|
|
const classList = [ns.b()];
|
|
if (isString$1(size))
|
|
classList.push(ns.m(size));
|
|
if (icon)
|
|
classList.push(ns.m("icon"));
|
|
if (shape)
|
|
classList.push(ns.m(shape));
|
|
return classList;
|
|
});
|
|
const sizeStyle = computed(() => {
|
|
const { size } = props;
|
|
return isNumber(size) ? ns.cssVarBlock({
|
|
size: addUnit(size) || ""
|
|
}) : void 0;
|
|
});
|
|
const fitStyle = computed(() => ({
|
|
objectFit: props.fit
|
|
}));
|
|
watch(() => props.src, () => hasLoadError.value = false);
|
|
function handleError(e) {
|
|
hasLoadError.value = true;
|
|
emit("error", e);
|
|
}
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("span", {
|
|
class: normalizeClass(unref(avatarClass)),
|
|
style: normalizeStyle(unref(sizeStyle))
|
|
}, [
|
|
(_ctx.src || _ctx.srcSet) && !hasLoadError.value ? (openBlock(), createElementBlock("img", {
|
|
key: 0,
|
|
src: _ctx.src,
|
|
alt: _ctx.alt,
|
|
srcset: _ctx.srcSet,
|
|
style: normalizeStyle(unref(fitStyle)),
|
|
onError: handleError
|
|
}, null, 44, ["src", "alt", "srcset"])) : _ctx.icon ? (openBlock(), createBlock(unref(ElIcon), { key: 1 }, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.icon)))
|
|
]),
|
|
_: 1
|
|
})) : renderSlot(_ctx.$slots, "default", { key: 2 })
|
|
], 6);
|
|
};
|
|
}
|
|
});
|
|
var Avatar = /* @__PURE__ */ _export_sfc(_sfc_main$2b, [["__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 = shallowRef();
|
|
const container = shallowRef();
|
|
const visible = ref(false);
|
|
const handleScroll = () => {
|
|
if (el.value)
|
|
visible.value = el.value.scrollTop >= props.visibilityHeight;
|
|
};
|
|
const handleClick = (event) => {
|
|
var _a;
|
|
(_a = el.value) == null ? void 0 : _a.scrollTo({ top: 0, behavior: "smooth" });
|
|
emit("click", event);
|
|
};
|
|
const handleScrollThrottled = useThrottleFn(handleScroll, 300, true);
|
|
useEventListener(container, "scroll", handleScrollThrottled);
|
|
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;
|
|
}
|
|
handleScroll();
|
|
});
|
|
return {
|
|
visible,
|
|
handleClick
|
|
};
|
|
};
|
|
|
|
const COMPONENT_NAME$h = "ElBacktop";
|
|
const __default__$1y = defineComponent({
|
|
name: COMPONENT_NAME$h
|
|
});
|
|
const _sfc_main$2a = /* @__PURE__ */ defineComponent({
|
|
...__default__$1y,
|
|
props: backtopProps,
|
|
emits: backtopEmits,
|
|
setup(__props, { emit }) {
|
|
const props = __props;
|
|
const ns = useNamespace("backtop");
|
|
const { handleClick, visible } = useBackTop(props, emit, COMPONENT_NAME$h);
|
|
const backTopStyle = computed(() => ({
|
|
right: `${props.right}px`,
|
|
bottom: `${props.bottom}px`
|
|
}));
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createBlock(Transition, {
|
|
name: `${unref(ns).namespace.value}-fade-in`
|
|
}, {
|
|
default: withCtx(() => [
|
|
unref(visible) ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
style: normalizeStyle(unref(backTopStyle)),
|
|
class: normalizeClass(unref(ns).b()),
|
|
onClick: withModifiers(unref(handleClick), ["stop"])
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default", {}, () => [
|
|
createVNode(unref(ElIcon), {
|
|
class: normalizeClass(unref(ns).e("icon"))
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(caret_top_default))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])
|
|
])
|
|
], 14, ["onClick"])) : createCommentVNode("v-if", true)
|
|
]),
|
|
_: 3
|
|
}, 8, ["name"]);
|
|
};
|
|
}
|
|
});
|
|
var Backtop = /* @__PURE__ */ _export_sfc(_sfc_main$2a, [["__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"
|
|
},
|
|
showZero: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
color: String,
|
|
badgeStyle: {
|
|
type: definePropType([String, Object, Array])
|
|
},
|
|
offset: {
|
|
type: definePropType(Array),
|
|
default: [0, 0]
|
|
},
|
|
badgeClass: {
|
|
type: String
|
|
}
|
|
});
|
|
|
|
const __default__$1x = defineComponent({
|
|
name: "ElBadge"
|
|
});
|
|
const _sfc_main$29 = /* @__PURE__ */ defineComponent({
|
|
...__default__$1x,
|
|
props: badgeProps,
|
|
setup(__props, { expose }) {
|
|
const props = __props;
|
|
const ns = useNamespace("badge");
|
|
const content = computed(() => {
|
|
if (props.isDot)
|
|
return "";
|
|
if (isNumber(props.value) && isNumber(props.max)) {
|
|
if (props.max < props.value) {
|
|
return `${props.max}+`;
|
|
}
|
|
return props.value === 0 && !props.showZero ? "" : `${props.value}`;
|
|
}
|
|
return `${props.value}`;
|
|
});
|
|
const style = computed(() => {
|
|
var _a, _b, _c, _d, _e;
|
|
return [
|
|
{
|
|
backgroundColor: props.color,
|
|
marginRight: addUnit(-((_b = (_a = props.offset) == null ? void 0 : _a[0]) != null ? _b : 0)),
|
|
marginTop: addUnit((_d = (_c = props.offset) == null ? void 0 : _c[1]) != null ? _d : 0)
|
|
},
|
|
(_e = props.badgeStyle) != null ? _e : {}
|
|
];
|
|
});
|
|
expose({
|
|
content
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass(unref(ns).b())
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default"),
|
|
createVNode(Transition, {
|
|
name: `${unref(ns).namespace.value}-zoom-in-center`,
|
|
persisted: ""
|
|
}, {
|
|
default: withCtx(() => [
|
|
withDirectives(createElementVNode("sup", {
|
|
class: normalizeClass([
|
|
unref(ns).e("content"),
|
|
unref(ns).em("content", _ctx.type),
|
|
unref(ns).is("fixed", !!_ctx.$slots.default),
|
|
unref(ns).is("dot", _ctx.isDot),
|
|
_ctx.badgeClass
|
|
]),
|
|
style: normalizeStyle(unref(style)),
|
|
textContent: toDisplayString(unref(content))
|
|
}, null, 14, ["textContent"]), [
|
|
[vShow, !_ctx.hidden && (unref(content) || _ctx.isDot)]
|
|
])
|
|
]),
|
|
_: 1
|
|
}, 8, ["name"])
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var Badge = /* @__PURE__ */ _export_sfc(_sfc_main$29, [["__file", "badge.vue"]]);
|
|
|
|
const ElBadge = withInstall(Badge);
|
|
|
|
const breadcrumbKey = Symbol("breadcrumbKey");
|
|
|
|
const breadcrumbProps = buildProps({
|
|
separator: {
|
|
type: String,
|
|
default: "/"
|
|
},
|
|
separatorIcon: {
|
|
type: iconPropType
|
|
}
|
|
});
|
|
|
|
const __default__$1w = defineComponent({
|
|
name: "ElBreadcrumb"
|
|
});
|
|
const _sfc_main$28 = /* @__PURE__ */ defineComponent({
|
|
...__default__$1w,
|
|
props: breadcrumbProps,
|
|
setup(__props) {
|
|
const props = __props;
|
|
const { t } = useLocale();
|
|
const ns = useNamespace("breadcrumb");
|
|
const breadcrumb = ref();
|
|
provide(breadcrumbKey, props);
|
|
onMounted(() => {
|
|
const items = breadcrumb.value.querySelectorAll(`.${ns.e("item")}`);
|
|
if (items.length) {
|
|
items[items.length - 1].setAttribute("aria-current", "page");
|
|
}
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
ref_key: "breadcrumb",
|
|
ref: breadcrumb,
|
|
class: normalizeClass(unref(ns).b()),
|
|
"aria-label": unref(t)("el.breadcrumb.label"),
|
|
role: "navigation"
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 10, ["aria-label"]);
|
|
};
|
|
}
|
|
});
|
|
var Breadcrumb = /* @__PURE__ */ _export_sfc(_sfc_main$28, [["__file", "breadcrumb.vue"]]);
|
|
|
|
const breadcrumbItemProps = buildProps({
|
|
to: {
|
|
type: definePropType([String, Object]),
|
|
default: ""
|
|
},
|
|
replace: Boolean
|
|
});
|
|
|
|
const __default__$1v = defineComponent({
|
|
name: "ElBreadcrumbItem"
|
|
});
|
|
const _sfc_main$27 = /* @__PURE__ */ defineComponent({
|
|
...__default__$1v,
|
|
props: breadcrumbItemProps,
|
|
setup(__props) {
|
|
const props = __props;
|
|
const instance = getCurrentInstance();
|
|
const breadcrumbContext = inject(breadcrumbKey, void 0);
|
|
const ns = useNamespace("breadcrumb");
|
|
const router = instance.appContext.config.globalProperties.$router;
|
|
const link = ref();
|
|
const onClick = () => {
|
|
if (!props.to || !router)
|
|
return;
|
|
props.replace ? router.replace(props.to) : router.push(props.to);
|
|
};
|
|
return (_ctx, _cache) => {
|
|
var _a, _b;
|
|
return openBlock(), createElementBlock("span", {
|
|
class: normalizeClass(unref(ns).e("item"))
|
|
}, [
|
|
createElementVNode("span", {
|
|
ref_key: "link",
|
|
ref: link,
|
|
class: normalizeClass([unref(ns).e("inner"), unref(ns).is("link", !!_ctx.to)]),
|
|
role: "link",
|
|
onClick
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 2),
|
|
((_a = unref(breadcrumbContext)) == null ? void 0 : _a.separatorIcon) ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).e("separator"))
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(unref(breadcrumbContext).separatorIcon)))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : (openBlock(), createElementBlock("span", {
|
|
key: 1,
|
|
class: normalizeClass(unref(ns).e("separator")),
|
|
role: "presentation"
|
|
}, toDisplayString((_b = unref(breadcrumbContext)) == null ? void 0 : _b.separator), 3))
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var BreadcrumbItem = /* @__PURE__ */ _export_sfc(_sfc_main$27, [["__file", "breadcrumb-item.vue"]]);
|
|
|
|
const ElBreadcrumb = withInstall(Breadcrumb, {
|
|
BreadcrumbItem
|
|
});
|
|
const ElBreadcrumbItem = withNoopInstall(BreadcrumbItem);
|
|
|
|
const buttonGroupContextKey = Symbol("buttonGroupContextKey");
|
|
|
|
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"
|
|
}, computed(() => props.type === "text"));
|
|
const buttonGroupContext = inject(buttonGroupContextKey, void 0);
|
|
const globalConfig = useGlobalConfig("button");
|
|
const { form } = useFormItem();
|
|
const _size = useFormSize(computed(() => buttonGroupContext == null ? void 0 : buttonGroupContext.size));
|
|
const _disabled = useFormDisabled();
|
|
const _ref = ref();
|
|
const slots = useSlots();
|
|
const _type = computed(() => props.type || (buttonGroupContext == null ? void 0 : buttonGroupContext.type) || "");
|
|
const autoInsertSpace = computed(() => {
|
|
var _a, _b, _c;
|
|
return (_c = (_b = props.autoInsertSpace) != null ? _b : (_a = globalConfig.value) == null ? void 0 : _a.autoInsertSpace) != null ? _c : false;
|
|
});
|
|
const _props = computed(() => {
|
|
if (props.tag === "button") {
|
|
return {
|
|
ariaDisabled: _disabled.value || props.loading,
|
|
disabled: _disabled.value || props.loading,
|
|
autofocus: props.autofocus,
|
|
type: props.nativeType
|
|
};
|
|
}
|
|
return {};
|
|
});
|
|
const shouldAddSpace = 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) === Text$1) {
|
|
const text = slot.children;
|
|
return /^\p{Unified_Ideograph}{2}$/u.test(text.trim());
|
|
}
|
|
}
|
|
return false;
|
|
});
|
|
const handleClick = (evt) => {
|
|
if (_disabled.value || props.loading) {
|
|
evt.stopPropagation();
|
|
return;
|
|
}
|
|
if (props.nativeType === "reset") {
|
|
form == null ? void 0 : form.resetFields();
|
|
}
|
|
emit("click", evt);
|
|
};
|
|
return {
|
|
_disabled,
|
|
_size,
|
|
_type,
|
|
_ref,
|
|
_props,
|
|
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
|
|
},
|
|
tag: {
|
|
type: definePropType([String, Object]),
|
|
default: "button"
|
|
}
|
|
});
|
|
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 = useFormDisabled();
|
|
const ns = useNamespace("button");
|
|
return computed(() => {
|
|
let styles = {};
|
|
let buttonColor = props.color;
|
|
if (buttonColor) {
|
|
const match = buttonColor.match(/var\((.*?)\)/);
|
|
if (match) {
|
|
buttonColor = window.getComputedStyle(window.document.documentElement).getPropertyValue(match[1]);
|
|
}
|
|
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 __default__$1u = defineComponent({
|
|
name: "ElButton"
|
|
});
|
|
const _sfc_main$26 = /* @__PURE__ */ defineComponent({
|
|
...__default__$1u,
|
|
props: buttonProps,
|
|
emits: buttonEmits,
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const buttonStyle = useButtonCustomStyle(props);
|
|
const ns = useNamespace("button");
|
|
const { _ref, _size, _type, _disabled, _props, shouldAddSpace, handleClick } = useButton(props, emit);
|
|
const buttonKls = computed(() => [
|
|
ns.b(),
|
|
ns.m(_type.value),
|
|
ns.m(_size.value),
|
|
ns.is("disabled", _disabled.value),
|
|
ns.is("loading", props.loading),
|
|
ns.is("plain", props.plain),
|
|
ns.is("round", props.round),
|
|
ns.is("circle", props.circle),
|
|
ns.is("text", props.text),
|
|
ns.is("link", props.link),
|
|
ns.is("has-bg", props.bg)
|
|
]);
|
|
expose({
|
|
ref: _ref,
|
|
size: _size,
|
|
type: _type,
|
|
disabled: _disabled,
|
|
shouldAddSpace
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), mergeProps({
|
|
ref_key: "_ref",
|
|
ref: _ref
|
|
}, unref(_props), {
|
|
class: unref(buttonKls),
|
|
style: unref(buttonStyle),
|
|
onClick: unref(handleClick)
|
|
}), {
|
|
default: withCtx(() => [
|
|
_ctx.loading ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
_ctx.$slots.loading ? renderSlot(_ctx.$slots, "loading", { key: 0 }) : (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 1,
|
|
class: normalizeClass(unref(ns).is("loading"))
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.loadingIcon)))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"]))
|
|
], 64)) : _ctx.icon || _ctx.$slots.icon ? (openBlock(), createBlock(unref(ElIcon), { key: 1 }, {
|
|
default: withCtx(() => [
|
|
_ctx.icon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon), { key: 0 })) : renderSlot(_ctx.$slots, "icon", { key: 1 })
|
|
]),
|
|
_: 3
|
|
})) : createCommentVNode("v-if", true),
|
|
_ctx.$slots.default ? (openBlock(), createElementBlock("span", {
|
|
key: 2,
|
|
class: normalizeClass({ [unref(ns).em("text", "expand")]: unref(shouldAddSpace) })
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
]),
|
|
_: 3
|
|
}, 16, ["class", "style", "onClick"]);
|
|
};
|
|
}
|
|
});
|
|
var Button = /* @__PURE__ */ _export_sfc(_sfc_main$26, [["__file", "button.vue"]]);
|
|
|
|
const buttonGroupProps = {
|
|
size: buttonProps.size,
|
|
type: buttonProps.type
|
|
};
|
|
|
|
const __default__$1t = defineComponent({
|
|
name: "ElButtonGroup"
|
|
});
|
|
const _sfc_main$25 = /* @__PURE__ */ defineComponent({
|
|
...__default__$1t,
|
|
props: buttonGroupProps,
|
|
setup(__props) {
|
|
const props = __props;
|
|
provide(buttonGroupContextKey, reactive({
|
|
size: toRef(props, "size"),
|
|
type: toRef(props, "type")
|
|
}));
|
|
const ns = useNamespace("button");
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass(unref(ns).b("group"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var ButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$25, [["__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$1 = ["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",
|
|
years: "YYYY",
|
|
month: "YYYY-MM",
|
|
months: "YYYY-MM",
|
|
datetime: `${DEFAULT_FORMATS_DATE} ${DEFAULT_FORMATS_TIME}`,
|
|
monthrange: "YYYY-MM",
|
|
yearrange: "YYYY",
|
|
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$1(a);
|
|
const bIsDate = isDate$1(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$1(a);
|
|
const bIsArray = isArray$1(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,
|
|
dateFormat: String,
|
|
timeFormat: 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: Boolean,
|
|
disabled: Boolean,
|
|
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: Boolean,
|
|
...disabledTimeListsProps,
|
|
disabledDate: {
|
|
type: Function
|
|
},
|
|
cellClassName: {
|
|
type: Function
|
|
},
|
|
shortcuts: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
arrowControl: Boolean,
|
|
tabindex: {
|
|
type: definePropType([String, Number]),
|
|
default: 0
|
|
},
|
|
validateEvent: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
unlinkPanels: Boolean,
|
|
placement: {
|
|
type: definePropType(String),
|
|
values: Ee,
|
|
default: "bottom"
|
|
},
|
|
fallbackPlacements: {
|
|
type: definePropType(Array),
|
|
default: ["bottom", "top", "right", "left"]
|
|
},
|
|
...useEmptyValuesProps,
|
|
...useAriaProps(["ariaLabel"])
|
|
});
|
|
|
|
const __default__$1s = defineComponent({
|
|
name: "Picker"
|
|
});
|
|
const _sfc_main$24 = /* @__PURE__ */ defineComponent({
|
|
...__default__$1s,
|
|
props: timePickerDefaultProps,
|
|
emits: [
|
|
"update:modelValue",
|
|
"change",
|
|
"focus",
|
|
"blur",
|
|
"clear",
|
|
"calendar-change",
|
|
"panel-change",
|
|
"visible-change",
|
|
"keydown"
|
|
],
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const attrs = useAttrs$1();
|
|
const { lang } = useLocale();
|
|
const nsDate = useNamespace("date");
|
|
const nsInput = useNamespace("input");
|
|
const nsRange = useNamespace("range");
|
|
const { form, formItem } = useFormItem();
|
|
const elPopperOptions = inject("ElPopperOptions", {});
|
|
const { valueOnClear } = useEmptyValues(props, null);
|
|
const refPopper = ref();
|
|
const inputRef = ref();
|
|
const pickerVisible = ref(false);
|
|
const pickerActualVisible = ref(false);
|
|
const valueOnOpen = ref(null);
|
|
let hasJustTabExitedInput = false;
|
|
let ignoreFocusEvent = false;
|
|
const rangeInputKls = computed(() => [
|
|
nsDate.b("editor"),
|
|
nsDate.bm("editor", props.type),
|
|
nsInput.e("wrapper"),
|
|
nsDate.is("disabled", pickerDisabled.value),
|
|
nsDate.is("active", pickerVisible.value),
|
|
nsRange.b("editor"),
|
|
pickerSize ? nsRange.bm("editor", pickerSize.value) : "",
|
|
attrs.class
|
|
]);
|
|
const clearIconKls = computed(() => [
|
|
nsInput.e("icon"),
|
|
nsRange.e("close-icon"),
|
|
!showClose.value ? nsRange.e("close-icon--hidden") : ""
|
|
]);
|
|
watch(pickerVisible, (val) => {
|
|
if (!val) {
|
|
userInput.value = null;
|
|
nextTick(() => {
|
|
emitChange(props.modelValue);
|
|
});
|
|
} else {
|
|
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$1(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 = 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);
|
|
nextTick(() => {
|
|
ignoreFocusEvent = false;
|
|
});
|
|
};
|
|
const onPick = (date = "", visible = false) => {
|
|
if (!visible) {
|
|
ignoreFocusEvent = true;
|
|
}
|
|
pickerVisible.value = visible;
|
|
let result;
|
|
if (isArray$1(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] = 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 = computed(() => {
|
|
return props.disabled || (form == null ? void 0 : form.disabled);
|
|
});
|
|
const parsedValue = computed(() => {
|
|
let dayOrDays;
|
|
if (valueIsEmpty.value) {
|
|
if (pickerOptions.value.getDefaultValue) {
|
|
dayOrDays = pickerOptions.value.getDefaultValue();
|
|
}
|
|
} else {
|
|
if (isArray$1(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;
|
|
if (!valueIsEmpty.value) {
|
|
emitInput(isArray$1(dayOrDays) ? dayOrDays.map((_) => _.toDate()) : dayOrDays.toDate());
|
|
}
|
|
}
|
|
}
|
|
if (isArray$1(dayOrDays) && dayOrDays.some((day) => !day)) {
|
|
dayOrDays = [];
|
|
}
|
|
return dayOrDays;
|
|
});
|
|
const displayValue = computed(() => {
|
|
if (!pickerOptions.value.panelReady)
|
|
return "";
|
|
const formattedValue = formatDayjsToString(parsedValue.value);
|
|
if (isArray$1(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 || isMonthsPicker.value || isYearsPicker.value ? formattedValue.join(", ") : formattedValue;
|
|
}
|
|
return "";
|
|
});
|
|
const isTimeLikePicker = computed(() => props.type.includes("time"));
|
|
const isTimePicker = computed(() => props.type.startsWith("time"));
|
|
const isDatesPicker = computed(() => props.type === "dates");
|
|
const isMonthsPicker = computed(() => props.type === "months");
|
|
const isYearsPicker = computed(() => props.type === "years");
|
|
const triggerIcon = computed(() => props.prefixIcon || (isTimeLikePicker.value ? clock_default : calendar_default));
|
|
const showClose = ref(false);
|
|
const onClearIconClick = (event) => {
|
|
if (props.readonly || pickerDisabled.value)
|
|
return;
|
|
if (showClose.value) {
|
|
event.stopPropagation();
|
|
focusOnInputBox();
|
|
if (pickerOptions.value.handleClear) {
|
|
pickerOptions.value.handleClear();
|
|
} else {
|
|
emitInput(valueOnClear.value);
|
|
}
|
|
emitChange(valueOnClear.value, true);
|
|
showClose.value = false;
|
|
onHide();
|
|
}
|
|
emit("clear");
|
|
};
|
|
const valueIsEmpty = computed(() => {
|
|
const { modelValue } = props;
|
|
return !modelValue || isArray$1(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 = computed(() => {
|
|
return props.type.includes("range");
|
|
});
|
|
const pickerSize = useFormSize();
|
|
const popperEl = computed(() => {
|
|
var _a, _b;
|
|
return (_b = (_a = unref(refPopper)) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
|
|
});
|
|
const actualInputRef = computed(() => {
|
|
var _a;
|
|
if (unref(isRangeInput)) {
|
|
return unref(inputRef);
|
|
}
|
|
return (_a = unref(inputRef)) == null ? void 0 : _a.$el;
|
|
});
|
|
const stophandle = onClickOutside(actualInputRef, (e) => {
|
|
const unrefedPopperEl = unref(popperEl);
|
|
const inputEl = unref(actualInputRef);
|
|
if (unrefedPopperEl && (e.target === unrefedPopperEl || e.composedPath().includes(unrefedPopperEl)) || e.target === inputEl || e.composedPath().includes(inputEl))
|
|
return;
|
|
pickerVisible.value = false;
|
|
});
|
|
onBeforeUnmount(() => {
|
|
stophandle == null ? void 0 : stophandle();
|
|
});
|
|
const userInput = ref(null);
|
|
const handleChange = () => {
|
|
if (userInput.value) {
|
|
const value = parseUserInputToDayjs(displayValue.value);
|
|
if (value) {
|
|
if (isValidValue(value)) {
|
|
emitInput(isArray$1(value) ? value.map((_) => _.toDate()) : value.toDate());
|
|
userInput.value = null;
|
|
}
|
|
}
|
|
}
|
|
if (userInput.value === "") {
|
|
emitInput(valueOnClear.value);
|
|
emitChange(valueOnClear.value);
|
|
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 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 = 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 = unref(userInput);
|
|
const value = parseUserInputToDayjs(values && values[1]);
|
|
const parsedVal = unref(parsedValue);
|
|
if (value && value.isValid()) {
|
|
userInput.value = [
|
|
((_a = 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 = 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);
|
|
};
|
|
provide("EP_PICKER_BASE", {
|
|
props
|
|
});
|
|
expose({
|
|
focus,
|
|
handleFocusInput,
|
|
handleBlurInput,
|
|
handleOpen,
|
|
handleClose,
|
|
onPick
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createBlock(unref(ElTooltip), mergeProps({
|
|
ref_key: "refPopper",
|
|
ref: refPopper,
|
|
visible: pickerVisible.value,
|
|
effect: "light",
|
|
pure: "",
|
|
trigger: "click"
|
|
}, _ctx.$attrs, {
|
|
role: "dialog",
|
|
teleported: "",
|
|
transition: `${unref(nsDate).namespace.value}-zoom-in-top`,
|
|
"popper-class": [`${unref(nsDate).namespace.value}-picker__popper`, _ctx.popperClass],
|
|
"popper-options": unref(elPopperOptions),
|
|
"fallback-placements": _ctx.fallbackPlacements,
|
|
"gpu-acceleration": false,
|
|
placement: _ctx.placement,
|
|
"stop-popper-mouse-event": false,
|
|
"hide-after": 0,
|
|
persistent: "",
|
|
onBeforeShow,
|
|
onShow,
|
|
onHide
|
|
}), {
|
|
default: withCtx(() => [
|
|
!unref(isRangeInput) ? (openBlock(), createBlock(unref(ElInput), {
|
|
key: 0,
|
|
id: _ctx.id,
|
|
ref_key: "inputRef",
|
|
ref: inputRef,
|
|
"container-role": "combobox",
|
|
"model-value": unref(displayValue),
|
|
name: _ctx.name,
|
|
size: unref(pickerSize),
|
|
disabled: unref(pickerDisabled),
|
|
placeholder: _ctx.placeholder,
|
|
class: normalizeClass([unref(nsDate).b("editor"), unref(nsDate).bm("editor", _ctx.type), _ctx.$attrs.class]),
|
|
style: normalizeStyle(_ctx.$attrs.style),
|
|
readonly: !_ctx.editable || _ctx.readonly || unref(isDatesPicker) || unref(isMonthsPicker) || unref(isYearsPicker) || _ctx.type === "week",
|
|
"aria-label": _ctx.ariaLabel,
|
|
tabindex: _ctx.tabindex,
|
|
"validate-event": false,
|
|
onInput: onUserInput,
|
|
onFocus: handleFocusInput,
|
|
onBlur: handleBlurInput,
|
|
onKeydown: handleKeydownInput,
|
|
onChange: handleChange,
|
|
onMousedown: onMouseDownInput,
|
|
onMouseenter: onMouseEnter,
|
|
onMouseleave: onMouseLeave,
|
|
onTouchstartPassive: onTouchStartInput,
|
|
onClick: withModifiers(() => {
|
|
}, ["stop"])
|
|
}, {
|
|
prefix: withCtx(() => [
|
|
unref(triggerIcon) ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 0,
|
|
class: normalizeClass(unref(nsInput).e("icon")),
|
|
onMousedown: withModifiers(onMouseDownInput, ["prevent"]),
|
|
onTouchstartPassive: onTouchStartInput
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(unref(triggerIcon))))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class", "onMousedown"])) : createCommentVNode("v-if", true)
|
|
]),
|
|
suffix: withCtx(() => [
|
|
showClose.value && _ctx.clearIcon ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 0,
|
|
class: normalizeClass(`${unref(nsInput).e("icon")} clear-icon`),
|
|
onClick: withModifiers(onClearIconClick, ["stop"])
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.clearIcon)))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class", "onClick"])) : createCommentVNode("v-if", true)
|
|
]),
|
|
_: 1
|
|
}, 8, ["id", "model-value", "name", "size", "disabled", "placeholder", "class", "style", "readonly", "aria-label", "tabindex", "onKeydown", "onClick"])) : (openBlock(), createElementBlock("div", {
|
|
key: 1,
|
|
ref_key: "inputRef",
|
|
ref: inputRef,
|
|
class: normalizeClass(unref(rangeInputKls)),
|
|
style: normalizeStyle(_ctx.$attrs.style),
|
|
onClick: handleFocusInput,
|
|
onMouseenter: onMouseEnter,
|
|
onMouseleave: onMouseLeave,
|
|
onTouchstartPassive: onTouchStartInput,
|
|
onKeydown: handleKeydownInput
|
|
}, [
|
|
unref(triggerIcon) ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 0,
|
|
class: normalizeClass([unref(nsInput).e("icon"), unref(nsRange).e("icon")]),
|
|
onMousedown: withModifiers(onMouseDownInput, ["prevent"]),
|
|
onTouchstartPassive: onTouchStartInput
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(unref(triggerIcon))))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class", "onMousedown"])) : createCommentVNode("v-if", true),
|
|
createElementVNode("input", {
|
|
id: _ctx.id && _ctx.id[0],
|
|
autocomplete: "off",
|
|
name: _ctx.name && _ctx.name[0],
|
|
placeholder: _ctx.startPlaceholder,
|
|
value: unref(displayValue) && unref(displayValue)[0],
|
|
disabled: unref(pickerDisabled),
|
|
readonly: !_ctx.editable || _ctx.readonly,
|
|
class: normalizeClass(unref(nsRange).b("input")),
|
|
onMousedown: onMouseDownInput,
|
|
onInput: handleStartInput,
|
|
onChange: handleStartChange,
|
|
onFocus: handleFocusInput,
|
|
onBlur: handleBlurInput
|
|
}, null, 42, ["id", "name", "placeholder", "value", "disabled", "readonly"]),
|
|
renderSlot(_ctx.$slots, "range-separator", {}, () => [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(nsRange).b("separator"))
|
|
}, toDisplayString(_ctx.rangeSeparator), 3)
|
|
]),
|
|
createElementVNode("input", {
|
|
id: _ctx.id && _ctx.id[1],
|
|
autocomplete: "off",
|
|
name: _ctx.name && _ctx.name[1],
|
|
placeholder: _ctx.endPlaceholder,
|
|
value: unref(displayValue) && unref(displayValue)[1],
|
|
disabled: unref(pickerDisabled),
|
|
readonly: !_ctx.editable || _ctx.readonly,
|
|
class: normalizeClass(unref(nsRange).b("input")),
|
|
onMousedown: onMouseDownInput,
|
|
onFocus: handleFocusInput,
|
|
onBlur: handleBlurInput,
|
|
onInput: handleEndInput,
|
|
onChange: handleEndChange
|
|
}, null, 42, ["id", "name", "placeholder", "value", "disabled", "readonly"]),
|
|
_ctx.clearIcon ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 1,
|
|
class: normalizeClass(unref(clearIconKls)),
|
|
onClick: onClearIconClick
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.clearIcon)))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : createCommentVNode("v-if", true)
|
|
], 38))
|
|
]),
|
|
content: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "default", {
|
|
visible: pickerVisible.value,
|
|
actualVisible: pickerActualVisible.value,
|
|
parsedValue: unref(parsedValue),
|
|
format: _ctx.format,
|
|
dateFormat: _ctx.dateFormat,
|
|
timeFormat: _ctx.timeFormat,
|
|
unlinkPanels: _ctx.unlinkPanels,
|
|
type: _ctx.type,
|
|
defaultValue: _ctx.defaultValue,
|
|
onPick,
|
|
onSelectRange: setSelectionRange,
|
|
onSetPickerOption,
|
|
onCalendarChange,
|
|
onPanelChange,
|
|
onKeydown: onKeydownPopperContent,
|
|
onMousedown: withModifiers(() => {
|
|
}, ["stop"])
|
|
})
|
|
]),
|
|
_: 3
|
|
}, 16, ["visible", "transition", "popper-class", "popper-options", "fallback-placements", "placement"]);
|
|
};
|
|
}
|
|
});
|
|
var CommonPicker = /* @__PURE__ */ _export_sfc(_sfc_main$24, [["__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 = ref(props.parsedValue);
|
|
watch(() => props.visible, (val) => {
|
|
if (!val) {
|
|
oldValue.value = props.parsedValue;
|
|
}
|
|
});
|
|
return oldValue;
|
|
};
|
|
|
|
const nodeList = /* @__PURE__ */ new Map();
|
|
if (isClient) {
|
|
let startClick;
|
|
document.addEventListener("mousedown", (e) => startClick = e);
|
|
document.addEventListener("mouseup", (e) => {
|
|
if (startClick) {
|
|
for (const handlers of nodeList.values()) {
|
|
for (const { documentHandler } of handlers) {
|
|
documentHandler(e, startClick);
|
|
}
|
|
}
|
|
startClick = void 0;
|
|
}
|
|
});
|
|
}
|
|
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$1(value) ? {} : value;
|
|
let intervalId;
|
|
let delayId;
|
|
const handler = () => isFunction$1(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) {
|
|
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 _sfc_main$23 = /* @__PURE__ */ 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 = ref();
|
|
const listHoursRef = ref();
|
|
const listMinutesRef = ref();
|
|
const listSecondsRef = ref();
|
|
const listRefsMap = {
|
|
hours: listHoursRef,
|
|
minutes: listMinutesRef,
|
|
seconds: listSecondsRef
|
|
};
|
|
const spinnerItems = computed(() => {
|
|
return props.showSeconds ? timeUnits$1 : timeUnits$1.slice(0, 2);
|
|
});
|
|
const timePartials = computed(() => {
|
|
const { spinnerDate } = props;
|
|
const hours = spinnerDate.hour();
|
|
const minutes = spinnerDate.minute();
|
|
const seconds = spinnerDate.second();
|
|
return { hours, minutes, seconds };
|
|
});
|
|
const timeList = computed(() => {
|
|
const { hours, minutes } = unref(timePartials);
|
|
return {
|
|
hours: getHoursList(props.role),
|
|
minutes: getMinutesList(hours, props.role),
|
|
seconds: getSecondsList(hours, minutes, props.role)
|
|
};
|
|
});
|
|
const arrowControlTimeList = computed(() => {
|
|
const { hours, minutes, seconds } = 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, 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 = unref(listRefsMap[type]);
|
|
if (scrollbar && scrollbar.$el) {
|
|
getScrollbarElement(scrollbar.$el).scrollTop = Math.max(0, value * typeItemHeight(type));
|
|
}
|
|
};
|
|
const typeItemHeight = (type) => {
|
|
const scrollbar = unref(listRefsMap[type]);
|
|
const listItem = scrollbar == null ? void 0 : scrollbar.$el.querySelector("li");
|
|
if (listItem) {
|
|
return Number.parseFloat(getStyle(listItem, "height")) || 0;
|
|
}
|
|
return 0;
|
|
};
|
|
const onIncrement = () => {
|
|
scrollDown(1);
|
|
};
|
|
const onDecrement = () => {
|
|
scrollDown(-1);
|
|
};
|
|
const scrollDown = (step) => {
|
|
if (!currentScrollbar.value) {
|
|
emitSelectRange("hours");
|
|
}
|
|
const label = currentScrollbar.value;
|
|
const now = unref(timePartials)[label];
|
|
const total = currentScrollbar.value === "hours" ? 24 : 60;
|
|
const next = findNextUnDisabled(label, now, step, total);
|
|
modifyDateField(label, next);
|
|
adjustSpinner(label, next);
|
|
nextTick(() => emitSelectRange(label));
|
|
};
|
|
const findNextUnDisabled = (type, now, step, total) => {
|
|
let next = (now + step + total) % total;
|
|
const list = unref(timeList)[type];
|
|
while (list[next] && next !== now) {
|
|
next = (next + step + total) % total;
|
|
}
|
|
return next;
|
|
};
|
|
const modifyDateField = (type, value) => {
|
|
const list = unref(timeList)[type];
|
|
const isDisabled = list[value];
|
|
if (isDisabled)
|
|
return;
|
|
const { hours, minutes, seconds } = 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(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 unref(listRefsMap[type]).$el.offsetHeight;
|
|
};
|
|
const bindScrollEvent = () => {
|
|
const bindFunction = (type) => {
|
|
const scrollbar = unref(listRefsMap[type]);
|
|
if (scrollbar && scrollbar.$el) {
|
|
getScrollbarElement(scrollbar.$el).onscroll = () => {
|
|
handleScroll(type);
|
|
};
|
|
}
|
|
};
|
|
bindFunction("hours");
|
|
bindFunction("minutes");
|
|
bindFunction("seconds");
|
|
};
|
|
onMounted(() => {
|
|
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]);
|
|
watch(() => props.spinnerDate, () => {
|
|
if (isScrolling)
|
|
return;
|
|
adjustSpinners();
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass([unref(ns).b("spinner"), { "has-seconds": _ctx.showSeconds }])
|
|
}, [
|
|
!_ctx.arrowControl ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(spinnerItems), (item) => {
|
|
return openBlock(), createBlock(unref(ElScrollbar), {
|
|
key: item,
|
|
ref_for: true,
|
|
ref: (scrollbar) => setRef(scrollbar, item),
|
|
class: normalizeClass(unref(ns).be("spinner", "wrapper")),
|
|
"wrap-style": "max-height: inherit;",
|
|
"view-class": unref(ns).be("spinner", "list"),
|
|
noresize: "",
|
|
tag: "ul",
|
|
onMouseenter: ($event) => emitSelectRange(item),
|
|
onMousemove: ($event) => adjustCurrentSpinner(item)
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(timeList)[item], (disabled, key) => {
|
|
return openBlock(), createElementBlock("li", {
|
|
key,
|
|
class: normalizeClass([
|
|
unref(ns).be("spinner", "item"),
|
|
unref(ns).is("active", key === unref(timePartials)[item]),
|
|
unref(ns).is("disabled", disabled)
|
|
]),
|
|
onClick: ($event) => handleClick(item, { value: key, disabled })
|
|
}, [
|
|
item === "hours" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
createTextVNode(toDisplayString(("0" + (_ctx.amPmMode ? key % 12 || 12 : key)).slice(-2)) + toDisplayString(getAmPmFlag(key)), 1)
|
|
], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
createTextVNode(toDisplayString(("0" + key).slice(-2)), 1)
|
|
], 64))
|
|
], 10, ["onClick"]);
|
|
}), 128))
|
|
]),
|
|
_: 2
|
|
}, 1032, ["class", "view-class", "onMouseenter", "onMousemove"]);
|
|
}), 128)) : createCommentVNode("v-if", true),
|
|
_ctx.arrowControl ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(spinnerItems), (item) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
key: item,
|
|
class: normalizeClass([unref(ns).be("spinner", "wrapper"), unref(ns).is("arrow")]),
|
|
onMouseenter: ($event) => emitSelectRange(item)
|
|
}, [
|
|
withDirectives((openBlock(), createBlock(unref(ElIcon), {
|
|
class: normalizeClass(["arrow-up", unref(ns).be("spinner", "arrow")])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(arrow_up_default))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])), [
|
|
[unref(vRepeatClick), onDecrement]
|
|
]),
|
|
withDirectives((openBlock(), createBlock(unref(ElIcon), {
|
|
class: normalizeClass(["arrow-down", unref(ns).be("spinner", "arrow")])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(arrow_down_default))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])), [
|
|
[unref(vRepeatClick), onIncrement]
|
|
]),
|
|
createElementVNode("ul", {
|
|
class: normalizeClass(unref(ns).be("spinner", "list"))
|
|
}, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(arrowControlTimeList)[item], (time, key) => {
|
|
return openBlock(), createElementBlock("li", {
|
|
key,
|
|
class: normalizeClass([
|
|
unref(ns).be("spinner", "item"),
|
|
unref(ns).is("active", time === unref(timePartials)[item]),
|
|
unref(ns).is("disabled", unref(timeList)[item][time])
|
|
])
|
|
}, [
|
|
typeof time === "number" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
item === "hours" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
createTextVNode(toDisplayString(("0" + (_ctx.amPmMode ? time % 12 || 12 : time)).slice(-2)) + toDisplayString(getAmPmFlag(time)), 1)
|
|
], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
createTextVNode(toDisplayString(("0" + time).slice(-2)), 1)
|
|
], 64))
|
|
], 64)) : createCommentVNode("v-if", true)
|
|
], 2);
|
|
}), 128))
|
|
], 2)
|
|
], 42, ["onMouseenter"]);
|
|
}), 128)) : createCommentVNode("v-if", true)
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var TimeSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$23, [["__file", "basic-time-spinner.vue"]]);
|
|
|
|
const _sfc_main$22 = /* @__PURE__ */ defineComponent({
|
|
__name: "panel-time-pick",
|
|
props: panelTimePickerProps,
|
|
emits: ["pick", "select-range", "set-picker-option"],
|
|
setup(__props, { emit }) {
|
|
const props = __props;
|
|
const pickerBase = 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 = ref([0, 2]);
|
|
const oldValue = useOldValue(props);
|
|
const transitionName = computed(() => {
|
|
return isUndefined(props.actualVisible) ? `${ns.namespace.value}-zoom-in-top` : "";
|
|
});
|
|
const showSeconds = computed(() => {
|
|
return props.format.includes("ss");
|
|
});
|
|
const amPmMode = 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 openBlock(), createBlock(Transition, { name: unref(transitionName) }, {
|
|
default: withCtx(() => [
|
|
_ctx.actualVisible || _ctx.visible ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).b("panel"))
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass([unref(ns).be("panel", "content"), { "has-seconds": unref(showSeconds) }])
|
|
}, [
|
|
createVNode(TimeSpinner, {
|
|
ref: "spinner",
|
|
role: _ctx.datetimeRole || "start",
|
|
"arrow-control": unref(arrowControl),
|
|
"show-seconds": unref(showSeconds),
|
|
"am-pm-mode": unref(amPmMode),
|
|
"spinner-date": _ctx.parsedValue,
|
|
"disabled-hours": unref(disabledHours),
|
|
"disabled-minutes": unref(disabledMinutes),
|
|
"disabled-seconds": unref(disabledSeconds),
|
|
onChange: handleChange,
|
|
onSetOption: unref(onSetOption),
|
|
onSelectRange: setSelectionRange
|
|
}, null, 8, ["role", "arrow-control", "show-seconds", "am-pm-mode", "spinner-date", "disabled-hours", "disabled-minutes", "disabled-seconds", "onSetOption"])
|
|
], 2),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).be("panel", "footer"))
|
|
}, [
|
|
createElementVNode("button", {
|
|
type: "button",
|
|
class: normalizeClass([unref(ns).be("panel", "btn"), "cancel"]),
|
|
onClick: handleCancel
|
|
}, toDisplayString(unref(t)("el.datepicker.cancel")), 3),
|
|
createElementVNode("button", {
|
|
type: "button",
|
|
class: normalizeClass([unref(ns).be("panel", "btn"), "confirm"]),
|
|
onClick: ($event) => handleConfirm()
|
|
}, toDisplayString(unref(t)("el.datepicker.confirm")), 11, ["onClick"])
|
|
], 2)
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
]),
|
|
_: 1
|
|
}, 8, ["name"]);
|
|
};
|
|
}
|
|
});
|
|
var TimePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main$22, [["__file", "panel-time-pick.vue"]]);
|
|
|
|
const panelTimeRangeProps = buildProps({
|
|
...timePanelSharedProps,
|
|
parsedValue: {
|
|
type: definePropType(Array)
|
|
}
|
|
});
|
|
|
|
const _sfc_main$21 = /* @__PURE__ */ 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 = inject("EP_PICKER_BASE");
|
|
const {
|
|
arrowControl,
|
|
disabledHours,
|
|
disabledMinutes,
|
|
disabledSeconds,
|
|
defaultValue
|
|
} = pickerBase.props;
|
|
const startContainerKls = computed(() => [
|
|
nsTime.be("range-picker", "body"),
|
|
nsTime.be("panel", "content"),
|
|
nsTime.is("arrow", arrowControl),
|
|
showSeconds.value ? "has-seconds" : ""
|
|
]);
|
|
const endContainerKls = computed(() => [
|
|
nsTime.be("range-picker", "body"),
|
|
nsTime.be("panel", "content"),
|
|
nsTime.is("arrow", arrowControl),
|
|
showSeconds.value ? "has-seconds" : ""
|
|
]);
|
|
const startTime = computed(() => props.parsedValue[0]);
|
|
const endTime = computed(() => props.parsedValue[1]);
|
|
const oldValue = useOldValue(props);
|
|
const handleCancel = () => {
|
|
emit("pick", oldValue.value, false);
|
|
};
|
|
const showSeconds = computed(() => {
|
|
return props.format.includes("ss");
|
|
});
|
|
const amPmMode = 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 = computed(() => {
|
|
return startTime.value > endTime.value;
|
|
});
|
|
const selectionRange = ref([0, 2]);
|
|
const setMinSelectionRange = (start, end) => {
|
|
emit("select-range", start, end, "min");
|
|
selectionRange.value = [start, end];
|
|
};
|
|
const offset = computed(() => showSeconds.value ? 11 : 8);
|
|
const setMaxSelectionRange = (start, end) => {
|
|
emit("select-range", start, end, "max");
|
|
const _offset = 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$1(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$1(days)) {
|
|
return days.map((d) => d.format(props.format));
|
|
}
|
|
return days.format(props.format);
|
|
};
|
|
const getDefaultValue = () => {
|
|
if (isArray$1(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 ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass([unref(nsTime).b("range-picker"), unref(nsPicker).b("panel")])
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(nsTime).be("range-picker", "content"))
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(nsTime).be("range-picker", "cell"))
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(nsTime).be("range-picker", "header"))
|
|
}, toDisplayString(unref(t)("el.datepicker.startTime")), 3),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(startContainerKls))
|
|
}, [
|
|
createVNode(TimeSpinner, {
|
|
ref: "minSpinner",
|
|
role: "start",
|
|
"show-seconds": unref(showSeconds),
|
|
"am-pm-mode": unref(amPmMode),
|
|
"arrow-control": unref(arrowControl),
|
|
"spinner-date": unref(startTime),
|
|
"disabled-hours": disabledHours_,
|
|
"disabled-minutes": disabledMinutes_,
|
|
"disabled-seconds": disabledSeconds_,
|
|
onChange: handleMinChange,
|
|
onSetOption: unref(onSetOption),
|
|
onSelectRange: setMinSelectionRange
|
|
}, null, 8, ["show-seconds", "am-pm-mode", "arrow-control", "spinner-date", "onSetOption"])
|
|
], 2)
|
|
], 2),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(nsTime).be("range-picker", "cell"))
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(nsTime).be("range-picker", "header"))
|
|
}, toDisplayString(unref(t)("el.datepicker.endTime")), 3),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(endContainerKls))
|
|
}, [
|
|
createVNode(TimeSpinner, {
|
|
ref: "maxSpinner",
|
|
role: "end",
|
|
"show-seconds": unref(showSeconds),
|
|
"am-pm-mode": unref(amPmMode),
|
|
"arrow-control": unref(arrowControl),
|
|
"spinner-date": unref(endTime),
|
|
"disabled-hours": disabledHours_,
|
|
"disabled-minutes": disabledMinutes_,
|
|
"disabled-seconds": disabledSeconds_,
|
|
onChange: handleMaxChange,
|
|
onSetOption: unref(onSetOption),
|
|
onSelectRange: setMaxSelectionRange
|
|
}, null, 8, ["show-seconds", "am-pm-mode", "arrow-control", "spinner-date", "onSetOption"])
|
|
], 2)
|
|
], 2)
|
|
], 2),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(nsTime).be("panel", "footer"))
|
|
}, [
|
|
createElementVNode("button", {
|
|
type: "button",
|
|
class: normalizeClass([unref(nsTime).be("panel", "btn"), "cancel"]),
|
|
onClick: ($event) => handleCancel()
|
|
}, toDisplayString(unref(t)("el.datepicker.cancel")), 11, ["onClick"]),
|
|
createElementVNode("button", {
|
|
type: "button",
|
|
class: normalizeClass([unref(nsTime).be("panel", "btn"), "confirm"]),
|
|
disabled: unref(btnConfirmDisabled),
|
|
onClick: ($event) => handleConfirm()
|
|
}, toDisplayString(unref(t)("el.datepicker.confirm")), 11, ["disabled", "onClick"])
|
|
], 2)
|
|
], 2)) : createCommentVNode("v-if", true);
|
|
};
|
|
}
|
|
});
|
|
var TimeRangePanel = /* @__PURE__ */ _export_sfc(_sfc_main$21, [["__file", "panel-time-range.vue"]]);
|
|
|
|
dayjs.extend(customParseFormat);
|
|
var TimePicker = defineComponent({
|
|
name: "ElTimePicker",
|
|
install: null,
|
|
props: {
|
|
...timePickerDefaultProps,
|
|
isRange: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
emits: ["update:modelValue"],
|
|
setup(props, ctx) {
|
|
const commonPicker = ref();
|
|
const [type, Panel] = props.isRange ? ["timerange", TimeRangePanel] : ["time", TimePickPanel];
|
|
const modelUpdater = (value) => ctx.emit("update:modelValue", value);
|
|
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 createVNode(CommonPicker, mergeProps(props, {
|
|
"ref": commonPicker,
|
|
"type": type,
|
|
"format": format,
|
|
"onUpdate:modelValue": modelUpdater
|
|
}), {
|
|
default: (props2) => createVNode(Panel, props2, null)
|
|
});
|
|
};
|
|
}
|
|
});
|
|
|
|
const ElTimePicker = withInstall(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 = computed(() => !!props.range && !!props.range.length);
|
|
const rows = 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 = 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 __default__$1r = defineComponent({
|
|
name: "DateTable"
|
|
});
|
|
const _sfc_main$20 = /* @__PURE__ */ defineComponent({
|
|
...__default__$1r,
|
|
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 openBlock(), createElementBlock("table", {
|
|
class: normalizeClass([unref(nsTable).b(), unref(nsTable).is("range", unref(isInRange))]),
|
|
cellspacing: "0",
|
|
cellpadding: "0"
|
|
}, [
|
|
!_ctx.hideHeader ? (openBlock(), createElementBlock("thead", { key: 0 }, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(weekDays), (day) => {
|
|
return openBlock(), createElementBlock("th", { key: day }, toDisplayString(day), 1);
|
|
}), 128))
|
|
])) : createCommentVNode("v-if", true),
|
|
createElementVNode("tbody", null, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(rows), (row, index) => {
|
|
return openBlock(), createElementBlock("tr", {
|
|
key: index,
|
|
class: normalizeClass({
|
|
[unref(nsTable).e("row")]: true,
|
|
[unref(nsTable).em("row", "hide-border")]: index === 0 && _ctx.hideHeader
|
|
})
|
|
}, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(row, (cell, key) => {
|
|
return openBlock(), createElementBlock("td", {
|
|
key,
|
|
class: normalizeClass(getCellClass(cell)),
|
|
onClick: ($event) => unref(handlePickDay)(cell)
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(nsDay).b())
|
|
}, [
|
|
renderSlot(_ctx.$slots, "date-cell", {
|
|
data: unref(getSlotData)(cell)
|
|
}, () => [
|
|
createElementVNode("span", null, toDisplayString(cell.text), 1)
|
|
])
|
|
], 2)
|
|
], 10, ["onClick"]);
|
|
}), 128))
|
|
], 2);
|
|
}), 128))
|
|
])
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var DateTable$1 = /* @__PURE__ */ _export_sfc(_sfc_main$20, [["__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 { lang } = useLocale();
|
|
const selectedDay = ref();
|
|
const now = dayjs().locale(lang.value);
|
|
const realSelectedDay = 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 = computed(() => {
|
|
if (!props.range || !isArray$1(props.range) || props.range.length !== 2 || props.range.some((item) => !isDate$1(item)))
|
|
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 = 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 = computed(() => date.value.subtract(1, "month").date(1));
|
|
const nextMonthDayjs = computed(() => date.value.add(1, "month").date(1));
|
|
const prevYearDayjs = computed(() => date.value.subtract(1, "year").date(1));
|
|
const nextYearDayjs = 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);
|
|
}
|
|
};
|
|
return {
|
|
calculateValidatedDateRange,
|
|
date,
|
|
realSelectedDay,
|
|
pickDay,
|
|
selectDate,
|
|
validatedRange
|
|
};
|
|
};
|
|
|
|
const isValidRange$1 = (range) => isArray$1(range) && range.length === 2 && range.every((item) => isDate$1(item));
|
|
const calendarProps = buildProps({
|
|
modelValue: {
|
|
type: Date
|
|
},
|
|
range: {
|
|
type: definePropType(Array),
|
|
validator: isValidRange$1
|
|
}
|
|
});
|
|
const calendarEmits = {
|
|
[UPDATE_MODEL_EVENT]: (value) => isDate$1(value),
|
|
[INPUT_EVENT]: (value) => isDate$1(value)
|
|
};
|
|
|
|
const COMPONENT_NAME$g = "ElCalendar";
|
|
const __default__$1q = defineComponent({
|
|
name: COMPONENT_NAME$g
|
|
});
|
|
const _sfc_main$1$ = /* @__PURE__ */ defineComponent({
|
|
...__default__$1q,
|
|
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 = 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 openBlock(), createElementBlock("div", {
|
|
class: normalizeClass(unref(ns).b())
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("header"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "header", { date: unref(i18nDate) }, () => [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("title"))
|
|
}, toDisplayString(unref(i18nDate)), 3),
|
|
unref(validatedRange).length === 0 ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).e("button-group"))
|
|
}, [
|
|
createVNode(unref(ElButtonGroup$1), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(ElButton), {
|
|
size: "small",
|
|
onClick: ($event) => unref(selectDate)("prev-month")
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(t)("el.datepicker.prevMonth")), 1)
|
|
]),
|
|
_: 1
|
|
}, 8, ["onClick"]),
|
|
createVNode(unref(ElButton), {
|
|
size: "small",
|
|
onClick: ($event) => unref(selectDate)("today")
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(t)("el.datepicker.today")), 1)
|
|
]),
|
|
_: 1
|
|
}, 8, ["onClick"]),
|
|
createVNode(unref(ElButton), {
|
|
size: "small",
|
|
onClick: ($event) => unref(selectDate)("next-month")
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(t)("el.datepicker.nextMonth")), 1)
|
|
]),
|
|
_: 1
|
|
}, 8, ["onClick"])
|
|
]),
|
|
_: 1
|
|
})
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
])
|
|
], 2),
|
|
unref(validatedRange).length === 0 ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).e("body"))
|
|
}, [
|
|
createVNode(DateTable$1, {
|
|
date: unref(date),
|
|
"selected-day": unref(realSelectedDay),
|
|
onPick: unref(pickDay)
|
|
}, createSlots({ _: 2 }, [
|
|
_ctx.$slots["date-cell"] ? {
|
|
name: "date-cell",
|
|
fn: withCtx((data) => [
|
|
renderSlot(_ctx.$slots, "date-cell", normalizeProps(guardReactiveProps(data)))
|
|
])
|
|
} : void 0
|
|
]), 1032, ["date", "selected-day", "onPick"])
|
|
], 2)) : (openBlock(), createElementBlock("div", {
|
|
key: 1,
|
|
class: normalizeClass(unref(ns).e("body"))
|
|
}, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(validatedRange), (range_, index) => {
|
|
return openBlock(), createBlock(DateTable$1, {
|
|
key: index,
|
|
date: range_[0],
|
|
"selected-day": unref(realSelectedDay),
|
|
range: range_,
|
|
"hide-header": index !== 0,
|
|
onPick: unref(pickDay)
|
|
}, createSlots({ _: 2 }, [
|
|
_ctx.$slots["date-cell"] ? {
|
|
name: "date-cell",
|
|
fn: withCtx((data) => [
|
|
renderSlot(_ctx.$slots, "date-cell", normalizeProps(guardReactiveProps(data)))
|
|
])
|
|
} : void 0
|
|
]), 1032, ["date", "selected-day", "range", "hide-header", "onPick"]);
|
|
}), 128))
|
|
], 2))
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var Calendar = /* @__PURE__ */ _export_sfc(_sfc_main$1$, [["__file", "calendar.vue"]]);
|
|
|
|
const ElCalendar = withInstall(Calendar);
|
|
|
|
const cardProps = buildProps({
|
|
header: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
footer: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
bodyStyle: {
|
|
type: definePropType([String, Object, Array]),
|
|
default: ""
|
|
},
|
|
bodyClass: String,
|
|
shadow: {
|
|
type: String,
|
|
values: ["always", "hover", "never"],
|
|
default: "always"
|
|
}
|
|
});
|
|
|
|
const __default__$1p = defineComponent({
|
|
name: "ElCard"
|
|
});
|
|
const _sfc_main$1_ = /* @__PURE__ */ defineComponent({
|
|
...__default__$1p,
|
|
props: cardProps,
|
|
setup(__props) {
|
|
const ns = useNamespace("card");
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass([unref(ns).b(), unref(ns).is(`${_ctx.shadow}-shadow`)])
|
|
}, [
|
|
_ctx.$slots.header || _ctx.header ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).e("header"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "header", {}, () => [
|
|
createTextVNode(toDisplayString(_ctx.header), 1)
|
|
])
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", {
|
|
class: normalizeClass([unref(ns).e("body"), _ctx.bodyClass]),
|
|
style: normalizeStyle(_ctx.bodyStyle)
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 6),
|
|
_ctx.$slots.footer || _ctx.footer ? (openBlock(), createElementBlock("div", {
|
|
key: 1,
|
|
class: normalizeClass(unref(ns).e("footer"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "footer", {}, () => [
|
|
createTextVNode(toDisplayString(_ctx.footer), 1)
|
|
])
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var Card = /* @__PURE__ */ _export_sfc(_sfc_main$1_, [["__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: ""
|
|
},
|
|
arrow: {
|
|
type: String,
|
|
values: ["always", "hover", "never"],
|
|
default: "hover"
|
|
},
|
|
type: {
|
|
type: String,
|
|
values: ["", "card"],
|
|
default: ""
|
|
},
|
|
cardScale: {
|
|
type: Number,
|
|
default: 0.83
|
|
},
|
|
loop: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
direction: {
|
|
type: String,
|
|
values: ["horizontal", "vertical"],
|
|
default: "horizontal"
|
|
},
|
|
pauseOnHover: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
motionBlur: Boolean
|
|
});
|
|
const carouselEmits = {
|
|
change: (current, prev) => [current, prev].every(isNumber)
|
|
};
|
|
|
|
const carouselContextKey = Symbol("carouselContextKey");
|
|
const CAROUSEL_ITEM_NAME = "ElCarouselItem";
|
|
|
|
const THROTTLE_TIME = 300;
|
|
const useCarousel = (props, emit, componentName) => {
|
|
const {
|
|
children: items,
|
|
addChild: addItem,
|
|
removeChild: removeItem
|
|
} = useOrderedChildren(getCurrentInstance(), CAROUSEL_ITEM_NAME);
|
|
const slots = useSlots();
|
|
const activeIndex = ref(-1);
|
|
const timer = ref(null);
|
|
const hover = ref(false);
|
|
const root = ref();
|
|
const containerHeight = ref(0);
|
|
const isItemsTwoLength = ref(true);
|
|
const isFirstCall = ref(true);
|
|
const isTransitioning = ref(false);
|
|
const arrowDisplay = computed(() => props.arrow !== "never" && !unref(isVertical));
|
|
const hasLabel = computed(() => {
|
|
return items.value.some((item) => item.props.label.toString().length > 0);
|
|
});
|
|
const isCardType = computed(() => props.type === "card");
|
|
const isVertical = computed(() => props.direction === "vertical");
|
|
const containerStyle = computed(() => {
|
|
if (props.height !== "auto") {
|
|
return {
|
|
height: props.height
|
|
};
|
|
}
|
|
return {
|
|
height: `${containerHeight.value}px`,
|
|
overflow: "hidden"
|
|
};
|
|
});
|
|
const throttledArrowClick = throttle((index) => {
|
|
setActiveItem(index);
|
|
}, THROTTLE_TIME, { trailing: true });
|
|
const throttledIndicatorHover = throttle((index) => {
|
|
handleIndicatorHover(index);
|
|
}, THROTTLE_TIME);
|
|
const isTwoLengthShow = (index) => {
|
|
if (!isItemsTwoLength.value)
|
|
return true;
|
|
return activeIndex.value <= 1 ? index <= 1 : index > 1;
|
|
};
|
|
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 (!isFirstCall.value) {
|
|
isTransitioning.value = true;
|
|
}
|
|
isFirstCall.value = false;
|
|
if (activeIndex.value < items.value.length - 1) {
|
|
activeIndex.value = activeIndex.value + 1;
|
|
} else if (props.loop) {
|
|
activeIndex.value = 0;
|
|
} else {
|
|
isTransitioning.value = false;
|
|
}
|
|
};
|
|
function setActiveItem(index) {
|
|
if (!isFirstCall.value) {
|
|
isTransitioning.value = true;
|
|
}
|
|
isFirstCall.value = false;
|
|
if (isString$1(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 = 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 handleTransitionEnd() {
|
|
isTransitioning.value = false;
|
|
}
|
|
function handleButtonEnter(arrow) {
|
|
if (unref(isVertical))
|
|
return;
|
|
items.value.forEach((item, index) => {
|
|
if (arrow === itemInStage(item, index)) {
|
|
item.states.hover = true;
|
|
}
|
|
});
|
|
}
|
|
function handleButtonLeave() {
|
|
if (unref(isVertical))
|
|
return;
|
|
items.value.forEach((item) => {
|
|
item.states.hover = false;
|
|
});
|
|
}
|
|
function handleIndicatorClick(index) {
|
|
if (index !== activeIndex.value) {
|
|
if (!isFirstCall.value) {
|
|
isTransitioning.value = true;
|
|
}
|
|
}
|
|
activeIndex.value = index;
|
|
}
|
|
function handleIndicatorHover(index) {
|
|
if (props.trigger === "hover" && index !== activeIndex.value) {
|
|
activeIndex.value = index;
|
|
if (!isFirstCall.value) {
|
|
isTransitioning.value = true;
|
|
}
|
|
}
|
|
}
|
|
function prev() {
|
|
setActiveItem(activeIndex.value - 1);
|
|
}
|
|
function next() {
|
|
setActiveItem(activeIndex.value + 1);
|
|
}
|
|
function resetTimer() {
|
|
pauseTimer();
|
|
if (!props.pauseOnHover)
|
|
startTimer();
|
|
}
|
|
function setContainerHeight(height) {
|
|
if (props.height !== "auto")
|
|
return;
|
|
containerHeight.value = height;
|
|
}
|
|
function PlaceholderItem() {
|
|
var _a;
|
|
const defaultSlots = (_a = slots.default) == null ? void 0 : _a.call(slots);
|
|
if (!defaultSlots)
|
|
return null;
|
|
const flatSlots = flattedChildren(defaultSlots);
|
|
const normalizeSlots = flatSlots.filter((slot) => {
|
|
return isVNode(slot) && slot.type.name === CAROUSEL_ITEM_NAME;
|
|
});
|
|
if ((normalizeSlots == null ? void 0 : normalizeSlots.length) === 2 && props.loop && !isCardType.value) {
|
|
isItemsTwoLength.value = true;
|
|
return normalizeSlots;
|
|
}
|
|
isItemsTwoLength.value = false;
|
|
return null;
|
|
}
|
|
watch(() => activeIndex.value, (current, prev2) => {
|
|
resetItemPosition(prev2);
|
|
if (isItemsTwoLength.value) {
|
|
current = current % 2;
|
|
prev2 = prev2 % 2;
|
|
}
|
|
if (prev2 > -1) {
|
|
emit("change", current, prev2);
|
|
}
|
|
});
|
|
watch(() => props.autoplay, (autoplay) => {
|
|
autoplay ? startTimer() : pauseTimer();
|
|
});
|
|
watch(() => props.loop, () => {
|
|
setActiveItem(activeIndex.value);
|
|
});
|
|
watch(() => props.interval, () => {
|
|
resetTimer();
|
|
});
|
|
const resizeObserver = shallowRef();
|
|
onMounted(() => {
|
|
watch(() => items.value, () => {
|
|
if (items.value.length > 0)
|
|
setActiveItem(props.initialIndex);
|
|
}, {
|
|
immediate: true
|
|
});
|
|
resizeObserver.value = useResizeObserver(root.value, () => {
|
|
resetItemPosition();
|
|
});
|
|
startTimer();
|
|
});
|
|
onBeforeUnmount(() => {
|
|
pauseTimer();
|
|
if (root.value && resizeObserver.value)
|
|
resizeObserver.value.stop();
|
|
});
|
|
provide(carouselContextKey, {
|
|
root,
|
|
isCardType,
|
|
isVertical,
|
|
items,
|
|
loop: props.loop,
|
|
cardScale: props.cardScale,
|
|
addItem,
|
|
removeItem,
|
|
setActiveItem,
|
|
setContainerHeight
|
|
});
|
|
return {
|
|
root,
|
|
activeIndex,
|
|
arrowDisplay,
|
|
hasLabel,
|
|
hover,
|
|
isCardType,
|
|
isTransitioning,
|
|
items,
|
|
isVertical,
|
|
containerStyle,
|
|
isItemsTwoLength,
|
|
handleButtonEnter,
|
|
handleTransitionEnd,
|
|
handleButtonLeave,
|
|
handleIndicatorClick,
|
|
handleMouseEnter,
|
|
handleMouseLeave,
|
|
setActiveItem,
|
|
prev,
|
|
next,
|
|
PlaceholderItem,
|
|
isTwoLengthShow,
|
|
throttledArrowClick,
|
|
throttledIndicatorHover
|
|
};
|
|
};
|
|
|
|
const COMPONENT_NAME$f = "ElCarousel";
|
|
const __default__$1o = defineComponent({
|
|
name: COMPONENT_NAME$f
|
|
});
|
|
const _sfc_main$1Z = /* @__PURE__ */ defineComponent({
|
|
...__default__$1o,
|
|
props: carouselProps,
|
|
emits: carouselEmits,
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const {
|
|
root,
|
|
activeIndex,
|
|
arrowDisplay,
|
|
hasLabel,
|
|
hover,
|
|
isCardType,
|
|
items,
|
|
isVertical,
|
|
containerStyle,
|
|
handleButtonEnter,
|
|
handleButtonLeave,
|
|
isTransitioning,
|
|
handleIndicatorClick,
|
|
handleMouseEnter,
|
|
handleMouseLeave,
|
|
handleTransitionEnd,
|
|
setActiveItem,
|
|
prev,
|
|
next,
|
|
PlaceholderItem,
|
|
isTwoLengthShow,
|
|
throttledArrowClick,
|
|
throttledIndicatorHover
|
|
} = useCarousel(props, emit);
|
|
const ns = useNamespace("carousel");
|
|
const { t } = useLocale();
|
|
const carouselClasses = computed(() => {
|
|
const classes = [ns.b(), ns.m(props.direction)];
|
|
if (unref(isCardType)) {
|
|
classes.push(ns.m("card"));
|
|
}
|
|
return classes;
|
|
});
|
|
const carouselContainer = computed(() => {
|
|
const classes = [ns.e("container")];
|
|
if (props.motionBlur && unref(isTransitioning) && items.value.length > 1) {
|
|
classes.push(unref(isVertical) ? `${ns.namespace.value}-transitioning-vertical` : `${ns.namespace.value}-transitioning`);
|
|
}
|
|
return classes;
|
|
});
|
|
const indicatorsClasses = computed(() => {
|
|
const classes = [ns.e("indicators"), ns.em("indicators", props.direction)];
|
|
if (unref(hasLabel)) {
|
|
classes.push(ns.em("indicators", "labels"));
|
|
}
|
|
if (props.indicatorPosition === "outside") {
|
|
classes.push(ns.em("indicators", "outside"));
|
|
}
|
|
if (unref(isVertical)) {
|
|
classes.push(ns.em("indicators", "right"));
|
|
}
|
|
return classes;
|
|
});
|
|
expose({
|
|
activeIndex,
|
|
setActiveItem,
|
|
prev,
|
|
next
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
ref_key: "root",
|
|
ref: root,
|
|
class: normalizeClass(unref(carouselClasses)),
|
|
onMouseenter: withModifiers(unref(handleMouseEnter), ["stop"]),
|
|
onMouseleave: withModifiers(unref(handleMouseLeave), ["stop"])
|
|
}, [
|
|
unref(arrowDisplay) ? (openBlock(), createBlock(Transition, {
|
|
key: 0,
|
|
name: "carousel-arrow-left",
|
|
persisted: ""
|
|
}, {
|
|
default: withCtx(() => [
|
|
withDirectives(createElementVNode("button", {
|
|
type: "button",
|
|
class: normalizeClass([unref(ns).e("arrow"), unref(ns).em("arrow", "left")]),
|
|
"aria-label": unref(t)("el.carousel.leftArrow"),
|
|
onMouseenter: ($event) => unref(handleButtonEnter)("left"),
|
|
onMouseleave: unref(handleButtonLeave),
|
|
onClick: withModifiers(($event) => unref(throttledArrowClick)(unref(activeIndex) - 1), ["stop"])
|
|
}, [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(arrow_left_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
], 42, ["aria-label", "onMouseenter", "onMouseleave", "onClick"]), [
|
|
[
|
|
vShow,
|
|
(_ctx.arrow === "always" || unref(hover)) && (props.loop || unref(activeIndex) > 0)
|
|
]
|
|
])
|
|
]),
|
|
_: 1
|
|
})) : createCommentVNode("v-if", true),
|
|
unref(arrowDisplay) ? (openBlock(), createBlock(Transition, {
|
|
key: 1,
|
|
name: "carousel-arrow-right",
|
|
persisted: ""
|
|
}, {
|
|
default: withCtx(() => [
|
|
withDirectives(createElementVNode("button", {
|
|
type: "button",
|
|
class: normalizeClass([unref(ns).e("arrow"), unref(ns).em("arrow", "right")]),
|
|
"aria-label": unref(t)("el.carousel.rightArrow"),
|
|
onMouseenter: ($event) => unref(handleButtonEnter)("right"),
|
|
onMouseleave: unref(handleButtonLeave),
|
|
onClick: withModifiers(($event) => unref(throttledArrowClick)(unref(activeIndex) + 1), ["stop"])
|
|
}, [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(arrow_right_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
], 42, ["aria-label", "onMouseenter", "onMouseleave", "onClick"]), [
|
|
[
|
|
vShow,
|
|
(_ctx.arrow === "always" || unref(hover)) && (props.loop || unref(activeIndex) < unref(items).length - 1)
|
|
]
|
|
])
|
|
]),
|
|
_: 1
|
|
})) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(carouselContainer)),
|
|
style: normalizeStyle(unref(containerStyle)),
|
|
onTransitionend: unref(handleTransitionEnd)
|
|
}, [
|
|
createVNode(unref(PlaceholderItem)),
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 46, ["onTransitionend"]),
|
|
_ctx.indicatorPosition !== "none" ? (openBlock(), createElementBlock("ul", {
|
|
key: 2,
|
|
class: normalizeClass(unref(indicatorsClasses))
|
|
}, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(items), (item, index) => {
|
|
return withDirectives((openBlock(), createElementBlock("li", {
|
|
key: index,
|
|
class: normalizeClass([
|
|
unref(ns).e("indicator"),
|
|
unref(ns).em("indicator", _ctx.direction),
|
|
unref(ns).is("active", index === unref(activeIndex))
|
|
]),
|
|
onMouseenter: ($event) => unref(throttledIndicatorHover)(index),
|
|
onClick: withModifiers(($event) => unref(handleIndicatorClick)(index), ["stop"])
|
|
}, [
|
|
createElementVNode("button", {
|
|
class: normalizeClass(unref(ns).e("button")),
|
|
"aria-label": unref(t)("el.carousel.indicator", { index: index + 1 })
|
|
}, [
|
|
unref(hasLabel) ? (openBlock(), createElementBlock("span", { key: 0 }, toDisplayString(item.props.label), 1)) : createCommentVNode("v-if", true)
|
|
], 10, ["aria-label"])
|
|
], 42, ["onMouseenter", "onClick"])), [
|
|
[vShow, unref(isTwoLengthShow)(index)]
|
|
]);
|
|
}), 128))
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
props.motionBlur ? (openBlock(), createElementBlock("svg", {
|
|
key: 3,
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
version: "1.1",
|
|
style: { "display": "none" }
|
|
}, [
|
|
createElementVNode("defs", null, [
|
|
createElementVNode("filter", { id: "elCarouselHorizontal" }, [
|
|
createElementVNode("feGaussianBlur", {
|
|
in: "SourceGraphic",
|
|
stdDeviation: "12,0"
|
|
})
|
|
]),
|
|
createElementVNode("filter", { id: "elCarouselVertical" }, [
|
|
createElementVNode("feGaussianBlur", {
|
|
in: "SourceGraphic",
|
|
stdDeviation: "0,10"
|
|
})
|
|
])
|
|
])
|
|
])) : createCommentVNode("v-if", true)
|
|
], 42, ["onMouseenter", "onMouseleave"]);
|
|
};
|
|
}
|
|
});
|
|
var Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$1Z, [["__file", "carousel.vue"]]);
|
|
|
|
const carouselItemProps = buildProps({
|
|
name: { type: String, default: "" },
|
|
label: {
|
|
type: [String, Number],
|
|
default: ""
|
|
}
|
|
});
|
|
|
|
const useCarouselItem = (props) => {
|
|
const carouselContext = inject(carouselContextKey);
|
|
const instance = getCurrentInstance();
|
|
const carouselItemRef = ref();
|
|
const hover = ref(false);
|
|
const translate = ref(0);
|
|
const scale = ref(1);
|
|
const active = ref(false);
|
|
const ready = ref(false);
|
|
const inStage = ref(false);
|
|
const animating = ref(false);
|
|
const { isCardType, isVertical, cardScale } = 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, _b;
|
|
const parentWidth = unref(isVertical) ? ((_a = carouselContext.root.value) == null ? void 0 : _a.offsetHeight) || 0 : ((_b = carouselContext.root.value) == null ? void 0 : _b.offsetWidth) || 0;
|
|
if (inStage.value) {
|
|
return parentWidth * ((2 - cardScale) * (index - activeIndex) + 1) / 4;
|
|
} else if (index < activeIndex) {
|
|
return -(1 + cardScale) * parentWidth / 4;
|
|
} else {
|
|
return (3 + cardScale) * 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 = 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 = unref(isVertical);
|
|
active.value = isActive;
|
|
if (_isCardType) {
|
|
inStage.value = Math.round(Math.abs(index - activeIndex)) <= 1;
|
|
translate.value = calcCardTranslate(index, activeIndex);
|
|
scale.value = unref(active) ? 1 : cardScale;
|
|
} else {
|
|
translate.value = calcTranslate(index, activeIndex, _isVertical);
|
|
}
|
|
ready.value = true;
|
|
if (isActive && carouselItemRef.value) {
|
|
carouselContext.setContainerHeight(carouselItemRef.value.offsetHeight);
|
|
}
|
|
};
|
|
function handleItemClick() {
|
|
if (carouselContext && unref(isCardType)) {
|
|
const index = carouselContext.items.value.findIndex(({ uid }) => uid === instance.uid);
|
|
carouselContext.setActiveItem(index);
|
|
}
|
|
}
|
|
onMounted(() => {
|
|
carouselContext.addItem({
|
|
props,
|
|
states: reactive({
|
|
hover,
|
|
translate,
|
|
scale,
|
|
active,
|
|
ready,
|
|
inStage,
|
|
animating
|
|
}),
|
|
uid: instance.uid,
|
|
translateItem
|
|
});
|
|
});
|
|
onUnmounted(() => {
|
|
carouselContext.removeItem(instance.uid);
|
|
});
|
|
return {
|
|
carouselItemRef,
|
|
active,
|
|
animating,
|
|
hover,
|
|
inStage,
|
|
isVertical,
|
|
translate,
|
|
isCardType,
|
|
scale,
|
|
ready,
|
|
handleItemClick
|
|
};
|
|
};
|
|
|
|
const __default__$1n = defineComponent({
|
|
name: CAROUSEL_ITEM_NAME
|
|
});
|
|
const _sfc_main$1Y = /* @__PURE__ */ defineComponent({
|
|
...__default__$1n,
|
|
props: carouselItemProps,
|
|
setup(__props) {
|
|
const props = __props;
|
|
const ns = useNamespace("carousel");
|
|
const {
|
|
carouselItemRef,
|
|
active,
|
|
animating,
|
|
hover,
|
|
inStage,
|
|
isVertical,
|
|
translate,
|
|
isCardType,
|
|
scale,
|
|
ready,
|
|
handleItemClick
|
|
} = useCarouselItem(props);
|
|
const itemKls = computed(() => [
|
|
ns.e("item"),
|
|
ns.is("active", active.value),
|
|
ns.is("in-stage", inStage.value),
|
|
ns.is("hover", hover.value),
|
|
ns.is("animating", animating.value),
|
|
{
|
|
[ns.em("item", "card")]: isCardType.value,
|
|
[ns.em("item", "card-vertical")]: isCardType.value && isVertical.value
|
|
}
|
|
]);
|
|
const itemStyle = computed(() => {
|
|
const translateType = `translate${unref(isVertical) ? "Y" : "X"}`;
|
|
const _translate = `${translateType}(${unref(translate)}px)`;
|
|
const _scale = `scale(${unref(scale)})`;
|
|
const transform = [_translate, _scale].join(" ");
|
|
return {
|
|
transform
|
|
};
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return withDirectives((openBlock(), createElementBlock("div", {
|
|
ref_key: "carouselItemRef",
|
|
ref: carouselItemRef,
|
|
class: normalizeClass(unref(itemKls)),
|
|
style: normalizeStyle(unref(itemStyle)),
|
|
onClick: unref(handleItemClick)
|
|
}, [
|
|
unref(isCardType) ? withDirectives((openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).e("mask"))
|
|
}, null, 2)), [
|
|
[vShow, !unref(active)]
|
|
]) : createCommentVNode("v-if", true),
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 14, ["onClick"])), [
|
|
[vShow, unref(ready)]
|
|
]);
|
|
};
|
|
}
|
|
});
|
|
var CarouselItem = /* @__PURE__ */ _export_sfc(_sfc_main$1Y, [["__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],
|
|
default: void 0
|
|
},
|
|
value: {
|
|
type: [String, Boolean, Number, Object],
|
|
default: void 0
|
|
},
|
|
indeterminate: Boolean,
|
|
disabled: Boolean,
|
|
checked: Boolean,
|
|
name: {
|
|
type: String,
|
|
default: void 0
|
|
},
|
|
trueValue: {
|
|
type: [String, Number],
|
|
default: void 0
|
|
},
|
|
falseValue: {
|
|
type: [String, Number],
|
|
default: void 0
|
|
},
|
|
trueLabel: {
|
|
type: [String, Number],
|
|
default: void 0
|
|
},
|
|
falseLabel: {
|
|
type: [String, Number],
|
|
default: void 0
|
|
},
|
|
id: {
|
|
type: String,
|
|
default: void 0
|
|
},
|
|
border: Boolean,
|
|
size: useSizeProp,
|
|
tabindex: [String, Number],
|
|
validateEvent: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
...useAriaProps(["ariaControls"])
|
|
};
|
|
const checkboxEmits = {
|
|
[UPDATE_MODEL_EVENT]: (val) => isString$1(val) || isNumber(val) || isBoolean(val),
|
|
change: (val) => isString$1(val) || isNumber(val) || isBoolean(val)
|
|
};
|
|
|
|
const checkboxGroupContextKey = Symbol("checkboxGroupContextKey");
|
|
|
|
const useCheckboxDisabled = ({
|
|
model,
|
|
isChecked
|
|
}) => {
|
|
const checkboxGroup = inject(checkboxGroupContextKey, void 0);
|
|
const isLimitDisabled = 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 = useFormDisabled(computed(() => (checkboxGroup == null ? void 0 : checkboxGroup.disabled.value) || isLimitDisabled.value));
|
|
return {
|
|
isDisabled,
|
|
isLimitDisabled
|
|
};
|
|
};
|
|
|
|
const useCheckboxEvent = (props, {
|
|
model,
|
|
isLimitExceeded,
|
|
hasOwnLabel,
|
|
isDisabled,
|
|
isLabeledByFormItem
|
|
}) => {
|
|
const checkboxGroup = inject(checkboxGroupContextKey, void 0);
|
|
const { formItem } = useFormItem();
|
|
const { emit } = getCurrentInstance();
|
|
function getLabeledValue(value) {
|
|
var _a, _b, _c, _d;
|
|
return [true, props.trueValue, props.trueLabel].includes(value) ? (_b = (_a = props.trueValue) != null ? _a : props.trueLabel) != null ? _b : true : (_d = (_c = props.falseValue) != null ? _c : props.falseLabel) != null ? _d : 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.falseValue, props.falseLabel].includes(model.value));
|
|
await nextTick();
|
|
emitChangeEvent(model.value, e);
|
|
}
|
|
}
|
|
}
|
|
const validateEvent = computed(() => (checkboxGroup == null ? void 0 : checkboxGroup.validateEvent) || props.validateEvent);
|
|
watch(() => props.modelValue, () => {
|
|
if (validateEvent.value) {
|
|
formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn());
|
|
}
|
|
});
|
|
return {
|
|
handleChange,
|
|
onClickRoot
|
|
};
|
|
};
|
|
|
|
const useCheckboxModel = (props) => {
|
|
const selfModel = ref(false);
|
|
const { emit } = getCurrentInstance();
|
|
const checkboxGroup = inject(checkboxGroupContextKey, void 0);
|
|
const isGroup = computed(() => isUndefined(checkboxGroup) === false);
|
|
const isLimitExceeded = ref(false);
|
|
const model = 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$1(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) && val.length > model.value.length;
|
|
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 = inject(checkboxGroupContextKey, void 0);
|
|
const isFocused = ref(false);
|
|
const actualValue = computed(() => {
|
|
if (!isPropAbsent(props.value)) {
|
|
return props.value;
|
|
}
|
|
return props.label;
|
|
});
|
|
const isChecked = computed(() => {
|
|
const value = model.value;
|
|
if (isBoolean(value)) {
|
|
return value;
|
|
} else if (isArray$1(value)) {
|
|
if (isObject$1(actualValue.value)) {
|
|
return value.map(toRaw).some((o) => isEqual$1(o, actualValue.value));
|
|
} else {
|
|
return value.map(toRaw).includes(actualValue.value);
|
|
}
|
|
} else if (value !== null && value !== void 0) {
|
|
return value === props.trueValue || value === props.trueLabel;
|
|
} else {
|
|
return !!value;
|
|
}
|
|
});
|
|
const checkboxButtonSize = useFormSize(computed(() => {
|
|
var _a;
|
|
return (_a = checkboxGroup == null ? void 0 : checkboxGroup.size) == null ? void 0 : _a.value;
|
|
}), {
|
|
prop: true
|
|
});
|
|
const checkboxSize = useFormSize(computed(() => {
|
|
var _a;
|
|
return (_a = checkboxGroup == null ? void 0 : checkboxGroup.size) == null ? void 0 : _a.value;
|
|
}));
|
|
const hasOwnLabel = computed(() => {
|
|
return !!slots.default || !isPropAbsent(actualValue.value);
|
|
});
|
|
return {
|
|
checkboxButtonSize,
|
|
isChecked,
|
|
isFocused,
|
|
checkboxSize,
|
|
hasOwnLabel,
|
|
actualValue
|
|
};
|
|
};
|
|
|
|
const useCheckbox = (props, slots) => {
|
|
const { formItem: elFormItem } = useFormItem();
|
|
const { model, isGroup, isLimitExceeded } = useCheckboxModel(props);
|
|
const {
|
|
isFocused,
|
|
isChecked,
|
|
checkboxButtonSize,
|
|
checkboxSize,
|
|
hasOwnLabel,
|
|
actualValue
|
|
} = 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
|
|
});
|
|
const setStoreValue = () => {
|
|
function addToStore() {
|
|
var _a, _b;
|
|
if (isArray$1(model.value) && !model.value.includes(actualValue.value)) {
|
|
model.value.push(actualValue.value);
|
|
} else {
|
|
model.value = (_b = (_a = props.trueValue) != null ? _a : props.trueLabel) != null ? _b : true;
|
|
}
|
|
}
|
|
props.checked && addToStore();
|
|
};
|
|
setStoreValue();
|
|
useDeprecated({
|
|
from: "label act as value",
|
|
replacement: "value",
|
|
version: "3.0.0",
|
|
scope: "el-checkbox",
|
|
ref: "https://element-plus.org/en-US/component/checkbox.html"
|
|
}, computed(() => isGroup.value && isPropAbsent(props.value)));
|
|
useDeprecated({
|
|
from: "true-label",
|
|
replacement: "true-value",
|
|
version: "3.0.0",
|
|
scope: "el-checkbox",
|
|
ref: "https://element-plus.org/en-US/component/checkbox.html"
|
|
}, computed(() => !!props.trueLabel));
|
|
useDeprecated({
|
|
from: "false-label",
|
|
replacement: "false-value",
|
|
version: "3.0.0",
|
|
scope: "el-checkbox",
|
|
ref: "https://element-plus.org/en-US/component/checkbox.html"
|
|
}, computed(() => !!props.falseLabel));
|
|
return {
|
|
inputId,
|
|
isLabeledByFormItem,
|
|
isChecked,
|
|
isDisabled,
|
|
isFocused,
|
|
checkboxButtonSize,
|
|
checkboxSize,
|
|
hasOwnLabel,
|
|
model,
|
|
actualValue,
|
|
handleChange,
|
|
onClickRoot
|
|
};
|
|
};
|
|
|
|
const __default__$1m = defineComponent({
|
|
name: "ElCheckbox"
|
|
});
|
|
const _sfc_main$1X = /* @__PURE__ */ defineComponent({
|
|
...__default__$1m,
|
|
props: checkboxProps,
|
|
emits: checkboxEmits,
|
|
setup(__props) {
|
|
const props = __props;
|
|
const slots = useSlots();
|
|
const {
|
|
inputId,
|
|
isLabeledByFormItem,
|
|
isChecked,
|
|
isDisabled,
|
|
isFocused,
|
|
checkboxSize,
|
|
hasOwnLabel,
|
|
model,
|
|
actualValue,
|
|
handleChange,
|
|
onClickRoot
|
|
} = useCheckbox(props, slots);
|
|
const ns = useNamespace("checkbox");
|
|
const compKls = computed(() => {
|
|
return [
|
|
ns.b(),
|
|
ns.m(checkboxSize.value),
|
|
ns.is("disabled", isDisabled.value),
|
|
ns.is("bordered", props.border),
|
|
ns.is("checked", isChecked.value)
|
|
];
|
|
});
|
|
const spanKls = computed(() => {
|
|
return [
|
|
ns.e("input"),
|
|
ns.is("disabled", isDisabled.value),
|
|
ns.is("checked", isChecked.value),
|
|
ns.is("indeterminate", props.indeterminate),
|
|
ns.is("focus", isFocused.value)
|
|
];
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createBlock(resolveDynamicComponent(!unref(hasOwnLabel) && unref(isLabeledByFormItem) ? "span" : "label"), {
|
|
class: normalizeClass(unref(compKls)),
|
|
"aria-controls": _ctx.indeterminate ? _ctx.ariaControls : null,
|
|
onClick: unref(onClickRoot)
|
|
}, {
|
|
default: withCtx(() => {
|
|
var _a, _b, _c, _d;
|
|
return [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(spanKls))
|
|
}, [
|
|
_ctx.trueValue || _ctx.falseValue || _ctx.trueLabel || _ctx.falseLabel ? withDirectives((openBlock(), createElementBlock("input", {
|
|
key: 0,
|
|
id: unref(inputId),
|
|
"onUpdate:modelValue": ($event) => isRef(model) ? model.value = $event : null,
|
|
class: normalizeClass(unref(ns).e("original")),
|
|
type: "checkbox",
|
|
indeterminate: _ctx.indeterminate,
|
|
name: _ctx.name,
|
|
tabindex: _ctx.tabindex,
|
|
disabled: unref(isDisabled),
|
|
"true-value": (_b = (_a = _ctx.trueValue) != null ? _a : _ctx.trueLabel) != null ? _b : true,
|
|
"false-value": (_d = (_c = _ctx.falseValue) != null ? _c : _ctx.falseLabel) != null ? _d : false,
|
|
onChange: unref(handleChange),
|
|
onFocus: ($event) => isFocused.value = true,
|
|
onBlur: ($event) => isFocused.value = false,
|
|
onClick: withModifiers(() => {
|
|
}, ["stop"])
|
|
}, null, 42, ["id", "onUpdate:modelValue", "indeterminate", "name", "tabindex", "disabled", "true-value", "false-value", "onChange", "onFocus", "onBlur", "onClick"])), [
|
|
[vModelCheckbox, unref(model)]
|
|
]) : withDirectives((openBlock(), createElementBlock("input", {
|
|
key: 1,
|
|
id: unref(inputId),
|
|
"onUpdate:modelValue": ($event) => isRef(model) ? model.value = $event : null,
|
|
class: normalizeClass(unref(ns).e("original")),
|
|
type: "checkbox",
|
|
indeterminate: _ctx.indeterminate,
|
|
disabled: unref(isDisabled),
|
|
value: unref(actualValue),
|
|
name: _ctx.name,
|
|
tabindex: _ctx.tabindex,
|
|
onChange: unref(handleChange),
|
|
onFocus: ($event) => isFocused.value = true,
|
|
onBlur: ($event) => isFocused.value = false,
|
|
onClick: withModifiers(() => {
|
|
}, ["stop"])
|
|
}, null, 42, ["id", "onUpdate:modelValue", "indeterminate", "disabled", "value", "name", "tabindex", "onChange", "onFocus", "onBlur", "onClick"])), [
|
|
[vModelCheckbox, unref(model)]
|
|
]),
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(ns).e("inner"))
|
|
}, null, 2)
|
|
], 2),
|
|
unref(hasOwnLabel) ? (openBlock(), createElementBlock("span", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).e("label"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default"),
|
|
!_ctx.$slots.default ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
createTextVNode(toDisplayString(_ctx.label), 1)
|
|
], 64)) : createCommentVNode("v-if", true)
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
];
|
|
}),
|
|
_: 3
|
|
}, 8, ["class", "aria-controls", "onClick"]);
|
|
};
|
|
}
|
|
});
|
|
var Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$1X, [["__file", "checkbox.vue"]]);
|
|
|
|
const __default__$1l = defineComponent({
|
|
name: "ElCheckboxButton"
|
|
});
|
|
const _sfc_main$1W = /* @__PURE__ */ defineComponent({
|
|
...__default__$1l,
|
|
props: checkboxProps,
|
|
emits: checkboxEmits,
|
|
setup(__props) {
|
|
const props = __props;
|
|
const slots = useSlots();
|
|
const {
|
|
isFocused,
|
|
isChecked,
|
|
isDisabled,
|
|
checkboxButtonSize,
|
|
model,
|
|
actualValue,
|
|
handleChange
|
|
} = useCheckbox(props, slots);
|
|
const checkboxGroup = inject(checkboxGroupContextKey, void 0);
|
|
const ns = useNamespace("checkbox");
|
|
const activeStyle = 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
|
|
};
|
|
});
|
|
const labelKls = computed(() => {
|
|
return [
|
|
ns.b("button"),
|
|
ns.bm("button", checkboxButtonSize.value),
|
|
ns.is("disabled", isDisabled.value),
|
|
ns.is("checked", isChecked.value),
|
|
ns.is("focus", isFocused.value)
|
|
];
|
|
});
|
|
return (_ctx, _cache) => {
|
|
var _a, _b, _c, _d;
|
|
return openBlock(), createElementBlock("label", {
|
|
class: normalizeClass(unref(labelKls))
|
|
}, [
|
|
_ctx.trueValue || _ctx.falseValue || _ctx.trueLabel || _ctx.falseLabel ? withDirectives((openBlock(), createElementBlock("input", {
|
|
key: 0,
|
|
"onUpdate:modelValue": ($event) => isRef(model) ? model.value = $event : null,
|
|
class: normalizeClass(unref(ns).be("button", "original")),
|
|
type: "checkbox",
|
|
name: _ctx.name,
|
|
tabindex: _ctx.tabindex,
|
|
disabled: unref(isDisabled),
|
|
"true-value": (_b = (_a = _ctx.trueValue) != null ? _a : _ctx.trueLabel) != null ? _b : true,
|
|
"false-value": (_d = (_c = _ctx.falseValue) != null ? _c : _ctx.falseLabel) != null ? _d : false,
|
|
onChange: unref(handleChange),
|
|
onFocus: ($event) => isFocused.value = true,
|
|
onBlur: ($event) => isFocused.value = false,
|
|
onClick: withModifiers(() => {
|
|
}, ["stop"])
|
|
}, null, 42, ["onUpdate:modelValue", "name", "tabindex", "disabled", "true-value", "false-value", "onChange", "onFocus", "onBlur", "onClick"])), [
|
|
[vModelCheckbox, unref(model)]
|
|
]) : withDirectives((openBlock(), createElementBlock("input", {
|
|
key: 1,
|
|
"onUpdate:modelValue": ($event) => isRef(model) ? model.value = $event : null,
|
|
class: normalizeClass(unref(ns).be("button", "original")),
|
|
type: "checkbox",
|
|
name: _ctx.name,
|
|
tabindex: _ctx.tabindex,
|
|
disabled: unref(isDisabled),
|
|
value: unref(actualValue),
|
|
onChange: unref(handleChange),
|
|
onFocus: ($event) => isFocused.value = true,
|
|
onBlur: ($event) => isFocused.value = false,
|
|
onClick: withModifiers(() => {
|
|
}, ["stop"])
|
|
}, null, 42, ["onUpdate:modelValue", "name", "tabindex", "disabled", "value", "onChange", "onFocus", "onBlur", "onClick"])), [
|
|
[vModelCheckbox, unref(model)]
|
|
]),
|
|
_ctx.$slots.default || _ctx.label ? (openBlock(), createElementBlock("span", {
|
|
key: 2,
|
|
class: normalizeClass(unref(ns).be("button", "inner")),
|
|
style: normalizeStyle(unref(isChecked) ? unref(activeStyle) : void 0)
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default", {}, () => [
|
|
createTextVNode(toDisplayString(_ctx.label), 1)
|
|
])
|
|
], 6)) : createCommentVNode("v-if", true)
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var CheckboxButton = /* @__PURE__ */ _export_sfc(_sfc_main$1W, [["__file", "checkbox-button.vue"]]);
|
|
|
|
const checkboxGroupProps = buildProps({
|
|
modelValue: {
|
|
type: definePropType(Array),
|
|
default: () => []
|
|
},
|
|
disabled: Boolean,
|
|
min: Number,
|
|
max: Number,
|
|
size: useSizeProp,
|
|
fill: String,
|
|
textColor: String,
|
|
tag: {
|
|
type: String,
|
|
default: "div"
|
|
},
|
|
validateEvent: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
...useAriaProps(["ariaLabel"])
|
|
});
|
|
const checkboxGroupEmits = {
|
|
[UPDATE_MODEL_EVENT]: (val) => isArray$1(val),
|
|
change: (val) => isArray$1(val)
|
|
};
|
|
|
|
const __default__$1k = defineComponent({
|
|
name: "ElCheckboxGroup"
|
|
});
|
|
const _sfc_main$1V = /* @__PURE__ */ defineComponent({
|
|
...__default__$1k,
|
|
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 nextTick();
|
|
emit("change", value);
|
|
};
|
|
const modelValue = computed({
|
|
get() {
|
|
return props.modelValue;
|
|
},
|
|
set(val) {
|
|
changeEvent(val);
|
|
}
|
|
});
|
|
provide(checkboxGroupContextKey, {
|
|
...pick(toRefs(props), [
|
|
"size",
|
|
"min",
|
|
"max",
|
|
"disabled",
|
|
"validateEvent",
|
|
"fill",
|
|
"textColor"
|
|
]),
|
|
modelValue,
|
|
changeEvent
|
|
});
|
|
watch(() => props.modelValue, () => {
|
|
if (props.validateEvent) {
|
|
formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn());
|
|
}
|
|
});
|
|
return (_ctx, _cache) => {
|
|
var _a;
|
|
return openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
|
|
id: unref(groupId),
|
|
class: normalizeClass(unref(ns).b("group")),
|
|
role: "group",
|
|
"aria-label": !unref(isLabeledByFormItem) ? _ctx.ariaLabel || "checkbox-group" : void 0,
|
|
"aria-labelledby": unref(isLabeledByFormItem) ? (_a = unref(formItem)) == null ? void 0 : _a.labelId : void 0
|
|
}, {
|
|
default: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "default")
|
|
]),
|
|
_: 3
|
|
}, 8, ["id", "class", "aria-label", "aria-labelledby"]);
|
|
};
|
|
}
|
|
});
|
|
var CheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1V, [["__file", "checkbox-group.vue"]]);
|
|
|
|
const ElCheckbox = withInstall(Checkbox, {
|
|
CheckboxButton,
|
|
CheckboxGroup
|
|
});
|
|
const ElCheckboxButton = withNoopInstall(CheckboxButton);
|
|
const ElCheckboxGroup$1 = withNoopInstall(CheckboxGroup);
|
|
|
|
const radioPropsBase = buildProps({
|
|
modelValue: {
|
|
type: [String, Number, Boolean],
|
|
default: void 0
|
|
},
|
|
size: useSizeProp,
|
|
disabled: Boolean,
|
|
label: {
|
|
type: [String, Number, Boolean],
|
|
default: void 0
|
|
},
|
|
value: {
|
|
type: [String, Number, Boolean],
|
|
default: void 0
|
|
},
|
|
name: {
|
|
type: String,
|
|
default: void 0
|
|
}
|
|
});
|
|
const radioProps = buildProps({
|
|
...radioPropsBase,
|
|
border: Boolean
|
|
});
|
|
const radioEmits = {
|
|
[UPDATE_MODEL_EVENT]: (val) => isString$1(val) || isNumber(val) || isBoolean(val),
|
|
[CHANGE_EVENT]: (val) => isString$1(val) || isNumber(val) || isBoolean(val)
|
|
};
|
|
|
|
const radioGroupKey = Symbol("radioGroupKey");
|
|
|
|
const useRadio = (props, emit) => {
|
|
const radioRef = ref();
|
|
const radioGroup = inject(radioGroupKey, void 0);
|
|
const isGroup = computed(() => !!radioGroup);
|
|
const actualValue = computed(() => {
|
|
if (!isPropAbsent(props.value)) {
|
|
return props.value;
|
|
}
|
|
return props.label;
|
|
});
|
|
const modelValue = 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 === actualValue.value;
|
|
}
|
|
});
|
|
const size = useFormSize(computed(() => radioGroup == null ? void 0 : radioGroup.size));
|
|
const disabled = useFormDisabled(computed(() => radioGroup == null ? void 0 : radioGroup.disabled));
|
|
const focus = ref(false);
|
|
const tabIndex = computed(() => {
|
|
return disabled.value || isGroup.value && modelValue.value !== actualValue.value ? -1 : 0;
|
|
});
|
|
useDeprecated({
|
|
from: "label act as value",
|
|
replacement: "value",
|
|
version: "3.0.0",
|
|
scope: "el-radio",
|
|
ref: "https://element-plus.org/en-US/component/radio.html"
|
|
}, computed(() => isGroup.value && isPropAbsent(props.value)));
|
|
return {
|
|
radioRef,
|
|
isGroup,
|
|
radioGroup,
|
|
focus,
|
|
size,
|
|
disabled,
|
|
tabIndex,
|
|
modelValue,
|
|
actualValue
|
|
};
|
|
};
|
|
|
|
const __default__$1j = defineComponent({
|
|
name: "ElRadio"
|
|
});
|
|
const _sfc_main$1U = /* @__PURE__ */ defineComponent({
|
|
...__default__$1j,
|
|
props: radioProps,
|
|
emits: radioEmits,
|
|
setup(__props, { emit }) {
|
|
const props = __props;
|
|
const ns = useNamespace("radio");
|
|
const { radioRef, radioGroup, focus, size, disabled, modelValue, actualValue } = useRadio(props, emit);
|
|
function handleChange() {
|
|
nextTick(() => emit("change", modelValue.value));
|
|
}
|
|
return (_ctx, _cache) => {
|
|
var _a;
|
|
return openBlock(), createElementBlock("label", {
|
|
class: normalizeClass([
|
|
unref(ns).b(),
|
|
unref(ns).is("disabled", unref(disabled)),
|
|
unref(ns).is("focus", unref(focus)),
|
|
unref(ns).is("bordered", _ctx.border),
|
|
unref(ns).is("checked", unref(modelValue) === unref(actualValue)),
|
|
unref(ns).m(unref(size))
|
|
])
|
|
}, [
|
|
createElementVNode("span", {
|
|
class: normalizeClass([
|
|
unref(ns).e("input"),
|
|
unref(ns).is("disabled", unref(disabled)),
|
|
unref(ns).is("checked", unref(modelValue) === unref(actualValue))
|
|
])
|
|
}, [
|
|
withDirectives(createElementVNode("input", {
|
|
ref_key: "radioRef",
|
|
ref: radioRef,
|
|
"onUpdate:modelValue": ($event) => isRef(modelValue) ? modelValue.value = $event : null,
|
|
class: normalizeClass(unref(ns).e("original")),
|
|
value: unref(actualValue),
|
|
name: _ctx.name || ((_a = unref(radioGroup)) == null ? void 0 : _a.name),
|
|
disabled: unref(disabled),
|
|
checked: unref(modelValue) === unref(actualValue),
|
|
type: "radio",
|
|
onFocus: ($event) => focus.value = true,
|
|
onBlur: ($event) => focus.value = false,
|
|
onChange: handleChange,
|
|
onClick: withModifiers(() => {
|
|
}, ["stop"])
|
|
}, null, 42, ["onUpdate:modelValue", "value", "name", "disabled", "checked", "onFocus", "onBlur", "onClick"]), [
|
|
[vModelRadio, unref(modelValue)]
|
|
]),
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(ns).e("inner"))
|
|
}, null, 2)
|
|
], 2),
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(ns).e("label")),
|
|
onKeydown: withModifiers(() => {
|
|
}, ["stop"])
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default", {}, () => [
|
|
createTextVNode(toDisplayString(_ctx.label), 1)
|
|
])
|
|
], 42, ["onKeydown"])
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var Radio = /* @__PURE__ */ _export_sfc(_sfc_main$1U, [["__file", "radio.vue"]]);
|
|
|
|
const radioButtonProps = buildProps({
|
|
...radioPropsBase
|
|
});
|
|
|
|
const __default__$1i = defineComponent({
|
|
name: "ElRadioButton"
|
|
});
|
|
const _sfc_main$1T = /* @__PURE__ */ defineComponent({
|
|
...__default__$1i,
|
|
props: radioButtonProps,
|
|
setup(__props) {
|
|
const props = __props;
|
|
const ns = useNamespace("radio");
|
|
const { radioRef, focus, size, disabled, modelValue, radioGroup, actualValue } = useRadio(props);
|
|
const activeStyle = 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 openBlock(), createElementBlock("label", {
|
|
class: normalizeClass([
|
|
unref(ns).b("button"),
|
|
unref(ns).is("active", unref(modelValue) === unref(actualValue)),
|
|
unref(ns).is("disabled", unref(disabled)),
|
|
unref(ns).is("focus", unref(focus)),
|
|
unref(ns).bm("button", unref(size))
|
|
])
|
|
}, [
|
|
withDirectives(createElementVNode("input", {
|
|
ref_key: "radioRef",
|
|
ref: radioRef,
|
|
"onUpdate:modelValue": ($event) => isRef(modelValue) ? modelValue.value = $event : null,
|
|
class: normalizeClass(unref(ns).be("button", "original-radio")),
|
|
value: unref(actualValue),
|
|
type: "radio",
|
|
name: _ctx.name || ((_a = unref(radioGroup)) == null ? void 0 : _a.name),
|
|
disabled: unref(disabled),
|
|
onFocus: ($event) => focus.value = true,
|
|
onBlur: ($event) => focus.value = false,
|
|
onClick: withModifiers(() => {
|
|
}, ["stop"])
|
|
}, null, 42, ["onUpdate:modelValue", "value", "name", "disabled", "onFocus", "onBlur", "onClick"]), [
|
|
[vModelRadio, unref(modelValue)]
|
|
]),
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(ns).be("button", "inner")),
|
|
style: normalizeStyle(unref(modelValue) === unref(actualValue) ? unref(activeStyle) : {}),
|
|
onKeydown: withModifiers(() => {
|
|
}, ["stop"])
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default", {}, () => [
|
|
createTextVNode(toDisplayString(_ctx.label), 1)
|
|
])
|
|
], 46, ["onKeydown"])
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var RadioButton = /* @__PURE__ */ _export_sfc(_sfc_main$1T, [["__file", "radio-button.vue"]]);
|
|
|
|
const radioGroupProps = buildProps({
|
|
id: {
|
|
type: String,
|
|
default: void 0
|
|
},
|
|
size: useSizeProp,
|
|
disabled: Boolean,
|
|
modelValue: {
|
|
type: [String, Number, Boolean],
|
|
default: void 0
|
|
},
|
|
fill: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
textColor: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
name: {
|
|
type: String,
|
|
default: void 0
|
|
},
|
|
validateEvent: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
...useAriaProps(["ariaLabel"])
|
|
});
|
|
const radioGroupEmits = radioEmits;
|
|
|
|
const __default__$1h = defineComponent({
|
|
name: "ElRadioGroup"
|
|
});
|
|
const _sfc_main$1S = /* @__PURE__ */ defineComponent({
|
|
...__default__$1h,
|
|
props: radioGroupProps,
|
|
emits: radioGroupEmits,
|
|
setup(__props, { emit }) {
|
|
const props = __props;
|
|
const ns = useNamespace("radio");
|
|
const radioId = useId();
|
|
const radioGroupRef = ref();
|
|
const { formItem } = useFormItem();
|
|
const { inputId: groupId, isLabeledByFormItem } = useFormItemInputId(props, {
|
|
formItemContext: formItem
|
|
});
|
|
const changeEvent = (value) => {
|
|
emit(UPDATE_MODEL_EVENT, value);
|
|
nextTick(() => emit("change", value));
|
|
};
|
|
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 = computed(() => {
|
|
return props.name || radioId.value;
|
|
});
|
|
provide(radioGroupKey, reactive({
|
|
...toRefs(props),
|
|
changeEvent,
|
|
name
|
|
}));
|
|
watch(() => props.modelValue, () => {
|
|
if (props.validateEvent) {
|
|
formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn());
|
|
}
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
id: unref(groupId),
|
|
ref_key: "radioGroupRef",
|
|
ref: radioGroupRef,
|
|
class: normalizeClass(unref(ns).b("group")),
|
|
role: "radiogroup",
|
|
"aria-label": !unref(isLabeledByFormItem) ? _ctx.ariaLabel || "radio-group" : void 0,
|
|
"aria-labelledby": unref(isLabeledByFormItem) ? unref(formItem).labelId : void 0
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 10, ["id", "aria-label", "aria-labelledby"]);
|
|
};
|
|
}
|
|
});
|
|
var RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1S, [["__file", "radio-group.vue"]]);
|
|
|
|
const ElRadio = withInstall(Radio, {
|
|
RadioButton,
|
|
RadioGroup
|
|
});
|
|
const ElRadioGroup = withNoopInstall(RadioGroup);
|
|
const ElRadioButton = withNoopInstall(RadioButton);
|
|
|
|
var NodeContent$1 = 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 h$1("span", { class: ns.e("label") }, renderLabelFn ? renderLabelFn({ node, data }) : label);
|
|
}
|
|
});
|
|
|
|
const CASCADER_PANEL_INJECTION_KEY = Symbol();
|
|
|
|
const _sfc_main$1R = 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 = inject(CASCADER_PANEL_INJECTION_KEY);
|
|
const ns = useNamespace("cascader-node");
|
|
const isHoverMenu = computed(() => panel.isHoverMenu);
|
|
const multiple = computed(() => panel.config.multiple);
|
|
const checkStrictly = computed(() => panel.config.checkStrictly);
|
|
const checkedNodeId = computed(() => {
|
|
var _a;
|
|
return (_a = panel.checkedNodes[0]) == null ? void 0 : _a.uid;
|
|
});
|
|
const isDisabled = computed(() => props.node.isDisabled);
|
|
const isLeaf = computed(() => props.node.isLeaf);
|
|
const expandable = computed(() => checkStrictly.value && !isLeaf.value || !isDisabled.value);
|
|
const inExpandingPath = computed(() => isInPath(panel.expandingNode));
|
|
const inCheckedPath = 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
|
|
};
|
|
}
|
|
});
|
|
function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
|
|
const _component_el_checkbox = resolveComponent("el-checkbox");
|
|
const _component_el_radio = resolveComponent("el-radio");
|
|
const _component_check = resolveComponent("check");
|
|
const _component_el_icon = resolveComponent("el-icon");
|
|
const _component_node_content = resolveComponent("node-content");
|
|
const _component_loading = resolveComponent("loading");
|
|
const _component_arrow_right = resolveComponent("arrow-right");
|
|
return openBlock(), 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: 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: _ctx.handleHoverExpand,
|
|
onFocus: _ctx.handleHoverExpand,
|
|
onClick: _ctx.handleClick
|
|
}, [
|
|
createCommentVNode(" prefix "),
|
|
_ctx.multiple ? (openBlock(), createBlock(_component_el_checkbox, {
|
|
key: 0,
|
|
"model-value": _ctx.node.checked,
|
|
indeterminate: _ctx.node.indeterminate,
|
|
disabled: _ctx.isDisabled,
|
|
onClick: withModifiers(() => {
|
|
}, ["stop"]),
|
|
"onUpdate:modelValue": _ctx.handleSelectCheck
|
|
}, null, 8, ["model-value", "indeterminate", "disabled", "onClick", "onUpdate:modelValue"])) : _ctx.checkStrictly ? (openBlock(), createBlock(_component_el_radio, {
|
|
key: 1,
|
|
"model-value": _ctx.checkedNodeId,
|
|
label: _ctx.node.uid,
|
|
disabled: _ctx.isDisabled,
|
|
"onUpdate:modelValue": _ctx.handleSelectCheck,
|
|
onClick: withModifiers(() => {
|
|
}, ["stop"])
|
|
}, {
|
|
default: withCtx(() => [
|
|
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 "),
|
|
createElementVNode("span")
|
|
]),
|
|
_: 1
|
|
}, 8, ["model-value", "label", "disabled", "onUpdate:modelValue", "onClick"])) : _ctx.isLeaf && _ctx.node.checked ? (openBlock(), createBlock(_component_el_icon, {
|
|
key: 2,
|
|
class: normalizeClass(_ctx.ns.e("prefix"))
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_component_check)
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : createCommentVNode("v-if", true),
|
|
createCommentVNode(" content "),
|
|
createVNode(_component_node_content),
|
|
createCommentVNode(" postfix "),
|
|
!_ctx.isLeaf ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
|
|
_ctx.node.loading ? (openBlock(), createBlock(_component_el_icon, {
|
|
key: 0,
|
|
class: normalizeClass([_ctx.ns.is("loading"), _ctx.ns.e("postfix")])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_component_loading)
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : (openBlock(), createBlock(_component_el_icon, {
|
|
key: 1,
|
|
class: normalizeClass(["arrow-right", _ctx.ns.e("postfix")])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_component_arrow_right)
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"]))
|
|
], 64)) : createCommentVNode("v-if", true)
|
|
], 42, ["id", "aria-haspopup", "aria-owns", "aria-expanded", "tabindex", "onMouseenter", "onFocus", "onClick"]);
|
|
}
|
|
var ElCascaderNode = /* @__PURE__ */ _export_sfc(_sfc_main$1R, [["render", _sfc_render$t], ["__file", "node.vue"]]);
|
|
|
|
const _sfc_main$1Q = 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 = getCurrentInstance();
|
|
const ns = useNamespace("cascader-menu");
|
|
const { t } = useLocale();
|
|
const id = useId();
|
|
let activeNode = null;
|
|
let hoverTimer = null;
|
|
const panel = inject(CASCADER_PANEL_INJECTION_KEY);
|
|
const hoverZone = ref(null);
|
|
const isEmpty = computed(() => !props.nodes.length);
|
|
const isLoading = computed(() => !panel.initialLoaded);
|
|
const menuId = computed(() => `${id.value}-${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 = `
|
|
<path style="pointer-events: auto;" fill="transparent" d="M${startX} ${top} L${offsetWidth} 0 V${top} Z" />
|
|
<path style="pointer-events: auto;" fill="transparent" d="M${startX} ${bottom} L${offsetWidth} ${offsetHeight} V${bottom} Z" />
|
|
`;
|
|
} 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$s(_ctx, _cache, $props, $setup, $data, $options) {
|
|
const _component_el_cascader_node = resolveComponent("el-cascader-node");
|
|
const _component_loading = resolveComponent("loading");
|
|
const _component_el_icon = resolveComponent("el-icon");
|
|
const _component_el_scrollbar = resolveComponent("el-scrollbar");
|
|
return openBlock(), createBlock(_component_el_scrollbar, {
|
|
key: _ctx.menuId,
|
|
tag: "ul",
|
|
role: "menu",
|
|
class: 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: withCtx(() => {
|
|
var _a;
|
|
return [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.nodes, (node) => {
|
|
return openBlock(), 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 ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(_ctx.ns.e("empty-text"))
|
|
}, [
|
|
createVNode(_component_el_icon, {
|
|
size: "14",
|
|
class: normalizeClass(_ctx.ns.is("loading"))
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_component_loading)
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"]),
|
|
createTextVNode(" " + toDisplayString(_ctx.t("el.cascader.loading")), 1)
|
|
], 2)) : _ctx.isEmpty ? (openBlock(), createElementBlock("div", {
|
|
key: 1,
|
|
class: normalizeClass(_ctx.ns.e("empty-text"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "empty", {}, () => [
|
|
createTextVNode(toDisplayString(_ctx.t("el.cascader.noData")), 1)
|
|
])
|
|
], 2)) : ((_a = _ctx.panel) == null ? void 0 : _a.isHoverMenu) ? (openBlock(), createElementBlock("svg", {
|
|
key: 2,
|
|
ref: "hoverZone",
|
|
class: normalizeClass(_ctx.ns.e("hover-zone"))
|
|
}, null, 2)) : createCommentVNode("v-if", true)
|
|
];
|
|
}),
|
|
_: 3
|
|
}, 8, ["class", "wrap-class", "view-class", "onMousemove", "onMouseleave"]);
|
|
}
|
|
var ElCascaderMenu = /* @__PURE__ */ _export_sfc(_sfc_main$1Q, [["render", _sfc_render$s], ["__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$1(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$1(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 = buildProps({
|
|
modelValue: {
|
|
type: definePropType([Number, String, Array])
|
|
},
|
|
options: {
|
|
type: definePropType(Array),
|
|
default: () => []
|
|
},
|
|
props: {
|
|
type: definePropType(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 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$1P = 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 = ref(true);
|
|
const menuList = ref([]);
|
|
const checkedValue = ref(null);
|
|
const menus = ref([]);
|
|
const expandingNode = ref(null);
|
|
const checkedNodes = ref([]);
|
|
const isHoverMenu = computed(() => config.value.expandTrigger === "hover");
|
|
const renderLabelFn = 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();
|
|
menus.value = menus.value.slice(0, 1);
|
|
expandingNode.value = null;
|
|
emit("expand-change", []);
|
|
};
|
|
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));
|
|
reactive(newNodes).forEach((node) => node.doCheck(true));
|
|
checkedNodes.value = newNodes;
|
|
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;
|
|
}
|
|
};
|
|
provide(CASCADER_PANEL_INJECTION_KEY, reactive({
|
|
config,
|
|
expandingNode,
|
|
checkedNodes,
|
|
isHoverMenu,
|
|
initialLoaded,
|
|
renderLabelFn,
|
|
lazyLoad,
|
|
expandNode,
|
|
handleCheckChange
|
|
}));
|
|
watch([config, () => props.options], initStore, {
|
|
deep: true,
|
|
immediate: true
|
|
});
|
|
watch(() => props.modelValue, () => {
|
|
manualChecked = false;
|
|
syncCheckedValue();
|
|
}, {
|
|
deep: true
|
|
});
|
|
watch(() => checkedValue.value, (val) => {
|
|
if (!isEqual$1(val, props.modelValue)) {
|
|
emit(UPDATE_MODEL_EVENT, val);
|
|
emit(CHANGE_EVENT, val);
|
|
}
|
|
});
|
|
onBeforeUpdate(() => menuList.value = []);
|
|
onMounted(() => !isEmpty(props.modelValue) && syncCheckedValue());
|
|
return {
|
|
ns,
|
|
menuList,
|
|
menus,
|
|
checkedNodes,
|
|
handleKeyDown,
|
|
handleCheckChange,
|
|
getFlattedNodes,
|
|
getCheckedNodes,
|
|
clearCheckedNodes,
|
|
calculateCheckedValue,
|
|
scrollToExpandingNode
|
|
};
|
|
}
|
|
});
|
|
function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
|
|
const _component_el_cascader_menu = resolveComponent("el-cascader-menu");
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass([_ctx.ns.b("panel"), _ctx.ns.is("bordered", _ctx.border)]),
|
|
onKeydown: _ctx.handleKeyDown
|
|
}, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menus, (menu, index) => {
|
|
return openBlock(), createBlock(_component_el_cascader_menu, {
|
|
key: index,
|
|
ref_for: true,
|
|
ref: (item) => _ctx.menuList[index] = item,
|
|
index,
|
|
nodes: [...menu]
|
|
}, {
|
|
empty: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "empty")
|
|
]),
|
|
_: 2
|
|
}, 1032, ["index", "nodes"]);
|
|
}), 128))
|
|
], 42, ["onKeydown"]);
|
|
}
|
|
var CascaderPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1P, [["render", _sfc_render$r], ["__file", "index.vue"]]);
|
|
|
|
const ElCascaderPanel = withInstall(CascaderPanel);
|
|
|
|
const tagProps = buildProps({
|
|
type: {
|
|
type: String,
|
|
values: ["primary", "success", "info", "warning", "danger"],
|
|
default: "primary"
|
|
},
|
|
closable: Boolean,
|
|
disableTransitions: Boolean,
|
|
hit: Boolean,
|
|
color: String,
|
|
size: {
|
|
type: String,
|
|
values: componentSizes
|
|
},
|
|
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__$1g = defineComponent({
|
|
name: "ElTag"
|
|
});
|
|
const _sfc_main$1O = /* @__PURE__ */ defineComponent({
|
|
...__default__$1g,
|
|
props: tagProps,
|
|
emits: tagEmits,
|
|
setup(__props, { emit }) {
|
|
const props = __props;
|
|
const tagSize = useFormSize();
|
|
const ns = useNamespace("tag");
|
|
const containerKls = computed(() => {
|
|
const { type, hit, effect, closable, round } = props;
|
|
return [
|
|
ns.b(),
|
|
ns.is("closable", closable),
|
|
ns.m(type || "primary"),
|
|
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);
|
|
};
|
|
const handleVNodeMounted = (vnode) => {
|
|
vnode.component.subTree.component.bum = null;
|
|
};
|
|
return (_ctx, _cache) => {
|
|
return _ctx.disableTransitions ? (openBlock(), createElementBlock("span", {
|
|
key: 0,
|
|
class: normalizeClass(unref(containerKls)),
|
|
style: normalizeStyle({ backgroundColor: _ctx.color }),
|
|
onClick: handleClick
|
|
}, [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(ns).e("content"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 2),
|
|
_ctx.closable ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).e("close")),
|
|
onClick: withModifiers(handleClose, ["stop"])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(close_default))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class", "onClick"])) : createCommentVNode("v-if", true)
|
|
], 6)) : (openBlock(), createBlock(Transition, {
|
|
key: 1,
|
|
name: `${unref(ns).namespace.value}-zoom-in-center`,
|
|
appear: "",
|
|
onVnodeMounted: handleVNodeMounted
|
|
}, {
|
|
default: withCtx(() => [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(containerKls)),
|
|
style: normalizeStyle({ backgroundColor: _ctx.color }),
|
|
onClick: handleClick
|
|
}, [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(ns).e("content"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 2),
|
|
_ctx.closable ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).e("close")),
|
|
onClick: withModifiers(handleClose, ["stop"])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(close_default))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class", "onClick"])) : createCommentVNode("v-if", true)
|
|
], 6)
|
|
]),
|
|
_: 3
|
|
}, 8, ["name"]));
|
|
};
|
|
}
|
|
});
|
|
var Tag = /* @__PURE__ */ _export_sfc(_sfc_main$1O, [["__file", "tag.vue"]]);
|
|
|
|
const ElTag = withInstall(Tag);
|
|
|
|
const cascaderProps = buildProps({
|
|
...CommonProps,
|
|
size: useSizeProp,
|
|
placeholder: String,
|
|
disabled: Boolean,
|
|
clearable: Boolean,
|
|
filterable: Boolean,
|
|
filterMethod: {
|
|
type: definePropType(Function),
|
|
default: (node, keyword) => node.text.includes(keyword)
|
|
},
|
|
separator: {
|
|
type: String,
|
|
default: " / "
|
|
},
|
|
showAllLevels: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
collapseTags: Boolean,
|
|
maxCollapseTags: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
collapseTagsTooltip: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
debounce: {
|
|
type: Number,
|
|
default: 300
|
|
},
|
|
beforeFilter: {
|
|
type: definePropType(Function),
|
|
default: () => true
|
|
},
|
|
placement: {
|
|
type: definePropType(String),
|
|
values: Ee,
|
|
default: "bottom-start"
|
|
},
|
|
fallbackPlacements: {
|
|
type: definePropType(Array),
|
|
default: ["bottom-start", "bottom", "top-start", "top", "right", "left"]
|
|
},
|
|
popperClass: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
teleported: useTooltipContentProps.teleported,
|
|
tagType: { ...tagProps.type, default: "info" },
|
|
tagEffect: { ...tagProps.effect, default: "light" },
|
|
validateEvent: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
persistent: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
...useEmptyValuesProps
|
|
});
|
|
const cascaderEmits = {
|
|
[UPDATE_MODEL_EVENT]: (_) => true,
|
|
[CHANGE_EVENT]: (_) => true,
|
|
focus: (evt) => evt instanceof FocusEvent,
|
|
blur: (evt) => evt instanceof FocusEvent,
|
|
clear: () => true,
|
|
visibleChange: (val) => isBoolean(val),
|
|
expandChange: (val) => !!val,
|
|
removeTag: (val) => !!val
|
|
};
|
|
|
|
const COMPONENT_NAME$e = "ElCascader";
|
|
const __default__$1f = defineComponent({
|
|
name: COMPONENT_NAME$e
|
|
});
|
|
const _sfc_main$1N = /* @__PURE__ */ defineComponent({
|
|
...__default__$1f,
|
|
props: cascaderProps,
|
|
emits: cascaderEmits,
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
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 attrs = useAttrs$1();
|
|
let inputInitialHeight = 0;
|
|
let pressDeleteCount = 0;
|
|
const nsCascader = useNamespace("cascader");
|
|
const nsInput = useNamespace("input");
|
|
const { t } = useLocale();
|
|
const { form, formItem } = useFormItem();
|
|
const { valueOnClear } = useEmptyValues(props);
|
|
const { isComposing, handleComposition } = useComposition({
|
|
afterComposition(event) {
|
|
var _a;
|
|
const text = (_a = event.target) == null ? void 0 : _a.value;
|
|
handleInput(text);
|
|
}
|
|
});
|
|
const tooltipRef = ref(null);
|
|
const input = ref(null);
|
|
const tagWrapper = ref(null);
|
|
const cascaderPanelRef = ref(null);
|
|
const suggestionPanel = ref(null);
|
|
const popperVisible = ref(false);
|
|
const inputHover = ref(false);
|
|
const filtering = ref(false);
|
|
const filterFocus = ref(false);
|
|
const inputValue = ref("");
|
|
const searchInputValue = ref("");
|
|
const presentTags = ref([]);
|
|
const allPresentTags = ref([]);
|
|
const suggestions = ref([]);
|
|
const cascaderStyle = computed(() => {
|
|
return attrs.style;
|
|
});
|
|
const isDisabled = computed(() => props.disabled || (form == null ? void 0 : form.disabled));
|
|
const inputPlaceholder = computed(() => props.placeholder || t("el.cascader.placeholder"));
|
|
const currentPlaceholder = computed(() => searchInputValue.value || presentTags.value.length > 0 || isComposing.value ? "" : inputPlaceholder.value);
|
|
const realSize = useFormSize();
|
|
const tagSize = computed(() => ["small"].includes(realSize.value) ? "small" : "default");
|
|
const multiple = computed(() => !!props.props.multiple);
|
|
const readonly = computed(() => !props.filterable || multiple.value);
|
|
const searchKeyword = computed(() => multiple.value ? searchInputValue.value : inputValue.value);
|
|
const checkedNodes = computed(() => {
|
|
var _a;
|
|
return ((_a = cascaderPanelRef.value) == null ? void 0 : _a.checkedNodes) || [];
|
|
});
|
|
const clearBtnVisible = computed(() => {
|
|
if (!props.clearable || isDisabled.value || filtering.value || !inputHover.value)
|
|
return false;
|
|
return !!checkedNodes.value.length;
|
|
});
|
|
const presentText = computed(() => {
|
|
const { showAllLevels, separator } = props;
|
|
const nodes = checkedNodes.value;
|
|
return nodes.length ? multiple.value ? "" : nodes[0].calcText(showAllLevels, separator) : "";
|
|
});
|
|
const validateState = computed(() => (formItem == null ? void 0 : formItem.validateState) || "");
|
|
const checkedValue = computed({
|
|
get() {
|
|
return cloneDeep(props.modelValue);
|
|
},
|
|
set(val) {
|
|
const value = val != null ? val : valueOnClear.value;
|
|
emit(UPDATE_MODEL_EVENT, value);
|
|
emit(CHANGE_EVENT, value);
|
|
if (props.validateEvent) {
|
|
formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn());
|
|
}
|
|
}
|
|
});
|
|
const cascaderKls = computed(() => {
|
|
return [
|
|
nsCascader.b(),
|
|
nsCascader.m(realSize.value),
|
|
nsCascader.is("disabled", isDisabled.value),
|
|
attrs.class
|
|
];
|
|
});
|
|
const cascaderIconKls = computed(() => {
|
|
return [
|
|
nsInput.e("icon"),
|
|
"icon-arrow-down",
|
|
nsCascader.is("reverse", popperVisible.value)
|
|
];
|
|
});
|
|
const inputClass = computed(() => {
|
|
return nsCascader.is("focus", popperVisible.value || filterFocus.value);
|
|
});
|
|
const contentRef = 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();
|
|
nextTick((_c = cascaderPanelRef.value) == null ? void 0 : _c.scrollToExpandingNode);
|
|
} else if (props.filterable) {
|
|
syncPresentTextValue();
|
|
}
|
|
emit("visibleChange", visible);
|
|
}
|
|
};
|
|
const updatePopperPosition = () => {
|
|
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 = cascaderPanelRef.value) == null ? void 0 : _a.calculateCheckedValue();
|
|
emit("removeTag", 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) {
|
|
nodes.slice(0, props.maxCollapseTags).forEach((node) => tags.push(genTag(node)));
|
|
const rest = nodes.slice(props.maxCollapseTags);
|
|
const restCount = rest.length;
|
|
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 = cascaderPanelRef.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 = cascaderPanelRef.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 = cascaderPanelRef.value) == null ? void 0 : _a.getCheckedNodes(leafOnly);
|
|
};
|
|
const handleExpandChange = (value) => {
|
|
updatePopperPosition();
|
|
emit("expandChange", value);
|
|
};
|
|
const handleKeyDown = (e) => {
|
|
if (isComposing.value)
|
|
return;
|
|
switch (e.code) {
|
|
case EVENT_CODE.enter:
|
|
togglePopperVisible();
|
|
break;
|
|
case EVENT_CODE.down:
|
|
togglePopperVisible(true);
|
|
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 = cascaderPanelRef.value) == null ? void 0 : _a.clearCheckedNodes();
|
|
if (!popperVisible.value && props.filterable) {
|
|
syncPresentTextValue();
|
|
}
|
|
togglePopperVisible(false);
|
|
emit("clear");
|
|
};
|
|
const syncPresentTextValue = () => {
|
|
const { value } = presentText;
|
|
inputValue.value = value;
|
|
searchInputValue.value = value;
|
|
};
|
|
const handleSuggestionClick = (node) => {
|
|
var _a, _b;
|
|
const { checked } = node;
|
|
if (multiple.value) {
|
|
(_a = cascaderPanelRef.value) == null ? void 0 : _a.handleCheckChange(node, !checked, false);
|
|
} else {
|
|
!checked && ((_b = cascaderPanelRef.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 handleFocus = (e) => {
|
|
const el = e.target;
|
|
const name = nsCascader.e("search-input");
|
|
if (el.className === name) {
|
|
filterFocus.value = true;
|
|
}
|
|
emit("focus", e);
|
|
};
|
|
const handleBlur = (e) => {
|
|
filterFocus.value = false;
|
|
emit("blur", e);
|
|
};
|
|
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();
|
|
};
|
|
const getInputInnerHeight = (inputInner) => Number.parseFloat(useCssVar(nsInput.cssVarName("input-height"), inputInner).value) - 2;
|
|
watch(filtering, updatePopperPosition);
|
|
watch([checkedNodes, isDisabled, () => props.collapseTags], calculatePresentTags);
|
|
watch(presentTags, () => {
|
|
nextTick(() => updateStyle());
|
|
});
|
|
watch(realSize, async () => {
|
|
await nextTick();
|
|
const inputInner = input.value.input;
|
|
inputInitialHeight = getInputInnerHeight(inputInner) || inputInitialHeight;
|
|
updateStyle();
|
|
});
|
|
watch(presentText, syncPresentTextValue, { immediate: true });
|
|
onMounted(() => {
|
|
const inputInner = input.value.input;
|
|
const inputInnerHeight = getInputInnerHeight(inputInner);
|
|
inputInitialHeight = inputInner.offsetHeight || inputInnerHeight;
|
|
useResizeObserver(inputInner, updateStyle);
|
|
});
|
|
expose({
|
|
getCheckedNodes,
|
|
cascaderPanelRef,
|
|
togglePopperVisible,
|
|
contentRef,
|
|
presentText
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createBlock(unref(ElTooltip), {
|
|
ref_key: "tooltipRef",
|
|
ref: tooltipRef,
|
|
visible: popperVisible.value,
|
|
teleported: _ctx.teleported,
|
|
"popper-class": [unref(nsCascader).e("dropdown"), _ctx.popperClass],
|
|
"popper-options": popperOptions,
|
|
"fallback-placements": _ctx.fallbackPlacements,
|
|
"stop-popper-mouse-event": false,
|
|
"gpu-acceleration": false,
|
|
placement: _ctx.placement,
|
|
transition: `${unref(nsCascader).namespace.value}-zoom-in-top`,
|
|
effect: "light",
|
|
pure: "",
|
|
persistent: _ctx.persistent,
|
|
onHide: hideSuggestionPanel
|
|
}, {
|
|
default: withCtx(() => [
|
|
withDirectives((openBlock(), createElementBlock("div", {
|
|
class: normalizeClass(unref(cascaderKls)),
|
|
style: normalizeStyle(unref(cascaderStyle)),
|
|
onClick: () => togglePopperVisible(unref(readonly) ? void 0 : true),
|
|
onKeydown: handleKeyDown,
|
|
onMouseenter: ($event) => inputHover.value = true,
|
|
onMouseleave: ($event) => inputHover.value = false
|
|
}, [
|
|
createVNode(unref(ElInput), {
|
|
ref_key: "input",
|
|
ref: input,
|
|
modelValue: inputValue.value,
|
|
"onUpdate:modelValue": ($event) => inputValue.value = $event,
|
|
placeholder: unref(currentPlaceholder),
|
|
readonly: unref(readonly),
|
|
disabled: unref(isDisabled),
|
|
"validate-event": false,
|
|
size: unref(realSize),
|
|
class: normalizeClass(unref(inputClass)),
|
|
tabindex: unref(multiple) && _ctx.filterable && !unref(isDisabled) ? -1 : void 0,
|
|
onCompositionstart: unref(handleComposition),
|
|
onCompositionupdate: unref(handleComposition),
|
|
onCompositionend: unref(handleComposition),
|
|
onFocus: handleFocus,
|
|
onBlur: handleBlur,
|
|
onInput: handleInput
|
|
}, {
|
|
suffix: withCtx(() => [
|
|
unref(clearBtnVisible) ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: "clear",
|
|
class: normalizeClass([unref(nsInput).e("icon"), "icon-circle-close"]),
|
|
onClick: withModifiers(handleClear, ["stop"])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(circle_close_default))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class", "onClick"])) : (openBlock(), createBlock(unref(ElIcon), {
|
|
key: "arrow-down",
|
|
class: normalizeClass(unref(cascaderIconKls)),
|
|
onClick: withModifiers(($event) => togglePopperVisible(), ["stop"])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(arrow_down_default))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class", "onClick"]))
|
|
]),
|
|
_: 1
|
|
}, 8, ["modelValue", "onUpdate:modelValue", "placeholder", "readonly", "disabled", "size", "class", "tabindex", "onCompositionstart", "onCompositionupdate", "onCompositionend"]),
|
|
unref(multiple) ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
ref_key: "tagWrapper",
|
|
ref: tagWrapper,
|
|
class: normalizeClass([
|
|
unref(nsCascader).e("tags"),
|
|
unref(nsCascader).is("validate", Boolean(unref(validateState)))
|
|
])
|
|
}, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(presentTags.value, (tag) => {
|
|
return openBlock(), createBlock(unref(ElTag), {
|
|
key: tag.key,
|
|
type: _ctx.tagType,
|
|
size: unref(tagSize),
|
|
effect: _ctx.tagEffect,
|
|
hit: tag.hitState,
|
|
closable: tag.closable,
|
|
"disable-transitions": "",
|
|
onClose: ($event) => deleteTag(tag)
|
|
}, {
|
|
default: withCtx(() => [
|
|
tag.isCollapseTag === false ? (openBlock(), createElementBlock("span", { key: 0 }, toDisplayString(tag.text), 1)) : (openBlock(), createBlock(unref(ElTooltip), {
|
|
key: 1,
|
|
disabled: popperVisible.value || !_ctx.collapseTagsTooltip,
|
|
"fallback-placements": ["bottom", "top", "right", "left"],
|
|
placement: "bottom",
|
|
effect: "light"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createElementVNode("span", null, toDisplayString(tag.text), 1)
|
|
]),
|
|
content: withCtx(() => [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(nsCascader).e("collapse-tags"))
|
|
}, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(allPresentTags.value.slice(_ctx.maxCollapseTags), (tag2, idx) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
key: idx,
|
|
class: normalizeClass(unref(nsCascader).e("collapse-tag"))
|
|
}, [
|
|
(openBlock(), createBlock(unref(ElTag), {
|
|
key: tag2.key,
|
|
class: "in-tooltip",
|
|
type: _ctx.tagType,
|
|
size: unref(tagSize),
|
|
effect: _ctx.tagEffect,
|
|
hit: tag2.hitState,
|
|
closable: tag2.closable,
|
|
"disable-transitions": "",
|
|
onClose: ($event) => deleteTag(tag2)
|
|
}, {
|
|
default: withCtx(() => [
|
|
createElementVNode("span", null, toDisplayString(tag2.text), 1)
|
|
]),
|
|
_: 2
|
|
}, 1032, ["type", "size", "effect", "hit", "closable", "onClose"]))
|
|
], 2);
|
|
}), 128))
|
|
], 2)
|
|
]),
|
|
_: 2
|
|
}, 1032, ["disabled"]))
|
|
]),
|
|
_: 2
|
|
}, 1032, ["type", "size", "effect", "hit", "closable", "onClose"]);
|
|
}), 128)),
|
|
_ctx.filterable && !unref(isDisabled) ? withDirectives((openBlock(), createElementBlock("input", {
|
|
key: 0,
|
|
"onUpdate:modelValue": ($event) => searchInputValue.value = $event,
|
|
type: "text",
|
|
class: normalizeClass(unref(nsCascader).e("search-input")),
|
|
placeholder: unref(presentText) ? "" : unref(inputPlaceholder),
|
|
onInput: (e) => handleInput(searchInputValue.value, e),
|
|
onClick: withModifiers(($event) => togglePopperVisible(true), ["stop"]),
|
|
onKeydown: withKeys(handleDelete, ["delete"]),
|
|
onCompositionstart: unref(handleComposition),
|
|
onCompositionupdate: unref(handleComposition),
|
|
onCompositionend: unref(handleComposition),
|
|
onFocus: handleFocus,
|
|
onBlur: handleBlur
|
|
}, null, 42, ["onUpdate:modelValue", "placeholder", "onInput", "onClick", "onKeydown", "onCompositionstart", "onCompositionupdate", "onCompositionend"])), [
|
|
[vModelText, searchInputValue.value]
|
|
]) : createCommentVNode("v-if", true)
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
], 46, ["onClick", "onMouseenter", "onMouseleave"])), [
|
|
[unref(ClickOutside), () => togglePopperVisible(false), unref(contentRef)]
|
|
])
|
|
]),
|
|
content: withCtx(() => [
|
|
withDirectives(createVNode(unref(ElCascaderPanel), {
|
|
ref_key: "cascaderPanelRef",
|
|
ref: cascaderPanelRef,
|
|
modelValue: unref(checkedValue),
|
|
"onUpdate:modelValue": ($event) => isRef(checkedValue) ? checkedValue.value = $event : null,
|
|
options: _ctx.options,
|
|
props: props.props,
|
|
border: false,
|
|
"render-label": _ctx.$slots.default,
|
|
onExpandChange: handleExpandChange,
|
|
onClose: ($event) => _ctx.$nextTick(() => togglePopperVisible(false))
|
|
}, {
|
|
empty: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "empty")
|
|
]),
|
|
_: 3
|
|
}, 8, ["modelValue", "onUpdate:modelValue", "options", "props", "render-label", "onClose"]), [
|
|
[vShow, !filtering.value]
|
|
]),
|
|
_ctx.filterable ? withDirectives((openBlock(), createBlock(unref(ElScrollbar), {
|
|
key: 0,
|
|
ref_key: "suggestionPanel",
|
|
ref: suggestionPanel,
|
|
tag: "ul",
|
|
class: normalizeClass(unref(nsCascader).e("suggestion-panel")),
|
|
"view-class": unref(nsCascader).e("suggestion-list"),
|
|
onKeydown: handleSuggestionKeyDown
|
|
}, {
|
|
default: withCtx(() => [
|
|
suggestions.value.length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(suggestions.value, (item) => {
|
|
return openBlock(), createElementBlock("li", {
|
|
key: item.uid,
|
|
class: normalizeClass([
|
|
unref(nsCascader).e("suggestion-item"),
|
|
unref(nsCascader).is("checked", item.checked)
|
|
]),
|
|
tabindex: -1,
|
|
onClick: ($event) => handleSuggestionClick(item)
|
|
}, [
|
|
createElementVNode("span", null, toDisplayString(item.text), 1),
|
|
item.checked ? (openBlock(), createBlock(unref(ElIcon), { key: 0 }, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(check_default))
|
|
]),
|
|
_: 1
|
|
})) : createCommentVNode("v-if", true)
|
|
], 10, ["onClick"]);
|
|
}), 128)) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
|
|
createElementVNode("li", {
|
|
class: normalizeClass(unref(nsCascader).e("empty-text"))
|
|
}, toDisplayString(unref(t)("el.cascader.noMatch")), 3)
|
|
])
|
|
]),
|
|
_: 3
|
|
}, 8, ["class", "view-class"])), [
|
|
[vShow, filtering.value]
|
|
]) : createCommentVNode("v-if", true)
|
|
]),
|
|
_: 3
|
|
}, 8, ["visible", "teleported", "popper-class", "fallback-placements", "placement", "transition", "persistent"]);
|
|
};
|
|
}
|
|
});
|
|
var Cascader = /* @__PURE__ */ _export_sfc(_sfc_main$1N, [["__file", "cascader.vue"]]);
|
|
|
|
const ElCascader = withInstall(Cascader);
|
|
|
|
const checkTagProps = buildProps({
|
|
checked: Boolean,
|
|
disabled: Boolean,
|
|
type: {
|
|
type: String,
|
|
values: ["primary", "success", "info", "warning", "danger"],
|
|
default: "primary"
|
|
}
|
|
});
|
|
const checkTagEmits = {
|
|
"update:checked": (value) => isBoolean(value),
|
|
[CHANGE_EVENT]: (value) => isBoolean(value)
|
|
};
|
|
|
|
const __default__$1e = defineComponent({
|
|
name: "ElCheckTag"
|
|
});
|
|
const _sfc_main$1M = /* @__PURE__ */ defineComponent({
|
|
...__default__$1e,
|
|
props: checkTagProps,
|
|
emits: checkTagEmits,
|
|
setup(__props, { emit }) {
|
|
const props = __props;
|
|
const ns = useNamespace("check-tag");
|
|
const isDisabled = computed(() => props.disabled);
|
|
const containerKls = computed(() => [
|
|
ns.b(),
|
|
ns.is("checked", props.checked),
|
|
ns.is("disabled", isDisabled.value),
|
|
ns.m(props.type || "primary")
|
|
]);
|
|
const handleChange = () => {
|
|
if (isDisabled.value)
|
|
return;
|
|
const checked = !props.checked;
|
|
emit(CHANGE_EVENT, checked);
|
|
emit("update:checked", checked);
|
|
};
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("span", {
|
|
class: normalizeClass(unref(containerKls)),
|
|
onClick: handleChange
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var CheckTag = /* @__PURE__ */ _export_sfc(_sfc_main$1M, [["__file", "check-tag.vue"]]);
|
|
|
|
const ElCheckTag = withInstall(CheckTag);
|
|
|
|
const rowContextKey = Symbol("rowContextKey");
|
|
|
|
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
|
|
}
|
|
});
|
|
|
|
const __default__$1d = defineComponent({
|
|
name: "ElRow"
|
|
});
|
|
const _sfc_main$1L = /* @__PURE__ */ defineComponent({
|
|
...__default__$1d,
|
|
props: rowProps,
|
|
setup(__props) {
|
|
const props = __props;
|
|
const ns = useNamespace("row");
|
|
const gutter = computed(() => props.gutter);
|
|
provide(rowContextKey, {
|
|
gutter
|
|
});
|
|
const style = computed(() => {
|
|
const styles = {};
|
|
if (!props.gutter) {
|
|
return styles;
|
|
}
|
|
styles.marginRight = styles.marginLeft = `-${props.gutter / 2}px`;
|
|
return styles;
|
|
});
|
|
const rowKls = computed(() => [
|
|
ns.b(),
|
|
ns.is(`justify-${props.justify}`, props.justify !== "start"),
|
|
ns.is(`align-${props.align}`, !!props.align)
|
|
]);
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
|
|
class: normalizeClass(unref(rowKls)),
|
|
style: normalizeStyle(unref(style))
|
|
}, {
|
|
default: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "default")
|
|
]),
|
|
_: 3
|
|
}, 8, ["class", "style"]);
|
|
};
|
|
}
|
|
});
|
|
var Row$1 = /* @__PURE__ */ _export_sfc(_sfc_main$1L, [["__file", "row.vue"]]);
|
|
|
|
const ElRow = withInstall(Row$1);
|
|
|
|
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__$1c = defineComponent({
|
|
name: "ElCol"
|
|
});
|
|
const _sfc_main$1K = /* @__PURE__ */ defineComponent({
|
|
...__default__$1c,
|
|
props: colProps,
|
|
setup(__props) {
|
|
const props = __props;
|
|
const { gutter } = inject(rowContextKey, { gutter: computed(() => 0) });
|
|
const ns = useNamespace("col");
|
|
const style = computed(() => {
|
|
const styles = {};
|
|
if (gutter.value) {
|
|
styles.paddingLeft = styles.paddingRight = `${gutter.value / 2}px`;
|
|
}
|
|
return styles;
|
|
});
|
|
const colKls = computed(() => {
|
|
const classes = [];
|
|
const pos = ["span", "offset", "pull", "push"];
|
|
pos.forEach((prop) => {
|
|
const size = props[prop];
|
|
if (isNumber(size)) {
|
|
if (prop === "span")
|
|
classes.push(ns.b(`${props[prop]}`));
|
|
else if (size > 0)
|
|
classes.push(ns.b(`${prop}-${props[prop]}`));
|
|
}
|
|
});
|
|
const sizes = ["xs", "sm", "md", "lg", "xl"];
|
|
sizes.forEach((size) => {
|
|
if (isNumber(props[size])) {
|
|
classes.push(ns.b(`${size}-${props[size]}`));
|
|
} else if (isObject$1(props[size])) {
|
|
Object.entries(props[size]).forEach(([prop, sizeProp]) => {
|
|
classes.push(prop !== "span" ? ns.b(`${size}-${prop}-${sizeProp}`) : ns.b(`${size}-${sizeProp}`));
|
|
});
|
|
}
|
|
});
|
|
if (gutter.value) {
|
|
classes.push(ns.is("guttered"));
|
|
}
|
|
return [ns.b(), classes];
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
|
|
class: normalizeClass(unref(colKls)),
|
|
style: normalizeStyle(unref(style))
|
|
}, {
|
|
default: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "default")
|
|
]),
|
|
_: 3
|
|
}, 8, ["class", "style"]);
|
|
};
|
|
}
|
|
});
|
|
var Col = /* @__PURE__ */ _export_sfc(_sfc_main$1K, [["__file", "col.vue"]]);
|
|
|
|
const ElCol = withInstall(Col);
|
|
|
|
const emitChangeFn = (value) => isNumber(value) || isString$1(value) || isArray$1(value);
|
|
const collapseProps = buildProps({
|
|
accordion: Boolean,
|
|
modelValue: {
|
|
type: definePropType([Array, String, Number]),
|
|
default: () => mutable([])
|
|
}
|
|
});
|
|
const collapseEmits = {
|
|
[UPDATE_MODEL_EVENT]: emitChangeFn,
|
|
[CHANGE_EVENT]: emitChangeFn
|
|
};
|
|
|
|
const collapseContextKey = Symbol("collapseContextKey");
|
|
|
|
const useCollapse = (props, emit) => {
|
|
const activeNames = 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);
|
|
}
|
|
};
|
|
watch(() => props.modelValue, () => activeNames.value = castArray$1(props.modelValue), { deep: true });
|
|
provide(collapseContextKey, {
|
|
activeNames,
|
|
handleItemClick
|
|
});
|
|
return {
|
|
activeNames,
|
|
setActiveNames
|
|
};
|
|
};
|
|
const useCollapseDOM = () => {
|
|
const ns = useNamespace("collapse");
|
|
const rootKls = computed(() => ns.b());
|
|
return {
|
|
rootKls
|
|
};
|
|
};
|
|
|
|
const __default__$1b = defineComponent({
|
|
name: "ElCollapse"
|
|
});
|
|
const _sfc_main$1J = /* @__PURE__ */ defineComponent({
|
|
...__default__$1b,
|
|
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 openBlock(), createElementBlock("div", {
|
|
class: normalizeClass(unref(rootKls))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var Collapse = /* @__PURE__ */ _export_sfc(_sfc_main$1J, [["__file", "collapse.vue"]]);
|
|
|
|
const __default__$1a = defineComponent({
|
|
name: "ElCollapseTransition"
|
|
});
|
|
const _sfc_main$1I = /* @__PURE__ */ defineComponent({
|
|
...__default__$1a,
|
|
setup(__props) {
|
|
const ns = useNamespace("collapse-transition");
|
|
const reset = (el) => {
|
|
el.style.maxHeight = "";
|
|
el.style.overflow = el.dataset.oldOverflow;
|
|
el.style.paddingTop = el.dataset.oldPaddingTop;
|
|
el.style.paddingBottom = el.dataset.oldPaddingBottom;
|
|
};
|
|
const on = {
|
|
beforeEnter(el) {
|
|
if (!el.dataset)
|
|
el.dataset = {};
|
|
el.dataset.oldPaddingTop = el.style.paddingTop;
|
|
el.dataset.oldPaddingBottom = el.style.paddingBottom;
|
|
if (el.style.height)
|
|
el.dataset.elExistsHeight = el.style.height;
|
|
el.style.maxHeight = 0;
|
|
el.style.paddingTop = 0;
|
|
el.style.paddingBottom = 0;
|
|
},
|
|
enter(el) {
|
|
requestAnimationFrame(() => {
|
|
el.dataset.oldOverflow = el.style.overflow;
|
|
if (el.dataset.elExistsHeight) {
|
|
el.style.maxHeight = el.dataset.elExistsHeight;
|
|
} else if (el.scrollHeight !== 0) {
|
|
el.style.maxHeight = `${el.scrollHeight}px`;
|
|
} 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;
|
|
},
|
|
enterCancelled(el) {
|
|
reset(el);
|
|
},
|
|
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) {
|
|
reset(el);
|
|
},
|
|
leaveCancelled(el) {
|
|
reset(el);
|
|
}
|
|
};
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createBlock(Transition, mergeProps({
|
|
name: unref(ns).b()
|
|
}, toHandlers(on)), {
|
|
default: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "default")
|
|
]),
|
|
_: 3
|
|
}, 16, ["name"]);
|
|
};
|
|
}
|
|
});
|
|
var CollapseTransition = /* @__PURE__ */ _export_sfc(_sfc_main$1I, [["__file", "collapse-transition.vue"]]);
|
|
|
|
const ElCollapseTransition = withInstall(CollapseTransition);
|
|
|
|
const collapseItemProps = buildProps({
|
|
title: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
name: {
|
|
type: definePropType([String, Number]),
|
|
default: void 0
|
|
},
|
|
icon: {
|
|
type: iconPropType,
|
|
default: arrow_right_default
|
|
},
|
|
disabled: Boolean
|
|
});
|
|
|
|
const useCollapseItem = (props) => {
|
|
const collapse = inject(collapseContextKey);
|
|
const { namespace } = useNamespace("collapse");
|
|
const focusing = ref(false);
|
|
const isClick = ref(false);
|
|
const idInjection = useIdInjection();
|
|
const id = computed(() => idInjection.current++);
|
|
const name = computed(() => {
|
|
var _a;
|
|
return (_a = props.name) != null ? _a : `${namespace.value}-id-${idInjection.prefix}-${unref(id)}`;
|
|
});
|
|
const isActive = computed(() => collapse == null ? void 0 : collapse.activeNames.value.includes(unref(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(unref(name));
|
|
focusing.value = false;
|
|
isClick.value = true;
|
|
};
|
|
const handleEnterClick = () => {
|
|
collapse == null ? void 0 : collapse.handleItemClick(unref(name));
|
|
};
|
|
return {
|
|
focusing,
|
|
id,
|
|
isActive,
|
|
handleFocus,
|
|
handleHeaderClick,
|
|
handleEnterClick
|
|
};
|
|
};
|
|
const useCollapseItemDOM = (props, { focusing, isActive, id }) => {
|
|
const ns = useNamespace("collapse");
|
|
const rootKls = computed(() => [
|
|
ns.b("item"),
|
|
ns.is("active", unref(isActive)),
|
|
ns.is("disabled", props.disabled)
|
|
]);
|
|
const headKls = computed(() => [
|
|
ns.be("item", "header"),
|
|
ns.is("active", unref(isActive)),
|
|
{ focusing: unref(focusing) && !props.disabled }
|
|
]);
|
|
const arrowKls = computed(() => [
|
|
ns.be("item", "arrow"),
|
|
ns.is("active", unref(isActive))
|
|
]);
|
|
const itemWrapperKls = computed(() => ns.be("item", "wrap"));
|
|
const itemContentKls = computed(() => ns.be("item", "content"));
|
|
const scopedContentId = computed(() => ns.b(`content-${unref(id)}`));
|
|
const scopedHeadId = computed(() => ns.b(`head-${unref(id)}`));
|
|
return {
|
|
arrowKls,
|
|
headKls,
|
|
rootKls,
|
|
itemWrapperKls,
|
|
itemContentKls,
|
|
scopedContentId,
|
|
scopedHeadId
|
|
};
|
|
};
|
|
|
|
const __default__$19 = defineComponent({
|
|
name: "ElCollapseItem"
|
|
});
|
|
const _sfc_main$1H = /* @__PURE__ */ defineComponent({
|
|
...__default__$19,
|
|
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 openBlock(), createElementBlock("div", {
|
|
class: normalizeClass(unref(rootKls))
|
|
}, [
|
|
createElementVNode("button", {
|
|
id: unref(scopedHeadId),
|
|
class: normalizeClass(unref(headKls)),
|
|
"aria-expanded": unref(isActive),
|
|
"aria-controls": unref(scopedContentId),
|
|
"aria-describedby": unref(scopedContentId),
|
|
tabindex: _ctx.disabled ? -1 : 0,
|
|
type: "button",
|
|
onClick: unref(handleHeaderClick),
|
|
onKeydown: withKeys(withModifiers(unref(handleEnterClick), ["stop", "prevent"]), ["space", "enter"]),
|
|
onFocus: unref(handleFocus),
|
|
onBlur: ($event) => focusing.value = false
|
|
}, [
|
|
renderSlot(_ctx.$slots, "title", {}, () => [
|
|
createTextVNode(toDisplayString(_ctx.title), 1)
|
|
]),
|
|
renderSlot(_ctx.$slots, "icon", { isActive: unref(isActive) }, () => [
|
|
createVNode(unref(ElIcon), {
|
|
class: normalizeClass(unref(arrowKls))
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.icon)))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])
|
|
])
|
|
], 42, ["id", "aria-expanded", "aria-controls", "aria-describedby", "tabindex", "onClick", "onKeydown", "onFocus", "onBlur"]),
|
|
createVNode(unref(ElCollapseTransition), null, {
|
|
default: withCtx(() => [
|
|
withDirectives(createElementVNode("div", {
|
|
id: unref(scopedContentId),
|
|
role: "region",
|
|
class: normalizeClass(unref(itemWrapperKls)),
|
|
"aria-hidden": !unref(isActive),
|
|
"aria-labelledby": unref(scopedHeadId)
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(itemContentKls))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 2)
|
|
], 10, ["id", "aria-hidden", "aria-labelledby"]), [
|
|
[vShow, unref(isActive)]
|
|
])
|
|
]),
|
|
_: 3
|
|
})
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var CollapseItem = /* @__PURE__ */ _export_sfc(_sfc_main$1H, [["__file", "collapse-item.vue"]]);
|
|
|
|
const ElCollapse = withInstall(Collapse, {
|
|
CollapseItem
|
|
});
|
|
const ElCollapseItem = withNoopInstall(CollapseItem);
|
|
|
|
const alphaSliderProps = buildProps({
|
|
color: {
|
|
type: definePropType(Object),
|
|
required: true
|
|
},
|
|
vertical: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
});
|
|
|
|
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, { passive: false });
|
|
}
|
|
|
|
const useAlphaSlider = (props) => {
|
|
const instance = getCurrentInstance();
|
|
const { t } = useLocale();
|
|
const thumb = shallowRef();
|
|
const bar = shallowRef();
|
|
const alpha = computed(() => props.color.get("alpha"));
|
|
const alphaLabel = computed(() => t("el.colorpicker.alphaLabel"));
|
|
function handleClick(event) {
|
|
var _a;
|
|
const target = event.target;
|
|
if (target !== thumb.value) {
|
|
handleDrag(event);
|
|
}
|
|
(_a = thumb.value) == null ? void 0 : _a.focus();
|
|
}
|
|
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 handleKeydown(event) {
|
|
const { code, shiftKey } = event;
|
|
const step = shiftKey ? 10 : 1;
|
|
switch (code) {
|
|
case EVENT_CODE.left:
|
|
case EVENT_CODE.down:
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
incrementPosition(-step);
|
|
break;
|
|
case EVENT_CODE.right:
|
|
case EVENT_CODE.up:
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
incrementPosition(step);
|
|
break;
|
|
}
|
|
}
|
|
function incrementPosition(step) {
|
|
let next = alpha.value + step;
|
|
next = next < 0 ? 0 : next > 100 ? 100 : next;
|
|
props.color.set("alpha", next);
|
|
}
|
|
return {
|
|
thumb,
|
|
bar,
|
|
alpha,
|
|
alphaLabel,
|
|
handleDrag,
|
|
handleClick,
|
|
handleKeydown
|
|
};
|
|
};
|
|
const useAlphaSliderDOM = (props, {
|
|
bar,
|
|
thumb,
|
|
handleDrag
|
|
}) => {
|
|
const instance = getCurrentInstance();
|
|
const ns = useNamespace("color-alpha-slider");
|
|
const thumbLeft = ref(0);
|
|
const thumbTop = ref(0);
|
|
const background = ref();
|
|
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 update() {
|
|
thumbLeft.value = getThumbLeft();
|
|
thumbTop.value = getThumbTop();
|
|
background.value = getBackground();
|
|
}
|
|
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();
|
|
});
|
|
watch(() => props.color.get("alpha"), () => update());
|
|
watch(() => props.color.value, () => update());
|
|
const rootKls = computed(() => [ns.b(), ns.is("vertical", props.vertical)]);
|
|
const barKls = computed(() => ns.e("bar"));
|
|
const thumbKls = computed(() => ns.e("thumb"));
|
|
const barStyle = computed(() => ({ background: background.value }));
|
|
const thumbStyle = computed(() => ({
|
|
left: addUnit(thumbLeft.value),
|
|
top: addUnit(thumbTop.value)
|
|
}));
|
|
return { rootKls, barKls, barStyle, thumbKls, thumbStyle, update };
|
|
};
|
|
|
|
const COMPONENT_NAME$d = "ElColorAlphaSlider";
|
|
const __default__$18 = defineComponent({
|
|
name: COMPONENT_NAME$d
|
|
});
|
|
const _sfc_main$1G = /* @__PURE__ */ defineComponent({
|
|
...__default__$18,
|
|
props: alphaSliderProps,
|
|
setup(__props, { expose }) {
|
|
const props = __props;
|
|
const {
|
|
alpha,
|
|
alphaLabel,
|
|
bar,
|
|
thumb,
|
|
handleDrag,
|
|
handleClick,
|
|
handleKeydown
|
|
} = useAlphaSlider(props);
|
|
const { rootKls, barKls, barStyle, thumbKls, thumbStyle, update } = useAlphaSliderDOM(props, {
|
|
bar,
|
|
thumb,
|
|
handleDrag
|
|
});
|
|
expose({
|
|
update,
|
|
bar,
|
|
thumb
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass(unref(rootKls))
|
|
}, [
|
|
createElementVNode("div", {
|
|
ref_key: "bar",
|
|
ref: bar,
|
|
class: normalizeClass(unref(barKls)),
|
|
style: normalizeStyle(unref(barStyle)),
|
|
onClick: unref(handleClick)
|
|
}, null, 14, ["onClick"]),
|
|
createElementVNode("div", {
|
|
ref_key: "thumb",
|
|
ref: thumb,
|
|
class: normalizeClass(unref(thumbKls)),
|
|
style: normalizeStyle(unref(thumbStyle)),
|
|
"aria-label": unref(alphaLabel),
|
|
"aria-valuenow": unref(alpha),
|
|
"aria-orientation": _ctx.vertical ? "vertical" : "horizontal",
|
|
"aria-valuemin": "0",
|
|
"aria-valuemax": "100",
|
|
role: "slider",
|
|
tabindex: "0",
|
|
onKeydown: unref(handleKeydown)
|
|
}, null, 46, ["aria-label", "aria-valuenow", "aria-orientation", "onKeydown"])
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var AlphaSlider = /* @__PURE__ */ _export_sfc(_sfc_main$1G, [["__file", "alpha-slider.vue"]]);
|
|
|
|
const _sfc_main$1F = defineComponent({
|
|
name: "ElColorHueSlider",
|
|
props: {
|
|
color: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
vertical: Boolean
|
|
},
|
|
setup(props) {
|
|
const ns = useNamespace("color-hue-slider");
|
|
const instance = getCurrentInstance();
|
|
const thumb = ref();
|
|
const bar = ref();
|
|
const thumbLeft = ref(0);
|
|
const thumbTop = ref(0);
|
|
const hueValue = computed(() => {
|
|
return props.color.get("hue");
|
|
});
|
|
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();
|
|
}
|
|
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$q(_ctx, _cache, $props, $setup, $data, $options) {
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass([_ctx.ns.b(), _ctx.ns.is("vertical", _ctx.vertical)])
|
|
}, [
|
|
createElementVNode("div", {
|
|
ref: "bar",
|
|
class: normalizeClass(_ctx.ns.e("bar")),
|
|
onClick: _ctx.handleClick
|
|
}, null, 10, ["onClick"]),
|
|
createElementVNode("div", {
|
|
ref: "thumb",
|
|
class: normalizeClass(_ctx.ns.e("thumb")),
|
|
style: normalizeStyle({
|
|
left: _ctx.thumbLeft + "px",
|
|
top: _ctx.thumbTop + "px"
|
|
})
|
|
}, null, 6)
|
|
], 2);
|
|
}
|
|
var HueSlider = /* @__PURE__ */ _export_sfc(_sfc_main$1F, [["render", _sfc_render$q], ["__file", "hue-slider.vue"]]);
|
|
|
|
const colorPickerProps = buildProps({
|
|
modelValue: String,
|
|
id: String,
|
|
showAlpha: Boolean,
|
|
colorFormat: String,
|
|
disabled: Boolean,
|
|
size: useSizeProp,
|
|
popperClass: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
tabindex: {
|
|
type: [String, Number],
|
|
default: 0
|
|
},
|
|
teleported: useTooltipContentProps.teleported,
|
|
predefine: {
|
|
type: definePropType(Array)
|
|
},
|
|
validateEvent: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
...useAriaProps(["ariaLabel"])
|
|
});
|
|
const colorPickerEmits = {
|
|
[UPDATE_MODEL_EVENT]: (val) => isString$1(val) || isNil(val),
|
|
[CHANGE_EVENT]: (val) => isString$1(val) || isNil(val),
|
|
activeChange: (val) => isString$1(val) || isNil(val),
|
|
focus: (evt) => evt instanceof FocusEvent,
|
|
blur: (evt) => evt instanceof FocusEvent
|
|
};
|
|
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$1E = defineComponent({
|
|
props: {
|
|
colors: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
color: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
enableAlpha: {
|
|
type: Boolean,
|
|
required: true
|
|
}
|
|
},
|
|
setup(props) {
|
|
const ns = useNamespace("color-predefine");
|
|
const { currentColor } = inject(colorPickerContextKey);
|
|
const rgbaColors = ref(parseColors(props.colors, props.color));
|
|
watch(() => currentColor.value, (val) => {
|
|
const color = new Color();
|
|
color.fromString(val);
|
|
rgbaColors.value.forEach((item) => {
|
|
item.selected = color.compare(item);
|
|
});
|
|
});
|
|
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 = props.enableAlpha;
|
|
c.format = "rgba";
|
|
c.fromString(value);
|
|
c.selected = c.value === color.value;
|
|
return c;
|
|
});
|
|
}
|
|
return {
|
|
rgbaColors,
|
|
handleSelect,
|
|
ns
|
|
};
|
|
}
|
|
});
|
|
function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass(_ctx.ns.b())
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(_ctx.ns.e("colors"))
|
|
}, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.rgbaColors, (item, index) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
key: _ctx.colors[index],
|
|
class: normalizeClass([
|
|
_ctx.ns.e("color-selector"),
|
|
_ctx.ns.is("alpha", item._alpha < 100),
|
|
{ selected: item.selected }
|
|
]),
|
|
onClick: ($event) => _ctx.handleSelect(index)
|
|
}, [
|
|
createElementVNode("div", {
|
|
style: normalizeStyle({ backgroundColor: item.value })
|
|
}, null, 4)
|
|
], 10, ["onClick"]);
|
|
}), 128))
|
|
], 2)
|
|
], 2);
|
|
}
|
|
var Predefine = /* @__PURE__ */ _export_sfc(_sfc_main$1E, [["render", _sfc_render$p], ["__file", "predefine.vue"]]);
|
|
|
|
const _sfc_main$1D = defineComponent({
|
|
name: "ElSlPanel",
|
|
props: {
|
|
color: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
setup(props) {
|
|
const ns = useNamespace("color-svpanel");
|
|
const instance = getCurrentInstance();
|
|
const cursorTop = ref(0);
|
|
const cursorLeft = ref(0);
|
|
const background = ref("hsl(0, 100%, 50%)");
|
|
const colorValue = 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
|
|
});
|
|
}
|
|
watch(() => colorValue.value, () => {
|
|
update();
|
|
});
|
|
onMounted(() => {
|
|
draggable(instance.vnode.el, {
|
|
drag: (event) => {
|
|
handleDrag(event);
|
|
},
|
|
end: (event) => {
|
|
handleDrag(event);
|
|
}
|
|
});
|
|
update();
|
|
});
|
|
return {
|
|
cursorTop,
|
|
cursorLeft,
|
|
background,
|
|
colorValue,
|
|
handleDrag,
|
|
update,
|
|
ns
|
|
};
|
|
}
|
|
});
|
|
function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass(_ctx.ns.b()),
|
|
style: normalizeStyle({
|
|
backgroundColor: _ctx.background
|
|
})
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(_ctx.ns.e("white"))
|
|
}, null, 2),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(_ctx.ns.e("black"))
|
|
}, null, 2),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(_ctx.ns.e("cursor")),
|
|
style: normalizeStyle({
|
|
top: _ctx.cursorTop + "px",
|
|
left: _ctx.cursorLeft + "px"
|
|
})
|
|
}, [
|
|
createElementVNode("div")
|
|
], 6)
|
|
], 6);
|
|
}
|
|
var SvPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1D, [["render", _sfc_render$o], ["__file", "sv-panel.vue"]]);
|
|
|
|
const __default__$17 = defineComponent({
|
|
name: "ElColorPicker"
|
|
});
|
|
const _sfc_main$1C = /* @__PURE__ */ defineComponent({
|
|
...__default__$17,
|
|
props: colorPickerProps,
|
|
emits: colorPickerEmits,
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const { t } = useLocale();
|
|
const ns = useNamespace("color");
|
|
const { formItem } = useFormItem();
|
|
const colorSize = useFormSize();
|
|
const colorDisabled = useFormDisabled();
|
|
const { inputId: buttonId, isLabeledByFormItem } = useFormItemInputId(props, {
|
|
formItemContext: formItem
|
|
});
|
|
const hue = ref();
|
|
const sv = ref();
|
|
const alpha = ref();
|
|
const popper = ref();
|
|
const triggerRef = ref();
|
|
const inputRef = ref();
|
|
const { isFocused, handleFocus, handleBlur } = useFocusController(triggerRef, {
|
|
beforeFocus() {
|
|
return colorDisabled.value;
|
|
},
|
|
beforeBlur(event) {
|
|
var _a;
|
|
return (_a = popper.value) == null ? void 0 : _a.isFocusInsideContent(event);
|
|
},
|
|
afterBlur() {
|
|
setShowPicker(false);
|
|
resetColor();
|
|
}
|
|
});
|
|
let shouldActiveChange = true;
|
|
const color = reactive(new Color({
|
|
enableAlpha: props.showAlpha,
|
|
format: props.colorFormat || "",
|
|
value: props.modelValue
|
|
}));
|
|
const showPicker = ref(false);
|
|
const showPanelColor = ref(false);
|
|
const customInput = ref("");
|
|
const displayedColor = computed(() => {
|
|
if (!props.modelValue && !showPanelColor.value) {
|
|
return "transparent";
|
|
}
|
|
return displayedRgb(color, props.showAlpha);
|
|
});
|
|
const currentColor = computed(() => {
|
|
return !props.modelValue && !showPanelColor.value ? "" : color.value;
|
|
});
|
|
const buttonAriaLabel = computed(() => {
|
|
return !isLabeledByFormItem.value ? props.ariaLabel || t("el.colorpicker.defaultLabel") : void 0;
|
|
});
|
|
const buttonAriaLabelledby = computed(() => {
|
|
return isLabeledByFormItem.value ? formItem == null ? void 0 : formItem.labelId : void 0;
|
|
});
|
|
const btnKls = computed(() => {
|
|
return [
|
|
ns.b("picker"),
|
|
ns.is("disabled", colorDisabled.value),
|
|
ns.bm("picker", colorSize.value),
|
|
ns.is("focused", isFocused.value)
|
|
];
|
|
});
|
|
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, { leading: true });
|
|
function show() {
|
|
if (colorDisabled.value)
|
|
return;
|
|
setShowPicker(true);
|
|
}
|
|
function hide() {
|
|
debounceSetShowPicker(false);
|
|
resetColor();
|
|
}
|
|
function resetColor() {
|
|
nextTick(() => {
|
|
if (props.modelValue) {
|
|
color.fromString(props.modelValue);
|
|
} else {
|
|
color.value = "";
|
|
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);
|
|
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();
|
|
}
|
|
function handleClickOutside() {
|
|
if (!showPicker.value)
|
|
return;
|
|
hide();
|
|
isFocused.value && focus();
|
|
}
|
|
function handleEsc(event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
setShowPicker(false);
|
|
resetColor();
|
|
}
|
|
function handleKeyDown(event) {
|
|
switch (event.code) {
|
|
case EVENT_CODE.enter:
|
|
case EVENT_CODE.space:
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
show();
|
|
inputRef.value.focus();
|
|
break;
|
|
case EVENT_CODE.esc:
|
|
handleEsc(event);
|
|
break;
|
|
}
|
|
}
|
|
function focus() {
|
|
triggerRef.value.focus();
|
|
}
|
|
function blur() {
|
|
triggerRef.value.blur();
|
|
}
|
|
onMounted(() => {
|
|
if (props.modelValue) {
|
|
customInput.value = currentColor.value;
|
|
}
|
|
});
|
|
watch(() => props.modelValue, (newVal) => {
|
|
if (!newVal) {
|
|
showPanelColor.value = false;
|
|
} else if (newVal && newVal !== color.value) {
|
|
shouldActiveChange = false;
|
|
color.fromString(newVal);
|
|
}
|
|
});
|
|
watch(() => [props.colorFormat, props.showAlpha], () => {
|
|
color.enableAlpha = props.showAlpha;
|
|
color.format = props.colorFormat || color.format;
|
|
color.doOnChange();
|
|
emit(UPDATE_MODEL_EVENT, color.value);
|
|
});
|
|
watch(() => currentColor.value, (val) => {
|
|
customInput.value = val;
|
|
shouldActiveChange && emit("activeChange", val);
|
|
shouldActiveChange = true;
|
|
});
|
|
watch(() => color.value, () => {
|
|
if (!props.modelValue && !showPanelColor.value) {
|
|
showPanelColor.value = true;
|
|
}
|
|
});
|
|
watch(() => showPicker.value, () => {
|
|
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();
|
|
});
|
|
});
|
|
provide(colorPickerContextKey, {
|
|
currentColor
|
|
});
|
|
expose({
|
|
color,
|
|
show,
|
|
hide,
|
|
focus,
|
|
blur
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createBlock(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": [unref(ns).be("picker", "panel"), unref(ns).b("dropdown"), _ctx.popperClass],
|
|
"stop-popper-mouse-event": false,
|
|
effect: "light",
|
|
trigger: "click",
|
|
teleported: _ctx.teleported,
|
|
transition: `${unref(ns).namespace.value}-zoom-in-top`,
|
|
persistent: "",
|
|
onHide: ($event) => setShowPicker(false)
|
|
}, {
|
|
content: withCtx(() => [
|
|
withDirectives((openBlock(), createElementBlock("div", {
|
|
onKeydown: withKeys(handleEsc, ["esc"])
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).be("dropdown", "main-wrapper"))
|
|
}, [
|
|
createVNode(HueSlider, {
|
|
ref_key: "hue",
|
|
ref: hue,
|
|
class: "hue-slider",
|
|
color: unref(color),
|
|
vertical: ""
|
|
}, null, 8, ["color"]),
|
|
createVNode(SvPanel, {
|
|
ref_key: "sv",
|
|
ref: sv,
|
|
color: unref(color)
|
|
}, null, 8, ["color"])
|
|
], 2),
|
|
_ctx.showAlpha ? (openBlock(), createBlock(AlphaSlider, {
|
|
key: 0,
|
|
ref_key: "alpha",
|
|
ref: alpha,
|
|
color: unref(color)
|
|
}, null, 8, ["color"])) : createCommentVNode("v-if", true),
|
|
_ctx.predefine ? (openBlock(), createBlock(Predefine, {
|
|
key: 1,
|
|
ref: "predefine",
|
|
"enable-alpha": _ctx.showAlpha,
|
|
color: unref(color),
|
|
colors: _ctx.predefine
|
|
}, null, 8, ["enable-alpha", "color", "colors"])) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).be("dropdown", "btns"))
|
|
}, [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(ns).be("dropdown", "value"))
|
|
}, [
|
|
createVNode(unref(ElInput), {
|
|
ref_key: "inputRef",
|
|
ref: inputRef,
|
|
modelValue: customInput.value,
|
|
"onUpdate:modelValue": ($event) => customInput.value = $event,
|
|
"validate-event": false,
|
|
size: "small",
|
|
onKeyup: withKeys(handleConfirm, ["enter"]),
|
|
onBlur: handleConfirm
|
|
}, null, 8, ["modelValue", "onUpdate:modelValue", "onKeyup"])
|
|
], 2),
|
|
createVNode(unref(ElButton), {
|
|
class: normalizeClass(unref(ns).be("dropdown", "link-btn")),
|
|
text: "",
|
|
size: "small",
|
|
onClick: clear
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(t)("el.colorpicker.clear")), 1)
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"]),
|
|
createVNode(unref(ElButton), {
|
|
plain: "",
|
|
size: "small",
|
|
class: normalizeClass(unref(ns).be("dropdown", "btn")),
|
|
onClick: confirmValue
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(t)("el.colorpicker.confirm")), 1)
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])
|
|
], 2)
|
|
], 40, ["onKeydown"])), [
|
|
[unref(ClickOutside), handleClickOutside]
|
|
])
|
|
]),
|
|
default: withCtx(() => [
|
|
createElementVNode("div", mergeProps({
|
|
id: unref(buttonId),
|
|
ref_key: "triggerRef",
|
|
ref: triggerRef
|
|
}, _ctx.$attrs, {
|
|
class: unref(btnKls),
|
|
role: "button",
|
|
"aria-label": unref(buttonAriaLabel),
|
|
"aria-labelledby": unref(buttonAriaLabelledby),
|
|
"aria-description": unref(t)("el.colorpicker.description", { color: _ctx.modelValue || "" }),
|
|
"aria-disabled": unref(colorDisabled),
|
|
tabindex: unref(colorDisabled) ? -1 : _ctx.tabindex,
|
|
onKeydown: handleKeyDown,
|
|
onFocus: unref(handleFocus),
|
|
onBlur: unref(handleBlur)
|
|
}), [
|
|
unref(colorDisabled) ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).be("picker", "mask"))
|
|
}, null, 2)) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).be("picker", "trigger")),
|
|
onClick: handleTrigger
|
|
}, [
|
|
createElementVNode("span", {
|
|
class: normalizeClass([unref(ns).be("picker", "color"), unref(ns).is("alpha", _ctx.showAlpha)])
|
|
}, [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(ns).be("picker", "color-inner")),
|
|
style: normalizeStyle({
|
|
backgroundColor: unref(displayedColor)
|
|
})
|
|
}, [
|
|
withDirectives(createVNode(unref(ElIcon), {
|
|
class: normalizeClass([unref(ns).be("picker", "icon"), unref(ns).is("icon-arrow-down")])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(arrow_down_default))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"]), [
|
|
[vShow, _ctx.modelValue || showPanelColor.value]
|
|
]),
|
|
withDirectives(createVNode(unref(ElIcon), {
|
|
class: normalizeClass([unref(ns).be("picker", "empty"), unref(ns).is("icon-close")])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(close_default))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"]), [
|
|
[vShow, !_ctx.modelValue && !showPanelColor.value]
|
|
])
|
|
], 6)
|
|
], 2)
|
|
], 2)
|
|
], 16, ["id", "aria-label", "aria-labelledby", "aria-description", "aria-disabled", "tabindex", "onFocus", "onBlur"])
|
|
]),
|
|
_: 1
|
|
}, 8, ["visible", "popper-class", "teleported", "transition", "onHide"]);
|
|
};
|
|
}
|
|
});
|
|
var ColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$1C, [["__file", "color-picker.vue"]]);
|
|
|
|
const ElColorPicker = withInstall(ColorPicker);
|
|
|
|
const __default__$16 = defineComponent({
|
|
name: "ElContainer"
|
|
});
|
|
const _sfc_main$1B = /* @__PURE__ */ defineComponent({
|
|
...__default__$16,
|
|
props: {
|
|
direction: {
|
|
type: String
|
|
}
|
|
},
|
|
setup(__props) {
|
|
const props = __props;
|
|
const slots = useSlots();
|
|
const ns = useNamespace("container");
|
|
const isVertical = 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 openBlock(), createElementBlock("section", {
|
|
class: normalizeClass([unref(ns).b(), unref(ns).is("vertical", unref(isVertical))])
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var Container = /* @__PURE__ */ _export_sfc(_sfc_main$1B, [["__file", "container.vue"]]);
|
|
|
|
const __default__$15 = defineComponent({
|
|
name: "ElAside"
|
|
});
|
|
const _sfc_main$1A = /* @__PURE__ */ defineComponent({
|
|
...__default__$15,
|
|
props: {
|
|
width: {
|
|
type: String,
|
|
default: null
|
|
}
|
|
},
|
|
setup(__props) {
|
|
const props = __props;
|
|
const ns = useNamespace("aside");
|
|
const style = computed(() => props.width ? ns.cssVarBlock({ width: props.width }) : {});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("aside", {
|
|
class: normalizeClass(unref(ns).b()),
|
|
style: normalizeStyle(unref(style))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 6);
|
|
};
|
|
}
|
|
});
|
|
var Aside = /* @__PURE__ */ _export_sfc(_sfc_main$1A, [["__file", "aside.vue"]]);
|
|
|
|
const __default__$14 = defineComponent({
|
|
name: "ElFooter"
|
|
});
|
|
const _sfc_main$1z = /* @__PURE__ */ defineComponent({
|
|
...__default__$14,
|
|
props: {
|
|
height: {
|
|
type: String,
|
|
default: null
|
|
}
|
|
},
|
|
setup(__props) {
|
|
const props = __props;
|
|
const ns = useNamespace("footer");
|
|
const style = computed(() => props.height ? ns.cssVarBlock({ height: props.height }) : {});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("footer", {
|
|
class: normalizeClass(unref(ns).b()),
|
|
style: normalizeStyle(unref(style))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 6);
|
|
};
|
|
}
|
|
});
|
|
var Footer$2 = /* @__PURE__ */ _export_sfc(_sfc_main$1z, [["__file", "footer.vue"]]);
|
|
|
|
const __default__$13 = defineComponent({
|
|
name: "ElHeader"
|
|
});
|
|
const _sfc_main$1y = /* @__PURE__ */ defineComponent({
|
|
...__default__$13,
|
|
props: {
|
|
height: {
|
|
type: String,
|
|
default: null
|
|
}
|
|
},
|
|
setup(__props) {
|
|
const props = __props;
|
|
const ns = useNamespace("header");
|
|
const style = computed(() => {
|
|
return props.height ? ns.cssVarBlock({
|
|
height: props.height
|
|
}) : {};
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("header", {
|
|
class: normalizeClass(unref(ns).b()),
|
|
style: normalizeStyle(unref(style))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 6);
|
|
};
|
|
}
|
|
});
|
|
var Header$1 = /* @__PURE__ */ _export_sfc(_sfc_main$1y, [["__file", "header.vue"]]);
|
|
|
|
const __default__$12 = defineComponent({
|
|
name: "ElMain"
|
|
});
|
|
const _sfc_main$1x = /* @__PURE__ */ defineComponent({
|
|
...__default__$12,
|
|
setup(__props) {
|
|
const ns = useNamespace("main");
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("main", {
|
|
class: normalizeClass(unref(ns).b())
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var Main = /* @__PURE__ */ _export_sfc(_sfc_main$1x, [["__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 ROOT_PICKER_INJECTION_KEY = Symbol();
|
|
|
|
const datePickerProps = buildProps({
|
|
...timePickerDefaultProps,
|
|
type: {
|
|
type: definePropType(String),
|
|
default: "date"
|
|
}
|
|
});
|
|
|
|
const selectionModes = [
|
|
"date",
|
|
"dates",
|
|
"year",
|
|
"years",
|
|
"month",
|
|
"months",
|
|
"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
|
|
},
|
|
dateFormat: String,
|
|
timeFormat: String
|
|
});
|
|
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 isValidRange = (range) => {
|
|
if (!isArray$1(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$1(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 datesInMonth = (year, month, lang) => {
|
|
const firstDay = dayjs().locale(lang).startOf("month").month(month).year(year);
|
|
const numOfDays = firstDay.daysInMonth();
|
|
return rangeArr(numOfDays).map((n) => firstDay.add(n, "day").toDate());
|
|
};
|
|
const getValidDateOfMonth = (year, month, lang, disabledDate) => {
|
|
const _value = dayjs().year(year).month(month).startOf("month");
|
|
const _date = datesInMonth(year, month, lang).find((date) => {
|
|
return !(disabledDate == null ? void 0 : disabledDate(date));
|
|
});
|
|
if (_date) {
|
|
return dayjs(_date).locale(lang);
|
|
}
|
|
return _value.locale(lang);
|
|
};
|
|
const getValidDateOfYear = (value, lang, disabledDate) => {
|
|
const year = value.year();
|
|
if (!(disabledDate == null ? void 0 : disabledDate(value.toDate()))) {
|
|
return value.locale(lang);
|
|
}
|
|
const month = value.month();
|
|
if (!datesInMonth(year, month, lang).every(disabledDate)) {
|
|
return getValidDateOfMonth(year, month, lang, disabledDate);
|
|
}
|
|
for (let i = 0; i < 12; i++) {
|
|
if (!datesInMonth(year, i, lang).every(disabledDate)) {
|
|
return getValidDateOfMonth(year, i, lang, disabledDate);
|
|
}
|
|
}
|
|
return value;
|
|
};
|
|
|
|
const basicDateTableProps = buildProps({
|
|
...datePickerSharedProps,
|
|
cellClassName: {
|
|
type: definePropType(Function)
|
|
},
|
|
showWeekNumber: Boolean,
|
|
selectionMode: selectionModeWithDefault("date")
|
|
});
|
|
const basicDateTableEmits = ["changerange", "pick", "select"];
|
|
|
|
const isNormalDay = (type = "") => {
|
|
return ["normal", "today"].includes(type);
|
|
};
|
|
const useBasicDateTable = (props, emit) => {
|
|
const { lang } = useLocale();
|
|
const tbodyRef = ref();
|
|
const currentCellRef = ref();
|
|
const lastRow = ref();
|
|
const lastColumn = ref();
|
|
const tableRows = ref([[], [], [], [], [], []]);
|
|
let focusWithClick = false;
|
|
const firstDayOfWeek = props.date.$locale().weekStart || 7;
|
|
const WEEKS_CONSTANT = props.date.locale("en").localeData().weekdaysShort().map((_) => _.toLowerCase());
|
|
const offsetDay = computed(() => {
|
|
return firstDayOfWeek > 3 ? 7 - firstDayOfWeek : -firstDayOfWeek;
|
|
});
|
|
const startDate = computed(() => {
|
|
const startDayOfMonth = props.date.startOf("month");
|
|
return startDayOfMonth.subtract(startDayOfMonth.day() || 7, "day");
|
|
});
|
|
const WEEKS = computed(() => {
|
|
return WEEKS_CONSTANT.concat(WEEKS_CONSTANT).slice(firstDayOfWeek, firstDayOfWeek + 7);
|
|
});
|
|
const hasCurrent = computed(() => {
|
|
return flatten(unref(rows)).some((row) => {
|
|
return row.isCurrent;
|
|
});
|
|
});
|
|
const days = 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 = computed(() => {
|
|
return props.selectionMode === "dates" ? castArray(props.parsedValue) : [];
|
|
});
|
|
const setDateText = (cell, { count, rowIndex, columnIndex }) => {
|
|
const { startOfMonthDay, dateCountOfMonth, dateCountOfLastMonth } = unref(days);
|
|
const offset = 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 = unref(selectedDate);
|
|
const shouldIncrement = setDateText(cell, { count, rowIndex, columnIndex });
|
|
const cellDate = cell.dayjs.toDate();
|
|
cell.selected = _selectedDate.find((d) => d.isSame(cell.dayjs, "day"));
|
|
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 = computed(() => {
|
|
const { minDate, maxDate, rangeState, showWeekNumber } = props;
|
|
const offset = unref(offsetDay);
|
|
const rows_ = unref(tableRows);
|
|
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: unref(startDate).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(unref(lang)).startOf(dateUnit),
|
|
unit: dateUnit,
|
|
relativeDateGetter: (idx) => unref(startDate).add(idx - offset, dateUnit),
|
|
setCellMetadata: (...args) => {
|
|
if (setCellMetadata(...args, count)) {
|
|
count += 1;
|
|
}
|
|
},
|
|
setRowMetadata
|
|
});
|
|
return rows_;
|
|
});
|
|
watch(() => props.date, async () => {
|
|
var _a;
|
|
if ((_a = unref(tbodyRef)) == null ? void 0 : _a.contains(document.activeElement)) {
|
|
await nextTick();
|
|
await focus();
|
|
}
|
|
});
|
|
const focus = async () => {
|
|
var _a;
|
|
return (_a = unref(currentCellRef)) == null ? void 0 : _a.focus();
|
|
};
|
|
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(unref(lang)).isSame(props.date.date(Number(cell.text)), "day");
|
|
};
|
|
const getDateOfCell = (row, column) => {
|
|
const offsetFromStart = row * 7 + (column - (props.showWeekNumber ? 1 : 0)) - unref(offsetDay);
|
|
return unref(startDate).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 (unref(rows)[row][column].disabled)
|
|
return;
|
|
if (row !== unref(lastRow) || column !== unref(lastColumn)) {
|
|
lastRow.value = row;
|
|
lastColumn.value = column;
|
|
emit("changerange", {
|
|
selecting: true,
|
|
endDate: getDateOfCell(row, column)
|
|
});
|
|
}
|
|
};
|
|
const isSelectedCell = (cell) => {
|
|
return !unref(hasCurrent) && (cell == null ? void 0 : cell.text) === 1 && cell.type === "normal" || cell.isCurrent;
|
|
};
|
|
const handleFocus = (event) => {
|
|
if (focusWithClick || unref(hasCurrent) || 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 handleRangePick = (newDate) => {
|
|
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);
|
|
}
|
|
};
|
|
const handleWeekPick = (newDate) => {
|
|
const weekNumber = newDate.week();
|
|
const value = `${newDate.year()}w${weekNumber}`;
|
|
emit("pick", {
|
|
year: newDate.year(),
|
|
week: weekNumber,
|
|
value,
|
|
date: newDate.startOf("week")
|
|
});
|
|
};
|
|
const handleDatesPick = (newDate, selected) => {
|
|
const newValue = selected ? castArray(props.parsedValue).filter((d) => (d == null ? void 0 : d.valueOf()) !== newDate.valueOf()) : castArray(props.parsedValue).concat([newDate]);
|
|
emit("pick", newValue);
|
|
};
|
|
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 = unref(rows)[row][column];
|
|
if (cell.disabled || cell.type === "week")
|
|
return;
|
|
const newDate = getDateOfCell(row, column);
|
|
switch (props.selectionMode) {
|
|
case "range": {
|
|
handleRangePick(newDate);
|
|
break;
|
|
}
|
|
case "date": {
|
|
emit("pick", newDate, isKeyboardMovement);
|
|
break;
|
|
}
|
|
case "week": {
|
|
handleWeekPick(newDate);
|
|
break;
|
|
}
|
|
case "dates": {
|
|
handleDatesPick(newDate, !!cell.selected);
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
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;
|
|
};
|
|
return {
|
|
WEEKS,
|
|
rows,
|
|
tbodyRef,
|
|
currentCellRef,
|
|
focus,
|
|
isCurrent,
|
|
isWeekActive,
|
|
isSelectedCell,
|
|
handlePickDate,
|
|
handleMouseUp,
|
|
handleMouseDown,
|
|
handleMouseMove,
|
|
handleFocus
|
|
};
|
|
};
|
|
const useBasicDateTableDOM = (props, {
|
|
isCurrent,
|
|
isWeekActive
|
|
}) => {
|
|
const ns = useNamespace("date-table");
|
|
const { t } = useLocale();
|
|
const tableKls = computed(() => [
|
|
ns.b(),
|
|
{ "is-week-mode": props.selectionMode === "week" }
|
|
]);
|
|
const tableLabel = computed(() => t("el.datepicker.dateTablePrompt"));
|
|
const weekLabel = computed(() => t("el.datepicker.week"));
|
|
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 getRowKls = (cell) => [
|
|
ns.e("row"),
|
|
{ current: isWeekActive(cell) }
|
|
];
|
|
return {
|
|
tableKls,
|
|
tableLabel,
|
|
weekLabel,
|
|
getCellClasses,
|
|
getRowKls,
|
|
t
|
|
};
|
|
};
|
|
|
|
const basicCellProps = buildProps({
|
|
cell: {
|
|
type: definePropType(Object)
|
|
}
|
|
});
|
|
|
|
var ElDatePickerCell = defineComponent({
|
|
name: "ElDatePickerCell",
|
|
props: basicCellProps,
|
|
setup(props) {
|
|
const ns = useNamespace("date-table-cell");
|
|
const {
|
|
slots
|
|
} = inject(ROOT_PICKER_INJECTION_KEY);
|
|
return () => {
|
|
const {
|
|
cell
|
|
} = props;
|
|
return renderSlot(slots, "default", {
|
|
...cell
|
|
}, () => {
|
|
var _a;
|
|
return [createVNode("div", {
|
|
"class": ns.b()
|
|
}, [createVNode("span", {
|
|
"class": ns.e("text")
|
|
}, [(_a = cell == null ? void 0 : cell.renderText) != null ? _a : cell == null ? void 0 : cell.text])])];
|
|
});
|
|
};
|
|
}
|
|
});
|
|
|
|
const _sfc_main$1w = /* @__PURE__ */ defineComponent({
|
|
__name: "basic-date-table",
|
|
props: basicDateTableProps,
|
|
emits: basicDateTableEmits,
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const {
|
|
WEEKS,
|
|
rows,
|
|
tbodyRef,
|
|
currentCellRef,
|
|
focus,
|
|
isCurrent,
|
|
isWeekActive,
|
|
isSelectedCell,
|
|
handlePickDate,
|
|
handleMouseUp,
|
|
handleMouseDown,
|
|
handleMouseMove,
|
|
handleFocus
|
|
} = useBasicDateTable(props, emit);
|
|
const { tableLabel, tableKls, weekLabel, getCellClasses, getRowKls, t } = useBasicDateTableDOM(props, {
|
|
isCurrent,
|
|
isWeekActive
|
|
});
|
|
expose({
|
|
focus
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("table", {
|
|
"aria-label": unref(tableLabel),
|
|
class: normalizeClass(unref(tableKls)),
|
|
cellspacing: "0",
|
|
cellpadding: "0",
|
|
role: "grid",
|
|
onClick: unref(handlePickDate),
|
|
onMousemove: unref(handleMouseMove),
|
|
onMousedown: withModifiers(unref(handleMouseDown), ["prevent"]),
|
|
onMouseup: unref(handleMouseUp)
|
|
}, [
|
|
createElementVNode("tbody", {
|
|
ref_key: "tbodyRef",
|
|
ref: tbodyRef
|
|
}, [
|
|
createElementVNode("tr", null, [
|
|
_ctx.showWeekNumber ? (openBlock(), createElementBlock("th", {
|
|
key: 0,
|
|
scope: "col"
|
|
}, toDisplayString(unref(weekLabel)), 1)) : createCommentVNode("v-if", true),
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(WEEKS), (week, key) => {
|
|
return openBlock(), createElementBlock("th", {
|
|
key,
|
|
"aria-label": unref(t)("el.datepicker.weeksFull." + week),
|
|
scope: "col"
|
|
}, toDisplayString(unref(t)("el.datepicker.weeks." + week)), 9, ["aria-label"]);
|
|
}), 128))
|
|
]),
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(rows), (row, rowKey) => {
|
|
return openBlock(), createElementBlock("tr", {
|
|
key: rowKey,
|
|
class: normalizeClass(unref(getRowKls)(row[1]))
|
|
}, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(row, (cell, columnKey) => {
|
|
return openBlock(), createElementBlock("td", {
|
|
key: `${rowKey}.${columnKey}`,
|
|
ref_for: true,
|
|
ref: (el) => unref(isSelectedCell)(cell) && (currentCellRef.value = el),
|
|
class: normalizeClass(unref(getCellClasses)(cell)),
|
|
"aria-current": cell.isCurrent ? "date" : void 0,
|
|
"aria-selected": cell.isCurrent,
|
|
tabindex: unref(isSelectedCell)(cell) ? 0 : -1,
|
|
onFocus: unref(handleFocus)
|
|
}, [
|
|
createVNode(unref(ElDatePickerCell), { cell }, null, 8, ["cell"])
|
|
], 42, ["aria-current", "aria-selected", "tabindex", "onFocus"]);
|
|
}), 128))
|
|
], 2);
|
|
}), 128))
|
|
], 512)
|
|
], 42, ["aria-label", "onClick", "onMousemove", "onMousedown", "onMouseup"]);
|
|
};
|
|
}
|
|
});
|
|
var DateTable = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["__file", "basic-date-table.vue"]]);
|
|
|
|
const basicMonthTableProps = buildProps({
|
|
...datePickerSharedProps,
|
|
selectionMode: selectionModeWithDefault("month")
|
|
});
|
|
|
|
const _sfc_main$1v = /* @__PURE__ */ defineComponent({
|
|
__name: "basic-month-table",
|
|
props: basicMonthTableProps,
|
|
emits: ["changerange", "pick", "select"],
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const ns = useNamespace("month-table");
|
|
const { t, lang } = useLocale();
|
|
const tbodyRef = ref();
|
|
const currentCellRef = ref();
|
|
const months = ref(props.date.locale("en").localeData().monthsShort().map((_) => _.toLowerCase()));
|
|
const tableRows = ref([
|
|
[],
|
|
[],
|
|
[]
|
|
]);
|
|
const lastRow = ref();
|
|
const lastColumn = ref();
|
|
const rows = 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 === "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;
|
|
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 === "months") {
|
|
if (event.type === "keydown") {
|
|
emit("pick", castArray(props.parsedValue), false);
|
|
return;
|
|
}
|
|
const newMonth = getValidDateOfMonth(props.date.year(), month, lang.value, props.disabledDate);
|
|
const newValue = hasClass(target, "current") ? castArray(props.parsedValue).filter((d) => (d == null ? void 0 : d.month()) !== newMonth.month()) : castArray(props.parsedValue).concat([dayjs(newMonth)]);
|
|
emit("pick", newValue);
|
|
} else 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);
|
|
}
|
|
};
|
|
watch(() => props.date, async () => {
|
|
var _a, _b;
|
|
if ((_a = tbodyRef.value) == null ? void 0 : _a.contains(document.activeElement)) {
|
|
await nextTick();
|
|
(_b = currentCellRef.value) == null ? void 0 : _b.focus();
|
|
}
|
|
});
|
|
expose({
|
|
focus
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("table", {
|
|
role: "grid",
|
|
"aria-label": unref(t)("el.datepicker.monthTablePrompt"),
|
|
class: normalizeClass(unref(ns).b()),
|
|
onClick: handleMonthTableClick,
|
|
onMousemove: handleMouseMove
|
|
}, [
|
|
createElementVNode("tbody", {
|
|
ref_key: "tbodyRef",
|
|
ref: tbodyRef
|
|
}, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(rows), (row, key) => {
|
|
return openBlock(), createElementBlock("tr", { key }, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(row, (cell, key_) => {
|
|
return openBlock(), createElementBlock("td", {
|
|
key: key_,
|
|
ref_for: true,
|
|
ref: (el) => isSelectedCell(cell) && (currentCellRef.value = el),
|
|
class: normalizeClass(getCellStyle(cell)),
|
|
"aria-selected": `${isSelectedCell(cell)}`,
|
|
"aria-label": unref(t)(`el.datepicker.month${+cell.text + 1}`),
|
|
tabindex: isSelectedCell(cell) ? 0 : -1,
|
|
onKeydown: [
|
|
withKeys(withModifiers(handleMonthTableClick, ["prevent", "stop"]), ["space"]),
|
|
withKeys(withModifiers(handleMonthTableClick, ["prevent", "stop"]), ["enter"])
|
|
]
|
|
}, [
|
|
createVNode(unref(ElDatePickerCell), {
|
|
cell: {
|
|
...cell,
|
|
renderText: unref(t)("el.datepicker.months." + months.value[cell.text])
|
|
}
|
|
}, null, 8, ["cell"])
|
|
], 42, ["aria-selected", "aria-label", "tabindex", "onKeydown"]);
|
|
}), 128))
|
|
]);
|
|
}), 128))
|
|
], 512)
|
|
], 42, ["aria-label"]);
|
|
};
|
|
}
|
|
});
|
|
var MonthTable = /* @__PURE__ */ _export_sfc(_sfc_main$1v, [["__file", "basic-month-table.vue"]]);
|
|
|
|
const basicYearTableProps = buildProps({
|
|
...datePickerSharedProps,
|
|
selectionMode: selectionModeWithDefault("year")
|
|
});
|
|
|
|
const _sfc_main$1u = /* @__PURE__ */ defineComponent({
|
|
__name: "basic-year-table",
|
|
props: basicYearTableProps,
|
|
emits: ["changerange", "pick", "select"],
|
|
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 = ref();
|
|
const currentCellRef = ref();
|
|
const startYear = computed(() => {
|
|
return Math.floor(props.date.year() / 10) * 10;
|
|
});
|
|
const tableRows = ref([[], [], []]);
|
|
const lastRow = ref();
|
|
const lastColumn = ref();
|
|
const rows = computed(() => {
|
|
var _a;
|
|
const rows2 = tableRows.value;
|
|
const now = dayjs().locale(lang.value).startOf("year");
|
|
for (let i = 0; i < 3; i++) {
|
|
const row = rows2[i];
|
|
for (let j = 0; j < 4; j++) {
|
|
if (i * 4 + j >= 10) {
|
|
break;
|
|
}
|
|
let cell = row[j];
|
|
if (!cell) {
|
|
cell = {
|
|
row: i,
|
|
column: j,
|
|
type: "normal",
|
|
inRange: false,
|
|
start: false,
|
|
end: false,
|
|
text: -1,
|
|
disabled: false
|
|
};
|
|
}
|
|
cell.type = "normal";
|
|
const index = i * 4 + j + startYear.value;
|
|
const calTime = dayjs().year(index);
|
|
const calEndDate = props.rangeState.endDate || props.maxDate || props.rangeState.selecting && props.minDate || null;
|
|
cell.inRange = !!(props.minDate && calTime.isSameOrAfter(props.minDate, "year") && calEndDate && calTime.isSameOrBefore(calEndDate, "year")) || !!(props.minDate && calTime.isSameOrBefore(props.minDate, "year") && calEndDate && calTime.isSameOrAfter(calEndDate, "year"));
|
|
if ((_a = props.minDate) == null ? void 0 : _a.isSameOrAfter(calEndDate)) {
|
|
cell.start = !!(calEndDate && calTime.isSame(calEndDate, "year"));
|
|
cell.end = !!(props.minDate && calTime.isSame(props.minDate, "year"));
|
|
} else {
|
|
cell.start = !!(props.minDate && calTime.isSame(props.minDate, "year"));
|
|
cell.end = !!(calEndDate && calTime.isSame(calEndDate, "year"));
|
|
}
|
|
const isToday = now.isSame(calTime);
|
|
if (isToday) {
|
|
cell.type = "today";
|
|
}
|
|
cell.text = index;
|
|
const cellDate = calTime.toDate();
|
|
cell.disabled = props.disabledDate && props.disabledDate(cellDate) || false;
|
|
row[j] = cell;
|
|
}
|
|
}
|
|
return rows2;
|
|
});
|
|
const focus = () => {
|
|
var _a;
|
|
(_a = currentCellRef.value) == null ? void 0 : _a.focus();
|
|
};
|
|
const getCellKls = (cell) => {
|
|
const kls = {};
|
|
const today = dayjs().locale(lang.value);
|
|
const year = cell.text;
|
|
kls.disabled = props.disabledDate ? datesInYear(year, lang.value).every(props.disabledDate) : false;
|
|
kls.today = today.year() === year;
|
|
kls.current = castArray(props.parsedValue).findIndex((d) => d.year() === year) >= 0;
|
|
if (cell.inRange) {
|
|
kls["in-range"] = true;
|
|
if (cell.start) {
|
|
kls["start-date"] = true;
|
|
}
|
|
if (cell.end) {
|
|
kls["end-date"] = true;
|
|
}
|
|
}
|
|
return kls;
|
|
};
|
|
const isSelectedCell = (cell) => {
|
|
const year = cell.text;
|
|
return castArray(props.date).findIndex((date) => date.year() === year) >= 0;
|
|
};
|
|
const handleYearTableClick = (event) => {
|
|
var _a;
|
|
const target = (_a = event.target) == null ? void 0 : _a.closest("td");
|
|
if (!target || !target.textContent || hasClass(target, "disabled"))
|
|
return;
|
|
const column = target.cellIndex;
|
|
const row = target.parentNode.rowIndex;
|
|
const selectedYear = row * 4 + column + startYear.value;
|
|
const newDate = dayjs().year(selectedYear);
|
|
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 if (props.selectionMode === "years") {
|
|
if (event.type === "keydown") {
|
|
emit("pick", castArray(props.parsedValue), false);
|
|
return;
|
|
}
|
|
const vaildYear = getValidDateOfYear(newDate.startOf("year"), lang.value, props.disabledDate);
|
|
const newValue = hasClass(target, "current") ? castArray(props.parsedValue).filter((d) => (d == null ? void 0 : d.year()) !== selectedYear) : castArray(props.parsedValue).concat([vaildYear]);
|
|
emit("pick", newValue);
|
|
} else {
|
|
emit("pick", selectedYear);
|
|
}
|
|
};
|
|
const handleMouseMove = (event) => {
|
|
var _a;
|
|
if (!props.rangeState.selecting)
|
|
return;
|
|
const target = (_a = event.target) == null ? void 0 : _a.closest("td");
|
|
if (!target)
|
|
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: dayjs().year(startYear.value).add(row * 4 + column, "year")
|
|
});
|
|
}
|
|
};
|
|
watch(() => props.date, async () => {
|
|
var _a, _b;
|
|
if ((_a = tbodyRef.value) == null ? void 0 : _a.contains(document.activeElement)) {
|
|
await nextTick();
|
|
(_b = currentCellRef.value) == null ? void 0 : _b.focus();
|
|
}
|
|
});
|
|
expose({
|
|
focus
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("table", {
|
|
role: "grid",
|
|
"aria-label": unref(t)("el.datepicker.yearTablePrompt"),
|
|
class: normalizeClass(unref(ns).b()),
|
|
onClick: handleYearTableClick,
|
|
onMousemove: handleMouseMove
|
|
}, [
|
|
createElementVNode("tbody", {
|
|
ref_key: "tbodyRef",
|
|
ref: tbodyRef
|
|
}, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(rows), (row, rowKey) => {
|
|
return openBlock(), createElementBlock("tr", { key: rowKey }, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(row, (cell, cellKey) => {
|
|
return openBlock(), createElementBlock("td", {
|
|
key: `${rowKey}_${cellKey}`,
|
|
ref_for: true,
|
|
ref: (el) => isSelectedCell(cell) && (currentCellRef.value = el),
|
|
class: normalizeClass(["available", getCellKls(cell)]),
|
|
"aria-selected": isSelectedCell(cell),
|
|
"aria-label": String(cell.text),
|
|
tabindex: isSelectedCell(cell) ? 0 : -1,
|
|
onKeydown: [
|
|
withKeys(withModifiers(handleYearTableClick, ["prevent", "stop"]), ["space"]),
|
|
withKeys(withModifiers(handleYearTableClick, ["prevent", "stop"]), ["enter"])
|
|
]
|
|
}, [
|
|
createVNode(unref(ElDatePickerCell), { cell }, null, 8, ["cell"])
|
|
], 42, ["aria-selected", "aria-label", "tabindex", "onKeydown"]);
|
|
}), 128))
|
|
]);
|
|
}), 128))
|
|
], 512)
|
|
], 42, ["aria-label"]);
|
|
};
|
|
}
|
|
});
|
|
var YearTable = /* @__PURE__ */ _export_sfc(_sfc_main$1u, [["__file", "basic-year-table.vue"]]);
|
|
|
|
const _sfc_main$1t = /* @__PURE__ */ 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 = useAttrs$1();
|
|
const slots = useSlots();
|
|
const { t, lang } = useLocale();
|
|
const pickerBase = inject("EP_PICKER_BASE");
|
|
const popper = inject(TOOLTIP_INJECTION_KEY);
|
|
const { shortcuts, disabledDate, cellClassName, defaultTime } = pickerBase.props;
|
|
const defaultValue = toRef(pickerBase.props, "defaultValue");
|
|
const currentViewRef = ref();
|
|
const innerDate = ref(dayjs().locale(lang.value));
|
|
const isChangeToNow = ref(false);
|
|
let isShortcut = false;
|
|
const defaultTimeD = computed(() => {
|
|
return dayjs(defaultTime).locale(lang.value);
|
|
});
|
|
const month = computed(() => {
|
|
return innerDate.value.month();
|
|
});
|
|
const year = computed(() => {
|
|
return innerDate.value.year();
|
|
});
|
|
const selectableRange = ref([]);
|
|
const userInputDate = ref(null);
|
|
const userInputTime = 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 && !isChangeToNow.value && !isShortcut) {
|
|
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$1(value)) {
|
|
const dates = value.map(formatEmit);
|
|
contextEmit("pick", dates, ...args);
|
|
} else {
|
|
contextEmit("pick", formatEmit(value), ...args);
|
|
}
|
|
userInputDate.value = null;
|
|
userInputTime.value = null;
|
|
isChangeToNow.value = false;
|
|
isShortcut = false;
|
|
};
|
|
const handleDatePick = async (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);
|
|
if (props.type === "datetime") {
|
|
await nextTick();
|
|
handleFocusPicker();
|
|
}
|
|
} 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 = ref("date");
|
|
const yearLabel = 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$1(shortcut.value) ? shortcut.value() : shortcut.value;
|
|
if (shortcutValue) {
|
|
isShortcut = true;
|
|
emit(dayjs(shortcutValue).locale(lang.value));
|
|
return;
|
|
}
|
|
if (shortcut.onClick) {
|
|
shortcut.onClick({
|
|
attrs,
|
|
slots,
|
|
emit: contextEmit
|
|
});
|
|
}
|
|
};
|
|
const selectionMode = computed(() => {
|
|
const { type } = props;
|
|
if (["week", "month", "months", "year", "years", "dates"].includes(type))
|
|
return type;
|
|
return "date";
|
|
});
|
|
const isMultipleType = computed(() => {
|
|
return selectionMode.value === "dates" || selectionMode.value === "months" || selectionMode.value === "years";
|
|
});
|
|
const keyboardMode = computed(() => {
|
|
return selectionMode.value === "date" ? currentView.value : selectionMode.value;
|
|
});
|
|
const hasShortcuts = computed(() => !!shortcuts.length);
|
|
const handleMonthPick = async (month2, keepOpen) => {
|
|
if (selectionMode.value === "month") {
|
|
innerDate.value = getValidDateOfMonth(innerDate.value.year(), month2, lang.value, disabledDate);
|
|
emit(innerDate.value, false);
|
|
} else if (selectionMode.value === "months") {
|
|
emit(month2, keepOpen != null ? keepOpen : true);
|
|
} else {
|
|
innerDate.value = getValidDateOfMonth(innerDate.value.year(), month2, lang.value, disabledDate);
|
|
currentView.value = "date";
|
|
if (["month", "year", "date", "week"].includes(selectionMode.value)) {
|
|
emit(innerDate.value, true);
|
|
await nextTick();
|
|
handleFocusPicker();
|
|
}
|
|
}
|
|
handlePanelChange("month");
|
|
};
|
|
const handleYearPick = async (year2, keepOpen) => {
|
|
if (selectionMode.value === "year") {
|
|
const data = innerDate.value.startOf("year").year(year2);
|
|
innerDate.value = getValidDateOfYear(data, lang.value, disabledDate);
|
|
emit(innerDate.value, false);
|
|
} else if (selectionMode.value === "years") {
|
|
emit(year2, keepOpen != null ? keepOpen : true);
|
|
} else {
|
|
const data = innerDate.value.year(year2);
|
|
innerDate.value = getValidDateOfYear(data, lang.value, disabledDate);
|
|
currentView.value = "month";
|
|
if (["month", "year", "date", "week"].includes(selectionMode.value)) {
|
|
emit(innerDate.value, true);
|
|
await nextTick();
|
|
handleFocusPicker();
|
|
}
|
|
}
|
|
handlePanelChange("year");
|
|
};
|
|
const showPicker = async (view) => {
|
|
currentView.value = view;
|
|
await nextTick();
|
|
handleFocusPicker();
|
|
};
|
|
const showTime = computed(() => props.type === "datetime" || props.type === "datetimerange");
|
|
const footerVisible = computed(() => {
|
|
const showDateFooter = showTime.value || selectionMode.value === "dates";
|
|
const showYearFooter = selectionMode.value === "years";
|
|
const showMonthFooter = selectionMode.value === "months";
|
|
const isDateView = currentView.value === "date";
|
|
const isYearView = currentView.value === "year";
|
|
const isMonthView = currentView.value === "month";
|
|
return showDateFooter && isDateView || showYearFooter && isYearView || showMonthFooter && isMonthView;
|
|
});
|
|
const disabledConfirm = computed(() => {
|
|
if (!disabledDate)
|
|
return false;
|
|
if (!props.parsedValue)
|
|
return true;
|
|
if (isArray$1(props.parsedValue)) {
|
|
return disabledDate(props.parsedValue[0].toDate());
|
|
}
|
|
return disabledDate(props.parsedValue.toDate());
|
|
});
|
|
const onConfirm = () => {
|
|
if (isMultipleType.value) {
|
|
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 disabledNow = computed(() => {
|
|
if (!disabledDate)
|
|
return false;
|
|
return disabledDate(dayjs().locale(lang.value).toDate());
|
|
});
|
|
const changeToNow = () => {
|
|
const now = dayjs().locale(lang.value);
|
|
const nowDate = now.toDate();
|
|
isChangeToNow.value = true;
|
|
if ((!disabledDate || !disabledDate(nowDate)) && checkDateWithinRange(nowDate)) {
|
|
innerDate.value = dayjs().locale(lang.value);
|
|
emit(innerDate.value);
|
|
}
|
|
};
|
|
const timeFormat = computed(() => {
|
|
return props.timeFormat || extractTimeFormat(props.format);
|
|
});
|
|
const dateFormat = computed(() => {
|
|
return props.dateFormat || extractDateFormat(props.format);
|
|
});
|
|
const visibleTime = computed(() => {
|
|
if (userInputTime.value)
|
|
return userInputTime.value;
|
|
if (!props.parsedValue && !defaultValue.value)
|
|
return;
|
|
return (props.parsedValue || innerDate.value).format(timeFormat.value);
|
|
});
|
|
const visibleDate = computed(() => {
|
|
if (userInputDate.value)
|
|
return userInputDate.value;
|
|
if (!props.parsedValue && !defaultValue.value)
|
|
return;
|
|
return (props.parsedValue || innerDate.value).format(dateFormat.value);
|
|
});
|
|
const timePickerVisible = 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) => {
|
|
return isArray$1(value) ? value.map((_) => _.format(props.format)) : 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, EVENT_CODE.numpadEnter].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$1(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);
|
|
};
|
|
watch(() => selectionMode.value, (val) => {
|
|
if (["month", "year"].includes(val)) {
|
|
currentView.value = val;
|
|
return;
|
|
} else if (val === "years") {
|
|
currentView.value = "year";
|
|
return;
|
|
} else if (val === "months") {
|
|
currentView.value = "month";
|
|
return;
|
|
}
|
|
currentView.value = "date";
|
|
}, { immediate: true });
|
|
watch(() => currentView.value, () => {
|
|
popper == null ? void 0 : popper.updatePopper();
|
|
});
|
|
watch(() => defaultValue.value, (val) => {
|
|
if (val) {
|
|
innerDate.value = getDefaultValue();
|
|
}
|
|
}, { immediate: true });
|
|
watch(() => props.parsedValue, (val) => {
|
|
if (val) {
|
|
if (isMultipleType.value)
|
|
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 openBlock(), createElementBlock("div", {
|
|
class: normalizeClass([
|
|
unref(ppNs).b(),
|
|
unref(dpNs).b(),
|
|
{
|
|
"has-sidebar": _ctx.$slots.sidebar || unref(hasShortcuts),
|
|
"has-time": unref(showTime)
|
|
}
|
|
])
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ppNs).e("body-wrapper"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "sidebar", {
|
|
class: normalizeClass(unref(ppNs).e("sidebar"))
|
|
}),
|
|
unref(hasShortcuts) ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ppNs).e("sidebar"))
|
|
}, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(shortcuts), (shortcut, key) => {
|
|
return openBlock(), createElementBlock("button", {
|
|
key,
|
|
type: "button",
|
|
class: normalizeClass(unref(ppNs).e("shortcut")),
|
|
onClick: ($event) => handleShortcutClick(shortcut)
|
|
}, toDisplayString(shortcut.text), 11, ["onClick"]);
|
|
}), 128))
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ppNs).e("body"))
|
|
}, [
|
|
unref(showTime) ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(dpNs).e("time-header"))
|
|
}, [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(dpNs).e("editor-wrap"))
|
|
}, [
|
|
createVNode(unref(ElInput), {
|
|
placeholder: unref(t)("el.datepicker.selectDate"),
|
|
"model-value": unref(visibleDate),
|
|
size: "small",
|
|
"validate-event": false,
|
|
onInput: (val) => userInputDate.value = val,
|
|
onChange: handleVisibleDateChange
|
|
}, null, 8, ["placeholder", "model-value", "onInput"])
|
|
], 2),
|
|
withDirectives((openBlock(), createElementBlock("span", {
|
|
class: normalizeClass(unref(dpNs).e("editor-wrap"))
|
|
}, [
|
|
createVNode(unref(ElInput), {
|
|
placeholder: unref(t)("el.datepicker.selectTime"),
|
|
"model-value": unref(visibleTime),
|
|
size: "small",
|
|
"validate-event": false,
|
|
onFocus: onTimePickerInputFocus,
|
|
onInput: (val) => userInputTime.value = val,
|
|
onChange: handleVisibleTimeChange
|
|
}, null, 8, ["placeholder", "model-value", "onInput"]),
|
|
createVNode(unref(TimePickPanel), {
|
|
visible: timePickerVisible.value,
|
|
format: unref(timeFormat),
|
|
"parsed-value": innerDate.value,
|
|
onPick: handleTimePick
|
|
}, null, 8, ["visible", "format", "parsed-value"])
|
|
], 2)), [
|
|
[unref(ClickOutside), handleTimePickClose]
|
|
])
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
withDirectives(createElementVNode("div", {
|
|
class: normalizeClass([
|
|
unref(dpNs).e("header"),
|
|
(currentView.value === "year" || currentView.value === "month") && unref(dpNs).e("header--bordered")
|
|
])
|
|
}, [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(dpNs).e("prev-btn"))
|
|
}, [
|
|
createElementVNode("button", {
|
|
type: "button",
|
|
"aria-label": unref(t)(`el.datepicker.prevYear`),
|
|
class: normalizeClass(["d-arrow-left", unref(ppNs).e("icon-btn")]),
|
|
onClick: ($event) => moveByYear(false)
|
|
}, [
|
|
renderSlot(_ctx.$slots, "prev-year", {}, () => [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(d_arrow_left_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
])
|
|
], 10, ["aria-label", "onClick"]),
|
|
withDirectives(createElementVNode("button", {
|
|
type: "button",
|
|
"aria-label": unref(t)(`el.datepicker.prevMonth`),
|
|
class: normalizeClass([unref(ppNs).e("icon-btn"), "arrow-left"]),
|
|
onClick: ($event) => moveByMonth(false)
|
|
}, [
|
|
renderSlot(_ctx.$slots, "prev-month", {}, () => [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(arrow_left_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
])
|
|
], 10, ["aria-label", "onClick"]), [
|
|
[vShow, currentView.value === "date"]
|
|
])
|
|
], 2),
|
|
createElementVNode("span", {
|
|
role: "button",
|
|
class: normalizeClass(unref(dpNs).e("header-label")),
|
|
"aria-live": "polite",
|
|
tabindex: "0",
|
|
onKeydown: withKeys(($event) => showPicker("year"), ["enter"]),
|
|
onClick: ($event) => showPicker("year")
|
|
}, toDisplayString(unref(yearLabel)), 43, ["onKeydown", "onClick"]),
|
|
withDirectives(createElementVNode("span", {
|
|
role: "button",
|
|
"aria-live": "polite",
|
|
tabindex: "0",
|
|
class: normalizeClass([
|
|
unref(dpNs).e("header-label"),
|
|
{ active: currentView.value === "month" }
|
|
]),
|
|
onKeydown: withKeys(($event) => showPicker("month"), ["enter"]),
|
|
onClick: ($event) => showPicker("month")
|
|
}, toDisplayString(unref(t)(`el.datepicker.month${unref(month) + 1}`)), 43, ["onKeydown", "onClick"]), [
|
|
[vShow, currentView.value === "date"]
|
|
]),
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(dpNs).e("next-btn"))
|
|
}, [
|
|
withDirectives(createElementVNode("button", {
|
|
type: "button",
|
|
"aria-label": unref(t)(`el.datepicker.nextMonth`),
|
|
class: normalizeClass([unref(ppNs).e("icon-btn"), "arrow-right"]),
|
|
onClick: ($event) => moveByMonth(true)
|
|
}, [
|
|
renderSlot(_ctx.$slots, "next-month", {}, () => [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(arrow_right_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
])
|
|
], 10, ["aria-label", "onClick"]), [
|
|
[vShow, currentView.value === "date"]
|
|
]),
|
|
createElementVNode("button", {
|
|
type: "button",
|
|
"aria-label": unref(t)(`el.datepicker.nextYear`),
|
|
class: normalizeClass([unref(ppNs).e("icon-btn"), "d-arrow-right"]),
|
|
onClick: ($event) => moveByYear(true)
|
|
}, [
|
|
renderSlot(_ctx.$slots, "next-year", {}, () => [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(d_arrow_right_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
])
|
|
], 10, ["aria-label", "onClick"])
|
|
], 2)
|
|
], 2), [
|
|
[vShow, currentView.value !== "time"]
|
|
]),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ppNs).e("content")),
|
|
onKeydown: handleKeydownTable
|
|
}, [
|
|
currentView.value === "date" ? (openBlock(), createBlock(DateTable, {
|
|
key: 0,
|
|
ref_key: "currentViewRef",
|
|
ref: currentViewRef,
|
|
"selection-mode": unref(selectionMode),
|
|
date: innerDate.value,
|
|
"parsed-value": _ctx.parsedValue,
|
|
"disabled-date": unref(disabledDate),
|
|
"cell-class-name": unref(cellClassName),
|
|
onPick: handleDatePick
|
|
}, null, 8, ["selection-mode", "date", "parsed-value", "disabled-date", "cell-class-name"])) : createCommentVNode("v-if", true),
|
|
currentView.value === "year" ? (openBlock(), createBlock(YearTable, {
|
|
key: 1,
|
|
ref_key: "currentViewRef",
|
|
ref: currentViewRef,
|
|
"selection-mode": unref(selectionMode),
|
|
date: innerDate.value,
|
|
"disabled-date": unref(disabledDate),
|
|
"parsed-value": _ctx.parsedValue,
|
|
onPick: handleYearPick
|
|
}, null, 8, ["selection-mode", "date", "disabled-date", "parsed-value"])) : createCommentVNode("v-if", true),
|
|
currentView.value === "month" ? (openBlock(), createBlock(MonthTable, {
|
|
key: 2,
|
|
ref_key: "currentViewRef",
|
|
ref: currentViewRef,
|
|
"selection-mode": unref(selectionMode),
|
|
date: innerDate.value,
|
|
"parsed-value": _ctx.parsedValue,
|
|
"disabled-date": unref(disabledDate),
|
|
onPick: handleMonthPick
|
|
}, null, 8, ["selection-mode", "date", "parsed-value", "disabled-date"])) : createCommentVNode("v-if", true)
|
|
], 34)
|
|
], 2)
|
|
], 2),
|
|
withDirectives(createElementVNode("div", {
|
|
class: normalizeClass(unref(ppNs).e("footer"))
|
|
}, [
|
|
withDirectives(createVNode(unref(ElButton), {
|
|
text: "",
|
|
size: "small",
|
|
class: normalizeClass(unref(ppNs).e("link-btn")),
|
|
disabled: unref(disabledNow),
|
|
onClick: changeToNow
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(t)("el.datepicker.now")), 1)
|
|
]),
|
|
_: 1
|
|
}, 8, ["class", "disabled"]), [
|
|
[vShow, !unref(isMultipleType)]
|
|
]),
|
|
createVNode(unref(ElButton), {
|
|
plain: "",
|
|
size: "small",
|
|
class: normalizeClass(unref(ppNs).e("link-btn")),
|
|
disabled: unref(disabledConfirm),
|
|
onClick: onConfirm
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(t)("el.datepicker.confirm")), 1)
|
|
]),
|
|
_: 1
|
|
}, 8, ["class", "disabled"])
|
|
], 2), [
|
|
[vShow, unref(footerVisible)]
|
|
])
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var DatePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1t, [["__file", "panel-date-pick.vue"]]);
|
|
|
|
const panelDateRangeProps = buildProps({
|
|
...panelSharedProps,
|
|
...panelRangeSharedProps,
|
|
visible: Boolean
|
|
});
|
|
|
|
const useShortcut = (lang) => {
|
|
const { emit } = getCurrentInstance();
|
|
const attrs = useAttrs$1();
|
|
const slots = useSlots();
|
|
const handleShortcutClick = (shortcut) => {
|
|
const shortcutValues = isFunction$1(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 } = getCurrentInstance();
|
|
const { pickerNs } = inject(ROOT_PICKER_INJECTION_KEY);
|
|
const drpNs = useNamespace("date-range-picker");
|
|
const { t, lang } = useLocale();
|
|
const handleShortcutClick = useShortcut(lang);
|
|
const minDate = ref();
|
|
const maxDate = ref();
|
|
const rangeState = ref({
|
|
endDate: null,
|
|
selecting: false
|
|
});
|
|
const handleChangeRange = (val) => {
|
|
rangeState.value = val;
|
|
};
|
|
const handleRangeConfirm = (visible = false) => {
|
|
const _minDate = unref(minDate);
|
|
const _maxDate = 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 onReset = (parsedValue) => {
|
|
if (isArray$1(parsedValue) && parsedValue.length === 2) {
|
|
const [start, end] = parsedValue;
|
|
minDate.value = start;
|
|
leftDate.value = start;
|
|
maxDate.value = end;
|
|
onParsedValueChanged(unref(minDate), unref(maxDate));
|
|
} else {
|
|
restoreDefault();
|
|
}
|
|
};
|
|
const restoreDefault = () => {
|
|
const [start, end] = getDefaultValue(unref(defaultValue), {
|
|
lang: unref(lang),
|
|
unit,
|
|
unlinkPanels: props.unlinkPanels
|
|
});
|
|
minDate.value = void 0;
|
|
maxDate.value = void 0;
|
|
leftDate.value = start;
|
|
rightDate.value = end;
|
|
};
|
|
watch(defaultValue, (val) => {
|
|
if (val) {
|
|
restoreDefault();
|
|
}
|
|
}, { immediate: true });
|
|
watch(() => props.parsedValue, onReset, { immediate: true });
|
|
return {
|
|
minDate,
|
|
maxDate,
|
|
rangeState,
|
|
lang,
|
|
ppNs: pickerNs,
|
|
drpNs,
|
|
handleChangeRange,
|
|
handleRangeConfirm,
|
|
handleShortcutClick,
|
|
onSelect,
|
|
onReset,
|
|
t
|
|
};
|
|
};
|
|
|
|
const unit$2 = "month";
|
|
const _sfc_main$1s = /* @__PURE__ */ defineComponent({
|
|
__name: "panel-date-range",
|
|
props: panelDateRangeProps,
|
|
emits: [
|
|
"pick",
|
|
"set-picker-option",
|
|
"calendar-change",
|
|
"panel-change"
|
|
],
|
|
setup(__props, { emit }) {
|
|
const props = __props;
|
|
const pickerBase = inject("EP_PICKER_BASE");
|
|
const { disabledDate, cellClassName, defaultTime, clearable } = pickerBase.props;
|
|
const format = toRef(pickerBase.props, "format");
|
|
const shortcuts = toRef(pickerBase.props, "shortcuts");
|
|
const defaultValue = toRef(pickerBase.props, "defaultValue");
|
|
const { lang } = useLocale();
|
|
const leftDate = ref(dayjs().locale(lang.value));
|
|
const rightDate = ref(dayjs().locale(lang.value).add(1, unit$2));
|
|
const {
|
|
minDate,
|
|
maxDate,
|
|
rangeState,
|
|
ppNs,
|
|
drpNs,
|
|
handleChangeRange,
|
|
handleRangeConfirm,
|
|
handleShortcutClick,
|
|
onSelect,
|
|
onReset,
|
|
t
|
|
} = useRangePicker(props, {
|
|
defaultValue,
|
|
leftDate,
|
|
rightDate,
|
|
unit: unit$2,
|
|
onParsedValueChanged
|
|
});
|
|
watch(() => props.visible, (visible) => {
|
|
if (!visible && rangeState.value.selecting) {
|
|
onReset(props.parsedValue);
|
|
onSelect(false);
|
|
}
|
|
});
|
|
const dateUserInput = ref({
|
|
min: null,
|
|
max: null
|
|
});
|
|
const timeUserInput = ref({
|
|
min: null,
|
|
max: null
|
|
});
|
|
const leftLabel = computed(() => {
|
|
return `${leftDate.value.year()} ${t("el.datepicker.year")} ${t(`el.datepicker.month${leftDate.value.month() + 1}`)}`;
|
|
});
|
|
const rightLabel = computed(() => {
|
|
return `${rightDate.value.year()} ${t("el.datepicker.year")} ${t(`el.datepicker.month${rightDate.value.month() + 1}`)}`;
|
|
});
|
|
const leftYear = computed(() => {
|
|
return leftDate.value.year();
|
|
});
|
|
const leftMonth = computed(() => {
|
|
return leftDate.value.month();
|
|
});
|
|
const rightYear = computed(() => {
|
|
return rightDate.value.year();
|
|
});
|
|
const rightMonth = computed(() => {
|
|
return rightDate.value.month();
|
|
});
|
|
const hasShortcuts = computed(() => !!shortcuts.value.length);
|
|
const minVisibleDate = computed(() => {
|
|
if (dateUserInput.value.min !== null)
|
|
return dateUserInput.value.min;
|
|
if (minDate.value)
|
|
return minDate.value.format(dateFormat.value);
|
|
return "";
|
|
});
|
|
const maxVisibleDate = 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 = computed(() => {
|
|
if (timeUserInput.value.min !== null)
|
|
return timeUserInput.value.min;
|
|
if (minDate.value)
|
|
return minDate.value.format(timeFormat.value);
|
|
return "";
|
|
});
|
|
const maxVisibleTime = 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 = computed(() => {
|
|
return props.timeFormat || extractTimeFormat(format.value);
|
|
});
|
|
const dateFormat = computed(() => {
|
|
return props.dateFormat || extractDateFormat(format.value);
|
|
});
|
|
const isValidValue = (date) => {
|
|
return isValidRange(date) && (disabledDate ? !disabledDate(date[0].toDate()) && !disabledDate(date[1].toDate()) : true);
|
|
};
|
|
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 = 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 = computed(() => {
|
|
return props.unlinkPanels && rightYear.value * 12 + rightMonth.value - (leftYear.value * 12 + leftMonth.value + 1) >= 12;
|
|
});
|
|
const btnDisabled = computed(() => {
|
|
return !(minDate.value && maxDate.value && !rangeState.value.selecting && isValidRange([minDate.value, maxDate.value]));
|
|
});
|
|
const showTime = 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 = ref(false);
|
|
const maxTimePickerVisible = 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 && (!maxDate.value || maxDate.value.isBefore(minDate.value))) {
|
|
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 && (!minDate.value || minDate.value.isAfter(maxDate.value))) {
|
|
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());
|
|
} else {
|
|
maxTimePickerVisible.value = true;
|
|
maxDate.value = (maxDate.value || rightDate.value).hour(parsedValueD.hour()).minute(parsedValueD.minute()).second(parsedValueD.second());
|
|
rightDate.value = maxDate.value;
|
|
}
|
|
}
|
|
};
|
|
const handleTimeChange = (value, type) => {
|
|
timeUserInput.value[type] = null;
|
|
if (type === "min") {
|
|
leftDate.value = minDate.value;
|
|
minTimePickerVisible.value = false;
|
|
if (!maxDate.value || maxDate.value.isBefore(minDate.value)) {
|
|
maxDate.value = minDate.value;
|
|
}
|
|
} else {
|
|
rightDate.value = maxDate.value;
|
|
maxTimePickerVisible.value = false;
|
|
if (maxDate.value && maxDate.value.isBefore(minDate.value)) {
|
|
minDate.value = maxDate.value;
|
|
}
|
|
}
|
|
};
|
|
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(unref(defaultValue), {
|
|
lang: unref(lang),
|
|
unit: "month",
|
|
unlinkPanels: props.unlinkPanels
|
|
})[0];
|
|
rightDate.value = leftDate.value.add(1, "month");
|
|
maxDate.value = void 0;
|
|
minDate.value = void 0;
|
|
emit("pick", null);
|
|
};
|
|
const formatToString = (value) => {
|
|
return isArray$1(value) ? value.map((_) => _.format(format.value)) : value.format(format.value);
|
|
};
|
|
const parseUserInput = (value) => {
|
|
return isArray$1(value) ? value.map((_) => dayjs(_, format.value).locale(lang.value)) : dayjs(value, format.value).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$2) : maxDate2;
|
|
} else {
|
|
rightDate.value = leftDate.value.add(1, unit$2);
|
|
if (maxDate2) {
|
|
rightDate.value = rightDate.value.hour(maxDate2.hour()).minute(maxDate2.minute()).second(maxDate2.second());
|
|
}
|
|
}
|
|
}
|
|
emit("set-picker-option", ["isValidValue", isValidValue]);
|
|
emit("set-picker-option", ["parseUserInput", parseUserInput]);
|
|
emit("set-picker-option", ["formatToString", formatToString]);
|
|
emit("set-picker-option", ["handleClear", handleClear]);
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass([
|
|
unref(ppNs).b(),
|
|
unref(drpNs).b(),
|
|
{
|
|
"has-sidebar": _ctx.$slots.sidebar || unref(hasShortcuts),
|
|
"has-time": unref(showTime)
|
|
}
|
|
])
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ppNs).e("body-wrapper"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "sidebar", {
|
|
class: normalizeClass(unref(ppNs).e("sidebar"))
|
|
}),
|
|
unref(hasShortcuts) ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ppNs).e("sidebar"))
|
|
}, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(shortcuts), (shortcut, key) => {
|
|
return openBlock(), createElementBlock("button", {
|
|
key,
|
|
type: "button",
|
|
class: normalizeClass(unref(ppNs).e("shortcut")),
|
|
onClick: ($event) => unref(handleShortcutClick)(shortcut)
|
|
}, toDisplayString(shortcut.text), 11, ["onClick"]);
|
|
}), 128))
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ppNs).e("body"))
|
|
}, [
|
|
unref(showTime) ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(drpNs).e("time-header"))
|
|
}, [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(drpNs).e("editors-wrap"))
|
|
}, [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(drpNs).e("time-picker-wrap"))
|
|
}, [
|
|
createVNode(unref(ElInput), {
|
|
size: "small",
|
|
disabled: unref(rangeState).selecting,
|
|
placeholder: unref(t)("el.datepicker.startDate"),
|
|
class: normalizeClass(unref(drpNs).e("editor")),
|
|
"model-value": unref(minVisibleDate),
|
|
"validate-event": false,
|
|
onInput: (val) => handleDateInput(val, "min"),
|
|
onChange: (val) => handleDateChange(val, "min")
|
|
}, null, 8, ["disabled", "placeholder", "class", "model-value", "onInput", "onChange"])
|
|
], 2),
|
|
withDirectives((openBlock(), createElementBlock("span", {
|
|
class: normalizeClass(unref(drpNs).e("time-picker-wrap"))
|
|
}, [
|
|
createVNode(unref(ElInput), {
|
|
size: "small",
|
|
class: normalizeClass(unref(drpNs).e("editor")),
|
|
disabled: unref(rangeState).selecting,
|
|
placeholder: unref(t)("el.datepicker.startTime"),
|
|
"model-value": unref(minVisibleTime),
|
|
"validate-event": false,
|
|
onFocus: ($event) => minTimePickerVisible.value = true,
|
|
onInput: (val) => handleTimeInput(val, "min"),
|
|
onChange: (val) => handleTimeChange(val, "min")
|
|
}, null, 8, ["class", "disabled", "placeholder", "model-value", "onFocus", "onInput", "onChange"]),
|
|
createVNode(unref(TimePickPanel), {
|
|
visible: minTimePickerVisible.value,
|
|
format: unref(timeFormat),
|
|
"datetime-role": "start",
|
|
"parsed-value": leftDate.value,
|
|
onPick: handleMinTimePick
|
|
}, null, 8, ["visible", "format", "parsed-value"])
|
|
], 2)), [
|
|
[unref(ClickOutside), handleMinTimeClose]
|
|
])
|
|
], 2),
|
|
createElementVNode("span", null, [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(arrow_right_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
createElementVNode("span", {
|
|
class: normalizeClass([unref(drpNs).e("editors-wrap"), "is-right"])
|
|
}, [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(drpNs).e("time-picker-wrap"))
|
|
}, [
|
|
createVNode(unref(ElInput), {
|
|
size: "small",
|
|
class: normalizeClass(unref(drpNs).e("editor")),
|
|
disabled: unref(rangeState).selecting,
|
|
placeholder: unref(t)("el.datepicker.endDate"),
|
|
"model-value": unref(maxVisibleDate),
|
|
readonly: !unref(minDate),
|
|
"validate-event": false,
|
|
onInput: (val) => handleDateInput(val, "max"),
|
|
onChange: (val) => handleDateChange(val, "max")
|
|
}, null, 8, ["class", "disabled", "placeholder", "model-value", "readonly", "onInput", "onChange"])
|
|
], 2),
|
|
withDirectives((openBlock(), createElementBlock("span", {
|
|
class: normalizeClass(unref(drpNs).e("time-picker-wrap"))
|
|
}, [
|
|
createVNode(unref(ElInput), {
|
|
size: "small",
|
|
class: normalizeClass(unref(drpNs).e("editor")),
|
|
disabled: unref(rangeState).selecting,
|
|
placeholder: unref(t)("el.datepicker.endTime"),
|
|
"model-value": unref(maxVisibleTime),
|
|
readonly: !unref(minDate),
|
|
"validate-event": false,
|
|
onFocus: ($event) => unref(minDate) && (maxTimePickerVisible.value = true),
|
|
onInput: (val) => handleTimeInput(val, "max"),
|
|
onChange: (val) => handleTimeChange(val, "max")
|
|
}, null, 8, ["class", "disabled", "placeholder", "model-value", "readonly", "onFocus", "onInput", "onChange"]),
|
|
createVNode(unref(TimePickPanel), {
|
|
"datetime-role": "end",
|
|
visible: maxTimePickerVisible.value,
|
|
format: unref(timeFormat),
|
|
"parsed-value": rightDate.value,
|
|
onPick: handleMaxTimePick
|
|
}, null, 8, ["visible", "format", "parsed-value"])
|
|
], 2)), [
|
|
[unref(ClickOutside), handleMaxTimeClose]
|
|
])
|
|
], 2)
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", {
|
|
class: normalizeClass([[unref(ppNs).e("content"), unref(drpNs).e("content")], "is-left"])
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(drpNs).e("header"))
|
|
}, [
|
|
createElementVNode("button", {
|
|
type: "button",
|
|
class: normalizeClass([unref(ppNs).e("icon-btn"), "d-arrow-left"]),
|
|
"aria-label": unref(t)(`el.datepicker.prevYear`),
|
|
onClick: leftPrevYear
|
|
}, [
|
|
renderSlot(_ctx.$slots, "prev-year", {}, () => [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(d_arrow_left_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
])
|
|
], 10, ["aria-label"]),
|
|
createElementVNode("button", {
|
|
type: "button",
|
|
class: normalizeClass([unref(ppNs).e("icon-btn"), "arrow-left"]),
|
|
"aria-label": unref(t)(`el.datepicker.prevMonth`),
|
|
onClick: leftPrevMonth
|
|
}, [
|
|
renderSlot(_ctx.$slots, "prev-month", {}, () => [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(arrow_left_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
])
|
|
], 10, ["aria-label"]),
|
|
_ctx.unlinkPanels ? (openBlock(), createElementBlock("button", {
|
|
key: 0,
|
|
type: "button",
|
|
disabled: !unref(enableYearArrow),
|
|
class: normalizeClass([[unref(ppNs).e("icon-btn"), { "is-disabled": !unref(enableYearArrow) }], "d-arrow-right"]),
|
|
"aria-label": unref(t)(`el.datepicker.nextYear`),
|
|
onClick: leftNextYear
|
|
}, [
|
|
renderSlot(_ctx.$slots, "next-year", {}, () => [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(d_arrow_right_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
])
|
|
], 10, ["disabled", "aria-label"])) : createCommentVNode("v-if", true),
|
|
_ctx.unlinkPanels ? (openBlock(), createElementBlock("button", {
|
|
key: 1,
|
|
type: "button",
|
|
disabled: !unref(enableMonthArrow),
|
|
class: normalizeClass([[
|
|
unref(ppNs).e("icon-btn"),
|
|
{ "is-disabled": !unref(enableMonthArrow) }
|
|
], "arrow-right"]),
|
|
"aria-label": unref(t)(`el.datepicker.nextMonth`),
|
|
onClick: leftNextMonth
|
|
}, [
|
|
renderSlot(_ctx.$slots, "next-month", {}, () => [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(arrow_right_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
])
|
|
], 10, ["disabled", "aria-label"])) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", null, toDisplayString(unref(leftLabel)), 1)
|
|
], 2),
|
|
createVNode(DateTable, {
|
|
"selection-mode": "range",
|
|
date: leftDate.value,
|
|
"min-date": unref(minDate),
|
|
"max-date": unref(maxDate),
|
|
"range-state": unref(rangeState),
|
|
"disabled-date": unref(disabledDate),
|
|
"cell-class-name": unref(cellClassName),
|
|
onChangerange: unref(handleChangeRange),
|
|
onPick: handleRangePick,
|
|
onSelect: unref(onSelect)
|
|
}, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "cell-class-name", "onChangerange", "onSelect"])
|
|
], 2),
|
|
createElementVNode("div", {
|
|
class: normalizeClass([[unref(ppNs).e("content"), unref(drpNs).e("content")], "is-right"])
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(drpNs).e("header"))
|
|
}, [
|
|
_ctx.unlinkPanels ? (openBlock(), createElementBlock("button", {
|
|
key: 0,
|
|
type: "button",
|
|
disabled: !unref(enableYearArrow),
|
|
class: normalizeClass([[unref(ppNs).e("icon-btn"), { "is-disabled": !unref(enableYearArrow) }], "d-arrow-left"]),
|
|
"aria-label": unref(t)(`el.datepicker.prevYear`),
|
|
onClick: rightPrevYear
|
|
}, [
|
|
renderSlot(_ctx.$slots, "prev-year", {}, () => [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(d_arrow_left_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
])
|
|
], 10, ["disabled", "aria-label"])) : createCommentVNode("v-if", true),
|
|
_ctx.unlinkPanels ? (openBlock(), createElementBlock("button", {
|
|
key: 1,
|
|
type: "button",
|
|
disabled: !unref(enableMonthArrow),
|
|
class: normalizeClass([[
|
|
unref(ppNs).e("icon-btn"),
|
|
{ "is-disabled": !unref(enableMonthArrow) }
|
|
], "arrow-left"]),
|
|
"aria-label": unref(t)(`el.datepicker.prevMonth`),
|
|
onClick: rightPrevMonth
|
|
}, [
|
|
renderSlot(_ctx.$slots, "prev-month", {}, () => [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(arrow_left_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
])
|
|
], 10, ["disabled", "aria-label"])) : createCommentVNode("v-if", true),
|
|
createElementVNode("button", {
|
|
type: "button",
|
|
"aria-label": unref(t)(`el.datepicker.nextYear`),
|
|
class: normalizeClass([unref(ppNs).e("icon-btn"), "d-arrow-right"]),
|
|
onClick: rightNextYear
|
|
}, [
|
|
renderSlot(_ctx.$slots, "next-year", {}, () => [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(d_arrow_right_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
])
|
|
], 10, ["aria-label"]),
|
|
createElementVNode("button", {
|
|
type: "button",
|
|
class: normalizeClass([unref(ppNs).e("icon-btn"), "arrow-right"]),
|
|
"aria-label": unref(t)(`el.datepicker.nextMonth`),
|
|
onClick: rightNextMonth
|
|
}, [
|
|
renderSlot(_ctx.$slots, "next-month", {}, () => [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(arrow_right_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
])
|
|
], 10, ["aria-label"]),
|
|
createElementVNode("div", null, toDisplayString(unref(rightLabel)), 1)
|
|
], 2),
|
|
createVNode(DateTable, {
|
|
"selection-mode": "range",
|
|
date: rightDate.value,
|
|
"min-date": unref(minDate),
|
|
"max-date": unref(maxDate),
|
|
"range-state": unref(rangeState),
|
|
"disabled-date": unref(disabledDate),
|
|
"cell-class-name": unref(cellClassName),
|
|
onChangerange: unref(handleChangeRange),
|
|
onPick: handleRangePick,
|
|
onSelect: unref(onSelect)
|
|
}, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "cell-class-name", "onChangerange", "onSelect"])
|
|
], 2)
|
|
], 2)
|
|
], 2),
|
|
unref(showTime) ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ppNs).e("footer"))
|
|
}, [
|
|
unref(clearable) ? (openBlock(), createBlock(unref(ElButton), {
|
|
key: 0,
|
|
text: "",
|
|
size: "small",
|
|
class: normalizeClass(unref(ppNs).e("link-btn")),
|
|
onClick: handleClear
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(t)("el.datepicker.clear")), 1)
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : createCommentVNode("v-if", true),
|
|
createVNode(unref(ElButton), {
|
|
plain: "",
|
|
size: "small",
|
|
class: normalizeClass(unref(ppNs).e("link-btn")),
|
|
disabled: unref(btnDisabled),
|
|
onClick: ($event) => unref(handleRangeConfirm)(false)
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(t)("el.datepicker.confirm")), 1)
|
|
]),
|
|
_: 1
|
|
}, 8, ["class", "disabled", "onClick"])
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var DateRangePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1s, [["__file", "panel-date-range.vue"]]);
|
|
|
|
const panelMonthRangeProps = buildProps({
|
|
...panelRangeSharedProps
|
|
});
|
|
const panelMonthRangeEmits = [
|
|
"pick",
|
|
"set-picker-option",
|
|
"calendar-change"
|
|
];
|
|
|
|
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 = computed(() => {
|
|
return `${leftDate.value.year()} ${t("el.datepicker.year")}`;
|
|
});
|
|
const rightLabel = computed(() => {
|
|
return `${rightDate.value.year()} ${t("el.datepicker.year")}`;
|
|
});
|
|
const leftYear = computed(() => {
|
|
return leftDate.value.year();
|
|
});
|
|
const rightYear = 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 unit$1 = "year";
|
|
const __default__$11 = defineComponent({
|
|
name: "DatePickerMonthRange"
|
|
});
|
|
const _sfc_main$1r = /* @__PURE__ */ defineComponent({
|
|
...__default__$11,
|
|
props: panelMonthRangeProps,
|
|
emits: panelMonthRangeEmits,
|
|
setup(__props, { emit }) {
|
|
const props = __props;
|
|
const { lang } = useLocale();
|
|
const pickerBase = inject("EP_PICKER_BASE");
|
|
const { shortcuts, disabledDate } = pickerBase.props;
|
|
const format = toRef(pickerBase.props, "format");
|
|
const defaultValue = toRef(pickerBase.props, "defaultValue");
|
|
const leftDate = ref(dayjs().locale(lang.value));
|
|
const rightDate = ref(dayjs().locale(lang.value).add(1, unit$1));
|
|
const {
|
|
minDate,
|
|
maxDate,
|
|
rangeState,
|
|
ppNs,
|
|
drpNs,
|
|
handleChangeRange,
|
|
handleRangeConfirm,
|
|
handleShortcutClick,
|
|
onSelect
|
|
} = useRangePicker(props, {
|
|
defaultValue,
|
|
leftDate,
|
|
rightDate,
|
|
unit: unit$1,
|
|
onParsedValueChanged
|
|
});
|
|
const hasShortcuts = computed(() => !!shortcuts.length);
|
|
const {
|
|
leftPrevYear,
|
|
rightNextYear,
|
|
leftNextYear,
|
|
rightPrevYear,
|
|
leftLabel,
|
|
rightLabel,
|
|
leftYear,
|
|
rightYear
|
|
} = useMonthRangeHeader({
|
|
unlinkPanels: toRef(props, "unlinkPanels"),
|
|
leftDate,
|
|
rightDate
|
|
});
|
|
const enableYearArrow = 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;
|
|
}
|
|
emit("calendar-change", [minDate_.toDate(), maxDate_ && maxDate_.toDate()]);
|
|
maxDate.value = maxDate_;
|
|
minDate.value = minDate_;
|
|
if (!close)
|
|
return;
|
|
handleRangeConfirm();
|
|
};
|
|
const handleClear = () => {
|
|
leftDate.value = getDefaultValue(unref(defaultValue), {
|
|
lang: unref(lang),
|
|
unit: "year",
|
|
unlinkPanels: props.unlinkPanels
|
|
})[0];
|
|
rightDate.value = leftDate.value.add(1, "year");
|
|
emit("pick", null);
|
|
};
|
|
const formatToString = (value) => {
|
|
return isArray$1(value) ? value.map((_) => _.format(format.value)) : value.format(format.value);
|
|
};
|
|
const parseUserInput = (value) => {
|
|
return isArray$1(value) ? value.map((_) => dayjs(_, format.value).locale(lang.value)) : dayjs(value, format.value).locale(lang.value);
|
|
};
|
|
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$1) : maxDate2;
|
|
} else {
|
|
rightDate.value = leftDate.value.add(1, unit$1);
|
|
}
|
|
}
|
|
emit("set-picker-option", ["isValidValue", isValidRange]);
|
|
emit("set-picker-option", ["formatToString", formatToString]);
|
|
emit("set-picker-option", ["parseUserInput", parseUserInput]);
|
|
emit("set-picker-option", ["handleClear", handleClear]);
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass([
|
|
unref(ppNs).b(),
|
|
unref(drpNs).b(),
|
|
{
|
|
"has-sidebar": Boolean(_ctx.$slots.sidebar) || unref(hasShortcuts)
|
|
}
|
|
])
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ppNs).e("body-wrapper"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "sidebar", {
|
|
class: normalizeClass(unref(ppNs).e("sidebar"))
|
|
}),
|
|
unref(hasShortcuts) ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ppNs).e("sidebar"))
|
|
}, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(shortcuts), (shortcut, key) => {
|
|
return openBlock(), createElementBlock("button", {
|
|
key,
|
|
type: "button",
|
|
class: normalizeClass(unref(ppNs).e("shortcut")),
|
|
onClick: ($event) => unref(handleShortcutClick)(shortcut)
|
|
}, toDisplayString(shortcut.text), 11, ["onClick"]);
|
|
}), 128))
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ppNs).e("body"))
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass([[unref(ppNs).e("content"), unref(drpNs).e("content")], "is-left"])
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(drpNs).e("header"))
|
|
}, [
|
|
createElementVNode("button", {
|
|
type: "button",
|
|
class: normalizeClass([unref(ppNs).e("icon-btn"), "d-arrow-left"]),
|
|
onClick: unref(leftPrevYear)
|
|
}, [
|
|
renderSlot(_ctx.$slots, "prev-year", {}, () => [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(d_arrow_left_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
])
|
|
], 10, ["onClick"]),
|
|
_ctx.unlinkPanels ? (openBlock(), createElementBlock("button", {
|
|
key: 0,
|
|
type: "button",
|
|
disabled: !unref(enableYearArrow),
|
|
class: normalizeClass([[
|
|
unref(ppNs).e("icon-btn"),
|
|
{ [unref(ppNs).is("disabled")]: !unref(enableYearArrow) }
|
|
], "d-arrow-right"]),
|
|
onClick: unref(leftNextYear)
|
|
}, [
|
|
renderSlot(_ctx.$slots, "next-year", {}, () => [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(d_arrow_right_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
])
|
|
], 10, ["disabled", "onClick"])) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", null, toDisplayString(unref(leftLabel)), 1)
|
|
], 2),
|
|
createVNode(MonthTable, {
|
|
"selection-mode": "range",
|
|
date: leftDate.value,
|
|
"min-date": unref(minDate),
|
|
"max-date": unref(maxDate),
|
|
"range-state": unref(rangeState),
|
|
"disabled-date": unref(disabledDate),
|
|
onChangerange: unref(handleChangeRange),
|
|
onPick: handleRangePick,
|
|
onSelect: unref(onSelect)
|
|
}, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "onChangerange", "onSelect"])
|
|
], 2),
|
|
createElementVNode("div", {
|
|
class: normalizeClass([[unref(ppNs).e("content"), unref(drpNs).e("content")], "is-right"])
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(drpNs).e("header"))
|
|
}, [
|
|
_ctx.unlinkPanels ? (openBlock(), createElementBlock("button", {
|
|
key: 0,
|
|
type: "button",
|
|
disabled: !unref(enableYearArrow),
|
|
class: normalizeClass([[unref(ppNs).e("icon-btn"), { "is-disabled": !unref(enableYearArrow) }], "d-arrow-left"]),
|
|
onClick: unref(rightPrevYear)
|
|
}, [
|
|
renderSlot(_ctx.$slots, "prev-year", {}, () => [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(d_arrow_left_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
])
|
|
], 10, ["disabled", "onClick"])) : createCommentVNode("v-if", true),
|
|
createElementVNode("button", {
|
|
type: "button",
|
|
class: normalizeClass([unref(ppNs).e("icon-btn"), "d-arrow-right"]),
|
|
onClick: unref(rightNextYear)
|
|
}, [
|
|
renderSlot(_ctx.$slots, "next-year", {}, () => [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(d_arrow_right_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
])
|
|
], 10, ["onClick"]),
|
|
createElementVNode("div", null, toDisplayString(unref(rightLabel)), 1)
|
|
], 2),
|
|
createVNode(MonthTable, {
|
|
"selection-mode": "range",
|
|
date: rightDate.value,
|
|
"min-date": unref(minDate),
|
|
"max-date": unref(maxDate),
|
|
"range-state": unref(rangeState),
|
|
"disabled-date": unref(disabledDate),
|
|
onChangerange: unref(handleChangeRange),
|
|
onPick: handleRangePick,
|
|
onSelect: 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$1r, [["__file", "panel-month-range.vue"]]);
|
|
|
|
const panelYearRangeProps = buildProps({
|
|
...panelRangeSharedProps
|
|
});
|
|
const panelYearRangeEmits = [
|
|
"pick",
|
|
"set-picker-option",
|
|
"calendar-change"
|
|
];
|
|
|
|
const useYearRangeHeader = ({
|
|
unlinkPanels,
|
|
leftDate,
|
|
rightDate
|
|
}) => {
|
|
const leftPrevYear = () => {
|
|
leftDate.value = leftDate.value.subtract(10, "year");
|
|
if (!unlinkPanels.value) {
|
|
rightDate.value = rightDate.value.subtract(10, "year");
|
|
}
|
|
};
|
|
const rightNextYear = () => {
|
|
if (!unlinkPanels.value) {
|
|
leftDate.value = leftDate.value.add(10, "year");
|
|
}
|
|
rightDate.value = rightDate.value.add(10, "year");
|
|
};
|
|
const leftNextYear = () => {
|
|
leftDate.value = leftDate.value.add(10, "year");
|
|
};
|
|
const rightPrevYear = () => {
|
|
rightDate.value = rightDate.value.subtract(10, "year");
|
|
};
|
|
const leftLabel = computed(() => {
|
|
const leftStartDate = Math.floor(leftDate.value.year() / 10) * 10;
|
|
return `${leftStartDate}-${leftStartDate + 9}`;
|
|
});
|
|
const rightLabel = computed(() => {
|
|
const rightStartDate = Math.floor(rightDate.value.year() / 10) * 10;
|
|
return `${rightStartDate}-${rightStartDate + 9}`;
|
|
});
|
|
const leftYear = computed(() => {
|
|
const leftEndDate = Math.floor(leftDate.value.year() / 10) * 10 + 9;
|
|
return leftEndDate;
|
|
});
|
|
const rightYear = computed(() => {
|
|
const rightStartDate = Math.floor(rightDate.value.year() / 10) * 10;
|
|
return rightStartDate;
|
|
});
|
|
return {
|
|
leftPrevYear,
|
|
rightNextYear,
|
|
leftNextYear,
|
|
rightPrevYear,
|
|
leftLabel,
|
|
rightLabel,
|
|
leftYear,
|
|
rightYear
|
|
};
|
|
};
|
|
|
|
const unit = "year";
|
|
const __default__$10 = defineComponent({
|
|
name: "DatePickerYearRange"
|
|
});
|
|
const _sfc_main$1q = /* @__PURE__ */ defineComponent({
|
|
...__default__$10,
|
|
props: panelYearRangeProps,
|
|
emits: panelYearRangeEmits,
|
|
setup(__props, { emit }) {
|
|
const props = __props;
|
|
const { lang } = useLocale();
|
|
const leftDate = ref(dayjs().locale(lang.value));
|
|
const rightDate = ref(leftDate.value.add(10, "year"));
|
|
const { pickerNs: ppNs } = inject(ROOT_PICKER_INJECTION_KEY);
|
|
const drpNs = useNamespace("date-range-picker");
|
|
const hasShortcuts = computed(() => !!shortcuts.length);
|
|
const panelKls = computed(() => [
|
|
ppNs.b(),
|
|
drpNs.b(),
|
|
{
|
|
"has-sidebar": Boolean(useSlots().sidebar) || hasShortcuts.value
|
|
}
|
|
]);
|
|
const leftPanelKls = computed(() => {
|
|
return {
|
|
content: [ppNs.e("content"), drpNs.e("content"), "is-left"],
|
|
arrowLeftBtn: [ppNs.e("icon-btn"), "d-arrow-left"],
|
|
arrowRightBtn: [
|
|
ppNs.e("icon-btn"),
|
|
{ [ppNs.is("disabled")]: !enableYearArrow.value },
|
|
"d-arrow-right"
|
|
]
|
|
};
|
|
});
|
|
const rightPanelKls = computed(() => {
|
|
return {
|
|
content: [ppNs.e("content"), drpNs.e("content"), "is-right"],
|
|
arrowLeftBtn: [
|
|
ppNs.e("icon-btn"),
|
|
{ "is-disabled": !enableYearArrow.value },
|
|
"d-arrow-left"
|
|
],
|
|
arrowRightBtn: [ppNs.e("icon-btn"), "d-arrow-right"]
|
|
};
|
|
});
|
|
const handleShortcutClick = useShortcut(lang);
|
|
const {
|
|
leftPrevYear,
|
|
rightNextYear,
|
|
leftNextYear,
|
|
rightPrevYear,
|
|
leftLabel,
|
|
rightLabel,
|
|
leftYear,
|
|
rightYear
|
|
} = useYearRangeHeader({
|
|
unlinkPanels: toRef(props, "unlinkPanels"),
|
|
leftDate,
|
|
rightDate
|
|
});
|
|
const enableYearArrow = computed(() => {
|
|
return props.unlinkPanels && rightYear.value > leftYear.value + 1;
|
|
});
|
|
const minDate = ref();
|
|
const maxDate = ref();
|
|
const rangeState = ref({
|
|
endDate: null,
|
|
selecting: false
|
|
});
|
|
const handleChangeRange = (val) => {
|
|
rangeState.value = val;
|
|
};
|
|
const handleRangePick = (val, close = true) => {
|
|
const minDate_ = val.minDate;
|
|
const maxDate_ = val.maxDate;
|
|
if (maxDate.value === maxDate_ && minDate.value === minDate_) {
|
|
return;
|
|
}
|
|
emit("calendar-change", [minDate_.toDate(), maxDate_ && maxDate_.toDate()]);
|
|
maxDate.value = maxDate_;
|
|
minDate.value = minDate_;
|
|
if (!close)
|
|
return;
|
|
handleConfirm();
|
|
};
|
|
const handleConfirm = (visible = false) => {
|
|
if (isValidRange([minDate.value, maxDate.value])) {
|
|
emit("pick", [minDate.value, maxDate.value], visible);
|
|
}
|
|
};
|
|
const onSelect = (selecting) => {
|
|
rangeState.value.selecting = selecting;
|
|
if (!selecting) {
|
|
rangeState.value.endDate = null;
|
|
}
|
|
};
|
|
const pickerBase = inject("EP_PICKER_BASE");
|
|
const { shortcuts, disabledDate } = pickerBase.props;
|
|
const format = toRef(pickerBase.props, "format");
|
|
const defaultValue = toRef(pickerBase.props, "defaultValue");
|
|
const getDefaultValue = () => {
|
|
let start;
|
|
if (isArray$1(defaultValue.value)) {
|
|
const left = dayjs(defaultValue.value[0]);
|
|
let right = dayjs(defaultValue.value[1]);
|
|
if (!props.unlinkPanels) {
|
|
right = left.add(10, unit);
|
|
}
|
|
return [left, right];
|
|
} else if (defaultValue.value) {
|
|
start = dayjs(defaultValue.value);
|
|
} else {
|
|
start = dayjs();
|
|
}
|
|
start = start.locale(lang.value);
|
|
return [start, start.add(10, unit)];
|
|
};
|
|
watch(() => defaultValue.value, (val) => {
|
|
if (val) {
|
|
const defaultArr = getDefaultValue();
|
|
leftDate.value = defaultArr[0];
|
|
rightDate.value = defaultArr[1];
|
|
}
|
|
}, { immediate: true });
|
|
watch(() => props.parsedValue, (newVal) => {
|
|
if (newVal && newVal.length === 2) {
|
|
minDate.value = newVal[0];
|
|
maxDate.value = newVal[1];
|
|
leftDate.value = minDate.value;
|
|
if (props.unlinkPanels && maxDate.value) {
|
|
const minDateYear = minDate.value.year();
|
|
const maxDateYear = maxDate.value.year();
|
|
rightDate.value = minDateYear === maxDateYear ? maxDate.value.add(10, "year") : maxDate.value;
|
|
} else {
|
|
rightDate.value = leftDate.value.add(10, "year");
|
|
}
|
|
} else {
|
|
const defaultArr = getDefaultValue();
|
|
minDate.value = void 0;
|
|
maxDate.value = void 0;
|
|
leftDate.value = defaultArr[0];
|
|
rightDate.value = defaultArr[1];
|
|
}
|
|
}, { immediate: true });
|
|
const parseUserInput = (value) => {
|
|
return isArray$1(value) ? value.map((_) => dayjs(_, format.value).locale(lang.value)) : dayjs(value, format.value).locale(lang.value);
|
|
};
|
|
const formatToString = (value) => {
|
|
return isArray$1(value) ? value.map((day) => day.format(format.value)) : value.format(format.value);
|
|
};
|
|
const isValidValue = (date) => {
|
|
return isValidRange(date) && (disabledDate ? !disabledDate(date[0].toDate()) && !disabledDate(date[1].toDate()) : true);
|
|
};
|
|
const handleClear = () => {
|
|
const defaultArr = getDefaultValue();
|
|
leftDate.value = defaultArr[0];
|
|
rightDate.value = defaultArr[1];
|
|
maxDate.value = void 0;
|
|
minDate.value = void 0;
|
|
emit("pick", null);
|
|
};
|
|
emit("set-picker-option", ["isValidValue", isValidValue]);
|
|
emit("set-picker-option", ["parseUserInput", parseUserInput]);
|
|
emit("set-picker-option", ["formatToString", formatToString]);
|
|
emit("set-picker-option", ["handleClear", handleClear]);
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass(unref(panelKls))
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ppNs).e("body-wrapper"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "sidebar", {
|
|
class: normalizeClass(unref(ppNs).e("sidebar"))
|
|
}),
|
|
unref(hasShortcuts) ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ppNs).e("sidebar"))
|
|
}, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(shortcuts), (shortcut, key) => {
|
|
return openBlock(), createElementBlock("button", {
|
|
key,
|
|
type: "button",
|
|
class: normalizeClass(unref(ppNs).e("shortcut")),
|
|
onClick: ($event) => unref(handleShortcutClick)(shortcut)
|
|
}, toDisplayString(shortcut.text), 11, ["onClick"]);
|
|
}), 128))
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ppNs).e("body"))
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(leftPanelKls).content)
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(drpNs).e("header"))
|
|
}, [
|
|
createElementVNode("button", {
|
|
type: "button",
|
|
class: normalizeClass(unref(leftPanelKls).arrowLeftBtn),
|
|
onClick: unref(leftPrevYear)
|
|
}, [
|
|
renderSlot(_ctx.$slots, "prev-year", {}, () => [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(d_arrow_left_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
])
|
|
], 10, ["onClick"]),
|
|
_ctx.unlinkPanels ? (openBlock(), createElementBlock("button", {
|
|
key: 0,
|
|
type: "button",
|
|
disabled: !unref(enableYearArrow),
|
|
class: normalizeClass(unref(leftPanelKls).arrowRightBtn),
|
|
onClick: unref(leftNextYear)
|
|
}, [
|
|
renderSlot(_ctx.$slots, "next-year", {}, () => [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(d_arrow_right_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
])
|
|
], 10, ["disabled", "onClick"])) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", null, toDisplayString(unref(leftLabel)), 1)
|
|
], 2),
|
|
createVNode(YearTable, {
|
|
"selection-mode": "range",
|
|
date: leftDate.value,
|
|
"min-date": minDate.value,
|
|
"max-date": maxDate.value,
|
|
"range-state": rangeState.value,
|
|
"disabled-date": unref(disabledDate),
|
|
onChangerange: handleChangeRange,
|
|
onPick: handleRangePick,
|
|
onSelect
|
|
}, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date"])
|
|
], 2),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(rightPanelKls).content)
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(drpNs).e("header"))
|
|
}, [
|
|
_ctx.unlinkPanels ? (openBlock(), createElementBlock("button", {
|
|
key: 0,
|
|
type: "button",
|
|
disabled: !unref(enableYearArrow),
|
|
class: normalizeClass(unref(rightPanelKls).arrowLeftBtn),
|
|
onClick: unref(rightPrevYear)
|
|
}, [
|
|
renderSlot(_ctx.$slots, "prev-year", {}, () => [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(d_arrow_left_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
])
|
|
], 10, ["disabled", "onClick"])) : createCommentVNode("v-if", true),
|
|
createElementVNode("button", {
|
|
type: "button",
|
|
class: normalizeClass(unref(rightPanelKls).arrowRightBtn),
|
|
onClick: unref(rightNextYear)
|
|
}, [
|
|
renderSlot(_ctx.$slots, "next-year", {}, () => [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(d_arrow_right_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
])
|
|
], 10, ["onClick"]),
|
|
createElementVNode("div", null, toDisplayString(unref(rightLabel)), 1)
|
|
], 2),
|
|
createVNode(YearTable, {
|
|
"selection-mode": "range",
|
|
date: rightDate.value,
|
|
"min-date": minDate.value,
|
|
"max-date": maxDate.value,
|
|
"range-state": rangeState.value,
|
|
"disabled-date": unref(disabledDate),
|
|
onChangerange: handleChangeRange,
|
|
onPick: handleRangePick,
|
|
onSelect
|
|
}, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date"])
|
|
], 2)
|
|
], 2)
|
|
], 2)
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var YearRangePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1q, [["__file", "panel-year-range.vue"]]);
|
|
|
|
const getPanel = function(type) {
|
|
switch (type) {
|
|
case "daterange":
|
|
case "datetimerange": {
|
|
return DateRangePickPanel;
|
|
}
|
|
case "monthrange": {
|
|
return MonthRangePickPanel;
|
|
}
|
|
case "yearrange": {
|
|
return YearRangePickPanel;
|
|
}
|
|
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 = defineComponent({
|
|
name: "ElDatePicker",
|
|
install: null,
|
|
props: datePickerProps,
|
|
emits: ["update:modelValue"],
|
|
setup(props, {
|
|
expose,
|
|
emit,
|
|
slots
|
|
}) {
|
|
const ns = useNamespace("picker-panel");
|
|
provide("ElPopperOptions", reactive(toRef(props, "popperOptions")));
|
|
provide(ROOT_PICKER_INJECTION_KEY, {
|
|
slots,
|
|
pickerNs: ns
|
|
});
|
|
const commonPicker = 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 createVNode(CommonPicker, mergeProps(props, {
|
|
"format": format,
|
|
"type": props.type,
|
|
"ref": commonPicker,
|
|
"onUpdate:modelValue": onModelValueUpdated
|
|
}), {
|
|
default: (scopedProps) => createVNode(Component, scopedProps, {
|
|
"prev-month": slots["prev-month"],
|
|
"next-month": slots["next-month"],
|
|
"prev-year": slots["prev-year"],
|
|
"next-year": slots["next-year"]
|
|
}),
|
|
"range-separator": slots["range-separator"]
|
|
});
|
|
};
|
|
}
|
|
});
|
|
|
|
const ElDatePicker = withInstall(DatePicker);
|
|
|
|
const descriptionsKey = Symbol("elDescriptions");
|
|
|
|
var ElDescriptionsCell = defineComponent({
|
|
name: "ElDescriptionsCell",
|
|
props: {
|
|
cell: {
|
|
type: Object
|
|
},
|
|
tag: {
|
|
type: String,
|
|
default: "td"
|
|
},
|
|
type: {
|
|
type: String
|
|
}
|
|
},
|
|
setup() {
|
|
const descriptions = inject(descriptionsKey, {});
|
|
return {
|
|
descriptions
|
|
};
|
|
},
|
|
render() {
|
|
var _a;
|
|
const item = getNormalizedProps(this.cell);
|
|
const directives = (((_a = this.cell) == null ? void 0 : _a.dirs) || []).map((dire) => {
|
|
const { dir, arg, modifiers, value } = dire;
|
|
return [dir, value, arg, modifiers];
|
|
});
|
|
const { border, direction } = this.descriptions;
|
|
const isVertical = direction === "vertical";
|
|
const renderLabel = () => {
|
|
var _a2, _b, _c;
|
|
return ((_c = (_b = (_a2 = this.cell) == null ? void 0 : _a2.children) == null ? void 0 : _b.label) == null ? void 0 : _c.call(_b)) || item.label;
|
|
};
|
|
const renderContent = () => {
|
|
var _a2, _b, _c;
|
|
return (_c = (_b = (_a2 = this.cell) == null ? void 0 : _a2.children) == null ? void 0 : _b.default) == null ? void 0 : _c.call(_b);
|
|
};
|
|
const span = item.span;
|
|
const rowspan = item.rowspan;
|
|
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 withDirectives(h$1(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,
|
|
rowspan: isVertical ? 1 : rowspan
|
|
}, renderLabel()), directives);
|
|
case "content":
|
|
return withDirectives(h$1(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,
|
|
rowspan: isVertical ? rowspan * 2 - 1 : rowspan
|
|
}, renderContent()), directives);
|
|
default: {
|
|
const label = renderLabel();
|
|
return withDirectives(h$1("td", {
|
|
style,
|
|
class: [ns.e("cell"), align],
|
|
colSpan: span,
|
|
rowspan
|
|
}, [
|
|
!isNil(label) ? h$1("span", {
|
|
class: [ns.e("label"), labelClassName]
|
|
}, label) : void 0,
|
|
h$1("span", {
|
|
class: [ns.e("content"), className]
|
|
}, renderContent())
|
|
]), directives);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
const descriptionsRowProps = buildProps({
|
|
row: {
|
|
type: definePropType(Array),
|
|
default: () => []
|
|
}
|
|
});
|
|
|
|
const __default__$$ = defineComponent({
|
|
name: "ElDescriptionsRow"
|
|
});
|
|
const _sfc_main$1p = /* @__PURE__ */ defineComponent({
|
|
...__default__$$,
|
|
props: descriptionsRowProps,
|
|
setup(__props) {
|
|
const descriptions = inject(descriptionsKey, {});
|
|
return (_ctx, _cache) => {
|
|
return unref(descriptions).direction === "vertical" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
createElementVNode("tr", null, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.row, (cell, _index) => {
|
|
return openBlock(), createBlock(unref(ElDescriptionsCell), {
|
|
key: `tr1-${_index}`,
|
|
cell,
|
|
tag: "th",
|
|
type: "label"
|
|
}, null, 8, ["cell"]);
|
|
}), 128))
|
|
]),
|
|
createElementVNode("tr", null, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.row, (cell, _index) => {
|
|
return openBlock(), createBlock(unref(ElDescriptionsCell), {
|
|
key: `tr2-${_index}`,
|
|
cell,
|
|
tag: "td",
|
|
type: "content"
|
|
}, null, 8, ["cell"]);
|
|
}), 128))
|
|
])
|
|
], 64)) : (openBlock(), createElementBlock("tr", { key: 1 }, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.row, (cell, _index) => {
|
|
return openBlock(), createElementBlock(Fragment, {
|
|
key: `tr3-${_index}`
|
|
}, [
|
|
unref(descriptions).border ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
createVNode(unref(ElDescriptionsCell), {
|
|
cell,
|
|
tag: "td",
|
|
type: "label"
|
|
}, null, 8, ["cell"]),
|
|
createVNode(unref(ElDescriptionsCell), {
|
|
cell,
|
|
tag: "td",
|
|
type: "content"
|
|
}, null, 8, ["cell"])
|
|
], 64)) : (openBlock(), createBlock(unref(ElDescriptionsCell), {
|
|
key: 1,
|
|
cell,
|
|
tag: "td",
|
|
type: "both"
|
|
}, null, 8, ["cell"]))
|
|
], 64);
|
|
}), 128))
|
|
]));
|
|
};
|
|
}
|
|
});
|
|
var ElDescriptionsRow = /* @__PURE__ */ _export_sfc(_sfc_main$1p, [["__file", "descriptions-row.vue"]]);
|
|
|
|
const descriptionProps = buildProps({
|
|
border: Boolean,
|
|
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__$_ = defineComponent({
|
|
name: "ElDescriptions"
|
|
});
|
|
const _sfc_main$1o = /* @__PURE__ */ defineComponent({
|
|
...__default__$_,
|
|
props: descriptionProps,
|
|
setup(__props) {
|
|
const props = __props;
|
|
const ns = useNamespace("descriptions");
|
|
const descriptionsSize = useFormSize();
|
|
const slots = useSlots();
|
|
provide(descriptionsKey, props);
|
|
const descriptionKls = 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 = () => {
|
|
if (!slots.default)
|
|
return [];
|
|
const children = flattedChildren(slots.default()).filter((node) => {
|
|
var _a;
|
|
return ((_a = node == null ? void 0 : node.type) == null ? void 0 : _a.name) === "ElDescriptionsItem";
|
|
});
|
|
const rows = [];
|
|
let temp = [];
|
|
let count = props.column;
|
|
let totalSpan = 0;
|
|
const rowspanTemp = [];
|
|
children.forEach((node, index) => {
|
|
var _a, _b, _c;
|
|
const span = ((_a = node.props) == null ? void 0 : _a.span) || 1;
|
|
const rowspan = ((_b = node.props) == null ? void 0 : _b.rowspan) || 1;
|
|
const rowNo = rows.length;
|
|
rowspanTemp[rowNo] || (rowspanTemp[rowNo] = 0);
|
|
if (rowspan > 1) {
|
|
for (let i = 1; i < rowspan; i++) {
|
|
rowspanTemp[_c = rowNo + i] || (rowspanTemp[_c] = 0);
|
|
rowspanTemp[rowNo + i]++;
|
|
totalSpan++;
|
|
}
|
|
}
|
|
if (rowspanTemp[rowNo] > 0) {
|
|
count -= rowspanTemp[rowNo];
|
|
rowspanTemp[rowNo] = 0;
|
|
}
|
|
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 openBlock(), createElementBlock("div", {
|
|
class: normalizeClass(unref(descriptionKls))
|
|
}, [
|
|
_ctx.title || _ctx.extra || _ctx.$slots.title || _ctx.$slots.extra ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).e("header"))
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("title"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "title", {}, () => [
|
|
createTextVNode(toDisplayString(_ctx.title), 1)
|
|
])
|
|
], 2),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("extra"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "extra", {}, () => [
|
|
createTextVNode(toDisplayString(_ctx.extra), 1)
|
|
])
|
|
], 2)
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("body"))
|
|
}, [
|
|
createElementVNode("table", {
|
|
class: normalizeClass([unref(ns).e("table"), unref(ns).is("bordered", _ctx.border)])
|
|
}, [
|
|
createElementVNode("tbody", null, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(getRows(), (row, _index) => {
|
|
return openBlock(), createBlock(ElDescriptionsRow, {
|
|
key: _index,
|
|
row
|
|
}, null, 8, ["row"]);
|
|
}), 128))
|
|
])
|
|
], 2)
|
|
], 2)
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var Descriptions = /* @__PURE__ */ _export_sfc(_sfc_main$1o, [["__file", "description.vue"]]);
|
|
|
|
const descriptionItemProps = buildProps({
|
|
label: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
span: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
rowspan: {
|
|
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 DescriptionItem = defineComponent({
|
|
name: "ElDescriptionsItem",
|
|
props: descriptionItemProps
|
|
});
|
|
|
|
const ElDescriptions = withInstall(Descriptions, {
|
|
DescriptionsItem: DescriptionItem
|
|
});
|
|
const ElDescriptionsItem = withNoopInstall(DescriptionItem);
|
|
|
|
const overlayProps = buildProps({
|
|
mask: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
customMaskEvent: Boolean,
|
|
overlayClass: {
|
|
type: definePropType([
|
|
String,
|
|
Array,
|
|
Object
|
|
])
|
|
},
|
|
zIndex: {
|
|
type: definePropType([String, Number])
|
|
}
|
|
});
|
|
const overlayEmits = {
|
|
click: (evt) => evt instanceof MouseEvent
|
|
};
|
|
const BLOCK = "overlay";
|
|
var Overlay$1 = defineComponent({
|
|
name: "ElOverlay",
|
|
props: overlayProps,
|
|
emits: overlayEmits,
|
|
setup(props, { slots, emit }) {
|
|
const ns = useNamespace(BLOCK);
|
|
const onMaskClick = (e) => {
|
|
emit("click", e);
|
|
};
|
|
const { onClick, onMousedown, onMouseup } = useSameTarget(props.customMaskEvent ? void 0 : onMaskClick);
|
|
return () => {
|
|
return props.mask ? createVNode("div", {
|
|
class: [ns.b(), props.overlayClass],
|
|
style: {
|
|
zIndex: props.zIndex
|
|
},
|
|
onClick,
|
|
onMousedown,
|
|
onMouseup
|
|
}, [renderSlot(slots, "default")], PatchFlags.STYLE | PatchFlags.CLASS | PatchFlags.PROPS, ["onClick", "onMouseup", "onMousedown"]) : h$1("div", {
|
|
class: props.overlayClass,
|
|
style: {
|
|
zIndex: props.zIndex,
|
|
position: "fixed",
|
|
top: "0px",
|
|
right: "0px",
|
|
bottom: "0px",
|
|
left: "0px"
|
|
}
|
|
}, [renderSlot(slots, "default")]);
|
|
};
|
|
}
|
|
});
|
|
|
|
const ElOverlay = Overlay$1;
|
|
|
|
const dialogInjectionKey = Symbol("dialogInjectionKey");
|
|
|
|
const dialogContentProps = buildProps({
|
|
center: Boolean,
|
|
alignCenter: Boolean,
|
|
closeIcon: {
|
|
type: iconPropType
|
|
},
|
|
draggable: Boolean,
|
|
overflow: Boolean,
|
|
fullscreen: Boolean,
|
|
showClose: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
ariaLevel: {
|
|
type: String,
|
|
default: "2"
|
|
}
|
|
});
|
|
const dialogContentEmits = {
|
|
close: () => true
|
|
};
|
|
|
|
const __default__$Z = defineComponent({ name: "ElDialogContent" });
|
|
const _sfc_main$1n = /* @__PURE__ */ defineComponent({
|
|
...__default__$Z,
|
|
props: dialogContentProps,
|
|
emits: dialogContentEmits,
|
|
setup(__props, { expose }) {
|
|
const props = __props;
|
|
const { t } = useLocale();
|
|
const { Close } = CloseComponents;
|
|
const { dialogRef, headerRef, bodyId, ns, style } = inject(dialogInjectionKey);
|
|
const { focusTrapRef } = inject(FOCUS_TRAP_INJECTION_KEY);
|
|
const dialogKls = computed(() => [
|
|
ns.b(),
|
|
ns.is("fullscreen", props.fullscreen),
|
|
ns.is("draggable", props.draggable),
|
|
ns.is("align-center", props.alignCenter),
|
|
{ [ns.m("center")]: props.center }
|
|
]);
|
|
const composedDialogRef = composeRefs(focusTrapRef, dialogRef);
|
|
const draggable = computed(() => props.draggable);
|
|
const overflow = computed(() => props.overflow);
|
|
const { resetPosition } = useDraggable(dialogRef, headerRef, draggable, overflow);
|
|
expose({
|
|
resetPosition
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
ref: unref(composedDialogRef),
|
|
class: normalizeClass(unref(dialogKls)),
|
|
style: normalizeStyle(unref(style)),
|
|
tabindex: "-1"
|
|
}, [
|
|
createElementVNode("header", {
|
|
ref_key: "headerRef",
|
|
ref: headerRef,
|
|
class: normalizeClass([unref(ns).e("header"), { "show-close": _ctx.showClose }])
|
|
}, [
|
|
renderSlot(_ctx.$slots, "header", {}, () => [
|
|
createElementVNode("span", {
|
|
role: "heading",
|
|
"aria-level": _ctx.ariaLevel,
|
|
class: normalizeClass(unref(ns).e("title"))
|
|
}, toDisplayString(_ctx.title), 11, ["aria-level"])
|
|
]),
|
|
_ctx.showClose ? (openBlock(), createElementBlock("button", {
|
|
key: 0,
|
|
"aria-label": unref(t)("el.dialog.close"),
|
|
class: normalizeClass(unref(ns).e("headerbtn")),
|
|
type: "button",
|
|
onClick: ($event) => _ctx.$emit("close")
|
|
}, [
|
|
createVNode(unref(ElIcon), {
|
|
class: normalizeClass(unref(ns).e("close"))
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.closeIcon || unref(Close))))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])
|
|
], 10, ["aria-label", "onClick"])) : createCommentVNode("v-if", true)
|
|
], 2),
|
|
createElementVNode("div", {
|
|
id: unref(bodyId),
|
|
class: normalizeClass(unref(ns).e("body"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 10, ["id"]),
|
|
_ctx.$slots.footer ? (openBlock(), createElementBlock("footer", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).e("footer"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "footer")
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
], 6);
|
|
};
|
|
}
|
|
});
|
|
var ElDialogContent = /* @__PURE__ */ _export_sfc(_sfc_main$1n, [["__file", "dialog-content.vue"]]);
|
|
|
|
const dialogProps = buildProps({
|
|
...dialogContentProps,
|
|
appendToBody: Boolean,
|
|
appendTo: {
|
|
type: definePropType([String, Object]),
|
|
default: "body"
|
|
},
|
|
beforeClose: {
|
|
type: definePropType(Function)
|
|
},
|
|
destroyOnClose: Boolean,
|
|
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: Boolean,
|
|
modalClass: String,
|
|
width: {
|
|
type: [String, Number]
|
|
},
|
|
zIndex: {
|
|
type: Number
|
|
},
|
|
trapFocus: Boolean,
|
|
headerAriaLevel: {
|
|
type: String,
|
|
default: "2"
|
|
}
|
|
});
|
|
const dialogEmits = {
|
|
open: () => true,
|
|
opened: () => true,
|
|
close: () => true,
|
|
closed: () => true,
|
|
[UPDATE_MODEL_EVENT]: (value) => isBoolean(value),
|
|
openAutoFocus: () => true,
|
|
closeAutoFocus: () => true
|
|
};
|
|
|
|
const useDialog = (props, targetRef) => {
|
|
var _a;
|
|
const instance = getCurrentInstance();
|
|
const emit = instance.emit;
|
|
const { nextZIndex } = useZIndex();
|
|
let lastPosition = "";
|
|
const titleId = useId();
|
|
const bodyId = useId();
|
|
const visible = ref(false);
|
|
const closed = ref(false);
|
|
const rendered = ref(false);
|
|
const zIndex = ref((_a = props.zIndex) != null ? _a : nextZIndex());
|
|
let openTimer = void 0;
|
|
let closeTimer = void 0;
|
|
const namespace = useGlobalConfig("namespace", defaultNamespace);
|
|
const style = 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 = 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 _a2;
|
|
if (((_a2 = event.detail) == null ? void 0 : _a2.focusReason) === "pointer") {
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
if (props.lockScroll) {
|
|
useLockscreen(visible);
|
|
}
|
|
function onCloseRequested() {
|
|
if (props.closeOnPressEscape) {
|
|
handleClose();
|
|
}
|
|
}
|
|
watch(() => props.modelValue, (val) => {
|
|
if (val) {
|
|
closed.value = false;
|
|
open();
|
|
rendered.value = true;
|
|
zIndex.value = isUndefined$1(props.zIndex) ? nextZIndex() : zIndex.value++;
|
|
nextTick(() => {
|
|
emit("open");
|
|
if (targetRef.value) {
|
|
targetRef.value.scrollTop = 0;
|
|
}
|
|
});
|
|
} else {
|
|
if (visible.value) {
|
|
close();
|
|
}
|
|
}
|
|
});
|
|
watch(() => props.fullscreen, (val) => {
|
|
if (!targetRef.value)
|
|
return;
|
|
if (val) {
|
|
lastPosition = targetRef.value.style.transform;
|
|
targetRef.value.style.transform = "";
|
|
} else {
|
|
targetRef.value.style.transform = lastPosition;
|
|
}
|
|
});
|
|
onMounted(() => {
|
|
if (props.modelValue) {
|
|
visible.value = true;
|
|
rendered.value = true;
|
|
open();
|
|
}
|
|
});
|
|
return {
|
|
afterEnter,
|
|
afterLeave,
|
|
beforeLeave,
|
|
handleClose,
|
|
onModalClick,
|
|
close,
|
|
doClose,
|
|
onOpenAutoFocus,
|
|
onCloseAutoFocus,
|
|
onCloseRequested,
|
|
onFocusoutPrevented,
|
|
titleId,
|
|
bodyId,
|
|
closed,
|
|
style,
|
|
overlayDialogStyle,
|
|
rendered,
|
|
visible,
|
|
zIndex
|
|
};
|
|
};
|
|
|
|
const __default__$Y = defineComponent({
|
|
name: "ElDialog",
|
|
inheritAttrs: false
|
|
});
|
|
const _sfc_main$1m = /* @__PURE__ */ defineComponent({
|
|
...__default__$Y,
|
|
props: dialogProps,
|
|
emits: dialogEmits,
|
|
setup(__props, { expose }) {
|
|
const props = __props;
|
|
const slots = 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"
|
|
}, computed(() => !!slots.title));
|
|
const ns = useNamespace("dialog");
|
|
const dialogRef = ref();
|
|
const headerRef = ref();
|
|
const dialogContentRef = ref();
|
|
const {
|
|
visible,
|
|
titleId,
|
|
bodyId,
|
|
style,
|
|
overlayDialogStyle,
|
|
rendered,
|
|
zIndex,
|
|
afterEnter,
|
|
afterLeave,
|
|
beforeLeave,
|
|
handleClose,
|
|
onModalClick,
|
|
onOpenAutoFocus,
|
|
onCloseAutoFocus,
|
|
onCloseRequested,
|
|
onFocusoutPrevented
|
|
} = useDialog(props, dialogRef);
|
|
provide(dialogInjectionKey, {
|
|
dialogRef,
|
|
headerRef,
|
|
bodyId,
|
|
ns,
|
|
rendered,
|
|
style
|
|
});
|
|
const overlayEvent = useSameTarget(onModalClick);
|
|
const draggable = computed(() => props.draggable && !props.fullscreen);
|
|
const resetPosition = () => {
|
|
var _a;
|
|
(_a = dialogContentRef.value) == null ? void 0 : _a.resetPosition();
|
|
};
|
|
expose({
|
|
visible,
|
|
dialogContentRef,
|
|
resetPosition
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createBlock(unref(ElTeleport$1), {
|
|
to: _ctx.appendTo,
|
|
disabled: _ctx.appendTo !== "body" ? false : !_ctx.appendToBody
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(Transition, {
|
|
name: "dialog-fade",
|
|
onAfterEnter: unref(afterEnter),
|
|
onAfterLeave: unref(afterLeave),
|
|
onBeforeLeave: unref(beforeLeave),
|
|
persisted: ""
|
|
}, {
|
|
default: withCtx(() => [
|
|
withDirectives(createVNode(unref(ElOverlay), {
|
|
"custom-mask-event": "",
|
|
mask: _ctx.modal,
|
|
"overlay-class": _ctx.modalClass,
|
|
"z-index": unref(zIndex)
|
|
}, {
|
|
default: withCtx(() => [
|
|
createElementVNode("div", {
|
|
role: "dialog",
|
|
"aria-modal": "true",
|
|
"aria-label": _ctx.title || void 0,
|
|
"aria-labelledby": !_ctx.title ? unref(titleId) : void 0,
|
|
"aria-describedby": unref(bodyId),
|
|
class: normalizeClass(`${unref(ns).namespace.value}-overlay-dialog`),
|
|
style: normalizeStyle(unref(overlayDialogStyle)),
|
|
onClick: unref(overlayEvent).onClick,
|
|
onMousedown: unref(overlayEvent).onMousedown,
|
|
onMouseup: unref(overlayEvent).onMouseup
|
|
}, [
|
|
createVNode(unref(ElFocusTrap), {
|
|
loop: "",
|
|
trapped: unref(visible),
|
|
"focus-start-el": "container",
|
|
onFocusAfterTrapped: unref(onOpenAutoFocus),
|
|
onFocusAfterReleased: unref(onCloseAutoFocus),
|
|
onFocusoutPrevented: unref(onFocusoutPrevented),
|
|
onReleaseRequested: unref(onCloseRequested)
|
|
}, {
|
|
default: withCtx(() => [
|
|
unref(rendered) ? (openBlock(), createBlock(ElDialogContent, mergeProps({
|
|
key: 0,
|
|
ref_key: "dialogContentRef",
|
|
ref: dialogContentRef
|
|
}, _ctx.$attrs, {
|
|
center: _ctx.center,
|
|
"align-center": _ctx.alignCenter,
|
|
"close-icon": _ctx.closeIcon,
|
|
draggable: unref(draggable),
|
|
overflow: _ctx.overflow,
|
|
fullscreen: _ctx.fullscreen,
|
|
"show-close": _ctx.showClose,
|
|
title: _ctx.title,
|
|
"aria-level": _ctx.headerAriaLevel,
|
|
onClose: unref(handleClose)
|
|
}), createSlots({
|
|
header: withCtx(() => [
|
|
!_ctx.$slots.title ? renderSlot(_ctx.$slots, "header", {
|
|
key: 0,
|
|
close: unref(handleClose),
|
|
titleId: unref(titleId),
|
|
titleClass: unref(ns).e("title")
|
|
}) : renderSlot(_ctx.$slots, "title", { key: 1 })
|
|
]),
|
|
default: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "default")
|
|
]),
|
|
_: 2
|
|
}, [
|
|
_ctx.$slots.footer ? {
|
|
name: "footer",
|
|
fn: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "footer")
|
|
])
|
|
} : void 0
|
|
]), 1040, ["center", "align-center", "close-icon", "draggable", "overflow", "fullscreen", "show-close", "title", "aria-level", "onClose"])) : createCommentVNode("v-if", true)
|
|
]),
|
|
_: 3
|
|
}, 8, ["trapped", "onFocusAfterTrapped", "onFocusAfterReleased", "onFocusoutPrevented", "onReleaseRequested"])
|
|
], 46, ["aria-label", "aria-labelledby", "aria-describedby", "onClick", "onMousedown", "onMouseup"])
|
|
]),
|
|
_: 3
|
|
}, 8, ["mask", "overlay-class", "z-index"]), [
|
|
[vShow, unref(visible)]
|
|
])
|
|
]),
|
|
_: 3
|
|
}, 8, ["onAfterEnter", "onAfterLeave", "onBeforeLeave"])
|
|
]),
|
|
_: 3
|
|
}, 8, ["to", "disabled"]);
|
|
};
|
|
}
|
|
});
|
|
var Dialog = /* @__PURE__ */ _export_sfc(_sfc_main$1m, [["__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__$X = defineComponent({
|
|
name: "ElDivider"
|
|
});
|
|
const _sfc_main$1l = /* @__PURE__ */ defineComponent({
|
|
...__default__$X,
|
|
props: dividerProps,
|
|
setup(__props) {
|
|
const props = __props;
|
|
const ns = useNamespace("divider");
|
|
const dividerStyle = computed(() => {
|
|
return ns.cssVar({
|
|
"border-style": props.borderStyle
|
|
});
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass([unref(ns).b(), unref(ns).m(_ctx.direction)]),
|
|
style: normalizeStyle(unref(dividerStyle)),
|
|
role: "separator"
|
|
}, [
|
|
_ctx.$slots.default && _ctx.direction !== "vertical" ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass([unref(ns).e("text"), unref(ns).is(_ctx.contentPosition)])
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
], 6);
|
|
};
|
|
}
|
|
});
|
|
var Divider = /* @__PURE__ */ _export_sfc(_sfc_main$1l, [["__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
|
|
},
|
|
headerAriaLevel: {
|
|
type: String,
|
|
default: "2"
|
|
}
|
|
});
|
|
const drawerEmits = dialogEmits;
|
|
|
|
const __default__$W = defineComponent({
|
|
name: "ElDrawer",
|
|
inheritAttrs: false
|
|
});
|
|
const _sfc_main$1k = /* @__PURE__ */ defineComponent({
|
|
...__default__$W,
|
|
props: drawerProps,
|
|
emits: drawerEmits,
|
|
setup(__props, { expose }) {
|
|
const props = __props;
|
|
const slots = useSlots();
|
|
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"
|
|
}, computed(() => !!slots.title));
|
|
const drawerRef = ref();
|
|
const focusStartRef = ref();
|
|
const ns = useNamespace("drawer");
|
|
const { t } = useLocale();
|
|
const {
|
|
afterEnter,
|
|
afterLeave,
|
|
beforeLeave,
|
|
visible,
|
|
rendered,
|
|
titleId,
|
|
bodyId,
|
|
zIndex,
|
|
onModalClick,
|
|
onOpenAutoFocus,
|
|
onCloseAutoFocus,
|
|
onFocusoutPrevented,
|
|
onCloseRequested,
|
|
handleClose
|
|
} = useDialog(props, drawerRef);
|
|
const isHorizontal = computed(() => props.direction === "rtl" || props.direction === "ltr");
|
|
const drawerSize = computed(() => addUnit(props.size));
|
|
expose({
|
|
handleClose,
|
|
afterEnter,
|
|
afterLeave
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createBlock(unref(ElTeleport$1), {
|
|
to: _ctx.appendTo,
|
|
disabled: _ctx.appendTo !== "body" ? false : !_ctx.appendToBody
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(Transition, {
|
|
name: unref(ns).b("fade"),
|
|
onAfterEnter: unref(afterEnter),
|
|
onAfterLeave: unref(afterLeave),
|
|
onBeforeLeave: unref(beforeLeave),
|
|
persisted: ""
|
|
}, {
|
|
default: withCtx(() => [
|
|
withDirectives(createVNode(unref(ElOverlay), {
|
|
mask: _ctx.modal,
|
|
"overlay-class": _ctx.modalClass,
|
|
"z-index": unref(zIndex),
|
|
onClick: unref(onModalClick)
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(ElFocusTrap), {
|
|
loop: "",
|
|
trapped: unref(visible),
|
|
"focus-trap-el": drawerRef.value,
|
|
"focus-start-el": focusStartRef.value,
|
|
onFocusAfterTrapped: unref(onOpenAutoFocus),
|
|
onFocusAfterReleased: unref(onCloseAutoFocus),
|
|
onFocusoutPrevented: unref(onFocusoutPrevented),
|
|
onReleaseRequested: unref(onCloseRequested)
|
|
}, {
|
|
default: withCtx(() => [
|
|
createElementVNode("div", mergeProps({
|
|
ref_key: "drawerRef",
|
|
ref: drawerRef,
|
|
"aria-modal": "true",
|
|
"aria-label": _ctx.title || void 0,
|
|
"aria-labelledby": !_ctx.title ? unref(titleId) : void 0,
|
|
"aria-describedby": unref(bodyId)
|
|
}, _ctx.$attrs, {
|
|
class: [unref(ns).b(), _ctx.direction, unref(visible) && "open"],
|
|
style: unref(isHorizontal) ? "width: " + unref(drawerSize) : "height: " + unref(drawerSize),
|
|
role: "dialog",
|
|
onClick: withModifiers(() => {
|
|
}, ["stop"])
|
|
}), [
|
|
createElementVNode("span", {
|
|
ref_key: "focusStartRef",
|
|
ref: focusStartRef,
|
|
class: normalizeClass(unref(ns).e("sr-focus")),
|
|
tabindex: "-1"
|
|
}, null, 2),
|
|
_ctx.withHeader ? (openBlock(), createElementBlock("header", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).e("header"))
|
|
}, [
|
|
!_ctx.$slots.title ? renderSlot(_ctx.$slots, "header", {
|
|
key: 0,
|
|
close: unref(handleClose),
|
|
titleId: unref(titleId),
|
|
titleClass: unref(ns).e("title")
|
|
}, () => [
|
|
!_ctx.$slots.title ? (openBlock(), createElementBlock("span", {
|
|
key: 0,
|
|
id: unref(titleId),
|
|
role: "heading",
|
|
"aria-level": _ctx.headerAriaLevel,
|
|
class: normalizeClass(unref(ns).e("title"))
|
|
}, toDisplayString(_ctx.title), 11, ["id", "aria-level"])) : createCommentVNode("v-if", true)
|
|
]) : renderSlot(_ctx.$slots, "title", { key: 1 }, () => [
|
|
createCommentVNode(" DEPRECATED SLOT ")
|
|
]),
|
|
_ctx.showClose ? (openBlock(), createElementBlock("button", {
|
|
key: 2,
|
|
"aria-label": unref(t)("el.drawer.close"),
|
|
class: normalizeClass(unref(ns).e("close-btn")),
|
|
type: "button",
|
|
onClick: unref(handleClose)
|
|
}, [
|
|
createVNode(unref(ElIcon), {
|
|
class: normalizeClass(unref(ns).e("close"))
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(close_default))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])
|
|
], 10, ["aria-label", "onClick"])) : createCommentVNode("v-if", true)
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
unref(rendered) ? (openBlock(), createElementBlock("div", {
|
|
key: 1,
|
|
id: unref(bodyId),
|
|
class: normalizeClass(unref(ns).e("body"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 10, ["id"])) : createCommentVNode("v-if", true),
|
|
_ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
|
|
key: 2,
|
|
class: normalizeClass(unref(ns).e("footer"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "footer")
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
], 16, ["aria-label", "aria-labelledby", "aria-describedby", "onClick"])
|
|
]),
|
|
_: 3
|
|
}, 8, ["trapped", "focus-trap-el", "focus-start-el", "onFocusAfterTrapped", "onFocusAfterReleased", "onFocusoutPrevented", "onReleaseRequested"])
|
|
]),
|
|
_: 3
|
|
}, 8, ["mask", "overlay-class", "z-index", "onClick"]), [
|
|
[vShow, unref(visible)]
|
|
])
|
|
]),
|
|
_: 3
|
|
}, 8, ["name", "onAfterEnter", "onAfterLeave", "onBeforeLeave"])
|
|
]),
|
|
_: 3
|
|
}, 8, ["to", "disabled"]);
|
|
};
|
|
}
|
|
});
|
|
var Drawer = /* @__PURE__ */ _export_sfc(_sfc_main$1k, [["__file", "drawer.vue"]]);
|
|
|
|
const ElDrawer = withInstall(Drawer);
|
|
|
|
const _sfc_main$1j = /* @__PURE__ */ defineComponent({
|
|
inheritAttrs: false
|
|
});
|
|
function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
|
|
return renderSlot(_ctx.$slots, "default");
|
|
}
|
|
var Collection = /* @__PURE__ */ _export_sfc(_sfc_main$1j, [["render", _sfc_render$n], ["__file", "collection.vue"]]);
|
|
|
|
const _sfc_main$1i = /* @__PURE__ */ defineComponent({
|
|
name: "ElCollectionItem",
|
|
inheritAttrs: false
|
|
});
|
|
function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
|
|
return renderSlot(_ctx.$slots, "default");
|
|
}
|
|
var CollectionItem = /* @__PURE__ */ _export_sfc(_sfc_main$1i, [["render", _sfc_render$m], ["__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 = ref(null);
|
|
const itemMap = /* @__PURE__ */ new Map();
|
|
const getItems = () => {
|
|
const collectionEl = 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));
|
|
};
|
|
provide(COLLECTION_INJECTION_KEY, {
|
|
itemMap,
|
|
getItems,
|
|
collectionRef
|
|
});
|
|
}
|
|
};
|
|
const ElCollectionItem = {
|
|
...CollectionItem,
|
|
name: COLLECTION_ITEM_NAME,
|
|
setup(_, { attrs }) {
|
|
const collectionItemRef = ref(null);
|
|
const collectionInjection = inject(COLLECTION_INJECTION_KEY, void 0);
|
|
provide(COLLECTION_ITEM_INJECTION_KEY, {
|
|
collectionItemRef
|
|
});
|
|
onMounted(() => {
|
|
const collectionItemEl = unref(collectionItemRef);
|
|
if (collectionItemEl) {
|
|
collectionInjection.itemMap.set(collectionItemEl, {
|
|
ref: collectionItemEl,
|
|
...attrs
|
|
});
|
|
}
|
|
});
|
|
onBeforeUnmount(() => {
|
|
const collectionItemEl = 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$1h = defineComponent({
|
|
name: "ElRovingFocusGroupImpl",
|
|
inheritAttrs: false,
|
|
props: rovingFocusGroupProps,
|
|
emits: [CURRENT_TAB_ID_CHANGE_EVT, "entryFocus"],
|
|
setup(props, { emit }) {
|
|
var _a;
|
|
const currentTabbedId = ref((_a = props.currentTabId || props.defaultCurrentTabId) != null ? _a : null);
|
|
const isBackingOut = ref(false);
|
|
const isClickFocus = ref(false);
|
|
const rovingFocusGroupRef = ref(null);
|
|
const { getItems } = inject(COLLECTION_INJECTION_KEY$1, void 0);
|
|
const rovingFocusGroupRootStyle = 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 = !unref(isClickFocus);
|
|
const { target, currentTarget } = e;
|
|
if (target === currentTarget && isKeyboardFocus && !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 === 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);
|
|
};
|
|
provide(ROVING_FOCUS_GROUP_INJECTION_KEY, {
|
|
currentTabbedId: readonly(currentTabbedId),
|
|
loop: toRef(props, "loop"),
|
|
tabIndex: computed(() => {
|
|
return unref(isBackingOut) ? -1 : 0;
|
|
}),
|
|
rovingFocusGroupRef,
|
|
rovingFocusGroupRootStyle,
|
|
orientation: toRef(props, "orientation"),
|
|
dir: toRef(props, "dir"),
|
|
onItemFocus,
|
|
onItemShiftTab,
|
|
onBlur,
|
|
onFocus,
|
|
onMousedown
|
|
});
|
|
watch(() => props.currentTabId, (val) => {
|
|
currentTabbedId.value = val != null ? val : null;
|
|
});
|
|
useEventListener(rovingFocusGroupRef, ENTRY_FOCUS_EVT, handleEntryFocus);
|
|
}
|
|
});
|
|
function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
|
|
return renderSlot(_ctx.$slots, "default");
|
|
}
|
|
var ElRovingFocusGroupImpl = /* @__PURE__ */ _export_sfc(_sfc_main$1h, [["render", _sfc_render$l], ["__file", "roving-focus-group-impl.vue"]]);
|
|
|
|
const _sfc_main$1g = defineComponent({
|
|
name: "ElRovingFocusGroup",
|
|
components: {
|
|
ElFocusGroupCollection: ElCollection$1,
|
|
ElRovingFocusGroupImpl
|
|
}
|
|
});
|
|
function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
|
|
const _component_el_roving_focus_group_impl = resolveComponent("el-roving-focus-group-impl");
|
|
const _component_el_focus_group_collection = resolveComponent("el-focus-group-collection");
|
|
return openBlock(), createBlock(_component_el_focus_group_collection, null, {
|
|
default: withCtx(() => [
|
|
createVNode(_component_el_roving_focus_group_impl, normalizeProps(guardReactiveProps(_ctx.$attrs)), {
|
|
default: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "default")
|
|
]),
|
|
_: 3
|
|
}, 16)
|
|
]),
|
|
_: 3
|
|
});
|
|
}
|
|
var ElRovingFocusGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1g, [["render", _sfc_render$k], ["__file", "roving-focus-group.vue"]]);
|
|
|
|
const _sfc_main$1f = 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 } = inject(ROVING_FOCUS_GROUP_INJECTION_KEY, void 0);
|
|
const { getItems } = inject(COLLECTION_INJECTION_KEY$1, void 0);
|
|
const id = useId();
|
|
const rovingFocusGroupItemRef = ref(null);
|
|
const handleMousedown = composeEventHandlers((e) => {
|
|
emit("mousedown", e);
|
|
}, (e) => {
|
|
if (!props.focusable) {
|
|
e.preventDefault();
|
|
} else {
|
|
onItemFocus(unref(id));
|
|
}
|
|
});
|
|
const handleFocus = composeEventHandlers((e) => {
|
|
emit("focus", e);
|
|
}, () => {
|
|
onItemFocus(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;
|
|
}
|
|
}
|
|
nextTick(() => {
|
|
focusFirst(elements);
|
|
});
|
|
}
|
|
});
|
|
const isCurrentTab = computed(() => currentTabbedId.value === unref(id));
|
|
provide(ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, {
|
|
rovingFocusGroupItemRef,
|
|
tabIndex: computed(() => unref(isCurrentTab) ? 0 : -1),
|
|
handleMousedown,
|
|
handleFocus,
|
|
handleKeydown
|
|
});
|
|
return {
|
|
id,
|
|
handleKeydown,
|
|
handleFocus,
|
|
handleMousedown
|
|
};
|
|
}
|
|
});
|
|
function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
|
|
const _component_el_roving_focus_collection_item = resolveComponent("el-roving-focus-collection-item");
|
|
return openBlock(), createBlock(_component_el_roving_focus_collection_item, {
|
|
id: _ctx.id,
|
|
focusable: _ctx.focusable,
|
|
active: _ctx.active
|
|
}, {
|
|
default: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "default")
|
|
]),
|
|
_: 3
|
|
}, 8, ["id", "focusable", "active"]);
|
|
}
|
|
var ElRovingFocusItem = /* @__PURE__ */ _export_sfc(_sfc_main$1f, [["render", _sfc_render$j], ["__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: Boolean,
|
|
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$1e = 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 = getCurrentInstance();
|
|
const ns = useNamespace("dropdown");
|
|
const { t } = useLocale();
|
|
const triggeringElementRef = ref();
|
|
const referenceElementRef = ref();
|
|
const popperRef = ref(null);
|
|
const contentRef = ref(null);
|
|
const scrollbar = ref(null);
|
|
const currentTabId = ref(null);
|
|
const isUsingKeyboard = ref(false);
|
|
const triggerKeys = [EVENT_CODE.enter, EVENT_CODE.space, EVENT_CODE.down];
|
|
const wrapStyle = computed(() => ({
|
|
maxHeight: addUnit(props.maxHeight)
|
|
}));
|
|
const dropdownTriggerKls = computed(() => [ns.m(dropdownSize.value)]);
|
|
const trigger = computed(() => castArray$1(props.trigger));
|
|
const defaultTriggerId = useId().value;
|
|
const triggerId = computed(() => props.id || defaultTriggerId);
|
|
watch([triggeringElementRef, trigger], ([triggeringElement, trigger2], [prevTriggeringElement]) => {
|
|
var _a, _b, _c;
|
|
if ((_a = prevTriggeringElement == null ? void 0 : prevTriggeringElement.$el) == null ? void 0 : _a.removeEventListener) {
|
|
prevTriggeringElement.$el.removeEventListener("pointerenter", onAutofocusTriggerEnter);
|
|
}
|
|
if ((_b = triggeringElement == null ? void 0 : triggeringElement.$el) == null ? void 0 : _b.removeEventListener) {
|
|
triggeringElement.$el.removeEventListener("pointerenter", onAutofocusTriggerEnter);
|
|
}
|
|
if (((_c = triggeringElement == null ? void 0 : triggeringElement.$el) == null ? void 0 : _c.addEventListener) && trigger2.includes("hover")) {
|
|
triggeringElement.$el.addEventListener("pointerenter", onAutofocusTriggerEnter);
|
|
}
|
|
}, { immediate: true });
|
|
onBeforeUnmount(() => {
|
|
var _a, _b;
|
|
if ((_b = (_a = triggeringElementRef.value) == null ? void 0 : _a.$el) == null ? void 0 : _b.removeEventListener) {
|
|
triggeringElementRef.value.$el.removeEventListener("pointerenter", onAutofocusTriggerEnter);
|
|
}
|
|
});
|
|
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 = useFormSize();
|
|
function commandHandler(...args) {
|
|
emit("command", ...args);
|
|
}
|
|
function onAutofocusTriggerEnter() {
|
|
var _a, _b;
|
|
(_b = (_a = triggeringElementRef.value) == null ? void 0 : _a.$el) == null ? void 0 : _b.focus();
|
|
}
|
|
function onItemEnter() {
|
|
}
|
|
function onItemLeave() {
|
|
const contentEl = unref(contentRef);
|
|
trigger.value.includes("hover") && (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);
|
|
}
|
|
provide(DROPDOWN_INJECTION_KEY, {
|
|
contentRef,
|
|
role: computed(() => props.role),
|
|
triggerId,
|
|
isUsingKeyboard,
|
|
onItemEnter,
|
|
onItemLeave
|
|
});
|
|
provide("elDropdown", {
|
|
instance: _instance,
|
|
dropdownSize,
|
|
handleClick,
|
|
commandHandler,
|
|
trigger: toRef(props, "trigger"),
|
|
hideOnClick: 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$i(_ctx, _cache, $props, $setup, $data, $options) {
|
|
var _a;
|
|
const _component_el_dropdown_collection = resolveComponent("el-dropdown-collection");
|
|
const _component_el_roving_focus_group = resolveComponent("el-roving-focus-group");
|
|
const _component_el_scrollbar = resolveComponent("el-scrollbar");
|
|
const _component_el_only_child = resolveComponent("el-only-child");
|
|
const _component_el_tooltip = resolveComponent("el-tooltip");
|
|
const _component_el_button = resolveComponent("el-button");
|
|
const _component_arrow_down = resolveComponent("arrow-down");
|
|
const _component_el_icon = resolveComponent("el-icon");
|
|
const _component_el_button_group = resolveComponent("el-button-group");
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass([_ctx.ns.b(), _ctx.ns.is("disabled", _ctx.disabled)])
|
|
}, [
|
|
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
|
|
}, createSlots({
|
|
content: withCtx(() => [
|
|
createVNode(_component_el_scrollbar, {
|
|
ref: "scrollbar",
|
|
"wrap-style": _ctx.wrapStyle,
|
|
tag: "div",
|
|
"view-class": _ctx.ns.e("list")
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_component_el_roving_focus_group, {
|
|
loop: _ctx.loop,
|
|
"current-tab-id": _ctx.currentTabId,
|
|
orientation: "horizontal",
|
|
onCurrentTabIdChange: _ctx.handleCurrentTabIdChange,
|
|
onEntryFocus: _ctx.handleEntryFocus
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_component_el_dropdown_collection, null, {
|
|
default: withCtx(() => [
|
|
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: withCtx(() => [
|
|
createVNode(_component_el_only_child, {
|
|
id: _ctx.triggerId,
|
|
ref: "triggeringElementRef",
|
|
role: "button",
|
|
tabindex: _ctx.tabindex
|
|
}, {
|
|
default: withCtx(() => [
|
|
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 ? (openBlock(), createBlock(_component_el_button_group, { key: 0 }, {
|
|
default: withCtx(() => [
|
|
createVNode(_component_el_button, mergeProps({ ref: "referenceElementRef" }, _ctx.buttonProps, {
|
|
size: _ctx.dropdownSize,
|
|
type: _ctx.type,
|
|
disabled: _ctx.disabled,
|
|
tabindex: _ctx.tabindex,
|
|
onClick: _ctx.handlerMainButtonClick
|
|
}), {
|
|
default: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "default")
|
|
]),
|
|
_: 3
|
|
}, 16, ["size", "type", "disabled", "tabindex", "onClick"]),
|
|
createVNode(_component_el_button, 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: withCtx(() => [
|
|
createVNode(_component_el_icon, {
|
|
class: normalizeClass(_ctx.ns.e("icon"))
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_component_arrow_down)
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])
|
|
]),
|
|
_: 1
|
|
}, 16, ["id", "size", "type", "class", "disabled", "tabindex", "aria-label"])
|
|
]),
|
|
_: 3
|
|
})) : createCommentVNode("v-if", true)
|
|
], 2);
|
|
}
|
|
var Dropdown = /* @__PURE__ */ _export_sfc(_sfc_main$1e, [["render", _sfc_render$i], ["__file", "dropdown.vue"]]);
|
|
|
|
const _sfc_main$1d = defineComponent({
|
|
name: "DropdownItemImpl",
|
|
components: {
|
|
ElIcon
|
|
},
|
|
props: dropdownItemProps,
|
|
emits: ["pointermove", "pointerleave", "click", "clickimpl"],
|
|
setup(_, { emit }) {
|
|
const ns = useNamespace("dropdown");
|
|
const { role: menuRole } = inject(DROPDOWN_INJECTION_KEY, void 0);
|
|
const { collectionItemRef: dropdownCollectionItemRef } = inject(COLLECTION_ITEM_INJECTION_KEY, void 0);
|
|
const { collectionItemRef: rovingFocusCollectionItemRef } = inject(COLLECTION_ITEM_INJECTION_KEY$1, void 0);
|
|
const {
|
|
rovingFocusGroupItemRef,
|
|
tabIndex,
|
|
handleFocus,
|
|
handleKeydown: handleItemKeydown,
|
|
handleMousedown
|
|
} = inject(ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, void 0);
|
|
const itemRef = composeRefs(dropdownCollectionItemRef, rovingFocusCollectionItemRef, rovingFocusGroupItemRef);
|
|
const role = 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
|
|
};
|
|
}
|
|
});
|
|
function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
|
|
const _component_el_icon = resolveComponent("el-icon");
|
|
return openBlock(), createElementBlock(Fragment, null, [
|
|
_ctx.divided ? (openBlock(), createElementBlock("li", mergeProps({
|
|
key: 0,
|
|
role: "separator",
|
|
class: _ctx.ns.bem("menu", "item", "divided")
|
|
}, _ctx.$attrs), null, 16)) : createCommentVNode("v-if", true),
|
|
createElementVNode("li", 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: (e) => _ctx.$emit("clickimpl", e),
|
|
onFocus: _ctx.handleFocus,
|
|
onKeydown: withModifiers(_ctx.handleKeydown, ["self"]),
|
|
onMousedown: _ctx.handleMousedown,
|
|
onPointermove: (e) => _ctx.$emit("pointermove", e),
|
|
onPointerleave: (e) => _ctx.$emit("pointerleave", e)
|
|
}), [
|
|
_ctx.icon ? (openBlock(), createBlock(_component_el_icon, { key: 0 }, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.icon)))
|
|
]),
|
|
_: 1
|
|
})) : createCommentVNode("v-if", true),
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 16, ["aria-disabled", "tabindex", "role", "onClick", "onFocus", "onKeydown", "onMousedown", "onPointermove", "onPointerleave"])
|
|
], 64);
|
|
}
|
|
var ElDropdownItemImpl = /* @__PURE__ */ _export_sfc(_sfc_main$1d, [["render", _sfc_render$h], ["__file", "dropdown-item-impl.vue"]]);
|
|
|
|
const useDropdown = () => {
|
|
const elDropdown = inject("elDropdown", {});
|
|
const _elDropdownSize = computed(() => elDropdown == null ? void 0 : elDropdown.dropdownSize);
|
|
return {
|
|
elDropdown,
|
|
_elDropdownSize
|
|
};
|
|
};
|
|
|
|
const _sfc_main$1c = 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 = getCurrentInstance();
|
|
const itemRef = ref(null);
|
|
const textContent = computed(() => {
|
|
var _a, _b;
|
|
return (_b = (_a = unref(itemRef)) == null ? void 0 : _a.textContent) != null ? _b : "";
|
|
});
|
|
const { onItemEnter, onItemLeave } = inject(DROPDOWN_INJECTION_KEY, void 0);
|
|
const handlePointerMove = composeEventHandlers((e) => {
|
|
emit("pointermove", e);
|
|
return e.defaultPrevented;
|
|
}, whenMouse((e) => {
|
|
if (props.disabled) {
|
|
onItemLeave(e);
|
|
return;
|
|
}
|
|
const target = e.currentTarget;
|
|
if (target === document.activeElement || target.contains(document.activeElement)) {
|
|
return;
|
|
}
|
|
onItemEnter(e);
|
|
if (!e.defaultPrevented) {
|
|
target == null ? void 0 : target.focus();
|
|
}
|
|
}));
|
|
const handlePointerLeave = composeEventHandlers((e) => {
|
|
emit("pointerleave", e);
|
|
return e.defaultPrevented;
|
|
}, whenMouse(onItemLeave));
|
|
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 = computed(() => ({ ...props, ...attrs }));
|
|
return {
|
|
handleClick,
|
|
handlePointerMove,
|
|
handlePointerLeave,
|
|
textContent,
|
|
propsAndAttrs
|
|
};
|
|
}
|
|
});
|
|
function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
|
|
var _a;
|
|
const _component_el_dropdown_item_impl = resolveComponent("el-dropdown-item-impl");
|
|
const _component_el_roving_focus_item = resolveComponent("el-roving-focus-item");
|
|
const _component_el_dropdown_collection_item = resolveComponent("el-dropdown-collection-item");
|
|
return openBlock(), createBlock(_component_el_dropdown_collection_item, {
|
|
disabled: _ctx.disabled,
|
|
"text-value": (_a = _ctx.textValue) != null ? _a : _ctx.textContent
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_component_el_roving_focus_item, {
|
|
focusable: !_ctx.disabled
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_component_el_dropdown_item_impl, mergeProps(_ctx.propsAndAttrs, {
|
|
onPointerleave: _ctx.handlePointerLeave,
|
|
onPointermove: _ctx.handlePointerMove,
|
|
onClickimpl: _ctx.handleClick
|
|
}), {
|
|
default: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "default")
|
|
]),
|
|
_: 3
|
|
}, 16, ["onPointerleave", "onPointermove", "onClickimpl"])
|
|
]),
|
|
_: 3
|
|
}, 8, ["focusable"])
|
|
]),
|
|
_: 3
|
|
}, 8, ["disabled", "text-value"]);
|
|
}
|
|
var DropdownItem = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["render", _sfc_render$g], ["__file", "dropdown-item.vue"]]);
|
|
|
|
const _sfc_main$1b = defineComponent({
|
|
name: "ElDropdownMenu",
|
|
props: dropdownMenuProps,
|
|
setup(props) {
|
|
const ns = useNamespace("dropdown");
|
|
const { _elDropdownSize } = useDropdown();
|
|
const size = _elDropdownSize.value;
|
|
const { focusTrapRef, onKeydown } = inject(FOCUS_TRAP_INJECTION_KEY, void 0);
|
|
const { contentRef, role, triggerId } = inject(DROPDOWN_INJECTION_KEY, void 0);
|
|
const { collectionRef: dropdownCollectionRef, getItems } = inject(COLLECTION_INJECTION_KEY, void 0);
|
|
const {
|
|
rovingFocusGroupRef,
|
|
rovingFocusGroupRootStyle,
|
|
tabIndex,
|
|
onBlur,
|
|
onFocus,
|
|
onMousedown
|
|
} = inject(ROVING_FOCUS_GROUP_INJECTION_KEY, void 0);
|
|
const { collectionRef: rovingFocusGroupCollectionRef } = inject(COLLECTION_INJECTION_KEY$1, void 0);
|
|
const dropdownKls = 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 !== unref(contentRef) || !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
|
|
};
|
|
}
|
|
});
|
|
function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
|
|
return openBlock(), createElementBlock("ul", {
|
|
ref: _ctx.dropdownListWrapperRef,
|
|
class: normalizeClass(_ctx.dropdownKls),
|
|
style: normalizeStyle(_ctx.rovingFocusGroupRootStyle),
|
|
tabindex: -1,
|
|
role: _ctx.role,
|
|
"aria-labelledby": _ctx.triggerId,
|
|
onBlur: _ctx.onBlur,
|
|
onFocus: _ctx.onFocus,
|
|
onKeydown: withModifiers(_ctx.handleKeydown, ["self"]),
|
|
onMousedown: withModifiers(_ctx.onMousedown, ["self"])
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 46, ["role", "aria-labelledby", "onBlur", "onFocus", "onKeydown", "onMousedown"]);
|
|
}
|
|
var DropdownMenu = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["render", _sfc_render$f], ["__file", "dropdown-menu.vue"]]);
|
|
|
|
const ElDropdown = withInstall(Dropdown, {
|
|
DropdownItem,
|
|
DropdownMenu
|
|
});
|
|
const ElDropdownItem = withNoopInstall(DropdownItem);
|
|
const ElDropdownMenu = withNoopInstall(DropdownMenu);
|
|
|
|
const __default__$V = defineComponent({
|
|
name: "ImgEmpty"
|
|
});
|
|
const _sfc_main$1a = /* @__PURE__ */ defineComponent({
|
|
...__default__$V,
|
|
setup(__props) {
|
|
const ns = useNamespace("empty");
|
|
const id = useId();
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("svg", {
|
|
viewBox: "0 0 79 86",
|
|
version: "1.1",
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
"xmlns:xlink": "http://www.w3.org/1999/xlink"
|
|
}, [
|
|
createElementVNode("defs", null, [
|
|
createElementVNode("linearGradient", {
|
|
id: `linearGradient-1-${unref(id)}`,
|
|
x1: "38.8503086%",
|
|
y1: "0%",
|
|
x2: "61.1496914%",
|
|
y2: "100%"
|
|
}, [
|
|
createElementVNode("stop", {
|
|
"stop-color": `var(${unref(ns).cssVarBlockName("fill-color-1")})`,
|
|
offset: "0%"
|
|
}, null, 8, ["stop-color"]),
|
|
createElementVNode("stop", {
|
|
"stop-color": `var(${unref(ns).cssVarBlockName("fill-color-4")})`,
|
|
offset: "100%"
|
|
}, null, 8, ["stop-color"])
|
|
], 8, ["id"]),
|
|
createElementVNode("linearGradient", {
|
|
id: `linearGradient-2-${unref(id)}`,
|
|
x1: "0%",
|
|
y1: "9.5%",
|
|
x2: "100%",
|
|
y2: "90.5%"
|
|
}, [
|
|
createElementVNode("stop", {
|
|
"stop-color": `var(${unref(ns).cssVarBlockName("fill-color-1")})`,
|
|
offset: "0%"
|
|
}, null, 8, ["stop-color"]),
|
|
createElementVNode("stop", {
|
|
"stop-color": `var(${unref(ns).cssVarBlockName("fill-color-6")})`,
|
|
offset: "100%"
|
|
}, null, 8, ["stop-color"])
|
|
], 8, ["id"]),
|
|
createElementVNode("rect", {
|
|
id: `path-3-${unref(id)}`,
|
|
x: "0",
|
|
y: "0",
|
|
width: "17",
|
|
height: "36"
|
|
}, null, 8, ["id"])
|
|
]),
|
|
createElementVNode("g", {
|
|
id: "Illustrations",
|
|
stroke: "none",
|
|
"stroke-width": "1",
|
|
fill: "none",
|
|
"fill-rule": "evenodd"
|
|
}, [
|
|
createElementVNode("g", {
|
|
id: "B-type",
|
|
transform: "translate(-1268.000000, -535.000000)"
|
|
}, [
|
|
createElementVNode("g", {
|
|
id: "Group-2",
|
|
transform: "translate(1268.000000, 535.000000)"
|
|
}, [
|
|
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(${unref(ns).cssVarBlockName("fill-color-3")})`
|
|
}, null, 8, ["fill"]),
|
|
createElementVNode("polygon", {
|
|
id: "Rectangle-Copy-14",
|
|
fill: `var(${unref(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, ["fill"]),
|
|
createElementVNode("g", {
|
|
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)"
|
|
}, [
|
|
createElementVNode("polygon", {
|
|
id: "Rectangle-Copy-10",
|
|
fill: `var(${unref(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, ["fill"]),
|
|
createElementVNode("polygon", {
|
|
id: "Rectangle-Copy-11",
|
|
fill: `var(${unref(ns).cssVarBlockName("fill-color-5")})`,
|
|
points: "-3.69149156e-15 7 38 7 38 43 -3.69149156e-15 43"
|
|
}, null, 8, ["fill"]),
|
|
createElementVNode("rect", {
|
|
id: "Rectangle-Copy-12",
|
|
fill: `url(#linearGradient-1-${unref(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, ["fill"]),
|
|
createElementVNode("polygon", {
|
|
id: "Rectangle-Copy-13",
|
|
fill: `var(${unref(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, ["fill"])
|
|
]),
|
|
createElementVNode("rect", {
|
|
id: "Rectangle-Copy-15",
|
|
fill: `url(#linearGradient-2-${unref(id)})`,
|
|
x: "13",
|
|
y: "45",
|
|
width: "40",
|
|
height: "36"
|
|
}, null, 8, ["fill"]),
|
|
createElementVNode("g", {
|
|
id: "Rectangle-Copy-17",
|
|
transform: "translate(53.000000, 45.000000)"
|
|
}, [
|
|
createElementVNode("use", {
|
|
id: "Mask",
|
|
fill: `var(${unref(ns).cssVarBlockName("fill-color-8")})`,
|
|
transform: "translate(8.500000, 18.000000) scale(-1, 1) translate(-8.500000, -18.000000) ",
|
|
"xlink:href": `#path-3-${unref(id)}`
|
|
}, null, 8, ["fill", "xlink:href"]),
|
|
createElementVNode("polygon", {
|
|
id: "Rectangle-Copy",
|
|
fill: `var(${unref(ns).cssVarBlockName("fill-color-9")})`,
|
|
mask: `url(#mask-4-${unref(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, ["fill", "mask"])
|
|
]),
|
|
createElementVNode("polygon", {
|
|
id: "Rectangle-Copy-18",
|
|
fill: `var(${unref(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, ["fill"])
|
|
])
|
|
])
|
|
])
|
|
]);
|
|
};
|
|
}
|
|
});
|
|
var ImgEmpty = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["__file", "img-empty.vue"]]);
|
|
|
|
const emptyProps = buildProps({
|
|
image: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
imageSize: Number,
|
|
description: {
|
|
type: String,
|
|
default: ""
|
|
}
|
|
});
|
|
|
|
const __default__$U = defineComponent({
|
|
name: "ElEmpty"
|
|
});
|
|
const _sfc_main$19 = /* @__PURE__ */ defineComponent({
|
|
...__default__$U,
|
|
props: emptyProps,
|
|
setup(__props) {
|
|
const props = __props;
|
|
const { t } = useLocale();
|
|
const ns = useNamespace("empty");
|
|
const emptyDescription = computed(() => props.description || t("el.table.emptyText"));
|
|
const imageStyle = computed(() => ({
|
|
width: addUnit(props.imageSize)
|
|
}));
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass(unref(ns).b())
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("image")),
|
|
style: normalizeStyle(unref(imageStyle))
|
|
}, [
|
|
_ctx.image ? (openBlock(), createElementBlock("img", {
|
|
key: 0,
|
|
src: _ctx.image,
|
|
ondragstart: "return false"
|
|
}, null, 8, ["src"])) : renderSlot(_ctx.$slots, "image", { key: 1 }, () => [
|
|
createVNode(ImgEmpty)
|
|
])
|
|
], 6),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("description"))
|
|
}, [
|
|
_ctx.$slots.description ? renderSlot(_ctx.$slots, "description", { key: 0 }) : (openBlock(), createElementBlock("p", { key: 1 }, toDisplayString(unref(emptyDescription)), 1))
|
|
], 2),
|
|
_ctx.$slots.default ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).e("bottom"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var Empty = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["__file", "empty.vue"]]);
|
|
|
|
const ElEmpty = withInstall(Empty);
|
|
|
|
const imageViewerProps = buildProps({
|
|
urlList: {
|
|
type: definePropType(Array),
|
|
default: () => mutable([])
|
|
},
|
|
zIndex: {
|
|
type: Number
|
|
},
|
|
initialIndex: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
infinite: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
hideOnClickModal: Boolean,
|
|
teleported: Boolean,
|
|
closeOnPressEscape: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
zoomRate: {
|
|
type: Number,
|
|
default: 1.2
|
|
},
|
|
minScale: {
|
|
type: Number,
|
|
default: 0.2
|
|
},
|
|
maxScale: {
|
|
type: Number,
|
|
default: 7
|
|
},
|
|
crossorigin: {
|
|
type: definePropType(String)
|
|
}
|
|
});
|
|
const imageViewerEmits = {
|
|
close: () => true,
|
|
switch: (index) => isNumber(index),
|
|
rotate: (deg) => isNumber(deg)
|
|
};
|
|
|
|
const __default__$T = defineComponent({
|
|
name: "ElImageViewer"
|
|
});
|
|
const _sfc_main$18 = /* @__PURE__ */ defineComponent({
|
|
...__default__$T,
|
|
props: imageViewerProps,
|
|
emits: imageViewerEmits,
|
|
setup(__props, { expose, emit }) {
|
|
var _a;
|
|
const props = __props;
|
|
const modes = {
|
|
CONTAIN: {
|
|
name: "contain",
|
|
icon: markRaw(full_screen_default)
|
|
},
|
|
ORIGINAL: {
|
|
name: "original",
|
|
icon: markRaw(scale_to_original_default)
|
|
}
|
|
};
|
|
const { t } = useLocale();
|
|
const ns = useNamespace("image-viewer");
|
|
const { nextZIndex } = useZIndex();
|
|
const wrapper = ref();
|
|
const imgRefs = ref([]);
|
|
const scopeEventListener = effectScope();
|
|
const loading = ref(true);
|
|
const activeIndex = ref(props.initialIndex);
|
|
const mode = shallowRef(modes.CONTAIN);
|
|
const transform = ref({
|
|
scale: 1,
|
|
deg: 0,
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
enableTransition: false
|
|
});
|
|
const zIndex = ref((_a = props.zIndex) != null ? _a : nextZIndex());
|
|
const isSingle = computed(() => {
|
|
const { urlList } = props;
|
|
return urlList.length <= 1;
|
|
});
|
|
const isFirst = computed(() => {
|
|
return activeIndex.value === 0;
|
|
});
|
|
const isLast = computed(() => {
|
|
return activeIndex.value === props.urlList.length - 1;
|
|
});
|
|
const currentImg = computed(() => {
|
|
return props.urlList[activeIndex.value];
|
|
});
|
|
const arrowPrevKls = computed(() => [
|
|
ns.e("btn"),
|
|
ns.e("prev"),
|
|
ns.is("disabled", !props.infinite && isFirst.value)
|
|
]);
|
|
const arrowNextKls = computed(() => [
|
|
ns.e("btn"),
|
|
ns.e("next"),
|
|
ns.is("disabled", !props.infinite && isLast.value)
|
|
]);
|
|
const imgStyle = computed(() => {
|
|
const { scale, deg, offsetX, offsetY, enableTransition } = transform.value;
|
|
let translateX = offsetX / scale;
|
|
let translateY = offsetY / scale;
|
|
const radian = deg * Math.PI / 180;
|
|
const cosRadian = Math.cos(radian);
|
|
const sinRadian = Math.sin(radian);
|
|
translateX = translateX * cosRadian + translateY * sinRadian;
|
|
translateY = translateY * cosRadian - offsetX / scale * sinRadian;
|
|
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;
|
|
});
|
|
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.deltaY || e.deltaX;
|
|
handleActions(delta < 0 ? "zoomIn" : "zoomOut", {
|
|
zoomRate: props.zoomRate,
|
|
enableTransition: false
|
|
});
|
|
});
|
|
scopeEventListener.run(() => {
|
|
useEventListener(document, "keydown", keydownHandler);
|
|
useEventListener(document, "wheel", 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 { minScale, maxScale } = props;
|
|
const { zoomRate, rotateDeg, enableTransition } = {
|
|
zoomRate: props.zoomRate,
|
|
rotateDeg: 90,
|
|
enableTransition: true,
|
|
...options
|
|
};
|
|
switch (action) {
|
|
case "zoomOut":
|
|
if (transform.value.scale > minScale) {
|
|
transform.value.scale = Number.parseFloat((transform.value.scale / zoomRate).toFixed(3));
|
|
}
|
|
break;
|
|
case "zoomIn":
|
|
if (transform.value.scale < maxScale) {
|
|
transform.value.scale = Number.parseFloat((transform.value.scale * zoomRate).toFixed(3));
|
|
}
|
|
break;
|
|
case "clockwise":
|
|
transform.value.deg += rotateDeg;
|
|
emit("rotate", transform.value.deg);
|
|
break;
|
|
case "anticlockwise":
|
|
transform.value.deg -= rotateDeg;
|
|
emit("rotate", transform.value.deg);
|
|
break;
|
|
}
|
|
transform.value.enableTransition = enableTransition;
|
|
}
|
|
watch(currentImg, () => {
|
|
nextTick(() => {
|
|
const $img = imgRefs.value[0];
|
|
if (!($img == null ? void 0 : $img.complete)) {
|
|
loading.value = true;
|
|
}
|
|
});
|
|
});
|
|
watch(activeIndex, (val) => {
|
|
reset();
|
|
emit("switch", val);
|
|
});
|
|
onMounted(() => {
|
|
var _a2, _b;
|
|
registerEventListener();
|
|
(_b = (_a2 = wrapper.value) == null ? void 0 : _a2.focus) == null ? void 0 : _b.call(_a2);
|
|
});
|
|
expose({
|
|
setActiveItem
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createBlock(unref(ElTeleport$1), {
|
|
to: "body",
|
|
disabled: !_ctx.teleported
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(Transition, {
|
|
name: "viewer-fade",
|
|
appear: ""
|
|
}, {
|
|
default: withCtx(() => [
|
|
createElementVNode("div", {
|
|
ref_key: "wrapper",
|
|
ref: wrapper,
|
|
tabindex: -1,
|
|
class: normalizeClass(unref(ns).e("wrapper")),
|
|
style: normalizeStyle({ zIndex: zIndex.value })
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("mask")),
|
|
onClick: withModifiers(($event) => _ctx.hideOnClickModal && hide(), ["self"])
|
|
}, null, 10, ["onClick"]),
|
|
createCommentVNode(" CLOSE "),
|
|
createElementVNode("span", {
|
|
class: normalizeClass([unref(ns).e("btn"), unref(ns).e("close")]),
|
|
onClick: hide
|
|
}, [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(close_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
], 2),
|
|
createCommentVNode(" ARROW "),
|
|
!unref(isSingle) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(arrowPrevKls)),
|
|
onClick: prev
|
|
}, [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(arrow_left_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
], 2),
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(arrowNextKls)),
|
|
onClick: next
|
|
}, [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(arrow_right_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
], 2)
|
|
], 64)) : createCommentVNode("v-if", true),
|
|
createCommentVNode(" ACTIONS "),
|
|
createElementVNode("div", {
|
|
class: normalizeClass([unref(ns).e("btn"), unref(ns).e("actions")])
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("actions__inner"))
|
|
}, [
|
|
createVNode(unref(ElIcon), {
|
|
onClick: ($event) => handleActions("zoomOut")
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(zoom_out_default))
|
|
]),
|
|
_: 1
|
|
}, 8, ["onClick"]),
|
|
createVNode(unref(ElIcon), {
|
|
onClick: ($event) => handleActions("zoomIn")
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(zoom_in_default))
|
|
]),
|
|
_: 1
|
|
}, 8, ["onClick"]),
|
|
createElementVNode("i", {
|
|
class: normalizeClass(unref(ns).e("actions__divider"))
|
|
}, null, 2),
|
|
createVNode(unref(ElIcon), { onClick: toggleMode }, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(unref(mode).icon)))
|
|
]),
|
|
_: 1
|
|
}),
|
|
createElementVNode("i", {
|
|
class: normalizeClass(unref(ns).e("actions__divider"))
|
|
}, null, 2),
|
|
createVNode(unref(ElIcon), {
|
|
onClick: ($event) => handleActions("anticlockwise")
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(refresh_left_default))
|
|
]),
|
|
_: 1
|
|
}, 8, ["onClick"]),
|
|
createVNode(unref(ElIcon), {
|
|
onClick: ($event) => handleActions("clockwise")
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(refresh_right_default))
|
|
]),
|
|
_: 1
|
|
}, 8, ["onClick"])
|
|
], 2)
|
|
], 2),
|
|
createCommentVNode(" CANVAS "),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("canvas"))
|
|
}, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.urlList, (url, i) => {
|
|
return withDirectives((openBlock(), createElementBlock("img", {
|
|
ref_for: true,
|
|
ref: (el) => imgRefs.value[i] = el,
|
|
key: url,
|
|
src: url,
|
|
style: normalizeStyle(unref(imgStyle)),
|
|
class: normalizeClass(unref(ns).e("img")),
|
|
crossorigin: _ctx.crossorigin,
|
|
onLoad: handleImgLoad,
|
|
onError: handleImgError,
|
|
onMousedown: handleMouseDown
|
|
}, null, 46, ["src", "crossorigin"])), [
|
|
[vShow, i === activeIndex.value]
|
|
]);
|
|
}), 128))
|
|
], 2),
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 6)
|
|
]),
|
|
_: 3
|
|
})
|
|
]),
|
|
_: 3
|
|
}, 8, ["disabled"]);
|
|
};
|
|
}
|
|
});
|
|
var ImageViewer = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["__file", "image-viewer.vue"]]);
|
|
|
|
const ElImageViewer = withInstall(ImageViewer);
|
|
|
|
const imageProps = buildProps({
|
|
hideOnClickModal: Boolean,
|
|
src: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
fit: {
|
|
type: String,
|
|
values: ["", "contain", "cover", "fill", "none", "scale-down"],
|
|
default: ""
|
|
},
|
|
loading: {
|
|
type: String,
|
|
values: ["eager", "lazy"]
|
|
},
|
|
lazy: Boolean,
|
|
scrollContainer: {
|
|
type: definePropType([String, Object])
|
|
},
|
|
previewSrcList: {
|
|
type: definePropType(Array),
|
|
default: () => mutable([])
|
|
},
|
|
previewTeleported: Boolean,
|
|
zIndex: {
|
|
type: Number
|
|
},
|
|
initialIndex: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
infinite: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
closeOnPressEscape: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
zoomRate: {
|
|
type: Number,
|
|
default: 1.2
|
|
},
|
|
minScale: {
|
|
type: Number,
|
|
default: 0.2
|
|
},
|
|
maxScale: {
|
|
type: Number,
|
|
default: 7
|
|
},
|
|
crossorigin: {
|
|
type: definePropType(String)
|
|
}
|
|
});
|
|
const imageEmits = {
|
|
load: (evt) => evt instanceof Event,
|
|
error: (evt) => evt instanceof Event,
|
|
switch: (val) => isNumber(val),
|
|
close: () => true,
|
|
show: () => true
|
|
};
|
|
|
|
const __default__$S = defineComponent({
|
|
name: "ElImage",
|
|
inheritAttrs: false
|
|
});
|
|
const _sfc_main$17 = /* @__PURE__ */ defineComponent({
|
|
...__default__$S,
|
|
props: imageProps,
|
|
emits: imageEmits,
|
|
setup(__props, { emit }) {
|
|
const props = __props;
|
|
let prevOverflow = "";
|
|
const { t } = useLocale();
|
|
const ns = useNamespace("image");
|
|
const rawAttrs = useAttrs$1();
|
|
const containerAttrs = computed(() => {
|
|
return fromPairs(Object.entries(rawAttrs).filter(([key]) => /^(data-|on[A-Z])/i.test(key) || ["id", "style"].includes(key)));
|
|
});
|
|
const imgAttrs = useAttrs({
|
|
excludeListeners: true,
|
|
excludeKeys: computed(() => {
|
|
return Object.keys(containerAttrs.value);
|
|
})
|
|
});
|
|
const imageSrc = ref();
|
|
const hasLoadError = ref(false);
|
|
const isLoading = ref(true);
|
|
const showViewer = ref(false);
|
|
const container = ref();
|
|
const _scrollContainer = ref();
|
|
const supportLoading = isClient && "loading" in HTMLImageElement.prototype;
|
|
let stopScrollListener;
|
|
let stopWheelListener;
|
|
const imageKls = computed(() => [
|
|
ns.e("inner"),
|
|
preview.value && ns.e("preview"),
|
|
isLoading.value && ns.is("loading")
|
|
]);
|
|
const imageStyle = computed(() => {
|
|
const { fit } = props;
|
|
if (isClient && fit) {
|
|
return { objectFit: fit };
|
|
}
|
|
return {};
|
|
});
|
|
const preview = computed(() => {
|
|
const { previewSrcList } = props;
|
|
return Array.isArray(previewSrcList) && previewSrcList.length > 0;
|
|
});
|
|
const imageIndex = computed(() => {
|
|
const { previewSrcList, initialIndex } = props;
|
|
let previewIndex = initialIndex;
|
|
if (initialIndex > previewSrcList.length - 1) {
|
|
previewIndex = 0;
|
|
}
|
|
return previewIndex;
|
|
});
|
|
const isManual = 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, true);
|
|
async function addLazyLoadListener() {
|
|
var _a;
|
|
if (!isClient)
|
|
return;
|
|
await nextTick();
|
|
const { scrollContainer } = props;
|
|
if (isElement$1(scrollContainer)) {
|
|
_scrollContainer.value = scrollContainer;
|
|
} else if (isString$1(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);
|
|
}
|
|
watch(() => props.src, () => {
|
|
if (isManual.value) {
|
|
isLoading.value = true;
|
|
hasLoadError.value = false;
|
|
removeLazyLoadListener();
|
|
addLazyLoadListener();
|
|
} else {
|
|
loadImage();
|
|
}
|
|
});
|
|
onMounted(() => {
|
|
if (isManual.value) {
|
|
addLazyLoadListener();
|
|
} else {
|
|
loadImage();
|
|
}
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", mergeProps({
|
|
ref_key: "container",
|
|
ref: container
|
|
}, unref(containerAttrs), {
|
|
class: [unref(ns).b(), _ctx.$attrs.class]
|
|
}), [
|
|
hasLoadError.value ? renderSlot(_ctx.$slots, "error", { key: 0 }, () => [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("error"))
|
|
}, toDisplayString(unref(t)("el.image.error")), 3)
|
|
]) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
imageSrc.value !== void 0 ? (openBlock(), createElementBlock("img", mergeProps({ key: 0 }, unref(imgAttrs), {
|
|
src: imageSrc.value,
|
|
loading: _ctx.loading,
|
|
style: unref(imageStyle),
|
|
class: unref(imageKls),
|
|
crossorigin: _ctx.crossorigin,
|
|
onClick: clickHandler,
|
|
onLoad: handleLoad,
|
|
onError: handleError
|
|
}), null, 16, ["src", "loading", "crossorigin"])) : createCommentVNode("v-if", true),
|
|
isLoading.value ? (openBlock(), createElementBlock("div", {
|
|
key: 1,
|
|
class: normalizeClass(unref(ns).e("wrapper"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "placeholder", {}, () => [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("placeholder"))
|
|
}, null, 2)
|
|
])
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
], 64)),
|
|
unref(preview) ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
|
|
showViewer.value ? (openBlock(), createBlock(unref(ElImageViewer), {
|
|
key: 0,
|
|
"z-index": _ctx.zIndex,
|
|
"initial-index": unref(imageIndex),
|
|
infinite: _ctx.infinite,
|
|
"zoom-rate": _ctx.zoomRate,
|
|
"min-scale": _ctx.minScale,
|
|
"max-scale": _ctx.maxScale,
|
|
"url-list": _ctx.previewSrcList,
|
|
crossorigin: _ctx.crossorigin,
|
|
"hide-on-click-modal": _ctx.hideOnClickModal,
|
|
teleported: _ctx.previewTeleported,
|
|
"close-on-press-escape": _ctx.closeOnPressEscape,
|
|
onClose: closeViewer,
|
|
onSwitch: switchViewer
|
|
}, {
|
|
default: withCtx(() => [
|
|
_ctx.$slots.viewer ? (openBlock(), createElementBlock("div", { key: 0 }, [
|
|
renderSlot(_ctx.$slots, "viewer")
|
|
])) : createCommentVNode("v-if", true)
|
|
]),
|
|
_: 3
|
|
}, 8, ["z-index", "initial-index", "infinite", "zoom-rate", "min-scale", "max-scale", "url-list", "crossorigin", "hide-on-click-modal", "teleported", "close-on-press-escape"])) : createCommentVNode("v-if", true)
|
|
], 64)) : createCommentVNode("v-if", true)
|
|
], 16);
|
|
};
|
|
}
|
|
});
|
|
var Image$1 = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["__file", "image.vue"]]);
|
|
|
|
const ElImage = withInstall(Image$1);
|
|
|
|
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,
|
|
placeholder: String,
|
|
precision: {
|
|
type: Number,
|
|
validator: (val) => val >= 0 && val === Number.parseInt(`${val}`, 10)
|
|
},
|
|
validateEvent: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
...useAriaProps(["ariaLabel"])
|
|
});
|
|
const inputNumberEmits = {
|
|
[CHANGE_EVENT]: (cur, prev) => 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 __default__$R = defineComponent({
|
|
name: "ElInputNumber"
|
|
});
|
|
const _sfc_main$16 = /* @__PURE__ */ defineComponent({
|
|
...__default__$R,
|
|
props: inputNumberProps,
|
|
emits: inputNumberEmits,
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const { t } = useLocale();
|
|
const ns = useNamespace("input-number");
|
|
const input = ref();
|
|
const data = reactive({
|
|
currentValue: props.modelValue,
|
|
userInput: null
|
|
});
|
|
const { formItem } = useFormItem();
|
|
const minDisabled = computed(() => isNumber(props.modelValue) && props.modelValue <= props.min);
|
|
const maxDisabled = computed(() => isNumber(props.modelValue) && props.modelValue >= props.max);
|
|
const numPrecision = 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 = computed(() => {
|
|
return props.controls && props.controlsPosition === "right";
|
|
});
|
|
const inputNumberSize = useFormSize();
|
|
const inputNumberDisabled = useFormDisabled();
|
|
const displayValue = 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);
|
|
setCurrentValueToModelValue();
|
|
};
|
|
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);
|
|
setCurrentValueToModelValue();
|
|
};
|
|
const verifyValue = (value, update) => {
|
|
const { max, min, step, precision, stepStrictly, valueOnClear } = props;
|
|
if (max < min) {
|
|
throwError("InputNumber", "min should not be greater than max.");
|
|
}
|
|
let newVal = Number(value);
|
|
if (isNil(value) || Number.isNaN(newVal)) {
|
|
return null;
|
|
}
|
|
if (value === "") {
|
|
if (valueOnClear === null) {
|
|
return null;
|
|
}
|
|
newVal = isString$1(valueOnClear) ? { min, max }[valueOnClear] : valueOnClear;
|
|
}
|
|
if (stepStrictly) {
|
|
newVal = toPrecision(Math.round(newVal / step) * step, precision);
|
|
if (newVal !== value) {
|
|
update && emit(UPDATE_MODEL_EVENT, newVal);
|
|
}
|
|
}
|
|
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, emitChange = true) => {
|
|
var _a;
|
|
const oldVal = data.currentValue;
|
|
const newVal = verifyValue(value);
|
|
if (!emitChange) {
|
|
emit(UPDATE_MODEL_EVENT, newVal);
|
|
return;
|
|
}
|
|
if (oldVal === newVal && value)
|
|
return;
|
|
data.userInput = null;
|
|
emit(UPDATE_MODEL_EVENT, newVal);
|
|
if (oldVal !== 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;
|
|
const newVal = value === "" ? null : Number(value);
|
|
emit(INPUT_EVENT, newVal);
|
|
setCurrentValue(newVal, false);
|
|
};
|
|
const handleInputChange = (value) => {
|
|
const newVal = value !== "" ? Number(value) : "";
|
|
if (isNumber(newVal) && !Number.isNaN(newVal) || value === "") {
|
|
setCurrentValue(newVal);
|
|
}
|
|
setCurrentValueToModelValue();
|
|
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;
|
|
data.userInput = null;
|
|
emit("blur", event);
|
|
if (props.validateEvent) {
|
|
(_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "blur").catch((err) => debugWarn());
|
|
}
|
|
};
|
|
const setCurrentValueToModelValue = () => {
|
|
if (data.currentValue !== props.modelValue) {
|
|
data.currentValue = props.modelValue;
|
|
}
|
|
};
|
|
const handleWheel = (e) => {
|
|
if (document.activeElement === e.target)
|
|
e.preventDefault();
|
|
};
|
|
watch(() => props.modelValue, (value, oldValue) => {
|
|
const newValue = verifyValue(value, true);
|
|
if (data.userInput === null && newValue !== oldValue) {
|
|
data.currentValue = newValue;
|
|
}
|
|
}, { immediate: true });
|
|
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", data.currentValue || data.currentValue === 0 ? 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);
|
|
}
|
|
innerInput.addEventListener("wheel", handleWheel, { passive: false });
|
|
});
|
|
onUpdated(() => {
|
|
var _a, _b;
|
|
const innerInput = (_a = input.value) == null ? void 0 : _a.input;
|
|
innerInput == null ? void 0 : innerInput.setAttribute("aria-valuenow", `${(_b = data.currentValue) != null ? _b : ""}`);
|
|
});
|
|
expose({
|
|
focus,
|
|
blur
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass([
|
|
unref(ns).b(),
|
|
unref(ns).m(unref(inputNumberSize)),
|
|
unref(ns).is("disabled", unref(inputNumberDisabled)),
|
|
unref(ns).is("without-controls", !_ctx.controls),
|
|
unref(ns).is("controls-right", unref(controlsAtRight))
|
|
]),
|
|
onDragstart: withModifiers(() => {
|
|
}, ["prevent"])
|
|
}, [
|
|
_ctx.controls ? withDirectives((openBlock(), createElementBlock("span", {
|
|
key: 0,
|
|
role: "button",
|
|
"aria-label": unref(t)("el.inputNumber.decrease"),
|
|
class: normalizeClass([unref(ns).e("decrease"), unref(ns).is("disabled", unref(minDisabled))]),
|
|
onKeydown: withKeys(decrease, ["enter"])
|
|
}, [
|
|
renderSlot(_ctx.$slots, "decrease-icon", {}, () => [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
unref(controlsAtRight) ? (openBlock(), createBlock(unref(arrow_down_default), { key: 0 })) : (openBlock(), createBlock(unref(minus_default), { key: 1 }))
|
|
]),
|
|
_: 1
|
|
})
|
|
])
|
|
], 42, ["aria-label", "onKeydown"])), [
|
|
[unref(vRepeatClick), decrease]
|
|
]) : createCommentVNode("v-if", true),
|
|
_ctx.controls ? withDirectives((openBlock(), createElementBlock("span", {
|
|
key: 1,
|
|
role: "button",
|
|
"aria-label": unref(t)("el.inputNumber.increase"),
|
|
class: normalizeClass([unref(ns).e("increase"), unref(ns).is("disabled", unref(maxDisabled))]),
|
|
onKeydown: withKeys(increase, ["enter"])
|
|
}, [
|
|
renderSlot(_ctx.$slots, "increase-icon", {}, () => [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
unref(controlsAtRight) ? (openBlock(), createBlock(unref(arrow_up_default), { key: 0 })) : (openBlock(), createBlock(unref(plus_default), { key: 1 }))
|
|
]),
|
|
_: 1
|
|
})
|
|
])
|
|
], 42, ["aria-label", "onKeydown"])), [
|
|
[unref(vRepeatClick), increase]
|
|
]) : createCommentVNode("v-if", true),
|
|
createVNode(unref(ElInput), {
|
|
id: _ctx.id,
|
|
ref_key: "input",
|
|
ref: input,
|
|
type: "number",
|
|
step: _ctx.step,
|
|
"model-value": unref(displayValue),
|
|
placeholder: _ctx.placeholder,
|
|
readonly: _ctx.readonly,
|
|
disabled: unref(inputNumberDisabled),
|
|
size: unref(inputNumberSize),
|
|
max: _ctx.max,
|
|
min: _ctx.min,
|
|
name: _ctx.name,
|
|
"aria-label": _ctx.ariaLabel,
|
|
"validate-event": false,
|
|
onKeydown: [
|
|
withKeys(withModifiers(increase, ["prevent"]), ["up"]),
|
|
withKeys(withModifiers(decrease, ["prevent"]), ["down"])
|
|
],
|
|
onBlur: handleBlur,
|
|
onFocus: handleFocus,
|
|
onInput: handleInput,
|
|
onChange: handleInputChange
|
|
}, createSlots({ _: 2 }, [
|
|
_ctx.$slots.prefix ? {
|
|
name: "prefix",
|
|
fn: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "prefix")
|
|
])
|
|
} : void 0,
|
|
_ctx.$slots.suffix ? {
|
|
name: "suffix",
|
|
fn: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "suffix")
|
|
])
|
|
} : void 0
|
|
]), 1032, ["id", "step", "model-value", "placeholder", "readonly", "disabled", "size", "max", "min", "name", "aria-label", "onKeydown"])
|
|
], 42, ["onDragstart"]);
|
|
};
|
|
}
|
|
});
|
|
var InputNumber = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["__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: Boolean,
|
|
href: { type: String, default: "" },
|
|
target: {
|
|
type: String,
|
|
default: "_self"
|
|
},
|
|
icon: {
|
|
type: iconPropType
|
|
}
|
|
});
|
|
const linkEmits = {
|
|
click: (evt) => evt instanceof MouseEvent
|
|
};
|
|
|
|
const __default__$Q = defineComponent({
|
|
name: "ElLink"
|
|
});
|
|
const _sfc_main$15 = /* @__PURE__ */ defineComponent({
|
|
...__default__$Q,
|
|
props: linkProps,
|
|
emits: linkEmits,
|
|
setup(__props, { emit }) {
|
|
const props = __props;
|
|
const ns = useNamespace("link");
|
|
const linkKls = computed(() => [
|
|
ns.b(),
|
|
ns.m(props.type),
|
|
ns.is("disabled", props.disabled),
|
|
ns.is("underline", props.underline && !props.disabled)
|
|
]);
|
|
function handleClick(event) {
|
|
if (!props.disabled)
|
|
emit("click", event);
|
|
}
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("a", {
|
|
class: normalizeClass(unref(linkKls)),
|
|
href: _ctx.disabled || !_ctx.href ? void 0 : _ctx.href,
|
|
target: _ctx.disabled || !_ctx.href ? void 0 : _ctx.target,
|
|
onClick: handleClick
|
|
}, [
|
|
_ctx.icon ? (openBlock(), createBlock(unref(ElIcon), { key: 0 }, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.icon)))
|
|
]),
|
|
_: 1
|
|
})) : createCommentVNode("v-if", true),
|
|
_ctx.$slots.default ? (openBlock(), createElementBlock("span", {
|
|
key: 1,
|
|
class: normalizeClass(unref(ns).e("inner"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
_ctx.$slots.icon ? renderSlot(_ctx.$slots, "icon", { key: 2 }) : createCommentVNode("v-if", true)
|
|
], 10, ["href", "target"]);
|
|
};
|
|
}
|
|
});
|
|
var Link = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["__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$14 = 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 openBlock(), createBlock(Transition, mergeProps({ mode: "out-in" }, _ctx.listeners), {
|
|
default: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "default")
|
|
]),
|
|
_: 3
|
|
}, 16);
|
|
}
|
|
var ElMenuCollapseTransition = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["render", _sfc_render$e], ["__file", "menu-collapse-transition.vue"]]);
|
|
|
|
function useMenu(instance, currentIndex) {
|
|
const indexPath = 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 = 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 = 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 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: Number,
|
|
hideTimeout: Number,
|
|
popperClass: String,
|
|
disabled: Boolean,
|
|
teleported: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
popperOffset: Number,
|
|
expandCloseIcon: {
|
|
type: iconPropType
|
|
},
|
|
expandOpenIcon: {
|
|
type: iconPropType
|
|
},
|
|
collapseCloseIcon: {
|
|
type: iconPropType
|
|
},
|
|
collapseOpenIcon: {
|
|
type: iconPropType
|
|
}
|
|
});
|
|
const COMPONENT_NAME$c = "ElSubMenu";
|
|
var SubMenu = defineComponent({
|
|
name: COMPONENT_NAME$c,
|
|
props: subMenuProps,
|
|
setup(props, { slots, expose }) {
|
|
const instance = getCurrentInstance();
|
|
const { indexPath, parentMenu } = useMenu(instance, computed(() => props.index));
|
|
const nsMenu = useNamespace("menu");
|
|
const nsSubMenu = useNamespace("sub-menu");
|
|
const rootMenu = inject("rootMenu");
|
|
if (!rootMenu)
|
|
throwError(COMPONENT_NAME$c, "can not inject root menu");
|
|
const subMenu = inject(`subMenu:${parentMenu.value.uid}`);
|
|
if (!subMenu)
|
|
throwError(COMPONENT_NAME$c, "can not inject sub menu");
|
|
const items = ref({});
|
|
const subMenus = ref({});
|
|
let timeout;
|
|
const mouseInChild = ref(false);
|
|
const verticalTitleRef = ref();
|
|
const vPopper = ref(null);
|
|
const currentPlacement = computed(() => mode.value === "horizontal" && isFirstLevel.value ? "bottom-start" : "right-start");
|
|
const subMenuTitleIcon = 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 = computed(() => {
|
|
return subMenu.level === 0;
|
|
});
|
|
const appendToBody = computed(() => {
|
|
const value = props.teleported;
|
|
return value === void 0 ? isFirstLevel.value : value;
|
|
});
|
|
const menuTransitionName = computed(() => rootMenu.props.collapse ? `${nsMenu.namespace.value}-zoom-in-left` : `${nsMenu.namespace.value}-zoom-in-top`);
|
|
const fallbackPlacements = computed(() => mode.value === "horizontal" && isFirstLevel.value ? [
|
|
"bottom-start",
|
|
"bottom-end",
|
|
"top-start",
|
|
"top-end",
|
|
"right-start",
|
|
"left-start"
|
|
] : [
|
|
"right-start",
|
|
"right",
|
|
"right-end",
|
|
"left-start",
|
|
"bottom-start",
|
|
"bottom-end",
|
|
"top-start",
|
|
"top-end"
|
|
]);
|
|
const opened = computed(() => rootMenu.openedMenus.includes(props.index));
|
|
const active = 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 mode = computed(() => rootMenu.props.mode);
|
|
const item = reactive({
|
|
index: props.index,
|
|
indexPath,
|
|
active
|
|
});
|
|
const ulStyle = useMenuCssVar(rootMenu.props, subMenu.level + 1);
|
|
const subMenuPopperOffset = computed(() => {
|
|
var _a;
|
|
return (_a = props.popperOffset) != null ? _a : rootMenu.props.popperOffset;
|
|
});
|
|
const subMenuPopperClass = computed(() => {
|
|
var _a;
|
|
return (_a = props.popperClass) != null ? _a : rootMenu.props.popperClass;
|
|
});
|
|
const subMenuShowTimeout = computed(() => {
|
|
var _a;
|
|
return (_a = props.showTimeout) != null ? _a : rootMenu.props.showTimeout;
|
|
});
|
|
const subMenuHideTimeout = computed(() => {
|
|
var _a;
|
|
return (_a = props.hideTimeout) != null ? _a : rootMenu.props.hideTimeout;
|
|
});
|
|
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 = subMenuShowTimeout.value) => {
|
|
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) {
|
|
subMenu.mouseInChild.value = true;
|
|
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;
|
|
if (rootMenu.props.menuTrigger === "click" && rootMenu.props.mode === "horizontal" || !rootMenu.props.collapse && rootMenu.props.mode === "vertical") {
|
|
subMenu.mouseInChild.value = false;
|
|
return;
|
|
}
|
|
timeout == null ? void 0 : timeout();
|
|
subMenu.mouseInChild.value = false;
|
|
({ stop: timeout } = useTimeoutFn(() => !mouseInChild.value && rootMenu.closeMenu(props.index, indexPath.value), subMenuHideTimeout.value));
|
|
if (appendToBody.value && deepDispatch) {
|
|
(_a = subMenu.handleMouseleave) == null ? void 0 : _a.call(subMenu, true);
|
|
}
|
|
};
|
|
watch(() => rootMenu.props.collapse, (value) => handleCollapseToggle(Boolean(value)));
|
|
{
|
|
const addSubMenu = (item2) => {
|
|
subMenus.value[item2.index] = item2;
|
|
};
|
|
const removeSubMenu = (item2) => {
|
|
delete subMenus.value[item2.index];
|
|
};
|
|
provide(`subMenu:${instance.uid}`, {
|
|
addSubMenu,
|
|
removeSubMenu,
|
|
handleMouseleave,
|
|
mouseInChild,
|
|
level: subMenu.level + 1
|
|
});
|
|
}
|
|
expose({
|
|
opened
|
|
});
|
|
onMounted(() => {
|
|
rootMenu.addSubMenu(item);
|
|
subMenu.addSubMenu(item);
|
|
});
|
|
onBeforeUnmount(() => {
|
|
subMenu.removeSubMenu(item);
|
|
rootMenu.removeSubMenu(item);
|
|
});
|
|
return () => {
|
|
var _a;
|
|
const titleTag = [
|
|
(_a = slots.title) == null ? void 0 : _a.call(slots),
|
|
h$1(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$1(subMenuTitleIcon.value) ? h$1(instance.appContext.components[subMenuTitleIcon.value]) : h$1(subMenuTitleIcon.value)
|
|
})
|
|
];
|
|
const child = rootMenu.isMenuPopup ? h$1(ElTooltip, {
|
|
ref: vPopper,
|
|
visible: opened.value,
|
|
effect: "light",
|
|
pure: true,
|
|
offset: subMenuPopperOffset.value,
|
|
showArrow: false,
|
|
persistent: true,
|
|
popperClass: subMenuPopperClass.value,
|
|
placement: currentPlacement.value,
|
|
teleported: appendToBody.value,
|
|
fallbackPlacements: fallbackPlacements.value,
|
|
transition: menuTransitionName.value,
|
|
gpuAcceleration: false
|
|
}, {
|
|
content: () => {
|
|
var _a2;
|
|
return h$1("div", {
|
|
class: [
|
|
nsMenu.m(mode.value),
|
|
nsMenu.m("popup-container"),
|
|
subMenuPopperClass.value
|
|
],
|
|
onMouseenter: (evt) => handleMouseenter(evt, 100),
|
|
onMouseleave: () => handleMouseleave(true),
|
|
onFocus: (evt) => handleMouseenter(evt, 100)
|
|
}, [
|
|
h$1("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: () => h$1("div", {
|
|
class: nsSubMenu.e("title"),
|
|
onClick: handleClick
|
|
}, titleTag)
|
|
}) : h$1(Fragment, {}, [
|
|
h$1("div", {
|
|
class: nsSubMenu.e("title"),
|
|
ref: verticalTitleRef,
|
|
onClick: handleClick
|
|
}, titleTag),
|
|
h$1(ElCollapseTransition, {}, {
|
|
default: () => {
|
|
var _a2;
|
|
return withDirectives(h$1("ul", {
|
|
role: "menu",
|
|
class: [nsMenu.b(), nsMenu.m("inline")],
|
|
style: ulStyle.value
|
|
}, [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)]), [[vShow, opened.value]]);
|
|
}
|
|
})
|
|
]);
|
|
return h$1("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(),
|
|
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,
|
|
closeOnClickOutside: Boolean,
|
|
collapseTransition: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
ellipsis: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
popperOffset: {
|
|
type: Number,
|
|
default: 6
|
|
},
|
|
ellipsisIcon: {
|
|
type: iconPropType,
|
|
default: () => more_default
|
|
},
|
|
popperEffect: {
|
|
type: definePropType(String),
|
|
default: "dark"
|
|
},
|
|
popperClass: String,
|
|
showTimeout: {
|
|
type: Number,
|
|
default: 300
|
|
},
|
|
hideTimeout: {
|
|
type: Number,
|
|
default: 300
|
|
}
|
|
});
|
|
const checkIndexPath = (indexPath) => Array.isArray(indexPath) && indexPath.every((path) => isString$1(path));
|
|
const menuEmits = {
|
|
close: (index, indexPath) => isString$1(index) && checkIndexPath(indexPath),
|
|
open: (index, indexPath) => isString$1(index) && checkIndexPath(indexPath),
|
|
select: (index, indexPath, item, routerResult) => isString$1(index) && checkIndexPath(indexPath) && isObject$1(item) && (routerResult === void 0 || routerResult instanceof Promise)
|
|
};
|
|
var Menu = defineComponent({
|
|
name: "ElMenu",
|
|
props: menuProps,
|
|
emits: menuEmits,
|
|
setup(props, { emit, slots, expose }) {
|
|
const instance = getCurrentInstance();
|
|
const router = instance.appContext.config.globalProperties.$router;
|
|
const menu = ref();
|
|
const nsMenu = useNamespace("menu");
|
|
const nsSubMenu = useNamespace("sub-menu");
|
|
const sliceIndex = ref(-1);
|
|
const openedMenus = ref(props.defaultOpeneds && !props.collapse ? props.defaultOpeneds.slice(0) : []);
|
|
const activeIndex = ref(props.defaultActive);
|
|
const items = ref({});
|
|
const subMenus = ref({});
|
|
const isMenuPopup = 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 close = (index) => {
|
|
const i = openedMenus.value.indexOf(index);
|
|
if (i !== -1) {
|
|
openedMenus.value.splice(i, 1);
|
|
}
|
|
};
|
|
const closeMenu = (index, indexPath) => {
|
|
close(index);
|
|
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 (isNil(index) || isNil(indexPath))
|
|
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 calcMenuItemWidth = (menuItem) => {
|
|
const computedStyle = getComputedStyle(menuItem);
|
|
const marginLeft = Number.parseInt(computedStyle.marginLeft, 10);
|
|
const marginRight = Number.parseInt(computedStyle.marginRight, 10);
|
|
return menuItem.offsetWidth + marginLeft + marginRight || 0;
|
|
};
|
|
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 !== "#comment" && (item.nodeName !== "#text" || item.nodeValue));
|
|
const moreItemWidth = 64;
|
|
const computedMenuStyle = getComputedStyle(menu.value);
|
|
const paddingLeft = Number.parseInt(computedMenuStyle.paddingLeft, 10);
|
|
const paddingRight = Number.parseInt(computedMenuStyle.paddingRight, 10);
|
|
const menuWidth = menu.value.clientWidth - paddingLeft - paddingRight;
|
|
let calcWidth = 0;
|
|
let sliceIndex2 = 0;
|
|
items2.forEach((item, index) => {
|
|
calcWidth += calcMenuItemWidth(item);
|
|
if (calcWidth <= menuWidth - moreItemWidth) {
|
|
sliceIndex2 = index + 1;
|
|
}
|
|
});
|
|
return sliceIndex2 === items2.length ? -1 : sliceIndex2;
|
|
};
|
|
const getIndexPath = (index) => subMenus.value[index].indexPath;
|
|
const debounce = (fn, wait = 33.34) => {
|
|
let timmer;
|
|
return () => {
|
|
timmer && clearTimeout(timmer);
|
|
timmer = setTimeout(() => {
|
|
fn();
|
|
}, wait);
|
|
};
|
|
};
|
|
let isFirstTimeRender = true;
|
|
const handleResize = () => {
|
|
if (sliceIndex.value === calcSliceIndex())
|
|
return;
|
|
const callback = () => {
|
|
sliceIndex.value = -1;
|
|
nextTick(() => {
|
|
sliceIndex.value = calcSliceIndex();
|
|
});
|
|
};
|
|
isFirstTimeRender ? callback() : debounce(callback)();
|
|
isFirstTimeRender = false;
|
|
};
|
|
watch(() => props.defaultActive, (currentActive) => {
|
|
if (!items.value[currentActive]) {
|
|
activeIndex.value = "";
|
|
}
|
|
updateActiveIndex(currentActive);
|
|
});
|
|
watch(() => props.collapse, (value) => {
|
|
if (value)
|
|
openedMenus.value = [];
|
|
});
|
|
watch(items.value, initMenu);
|
|
let resizeStopper;
|
|
watchEffect(() => {
|
|
if (props.mode === "horizontal" && props.ellipsis)
|
|
resizeStopper = useResizeObserver(menu, handleResize).stop;
|
|
else
|
|
resizeStopper == null ? void 0 : resizeStopper();
|
|
});
|
|
const mouseInChild = ref(false);
|
|
{
|
|
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];
|
|
};
|
|
provide("rootMenu", reactive({
|
|
props,
|
|
openedMenus,
|
|
items,
|
|
subMenus,
|
|
activeIndex,
|
|
isMenuPopup,
|
|
addMenuItem,
|
|
removeMenuItem,
|
|
addSubMenu,
|
|
removeSubMenu,
|
|
openMenu,
|
|
closeMenu,
|
|
handleMenuItemClick,
|
|
handleSubMenuClick
|
|
}));
|
|
provide(`subMenu:${instance.uid}`, {
|
|
addSubMenu,
|
|
removeSubMenu,
|
|
mouseInChild,
|
|
level: 0
|
|
});
|
|
}
|
|
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,
|
|
handleResize
|
|
});
|
|
}
|
|
const ulStyle = useMenuCssVar(props, 0);
|
|
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(h$1(SubMenu, {
|
|
index: "sub-menu-more",
|
|
class: nsSubMenu.e("hide-arrow"),
|
|
popperOffset: props.popperOffset
|
|
}, {
|
|
title: () => h$1(ElIcon, {
|
|
class: nsSubMenu.e("icon-more")
|
|
}, {
|
|
default: () => h$1(props.ellipsisIcon)
|
|
}),
|
|
default: () => slotMore
|
|
}));
|
|
}
|
|
}
|
|
const directives = props.closeOnClickOutside ? [
|
|
[
|
|
ClickOutside,
|
|
() => {
|
|
if (!openedMenus.value.length)
|
|
return;
|
|
if (!mouseInChild.value) {
|
|
openedMenus.value.forEach((openedMenu) => emit("close", openedMenu, getIndexPath(openedMenu)));
|
|
openedMenus.value = [];
|
|
}
|
|
}
|
|
]
|
|
] : [];
|
|
const vMenu = withDirectives(h$1("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]), directives);
|
|
if (props.collapseTransition && props.mode === "vertical") {
|
|
return h$1(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$1(item.index) && Array.isArray(item.indexPath)
|
|
};
|
|
|
|
const COMPONENT_NAME$b = "ElMenuItem";
|
|
const _sfc_main$13 = defineComponent({
|
|
name: COMPONENT_NAME$b,
|
|
components: {
|
|
ElTooltip
|
|
},
|
|
props: menuItemProps,
|
|
emits: menuItemEmits,
|
|
setup(props, { emit }) {
|
|
const instance = getCurrentInstance();
|
|
const rootMenu = 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, toRef(props, "index"));
|
|
const subMenu = inject(`subMenu:${parentMenu.value.uid}`);
|
|
if (!subMenu)
|
|
throwError(COMPONENT_NAME$b, "can not inject sub menu");
|
|
const active = computed(() => props.index === rootMenu.activeIndex);
|
|
const item = 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);
|
|
}
|
|
};
|
|
onMounted(() => {
|
|
subMenu.addSubMenu(item);
|
|
rootMenu.addMenuItem(item);
|
|
});
|
|
onBeforeUnmount(() => {
|
|
subMenu.removeSubMenu(item);
|
|
rootMenu.removeMenuItem(item);
|
|
});
|
|
return {
|
|
parentMenu,
|
|
rootMenu,
|
|
active,
|
|
nsMenu,
|
|
nsMenuItem,
|
|
handleClick
|
|
};
|
|
}
|
|
});
|
|
function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
|
|
const _component_el_tooltip = resolveComponent("el-tooltip");
|
|
return openBlock(), createElementBlock("li", {
|
|
class: normalizeClass([
|
|
_ctx.nsMenuItem.b(),
|
|
_ctx.nsMenuItem.is("active", _ctx.active),
|
|
_ctx.nsMenuItem.is("disabled", _ctx.disabled)
|
|
]),
|
|
role: "menuitem",
|
|
tabindex: "-1",
|
|
onClick: _ctx.handleClick
|
|
}, [
|
|
_ctx.parentMenu.type.name === "ElMenu" && _ctx.rootMenu.props.collapse && _ctx.$slots.title ? (openBlock(), createBlock(_component_el_tooltip, {
|
|
key: 0,
|
|
effect: _ctx.rootMenu.props.popperEffect,
|
|
placement: "right",
|
|
"fallback-placements": ["left"],
|
|
persistent: ""
|
|
}, {
|
|
content: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "title")
|
|
]),
|
|
default: withCtx(() => [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(_ctx.nsMenu.be("tooltip", "trigger"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 2)
|
|
]),
|
|
_: 3
|
|
}, 8, ["effect"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
renderSlot(_ctx.$slots, "default"),
|
|
renderSlot(_ctx.$slots, "title")
|
|
], 64))
|
|
], 10, ["onClick"]);
|
|
}
|
|
var MenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["render", _sfc_render$d], ["__file", "menu-item.vue"]]);
|
|
|
|
const menuItemGroupProps = {
|
|
title: String
|
|
};
|
|
|
|
const COMPONENT_NAME$a = "ElMenuItemGroup";
|
|
const _sfc_main$12 = 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 openBlock(), createElementBlock("li", {
|
|
class: normalizeClass(_ctx.ns.b())
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(_ctx.ns.e("title"))
|
|
}, [
|
|
!_ctx.$slots.title ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
createTextVNode(toDisplayString(_ctx.title), 1)
|
|
], 64)) : renderSlot(_ctx.$slots, "title", { key: 1 })
|
|
], 2),
|
|
createElementVNode("ul", null, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
])
|
|
], 2);
|
|
}
|
|
var MenuItemGroup = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["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 __default__$P = defineComponent({
|
|
name: "ElPageHeader"
|
|
});
|
|
const _sfc_main$11 = /* @__PURE__ */ defineComponent({
|
|
...__default__$P,
|
|
props: pageHeaderProps,
|
|
emits: pageHeaderEmits,
|
|
setup(__props, { emit }) {
|
|
const slots = useSlots();
|
|
const { t } = useLocale();
|
|
const ns = useNamespace("page-header");
|
|
const kls = 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 openBlock(), createElementBlock("div", {
|
|
class: normalizeClass(unref(kls))
|
|
}, [
|
|
_ctx.$slots.breadcrumb ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).e("breadcrumb"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "breadcrumb")
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("header"))
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("left"))
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("back")),
|
|
role: "button",
|
|
tabindex: "0",
|
|
onClick: handleClick
|
|
}, [
|
|
_ctx.icon || _ctx.$slots.icon ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
"aria-label": _ctx.title || unref(t)("el.pageHeader.title"),
|
|
class: normalizeClass(unref(ns).e("icon"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "icon", {}, () => [
|
|
_ctx.icon ? (openBlock(), createBlock(unref(ElIcon), { key: 0 }, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.icon)))
|
|
]),
|
|
_: 1
|
|
})) : createCommentVNode("v-if", true)
|
|
])
|
|
], 10, ["aria-label"])) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("title"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "title", {}, () => [
|
|
createTextVNode(toDisplayString(_ctx.title || unref(t)("el.pageHeader.title")), 1)
|
|
])
|
|
], 2)
|
|
], 2),
|
|
createVNode(unref(ElDivider), { direction: "vertical" }),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("content"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "content", {}, () => [
|
|
createTextVNode(toDisplayString(_ctx.content), 1)
|
|
])
|
|
], 2)
|
|
], 2),
|
|
_ctx.$slots.extra ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).e("extra"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "extra")
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
], 2),
|
|
_ctx.$slots.default ? (openBlock(), createElementBlock("div", {
|
|
key: 1,
|
|
class: normalizeClass(unref(ns).e("main"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var PageHeader = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["__file", "page-header.vue"]]);
|
|
|
|
const ElPageHeader = withInstall(PageHeader);
|
|
|
|
const elPaginationKey = Symbol("elPaginationKey");
|
|
|
|
const paginationPrevProps = buildProps({
|
|
disabled: Boolean,
|
|
currentPage: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
prevText: {
|
|
type: String
|
|
},
|
|
prevIcon: {
|
|
type: iconPropType
|
|
}
|
|
});
|
|
const paginationPrevEmits = {
|
|
click: (evt) => evt instanceof MouseEvent
|
|
};
|
|
|
|
const __default__$O = defineComponent({
|
|
name: "ElPaginationPrev"
|
|
});
|
|
const _sfc_main$10 = /* @__PURE__ */ defineComponent({
|
|
...__default__$O,
|
|
props: paginationPrevProps,
|
|
emits: paginationPrevEmits,
|
|
setup(__props) {
|
|
const props = __props;
|
|
const { t } = useLocale();
|
|
const internalDisabled = computed(() => props.disabled || props.currentPage <= 1);
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("button", {
|
|
type: "button",
|
|
class: "btn-prev",
|
|
disabled: unref(internalDisabled),
|
|
"aria-label": _ctx.prevText || unref(t)("el.pagination.prev"),
|
|
"aria-disabled": unref(internalDisabled),
|
|
onClick: ($event) => _ctx.$emit("click", $event)
|
|
}, [
|
|
_ctx.prevText ? (openBlock(), createElementBlock("span", { key: 0 }, toDisplayString(_ctx.prevText), 1)) : (openBlock(), createBlock(unref(ElIcon), { key: 1 }, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.prevIcon)))
|
|
]),
|
|
_: 1
|
|
}))
|
|
], 8, ["disabled", "aria-label", "aria-disabled", "onClick"]);
|
|
};
|
|
}
|
|
});
|
|
var Prev = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["__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 __default__$N = defineComponent({
|
|
name: "ElPaginationNext"
|
|
});
|
|
const _sfc_main$$ = /* @__PURE__ */ defineComponent({
|
|
...__default__$N,
|
|
props: paginationNextProps,
|
|
emits: ["click"],
|
|
setup(__props) {
|
|
const props = __props;
|
|
const { t } = useLocale();
|
|
const internalDisabled = computed(() => props.disabled || props.currentPage === props.pageCount || props.pageCount === 0);
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("button", {
|
|
type: "button",
|
|
class: "btn-next",
|
|
disabled: unref(internalDisabled),
|
|
"aria-label": _ctx.nextText || unref(t)("el.pagination.next"),
|
|
"aria-disabled": unref(internalDisabled),
|
|
onClick: ($event) => _ctx.$emit("click", $event)
|
|
}, [
|
|
_ctx.nextText ? (openBlock(), createElementBlock("span", { key: 0 }, toDisplayString(_ctx.nextText), 1)) : (openBlock(), createBlock(unref(ElIcon), { key: 1 }, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.nextIcon)))
|
|
]),
|
|
_: 1
|
|
}))
|
|
], 8, ["disabled", "aria-label", "aria-disabled", "onClick"]);
|
|
};
|
|
}
|
|
});
|
|
var Next = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["__file", "next.vue"]]);
|
|
|
|
const selectGroupKey = Symbol("ElSelectGroup");
|
|
const selectKey = Symbol("ElSelect");
|
|
|
|
function useOption$1(props, states) {
|
|
const select = inject(selectKey);
|
|
const selectGroup = inject(selectGroupKey, { disabled: false });
|
|
const itemSelected = computed(() => {
|
|
return contains(castArray$1(select.props.modelValue), props.value);
|
|
});
|
|
const limitReached = computed(() => {
|
|
var _a;
|
|
if (select.props.multiple) {
|
|
const modelValue = castArray$1((_a = select.props.modelValue) != null ? _a : []);
|
|
return !itemSelected.value && modelValue.length >= select.props.multipleLimit && select.props.multipleLimit > 0;
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
const currentLabel = computed(() => {
|
|
return props.label || (isObject$1(props.value) ? "" : props.value);
|
|
});
|
|
const currentValue = computed(() => {
|
|
return props.value || props.label || "";
|
|
});
|
|
const isDisabled = computed(() => {
|
|
return props.disabled || states.groupDisabled || limitReached.value;
|
|
});
|
|
const instance = getCurrentInstance();
|
|
const contains = (arr = [], target) => {
|
|
if (!isObject$1(props.value)) {
|
|
return arr && arr.includes(target);
|
|
} else {
|
|
const valueKey = select.props.valueKey;
|
|
return arr && arr.some((item) => {
|
|
return toRaw(get(item, valueKey)) === get(target, valueKey);
|
|
});
|
|
}
|
|
};
|
|
const hoverItem = () => {
|
|
if (!props.disabled && !selectGroup.disabled) {
|
|
select.states.hoveringIndex = select.optionsArray.indexOf(instance.proxy);
|
|
}
|
|
};
|
|
const updateOption = (query) => {
|
|
const regexp = new RegExp(escapeStringRegexp(query), "i");
|
|
states.visible = regexp.test(currentLabel.value) || props.created;
|
|
};
|
|
watch(() => currentLabel.value, () => {
|
|
if (!props.created && !select.props.remote)
|
|
select.setSelected();
|
|
});
|
|
watch(() => props.value, (val, oldVal) => {
|
|
const { remote, valueKey } = select.props;
|
|
if (val !== oldVal) {
|
|
select.onOptionDestroy(oldVal, instance.proxy);
|
|
select.onOptionCreate(instance.proxy);
|
|
}
|
|
if (!props.created && !remote) {
|
|
if (valueKey && isObject$1(val) && isObject$1(oldVal) && val[valueKey] === oldVal[valueKey]) {
|
|
return;
|
|
}
|
|
select.setSelected();
|
|
}
|
|
});
|
|
watch(() => selectGroup.disabled, () => {
|
|
states.groupDisabled = selectGroup.disabled;
|
|
}, { immediate: true });
|
|
return {
|
|
select,
|
|
currentLabel,
|
|
currentValue,
|
|
itemSelected,
|
|
isDisabled,
|
|
hoverItem,
|
|
updateOption
|
|
};
|
|
}
|
|
|
|
const _sfc_main$_ = defineComponent({
|
|
name: "ElOption",
|
|
componentName: "ElOption",
|
|
props: {
|
|
value: {
|
|
required: true,
|
|
type: [String, Number, Boolean, Object]
|
|
},
|
|
label: [String, Number],
|
|
created: Boolean,
|
|
disabled: Boolean
|
|
},
|
|
setup(props) {
|
|
const ns = useNamespace("select");
|
|
const id = useId();
|
|
const containerKls = computed(() => [
|
|
ns.be("dropdown", "item"),
|
|
ns.is("disabled", unref(isDisabled)),
|
|
ns.is("selected", unref(itemSelected)),
|
|
ns.is("hovering", unref(hover))
|
|
]);
|
|
const states = reactive({
|
|
index: -1,
|
|
groupDisabled: false,
|
|
visible: true,
|
|
hover: false
|
|
});
|
|
const {
|
|
currentLabel,
|
|
itemSelected,
|
|
isDisabled,
|
|
select,
|
|
hoverItem,
|
|
updateOption
|
|
} = useOption$1(props, states);
|
|
const { visible, hover } = toRefs(states);
|
|
const vm = getCurrentInstance().proxy;
|
|
select.onOptionCreate(vm);
|
|
onBeforeUnmount(() => {
|
|
const key = vm.value;
|
|
const { selected } = select.states;
|
|
const selectedOptions = select.props.multiple ? selected : [selected];
|
|
const doesSelected = selectedOptions.some((item) => {
|
|
return item.value === vm.value;
|
|
});
|
|
nextTick(() => {
|
|
if (select.states.cachedOptions.get(key) === vm && !doesSelected) {
|
|
select.states.cachedOptions.delete(key);
|
|
}
|
|
});
|
|
select.onOptionDestroy(key, vm);
|
|
});
|
|
function selectOptionClick() {
|
|
if (!isDisabled.value) {
|
|
select.handleOptionSelect(vm);
|
|
}
|
|
}
|
|
return {
|
|
ns,
|
|
id,
|
|
containerKls,
|
|
currentLabel,
|
|
itemSelected,
|
|
isDisabled,
|
|
select,
|
|
hoverItem,
|
|
updateOption,
|
|
visible,
|
|
hover,
|
|
selectOptionClick,
|
|
states
|
|
};
|
|
}
|
|
});
|
|
function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
|
|
return withDirectives((openBlock(), createElementBlock("li", {
|
|
id: _ctx.id,
|
|
class: normalizeClass(_ctx.containerKls),
|
|
role: "option",
|
|
"aria-disabled": _ctx.isDisabled || void 0,
|
|
"aria-selected": _ctx.itemSelected,
|
|
onMouseenter: _ctx.hoverItem,
|
|
onClick: withModifiers(_ctx.selectOptionClick, ["stop"])
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default", {}, () => [
|
|
createElementVNode("span", null, toDisplayString(_ctx.currentLabel), 1)
|
|
])
|
|
], 42, ["id", "aria-disabled", "aria-selected", "onMouseenter", "onClick"])), [
|
|
[vShow, _ctx.visible]
|
|
]);
|
|
}
|
|
var Option = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["render", _sfc_render$b], ["__file", "option.vue"]]);
|
|
|
|
const _sfc_main$Z = defineComponent({
|
|
name: "ElSelectDropdown",
|
|
componentName: "ElSelectDropdown",
|
|
setup() {
|
|
const select = inject(selectKey);
|
|
const ns = useNamespace("select");
|
|
const popperClass = computed(() => select.props.popperClass);
|
|
const isMultiple = computed(() => select.props.multiple);
|
|
const isFitInputWidth = computed(() => select.props.fitInputWidth);
|
|
const minWidth = ref("");
|
|
function updateMinWidth() {
|
|
var _a;
|
|
minWidth.value = `${(_a = select.selectRef) == null ? void 0 : _a.offsetWidth}px`;
|
|
}
|
|
onMounted(() => {
|
|
updateMinWidth();
|
|
useResizeObserver(select.selectRef, updateMinWidth);
|
|
});
|
|
return {
|
|
ns,
|
|
minWidth,
|
|
popperClass,
|
|
isMultiple,
|
|
isFitInputWidth
|
|
};
|
|
}
|
|
});
|
|
function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass([_ctx.ns.b("dropdown"), _ctx.ns.is("multiple", _ctx.isMultiple), _ctx.popperClass]),
|
|
style: normalizeStyle({ [_ctx.isFitInputWidth ? "width" : "minWidth"]: _ctx.minWidth })
|
|
}, [
|
|
_ctx.$slots.header ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(_ctx.ns.be("dropdown", "header"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "header")
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
renderSlot(_ctx.$slots, "default"),
|
|
_ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
|
|
key: 1,
|
|
class: normalizeClass(_ctx.ns.be("dropdown", "footer"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "footer")
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
], 6);
|
|
}
|
|
var ElSelectMenu$1 = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["render", _sfc_render$a], ["__file", "select-dropdown.vue"]]);
|
|
|
|
const MINIMUM_INPUT_WIDTH$1 = 11;
|
|
const useSelect$3 = (props, emit) => {
|
|
const { t } = useLocale();
|
|
const contentId = useId();
|
|
const nsSelect = useNamespace("select");
|
|
const nsInput = useNamespace("input");
|
|
const states = reactive({
|
|
inputValue: "",
|
|
options: /* @__PURE__ */ new Map(),
|
|
cachedOptions: /* @__PURE__ */ new Map(),
|
|
disabledOptions: /* @__PURE__ */ new Map(),
|
|
optionValues: [],
|
|
selected: [],
|
|
selectionWidth: 0,
|
|
calculatorWidth: 0,
|
|
collapseItemWidth: 0,
|
|
selectedLabel: "",
|
|
hoveringIndex: -1,
|
|
previousQuery: null,
|
|
inputHovering: false,
|
|
menuVisibleOnFocus: false,
|
|
isBeforeHide: false
|
|
});
|
|
const selectRef = ref(null);
|
|
const selectionRef = ref(null);
|
|
const tooltipRef = ref(null);
|
|
const tagTooltipRef = ref(null);
|
|
const inputRef = ref(null);
|
|
const calculatorRef = ref(null);
|
|
const prefixRef = ref(null);
|
|
const suffixRef = ref(null);
|
|
const menuRef = ref(null);
|
|
const tagMenuRef = ref(null);
|
|
const collapseItemRef = ref(null);
|
|
const scrollbarRef = ref(null);
|
|
const {
|
|
isComposing,
|
|
handleCompositionStart,
|
|
handleCompositionUpdate,
|
|
handleCompositionEnd
|
|
} = useComposition({
|
|
afterComposition: (e) => onInput(e)
|
|
});
|
|
const { wrapperRef, isFocused } = useFocusController(inputRef, {
|
|
beforeFocus() {
|
|
return selectDisabled.value;
|
|
},
|
|
afterFocus() {
|
|
if (props.automaticDropdown && !expanded.value) {
|
|
expanded.value = true;
|
|
states.menuVisibleOnFocus = true;
|
|
}
|
|
},
|
|
beforeBlur(event) {
|
|
var _a, _b;
|
|
return ((_a = tooltipRef.value) == null ? void 0 : _a.isFocusInsideContent(event)) || ((_b = tagTooltipRef.value) == null ? void 0 : _b.isFocusInsideContent(event));
|
|
},
|
|
afterBlur() {
|
|
expanded.value = false;
|
|
states.menuVisibleOnFocus = false;
|
|
}
|
|
});
|
|
const expanded = ref(false);
|
|
const hoverOption = ref();
|
|
const { form, formItem } = useFormItem();
|
|
const { inputId } = useFormItemInputId(props, {
|
|
formItemContext: formItem
|
|
});
|
|
const { valueOnClear, isEmptyValue } = useEmptyValues(props);
|
|
const selectDisabled = computed(() => props.disabled || (form == null ? void 0 : form.disabled));
|
|
const hasModelValue = computed(() => {
|
|
return isArray$1(props.modelValue) ? props.modelValue.length > 0 : !isEmptyValue(props.modelValue);
|
|
});
|
|
const showClose = computed(() => {
|
|
return props.clearable && !selectDisabled.value && states.inputHovering && hasModelValue.value;
|
|
});
|
|
const iconComponent = computed(() => props.remote && props.filterable && !props.remoteShowSuffix ? "" : props.suffixIcon);
|
|
const iconReverse = computed(() => nsSelect.is("reverse", iconComponent.value && expanded.value));
|
|
const validateState = computed(() => (formItem == null ? void 0 : formItem.validateState) || "");
|
|
const validateIcon = computed(() => ValidateComponentsMap[validateState.value]);
|
|
const debounce$1 = computed(() => props.remote ? 300 : 0);
|
|
const emptyText = computed(() => {
|
|
if (props.loading) {
|
|
return props.loadingText || t("el.select.loading");
|
|
} else {
|
|
if (props.remote && !states.inputValue && states.options.size === 0)
|
|
return false;
|
|
if (props.filterable && states.inputValue && states.options.size > 0 && filteredOptionsCount.value === 0) {
|
|
return props.noMatchText || t("el.select.noMatch");
|
|
}
|
|
if (states.options.size === 0) {
|
|
return props.noDataText || t("el.select.noData");
|
|
}
|
|
}
|
|
return null;
|
|
});
|
|
const filteredOptionsCount = computed(() => optionsArray.value.filter((option) => option.visible).length);
|
|
const optionsArray = computed(() => {
|
|
const list = Array.from(states.options.values());
|
|
const newList = [];
|
|
states.optionValues.forEach((item) => {
|
|
const index = list.findIndex((i) => i.value === item);
|
|
if (index > -1) {
|
|
newList.push(list[index]);
|
|
}
|
|
});
|
|
return newList.length >= list.length ? newList : list;
|
|
});
|
|
const cachedOptionsArray = computed(() => Array.from(states.cachedOptions.values()));
|
|
const showNewOption = computed(() => {
|
|
const hasExistingOption = optionsArray.value.filter((option) => {
|
|
return !option.created;
|
|
}).some((option) => {
|
|
return option.currentLabel === states.inputValue;
|
|
});
|
|
return props.filterable && props.allowCreate && states.inputValue !== "" && !hasExistingOption;
|
|
});
|
|
const updateOptions = () => {
|
|
if (props.filterable && isFunction$1(props.filterMethod))
|
|
return;
|
|
if (props.filterable && props.remote && isFunction$1(props.remoteMethod))
|
|
return;
|
|
optionsArray.value.forEach((option) => {
|
|
var _a;
|
|
(_a = option.updateOption) == null ? void 0 : _a.call(option, states.inputValue);
|
|
});
|
|
};
|
|
const selectSize = useFormSize();
|
|
const collapseTagSize = computed(() => ["small"].includes(selectSize.value) ? "small" : "default");
|
|
const dropdownMenuVisible = computed({
|
|
get() {
|
|
return expanded.value && emptyText.value !== false;
|
|
},
|
|
set(val) {
|
|
expanded.value = val;
|
|
}
|
|
});
|
|
const shouldShowPlaceholder = computed(() => {
|
|
if (props.multiple && !isUndefined(props.modelValue)) {
|
|
return castArray$1(props.modelValue).length === 0 && !states.inputValue;
|
|
}
|
|
const value = isArray$1(props.modelValue) ? props.modelValue[0] : props.modelValue;
|
|
return props.filterable || isUndefined(value) ? !states.inputValue : true;
|
|
});
|
|
const currentPlaceholder = computed(() => {
|
|
var _a;
|
|
const _placeholder = (_a = props.placeholder) != null ? _a : t("el.select.placeholder");
|
|
return props.multiple || !hasModelValue.value ? _placeholder : states.selectedLabel;
|
|
});
|
|
const mouseEnterEventName = computed(() => isIOS ? null : "mouseenter");
|
|
watch(() => props.modelValue, (val, oldVal) => {
|
|
if (props.multiple) {
|
|
if (props.filterable && !props.reserveKeyword) {
|
|
states.inputValue = "";
|
|
handleQueryChange("");
|
|
}
|
|
}
|
|
setSelected();
|
|
if (!isEqual$1(val, oldVal) && props.validateEvent) {
|
|
formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn());
|
|
}
|
|
}, {
|
|
flush: "post",
|
|
deep: true
|
|
});
|
|
watch(() => expanded.value, (val) => {
|
|
if (val) {
|
|
handleQueryChange(states.inputValue);
|
|
} else {
|
|
states.inputValue = "";
|
|
states.previousQuery = null;
|
|
states.isBeforeHide = true;
|
|
}
|
|
emit("visible-change", val);
|
|
});
|
|
watch(() => states.options.entries(), () => {
|
|
var _a;
|
|
if (!isClient)
|
|
return;
|
|
const inputs = ((_a = selectRef.value) == null ? void 0 : _a.querySelectorAll("input")) || [];
|
|
if (!props.filterable && !props.defaultFirstOption && !isUndefined(props.modelValue) || !Array.from(inputs).includes(document.activeElement)) {
|
|
setSelected();
|
|
}
|
|
if (props.defaultFirstOption && (props.filterable || props.remote) && filteredOptionsCount.value) {
|
|
checkDefaultFirstOption();
|
|
}
|
|
}, {
|
|
flush: "post"
|
|
});
|
|
watch(() => states.hoveringIndex, (val) => {
|
|
if (isNumber(val) && val > -1) {
|
|
hoverOption.value = optionsArray.value[val] || {};
|
|
} else {
|
|
hoverOption.value = {};
|
|
}
|
|
optionsArray.value.forEach((option) => {
|
|
option.hover = hoverOption.value === option;
|
|
});
|
|
});
|
|
watchEffect(() => {
|
|
if (states.isBeforeHide)
|
|
return;
|
|
updateOptions();
|
|
});
|
|
const handleQueryChange = (val) => {
|
|
if (states.previousQuery === val || isComposing.value) {
|
|
return;
|
|
}
|
|
states.previousQuery = val;
|
|
if (props.filterable && isFunction$1(props.filterMethod)) {
|
|
props.filterMethod(val);
|
|
} else if (props.filterable && props.remote && isFunction$1(props.remoteMethod)) {
|
|
props.remoteMethod(val);
|
|
}
|
|
if (props.defaultFirstOption && (props.filterable || props.remote) && filteredOptionsCount.value) {
|
|
nextTick(checkDefaultFirstOption);
|
|
} else {
|
|
nextTick(updateHoveringIndex);
|
|
}
|
|
};
|
|
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.hoveringIndex = getValueIndex(optionsArray.value, userCreatedOption || firstOriginOption);
|
|
};
|
|
const setSelected = () => {
|
|
if (!props.multiple) {
|
|
const value = isArray$1(props.modelValue) ? props.modelValue[0] : props.modelValue;
|
|
const option = getOption(value);
|
|
states.selectedLabel = option.currentLabel;
|
|
states.selected = [option];
|
|
return;
|
|
} else {
|
|
states.selectedLabel = "";
|
|
}
|
|
const result = [];
|
|
if (!isUndefined(props.modelValue)) {
|
|
castArray$1(props.modelValue).forEach((value) => {
|
|
result.push(getOption(value));
|
|
});
|
|
}
|
|
states.selected = result;
|
|
};
|
|
const getOption = (value) => {
|
|
let option;
|
|
const isObjectValue = toRawType(value).toLowerCase() === "object";
|
|
const isNull = toRawType(value).toLowerCase() === "null";
|
|
const isUndefined2 = 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,
|
|
get isDisabled() {
|
|
return cachedOption.isDisabled;
|
|
}
|
|
};
|
|
break;
|
|
}
|
|
}
|
|
if (option)
|
|
return option;
|
|
const label = isObjectValue ? value.label : !isNull && !isUndefined2 ? value : "";
|
|
const newOption = {
|
|
value,
|
|
currentLabel: label
|
|
};
|
|
return newOption;
|
|
};
|
|
const updateHoveringIndex = () => {
|
|
states.hoveringIndex = optionsArray.value.findIndex((item) => states.selected.some((selected) => getValueKey(selected) === getValueKey(item)));
|
|
};
|
|
const resetSelectionWidth = () => {
|
|
states.selectionWidth = selectionRef.value.getBoundingClientRect().width;
|
|
};
|
|
const resetCalculatorWidth = () => {
|
|
states.calculatorWidth = calculatorRef.value.getBoundingClientRect().width;
|
|
};
|
|
const resetCollapseItemWidth = () => {
|
|
states.collapseItemWidth = collapseItemRef.value.getBoundingClientRect().width;
|
|
};
|
|
const updateTooltip = () => {
|
|
var _a, _b;
|
|
(_b = (_a = tooltipRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
|
|
};
|
|
const updateTagTooltip = () => {
|
|
var _a, _b;
|
|
(_b = (_a = tagTooltipRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
|
|
};
|
|
const onInputChange = () => {
|
|
if (states.inputValue.length > 0 && !expanded.value) {
|
|
expanded.value = true;
|
|
}
|
|
handleQueryChange(states.inputValue);
|
|
};
|
|
const onInput = (event) => {
|
|
states.inputValue = event.target.value;
|
|
if (props.remote) {
|
|
debouncedOnInputChange();
|
|
} else {
|
|
return onInputChange();
|
|
}
|
|
};
|
|
const debouncedOnInputChange = debounce(() => {
|
|
onInputChange();
|
|
}, debounce$1.value);
|
|
const emitChange = (val) => {
|
|
if (!isEqual$1(props.modelValue, val)) {
|
|
emit(CHANGE_EVENT, val);
|
|
}
|
|
};
|
|
const getLastNotDisabledIndex = (value) => findLastIndex(value, (it) => !states.disabledOptions.has(it));
|
|
const deletePrevTag = (e) => {
|
|
if (!props.multiple)
|
|
return;
|
|
if (e.code === EVENT_CODE.delete)
|
|
return;
|
|
if (e.target.value.length <= 0) {
|
|
const value = castArray$1(props.modelValue).slice();
|
|
const lastNotDisabledIndex = getLastNotDisabledIndex(value);
|
|
if (lastNotDisabledIndex < 0)
|
|
return;
|
|
const removeTagValue = value[lastNotDisabledIndex];
|
|
value.splice(lastNotDisabledIndex, 1);
|
|
emit(UPDATE_MODEL_EVENT, value);
|
|
emitChange(value);
|
|
emit("remove-tag", removeTagValue);
|
|
}
|
|
};
|
|
const deleteTag = (event, tag) => {
|
|
const index = states.selected.indexOf(tag);
|
|
if (index > -1 && !selectDisabled.value) {
|
|
const value = castArray$1(props.modelValue).slice();
|
|
value.splice(index, 1);
|
|
emit(UPDATE_MODEL_EVENT, value);
|
|
emitChange(value);
|
|
emit("remove-tag", tag.value);
|
|
}
|
|
event.stopPropagation();
|
|
focus();
|
|
};
|
|
const deleteSelected = (event) => {
|
|
event.stopPropagation();
|
|
const value = props.multiple ? [] : valueOnClear.value;
|
|
if (props.multiple) {
|
|
for (const item of states.selected) {
|
|
if (item.isDisabled)
|
|
value.push(item.value);
|
|
}
|
|
}
|
|
emit(UPDATE_MODEL_EVENT, value);
|
|
emitChange(value);
|
|
states.hoveringIndex = -1;
|
|
expanded.value = false;
|
|
emit("clear");
|
|
focus();
|
|
};
|
|
const handleOptionSelect = (option) => {
|
|
var _a;
|
|
if (props.multiple) {
|
|
const value = castArray$1((_a = props.modelValue) != null ? _a : []).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);
|
|
}
|
|
emit(UPDATE_MODEL_EVENT, value);
|
|
emitChange(value);
|
|
if (option.created) {
|
|
handleQueryChange("");
|
|
}
|
|
if (props.filterable && !props.reserveKeyword) {
|
|
states.inputValue = "";
|
|
}
|
|
} else {
|
|
emit(UPDATE_MODEL_EVENT, option.value);
|
|
emitChange(option.value);
|
|
expanded.value = false;
|
|
}
|
|
focus();
|
|
if (expanded.value)
|
|
return;
|
|
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 (toRaw(get(item, valueKey)) === get(value, valueKey)) {
|
|
index = i;
|
|
return true;
|
|
}
|
|
return false;
|
|
});
|
|
return index;
|
|
};
|
|
const scrollToOption = (option) => {
|
|
var _a, _b, _c, _d, _e;
|
|
const targetOption = isArray$1(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, `.${nsSelect.be("dropdown", "wrap")}`);
|
|
if (menu) {
|
|
scrollIntoView(menu, target);
|
|
}
|
|
}
|
|
(_e = scrollbarRef.value) == null ? void 0 : _e.handleScroll();
|
|
};
|
|
const onOptionCreate = (vm) => {
|
|
states.options.set(vm.value, vm);
|
|
states.cachedOptions.set(vm.value, vm);
|
|
vm.disabled && states.disabledOptions.set(vm.value, vm);
|
|
};
|
|
const onOptionDestroy = (key, vm) => {
|
|
if (states.options.get(key) === vm) {
|
|
states.options.delete(key);
|
|
}
|
|
};
|
|
const popperRef = computed(() => {
|
|
var _a, _b;
|
|
return (_b = (_a = tooltipRef.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
|
|
});
|
|
const handleMenuEnter = () => {
|
|
states.isBeforeHide = false;
|
|
nextTick(() => scrollToOption(states.selected));
|
|
};
|
|
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 handleClearClick = (event) => {
|
|
deleteSelected(event);
|
|
};
|
|
const handleClickOutside = () => {
|
|
expanded.value = false;
|
|
isFocused.value && blur();
|
|
};
|
|
const handleEsc = () => {
|
|
if (states.inputValue.length > 0) {
|
|
states.inputValue = "";
|
|
} else {
|
|
expanded.value = false;
|
|
}
|
|
};
|
|
const toggleMenu = () => {
|
|
if (selectDisabled.value)
|
|
return;
|
|
if (isIOS)
|
|
states.inputHovering = true;
|
|
if (states.menuVisibleOnFocus) {
|
|
states.menuVisibleOnFocus = false;
|
|
} else {
|
|
expanded.value = !expanded.value;
|
|
}
|
|
};
|
|
const selectOption = () => {
|
|
if (!expanded.value) {
|
|
toggleMenu();
|
|
} else {
|
|
if (optionsArray.value[states.hoveringIndex]) {
|
|
handleOptionSelect(optionsArray.value[states.hoveringIndex]);
|
|
}
|
|
}
|
|
};
|
|
const getValueKey = (item) => {
|
|
return isObject$1(item.value) ? get(item.value, props.valueKey) : item.value;
|
|
};
|
|
const optionsAllDisabled = computed(() => optionsArray.value.filter((option) => option.visible).every((option) => option.disabled));
|
|
const showTagList = computed(() => {
|
|
if (!props.multiple) {
|
|
return [];
|
|
}
|
|
return props.collapseTags ? states.selected.slice(0, props.maxCollapseTags) : states.selected;
|
|
});
|
|
const collapseTagList = computed(() => {
|
|
if (!props.multiple) {
|
|
return [];
|
|
}
|
|
return props.collapseTags ? states.selected.slice(props.maxCollapseTags) : [];
|
|
});
|
|
const navigateOptions = (direction) => {
|
|
if (!expanded.value) {
|
|
expanded.value = true;
|
|
return;
|
|
}
|
|
if (states.options.size === 0 || states.filteredOptionsCount === 0 || isComposing.value)
|
|
return;
|
|
if (!optionsAllDisabled.value) {
|
|
if (direction === "next") {
|
|
states.hoveringIndex++;
|
|
if (states.hoveringIndex === states.options.size) {
|
|
states.hoveringIndex = 0;
|
|
}
|
|
} else if (direction === "prev") {
|
|
states.hoveringIndex--;
|
|
if (states.hoveringIndex < 0) {
|
|
states.hoveringIndex = states.options.size - 1;
|
|
}
|
|
}
|
|
const option = optionsArray.value[states.hoveringIndex];
|
|
if (option.disabled === true || option.states.groupDisabled === true || !option.visible) {
|
|
navigateOptions(direction);
|
|
}
|
|
nextTick(() => scrollToOption(hoverOption.value));
|
|
}
|
|
};
|
|
const getGapWidth = () => {
|
|
if (!selectionRef.value)
|
|
return 0;
|
|
const style = window.getComputedStyle(selectionRef.value);
|
|
return Number.parseFloat(style.gap || "6px");
|
|
};
|
|
const tagStyle = computed(() => {
|
|
const gapWidth = getGapWidth();
|
|
const maxWidth = collapseItemRef.value && props.maxCollapseTags === 1 ? states.selectionWidth - states.collapseItemWidth - gapWidth : states.selectionWidth;
|
|
return { maxWidth: `${maxWidth}px` };
|
|
});
|
|
const collapseTagStyle = computed(() => {
|
|
return { maxWidth: `${states.selectionWidth}px` };
|
|
});
|
|
const inputStyle = computed(() => ({
|
|
width: `${Math.max(states.calculatorWidth, MINIMUM_INPUT_WIDTH$1)}px`
|
|
}));
|
|
useResizeObserver(selectionRef, resetSelectionWidth);
|
|
useResizeObserver(calculatorRef, resetCalculatorWidth);
|
|
useResizeObserver(menuRef, updateTooltip);
|
|
useResizeObserver(wrapperRef, updateTooltip);
|
|
useResizeObserver(tagMenuRef, updateTagTooltip);
|
|
useResizeObserver(collapseItemRef, resetCollapseItemWidth);
|
|
onMounted(() => {
|
|
setSelected();
|
|
});
|
|
return {
|
|
inputId,
|
|
contentId,
|
|
nsSelect,
|
|
nsInput,
|
|
states,
|
|
isFocused,
|
|
expanded,
|
|
optionsArray,
|
|
hoverOption,
|
|
selectSize,
|
|
filteredOptionsCount,
|
|
resetCalculatorWidth,
|
|
updateTooltip,
|
|
updateTagTooltip,
|
|
debouncedOnInputChange,
|
|
onInput,
|
|
deletePrevTag,
|
|
deleteTag,
|
|
deleteSelected,
|
|
handleOptionSelect,
|
|
scrollToOption,
|
|
hasModelValue,
|
|
shouldShowPlaceholder,
|
|
currentPlaceholder,
|
|
mouseEnterEventName,
|
|
showClose,
|
|
iconComponent,
|
|
iconReverse,
|
|
validateState,
|
|
validateIcon,
|
|
showNewOption,
|
|
updateOptions,
|
|
collapseTagSize,
|
|
setSelected,
|
|
selectDisabled,
|
|
emptyText,
|
|
handleCompositionStart,
|
|
handleCompositionUpdate,
|
|
handleCompositionEnd,
|
|
onOptionCreate,
|
|
onOptionDestroy,
|
|
handleMenuEnter,
|
|
focus,
|
|
blur,
|
|
handleClearClick,
|
|
handleClickOutside,
|
|
handleEsc,
|
|
toggleMenu,
|
|
selectOption,
|
|
getValueKey,
|
|
navigateOptions,
|
|
dropdownMenuVisible,
|
|
showTagList,
|
|
collapseTagList,
|
|
tagStyle,
|
|
collapseTagStyle,
|
|
inputStyle,
|
|
popperRef,
|
|
inputRef,
|
|
tooltipRef,
|
|
tagTooltipRef,
|
|
calculatorRef,
|
|
prefixRef,
|
|
suffixRef,
|
|
selectRef,
|
|
wrapperRef,
|
|
selectionRef,
|
|
scrollbarRef,
|
|
menuRef,
|
|
tagMenuRef,
|
|
collapseItemRef
|
|
};
|
|
};
|
|
|
|
var ElOptions = defineComponent({
|
|
name: "ElOptions",
|
|
setup(_, { slots }) {
|
|
const select = inject(selectKey);
|
|
let cachedValueList = [];
|
|
return () => {
|
|
var _a, _b;
|
|
const children = (_a = slots.default) == null ? void 0 : _a.call(slots);
|
|
const valueList = [];
|
|
function filterOptions(children2) {
|
|
if (!isArray$1(children2))
|
|
return;
|
|
children2.forEach((item) => {
|
|
var _a2, _b2, _c, _d;
|
|
const name = (_a2 = (item == null ? void 0 : item.type) || {}) == null ? void 0 : _a2.name;
|
|
if (name === "ElOptionGroup") {
|
|
filterOptions(!isString$1(item.children) && !isArray$1(item.children) && isFunction$1((_b2 = item.children) == null ? void 0 : _b2.default) ? (_c = item.children) == null ? void 0 : _c.default() : item.children);
|
|
} else if (name === "ElOption") {
|
|
valueList.push((_d = item.props) == null ? void 0 : _d.value);
|
|
} else if (isArray$1(item.children)) {
|
|
filterOptions(item.children);
|
|
}
|
|
});
|
|
}
|
|
if (children.length) {
|
|
filterOptions((_b = children[0]) == null ? void 0 : _b.children);
|
|
}
|
|
if (!isEqual$1(valueList, cachedValueList)) {
|
|
cachedValueList = valueList;
|
|
if (select) {
|
|
select.states.optionValues = valueList;
|
|
}
|
|
}
|
|
return children;
|
|
};
|
|
}
|
|
});
|
|
|
|
const SelectProps$1 = buildProps({
|
|
name: String,
|
|
id: String,
|
|
modelValue: {
|
|
type: [Array, String, Number, Boolean, Object],
|
|
default: void 0
|
|
},
|
|
autocomplete: {
|
|
type: String,
|
|
default: "off"
|
|
},
|
|
automaticDropdown: Boolean,
|
|
size: useSizeProp,
|
|
effect: {
|
|
type: definePropType(String),
|
|
default: "light"
|
|
},
|
|
disabled: Boolean,
|
|
clearable: Boolean,
|
|
filterable: Boolean,
|
|
allowCreate: Boolean,
|
|
loading: Boolean,
|
|
popperClass: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
popperOptions: {
|
|
type: definePropType(Object),
|
|
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: Boolean,
|
|
maxCollapseTags: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
teleported: useTooltipContentProps.teleported,
|
|
persistent: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
clearIcon: {
|
|
type: iconPropType,
|
|
default: circle_close_default
|
|
},
|
|
fitInputWidth: Boolean,
|
|
suffixIcon: {
|
|
type: iconPropType,
|
|
default: arrow_down_default
|
|
},
|
|
tagType: { ...tagProps.type, default: "info" },
|
|
tagEffect: { ...tagProps.effect, default: "light" },
|
|
validateEvent: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
remoteShowSuffix: Boolean,
|
|
placement: {
|
|
type: definePropType(String),
|
|
values: Ee,
|
|
default: "bottom-start"
|
|
},
|
|
fallbackPlacements: {
|
|
type: definePropType(Array),
|
|
default: ["bottom-start", "top-start", "right", "left"]
|
|
},
|
|
appendTo: String,
|
|
...useEmptyValuesProps,
|
|
...useAriaProps(["ariaLabel"])
|
|
});
|
|
|
|
const COMPONENT_NAME$9 = "ElSelect";
|
|
const _sfc_main$Y = defineComponent({
|
|
name: COMPONENT_NAME$9,
|
|
componentName: COMPONENT_NAME$9,
|
|
components: {
|
|
ElSelectMenu: ElSelectMenu$1,
|
|
ElOption: Option,
|
|
ElOptions,
|
|
ElTag,
|
|
ElScrollbar,
|
|
ElTooltip,
|
|
ElIcon
|
|
},
|
|
directives: { ClickOutside },
|
|
props: SelectProps$1,
|
|
emits: [
|
|
UPDATE_MODEL_EVENT,
|
|
CHANGE_EVENT,
|
|
"remove-tag",
|
|
"clear",
|
|
"visible-change",
|
|
"focus",
|
|
"blur"
|
|
],
|
|
setup(props, { emit }) {
|
|
const modelValue = computed(() => {
|
|
const { modelValue: rawModelValue, multiple } = props;
|
|
const fallback = multiple ? [] : void 0;
|
|
if (isArray$1(rawModelValue)) {
|
|
return multiple ? rawModelValue : fallback;
|
|
}
|
|
return multiple ? fallback : rawModelValue;
|
|
});
|
|
const _props = reactive({
|
|
...toRefs(props),
|
|
modelValue
|
|
});
|
|
const API = useSelect$3(_props, emit);
|
|
provide(selectKey, reactive({
|
|
props: _props,
|
|
states: API.states,
|
|
optionsArray: API.optionsArray,
|
|
handleOptionSelect: API.handleOptionSelect,
|
|
onOptionCreate: API.onOptionCreate,
|
|
onOptionDestroy: API.onOptionDestroy,
|
|
selectRef: API.selectRef,
|
|
setSelected: API.setSelected
|
|
}));
|
|
return {
|
|
...API,
|
|
modelValue
|
|
};
|
|
}
|
|
});
|
|
function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
|
|
const _component_el_tag = resolveComponent("el-tag");
|
|
const _component_el_tooltip = resolveComponent("el-tooltip");
|
|
const _component_el_icon = resolveComponent("el-icon");
|
|
const _component_el_option = resolveComponent("el-option");
|
|
const _component_el_options = resolveComponent("el-options");
|
|
const _component_el_scrollbar = resolveComponent("el-scrollbar");
|
|
const _component_el_select_menu = resolveComponent("el-select-menu");
|
|
const _directive_click_outside = resolveDirective("click-outside");
|
|
return withDirectives((openBlock(), createElementBlock("div", {
|
|
ref: "selectRef",
|
|
class: normalizeClass([_ctx.nsSelect.b(), _ctx.nsSelect.m(_ctx.selectSize)]),
|
|
[toHandlerKey(_ctx.mouseEnterEventName)]: ($event) => _ctx.states.inputHovering = true,
|
|
onMouseleave: ($event) => _ctx.states.inputHovering = false
|
|
}, [
|
|
createVNode(_component_el_tooltip, {
|
|
ref: "tooltipRef",
|
|
visible: _ctx.dropdownMenuVisible,
|
|
placement: _ctx.placement,
|
|
teleported: _ctx.teleported,
|
|
"popper-class": [_ctx.nsSelect.e("popper"), _ctx.popperClass],
|
|
"popper-options": _ctx.popperOptions,
|
|
"fallback-placements": _ctx.fallbackPlacements,
|
|
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,
|
|
"append-to": _ctx.appendTo,
|
|
onBeforeShow: _ctx.handleMenuEnter,
|
|
onHide: ($event) => _ctx.states.isBeforeHide = false
|
|
}, {
|
|
default: withCtx(() => {
|
|
var _a;
|
|
return [
|
|
createElementVNode("div", {
|
|
ref: "wrapperRef",
|
|
class: normalizeClass([
|
|
_ctx.nsSelect.e("wrapper"),
|
|
_ctx.nsSelect.is("focused", _ctx.isFocused),
|
|
_ctx.nsSelect.is("hovering", _ctx.states.inputHovering),
|
|
_ctx.nsSelect.is("filterable", _ctx.filterable),
|
|
_ctx.nsSelect.is("disabled", _ctx.selectDisabled)
|
|
]),
|
|
onClick: withModifiers(_ctx.toggleMenu, ["prevent"])
|
|
}, [
|
|
_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
ref: "prefixRef",
|
|
class: normalizeClass(_ctx.nsSelect.e("prefix"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "prefix")
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", {
|
|
ref: "selectionRef",
|
|
class: normalizeClass([
|
|
_ctx.nsSelect.e("selection"),
|
|
_ctx.nsSelect.is("near", _ctx.multiple && !_ctx.$slots.prefix && !!_ctx.states.selected.length)
|
|
])
|
|
}, [
|
|
_ctx.multiple ? renderSlot(_ctx.$slots, "tag", { key: 0 }, () => [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.showTagList, (item) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
key: _ctx.getValueKey(item),
|
|
class: normalizeClass(_ctx.nsSelect.e("selected-item"))
|
|
}, [
|
|
createVNode(_component_el_tag, {
|
|
closable: !_ctx.selectDisabled && !item.isDisabled,
|
|
size: _ctx.collapseTagSize,
|
|
type: _ctx.tagType,
|
|
effect: _ctx.tagEffect,
|
|
"disable-transitions": "",
|
|
style: normalizeStyle(_ctx.tagStyle),
|
|
onClose: ($event) => _ctx.deleteTag($event, item)
|
|
}, {
|
|
default: withCtx(() => [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(_ctx.nsSelect.e("tags-text"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "label", {
|
|
label: item.currentLabel,
|
|
value: item.value
|
|
}, () => [
|
|
createTextVNode(toDisplayString(item.currentLabel), 1)
|
|
])
|
|
], 2)
|
|
]),
|
|
_: 2
|
|
}, 1032, ["closable", "size", "type", "effect", "style", "onClose"])
|
|
], 2);
|
|
}), 128)),
|
|
_ctx.collapseTags && _ctx.states.selected.length > _ctx.maxCollapseTags ? (openBlock(), createBlock(_component_el_tooltip, {
|
|
key: 0,
|
|
ref: "tagTooltipRef",
|
|
disabled: _ctx.dropdownMenuVisible || !_ctx.collapseTagsTooltip,
|
|
"fallback-placements": ["bottom", "top", "right", "left"],
|
|
effect: _ctx.effect,
|
|
placement: "bottom",
|
|
teleported: _ctx.teleported
|
|
}, {
|
|
default: withCtx(() => [
|
|
createElementVNode("div", {
|
|
ref: "collapseItemRef",
|
|
class: normalizeClass(_ctx.nsSelect.e("selected-item"))
|
|
}, [
|
|
createVNode(_component_el_tag, {
|
|
closable: false,
|
|
size: _ctx.collapseTagSize,
|
|
type: _ctx.tagType,
|
|
effect: _ctx.tagEffect,
|
|
"disable-transitions": "",
|
|
style: normalizeStyle(_ctx.collapseTagStyle)
|
|
}, {
|
|
default: withCtx(() => [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(_ctx.nsSelect.e("tags-text"))
|
|
}, " + " + toDisplayString(_ctx.states.selected.length - _ctx.maxCollapseTags), 3)
|
|
]),
|
|
_: 1
|
|
}, 8, ["size", "type", "effect", "style"])
|
|
], 2)
|
|
]),
|
|
content: withCtx(() => [
|
|
createElementVNode("div", {
|
|
ref: "tagMenuRef",
|
|
class: normalizeClass(_ctx.nsSelect.e("selection"))
|
|
}, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.collapseTagList, (item) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
key: _ctx.getValueKey(item),
|
|
class: normalizeClass(_ctx.nsSelect.e("selected-item"))
|
|
}, [
|
|
createVNode(_component_el_tag, {
|
|
class: "in-tooltip",
|
|
closable: !_ctx.selectDisabled && !item.isDisabled,
|
|
size: _ctx.collapseTagSize,
|
|
type: _ctx.tagType,
|
|
effect: _ctx.tagEffect,
|
|
"disable-transitions": "",
|
|
onClose: ($event) => _ctx.deleteTag($event, item)
|
|
}, {
|
|
default: withCtx(() => [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(_ctx.nsSelect.e("tags-text"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "label", {
|
|
label: item.currentLabel,
|
|
value: item.value
|
|
}, () => [
|
|
createTextVNode(toDisplayString(item.currentLabel), 1)
|
|
])
|
|
], 2)
|
|
]),
|
|
_: 2
|
|
}, 1032, ["closable", "size", "type", "effect", "onClose"])
|
|
], 2);
|
|
}), 128))
|
|
], 2)
|
|
]),
|
|
_: 3
|
|
}, 8, ["disabled", "effect", "teleported"])) : createCommentVNode("v-if", true)
|
|
]) : createCommentVNode("v-if", true),
|
|
!_ctx.selectDisabled ? (openBlock(), createElementBlock("div", {
|
|
key: 1,
|
|
class: normalizeClass([
|
|
_ctx.nsSelect.e("selected-item"),
|
|
_ctx.nsSelect.e("input-wrapper"),
|
|
_ctx.nsSelect.is("hidden", !_ctx.filterable)
|
|
])
|
|
}, [
|
|
withDirectives(createElementVNode("input", {
|
|
id: _ctx.inputId,
|
|
ref: "inputRef",
|
|
"onUpdate:modelValue": ($event) => _ctx.states.inputValue = $event,
|
|
type: "text",
|
|
name: _ctx.name,
|
|
class: normalizeClass([_ctx.nsSelect.e("input"), _ctx.nsSelect.is(_ctx.selectSize)]),
|
|
disabled: _ctx.selectDisabled,
|
|
autocomplete: _ctx.autocomplete,
|
|
style: normalizeStyle(_ctx.inputStyle),
|
|
role: "combobox",
|
|
readonly: !_ctx.filterable,
|
|
spellcheck: "false",
|
|
"aria-activedescendant": ((_a = _ctx.hoverOption) == null ? void 0 : _a.id) || "",
|
|
"aria-controls": _ctx.contentId,
|
|
"aria-expanded": _ctx.dropdownMenuVisible,
|
|
"aria-label": _ctx.ariaLabel,
|
|
"aria-autocomplete": "none",
|
|
"aria-haspopup": "listbox",
|
|
onKeydown: [
|
|
withKeys(withModifiers(($event) => _ctx.navigateOptions("next"), ["stop", "prevent"]), ["down"]),
|
|
withKeys(withModifiers(($event) => _ctx.navigateOptions("prev"), ["stop", "prevent"]), ["up"]),
|
|
withKeys(withModifiers(_ctx.handleEsc, ["stop", "prevent"]), ["esc"]),
|
|
withKeys(withModifiers(_ctx.selectOption, ["stop", "prevent"]), ["enter"]),
|
|
withKeys(withModifiers(_ctx.deletePrevTag, ["stop"]), ["delete"])
|
|
],
|
|
onCompositionstart: _ctx.handleCompositionStart,
|
|
onCompositionupdate: _ctx.handleCompositionUpdate,
|
|
onCompositionend: _ctx.handleCompositionEnd,
|
|
onInput: _ctx.onInput,
|
|
onClick: withModifiers(_ctx.toggleMenu, ["stop"])
|
|
}, null, 46, ["id", "onUpdate:modelValue", "name", "disabled", "autocomplete", "readonly", "aria-activedescendant", "aria-controls", "aria-expanded", "aria-label", "onKeydown", "onCompositionstart", "onCompositionupdate", "onCompositionend", "onInput", "onClick"]), [
|
|
[vModelText, _ctx.states.inputValue]
|
|
]),
|
|
_ctx.filterable ? (openBlock(), createElementBlock("span", {
|
|
key: 0,
|
|
ref: "calculatorRef",
|
|
"aria-hidden": "true",
|
|
class: normalizeClass(_ctx.nsSelect.e("input-calculator")),
|
|
textContent: toDisplayString(_ctx.states.inputValue)
|
|
}, null, 10, ["textContent"])) : createCommentVNode("v-if", true)
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
_ctx.shouldShowPlaceholder ? (openBlock(), createElementBlock("div", {
|
|
key: 2,
|
|
class: normalizeClass([
|
|
_ctx.nsSelect.e("selected-item"),
|
|
_ctx.nsSelect.e("placeholder"),
|
|
_ctx.nsSelect.is("transparent", !_ctx.hasModelValue || _ctx.expanded && !_ctx.states.inputValue)
|
|
])
|
|
}, [
|
|
_ctx.hasModelValue ? renderSlot(_ctx.$slots, "label", {
|
|
key: 0,
|
|
label: _ctx.currentPlaceholder,
|
|
value: _ctx.modelValue
|
|
}, () => [
|
|
createElementVNode("span", null, toDisplayString(_ctx.currentPlaceholder), 1)
|
|
]) : (openBlock(), createElementBlock("span", { key: 1 }, toDisplayString(_ctx.currentPlaceholder), 1))
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
], 2),
|
|
createElementVNode("div", {
|
|
ref: "suffixRef",
|
|
class: normalizeClass(_ctx.nsSelect.e("suffix"))
|
|
}, [
|
|
_ctx.iconComponent && !_ctx.showClose ? (openBlock(), createBlock(_component_el_icon, {
|
|
key: 0,
|
|
class: normalizeClass([_ctx.nsSelect.e("caret"), _ctx.nsSelect.e("icon"), _ctx.iconReverse])
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.iconComponent)))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : createCommentVNode("v-if", true),
|
|
_ctx.showClose && _ctx.clearIcon ? (openBlock(), createBlock(_component_el_icon, {
|
|
key: 1,
|
|
class: normalizeClass([
|
|
_ctx.nsSelect.e("caret"),
|
|
_ctx.nsSelect.e("icon"),
|
|
_ctx.nsSelect.e("clear")
|
|
]),
|
|
onClick: _ctx.handleClearClick
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.clearIcon)))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class", "onClick"])) : createCommentVNode("v-if", true),
|
|
_ctx.validateState && _ctx.validateIcon ? (openBlock(), createBlock(_component_el_icon, {
|
|
key: 2,
|
|
class: normalizeClass([_ctx.nsInput.e("icon"), _ctx.nsInput.e("validateIcon")])
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.validateIcon)))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : createCommentVNode("v-if", true)
|
|
], 2)
|
|
], 10, ["onClick"])
|
|
];
|
|
}),
|
|
content: withCtx(() => [
|
|
createVNode(_component_el_select_menu, { ref: "menuRef" }, {
|
|
default: withCtx(() => [
|
|
_ctx.$slots.header ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(_ctx.nsSelect.be("dropdown", "header")),
|
|
onClick: withModifiers(() => {
|
|
}, ["stop"])
|
|
}, [
|
|
renderSlot(_ctx.$slots, "header")
|
|
], 10, ["onClick"])) : createCommentVNode("v-if", true),
|
|
withDirectives(createVNode(_component_el_scrollbar, {
|
|
id: _ctx.contentId,
|
|
ref: "scrollbarRef",
|
|
tag: "ul",
|
|
"wrap-class": _ctx.nsSelect.be("dropdown", "wrap"),
|
|
"view-class": _ctx.nsSelect.be("dropdown", "list"),
|
|
class: normalizeClass([_ctx.nsSelect.is("empty", _ctx.filteredOptionsCount === 0)]),
|
|
role: "listbox",
|
|
"aria-label": _ctx.ariaLabel,
|
|
"aria-orientation": "vertical"
|
|
}, {
|
|
default: withCtx(() => [
|
|
_ctx.showNewOption ? (openBlock(), createBlock(_component_el_option, {
|
|
key: 0,
|
|
value: _ctx.states.inputValue,
|
|
created: true
|
|
}, null, 8, ["value"])) : createCommentVNode("v-if", true),
|
|
createVNode(_component_el_options, null, {
|
|
default: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "default")
|
|
]),
|
|
_: 3
|
|
})
|
|
]),
|
|
_: 3
|
|
}, 8, ["id", "wrap-class", "view-class", "class", "aria-label"]), [
|
|
[vShow, _ctx.states.options.size > 0 && !_ctx.loading]
|
|
]),
|
|
_ctx.$slots.loading && _ctx.loading ? (openBlock(), createElementBlock("div", {
|
|
key: 1,
|
|
class: normalizeClass(_ctx.nsSelect.be("dropdown", "loading"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "loading")
|
|
], 2)) : _ctx.loading || _ctx.filteredOptionsCount === 0 ? (openBlock(), createElementBlock("div", {
|
|
key: 2,
|
|
class: normalizeClass(_ctx.nsSelect.be("dropdown", "empty"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "empty", {}, () => [
|
|
createElementVNode("span", null, toDisplayString(_ctx.emptyText), 1)
|
|
])
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
_ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
|
|
key: 3,
|
|
class: normalizeClass(_ctx.nsSelect.be("dropdown", "footer")),
|
|
onClick: withModifiers(() => {
|
|
}, ["stop"])
|
|
}, [
|
|
renderSlot(_ctx.$slots, "footer")
|
|
], 10, ["onClick"])) : createCommentVNode("v-if", true)
|
|
]),
|
|
_: 3
|
|
}, 512)
|
|
]),
|
|
_: 3
|
|
}, 8, ["visible", "placement", "teleported", "popper-class", "popper-options", "fallback-placements", "effect", "transition", "persistent", "append-to", "onBeforeShow", "onHide"])
|
|
], 16, ["onMouseleave"])), [
|
|
[_directive_click_outside, _ctx.handleClickOutside, _ctx.popperRef]
|
|
]);
|
|
}
|
|
var Select$1 = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["render", _sfc_render$9], ["__file", "select.vue"]]);
|
|
|
|
const _sfc_main$X = defineComponent({
|
|
name: "ElOptionGroup",
|
|
componentName: "ElOptionGroup",
|
|
props: {
|
|
label: String,
|
|
disabled: Boolean
|
|
},
|
|
setup(props) {
|
|
const ns = useNamespace("select");
|
|
const groupRef = ref(null);
|
|
const instance = getCurrentInstance();
|
|
const children = ref([]);
|
|
provide(selectGroupKey, reactive({
|
|
...toRefs(props)
|
|
}));
|
|
const visible = computed(() => children.value.some((option) => option.visible === true));
|
|
const isOption = (node) => {
|
|
var _a, _b;
|
|
return ((_a = node.type) == null ? void 0 : _a.name) === "ElOption" && !!((_b = node.component) == null ? void 0 : _b.proxy);
|
|
};
|
|
const flattedChildren = (node) => {
|
|
const Nodes = castArray$1(node);
|
|
const children2 = [];
|
|
Nodes.forEach((child) => {
|
|
var _a, _b;
|
|
if (isOption(child)) {
|
|
children2.push(child.component.proxy);
|
|
} else if ((_a = child.children) == null ? void 0 : _a.length) {
|
|
children2.push(...flattedChildren(child.children));
|
|
} else if ((_b = child.component) == null ? void 0 : _b.subTree) {
|
|
children2.push(...flattedChildren(child.component.subTree));
|
|
}
|
|
});
|
|
return children2;
|
|
};
|
|
const updateChildren = () => {
|
|
children.value = flattedChildren(instance.subTree);
|
|
};
|
|
onMounted(() => {
|
|
updateChildren();
|
|
});
|
|
useMutationObserver(groupRef, updateChildren, {
|
|
attributes: true,
|
|
subtree: true,
|
|
childList: true
|
|
});
|
|
return {
|
|
groupRef,
|
|
visible,
|
|
ns
|
|
};
|
|
}
|
|
});
|
|
function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
|
|
return withDirectives((openBlock(), createElementBlock("ul", {
|
|
ref: "groupRef",
|
|
class: normalizeClass(_ctx.ns.be("group", "wrap"))
|
|
}, [
|
|
createElementVNode("li", {
|
|
class: normalizeClass(_ctx.ns.be("group", "title"))
|
|
}, toDisplayString(_ctx.label), 3),
|
|
createElementVNode("li", null, [
|
|
createElementVNode("ul", {
|
|
class: normalizeClass(_ctx.ns.b("group"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 2)
|
|
])
|
|
], 2)), [
|
|
[vShow, _ctx.visible]
|
|
]);
|
|
}
|
|
var OptionGroup = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["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 = () => 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,
|
|
teleported: Boolean,
|
|
size: {
|
|
type: String,
|
|
values: componentSizes
|
|
},
|
|
appendSizeTo: String
|
|
});
|
|
|
|
const __default__$M = defineComponent({
|
|
name: "ElPaginationSizes"
|
|
});
|
|
const _sfc_main$W = /* @__PURE__ */ defineComponent({
|
|
...__default__$M,
|
|
props: paginationSizesProps,
|
|
emits: ["page-size-change"],
|
|
setup(__props, { emit }) {
|
|
const props = __props;
|
|
const { t } = useLocale();
|
|
const ns = useNamespace("pagination");
|
|
const pagination = usePagination();
|
|
const innerPageSize = ref(props.pageSize);
|
|
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);
|
|
}
|
|
});
|
|
watch(() => props.pageSize, (newVal) => {
|
|
innerPageSize.value = newVal;
|
|
});
|
|
const innerPageSizes = 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 openBlock(), createElementBlock("span", {
|
|
class: normalizeClass(unref(ns).e("sizes"))
|
|
}, [
|
|
createVNode(unref(ElSelect), {
|
|
"model-value": innerPageSize.value,
|
|
disabled: _ctx.disabled,
|
|
"popper-class": _ctx.popperClass,
|
|
size: _ctx.size,
|
|
teleported: _ctx.teleported,
|
|
"validate-event": false,
|
|
"append-to": _ctx.appendSizeTo,
|
|
onChange: handleChange
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(innerPageSizes), (item) => {
|
|
return openBlock(), createBlock(unref(ElOption), {
|
|
key: item,
|
|
value: item,
|
|
label: item + unref(t)("el.pagination.pagesize")
|
|
}, null, 8, ["value", "label"]);
|
|
}), 128))
|
|
]),
|
|
_: 1
|
|
}, 8, ["model-value", "disabled", "popper-class", "size", "teleported", "append-to"])
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var Sizes = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["__file", "sizes.vue"]]);
|
|
|
|
const paginationJumperProps = buildProps({
|
|
size: {
|
|
type: String,
|
|
values: componentSizes
|
|
}
|
|
});
|
|
|
|
const __default__$L = defineComponent({
|
|
name: "ElPaginationJumper"
|
|
});
|
|
const _sfc_main$V = /* @__PURE__ */ defineComponent({
|
|
...__default__$L,
|
|
props: paginationJumperProps,
|
|
setup(__props) {
|
|
const { t } = useLocale();
|
|
const ns = useNamespace("pagination");
|
|
const { pageCount, disabled, currentPage, changeEvent } = usePagination();
|
|
const userInput = ref();
|
|
const innerValue = computed(() => {
|
|
var _a;
|
|
return (_a = userInput.value) != null ? _a : currentPage == null ? void 0 : currentPage.value;
|
|
});
|
|
function handleInput(val) {
|
|
userInput.value = val ? +val : "";
|
|
}
|
|
function handleChange(val) {
|
|
val = Math.trunc(+val);
|
|
changeEvent == null ? void 0 : changeEvent(val);
|
|
userInput.value = void 0;
|
|
}
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("span", {
|
|
class: normalizeClass(unref(ns).e("jump")),
|
|
disabled: unref(disabled)
|
|
}, [
|
|
createElementVNode("span", {
|
|
class: normalizeClass([unref(ns).e("goto")])
|
|
}, toDisplayString(unref(t)("el.pagination.goto")), 3),
|
|
createVNode(unref(ElInput), {
|
|
size: _ctx.size,
|
|
class: normalizeClass([unref(ns).e("editor"), unref(ns).is("in-pagination")]),
|
|
min: 1,
|
|
max: unref(pageCount),
|
|
disabled: unref(disabled),
|
|
"model-value": unref(innerValue),
|
|
"validate-event": false,
|
|
"aria-label": unref(t)("el.pagination.page"),
|
|
type: "number",
|
|
"onUpdate:modelValue": handleInput,
|
|
onChange: handleChange
|
|
}, null, 8, ["size", "class", "max", "disabled", "model-value", "aria-label"]),
|
|
createElementVNode("span", {
|
|
class: normalizeClass([unref(ns).e("classifier")])
|
|
}, toDisplayString(unref(t)("el.pagination.pageClassifier")), 3)
|
|
], 10, ["disabled"]);
|
|
};
|
|
}
|
|
});
|
|
var Jumper = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["__file", "jumper.vue"]]);
|
|
|
|
const paginationTotalProps = buildProps({
|
|
total: {
|
|
type: Number,
|
|
default: 1e3
|
|
}
|
|
});
|
|
|
|
const __default__$K = defineComponent({
|
|
name: "ElPaginationTotal"
|
|
});
|
|
const _sfc_main$U = /* @__PURE__ */ defineComponent({
|
|
...__default__$K,
|
|
props: paginationTotalProps,
|
|
setup(__props) {
|
|
const { t } = useLocale();
|
|
const ns = useNamespace("pagination");
|
|
const { disabled } = usePagination();
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("span", {
|
|
class: normalizeClass(unref(ns).e("total")),
|
|
disabled: unref(disabled)
|
|
}, toDisplayString(unref(t)("el.pagination.total", {
|
|
total: _ctx.total
|
|
})), 11, ["disabled"]);
|
|
};
|
|
}
|
|
});
|
|
var Total = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__file", "total.vue"]]);
|
|
|
|
const paginationPagerProps = buildProps({
|
|
currentPage: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
pageCount: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
pagerCount: {
|
|
type: Number,
|
|
default: 7
|
|
},
|
|
disabled: Boolean
|
|
});
|
|
|
|
const __default__$J = defineComponent({
|
|
name: "ElPaginationPager"
|
|
});
|
|
const _sfc_main$T = /* @__PURE__ */ defineComponent({
|
|
...__default__$J,
|
|
props: paginationPagerProps,
|
|
emits: ["change"],
|
|
setup(__props, { emit }) {
|
|
const props = __props;
|
|
const nsPager = useNamespace("pager");
|
|
const nsIcon = useNamespace("icon");
|
|
const { t } = useLocale();
|
|
const showPrevMore = ref(false);
|
|
const showNextMore = ref(false);
|
|
const quickPrevHover = ref(false);
|
|
const quickNextHover = ref(false);
|
|
const quickPrevFocus = ref(false);
|
|
const quickNextFocus = ref(false);
|
|
const pagers = 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 prevMoreKls = computed(() => [
|
|
"more",
|
|
"btn-quickprev",
|
|
nsIcon.b(),
|
|
nsPager.is("disabled", props.disabled)
|
|
]);
|
|
const nextMoreKls = computed(() => [
|
|
"more",
|
|
"btn-quicknext",
|
|
nsIcon.b(),
|
|
nsPager.is("disabled", props.disabled)
|
|
]);
|
|
const tabindex = computed(() => props.disabled ? -1 : 0);
|
|
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 openBlock(), createElementBlock("ul", {
|
|
class: normalizeClass(unref(nsPager).b()),
|
|
onClick: onPagerClick,
|
|
onKeyup: withKeys(onEnter, ["enter"])
|
|
}, [
|
|
_ctx.pageCount > 0 ? (openBlock(), createElementBlock("li", {
|
|
key: 0,
|
|
class: normalizeClass([[
|
|
unref(nsPager).is("active", _ctx.currentPage === 1),
|
|
unref(nsPager).is("disabled", _ctx.disabled)
|
|
], "number"]),
|
|
"aria-current": _ctx.currentPage === 1,
|
|
"aria-label": unref(t)("el.pagination.currentPage", { pager: 1 }),
|
|
tabindex: unref(tabindex)
|
|
}, " 1 ", 10, ["aria-current", "aria-label", "tabindex"])) : createCommentVNode("v-if", true),
|
|
showPrevMore.value ? (openBlock(), createElementBlock("li", {
|
|
key: 1,
|
|
class: normalizeClass(unref(prevMoreKls)),
|
|
tabindex: unref(tabindex),
|
|
"aria-label": unref(t)("el.pagination.prevPages", { pager: _ctx.pagerCount - 2 }),
|
|
onMouseenter: ($event) => onMouseEnter(true),
|
|
onMouseleave: ($event) => quickPrevHover.value = false,
|
|
onFocus: ($event) => onFocus(true),
|
|
onBlur: ($event) => quickPrevFocus.value = false
|
|
}, [
|
|
(quickPrevHover.value || quickPrevFocus.value) && !_ctx.disabled ? (openBlock(), createBlock(unref(d_arrow_left_default), { key: 0 })) : (openBlock(), createBlock(unref(more_filled_default), { key: 1 }))
|
|
], 42, ["tabindex", "aria-label", "onMouseenter", "onMouseleave", "onFocus", "onBlur"])) : createCommentVNode("v-if", true),
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(pagers), (pager) => {
|
|
return openBlock(), createElementBlock("li", {
|
|
key: pager,
|
|
class: normalizeClass([[
|
|
unref(nsPager).is("active", _ctx.currentPage === pager),
|
|
unref(nsPager).is("disabled", _ctx.disabled)
|
|
], "number"]),
|
|
"aria-current": _ctx.currentPage === pager,
|
|
"aria-label": unref(t)("el.pagination.currentPage", { pager }),
|
|
tabindex: unref(tabindex)
|
|
}, toDisplayString(pager), 11, ["aria-current", "aria-label", "tabindex"]);
|
|
}), 128)),
|
|
showNextMore.value ? (openBlock(), createElementBlock("li", {
|
|
key: 2,
|
|
class: normalizeClass(unref(nextMoreKls)),
|
|
tabindex: unref(tabindex),
|
|
"aria-label": unref(t)("el.pagination.nextPages", { pager: _ctx.pagerCount - 2 }),
|
|
onMouseenter: ($event) => onMouseEnter(),
|
|
onMouseleave: ($event) => quickNextHover.value = false,
|
|
onFocus: ($event) => onFocus(),
|
|
onBlur: ($event) => quickNextFocus.value = false
|
|
}, [
|
|
(quickNextHover.value || quickNextFocus.value) && !_ctx.disabled ? (openBlock(), createBlock(unref(d_arrow_right_default), { key: 0 })) : (openBlock(), createBlock(unref(more_filled_default), { key: 1 }))
|
|
], 42, ["tabindex", "aria-label", "onMouseenter", "onMouseleave", "onFocus", "onBlur"])) : createCommentVNode("v-if", true),
|
|
_ctx.pageCount > 1 ? (openBlock(), createElementBlock("li", {
|
|
key: 3,
|
|
class: normalizeClass([[
|
|
unref(nsPager).is("active", _ctx.currentPage === _ctx.pageCount),
|
|
unref(nsPager).is("disabled", _ctx.disabled)
|
|
], "number"]),
|
|
"aria-current": _ctx.currentPage === _ctx.pageCount,
|
|
"aria-label": unref(t)("el.pagination.currentPage", { pager: _ctx.pageCount }),
|
|
tabindex: unref(tabindex)
|
|
}, toDisplayString(_ctx.pageCount), 11, ["aria-current", "aria-label", "tabindex"])) : createCommentVNode("v-if", true)
|
|
], 42, ["onKeyup"]);
|
|
};
|
|
}
|
|
});
|
|
var Pager = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__file", "pager.vue"]]);
|
|
|
|
const isAbsent = (v) => typeof v !== "number";
|
|
const paginationProps = buildProps({
|
|
pageSize: Number,
|
|
defaultPageSize: Number,
|
|
total: Number,
|
|
pageCount: Number,
|
|
pagerCount: {
|
|
type: Number,
|
|
validator: (value) => {
|
|
return isNumber(value) && Math.trunc(value) === value && value > 4 && value < 22 && value % 2 === 1;
|
|
},
|
|
default: 7
|
|
},
|
|
currentPage: Number,
|
|
defaultCurrentPage: Number,
|
|
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
|
|
},
|
|
teleported: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
small: Boolean,
|
|
size: useSizeProp,
|
|
background: Boolean,
|
|
disabled: Boolean,
|
|
hideOnSinglePage: Boolean,
|
|
appendSizeTo: String
|
|
});
|
|
const paginationEmits = {
|
|
"update:current-page": (val) => isNumber(val),
|
|
"update:page-size": (val) => isNumber(val),
|
|
"size-change": (val) => isNumber(val),
|
|
change: (currentPage, pageSize) => isNumber(currentPage) && isNumber(pageSize),
|
|
"current-change": (val) => isNumber(val),
|
|
"prev-click": (val) => isNumber(val),
|
|
"next-click": (val) => isNumber(val)
|
|
};
|
|
const componentName = "ElPagination";
|
|
var Pagination = defineComponent({
|
|
name: componentName,
|
|
props: paginationProps,
|
|
emits: paginationEmits,
|
|
setup(props, { emit, slots }) {
|
|
const { t } = useLocale();
|
|
const ns = useNamespace("pagination");
|
|
const vnodeProps = getCurrentInstance().vnode.props || {};
|
|
const _globalSize = useGlobalSize();
|
|
const _size = computed(() => {
|
|
var _a;
|
|
return props.small ? "small" : (_a = props.size) != null ? _a : _globalSize.value;
|
|
});
|
|
useDeprecated({
|
|
from: "small",
|
|
replacement: "size",
|
|
version: "3.0.0",
|
|
scope: "el-pagination",
|
|
ref: "https://element-plus.org/zh-CN/component/pagination.html"
|
|
}, computed(() => !!props.small));
|
|
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 = 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 = ref(isAbsent(props.defaultPageSize) ? 10 : props.defaultPageSize);
|
|
const innerCurrentPage = ref(isAbsent(props.defaultCurrentPage) ? 1 : props.defaultCurrentPage);
|
|
const pageSizeBridge = 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 = 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 = 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);
|
|
}
|
|
}
|
|
});
|
|
watch(pageCountBridge, (val) => {
|
|
if (currentPageBridge.value > val)
|
|
currentPageBridge.value = val;
|
|
});
|
|
watch([currentPageBridge, pageSizeBridge], (value) => {
|
|
emit("change", ...value);
|
|
}, { flush: "post" });
|
|
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(" ");
|
|
}
|
|
}
|
|
provide(elPaginationKey, {
|
|
pageCount: pageCountBridge,
|
|
disabled: 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 = h$1("div", { class: ns.e("rightwrapper") }, rightWrapperChildren);
|
|
const TEMPLATE_MAP = {
|
|
prev: h$1(Prev, {
|
|
disabled: props.disabled,
|
|
currentPage: currentPageBridge.value,
|
|
prevText: props.prevText,
|
|
prevIcon: props.prevIcon,
|
|
onClick: prev
|
|
}),
|
|
jumper: h$1(Jumper, {
|
|
size: _size.value
|
|
}),
|
|
pager: h$1(Pager, {
|
|
currentPage: currentPageBridge.value,
|
|
pageCount: pageCountBridge.value,
|
|
pagerCount: props.pagerCount,
|
|
onChange: handleCurrentChange,
|
|
disabled: props.disabled
|
|
}),
|
|
next: h$1(Next, {
|
|
disabled: props.disabled,
|
|
currentPage: currentPageBridge.value,
|
|
pageCount: pageCountBridge.value,
|
|
nextText: props.nextText,
|
|
nextIcon: props.nextIcon,
|
|
onClick: next
|
|
}),
|
|
sizes: h$1(Sizes, {
|
|
pageSize: pageSizeBridge.value,
|
|
pageSizes: props.pageSizes,
|
|
popperClass: props.popperClass,
|
|
disabled: props.disabled,
|
|
teleported: props.teleported,
|
|
size: _size.value,
|
|
appendSizeTo: props.appendSizeTo
|
|
}),
|
|
slot: (_b = (_a = slots == null ? void 0 : slots.default) == null ? void 0 : _a.call(slots)) != null ? _b : null,
|
|
total: h$1(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 h$1("div", {
|
|
class: [
|
|
ns.b(),
|
|
ns.is("background", props.background),
|
|
ns.m(_size.value)
|
|
]
|
|
}, 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
|
|
},
|
|
teleported: useTooltipContentProps.teleported,
|
|
persistent: useTooltipContentProps.persistent,
|
|
width: {
|
|
type: [String, Number],
|
|
default: 150
|
|
}
|
|
});
|
|
const popconfirmEmits = {
|
|
confirm: (e) => e instanceof MouseEvent,
|
|
cancel: (e) => e instanceof MouseEvent
|
|
};
|
|
|
|
const __default__$I = defineComponent({
|
|
name: "ElPopconfirm"
|
|
});
|
|
const _sfc_main$S = /* @__PURE__ */ defineComponent({
|
|
...__default__$I,
|
|
props: popconfirmProps,
|
|
emits: popconfirmEmits,
|
|
setup(__props, { emit }) {
|
|
const props = __props;
|
|
const { t } = useLocale();
|
|
const ns = useNamespace("popconfirm");
|
|
const tooltipRef = ref();
|
|
const hidePopper = () => {
|
|
var _a, _b;
|
|
(_b = (_a = tooltipRef.value) == null ? void 0 : _a.onClose) == null ? void 0 : _b.call(_a);
|
|
};
|
|
const style = computed(() => {
|
|
return {
|
|
width: addUnit(props.width)
|
|
};
|
|
});
|
|
const confirm = (e) => {
|
|
emit("confirm", e);
|
|
hidePopper();
|
|
};
|
|
const cancel = (e) => {
|
|
emit("cancel", e);
|
|
hidePopper();
|
|
};
|
|
const finalConfirmButtonText = computed(() => props.confirmButtonText || t("el.popconfirm.confirmButtonText"));
|
|
const finalCancelButtonText = computed(() => props.cancelButtonText || t("el.popconfirm.cancelButtonText"));
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createBlock(unref(ElTooltip), mergeProps({
|
|
ref_key: "tooltipRef",
|
|
ref: tooltipRef,
|
|
trigger: "click",
|
|
effect: "light"
|
|
}, _ctx.$attrs, {
|
|
"popper-class": `${unref(ns).namespace.value}-popover`,
|
|
"popper-style": unref(style),
|
|
teleported: _ctx.teleported,
|
|
"fallback-placements": ["bottom", "top", "right", "left"],
|
|
"hide-after": _ctx.hideAfter,
|
|
persistent: _ctx.persistent
|
|
}), {
|
|
content: withCtx(() => [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).b())
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("main"))
|
|
}, [
|
|
!_ctx.hideIcon && _ctx.icon ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).e("icon")),
|
|
style: normalizeStyle({ color: _ctx.iconColor })
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.icon)))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class", "style"])) : createCommentVNode("v-if", true),
|
|
createTextVNode(" " + toDisplayString(_ctx.title), 1)
|
|
], 2),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("action"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "actions", {
|
|
confirm,
|
|
cancel
|
|
}, () => [
|
|
createVNode(unref(ElButton), {
|
|
size: "small",
|
|
type: _ctx.cancelButtonType === "text" ? "" : _ctx.cancelButtonType,
|
|
text: _ctx.cancelButtonType === "text",
|
|
onClick: cancel
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(finalCancelButtonText)), 1)
|
|
]),
|
|
_: 1
|
|
}, 8, ["type", "text"]),
|
|
createVNode(unref(ElButton), {
|
|
size: "small",
|
|
type: _ctx.confirmButtonType === "text" ? "" : _ctx.confirmButtonType,
|
|
text: _ctx.confirmButtonType === "text",
|
|
onClick: confirm
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(finalConfirmButtonText)), 1)
|
|
]),
|
|
_: 1
|
|
}, 8, ["type", "text"])
|
|
])
|
|
], 2)
|
|
], 2)
|
|
]),
|
|
default: withCtx(() => [
|
|
_ctx.$slots.reference ? renderSlot(_ctx.$slots, "reference", { key: 0 }) : createCommentVNode("v-if", true)
|
|
]),
|
|
_: 3
|
|
}, 16, ["popper-class", "popper-style", "teleported", "hide-after", "persistent"]);
|
|
};
|
|
}
|
|
});
|
|
var Popconfirm = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__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__$H = defineComponent({
|
|
name: "ElPopover"
|
|
});
|
|
const _sfc_main$R = /* @__PURE__ */ defineComponent({
|
|
...__default__$H,
|
|
props: popoverProps,
|
|
emits: popoverEmits,
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const onUpdateVisible = computed(() => {
|
|
return props[updateEventKeyRaw];
|
|
});
|
|
const ns = useNamespace("popover");
|
|
const tooltipRef = ref();
|
|
const popperRef = computed(() => {
|
|
var _a;
|
|
return (_a = unref(tooltipRef)) == null ? void 0 : _a.popperRef;
|
|
});
|
|
const style = computed(() => {
|
|
return [
|
|
{
|
|
width: addUnit(props.width)
|
|
},
|
|
props.popperStyle
|
|
];
|
|
});
|
|
const kls = computed(() => {
|
|
return [ns.b(), props.popperClass, { [ns.m("plain")]: !!props.content }];
|
|
});
|
|
const gpuAcceleration = 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 openBlock(), createBlock(unref(ElTooltip), 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": unref(kls),
|
|
"popper-style": unref(style),
|
|
teleported: _ctx.teleported,
|
|
persistent: _ctx.persistent,
|
|
"gpu-acceleration": unref(gpuAcceleration),
|
|
"onUpdate:visible": unref(onUpdateVisible),
|
|
onBeforeShow: beforeEnter,
|
|
onBeforeHide: beforeLeave,
|
|
onShow: afterEnter,
|
|
onHide: afterLeave
|
|
}), {
|
|
content: withCtx(() => [
|
|
_ctx.title ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).e("title")),
|
|
role: "title"
|
|
}, toDisplayString(_ctx.title), 3)) : createCommentVNode("v-if", true),
|
|
renderSlot(_ctx.$slots, "default", {}, () => [
|
|
createTextVNode(toDisplayString(_ctx.content), 1)
|
|
])
|
|
]),
|
|
default: withCtx(() => [
|
|
_ctx.$slots.reference ? renderSlot(_ctx.$slots, "reference", { key: 0 }) : 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$R, [["__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: Boolean,
|
|
duration: {
|
|
type: Number,
|
|
default: 3
|
|
},
|
|
strokeWidth: {
|
|
type: Number,
|
|
default: 6
|
|
},
|
|
strokeLinecap: {
|
|
type: definePropType(String),
|
|
default: "round"
|
|
},
|
|
textInside: Boolean,
|
|
width: {
|
|
type: Number,
|
|
default: 126
|
|
},
|
|
showText: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
color: {
|
|
type: definePropType([
|
|
String,
|
|
Array,
|
|
Function
|
|
]),
|
|
default: ""
|
|
},
|
|
striped: Boolean,
|
|
stripedFlow: Boolean,
|
|
format: {
|
|
type: definePropType(Function),
|
|
default: (percentage) => `${percentage}%`
|
|
}
|
|
});
|
|
|
|
const __default__$G = defineComponent({
|
|
name: "ElProgress"
|
|
});
|
|
const _sfc_main$Q = /* @__PURE__ */ defineComponent({
|
|
...__default__$G,
|
|
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 = computed(() => {
|
|
const barStyle2 = {
|
|
width: `${props.percentage}%`,
|
|
animationDuration: `${props.duration}s`
|
|
};
|
|
const color = getCurrentColor(props.percentage);
|
|
if (color.includes("gradient")) {
|
|
barStyle2.background = color;
|
|
} else {
|
|
barStyle2.backgroundColor = color;
|
|
}
|
|
return barStyle2;
|
|
});
|
|
const relativeStrokeWidth = computed(() => (props.strokeWidth / props.width * 100).toFixed(1));
|
|
const radius = computed(() => {
|
|
if (["circle", "dashboard"].includes(props.type)) {
|
|
return Number.parseInt(`${50 - Number.parseFloat(relativeStrokeWidth.value) / 2}`, 10);
|
|
}
|
|
return 0;
|
|
});
|
|
const trackPath = 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 = computed(() => 2 * Math.PI * radius.value);
|
|
const rate = computed(() => props.type === "dashboard" ? 0.75 : 1);
|
|
const strokeDashoffset = computed(() => {
|
|
const offset = -1 * perimeter.value * (1 - rate.value) / 2;
|
|
return `${offset}px`;
|
|
});
|
|
const trailPathStyle = computed(() => ({
|
|
strokeDasharray: `${perimeter.value * rate.value}px, ${perimeter.value}px`,
|
|
strokeDashoffset: strokeDashoffset.value
|
|
}));
|
|
const circlePathStyle = 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 = 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 = 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 = computed(() => {
|
|
return props.type === "line" ? 12 + props.strokeWidth * 0.4 : props.width * 0.111111 + 2;
|
|
});
|
|
const content = computed(() => props.format(props.percentage));
|
|
function getColors(color) {
|
|
const span = 100 / color.length;
|
|
const seriesColors = color.map((seriesColor, index) => {
|
|
if (isString$1(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$1(color)) {
|
|
return color(percentage);
|
|
} else if (isString$1(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 openBlock(), createElementBlock("div", {
|
|
class: normalizeClass([
|
|
unref(ns).b(),
|
|
unref(ns).m(_ctx.type),
|
|
unref(ns).is(_ctx.status),
|
|
{
|
|
[unref(ns).m("without-text")]: !_ctx.showText,
|
|
[unref(ns).m("text-inside")]: _ctx.textInside
|
|
}
|
|
]),
|
|
role: "progressbar",
|
|
"aria-valuenow": _ctx.percentage,
|
|
"aria-valuemin": "0",
|
|
"aria-valuemax": "100"
|
|
}, [
|
|
_ctx.type === "line" ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).b("bar"))
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).be("bar", "outer")),
|
|
style: normalizeStyle({ height: `${_ctx.strokeWidth}px` })
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass([
|
|
unref(ns).be("bar", "inner"),
|
|
{ [unref(ns).bem("bar", "inner", "indeterminate")]: _ctx.indeterminate },
|
|
{ [unref(ns).bem("bar", "inner", "striped")]: _ctx.striped },
|
|
{ [unref(ns).bem("bar", "inner", "striped-flow")]: _ctx.stripedFlow }
|
|
]),
|
|
style: normalizeStyle(unref(barStyle))
|
|
}, [
|
|
(_ctx.showText || _ctx.$slots.default) && _ctx.textInside ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).be("bar", "innerText"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default", { percentage: _ctx.percentage }, () => [
|
|
createElementVNode("span", null, toDisplayString(unref(content)), 1)
|
|
])
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
], 6)
|
|
], 6)
|
|
], 2)) : (openBlock(), createElementBlock("div", {
|
|
key: 1,
|
|
class: normalizeClass(unref(ns).b("circle")),
|
|
style: normalizeStyle({ height: `${_ctx.width}px`, width: `${_ctx.width}px` })
|
|
}, [
|
|
(openBlock(), createElementBlock("svg", { viewBox: "0 0 100 100" }, [
|
|
createElementVNode("path", {
|
|
class: normalizeClass(unref(ns).be("circle", "track")),
|
|
d: unref(trackPath),
|
|
stroke: `var(${unref(ns).cssVarName("fill-color-light")}, #e5e9f2)`,
|
|
"stroke-linecap": _ctx.strokeLinecap,
|
|
"stroke-width": unref(relativeStrokeWidth),
|
|
fill: "none",
|
|
style: normalizeStyle(unref(trailPathStyle))
|
|
}, null, 14, ["d", "stroke", "stroke-linecap", "stroke-width"]),
|
|
createElementVNode("path", {
|
|
class: normalizeClass(unref(ns).be("circle", "path")),
|
|
d: unref(trackPath),
|
|
stroke: unref(stroke),
|
|
fill: "none",
|
|
opacity: _ctx.percentage ? 1 : 0,
|
|
"stroke-linecap": _ctx.strokeLinecap,
|
|
"stroke-width": unref(relativeStrokeWidth),
|
|
style: normalizeStyle(unref(circlePathStyle))
|
|
}, null, 14, ["d", "stroke", "opacity", "stroke-linecap", "stroke-width"])
|
|
]))
|
|
], 6)),
|
|
(_ctx.showText || _ctx.$slots.default) && !_ctx.textInside ? (openBlock(), createElementBlock("div", {
|
|
key: 2,
|
|
class: normalizeClass(unref(ns).e("text")),
|
|
style: normalizeStyle({ fontSize: `${unref(progressTextSize)}px` })
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default", { percentage: _ctx.percentage }, () => [
|
|
!_ctx.status ? (openBlock(), createElementBlock("span", { key: 0 }, toDisplayString(unref(content)), 1)) : (openBlock(), createBlock(unref(ElIcon), { key: 1 }, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(unref(statusIcon))))
|
|
]),
|
|
_: 1
|
|
}))
|
|
])
|
|
], 6)) : createCommentVNode("v-if", true)
|
|
], 10, ["aria-valuenow"]);
|
|
};
|
|
}
|
|
});
|
|
var Progress = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__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: Boolean,
|
|
allowHalf: Boolean,
|
|
showText: Boolean,
|
|
showScore: Boolean,
|
|
textColor: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
texts: {
|
|
type: definePropType(Array),
|
|
default: () => mutable([
|
|
"Extremely bad",
|
|
"Disappointed",
|
|
"Fair",
|
|
"Satisfied",
|
|
"Surprise"
|
|
])
|
|
},
|
|
scoreTemplate: {
|
|
type: String,
|
|
default: "{value}"
|
|
},
|
|
size: useSizeProp,
|
|
clearable: Boolean,
|
|
...useAriaProps(["ariaLabel"])
|
|
});
|
|
const rateEmits = {
|
|
[CHANGE_EVENT]: (value) => isNumber(value),
|
|
[UPDATE_MODEL_EVENT]: (value) => isNumber(value)
|
|
};
|
|
|
|
const __default__$F = defineComponent({
|
|
name: "ElRate"
|
|
});
|
|
const _sfc_main$P = /* @__PURE__ */ defineComponent({
|
|
...__default__$F,
|
|
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 = inject(formContextKey, void 0);
|
|
const formItemContext = inject(formItemContextKey, void 0);
|
|
const rateSize = useFormSize();
|
|
const ns = useNamespace("rate");
|
|
const { inputId, isLabeledByFormItem } = useFormItemInputId(props, {
|
|
formItemContext
|
|
});
|
|
const currentValue = ref(props.modelValue);
|
|
const hoverIndex = ref(-1);
|
|
const pointerAtLeftHalf = ref(true);
|
|
const rateClasses = computed(() => [ns.b(), ns.m(rateSize.value)]);
|
|
const rateDisabled = computed(() => props.disabled || (formContext == null ? void 0 : formContext.disabled));
|
|
const rateStyles = computed(() => {
|
|
return ns.cssVarBlock({
|
|
"void-color": props.voidColor,
|
|
"disabled-void-color": props.disabledVoidColor,
|
|
"fill-color": activeColor.value
|
|
});
|
|
});
|
|
const text = 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 = computed(() => props.modelValue * 100 - Math.floor(props.modelValue) * 100);
|
|
const colorMap = computed(() => isArray$1(props.colors) ? {
|
|
[props.lowThreshold]: props.colors[0],
|
|
[props.highThreshold]: { value: props.colors[1], excluded: true },
|
|
[props.max]: props.colors[2]
|
|
} : props.colors);
|
|
const activeColor = computed(() => {
|
|
const color = getValueFromMap(currentValue.value, colorMap.value);
|
|
return isObject$1(color) ? "" : color;
|
|
});
|
|
const decimalStyle = computed(() => {
|
|
let width = "";
|
|
if (rateDisabled.value) {
|
|
width = `${valueDecimal.value}%`;
|
|
} else if (props.allowHalf) {
|
|
width = "50%";
|
|
}
|
|
return {
|
|
color: activeColor.value,
|
|
width
|
|
};
|
|
});
|
|
const componentMap = computed(() => {
|
|
let icons = isArray$1(props.icons) ? [...props.icons] : { ...props.icons };
|
|
icons = markRaw(icons);
|
|
return isArray$1(icons) ? {
|
|
[props.lowThreshold]: icons[0],
|
|
[props.highThreshold]: {
|
|
value: icons[1],
|
|
excluded: true
|
|
},
|
|
[props.max]: icons[2]
|
|
} : icons;
|
|
});
|
|
const decimalIconComponent = computed(() => getValueFromMap(props.modelValue, componentMap.value));
|
|
const voidComponent = computed(() => rateDisabled.value ? isString$1(props.disabledVoidIcon) ? props.disabledVoidIcon : markRaw(props.disabledVoidIcon) : isString$1(props.voidIcon) ? props.voidIcon : markRaw(props.voidIcon));
|
|
const activeComponent = 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 && event) {
|
|
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;
|
|
}
|
|
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 openBlock(), createElementBlock("div", {
|
|
id: unref(inputId),
|
|
class: normalizeClass([unref(rateClasses), unref(ns).is("disabled", unref(rateDisabled))]),
|
|
role: "slider",
|
|
"aria-label": !unref(isLabeledByFormItem) ? _ctx.ariaLabel || "rating" : void 0,
|
|
"aria-labelledby": unref(isLabeledByFormItem) ? (_a = unref(formItemContext)) == null ? void 0 : _a.labelId : void 0,
|
|
"aria-valuenow": currentValue.value,
|
|
"aria-valuetext": unref(text) || void 0,
|
|
"aria-valuemin": "0",
|
|
"aria-valuemax": _ctx.max,
|
|
tabindex: "0",
|
|
style: normalizeStyle(unref(rateStyles)),
|
|
onKeydown: handleKey
|
|
}, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.max, (item, key) => {
|
|
return openBlock(), createElementBlock("span", {
|
|
key,
|
|
class: normalizeClass(unref(ns).e("item")),
|
|
onMousemove: ($event) => setCurrentValue(item, $event),
|
|
onMouseleave: resetCurrentValue,
|
|
onClick: ($event) => selectValue(item)
|
|
}, [
|
|
createVNode(unref(ElIcon), {
|
|
class: normalizeClass([
|
|
unref(ns).e("icon"),
|
|
{ hover: hoverIndex.value === item },
|
|
unref(ns).is("active", item <= currentValue.value)
|
|
])
|
|
}, {
|
|
default: withCtx(() => [
|
|
!showDecimalIcon(item) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
withDirectives((openBlock(), createBlock(resolveDynamicComponent(unref(activeComponent)), null, null, 512)), [
|
|
[vShow, item <= currentValue.value]
|
|
]),
|
|
withDirectives((openBlock(), createBlock(resolveDynamicComponent(unref(voidComponent)), null, null, 512)), [
|
|
[vShow, !(item <= currentValue.value)]
|
|
])
|
|
], 64)) : createCommentVNode("v-if", true),
|
|
showDecimalIcon(item) ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
(openBlock(), createBlock(resolveDynamicComponent(unref(voidComponent)), {
|
|
class: normalizeClass([unref(ns).em("decimal", "box")])
|
|
}, null, 8, ["class"])),
|
|
createVNode(unref(ElIcon), {
|
|
style: normalizeStyle(unref(decimalStyle)),
|
|
class: normalizeClass([unref(ns).e("icon"), unref(ns).e("decimal")])
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(unref(decimalIconComponent))))
|
|
]),
|
|
_: 1
|
|
}, 8, ["style", "class"])
|
|
], 64)) : createCommentVNode("v-if", true)
|
|
]),
|
|
_: 2
|
|
}, 1032, ["class"])
|
|
], 42, ["onMousemove", "onClick"]);
|
|
}), 128)),
|
|
_ctx.showText || _ctx.showScore ? (openBlock(), createElementBlock("span", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).e("text")),
|
|
style: normalizeStyle({ color: _ctx.textColor })
|
|
}, toDisplayString(unref(text)), 7)) : createCommentVNode("v-if", true)
|
|
], 46, ["id", "aria-label", "aria-labelledby", "aria-valuenow", "aria-valuetext", "aria-valuemax"]);
|
|
};
|
|
}
|
|
});
|
|
var Rate = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__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__$E = defineComponent({
|
|
name: "ElResult"
|
|
});
|
|
const _sfc_main$O = /* @__PURE__ */ defineComponent({
|
|
...__default__$E,
|
|
props: resultProps,
|
|
setup(__props) {
|
|
const props = __props;
|
|
const ns = useNamespace("result");
|
|
const resultIcon = 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 openBlock(), createElementBlock("div", {
|
|
class: normalizeClass(unref(ns).b())
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("icon"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "icon", {}, () => [
|
|
unref(resultIcon).component ? (openBlock(), createBlock(resolveDynamicComponent(unref(resultIcon).component), {
|
|
key: 0,
|
|
class: normalizeClass(unref(resultIcon).class)
|
|
}, null, 8, ["class"])) : createCommentVNode("v-if", true)
|
|
])
|
|
], 2),
|
|
_ctx.title || _ctx.$slots.title ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).e("title"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "title", {}, () => [
|
|
createElementVNode("p", null, toDisplayString(_ctx.title), 1)
|
|
])
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
_ctx.subTitle || _ctx.$slots["sub-title"] ? (openBlock(), createElementBlock("div", {
|
|
key: 1,
|
|
class: normalizeClass(unref(ns).e("subtitle"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "sub-title", {}, () => [
|
|
createElementVNode("p", null, toDisplayString(_ctx.subTitle), 1)
|
|
])
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
_ctx.$slots.extra ? (openBlock(), createElementBlock("div", {
|
|
key: 2,
|
|
class: normalizeClass(unref(ns).e("extra"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "extra")
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var Result = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["__file", "result.vue"]]);
|
|
|
|
const ElResult = withInstall(Result);
|
|
|
|
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 = getCurrentInstance();
|
|
const props = vm.proxy.$props;
|
|
return 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,
|
|
role: String,
|
|
...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 = defineComponent({
|
|
name: "ElVirtualScrollBar",
|
|
props: virtualizedScrollbarProps,
|
|
emits: ["scroll", "start-move", "stop-move"],
|
|
setup(props, { emit }) {
|
|
const GAP = computed(() => props.startGap + props.endGap);
|
|
const nsVirtualScrollbar = useNamespace("virtual-scrollbar");
|
|
const nsScrollbar = useNamespace("scrollbar");
|
|
const trackRef = ref();
|
|
const thumbRef = ref();
|
|
let frameHandle = null;
|
|
let onselectstartStore = null;
|
|
const state = reactive({
|
|
isDragging: false,
|
|
traveled: 0
|
|
});
|
|
const bar = computed(() => BAR_MAP[props.layout]);
|
|
const trackSize = computed(() => props.clientSize - unref(GAP));
|
|
const trackStyle = 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 = 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 = 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 = computed(() => Math.floor(props.clientSize - thumbSize.value - unref(GAP)));
|
|
const attachEvents = () => {
|
|
window.addEventListener("mousemove", onMouseMove);
|
|
window.addEventListener("mouseup", onMouseUp);
|
|
const thumbEl = unref(thumbRef);
|
|
if (!thumbEl)
|
|
return;
|
|
onselectstartStore = document.onselectstart;
|
|
document.onselectstart = () => false;
|
|
thumbEl.addEventListener("touchmove", onMouseMove, { passive: true });
|
|
thumbEl.addEventListener("touchend", onMouseUp);
|
|
};
|
|
const detachEvents = () => {
|
|
window.removeEventListener("mousemove", onMouseMove);
|
|
window.removeEventListener("mouseup", onMouseUp);
|
|
document.onselectstart = onselectstartStore;
|
|
onselectstartStore = null;
|
|
const thumbEl = 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);
|
|
};
|
|
watch(() => props.scrollFrom, (v) => {
|
|
if (state.isDragging)
|
|
return;
|
|
state.traveled = Math.ceil(v * totalSteps.value);
|
|
});
|
|
onBeforeUnmount(() => {
|
|
detachEvents();
|
|
});
|
|
return () => {
|
|
return h$1("div", {
|
|
role: "presentation",
|
|
ref: trackRef,
|
|
class: [
|
|
nsVirtualScrollbar.b(),
|
|
props.class,
|
|
(props.alwaysOn || state.isDragging) && "always-on"
|
|
],
|
|
style: trackStyle.value,
|
|
onMousedown: withModifiers(clickTrackHandler, ["stop", "prevent"]),
|
|
onTouchstartPrevent: onThumbMouseDown
|
|
}, h$1("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 defineComponent({
|
|
name: name != null ? name : "ElVirtualList",
|
|
props: virtualizedListProps,
|
|
emits: [ITEM_RENDER_EVT, SCROLL_EVT],
|
|
setup(props, { emit, expose }) {
|
|
validateProps(props);
|
|
const instance = getCurrentInstance();
|
|
const ns = useNamespace("vl");
|
|
const dynamicSizeCache = ref(initCache(props, instance));
|
|
const getItemStyleCache = useCache();
|
|
const windowRef = ref();
|
|
const innerRef = ref();
|
|
const scrollbarRef = ref();
|
|
const states = ref({
|
|
isScrolling: false,
|
|
scrollDir: "forward",
|
|
scrollOffset: isNumber(props.initScrollOffset) ? props.initScrollOffset : 0,
|
|
updateRequested: false,
|
|
isScrollbarDragging: false,
|
|
scrollbarAlwaysOn: props.scrollbarAlwaysOn
|
|
});
|
|
const itemsToRender = computed(() => {
|
|
const { total, cache } = props;
|
|
const { isScrolling, scrollDir, scrollOffset } = unref(states);
|
|
if (total === 0) {
|
|
return [0, 0, 0, 0];
|
|
}
|
|
const startIndex = getStartIndexForOffset(props, scrollOffset, unref(dynamicSizeCache));
|
|
const stopIndex = getStopIndexForStartIndex(props, startIndex, scrollOffset, 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 = computed(() => getEstimatedTotalSize(props, unref(dynamicSizeCache)));
|
|
const _isHorizontal = computed(() => isHorizontal(props.layout));
|
|
const windowStyle = 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 = computed(() => {
|
|
const size = unref(estimatedTotalSize);
|
|
const horizontal = unref(_isHorizontal);
|
|
return {
|
|
height: horizontal ? "100%" : `${size}px`,
|
|
pointerEvents: unref(states).isScrolling ? "none" : void 0,
|
|
width: horizontal ? `${size}px` : "100%"
|
|
};
|
|
});
|
|
const clientSize = computed(() => _isHorizontal.value ? props.width : props.height);
|
|
const { onWheel } = useWheel$1({
|
|
atStartEdge: computed(() => states.value.scrollOffset <= 0),
|
|
atEndEdge: computed(() => states.value.scrollOffset >= estimatedTotalSize.value),
|
|
layout: 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));
|
|
});
|
|
useEventListener(windowRef, "wheel", onWheel, {
|
|
passive: false
|
|
});
|
|
const emitEvents = () => {
|
|
const { total } = props;
|
|
if (total > 0) {
|
|
const [cacheStart, cacheEnd, visibleStart, visibleEnd] = unref(itemsToRender);
|
|
emit(ITEM_RENDER_EVT, cacheStart, cacheEnd, visibleStart, visibleEnd);
|
|
}
|
|
const { scrollDir, scrollOffset, updateRequested } = unref(states);
|
|
emit(SCROLL_EVT, scrollDir, scrollOffset, updateRequested);
|
|
};
|
|
const scrollVertically = (e) => {
|
|
const { clientHeight, scrollHeight, scrollTop } = e.currentTarget;
|
|
const _states = 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
|
|
};
|
|
nextTick(resetIsScrolling);
|
|
};
|
|
const scrollHorizontally = (e) => {
|
|
const { clientWidth, scrollLeft, scrollWidth } = e.currentTarget;
|
|
const _states = 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
|
|
};
|
|
nextTick(resetIsScrolling);
|
|
};
|
|
const onScroll = (e) => {
|
|
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 === unref(states).scrollOffset) {
|
|
return;
|
|
}
|
|
states.value = {
|
|
...unref(states),
|
|
scrollOffset: offset,
|
|
scrollDir: getScrollDir(unref(states).scrollOffset, offset),
|
|
updateRequested: true
|
|
};
|
|
nextTick(resetIsScrolling);
|
|
};
|
|
const scrollToItem = (idx, alignment = AUTO_ALIGNMENT) => {
|
|
const { scrollOffset } = unref(states);
|
|
idx = Math.max(0, Math.min(idx, props.total - 1));
|
|
scrollTo(getOffset(props, idx, alignment, scrollOffset, 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, unref(dynamicSizeCache));
|
|
const size = getItemSize(props, idx, unref(dynamicSizeCache));
|
|
const horizontal = 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;
|
|
nextTick(() => {
|
|
getItemStyleCache.value(-1, null, null);
|
|
});
|
|
};
|
|
const resetScrollTop = () => {
|
|
const window = windowRef.value;
|
|
if (window) {
|
|
window.scrollTop = 0;
|
|
}
|
|
};
|
|
onMounted(() => {
|
|
if (!isClient)
|
|
return;
|
|
const { initScrollOffset } = props;
|
|
const windowElement = unref(windowRef);
|
|
if (isNumber(initScrollOffset) && windowElement) {
|
|
if (unref(_isHorizontal)) {
|
|
windowElement.scrollLeft = initScrollOffset;
|
|
} else {
|
|
windowElement.scrollTop = initScrollOffset;
|
|
}
|
|
}
|
|
emitEvents();
|
|
});
|
|
onUpdated(() => {
|
|
const { direction, layout } = props;
|
|
const { scrollOffset, updateRequested } = unref(states);
|
|
const windowElement = 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;
|
|
}
|
|
}
|
|
});
|
|
onActivated(() => {
|
|
unref(windowRef).scrollTop = unref(states).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,
|
|
states,
|
|
useIsScrolling,
|
|
windowStyle,
|
|
ns
|
|
} = ctx;
|
|
const [start, end] = itemsToRender;
|
|
const Container = resolveDynamicComponent(containerElement);
|
|
const Inner = resolveDynamicComponent(innerElement);
|
|
const children = [];
|
|
if (total > 0) {
|
|
for (let i = start; i <= end; i++) {
|
|
children.push(h$1(Fragment, { key: i }, (_a = $slots.default) == null ? void 0 : _a.call($slots, {
|
|
data,
|
|
index: i,
|
|
isScrolling: useIsScrolling ? states.isScrolling : void 0,
|
|
style: getItemStyle(i)
|
|
})));
|
|
}
|
|
}
|
|
const InnerNode = [
|
|
h$1(Inner, {
|
|
style: innerStyle,
|
|
ref: "innerRef"
|
|
}, !isString$1(Inner) ? {
|
|
default: () => children
|
|
} : children)
|
|
];
|
|
const scrollbar = h$1(Scrollbar, {
|
|
ref: "scrollbarRef",
|
|
clientSize,
|
|
layout,
|
|
onScroll: onScrollbarScroll,
|
|
ratio: clientSize * 100 / this.estimatedTotalSize,
|
|
scrollFrom: states.scrollOffset / (this.estimatedTotalSize - clientSize),
|
|
total
|
|
});
|
|
const listContainer = h$1(Container, {
|
|
class: [ns.e("window"), className],
|
|
style: windowStyle,
|
|
onScroll,
|
|
ref: "windowRef",
|
|
key: 0
|
|
}, !isString$1(Container) ? { default: () => [InnerNode] } : [InnerNode]);
|
|
return h$1("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;
|
|
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 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 = getCurrentInstance();
|
|
const cache = ref(initCache(props, instance));
|
|
injectToInstance == null ? void 0 : injectToInstance(instance, cache);
|
|
const windowRef = ref();
|
|
const hScrollbar = ref();
|
|
const vScrollbar = ref();
|
|
const innerRef = ref(null);
|
|
const states = 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 = computed(() => Number.parseInt(`${props.height}`, 10));
|
|
const parsedWidth = computed(() => Number.parseInt(`${props.width}`, 10));
|
|
const columnsToRender = computed(() => {
|
|
const { totalColumn, totalRow, columnCache } = props;
|
|
const { isScrolling, xAxisScrollDir, scrollLeft } = unref(states);
|
|
if (totalColumn === 0 || totalRow === 0) {
|
|
return [0, 0, 0, 0];
|
|
}
|
|
const startIndex = getColumnStartIndexForOffset(props, scrollLeft, unref(cache));
|
|
const stopIndex = getColumnStopIndexForStartIndex(props, startIndex, scrollLeft, 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 = computed(() => {
|
|
const { totalColumn, totalRow, rowCache } = props;
|
|
const { isScrolling, yAxisScrollDir, scrollTop } = unref(states);
|
|
if (totalColumn === 0 || totalRow === 0) {
|
|
return [0, 0, 0, 0];
|
|
}
|
|
const startIndex = getRowStartIndexForOffset(props, scrollTop, unref(cache));
|
|
const stopIndex = getRowStopIndexForStartIndex(props, startIndex, scrollTop, 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 = computed(() => getEstimatedTotalHeight(props, unref(cache)));
|
|
const estimatedTotalWidth = computed(() => getEstimatedTotalWidth(props, unref(cache)));
|
|
const windowStyle = 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 = computed(() => {
|
|
const width = `${unref(estimatedTotalWidth)}px`;
|
|
const height = `${unref(estimatedTotalHeight)}px`;
|
|
return {
|
|
height,
|
|
pointerEvents: unref(states).isScrolling ? "none" : void 0,
|
|
width
|
|
};
|
|
});
|
|
const emitEvents = () => {
|
|
const { totalColumn, totalRow } = props;
|
|
if (totalColumn > 0 && totalRow > 0) {
|
|
const [
|
|
columnCacheStart,
|
|
columnCacheEnd,
|
|
columnVisibleStart,
|
|
columnVisibleEnd
|
|
] = unref(columnsToRender);
|
|
const [rowCacheStart, rowCacheEnd, rowVisibleStart, rowVisibleEnd] = unref(rowsToRender);
|
|
emit(ITEM_RENDER_EVT, {
|
|
columnCacheStart,
|
|
columnCacheEnd,
|
|
rowCacheStart,
|
|
rowCacheEnd,
|
|
columnVisibleStart,
|
|
columnVisibleEnd,
|
|
rowVisibleStart,
|
|
rowVisibleEnd
|
|
});
|
|
}
|
|
const {
|
|
scrollLeft,
|
|
scrollTop,
|
|
updateRequested,
|
|
xAxisScrollDir,
|
|
yAxisScrollDir
|
|
} = unref(states);
|
|
emit(SCROLL_EVT, {
|
|
xAxisScrollDir,
|
|
scrollLeft,
|
|
yAxisScrollDir,
|
|
scrollTop,
|
|
updateRequested
|
|
});
|
|
};
|
|
const onScroll = (e) => {
|
|
const {
|
|
clientHeight,
|
|
clientWidth,
|
|
scrollHeight,
|
|
scrollLeft,
|
|
scrollTop,
|
|
scrollWidth
|
|
} = e.currentTarget;
|
|
const _states = 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)
|
|
};
|
|
nextTick(() => resetIsScrolling());
|
|
onUpdated();
|
|
emitEvents();
|
|
};
|
|
const onVerticalScroll = (distance, totalSteps) => {
|
|
const height = unref(parsedHeight);
|
|
const offset = (estimatedTotalHeight.value - height) / totalSteps * distance;
|
|
scrollTo({
|
|
scrollTop: Math.min(estimatedTotalHeight.value - height, offset)
|
|
});
|
|
};
|
|
const onHorizontalScroll = (distance, totalSteps) => {
|
|
const width = unref(parsedWidth);
|
|
const offset = (estimatedTotalWidth.value - width) / totalSteps * distance;
|
|
scrollTo({
|
|
scrollLeft: Math.min(estimatedTotalWidth.value - width, offset)
|
|
});
|
|
};
|
|
const { onWheel } = useGridWheel({
|
|
atXStartEdge: computed(() => states.value.scrollLeft <= 0),
|
|
atXEndEdge: computed(() => states.value.scrollLeft >= estimatedTotalWidth.value - unref(parsedWidth)),
|
|
atYStartEdge: computed(() => states.value.scrollTop <= 0),
|
|
atYEndEdge: computed(() => states.value.scrollTop >= estimatedTotalHeight.value - unref(parsedHeight))
|
|
}, (x, y) => {
|
|
var _a, _b, _c, _d;
|
|
(_b = (_a = hScrollbar.value) == null ? void 0 : _a.onMouseUp) == null ? void 0 : _b.call(_a);
|
|
(_d = (_c = vScrollbar.value) == null ? void 0 : _c.onMouseUp) == null ? void 0 : _d.call(_c);
|
|
const width = unref(parsedWidth);
|
|
const height = unref(parsedHeight);
|
|
scrollTo({
|
|
scrollLeft: Math.min(states.value.scrollLeft + x, estimatedTotalWidth.value - width),
|
|
scrollTop: Math.min(states.value.scrollTop + y, estimatedTotalHeight.value - height)
|
|
});
|
|
});
|
|
useEventListener(windowRef, "wheel", onWheel, {
|
|
passive: false
|
|
});
|
|
const scrollTo = ({
|
|
scrollLeft = states.value.scrollLeft,
|
|
scrollTop = states.value.scrollTop
|
|
}) => {
|
|
scrollLeft = Math.max(scrollLeft, 0);
|
|
scrollTop = Math.max(scrollTop, 0);
|
|
const _states = 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
|
|
};
|
|
nextTick(() => resetIsScrolling());
|
|
onUpdated();
|
|
emitEvents();
|
|
};
|
|
const scrollToItem = (rowIndex = 0, columnIdx = 0, alignment = AUTO_ALIGNMENT) => {
|
|
const _states = 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 = 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, unref(cache));
|
|
const _cache = 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;
|
|
nextTick(() => {
|
|
getItemStyleCache.value(-1, null, null);
|
|
});
|
|
};
|
|
onMounted(() => {
|
|
if (!isClient)
|
|
return;
|
|
const { initScrollLeft, initScrollTop } = props;
|
|
const windowElement = 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 } = unref(states);
|
|
const windowElement = 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 = unref(parsedWidth);
|
|
const height = unref(parsedHeight);
|
|
const estimatedWidth = unref(estimatedTotalWidth);
|
|
const estimatedHeight = unref(estimatedTotalHeight);
|
|
const { scrollLeft, scrollTop } = unref(states);
|
|
const horizontalScrollbar = h$1(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 = h$1(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] = unref(columnsToRender);
|
|
const [rowStart, rowEnd] = 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++) {
|
|
const key = itemKey({ columnIndex: column, data, rowIndex: row });
|
|
children.push(h$1(Fragment, { key }, (_a = slots.default) == null ? void 0 : _a.call(slots, {
|
|
columnIndex: column,
|
|
data,
|
|
isScrolling: useIsScrolling ? unref(states).isScrolling : void 0,
|
|
style: getItemStyle(row, column),
|
|
rowIndex: row
|
|
})));
|
|
}
|
|
}
|
|
}
|
|
return children;
|
|
};
|
|
const renderInner = () => {
|
|
const Inner = resolveDynamicComponent(props.innerElement);
|
|
const children = renderItems();
|
|
return [
|
|
h$1(Inner, {
|
|
style: unref(innerStyle),
|
|
ref: innerRef
|
|
}, !isString$1(Inner) ? {
|
|
default: () => children
|
|
} : children)
|
|
];
|
|
};
|
|
const renderWindow = () => {
|
|
const Container = resolveDynamicComponent(props.containerElement);
|
|
const { horizontalScrollbar, verticalScrollbar } = renderScrollbars();
|
|
const Inner = renderInner();
|
|
return h$1("div", {
|
|
key: 0,
|
|
class: ns.e("wrapper"),
|
|
role: props.role
|
|
}, [
|
|
h$1(Container, {
|
|
class: props.className,
|
|
style: unref(windowStyle),
|
|
onScroll,
|
|
ref: windowRef
|
|
}, !isString$1(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$N = defineComponent({
|
|
props: {
|
|
item: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
style: {
|
|
type: Object
|
|
},
|
|
height: Number
|
|
},
|
|
setup() {
|
|
const ns = useNamespace("select");
|
|
return {
|
|
ns
|
|
};
|
|
}
|
|
});
|
|
function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass(_ctx.ns.be("group", "title")),
|
|
style: normalizeStyle({ ..._ctx.style, lineHeight: `${_ctx.height}px` })
|
|
}, toDisplayString(_ctx.item.label), 7);
|
|
}
|
|
var GroupItem = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["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 defaultProps$4 = {
|
|
label: "label",
|
|
value: "value",
|
|
disabled: "disabled",
|
|
options: "options"
|
|
};
|
|
function useProps(props) {
|
|
const aliasProps = computed(() => ({ ...defaultProps$4, ...props.props }));
|
|
const getLabel = (option) => get(option, aliasProps.value.label);
|
|
const getValue = (option) => get(option, aliasProps.value.value);
|
|
const getDisabled = (option) => get(option, aliasProps.value.disabled);
|
|
const getOptions = (option) => get(option, aliasProps.value.options);
|
|
return {
|
|
aliasProps,
|
|
getLabel,
|
|
getValue,
|
|
getDisabled,
|
|
getOptions
|
|
};
|
|
}
|
|
|
|
const SelectProps = buildProps({
|
|
allowCreate: Boolean,
|
|
autocomplete: {
|
|
type: definePropType(String),
|
|
default: "none"
|
|
},
|
|
automaticDropdown: Boolean,
|
|
clearable: Boolean,
|
|
clearIcon: {
|
|
type: iconPropType,
|
|
default: circle_close_default
|
|
},
|
|
effect: {
|
|
type: definePropType(String),
|
|
default: "light"
|
|
},
|
|
collapseTags: Boolean,
|
|
collapseTagsTooltip: Boolean,
|
|
maxCollapseTags: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
defaultFirstOption: Boolean,
|
|
disabled: Boolean,
|
|
estimatedOptionHeight: {
|
|
type: Number,
|
|
default: void 0
|
|
},
|
|
filterable: Boolean,
|
|
filterMethod: Function,
|
|
height: {
|
|
type: Number,
|
|
default: 274
|
|
},
|
|
itemHeight: {
|
|
type: Number,
|
|
default: 34
|
|
},
|
|
id: String,
|
|
loading: Boolean,
|
|
loadingText: String,
|
|
modelValue: {
|
|
type: definePropType([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: definePropType(Array),
|
|
required: true
|
|
},
|
|
placeholder: {
|
|
type: String
|
|
},
|
|
teleported: useTooltipContentProps.teleported,
|
|
persistent: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
popperClass: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
popperOptions: {
|
|
type: definePropType(Object),
|
|
default: () => ({})
|
|
},
|
|
remote: Boolean,
|
|
size: useSizeProp,
|
|
props: {
|
|
type: definePropType(Object),
|
|
default: () => defaultProps$4
|
|
},
|
|
valueKey: {
|
|
type: String,
|
|
default: "value"
|
|
},
|
|
scrollbarAlwaysOn: Boolean,
|
|
validateEvent: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
placement: {
|
|
type: definePropType(String),
|
|
values: Ee,
|
|
default: "bottom-start"
|
|
},
|
|
fallbackPlacements: {
|
|
type: definePropType(Array),
|
|
default: ["bottom-start", "top-start", "right", "left"]
|
|
},
|
|
tagType: { ...tagProps.type, default: "info" },
|
|
tagEffect: { ...tagProps.effect, default: "light" },
|
|
...useEmptyValuesProps,
|
|
...useAriaProps(["ariaLabel"])
|
|
});
|
|
const OptionProps = buildProps({
|
|
data: Array,
|
|
disabled: Boolean,
|
|
hovering: Boolean,
|
|
item: {
|
|
type: definePropType(Object),
|
|
required: true
|
|
},
|
|
index: Number,
|
|
style: Object,
|
|
selected: Boolean,
|
|
created: Boolean
|
|
});
|
|
const selectEmits = {
|
|
[UPDATE_MODEL_EVENT]: (val) => true,
|
|
[CHANGE_EVENT]: (val) => true,
|
|
"remove-tag": (val) => true,
|
|
"visible-change": (visible) => true,
|
|
focus: (evt) => evt instanceof FocusEvent,
|
|
blur: (evt) => evt instanceof FocusEvent,
|
|
clear: () => true
|
|
};
|
|
const optionEmits = {
|
|
hover: (index) => isNumber(index),
|
|
select: (val, index) => true
|
|
};
|
|
|
|
const selectV2InjectionKey = Symbol("ElSelectV2Injection");
|
|
|
|
const _sfc_main$M = defineComponent({
|
|
props: OptionProps,
|
|
emits: optionEmits,
|
|
setup(props, { emit }) {
|
|
const select = inject(selectV2InjectionKey);
|
|
const ns = useNamespace("select");
|
|
const { hoverItem, selectOptionClick } = useOption(props, { emit });
|
|
const { getLabel } = useProps(select.props);
|
|
return {
|
|
ns,
|
|
hoverItem,
|
|
selectOptionClick,
|
|
getLabel
|
|
};
|
|
}
|
|
});
|
|
function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
|
|
return openBlock(), createElementBlock("li", {
|
|
"aria-selected": _ctx.selected,
|
|
style: normalizeStyle(_ctx.style),
|
|
class: normalizeClass([
|
|
_ctx.ns.be("dropdown", "item"),
|
|
_ctx.ns.is("selected", _ctx.selected),
|
|
_ctx.ns.is("disabled", _ctx.disabled),
|
|
_ctx.ns.is("created", _ctx.created),
|
|
_ctx.ns.is("hovering", _ctx.hovering)
|
|
]),
|
|
onMouseenter: _ctx.hoverItem,
|
|
onClick: withModifiers(_ctx.selectOptionClick, ["stop"])
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default", {
|
|
item: _ctx.item,
|
|
index: _ctx.index,
|
|
disabled: _ctx.disabled
|
|
}, () => [
|
|
createElementVNode("span", null, toDisplayString(_ctx.getLabel(_ctx.item)), 1)
|
|
])
|
|
], 46, ["aria-selected", "onMouseenter", "onClick"]);
|
|
}
|
|
var OptionItem = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["render", _sfc_render$6], ["__file", "option-item.vue"]]);
|
|
|
|
const props = {
|
|
loading: Boolean,
|
|
data: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
hoveringIndex: Number,
|
|
width: Number
|
|
};
|
|
var ElSelectMenu = defineComponent({
|
|
name: "ElSelectDropdown",
|
|
props,
|
|
setup(props2, {
|
|
slots,
|
|
expose
|
|
}) {
|
|
const select = inject(selectV2InjectionKey);
|
|
const ns = useNamespace("select");
|
|
const {
|
|
getLabel,
|
|
getValue,
|
|
getDisabled
|
|
} = useProps(select.props);
|
|
const cachedHeights = ref([]);
|
|
const listRef = ref();
|
|
const size = computed(() => props2.data.length);
|
|
watch(() => size.value, () => {
|
|
var _a, _b;
|
|
(_b = (_a = select.tooltipRef.value).updatePopper) == null ? void 0 : _b.call(_a);
|
|
});
|
|
const isSized = computed(() => isUndefined(select.props.estimatedOptionHeight));
|
|
const listProps = 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 toRaw(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) => {
|
|
if (select.props.multiple) {
|
|
return contains(modelValue, getValue(target));
|
|
}
|
|
return isEqual(modelValue, getValue(target));
|
|
};
|
|
const isItemDisabled = (modelValue, selected) => {
|
|
const {
|
|
disabled,
|
|
multiple,
|
|
multipleLimit
|
|
} = select.props;
|
|
return disabled || !selected && (multiple ? multipleLimit > 0 && modelValue.length >= multipleLimit : false);
|
|
};
|
|
const isItemHovering = (target) => props2.hoveringIndex === target;
|
|
const scrollToItem = (index) => {
|
|
const list = listRef.value;
|
|
if (list) {
|
|
list.scrollToItem(index);
|
|
}
|
|
};
|
|
const resetScrollTop = () => {
|
|
const list = listRef.value;
|
|
if (list) {
|
|
list.resetScrollTop();
|
|
}
|
|
};
|
|
const exposed = {
|
|
listRef,
|
|
isSized,
|
|
isItemDisabled,
|
|
isItemHovering,
|
|
isItemSelected,
|
|
scrollToItem,
|
|
resetScrollTop
|
|
};
|
|
expose(exposed);
|
|
const Item = (itemProps) => {
|
|
const {
|
|
index,
|
|
data,
|
|
style
|
|
} = itemProps;
|
|
const sized = unref(isSized);
|
|
const {
|
|
itemSize,
|
|
estimatedSize
|
|
} = unref(listProps);
|
|
const {
|
|
modelValue
|
|
} = select.props;
|
|
const {
|
|
onSelect,
|
|
onHover
|
|
} = select;
|
|
const item = data[index];
|
|
if (item.type === "Group") {
|
|
return 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 createVNode(OptionItem, mergeProps(itemProps, {
|
|
"selected": isSelected,
|
|
"disabled": getDisabled(item) || isDisabled,
|
|
"created": !!item.created,
|
|
"hovering": isHovering,
|
|
"item": item,
|
|
"onSelect": onSelect,
|
|
"onHover": onHover
|
|
}), {
|
|
default: (props3) => {
|
|
var _a;
|
|
return ((_a = slots.default) == null ? void 0 : _a.call(slots, props3)) || createVNode("span", null, [getLabel(item)]);
|
|
}
|
|
});
|
|
};
|
|
const {
|
|
onKeyboardNavigate,
|
|
onKeyboardSelect
|
|
} = select;
|
|
const onForward = () => {
|
|
onKeyboardNavigate("forward");
|
|
};
|
|
const onBackward = () => {
|
|
onKeyboardNavigate("backward");
|
|
};
|
|
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: {
|
|
break;
|
|
}
|
|
case down: {
|
|
onForward();
|
|
break;
|
|
}
|
|
case up: {
|
|
onBackward();
|
|
break;
|
|
}
|
|
case enter: {
|
|
onKeyboardSelect();
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
return () => {
|
|
var _a, _b, _c, _d;
|
|
const {
|
|
data,
|
|
width
|
|
} = props2;
|
|
const {
|
|
height,
|
|
multiple,
|
|
scrollbarAlwaysOn
|
|
} = select.props;
|
|
const List = unref(isSized) ? FixedSizeList$1 : DynamicSizeList$1;
|
|
return createVNode("div", {
|
|
"class": [ns.b("dropdown"), ns.is("multiple", multiple)],
|
|
"style": {
|
|
width: `${width}px`
|
|
}
|
|
}, [(_a = slots.header) == null ? void 0 : _a.call(slots), ((_b = slots.loading) == null ? void 0 : _b.call(slots)) || ((_c = slots.empty) == null ? void 0 : _c.call(slots)) || createVNode(List, mergeProps({
|
|
"ref": listRef
|
|
}, unref(listProps), {
|
|
"className": ns.be("dropdown", "list"),
|
|
"scrollbarAlwaysOn": scrollbarAlwaysOn,
|
|
"data": data,
|
|
"height": height,
|
|
"width": width,
|
|
"total": data.length,
|
|
"onKeydown": onKeydown
|
|
}), {
|
|
default: (props3) => createVNode(Item, props3, null)
|
|
}), (_d = slots.footer) == null ? void 0 : _d.call(slots)]);
|
|
};
|
|
}
|
|
});
|
|
|
|
function useAllowCreate(props, states) {
|
|
const { aliasProps, getLabel, getValue } = useProps(props);
|
|
const createOptionCount = ref(0);
|
|
const cachedSelectedOption = ref();
|
|
const enableAllowCreateMode = computed(() => {
|
|
return props.allowCreate && props.filterable;
|
|
});
|
|
function hasExistingOption(query) {
|
|
const hasOption = (option) => getLabel(option) === query;
|
|
return props.options && props.options.some(hasOption) || states.createdOptions.some(hasOption);
|
|
}
|
|
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) {
|
|
if (hasExistingOption(query)) {
|
|
return;
|
|
}
|
|
const newOption = {
|
|
[aliasProps.value.value]: query,
|
|
[aliasProps.value.label]: query,
|
|
created: true,
|
|
[aliasProps.value.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 === getLabel(option)) {
|
|
return;
|
|
}
|
|
const idx = states.createdOptions.findIndex((it) => getValue(it) === getValue(option));
|
|
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 MINIMUM_INPUT_WIDTH = 11;
|
|
const useSelect$1 = (props, emit) => {
|
|
const { t } = useLocale();
|
|
const nsSelect = useNamespace("select");
|
|
const nsInput = useNamespace("input");
|
|
const { form: elForm, formItem: elFormItem } = useFormItem();
|
|
const { inputId } = useFormItemInputId(props, {
|
|
formItemContext: elFormItem
|
|
});
|
|
const { aliasProps, getLabel, getValue, getDisabled, getOptions } = useProps(props);
|
|
const { valueOnClear, isEmptyValue } = useEmptyValues(props);
|
|
const states = reactive({
|
|
inputValue: "",
|
|
cachedOptions: [],
|
|
createdOptions: [],
|
|
hoveringIndex: -1,
|
|
inputHovering: false,
|
|
selectionWidth: 0,
|
|
calculatorWidth: 0,
|
|
collapseItemWidth: 0,
|
|
previousQuery: null,
|
|
previousValue: void 0,
|
|
selectedLabel: "",
|
|
menuVisibleOnFocus: false,
|
|
isBeforeHide: false
|
|
});
|
|
const popperSize = ref(-1);
|
|
const selectRef = ref();
|
|
const selectionRef = ref();
|
|
const tooltipRef = ref();
|
|
const tagTooltipRef = ref();
|
|
const inputRef = ref();
|
|
const calculatorRef = ref();
|
|
const prefixRef = ref();
|
|
const suffixRef = ref();
|
|
const menuRef = ref();
|
|
const tagMenuRef = ref();
|
|
const collapseItemRef = ref();
|
|
const {
|
|
isComposing,
|
|
handleCompositionStart,
|
|
handleCompositionEnd,
|
|
handleCompositionUpdate
|
|
} = useComposition({
|
|
afterComposition: (e) => onInput(e)
|
|
});
|
|
const { wrapperRef, isFocused } = useFocusController(inputRef, {
|
|
beforeFocus() {
|
|
return selectDisabled.value;
|
|
},
|
|
afterFocus() {
|
|
if (props.automaticDropdown && !expanded.value) {
|
|
expanded.value = true;
|
|
states.menuVisibleOnFocus = true;
|
|
}
|
|
},
|
|
beforeBlur(event) {
|
|
var _a, _b;
|
|
return ((_a = tooltipRef.value) == null ? void 0 : _a.isFocusInsideContent(event)) || ((_b = tagTooltipRef.value) == null ? void 0 : _b.isFocusInsideContent(event));
|
|
},
|
|
afterBlur() {
|
|
expanded.value = false;
|
|
states.menuVisibleOnFocus = false;
|
|
}
|
|
});
|
|
const allOptions = ref([]);
|
|
const filteredOptions = ref([]);
|
|
const expanded = ref(false);
|
|
const selectDisabled = computed(() => props.disabled || (elForm == null ? void 0 : elForm.disabled));
|
|
const popupHeight = computed(() => {
|
|
const totalHeight = filteredOptions.value.length * props.itemHeight;
|
|
return totalHeight > props.height ? props.height : totalHeight;
|
|
});
|
|
const hasModelValue = computed(() => {
|
|
return props.multiple ? isArray$1(props.modelValue) && props.modelValue.length > 0 : !isEmptyValue(props.modelValue);
|
|
});
|
|
const showClearBtn = computed(() => {
|
|
return props.clearable && !selectDisabled.value && states.inputHovering && hasModelValue.value;
|
|
});
|
|
const iconComponent = computed(() => props.remote && props.filterable ? "" : arrow_down_default);
|
|
const iconReverse = computed(() => iconComponent.value && nsSelect.is("reverse", expanded.value));
|
|
const validateState = computed(() => (elFormItem == null ? void 0 : elFormItem.validateState) || "");
|
|
const validateIcon = computed(() => {
|
|
if (!validateState.value)
|
|
return;
|
|
return ValidateComponentsMap[validateState.value];
|
|
});
|
|
const debounce$1 = computed(() => props.remote ? 300 : 0);
|
|
const emptyText = computed(() => {
|
|
if (props.loading) {
|
|
return props.loadingText || t("el.select.loading");
|
|
} else {
|
|
if (props.remote && !states.inputValue && allOptions.value.length === 0)
|
|
return false;
|
|
if (props.filterable && states.inputValue && allOptions.value.length > 0 && filteredOptions.value.length === 0) {
|
|
return props.noMatchText || t("el.select.noMatch");
|
|
}
|
|
if (allOptions.value.length === 0) {
|
|
return props.noDataText || t("el.select.noData");
|
|
}
|
|
}
|
|
return null;
|
|
});
|
|
const filterOptions = (query) => {
|
|
const isValidOption = (o) => {
|
|
if (props.filterable && isFunction$1(props.filterMethod))
|
|
return true;
|
|
if (props.filterable && props.remote && isFunction$1(props.remoteMethod))
|
|
return true;
|
|
const regexp = new RegExp(escapeStringRegexp(query), "i");
|
|
return query ? regexp.test(getLabel(o) || "") : true;
|
|
};
|
|
if (props.loading) {
|
|
return [];
|
|
}
|
|
return [...states.createdOptions, ...props.options].reduce((all, item) => {
|
|
const options = getOptions(item);
|
|
if (isArray$1(options)) {
|
|
const filtered = options.filter(isValidOption);
|
|
if (filtered.length > 0) {
|
|
all.push({
|
|
label: getLabel(item),
|
|
type: "Group"
|
|
}, ...filtered);
|
|
}
|
|
} else if (props.remote || isValidOption(item)) {
|
|
all.push(item);
|
|
}
|
|
return all;
|
|
}, []);
|
|
};
|
|
const updateOptions = () => {
|
|
allOptions.value = filterOptions("");
|
|
filteredOptions.value = filterOptions(states.inputValue);
|
|
};
|
|
const allOptionsValueMap = computed(() => {
|
|
const valueMap = /* @__PURE__ */ new Map();
|
|
allOptions.value.forEach((option, index) => {
|
|
valueMap.set(getValueKey(getValue(option)), { option, index });
|
|
});
|
|
return valueMap;
|
|
});
|
|
const filteredOptionsValueMap = computed(() => {
|
|
const valueMap = /* @__PURE__ */ new Map();
|
|
filteredOptions.value.forEach((option, index) => {
|
|
valueMap.set(getValueKey(getValue(option)), { option, index });
|
|
});
|
|
return valueMap;
|
|
});
|
|
const optionsAllDisabled = computed(() => filteredOptions.value.every((option) => getDisabled(option)));
|
|
const selectSize = useFormSize();
|
|
const collapseTagSize = computed(() => selectSize.value === "small" ? "small" : "default");
|
|
const calculatePopperSize = () => {
|
|
var _a;
|
|
popperSize.value = ((_a = selectRef.value) == null ? void 0 : _a.offsetWidth) || 200;
|
|
};
|
|
const getGapWidth = () => {
|
|
if (!selectionRef.value)
|
|
return 0;
|
|
const style = window.getComputedStyle(selectionRef.value);
|
|
return Number.parseFloat(style.gap || "6px");
|
|
};
|
|
const tagStyle = computed(() => {
|
|
const gapWidth = getGapWidth();
|
|
const maxWidth = collapseItemRef.value && props.maxCollapseTags === 1 ? states.selectionWidth - states.collapseItemWidth - gapWidth : states.selectionWidth;
|
|
return { maxWidth: `${maxWidth}px` };
|
|
});
|
|
const collapseTagStyle = computed(() => {
|
|
return { maxWidth: `${states.selectionWidth}px` };
|
|
});
|
|
const inputStyle = computed(() => ({
|
|
width: `${Math.max(states.calculatorWidth, MINIMUM_INPUT_WIDTH)}px`
|
|
}));
|
|
const shouldShowPlaceholder = computed(() => {
|
|
if (isArray$1(props.modelValue)) {
|
|
return props.modelValue.length === 0 && !states.inputValue;
|
|
}
|
|
return props.filterable ? !states.inputValue : true;
|
|
});
|
|
const currentPlaceholder = computed(() => {
|
|
var _a;
|
|
const _placeholder = (_a = props.placeholder) != null ? _a : t("el.select.placeholder");
|
|
return props.multiple || !hasModelValue.value ? _placeholder : states.selectedLabel;
|
|
});
|
|
const popperRef = computed(() => {
|
|
var _a, _b;
|
|
return (_b = (_a = tooltipRef.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
|
|
});
|
|
const indexRef = computed(() => {
|
|
if (props.multiple) {
|
|
const len = props.modelValue.length;
|
|
if (props.modelValue.length > 0 && filteredOptionsValueMap.value.has(props.modelValue[len - 1])) {
|
|
const { index } = filteredOptionsValueMap.value.get(props.modelValue[len - 1]);
|
|
return index;
|
|
}
|
|
} else {
|
|
if (props.modelValue && filteredOptionsValueMap.value.has(props.modelValue)) {
|
|
const { index } = filteredOptionsValueMap.value.get(props.modelValue);
|
|
return index;
|
|
}
|
|
}
|
|
return -1;
|
|
});
|
|
const dropdownMenuVisible = computed({
|
|
get() {
|
|
return expanded.value && emptyText.value !== false;
|
|
},
|
|
set(val) {
|
|
expanded.value = val;
|
|
}
|
|
});
|
|
const showTagList = computed(() => {
|
|
if (!props.multiple) {
|
|
return [];
|
|
}
|
|
return props.collapseTags ? states.cachedOptions.slice(0, props.maxCollapseTags) : states.cachedOptions;
|
|
});
|
|
const collapseTagList = computed(() => {
|
|
if (!props.multiple) {
|
|
return [];
|
|
}
|
|
return props.collapseTags ? states.cachedOptions.slice(props.maxCollapseTags) : [];
|
|
});
|
|
const {
|
|
createNewOption,
|
|
removeNewOption,
|
|
selectNewOption,
|
|
clearAllNewOption
|
|
} = useAllowCreate(props, states);
|
|
const toggleMenu = () => {
|
|
if (selectDisabled.value)
|
|
return;
|
|
if (states.menuVisibleOnFocus) {
|
|
states.menuVisibleOnFocus = false;
|
|
} else {
|
|
expanded.value = !expanded.value;
|
|
}
|
|
};
|
|
const onInputChange = () => {
|
|
if (states.inputValue.length > 0 && !expanded.value) {
|
|
expanded.value = true;
|
|
}
|
|
createNewOption(states.inputValue);
|
|
handleQueryChange(states.inputValue);
|
|
};
|
|
const debouncedOnInputChange = debounce(onInputChange, debounce$1.value);
|
|
const handleQueryChange = (val) => {
|
|
if (states.previousQuery === val || isComposing.value) {
|
|
return;
|
|
}
|
|
states.previousQuery = val;
|
|
if (props.filterable && isFunction$1(props.filterMethod)) {
|
|
props.filterMethod(val);
|
|
} else if (props.filterable && props.remote && isFunction$1(props.remoteMethod)) {
|
|
props.remoteMethod(val);
|
|
}
|
|
if (props.defaultFirstOption && (props.filterable || props.remote) && filteredOptions.value.length) {
|
|
nextTick(checkDefaultFirstOption);
|
|
} else {
|
|
nextTick(updateHoveringIndex);
|
|
}
|
|
};
|
|
const checkDefaultFirstOption = () => {
|
|
const optionsInDropdown = filteredOptions.value.filter((n) => !n.disabled && n.type !== "Group");
|
|
const userCreatedOption = optionsInDropdown.find((n) => n.created);
|
|
const firstOriginOption = optionsInDropdown[0];
|
|
states.hoveringIndex = getValueIndex(filteredOptions.value, userCreatedOption || firstOriginOption);
|
|
};
|
|
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 = props.multiple ? String(val) : val;
|
|
};
|
|
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 handleResize = () => {
|
|
calculatePopperSize();
|
|
};
|
|
const resetSelectionWidth = () => {
|
|
states.selectionWidth = selectionRef.value.getBoundingClientRect().width;
|
|
};
|
|
const resetCalculatorWidth = () => {
|
|
states.calculatorWidth = calculatorRef.value.getBoundingClientRect().width;
|
|
};
|
|
const resetCollapseItemWidth = () => {
|
|
states.collapseItemWidth = collapseItemRef.value.getBoundingClientRect().width;
|
|
};
|
|
const updateTooltip = () => {
|
|
var _a, _b;
|
|
(_b = (_a = tooltipRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
|
|
};
|
|
const updateTagTooltip = () => {
|
|
var _a, _b;
|
|
(_b = (_a = tagTooltipRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
|
|
};
|
|
const onSelect = (option) => {
|
|
if (props.multiple) {
|
|
let selectedOptions = props.modelValue.slice();
|
|
const index = getValueIndex(selectedOptions, getValue(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, getValue(option)];
|
|
states.cachedOptions.push(option);
|
|
selectNewOption(option);
|
|
}
|
|
update(selectedOptions);
|
|
if (option.created) {
|
|
handleQueryChange("");
|
|
}
|
|
if (props.filterable && !props.reserveKeyword) {
|
|
states.inputValue = "";
|
|
}
|
|
} else {
|
|
states.selectedLabel = getLabel(option);
|
|
update(getValue(option));
|
|
expanded.value = false;
|
|
selectNewOption(option);
|
|
if (!option.created) {
|
|
clearAllNewOption();
|
|
}
|
|
}
|
|
focus();
|
|
};
|
|
const deleteTag = (event, option) => {
|
|
let selectedOptions = props.modelValue.slice();
|
|
const index = getValueIndex(selectedOptions, getValue(option));
|
|
if (index > -1 && !selectDisabled.value) {
|
|
selectedOptions = [
|
|
...props.modelValue.slice(0, index),
|
|
...props.modelValue.slice(index + 1)
|
|
];
|
|
states.cachedOptions.splice(index, 1);
|
|
update(selectedOptions);
|
|
emit("remove-tag", getValue(option));
|
|
removeNewOption(option);
|
|
}
|
|
event.stopPropagation();
|
|
focus();
|
|
};
|
|
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 handleEsc = () => {
|
|
if (states.inputValue.length > 0) {
|
|
states.inputValue = "";
|
|
} else {
|
|
expanded.value = false;
|
|
}
|
|
};
|
|
const getLastNotDisabledIndex = (value) => findLastIndex(value, (it) => !states.cachedOptions.some((option) => getValue(option) === it && getDisabled(option)));
|
|
const handleDel = (e) => {
|
|
if (!props.multiple)
|
|
return;
|
|
if (e.code === EVENT_CODE.delete)
|
|
return;
|
|
if (states.inputValue.length === 0) {
|
|
e.preventDefault();
|
|
const selected = props.modelValue.slice();
|
|
const lastNotDisabledIndex = getLastNotDisabledIndex(selected);
|
|
if (lastNotDisabledIndex < 0)
|
|
return;
|
|
const removeTagValue = selected[lastNotDisabledIndex];
|
|
selected.splice(lastNotDisabledIndex, 1);
|
|
const option = states.cachedOptions[lastNotDisabledIndex];
|
|
states.cachedOptions.splice(lastNotDisabledIndex, 1);
|
|
removeNewOption(option);
|
|
update(selected);
|
|
emit("remove-tag", removeTagValue);
|
|
}
|
|
};
|
|
const handleClear = () => {
|
|
let emptyValue;
|
|
if (isArray$1(props.modelValue)) {
|
|
emptyValue = [];
|
|
} else {
|
|
emptyValue = valueOnClear.value;
|
|
}
|
|
if (props.multiple) {
|
|
states.cachedOptions = [];
|
|
} else {
|
|
states.selectedLabel = "";
|
|
}
|
|
expanded.value = false;
|
|
update(emptyValue);
|
|
emit("clear");
|
|
clearAllNewOption();
|
|
focus();
|
|
};
|
|
const onKeyboardNavigate = (direction, hoveringIndex = void 0) => {
|
|
const options = filteredOptions.value;
|
|
if (!["forward", "backward"].includes(direction) || selectDisabled.value || options.length <= 0 || optionsAllDisabled.value || isComposing.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 (getDisabled(option) || option.type === "Group") {
|
|
return onKeyboardNavigate(direction, newIndex);
|
|
} else {
|
|
states.hoveringIndex = newIndex;
|
|
scrollToItem(newIndex);
|
|
}
|
|
};
|
|
const onKeyboardSelect = () => {
|
|
if (!expanded.value) {
|
|
return toggleMenu();
|
|
} else if (~states.hoveringIndex && filteredOptions.value[states.hoveringIndex]) {
|
|
onSelect(filteredOptions.value[states.hoveringIndex]);
|
|
}
|
|
};
|
|
const onHoverOption = (idx) => {
|
|
states.hoveringIndex = idx != null ? idx : -1;
|
|
};
|
|
const updateHoveringIndex = () => {
|
|
if (!props.multiple) {
|
|
states.hoveringIndex = filteredOptions.value.findIndex((item) => {
|
|
return getValueKey(item) === getValueKey(props.modelValue);
|
|
});
|
|
} else {
|
|
states.hoveringIndex = filteredOptions.value.findIndex((item) => props.modelValue.some((modelValue) => getValueKey(modelValue) === getValueKey(item)));
|
|
}
|
|
};
|
|
const onInput = (event) => {
|
|
states.inputValue = event.target.value;
|
|
if (props.remote) {
|
|
debouncedOnInputChange();
|
|
} else {
|
|
return onInputChange();
|
|
}
|
|
};
|
|
const handleClickOutside = () => {
|
|
expanded.value = false;
|
|
isFocused.value && blur();
|
|
};
|
|
const handleMenuEnter = () => {
|
|
states.isBeforeHide = false;
|
|
return nextTick(() => {
|
|
if (~indexRef.value) {
|
|
scrollToItem(states.hoveringIndex);
|
|
}
|
|
});
|
|
};
|
|
const scrollToItem = (index) => {
|
|
menuRef.value.scrollToItem(index);
|
|
};
|
|
const getOption = (value, cachedOptions) => {
|
|
const selectValue = getValueKey(value);
|
|
if (allOptionsValueMap.value.has(selectValue)) {
|
|
const { option } = allOptionsValueMap.value.get(selectValue);
|
|
return option;
|
|
}
|
|
if (cachedOptions && cachedOptions.length) {
|
|
const option = cachedOptions.find((option2) => getValueKey(getValue(option2)) === selectValue);
|
|
if (option) {
|
|
return option;
|
|
}
|
|
}
|
|
return {
|
|
[aliasProps.value.value]: value,
|
|
[aliasProps.value.label]: value
|
|
};
|
|
};
|
|
const initStates = () => {
|
|
if (props.multiple) {
|
|
if (props.modelValue.length > 0) {
|
|
const cachedOptions = states.cachedOptions.slice();
|
|
states.cachedOptions.length = 0;
|
|
states.previousValue = props.modelValue.toString();
|
|
for (const value of props.modelValue) {
|
|
const option = getOption(value, cachedOptions);
|
|
states.cachedOptions.push(option);
|
|
}
|
|
} 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(getValue(option)) === getValueKey(props.modelValue));
|
|
if (~selectedItemIndex) {
|
|
states.selectedLabel = getLabel(options[selectedItemIndex]);
|
|
} else {
|
|
states.selectedLabel = getValueKey(props.modelValue);
|
|
}
|
|
} else {
|
|
states.selectedLabel = "";
|
|
states.previousValue = void 0;
|
|
}
|
|
}
|
|
clearAllNewOption();
|
|
calculatePopperSize();
|
|
};
|
|
watch(expanded, (val) => {
|
|
if (val) {
|
|
handleQueryChange("");
|
|
} else {
|
|
states.inputValue = "";
|
|
states.previousQuery = null;
|
|
states.isBeforeHide = true;
|
|
createNewOption("");
|
|
}
|
|
emit("visible-change", val);
|
|
});
|
|
watch(() => props.modelValue, (val, oldVal) => {
|
|
var _a;
|
|
if (!val || props.multiple && val.toString() !== states.previousValue || !props.multiple && getValueKey(val) !== getValueKey(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
|
|
});
|
|
watch(() => props.options, () => {
|
|
const input = inputRef.value;
|
|
if (!input || input && document.activeElement !== input) {
|
|
initStates();
|
|
}
|
|
}, {
|
|
deep: true,
|
|
flush: "post"
|
|
});
|
|
watch(() => filteredOptions.value, () => {
|
|
return menuRef.value && nextTick(menuRef.value.resetScrollTop);
|
|
});
|
|
watchEffect(() => {
|
|
if (states.isBeforeHide)
|
|
return;
|
|
updateOptions();
|
|
});
|
|
watchEffect(() => {
|
|
const { valueKey, options } = props;
|
|
const duplicateValue = /* @__PURE__ */ new Map();
|
|
for (const item of options) {
|
|
const optionValue = getValue(item);
|
|
let v = optionValue;
|
|
if (isObject$1(v)) {
|
|
v = get(optionValue, valueKey);
|
|
}
|
|
if (duplicateValue.get(v)) {
|
|
break;
|
|
} else {
|
|
duplicateValue.set(v, true);
|
|
}
|
|
}
|
|
});
|
|
onMounted(() => {
|
|
initStates();
|
|
});
|
|
useResizeObserver(selectRef, handleResize);
|
|
useResizeObserver(selectionRef, resetSelectionWidth);
|
|
useResizeObserver(calculatorRef, resetCalculatorWidth);
|
|
useResizeObserver(menuRef, updateTooltip);
|
|
useResizeObserver(wrapperRef, updateTooltip);
|
|
useResizeObserver(tagMenuRef, updateTagTooltip);
|
|
useResizeObserver(collapseItemRef, resetCollapseItemWidth);
|
|
return {
|
|
inputId,
|
|
collapseTagSize,
|
|
currentPlaceholder,
|
|
expanded,
|
|
emptyText,
|
|
popupHeight,
|
|
debounce: debounce$1,
|
|
allOptions,
|
|
filteredOptions,
|
|
iconComponent,
|
|
iconReverse,
|
|
tagStyle,
|
|
collapseTagStyle,
|
|
inputStyle,
|
|
popperSize,
|
|
dropdownMenuVisible,
|
|
hasModelValue,
|
|
shouldShowPlaceholder,
|
|
selectDisabled,
|
|
selectSize,
|
|
showClearBtn,
|
|
states,
|
|
isFocused,
|
|
nsSelect,
|
|
nsInput,
|
|
calculatorRef,
|
|
inputRef,
|
|
menuRef,
|
|
tagMenuRef,
|
|
tooltipRef,
|
|
tagTooltipRef,
|
|
selectRef,
|
|
wrapperRef,
|
|
selectionRef,
|
|
prefixRef,
|
|
suffixRef,
|
|
collapseItemRef,
|
|
popperRef,
|
|
validateState,
|
|
validateIcon,
|
|
showTagList,
|
|
collapseTagList,
|
|
debouncedOnInputChange,
|
|
deleteTag,
|
|
getLabel,
|
|
getValue,
|
|
getDisabled,
|
|
getValueKey,
|
|
handleClear,
|
|
handleClickOutside,
|
|
handleDel,
|
|
handleEsc,
|
|
focus,
|
|
blur,
|
|
handleMenuEnter,
|
|
handleResize,
|
|
resetSelectionWidth,
|
|
resetCalculatorWidth,
|
|
updateTooltip,
|
|
updateTagTooltip,
|
|
updateOptions,
|
|
toggleMenu,
|
|
scrollTo: scrollToItem,
|
|
onInput,
|
|
onKeyboardNavigate,
|
|
onKeyboardSelect,
|
|
onSelect,
|
|
onHover: onHoverOption,
|
|
handleCompositionStart,
|
|
handleCompositionEnd,
|
|
handleCompositionUpdate
|
|
};
|
|
};
|
|
var useSelect$2 = useSelect$1;
|
|
|
|
const _sfc_main$L = defineComponent({
|
|
name: "ElSelectV2",
|
|
components: {
|
|
ElSelectMenu,
|
|
ElTag,
|
|
ElTooltip,
|
|
ElIcon
|
|
},
|
|
directives: { ClickOutside },
|
|
props: SelectProps,
|
|
emits: selectEmits,
|
|
setup(props, { emit }) {
|
|
const modelValue = computed(() => {
|
|
const { modelValue: rawModelValue, multiple } = props;
|
|
const fallback = multiple ? [] : void 0;
|
|
if (isArray$1(rawModelValue)) {
|
|
return multiple ? rawModelValue : fallback;
|
|
}
|
|
return multiple ? fallback : rawModelValue;
|
|
});
|
|
const API = useSelect$2(reactive({
|
|
...toRefs(props),
|
|
modelValue
|
|
}), emit);
|
|
provide(selectV2InjectionKey, {
|
|
props: reactive({
|
|
...toRefs(props),
|
|
height: API.popupHeight,
|
|
modelValue
|
|
}),
|
|
expanded: API.expanded,
|
|
tooltipRef: API.tooltipRef,
|
|
onSelect: API.onSelect,
|
|
onHover: API.onHover,
|
|
onKeyboardNavigate: API.onKeyboardNavigate,
|
|
onKeyboardSelect: API.onKeyboardSelect
|
|
});
|
|
return {
|
|
...API,
|
|
modelValue
|
|
};
|
|
}
|
|
});
|
|
function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
|
|
const _component_el_tag = resolveComponent("el-tag");
|
|
const _component_el_tooltip = resolveComponent("el-tooltip");
|
|
const _component_el_icon = resolveComponent("el-icon");
|
|
const _component_el_select_menu = resolveComponent("el-select-menu");
|
|
const _directive_click_outside = resolveDirective("click-outside");
|
|
return withDirectives((openBlock(), createElementBlock("div", {
|
|
ref: "selectRef",
|
|
class: normalizeClass([_ctx.nsSelect.b(), _ctx.nsSelect.m(_ctx.selectSize)]),
|
|
onMouseenter: ($event) => _ctx.states.inputHovering = true,
|
|
onMouseleave: ($event) => _ctx.states.inputHovering = false
|
|
}, [
|
|
createVNode(_component_el_tooltip, {
|
|
ref: "tooltipRef",
|
|
visible: _ctx.dropdownMenuVisible,
|
|
teleported: _ctx.teleported,
|
|
"popper-class": [_ctx.nsSelect.e("popper"), _ctx.popperClass],
|
|
"gpu-acceleration": false,
|
|
"stop-popper-mouse-event": false,
|
|
"popper-options": _ctx.popperOptions,
|
|
"fallback-placements": _ctx.fallbackPlacements,
|
|
effect: _ctx.effect,
|
|
placement: _ctx.placement,
|
|
pure: "",
|
|
transition: `${_ctx.nsSelect.namespace.value}-zoom-in-top`,
|
|
trigger: "click",
|
|
persistent: _ctx.persistent,
|
|
onBeforeShow: _ctx.handleMenuEnter,
|
|
onHide: ($event) => _ctx.states.isBeforeHide = false
|
|
}, {
|
|
default: withCtx(() => [
|
|
createElementVNode("div", {
|
|
ref: "wrapperRef",
|
|
class: normalizeClass([
|
|
_ctx.nsSelect.e("wrapper"),
|
|
_ctx.nsSelect.is("focused", _ctx.isFocused),
|
|
_ctx.nsSelect.is("hovering", _ctx.states.inputHovering),
|
|
_ctx.nsSelect.is("filterable", _ctx.filterable),
|
|
_ctx.nsSelect.is("disabled", _ctx.selectDisabled)
|
|
]),
|
|
onClick: withModifiers(_ctx.toggleMenu, ["prevent"])
|
|
}, [
|
|
_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
ref: "prefixRef",
|
|
class: normalizeClass(_ctx.nsSelect.e("prefix"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "prefix")
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", {
|
|
ref: "selectionRef",
|
|
class: normalizeClass([
|
|
_ctx.nsSelect.e("selection"),
|
|
_ctx.nsSelect.is("near", _ctx.multiple && !_ctx.$slots.prefix && !!_ctx.modelValue.length)
|
|
])
|
|
}, [
|
|
_ctx.multiple ? renderSlot(_ctx.$slots, "tag", { key: 0 }, () => [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.showTagList, (item) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
key: _ctx.getValueKey(_ctx.getValue(item)),
|
|
class: normalizeClass(_ctx.nsSelect.e("selected-item"))
|
|
}, [
|
|
createVNode(_component_el_tag, {
|
|
closable: !_ctx.selectDisabled && !_ctx.getDisabled(item),
|
|
size: _ctx.collapseTagSize,
|
|
type: _ctx.tagType,
|
|
effect: _ctx.tagEffect,
|
|
"disable-transitions": "",
|
|
style: normalizeStyle(_ctx.tagStyle),
|
|
onClose: ($event) => _ctx.deleteTag($event, item)
|
|
}, {
|
|
default: withCtx(() => [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(_ctx.nsSelect.e("tags-text"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "label", {
|
|
label: _ctx.getLabel(item),
|
|
value: _ctx.getValue(item)
|
|
}, () => [
|
|
createTextVNode(toDisplayString(_ctx.getLabel(item)), 1)
|
|
])
|
|
], 2)
|
|
]),
|
|
_: 2
|
|
}, 1032, ["closable", "size", "type", "effect", "style", "onClose"])
|
|
], 2);
|
|
}), 128)),
|
|
_ctx.collapseTags && _ctx.modelValue.length > _ctx.maxCollapseTags ? (openBlock(), createBlock(_component_el_tooltip, {
|
|
key: 0,
|
|
ref: "tagTooltipRef",
|
|
disabled: _ctx.dropdownMenuVisible || !_ctx.collapseTagsTooltip,
|
|
"fallback-placements": ["bottom", "top", "right", "left"],
|
|
effect: _ctx.effect,
|
|
placement: "bottom",
|
|
teleported: _ctx.teleported
|
|
}, {
|
|
default: withCtx(() => [
|
|
createElementVNode("div", {
|
|
ref: "collapseItemRef",
|
|
class: normalizeClass(_ctx.nsSelect.e("selected-item"))
|
|
}, [
|
|
createVNode(_component_el_tag, {
|
|
closable: false,
|
|
size: _ctx.collapseTagSize,
|
|
type: _ctx.tagType,
|
|
effect: _ctx.tagEffect,
|
|
style: normalizeStyle(_ctx.collapseTagStyle),
|
|
"disable-transitions": ""
|
|
}, {
|
|
default: withCtx(() => [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(_ctx.nsSelect.e("tags-text"))
|
|
}, " + " + toDisplayString(_ctx.modelValue.length - _ctx.maxCollapseTags), 3)
|
|
]),
|
|
_: 1
|
|
}, 8, ["size", "type", "effect", "style"])
|
|
], 2)
|
|
]),
|
|
content: withCtx(() => [
|
|
createElementVNode("div", {
|
|
ref: "tagMenuRef",
|
|
class: normalizeClass(_ctx.nsSelect.e("selection"))
|
|
}, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.collapseTagList, (selected) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
key: _ctx.getValueKey(_ctx.getValue(selected)),
|
|
class: normalizeClass(_ctx.nsSelect.e("selected-item"))
|
|
}, [
|
|
createVNode(_component_el_tag, {
|
|
class: "in-tooltip",
|
|
closable: !_ctx.selectDisabled && !_ctx.getDisabled(selected),
|
|
size: _ctx.collapseTagSize,
|
|
type: _ctx.tagType,
|
|
effect: _ctx.tagEffect,
|
|
"disable-transitions": "",
|
|
onClose: ($event) => _ctx.deleteTag($event, selected)
|
|
}, {
|
|
default: withCtx(() => [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(_ctx.nsSelect.e("tags-text"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "label", {
|
|
label: _ctx.getLabel(selected),
|
|
value: _ctx.getValue(selected)
|
|
}, () => [
|
|
createTextVNode(toDisplayString(_ctx.getLabel(selected)), 1)
|
|
])
|
|
], 2)
|
|
]),
|
|
_: 2
|
|
}, 1032, ["closable", "size", "type", "effect", "onClose"])
|
|
], 2);
|
|
}), 128))
|
|
], 2)
|
|
]),
|
|
_: 3
|
|
}, 8, ["disabled", "effect", "teleported"])) : createCommentVNode("v-if", true)
|
|
]) : createCommentVNode("v-if", true),
|
|
!_ctx.selectDisabled ? (openBlock(), createElementBlock("div", {
|
|
key: 1,
|
|
class: normalizeClass([
|
|
_ctx.nsSelect.e("selected-item"),
|
|
_ctx.nsSelect.e("input-wrapper"),
|
|
_ctx.nsSelect.is("hidden", !_ctx.filterable)
|
|
])
|
|
}, [
|
|
withDirectives(createElementVNode("input", {
|
|
id: _ctx.inputId,
|
|
ref: "inputRef",
|
|
"onUpdate:modelValue": ($event) => _ctx.states.inputValue = $event,
|
|
style: normalizeStyle(_ctx.inputStyle),
|
|
autocomplete: _ctx.autocomplete,
|
|
"aria-autocomplete": "list",
|
|
"aria-haspopup": "listbox",
|
|
autocapitalize: "off",
|
|
"aria-expanded": _ctx.expanded,
|
|
"aria-label": _ctx.ariaLabel,
|
|
class: normalizeClass([_ctx.nsSelect.e("input"), _ctx.nsSelect.is(_ctx.selectSize)]),
|
|
disabled: _ctx.selectDisabled,
|
|
role: "combobox",
|
|
readonly: !_ctx.filterable,
|
|
spellcheck: "false",
|
|
type: "text",
|
|
name: _ctx.name,
|
|
onInput: _ctx.onInput,
|
|
onCompositionstart: _ctx.handleCompositionStart,
|
|
onCompositionupdate: _ctx.handleCompositionUpdate,
|
|
onCompositionend: _ctx.handleCompositionEnd,
|
|
onKeydown: [
|
|
withKeys(withModifiers(($event) => _ctx.onKeyboardNavigate("backward"), ["stop", "prevent"]), ["up"]),
|
|
withKeys(withModifiers(($event) => _ctx.onKeyboardNavigate("forward"), ["stop", "prevent"]), ["down"]),
|
|
withKeys(withModifiers(_ctx.onKeyboardSelect, ["stop", "prevent"]), ["enter"]),
|
|
withKeys(withModifiers(_ctx.handleEsc, ["stop", "prevent"]), ["esc"]),
|
|
withKeys(withModifiers(_ctx.handleDel, ["stop"]), ["delete"])
|
|
],
|
|
onClick: withModifiers(_ctx.toggleMenu, ["stop"])
|
|
}, null, 46, ["id", "onUpdate:modelValue", "autocomplete", "aria-expanded", "aria-label", "disabled", "readonly", "name", "onInput", "onCompositionstart", "onCompositionupdate", "onCompositionend", "onKeydown", "onClick"]), [
|
|
[vModelText, _ctx.states.inputValue]
|
|
]),
|
|
_ctx.filterable ? (openBlock(), createElementBlock("span", {
|
|
key: 0,
|
|
ref: "calculatorRef",
|
|
"aria-hidden": "true",
|
|
class: normalizeClass(_ctx.nsSelect.e("input-calculator")),
|
|
textContent: toDisplayString(_ctx.states.inputValue)
|
|
}, null, 10, ["textContent"])) : createCommentVNode("v-if", true)
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
_ctx.shouldShowPlaceholder ? (openBlock(), createElementBlock("div", {
|
|
key: 2,
|
|
class: normalizeClass([
|
|
_ctx.nsSelect.e("selected-item"),
|
|
_ctx.nsSelect.e("placeholder"),
|
|
_ctx.nsSelect.is("transparent", !_ctx.hasModelValue || _ctx.expanded && !_ctx.states.inputValue)
|
|
])
|
|
}, [
|
|
_ctx.hasModelValue ? renderSlot(_ctx.$slots, "label", {
|
|
key: 0,
|
|
label: _ctx.currentPlaceholder,
|
|
value: _ctx.modelValue
|
|
}, () => [
|
|
createElementVNode("span", null, toDisplayString(_ctx.currentPlaceholder), 1)
|
|
]) : (openBlock(), createElementBlock("span", { key: 1 }, toDisplayString(_ctx.currentPlaceholder), 1))
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
], 2),
|
|
createElementVNode("div", {
|
|
ref: "suffixRef",
|
|
class: normalizeClass(_ctx.nsSelect.e("suffix"))
|
|
}, [
|
|
_ctx.iconComponent ? withDirectives((openBlock(), createBlock(_component_el_icon, {
|
|
key: 0,
|
|
class: normalizeClass([_ctx.nsSelect.e("caret"), _ctx.nsInput.e("icon"), _ctx.iconReverse])
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.iconComponent)))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])), [
|
|
[vShow, !_ctx.showClearBtn]
|
|
]) : createCommentVNode("v-if", true),
|
|
_ctx.showClearBtn && _ctx.clearIcon ? (openBlock(), createBlock(_component_el_icon, {
|
|
key: 1,
|
|
class: normalizeClass([
|
|
_ctx.nsSelect.e("caret"),
|
|
_ctx.nsInput.e("icon"),
|
|
_ctx.nsSelect.e("clear")
|
|
]),
|
|
onClick: withModifiers(_ctx.handleClear, ["prevent", "stop"])
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.clearIcon)))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class", "onClick"])) : createCommentVNode("v-if", true),
|
|
_ctx.validateState && _ctx.validateIcon ? (openBlock(), createBlock(_component_el_icon, {
|
|
key: 2,
|
|
class: normalizeClass([_ctx.nsInput.e("icon"), _ctx.nsInput.e("validateIcon")])
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.validateIcon)))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : createCommentVNode("v-if", true)
|
|
], 2)
|
|
], 10, ["onClick"])
|
|
]),
|
|
content: withCtx(() => [
|
|
createVNode(_component_el_select_menu, {
|
|
ref: "menuRef",
|
|
data: _ctx.filteredOptions,
|
|
width: _ctx.popperSize,
|
|
"hovering-index": _ctx.states.hoveringIndex,
|
|
"scrollbar-always-on": _ctx.scrollbarAlwaysOn
|
|
}, createSlots({
|
|
default: withCtx((scope) => [
|
|
renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(scope)))
|
|
]),
|
|
_: 2
|
|
}, [
|
|
_ctx.$slots.header ? {
|
|
name: "header",
|
|
fn: withCtx(() => [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(_ctx.nsSelect.be("dropdown", "header"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "header")
|
|
], 2)
|
|
])
|
|
} : void 0,
|
|
_ctx.$slots.loading && _ctx.loading ? {
|
|
name: "loading",
|
|
fn: withCtx(() => [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(_ctx.nsSelect.be("dropdown", "loading"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "loading")
|
|
], 2)
|
|
])
|
|
} : _ctx.loading || _ctx.filteredOptions.length === 0 ? {
|
|
name: "empty",
|
|
fn: withCtx(() => [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(_ctx.nsSelect.be("dropdown", "empty"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "empty", {}, () => [
|
|
createElementVNode("span", null, toDisplayString(_ctx.emptyText), 1)
|
|
])
|
|
], 2)
|
|
])
|
|
} : void 0,
|
|
_ctx.$slots.footer ? {
|
|
name: "footer",
|
|
fn: withCtx(() => [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(_ctx.nsSelect.be("dropdown", "footer"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "footer")
|
|
], 2)
|
|
])
|
|
} : void 0
|
|
]), 1032, ["data", "width", "hovering-index", "scrollbar-always-on"])
|
|
]),
|
|
_: 3
|
|
}, 8, ["visible", "teleported", "popper-class", "popper-options", "fallback-placements", "effect", "placement", "transition", "persistent", "onBeforeShow", "onHide"])
|
|
], 42, ["onMouseenter", "onMouseleave"])), [
|
|
[_directive_click_outside, _ctx.handleClickOutside, _ctx.popperRef]
|
|
]);
|
|
}
|
|
var Select = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["render", _sfc_render$5], ["__file", "select.vue"]]);
|
|
|
|
const ElSelectV2 = withInstall(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__$D = defineComponent({
|
|
name: "ElSkeletonItem"
|
|
});
|
|
const _sfc_main$K = /* @__PURE__ */ defineComponent({
|
|
...__default__$D,
|
|
props: skeletonItemProps,
|
|
setup(__props) {
|
|
const ns = useNamespace("skeleton");
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass([unref(ns).e("item"), unref(ns).e(_ctx.variant)])
|
|
}, [
|
|
_ctx.variant === "image" ? (openBlock(), createBlock(unref(picture_filled_default), { key: 0 })) : createCommentVNode("v-if", true)
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var SkeletonItem = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["__file", "skeleton-item.vue"]]);
|
|
|
|
const __default__$C = defineComponent({
|
|
name: "ElSkeleton"
|
|
});
|
|
const _sfc_main$J = /* @__PURE__ */ defineComponent({
|
|
...__default__$C,
|
|
props: skeletonProps,
|
|
setup(__props, { expose }) {
|
|
const props = __props;
|
|
const ns = useNamespace("skeleton");
|
|
const uiLoading = useThrottleRender(toRef(props, "loading"), props.throttle);
|
|
expose({
|
|
uiLoading
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return unref(uiLoading) ? (openBlock(), createElementBlock("div", mergeProps({
|
|
key: 0,
|
|
class: [unref(ns).b(), unref(ns).is("animated", _ctx.animated)]
|
|
}, _ctx.$attrs), [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.count, (i) => {
|
|
return openBlock(), createElementBlock(Fragment, { key: i }, [
|
|
_ctx.loading ? renderSlot(_ctx.$slots, "template", { key: i }, () => [
|
|
createVNode(SkeletonItem, {
|
|
class: normalizeClass(unref(ns).is("first")),
|
|
variant: "p"
|
|
}, null, 8, ["class"]),
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.rows, (item) => {
|
|
return openBlock(), createBlock(SkeletonItem, {
|
|
key: item,
|
|
class: normalizeClass([
|
|
unref(ns).e("paragraph"),
|
|
unref(ns).is("last", item === _ctx.rows && _ctx.rows > 1)
|
|
]),
|
|
variant: "p"
|
|
}, null, 8, ["class"]);
|
|
}), 128))
|
|
]) : createCommentVNode("v-if", true)
|
|
], 64);
|
|
}), 128))
|
|
], 16)) : renderSlot(_ctx.$slots, "default", normalizeProps(mergeProps({ key: 1 }, _ctx.$attrs)));
|
|
};
|
|
}
|
|
});
|
|
var Skeleton = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__file", "skeleton.vue"]]);
|
|
|
|
const ElSkeleton = withInstall(Skeleton, {
|
|
SkeletonItem
|
|
});
|
|
const ElSkeletonItem = withNoopInstall(SkeletonItem);
|
|
|
|
const sliderContextKey = Symbol("sliderContextKey");
|
|
|
|
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
|
|
},
|
|
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
|
|
},
|
|
...useAriaProps(["ariaLabel"])
|
|
});
|
|
const isValidValue$1 = (value) => isNumber(value) || isArray$1(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 = ref();
|
|
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 nextTick();
|
|
resetSize();
|
|
});
|
|
return {
|
|
sliderWrapper
|
|
};
|
|
};
|
|
|
|
const useMarks = (props) => {
|
|
return 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 = shallowRef();
|
|
const firstButton = ref();
|
|
const secondButton = ref();
|
|
const buttonRefs = {
|
|
firstButton,
|
|
secondButton
|
|
};
|
|
const sliderDisabled = computed(() => {
|
|
return props.disabled || (elForm == null ? void 0 : elForm.disabled) || false;
|
|
});
|
|
const minValue = computed(() => {
|
|
return Math.min(initData.firstValue, initData.secondValue);
|
|
});
|
|
const maxValue = computed(() => {
|
|
return Math.max(initData.firstValue, initData.secondValue);
|
|
});
|
|
const barSize = computed(() => {
|
|
return props.range ? `${100 * (maxValue.value - minValue.value) / (props.max - props.min)}%` : `${100 * (initData.firstValue - props.min) / (props.max - props.min)}%`;
|
|
});
|
|
const barStart = computed(() => {
|
|
return props.range ? `${100 * (minValue.value - props.min) / (props.max - props.min)}%` : "0%";
|
|
});
|
|
const runwayStyle = computed(() => {
|
|
return props.vertical ? { height: props.height } : {};
|
|
});
|
|
const barStyle = 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 != null ? firstValue : props.min;
|
|
_emit(props.range ? [minValue.value, maxValue.value] : firstValue != null ? firstValue : props.min);
|
|
};
|
|
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 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 nextTick();
|
|
buttonRef.value.onButtonDown(event);
|
|
}
|
|
};
|
|
const onSliderClick = (event) => {
|
|
const buttonRef = handleSliderPointerEvent(event);
|
|
if (buttonRef) {
|
|
emitChange();
|
|
}
|
|
};
|
|
const onSliderMarkerDown = (position) => {
|
|
if (sliderDisabled.value || initData.dragging)
|
|
return;
|
|
setPosition(position);
|
|
};
|
|
return {
|
|
elFormItem,
|
|
slider,
|
|
firstButton,
|
|
secondButton,
|
|
sliderDisabled,
|
|
minValue,
|
|
maxValue,
|
|
runwayStyle,
|
|
barStyle,
|
|
resetSize,
|
|
setPosition,
|
|
emitChange,
|
|
onSliderWrapperPrevent,
|
|
onSliderClick,
|
|
onSliderDown,
|
|
onSliderMarkerDown,
|
|
setFirstValue,
|
|
setSecondValue
|
|
};
|
|
};
|
|
|
|
const { left, down, right, up, home, end, pageUp, pageDown } = EVENT_CODE;
|
|
const useTooltip = (props, formatTooltip, showTooltip) => {
|
|
const tooltip = ref();
|
|
const tooltipVisible = ref(false);
|
|
const enableFormat = computed(() => {
|
|
return formatTooltip.value instanceof Function;
|
|
});
|
|
const formatValue = 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
|
|
} = inject(sliderContextKey);
|
|
const { tooltip, tooltipVisible, formatValue, displayTooltip, hideTooltip } = useTooltip(props, formatTooltip, showTooltip);
|
|
const button = ref();
|
|
const currentPosition = computed(() => {
|
|
return `${(props.modelValue - min.value) / (max.value - min.value) * 100}%`;
|
|
});
|
|
const wrapperStyle = 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 nextTick();
|
|
initData.dragging && displayTooltip();
|
|
tooltip.value.updatePopper();
|
|
};
|
|
watch(() => initData.dragging, (val) => {
|
|
updateDragging(val);
|
|
});
|
|
useEventListener(button, "touchstart", onButtonDown, { passive: false });
|
|
return {
|
|
disabled,
|
|
button,
|
|
tooltip,
|
|
tooltipVisible,
|
|
showTooltip,
|
|
wrapperStyle,
|
|
formatValue,
|
|
handleMouseEnter,
|
|
handleMouseLeave,
|
|
onButtonDown,
|
|
onKeyDown,
|
|
setPosition
|
|
};
|
|
};
|
|
|
|
const useStops = (props, initData, minValue, maxValue) => {
|
|
const stops = 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.");
|
|
}
|
|
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();
|
|
watch(() => initData.dragging, (val) => {
|
|
if (!val) {
|
|
setValues();
|
|
}
|
|
});
|
|
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
|
|
});
|
|
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 __default__$B = defineComponent({
|
|
name: "ElSliderButton"
|
|
});
|
|
const _sfc_main$I = /* @__PURE__ */ defineComponent({
|
|
...__default__$B,
|
|
props: sliderButtonProps,
|
|
emits: sliderButtonEmits,
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const ns = useNamespace("slider");
|
|
const initData = 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 } = toRefs(initData);
|
|
expose({
|
|
onButtonDown,
|
|
onKeyDown,
|
|
setPosition,
|
|
hovering,
|
|
dragging
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
ref_key: "button",
|
|
ref: button,
|
|
class: normalizeClass([unref(ns).e("button-wrapper"), { hover: unref(hovering), dragging: unref(dragging) }]),
|
|
style: normalizeStyle(unref(wrapperStyle)),
|
|
tabindex: unref(disabled) ? -1 : 0,
|
|
onMouseenter: unref(handleMouseEnter),
|
|
onMouseleave: unref(handleMouseLeave),
|
|
onMousedown: unref(onButtonDown),
|
|
onFocus: unref(handleMouseEnter),
|
|
onBlur: unref(handleMouseLeave),
|
|
onKeydown: unref(onKeyDown)
|
|
}, [
|
|
createVNode(unref(ElTooltip), {
|
|
ref_key: "tooltip",
|
|
ref: tooltip,
|
|
visible: unref(tooltipVisible),
|
|
placement: _ctx.placement,
|
|
"fallback-placements": ["top", "bottom", "right", "left"],
|
|
"stop-popper-mouse-event": false,
|
|
"popper-class": _ctx.tooltipClass,
|
|
disabled: !unref(showTooltip),
|
|
persistent: ""
|
|
}, {
|
|
content: withCtx(() => [
|
|
createElementVNode("span", null, toDisplayString(unref(formatValue)), 1)
|
|
]),
|
|
default: withCtx(() => [
|
|
createElementVNode("div", {
|
|
class: normalizeClass([unref(ns).e("button"), { hover: unref(hovering), dragging: unref(dragging) }])
|
|
}, null, 2)
|
|
]),
|
|
_: 1
|
|
}, 8, ["visible", "placement", "popper-class", "disabled"])
|
|
], 46, ["tabindex", "onMouseenter", "onMouseleave", "onMousedown", "onFocus", "onBlur", "onKeydown"]);
|
|
};
|
|
}
|
|
});
|
|
var SliderButton = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__file", "button.vue"]]);
|
|
|
|
const sliderMarkerProps = buildProps({
|
|
mark: {
|
|
type: definePropType([String, Object]),
|
|
default: void 0
|
|
}
|
|
});
|
|
var SliderMarker = defineComponent({
|
|
name: "ElSliderMarker",
|
|
props: sliderMarkerProps,
|
|
setup(props) {
|
|
const ns = useNamespace("slider");
|
|
const label = computed(() => {
|
|
return isString$1(props.mark) ? props.mark : props.mark.label;
|
|
});
|
|
const style = computed(() => isString$1(props.mark) ? void 0 : props.mark.style);
|
|
return () => h$1("div", {
|
|
class: ns.e("marks-text"),
|
|
style: style.value
|
|
}, label.value);
|
|
}
|
|
});
|
|
|
|
const __default__$A = defineComponent({
|
|
name: "ElSlider"
|
|
});
|
|
const _sfc_main$H = /* @__PURE__ */ defineComponent({
|
|
...__default__$A,
|
|
props: sliderProps,
|
|
emits: sliderEmits,
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const ns = useNamespace("slider");
|
|
const { t } = useLocale();
|
|
const initData = 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,
|
|
onSliderMarkerDown,
|
|
setFirstValue,
|
|
setSecondValue
|
|
} = useSlide(props, initData, emit);
|
|
const { stops, getStopStyle } = useStops(props, initData, minValue, maxValue);
|
|
const { inputId, isLabeledByFormItem } = useFormItemInputId(props, {
|
|
formItemContext: elFormItem
|
|
});
|
|
const sliderWrapperSize = useFormSize();
|
|
const sliderInputSize = computed(() => props.inputSize || sliderWrapperSize.value);
|
|
const groupLabel = computed(() => {
|
|
return props.ariaLabel || t("el.slider.defaultLabel", {
|
|
min: props.min,
|
|
max: props.max
|
|
});
|
|
});
|
|
const firstButtonLabel = computed(() => {
|
|
if (props.range) {
|
|
return props.rangeStartLabel || t("el.slider.defaultRangeStartLabel");
|
|
} else {
|
|
return groupLabel.value;
|
|
}
|
|
});
|
|
const firstValueText = computed(() => {
|
|
return props.formatValueText ? props.formatValueText(firstValue.value) : `${firstValue.value}`;
|
|
});
|
|
const secondButtonLabel = computed(() => {
|
|
return props.rangeEndLabel || t("el.slider.defaultRangeEndLabel");
|
|
});
|
|
const secondValueText = computed(() => {
|
|
return props.formatValueText ? props.formatValueText(secondValue.value) : `${secondValue.value}`;
|
|
});
|
|
const sliderKls = 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 = 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 } = toRefs(initData);
|
|
const updateDragging = (val) => {
|
|
initData.dragging = val;
|
|
};
|
|
useEventListener(sliderWrapper, "touchstart", onSliderWrapperPrevent, {
|
|
passive: false
|
|
});
|
|
useEventListener(sliderWrapper, "touchmove", onSliderWrapperPrevent, {
|
|
passive: false
|
|
});
|
|
provide(sliderContextKey, {
|
|
...toRefs(props),
|
|
sliderSize,
|
|
disabled: sliderDisabled,
|
|
precision,
|
|
emitChange,
|
|
resetSize,
|
|
updateDragging
|
|
});
|
|
expose({
|
|
onSliderClick
|
|
});
|
|
return (_ctx, _cache) => {
|
|
var _a, _b;
|
|
return openBlock(), createElementBlock("div", {
|
|
id: _ctx.range ? unref(inputId) : void 0,
|
|
ref_key: "sliderWrapper",
|
|
ref: sliderWrapper,
|
|
class: normalizeClass(unref(sliderKls)),
|
|
role: _ctx.range ? "group" : void 0,
|
|
"aria-label": _ctx.range && !unref(isLabeledByFormItem) ? unref(groupLabel) : void 0,
|
|
"aria-labelledby": _ctx.range && unref(isLabeledByFormItem) ? (_a = unref(elFormItem)) == null ? void 0 : _a.labelId : void 0
|
|
}, [
|
|
createElementVNode("div", {
|
|
ref_key: "slider",
|
|
ref: slider,
|
|
class: normalizeClass([
|
|
unref(ns).e("runway"),
|
|
{ "show-input": _ctx.showInput && !_ctx.range },
|
|
unref(ns).is("disabled", unref(sliderDisabled))
|
|
]),
|
|
style: normalizeStyle(unref(runwayStyle)),
|
|
onMousedown: unref(onSliderDown),
|
|
onTouchstartPassive: unref(onSliderDown)
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("bar")),
|
|
style: normalizeStyle(unref(barStyle))
|
|
}, null, 6),
|
|
createVNode(SliderButton, {
|
|
id: !_ctx.range ? unref(inputId) : void 0,
|
|
ref_key: "firstButton",
|
|
ref: firstButton,
|
|
"model-value": unref(firstValue),
|
|
vertical: _ctx.vertical,
|
|
"tooltip-class": _ctx.tooltipClass,
|
|
placement: _ctx.placement,
|
|
role: "slider",
|
|
"aria-label": _ctx.range || !unref(isLabeledByFormItem) ? unref(firstButtonLabel) : void 0,
|
|
"aria-labelledby": !_ctx.range && unref(isLabeledByFormItem) ? (_b = unref(elFormItem)) == null ? void 0 : _b.labelId : void 0,
|
|
"aria-valuemin": _ctx.min,
|
|
"aria-valuemax": _ctx.range ? unref(secondValue) : _ctx.max,
|
|
"aria-valuenow": unref(firstValue),
|
|
"aria-valuetext": unref(firstValueText),
|
|
"aria-orientation": _ctx.vertical ? "vertical" : "horizontal",
|
|
"aria-disabled": unref(sliderDisabled),
|
|
"onUpdate:modelValue": 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 ? (openBlock(), createBlock(SliderButton, {
|
|
key: 0,
|
|
ref_key: "secondButton",
|
|
ref: secondButton,
|
|
"model-value": unref(secondValue),
|
|
vertical: _ctx.vertical,
|
|
"tooltip-class": _ctx.tooltipClass,
|
|
placement: _ctx.placement,
|
|
role: "slider",
|
|
"aria-label": unref(secondButtonLabel),
|
|
"aria-valuemin": unref(firstValue),
|
|
"aria-valuemax": _ctx.max,
|
|
"aria-valuenow": unref(secondValue),
|
|
"aria-valuetext": unref(secondValueText),
|
|
"aria-orientation": _ctx.vertical ? "vertical" : "horizontal",
|
|
"aria-disabled": unref(sliderDisabled),
|
|
"onUpdate:modelValue": 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"])) : createCommentVNode("v-if", true),
|
|
_ctx.showStops ? (openBlock(), createElementBlock("div", { key: 1 }, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(stops), (item, key) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
key,
|
|
class: normalizeClass(unref(ns).e("stop")),
|
|
style: normalizeStyle(unref(getStopStyle)(item))
|
|
}, null, 6);
|
|
}), 128))
|
|
])) : createCommentVNode("v-if", true),
|
|
unref(markList).length > 0 ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
|
|
createElementVNode("div", null, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(markList), (item, key) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
key,
|
|
style: normalizeStyle(unref(getStopStyle)(item.position)),
|
|
class: normalizeClass([unref(ns).e("stop"), unref(ns).e("marks-stop")])
|
|
}, null, 6);
|
|
}), 128))
|
|
]),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("marks"))
|
|
}, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(markList), (item, key) => {
|
|
return openBlock(), createBlock(unref(SliderMarker), {
|
|
key,
|
|
mark: item.mark,
|
|
style: normalizeStyle(unref(getStopStyle)(item.position)),
|
|
onMousedown: withModifiers(($event) => unref(onSliderMarkerDown)(item.position), ["stop"])
|
|
}, null, 8, ["mark", "style", "onMousedown"]);
|
|
}), 128))
|
|
], 2)
|
|
], 64)) : createCommentVNode("v-if", true)
|
|
], 46, ["onMousedown", "onTouchstartPassive"]),
|
|
_ctx.showInput && !_ctx.range ? (openBlock(), createBlock(unref(ElInputNumber), {
|
|
key: 0,
|
|
ref: "input",
|
|
"model-value": unref(firstValue),
|
|
class: normalizeClass(unref(ns).e("input")),
|
|
step: _ctx.step,
|
|
disabled: unref(sliderDisabled),
|
|
controls: _ctx.showInputControls,
|
|
min: _ctx.min,
|
|
max: _ctx.max,
|
|
precision: unref(precision),
|
|
debounce: _ctx.debounce,
|
|
size: unref(sliderInputSize),
|
|
"onUpdate:modelValue": unref(setFirstValue),
|
|
onChange: unref(emitChange)
|
|
}, null, 8, ["model-value", "class", "step", "disabled", "controls", "min", "max", "precision", "debounce", "size", "onUpdate:modelValue", "onChange"])) : createCommentVNode("v-if", true)
|
|
], 10, ["id", "role", "aria-label", "aria-labelledby"]);
|
|
};
|
|
}
|
|
});
|
|
var Slider = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__file", "slider.vue"]]);
|
|
|
|
const ElSlider = withInstall(Slider);
|
|
|
|
const spaceItemProps = buildProps({
|
|
prefixCls: {
|
|
type: String
|
|
}
|
|
});
|
|
const SpaceItem = defineComponent({
|
|
name: "ElSpaceItem",
|
|
props: spaceItemProps,
|
|
setup(props, { slots }) {
|
|
const ns = useNamespace("space");
|
|
const classes = computed(() => `${props.prefixCls || ns.b()}__item`);
|
|
return () => h$1("div", { class: classes.value }, renderSlot(slots, "default"));
|
|
}
|
|
});
|
|
|
|
const SIZE_MAP = {
|
|
small: 8,
|
|
default: 12,
|
|
large: 16
|
|
};
|
|
function useSpace(props) {
|
|
const ns = useNamespace("space");
|
|
const classes = computed(() => [ns.b(), ns.m(props.direction), props.class]);
|
|
const horizontalSize = ref(0);
|
|
const verticalSize = ref(0);
|
|
const containerStyle = computed(() => {
|
|
const wrapKls = props.wrap || props.fill ? { flexWrap: "wrap" } : {};
|
|
const alignment = {
|
|
alignItems: props.alignment
|
|
};
|
|
const gap = {
|
|
rowGap: `${verticalSize.value}px`,
|
|
columnGap: `${horizontalSize.value}px`
|
|
};
|
|
return [wrapKls, alignment, gap, props.style];
|
|
});
|
|
const itemStyle = computed(() => {
|
|
return props.fill ? { flexGrow: 1, minWidth: `${props.fillRatio}%` } : {};
|
|
});
|
|
watchEffect(() => {
|
|
const { size = "small", wrap, direction: dir, fill } = props;
|
|
if (isArray$1(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) => isVNode(val) || isNumber(val) || isString$1(val)
|
|
},
|
|
wrap: Boolean,
|
|
fill: Boolean,
|
|
fillRatio: {
|
|
type: Number,
|
|
default: 100
|
|
},
|
|
size: {
|
|
type: [String, Array, Number],
|
|
values: componentSizes,
|
|
validator: (val) => {
|
|
return isNumber(val) || isArray$1(val) && val.length === 2 && val.every(isNumber);
|
|
}
|
|
}
|
|
});
|
|
const Space = 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$1(child.children)) {
|
|
child.children.forEach((nested, key) => {
|
|
if (isFragment(nested) && isArray$1(nested.children)) {
|
|
extractChildren(nested.children, `${parentKey + key}-`, extractedChildren);
|
|
} else {
|
|
extractedChildren.push(createVNode(SpaceItem, {
|
|
style: itemStyle.value,
|
|
prefixCls,
|
|
key: `nested-${parentKey + key}`
|
|
}, {
|
|
default: () => [nested]
|
|
}, PatchFlags.PROPS | PatchFlags.STYLE, ["style", "prefixCls"]));
|
|
}
|
|
});
|
|
}
|
|
} else if (isValidElementNode(child)) {
|
|
extractedChildren.push(createVNode(SpaceItem, {
|
|
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 = renderSlot(slots, "default", { key: 0 }, () => []);
|
|
if (((_a = children.children) != null ? _a : []).length === 0)
|
|
return null;
|
|
if (isArray$1(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(createVNode("span", {
|
|
style: [
|
|
itemStyle.value,
|
|
direction === "vertical" ? "width: 100%" : null
|
|
],
|
|
key: idx
|
|
}, [
|
|
isVNode(spacer) ? spacer : createTextVNode(spacer, PatchFlags.TEXT)
|
|
], PatchFlags.STYLE));
|
|
}
|
|
return children2;
|
|
}, []);
|
|
}
|
|
return createVNode("div", {
|
|
class: classes.value,
|
|
style: containerStyle.value
|
|
}, extractedChildren, PatchFlags.STYLE | PatchFlags.CLASS);
|
|
}
|
|
return children.children;
|
|
};
|
|
}
|
|
});
|
|
|
|
const ElSpace = withInstall(Space);
|
|
|
|
const statisticProps = buildProps({
|
|
decimalSeparator: {
|
|
type: String,
|
|
default: "."
|
|
},
|
|
groupSeparator: {
|
|
type: String,
|
|
default: ","
|
|
},
|
|
precision: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
formatter: Function,
|
|
value: {
|
|
type: definePropType([Number, Object]),
|
|
default: 0
|
|
},
|
|
prefix: String,
|
|
suffix: String,
|
|
title: String,
|
|
valueStyle: {
|
|
type: definePropType([String, Object, Array])
|
|
}
|
|
});
|
|
|
|
const __default__$z = defineComponent({
|
|
name: "ElStatistic"
|
|
});
|
|
const _sfc_main$G = /* @__PURE__ */ defineComponent({
|
|
...__default__$z,
|
|
props: statisticProps,
|
|
setup(__props, { expose }) {
|
|
const props = __props;
|
|
const ns = useNamespace("statistic");
|
|
const displayValue = computed(() => {
|
|
const { value, formatter, precision, decimalSeparator, groupSeparator } = props;
|
|
if (isFunction$1(formatter))
|
|
return formatter(value);
|
|
if (!isNumber(value) || Number.isNaN(value))
|
|
return value;
|
|
let [integer, decimal = ""] = String(value).split(".");
|
|
decimal = decimal.padEnd(precision, "0").slice(0, precision > 0 ? precision : 0);
|
|
integer = integer.replace(/\B(?=(\d{3})+(?!\d))/g, groupSeparator);
|
|
return [integer, decimal].join(decimal ? decimalSeparator : "");
|
|
});
|
|
expose({
|
|
displayValue
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass(unref(ns).b())
|
|
}, [
|
|
_ctx.$slots.title || _ctx.title ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).e("head"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "title", {}, () => [
|
|
createTextVNode(toDisplayString(_ctx.title), 1)
|
|
])
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("content"))
|
|
}, [
|
|
_ctx.$slots.prefix || _ctx.prefix ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).e("prefix"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "prefix", {}, () => [
|
|
createElementVNode("span", null, toDisplayString(_ctx.prefix), 1)
|
|
])
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(ns).e("number")),
|
|
style: normalizeStyle(_ctx.valueStyle)
|
|
}, toDisplayString(unref(displayValue)), 7),
|
|
_ctx.$slots.suffix || _ctx.suffix ? (openBlock(), createElementBlock("div", {
|
|
key: 1,
|
|
class: normalizeClass(unref(ns).e("suffix"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "suffix", {}, () => [
|
|
createElementVNode("span", null, toDisplayString(_ctx.suffix), 1)
|
|
])
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
], 2)
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var Statistic = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__file", "statistic.vue"]]);
|
|
|
|
const ElStatistic = withInstall(Statistic);
|
|
|
|
const countdownProps = buildProps({
|
|
format: {
|
|
type: String,
|
|
default: "HH:mm:ss"
|
|
},
|
|
prefix: String,
|
|
suffix: String,
|
|
title: String,
|
|
value: {
|
|
type: definePropType([Number, Object]),
|
|
default: 0
|
|
},
|
|
valueStyle: {
|
|
type: definePropType([String, Object, Array])
|
|
}
|
|
});
|
|
const countdownEmits = {
|
|
finish: () => true,
|
|
[CHANGE_EVENT]: (value) => isNumber(value)
|
|
};
|
|
|
|
const timeUnits = [
|
|
["Y", 1e3 * 60 * 60 * 24 * 365],
|
|
["M", 1e3 * 60 * 60 * 24 * 30],
|
|
["D", 1e3 * 60 * 60 * 24],
|
|
["H", 1e3 * 60 * 60],
|
|
["m", 1e3 * 60],
|
|
["s", 1e3],
|
|
["S", 1]
|
|
];
|
|
const getTime = (value) => {
|
|
return isNumber(value) ? new Date(value).getTime() : value.valueOf();
|
|
};
|
|
const formatTime$1 = (timestamp, format) => {
|
|
let timeLeft = timestamp;
|
|
const escapeRegex = /\[([^\]]*)]/g;
|
|
const replacedText = timeUnits.reduce((current, [name, unit]) => {
|
|
const replaceRegex = new RegExp(`${name}+(?![^\\[\\]]*\\])`, "g");
|
|
if (replaceRegex.test(current)) {
|
|
const value = Math.floor(timeLeft / unit);
|
|
timeLeft -= value * unit;
|
|
return current.replace(replaceRegex, (match) => String(value).padStart(match.length, "0"));
|
|
}
|
|
return current;
|
|
}, format);
|
|
return replacedText.replace(escapeRegex, "$1");
|
|
};
|
|
|
|
const __default__$y = defineComponent({
|
|
name: "ElCountdown"
|
|
});
|
|
const _sfc_main$F = /* @__PURE__ */ defineComponent({
|
|
...__default__$y,
|
|
props: countdownProps,
|
|
emits: countdownEmits,
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
let timer;
|
|
const rawValue = ref(0);
|
|
const displayValue = computed(() => formatTime$1(rawValue.value, props.format));
|
|
const formatter = (val) => formatTime$1(val, props.format);
|
|
const stopTimer = () => {
|
|
if (timer) {
|
|
cAF(timer);
|
|
timer = void 0;
|
|
}
|
|
};
|
|
const startTimer = () => {
|
|
const timestamp = getTime(props.value);
|
|
const frameFunc = () => {
|
|
let diff = timestamp - Date.now();
|
|
emit("change", diff);
|
|
if (diff <= 0) {
|
|
diff = 0;
|
|
stopTimer();
|
|
emit("finish");
|
|
} else {
|
|
timer = rAF(frameFunc);
|
|
}
|
|
rawValue.value = diff;
|
|
};
|
|
timer = rAF(frameFunc);
|
|
};
|
|
onMounted(() => {
|
|
rawValue.value = getTime(props.value) - Date.now();
|
|
watch(() => [props.value, props.format], () => {
|
|
stopTimer();
|
|
startTimer();
|
|
}, {
|
|
immediate: true
|
|
});
|
|
});
|
|
onBeforeUnmount(() => {
|
|
stopTimer();
|
|
});
|
|
expose({
|
|
displayValue
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createBlock(unref(ElStatistic), {
|
|
value: rawValue.value,
|
|
title: _ctx.title,
|
|
prefix: _ctx.prefix,
|
|
suffix: _ctx.suffix,
|
|
"value-style": _ctx.valueStyle,
|
|
formatter
|
|
}, createSlots({ _: 2 }, [
|
|
renderList(_ctx.$slots, (_, name) => {
|
|
return {
|
|
name,
|
|
fn: withCtx(() => [
|
|
renderSlot(_ctx.$slots, name)
|
|
])
|
|
};
|
|
})
|
|
]), 1032, ["value", "title", "prefix", "suffix", "value-style"]);
|
|
};
|
|
}
|
|
});
|
|
var Countdown = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__file", "countdown.vue"]]);
|
|
|
|
const ElCountdown = withInstall(Countdown);
|
|
|
|
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__$x = defineComponent({
|
|
name: "ElSteps"
|
|
});
|
|
const _sfc_main$E = /* @__PURE__ */ defineComponent({
|
|
...__default__$x,
|
|
props: stepsProps,
|
|
emits: stepsEmits,
|
|
setup(__props, { emit }) {
|
|
const props = __props;
|
|
const ns = useNamespace("steps");
|
|
const {
|
|
children: steps,
|
|
addChild: addStep,
|
|
removeChild: removeStep
|
|
} = useOrderedChildren(getCurrentInstance(), "ElStep");
|
|
watch(steps, () => {
|
|
steps.value.forEach((instance, index) => {
|
|
instance.setIndex(index);
|
|
});
|
|
});
|
|
provide("ElSteps", { props, steps, addStep, removeStep });
|
|
watch(() => props.active, (newVal, oldVal) => {
|
|
emit(CHANGE_EVENT, newVal, oldVal);
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass([unref(ns).b(), unref(ns).m(_ctx.simple ? "simple" : _ctx.direction)])
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var Steps = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__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__$w = defineComponent({
|
|
name: "ElStep"
|
|
});
|
|
const _sfc_main$D = defineComponent({
|
|
...__default__$w,
|
|
props: stepProps,
|
|
setup(__props) {
|
|
const props = __props;
|
|
const ns = useNamespace("step");
|
|
const index = ref(-1);
|
|
const lineStyle = ref({});
|
|
const internalStatus = ref("");
|
|
const parent = inject("ElSteps");
|
|
const currentInstance = getCurrentInstance();
|
|
onMounted(() => {
|
|
watch([
|
|
() => parent.props.active,
|
|
() => parent.props.processStatus,
|
|
() => parent.props.finishStatus
|
|
], ([active]) => {
|
|
updateStatus(active);
|
|
}, { immediate: true });
|
|
});
|
|
onBeforeUnmount(() => {
|
|
parent.removeStep(stepItemState.uid);
|
|
});
|
|
const currentStatus = computed(() => {
|
|
return props.status || internalStatus.value;
|
|
});
|
|
const prevStatus = computed(() => {
|
|
const prevStep = parent.steps.value[index.value - 1];
|
|
return prevStep ? prevStep.currentStatus : "wait";
|
|
});
|
|
const isCenter = computed(() => {
|
|
return parent.props.alignCenter;
|
|
});
|
|
const isVertical = computed(() => {
|
|
return parent.props.direction === "vertical";
|
|
});
|
|
const isSimple = computed(() => {
|
|
return parent.props.simple;
|
|
});
|
|
const stepsCount = computed(() => {
|
|
return parent.steps.value.length;
|
|
});
|
|
const isLast = computed(() => {
|
|
var _a;
|
|
return ((_a = parent.steps.value[stepsCount.value - 1]) == null ? void 0 : _a.uid) === (currentInstance == null ? void 0 : currentInstance.uid);
|
|
});
|
|
const space = computed(() => {
|
|
return isSimple.value ? "" : parent.props.space;
|
|
});
|
|
const containerKls = computed(() => {
|
|
return [
|
|
ns.b(),
|
|
ns.is(isSimple.value ? "simple" : parent.props.direction),
|
|
ns.is("flex", isLast.value && !space.value && !isCenter.value),
|
|
ns.is("center", isCenter.value && !isVertical.value && !isSimple.value)
|
|
];
|
|
});
|
|
const style = computed(() => {
|
|
const style2 = {
|
|
flexBasis: isNumber(space.value) ? `${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) => {
|
|
const isWait = status === "wait";
|
|
const style2 = {
|
|
transitionDelay: `${isWait ? "-" : ""}${150 * index.value}ms`
|
|
};
|
|
const step = status === parent.props.processStatus || isWait ? 0 : 100;
|
|
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 = reactive({
|
|
uid: currentInstance.uid,
|
|
currentStatus,
|
|
setIndex,
|
|
calcProgress
|
|
});
|
|
parent.addStep(stepItemState);
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
style: normalizeStyle(unref(style)),
|
|
class: normalizeClass(unref(containerKls))
|
|
}, [
|
|
createCommentVNode(" icon & line "),
|
|
createElementVNode("div", {
|
|
class: normalizeClass([unref(ns).e("head"), unref(ns).is(unref(currentStatus))])
|
|
}, [
|
|
!unref(isSimple) ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).e("line"))
|
|
}, [
|
|
createElementVNode("i", {
|
|
class: normalizeClass(unref(ns).e("line-inner")),
|
|
style: normalizeStyle(lineStyle.value)
|
|
}, null, 6)
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", {
|
|
class: normalizeClass([unref(ns).e("icon"), unref(ns).is(_ctx.icon || _ctx.$slots.icon ? "icon" : "text")])
|
|
}, [
|
|
renderSlot(_ctx.$slots, "icon", {}, () => [
|
|
_ctx.icon ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).e("icon-inner"))
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.icon)))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : unref(currentStatus) === "success" ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 1,
|
|
class: normalizeClass([unref(ns).e("icon-inner"), unref(ns).is("status")])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(check_default))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : unref(currentStatus) === "error" ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 2,
|
|
class: normalizeClass([unref(ns).e("icon-inner"), unref(ns).is("status")])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(close_default))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : !unref(isSimple) ? (openBlock(), createElementBlock("div", {
|
|
key: 3,
|
|
class: normalizeClass(unref(ns).e("icon-inner"))
|
|
}, toDisplayString(index.value + 1), 3)) : createCommentVNode("v-if", true)
|
|
])
|
|
], 2)
|
|
], 2),
|
|
createCommentVNode(" title & description "),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("main"))
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass([unref(ns).e("title"), unref(ns).is(unref(currentStatus))])
|
|
}, [
|
|
renderSlot(_ctx.$slots, "title", {}, () => [
|
|
createTextVNode(toDisplayString(_ctx.title), 1)
|
|
])
|
|
], 2),
|
|
unref(isSimple) ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).e("arrow"))
|
|
}, null, 2)) : (openBlock(), createElementBlock("div", {
|
|
key: 1,
|
|
class: normalizeClass([unref(ns).e("description"), unref(ns).is(unref(currentStatus))])
|
|
}, [
|
|
renderSlot(_ctx.$slots, "description", {}, () => [
|
|
createTextVNode(toDisplayString(_ctx.description), 1)
|
|
])
|
|
], 2))
|
|
], 2)
|
|
], 6);
|
|
};
|
|
}
|
|
});
|
|
var Step = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__file", "item.vue"]]);
|
|
|
|
const ElSteps = withInstall(Steps, {
|
|
Step
|
|
});
|
|
const ElStep = withNoopInstall(Step);
|
|
|
|
const switchProps = buildProps({
|
|
modelValue: {
|
|
type: [Boolean, String, Number],
|
|
default: false
|
|
},
|
|
disabled: Boolean,
|
|
loading: Boolean,
|
|
size: {
|
|
type: String,
|
|
validator: isValidComponentSize
|
|
},
|
|
width: {
|
|
type: [String, Number],
|
|
default: ""
|
|
},
|
|
inlinePrompt: Boolean,
|
|
inactiveActionIcon: {
|
|
type: iconPropType
|
|
},
|
|
activeActionIcon: {
|
|
type: iconPropType
|
|
},
|
|
activeIcon: {
|
|
type: iconPropType
|
|
},
|
|
inactiveIcon: {
|
|
type: iconPropType
|
|
},
|
|
activeText: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
inactiveText: {
|
|
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
|
|
},
|
|
beforeChange: {
|
|
type: definePropType(Function)
|
|
},
|
|
id: String,
|
|
tabindex: {
|
|
type: [String, Number]
|
|
},
|
|
...useAriaProps(["ariaLabel"])
|
|
});
|
|
const switchEmits = {
|
|
[UPDATE_MODEL_EVENT]: (val) => isBoolean(val) || isString$1(val) || isNumber(val),
|
|
[CHANGE_EVENT]: (val) => isBoolean(val) || isString$1(val) || isNumber(val),
|
|
[INPUT_EVENT]: (val) => isBoolean(val) || isString$1(val) || isNumber(val)
|
|
};
|
|
|
|
const COMPONENT_NAME$8 = "ElSwitch";
|
|
const __default__$v = defineComponent({
|
|
name: COMPONENT_NAME$8
|
|
});
|
|
const _sfc_main$C = /* @__PURE__ */ defineComponent({
|
|
...__default__$v,
|
|
props: switchProps,
|
|
emits: switchEmits,
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const { formItem } = useFormItem();
|
|
const switchSize = useFormSize();
|
|
const ns = useNamespace("switch");
|
|
const { inputId } = useFormItemInputId(props, {
|
|
formItemContext: formItem
|
|
});
|
|
const switchDisabled = useFormDisabled(computed(() => props.loading));
|
|
const isControlled = ref(props.modelValue !== false);
|
|
const input = ref();
|
|
const core = ref();
|
|
const switchKls = computed(() => [
|
|
ns.b(),
|
|
ns.m(switchSize.value),
|
|
ns.is("disabled", switchDisabled.value),
|
|
ns.is("checked", checked.value)
|
|
]);
|
|
const labelLeftKls = computed(() => [
|
|
ns.e("label"),
|
|
ns.em("label", "left"),
|
|
ns.is("active", !checked.value)
|
|
]);
|
|
const labelRightKls = computed(() => [
|
|
ns.e("label"),
|
|
ns.em("label", "right"),
|
|
ns.is("active", checked.value)
|
|
]);
|
|
const coreStyle = computed(() => ({
|
|
width: addUnit(props.width)
|
|
}));
|
|
watch(() => props.modelValue, () => {
|
|
isControlled.value = true;
|
|
});
|
|
const actualValue = computed(() => {
|
|
return isControlled.value ? props.modelValue : false;
|
|
});
|
|
const checked = 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);
|
|
}
|
|
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);
|
|
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<boolean>` or `boolean`");
|
|
}
|
|
if (isPromise(shouldChange)) {
|
|
shouldChange.then((result) => {
|
|
if (result) {
|
|
handleChange();
|
|
}
|
|
}).catch((e) => {
|
|
});
|
|
} else if (shouldChange) {
|
|
handleChange();
|
|
}
|
|
};
|
|
const focus = () => {
|
|
var _a, _b;
|
|
(_b = (_a = input.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
|
|
};
|
|
onMounted(() => {
|
|
input.value.checked = checked.value;
|
|
});
|
|
expose({
|
|
focus,
|
|
checked
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass(unref(switchKls)),
|
|
onClick: withModifiers(switchValue, ["prevent"])
|
|
}, [
|
|
createElementVNode("input", {
|
|
id: unref(inputId),
|
|
ref_key: "input",
|
|
ref: input,
|
|
class: normalizeClass(unref(ns).e("input")),
|
|
type: "checkbox",
|
|
role: "switch",
|
|
"aria-checked": unref(checked),
|
|
"aria-disabled": unref(switchDisabled),
|
|
"aria-label": _ctx.ariaLabel,
|
|
name: _ctx.name,
|
|
"true-value": _ctx.activeValue,
|
|
"false-value": _ctx.inactiveValue,
|
|
disabled: unref(switchDisabled),
|
|
tabindex: _ctx.tabindex,
|
|
onChange: handleChange,
|
|
onKeydown: withKeys(switchValue, ["enter"])
|
|
}, null, 42, ["id", "aria-checked", "aria-disabled", "aria-label", "name", "true-value", "false-value", "disabled", "tabindex", "onKeydown"]),
|
|
!_ctx.inlinePrompt && (_ctx.inactiveIcon || _ctx.inactiveText) ? (openBlock(), createElementBlock("span", {
|
|
key: 0,
|
|
class: normalizeClass(unref(labelLeftKls))
|
|
}, [
|
|
_ctx.inactiveIcon ? (openBlock(), createBlock(unref(ElIcon), { key: 0 }, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.inactiveIcon)))
|
|
]),
|
|
_: 1
|
|
})) : createCommentVNode("v-if", true),
|
|
!_ctx.inactiveIcon && _ctx.inactiveText ? (openBlock(), createElementBlock("span", {
|
|
key: 1,
|
|
"aria-hidden": unref(checked)
|
|
}, toDisplayString(_ctx.inactiveText), 9, ["aria-hidden"])) : createCommentVNode("v-if", true)
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
createElementVNode("span", {
|
|
ref_key: "core",
|
|
ref: core,
|
|
class: normalizeClass(unref(ns).e("core")),
|
|
style: normalizeStyle(unref(coreStyle))
|
|
}, [
|
|
_ctx.inlinePrompt ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).e("inner"))
|
|
}, [
|
|
_ctx.activeIcon || _ctx.inactiveIcon ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).is("icon"))
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(unref(checked) ? _ctx.activeIcon : _ctx.inactiveIcon)))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : _ctx.activeText || _ctx.inactiveText ? (openBlock(), createElementBlock("span", {
|
|
key: 1,
|
|
class: normalizeClass(unref(ns).is("text")),
|
|
"aria-hidden": !unref(checked)
|
|
}, toDisplayString(unref(checked) ? _ctx.activeText : _ctx.inactiveText), 11, ["aria-hidden"])) : createCommentVNode("v-if", true)
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("action"))
|
|
}, [
|
|
_ctx.loading ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).is("loading"))
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(loading_default))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : unref(checked) ? renderSlot(_ctx.$slots, "active-action", { key: 1 }, () => [
|
|
_ctx.activeActionIcon ? (openBlock(), createBlock(unref(ElIcon), { key: 0 }, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.activeActionIcon)))
|
|
]),
|
|
_: 1
|
|
})) : createCommentVNode("v-if", true)
|
|
]) : !unref(checked) ? renderSlot(_ctx.$slots, "inactive-action", { key: 2 }, () => [
|
|
_ctx.inactiveActionIcon ? (openBlock(), createBlock(unref(ElIcon), { key: 0 }, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.inactiveActionIcon)))
|
|
]),
|
|
_: 1
|
|
})) : createCommentVNode("v-if", true)
|
|
]) : createCommentVNode("v-if", true)
|
|
], 2)
|
|
], 6),
|
|
!_ctx.inlinePrompt && (_ctx.activeIcon || _ctx.activeText) ? (openBlock(), createElementBlock("span", {
|
|
key: 1,
|
|
class: normalizeClass(unref(labelRightKls))
|
|
}, [
|
|
_ctx.activeIcon ? (openBlock(), createBlock(unref(ElIcon), { key: 0 }, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.activeIcon)))
|
|
]),
|
|
_: 1
|
|
})) : createCommentVNode("v-if", true),
|
|
!_ctx.activeIcon && _ctx.activeText ? (openBlock(), createElementBlock("span", {
|
|
key: 1,
|
|
"aria-hidden": !unref(checked)
|
|
}, toDisplayString(_ctx.activeText), 9, ["aria-hidden"])) : createCommentVNode("v-if", true)
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
], 10, ["onClick"]);
|
|
};
|
|
}
|
|
});
|
|
var Switch = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__file", "switch.vue"]]);
|
|
|
|
const ElSwitch = withInstall(Switch);
|
|
|
|
const getCell = function(event) {
|
|
var _a;
|
|
return (_a = event.target) == null ? void 0 : _a.closest("td");
|
|
};
|
|
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$1(value) && "$value" in value)
|
|
value = value.$value;
|
|
}
|
|
return [isObject$1(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, tableTreeProps, selectable, rowIndex) {
|
|
let _rowIndex = rowIndex != null ? rowIndex : 0;
|
|
let changed = false;
|
|
const index = statusArr.indexOf(row);
|
|
const included = index !== -1;
|
|
const isRowSelectable = selectable == null ? void 0 : selectable.call(null, row, rowIndex);
|
|
const toggleStatus = (type) => {
|
|
if (type === "add") {
|
|
statusArr.push(row);
|
|
} else {
|
|
statusArr.splice(index, 1);
|
|
}
|
|
changed = true;
|
|
};
|
|
const getChildrenCount = (row2) => {
|
|
let count = 0;
|
|
const children = (tableTreeProps == null ? void 0 : tableTreeProps.children) && row2[tableTreeProps.children];
|
|
if (children && isArray$1(children)) {
|
|
count += children.length;
|
|
children.forEach((item) => {
|
|
count += getChildrenCount(item);
|
|
});
|
|
}
|
|
return count;
|
|
};
|
|
if (!selectable || isRowSelectable) {
|
|
if (isBoolean(newVal)) {
|
|
if (newVal && !included) {
|
|
toggleStatus("add");
|
|
} else if (!newVal && included) {
|
|
toggleStatus("remove");
|
|
}
|
|
} else {
|
|
included ? toggleStatus("remove") : toggleStatus("add");
|
|
}
|
|
}
|
|
if (!(tableTreeProps == null ? void 0 : tableTreeProps.checkStrictly) && (tableTreeProps == null ? void 0 : tableTreeProps.children) && isArray$1(row[tableTreeProps.children])) {
|
|
row[tableTreeProps.children].forEach((item) => {
|
|
toggleRowStatus(statusArr, item, newVal != null ? newVal : !included, tableTreeProps, selectable, _rowIndex + 1);
|
|
_rowIndex += getChildrenCount(item) + 1;
|
|
});
|
|
}
|
|
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 = null;
|
|
function createTablePopper(props, popperContent, trigger, table) {
|
|
if ((removePopper == null ? void 0 : removePopper.trigger) === trigger) {
|
|
return;
|
|
}
|
|
removePopper == null ? void 0 : removePopper();
|
|
const parentNode = table == null ? void 0 : table.refs.tableWrapper;
|
|
const ns = parentNode == null ? void 0 : parentNode.dataset.prefix;
|
|
const popperOptions = {
|
|
strategy: "fixed",
|
|
...props.popperOptions
|
|
};
|
|
const vm = createVNode(ElTooltip, {
|
|
content: popperContent,
|
|
virtualTriggering: true,
|
|
virtualRef: trigger,
|
|
appendTo: parentNode,
|
|
placement: "top",
|
|
transition: "none",
|
|
offset: 0,
|
|
hideAfter: 0,
|
|
...props,
|
|
popperOptions,
|
|
onHide: () => {
|
|
removePopper == null ? void 0 : removePopper();
|
|
}
|
|
});
|
|
vm.appContext = { ...table.appContext, ...table };
|
|
const container = document.createElement("div");
|
|
render(vm, container);
|
|
vm.component.exposed.onOpen();
|
|
const scrollContainer = parentNode == null ? void 0 : parentNode.querySelector(`.${ns}-scrollbar__wrap`);
|
|
removePopper = () => {
|
|
render(null, container);
|
|
scrollContainer == null ? void 0 : scrollContainer.removeEventListener("scroll", removePopper);
|
|
removePopper = null;
|
|
};
|
|
removePopper.trigger = trigger;
|
|
scrollContainer == null ? void 0 : scrollContainer.addEventListener("scroll", removePopper);
|
|
}
|
|
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 = getCurrentInstance();
|
|
const defaultExpandAll = ref(false);
|
|
const expandRows = 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 = getCurrentInstance();
|
|
const _currentRowKey = ref(null);
|
|
const currentRow = 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 = (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 = ref([]);
|
|
const treeData = ref({});
|
|
const indent = ref(16);
|
|
const lazy = ref(false);
|
|
const lazyTreeNodeMap = ref({});
|
|
const lazyColumnIdentifier = ref("hasChildren");
|
|
const childrenColumnName = ref("children");
|
|
const checkStrictly = ref(false);
|
|
const instance = getCurrentInstance();
|
|
const normalizedData = computed(() => {
|
|
if (!watcherData.rowKey.value)
|
|
return {};
|
|
const data = watcherData.data.value || [];
|
|
return normalize(data);
|
|
});
|
|
const normalizedLazyNode = 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 = 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();
|
|
};
|
|
watch(() => expandRowKeys.value, () => {
|
|
updateTreeData(true);
|
|
});
|
|
watch(() => normalizedData.value, () => {
|
|
updateTreeData();
|
|
});
|
|
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);
|
|
});
|
|
}
|
|
};
|
|
const updateKeyChildren = (key, data) => {
|
|
const { lazy: lazy2, rowKey } = instance.props;
|
|
if (!lazy2)
|
|
return;
|
|
if (!rowKey)
|
|
throw new Error("[Table] rowKey is required in updateKeyChild");
|
|
if (lazyTreeNodeMap.value[key]) {
|
|
lazyTreeNodeMap.value[key] = data;
|
|
}
|
|
};
|
|
return {
|
|
loadData,
|
|
loadOrToggle,
|
|
toggleTreeExpansion,
|
|
updateTreeExpandKeys,
|
|
updateTreeData,
|
|
updateKeyChildren,
|
|
normalize,
|
|
states: {
|
|
expandRowKeys,
|
|
treeData,
|
|
indent,
|
|
lazy,
|
|
lazyTreeNodeMap,
|
|
lazyColumnIdentifier,
|
|
childrenColumnName,
|
|
checkStrictly
|
|
}
|
|
};
|
|
}
|
|
|
|
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 && column.children.length > 0) {
|
|
result.push.apply(result, doFlattenColumns(column.children));
|
|
} else {
|
|
result.push(column);
|
|
}
|
|
});
|
|
return result;
|
|
};
|
|
function useWatcher$1() {
|
|
var _a;
|
|
const instance = getCurrentInstance();
|
|
const { size: tableSize } = toRefs((_a = instance.proxy) == null ? void 0 : _a.$props);
|
|
const rowKey = ref(null);
|
|
const data = ref([]);
|
|
const _data = ref([]);
|
|
const isComplex = ref(false);
|
|
const _columns = ref([]);
|
|
const originColumns = ref([]);
|
|
const columns = ref([]);
|
|
const fixedColumns = ref([]);
|
|
const rightFixedColumns = ref([]);
|
|
const leafColumns = ref([]);
|
|
const fixedLeafColumns = ref([]);
|
|
const rightFixedLeafColumns = ref([]);
|
|
const updateOrderFns = [];
|
|
const leafColumnsLength = ref(0);
|
|
const fixedLeafColumnsLength = ref(0);
|
|
const rightFixedLeafColumnsLength = ref(0);
|
|
const isAllSelected = ref(false);
|
|
const selection = ref([]);
|
|
const reserveSelection = ref(false);
|
|
const selectOnIndeterminate = ref(false);
|
|
const selectable = ref(null);
|
|
const filters = ref({});
|
|
const filteredData = ref(null);
|
|
const sortingColumn = ref(null);
|
|
const sortProp = ref(null);
|
|
const sortOrder = ref(null);
|
|
const hoverRow = ref(null);
|
|
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);
|
|
});
|
|
};
|
|
let selectionInitialFixed = void 0;
|
|
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 (isUndefined(selectionInitialFixed) && _columns.value[0] && _columns.value[0].type === "selection") {
|
|
selectionInitialFixed = Boolean(_columns.value[0].fixed);
|
|
}
|
|
if (fixedColumns.value.length > 0 && _columns.value[0] && _columns.value[0].type === "selection") {
|
|
if (!_columns.value[0].fixed) {
|
|
_columns.value[0].fixed = true;
|
|
fixedColumns.value.unshift(_columns.value[0]);
|
|
} else {
|
|
const hasNotSelectionColumns = fixedColumns.value.some((column) => column.type !== "selection");
|
|
if (!hasNotSelectionColumns) {
|
|
_columns.value[0].fixed = selectionInitialFixed;
|
|
if (!selectionInitialFixed)
|
|
fixedColumns.value.shift();
|
|
} else {
|
|
selectionInitialFixed = void 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.some((item) => isEqual$1(item, row));
|
|
};
|
|
const clearSelection = () => {
|
|
isAllSelected.value = false;
|
|
const oldSelection = selection.value;
|
|
selection.value = [];
|
|
if (oldSelection.length) {
|
|
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, emitChange = true, ignoreSelectable = false) => {
|
|
var _a2, _b, _c, _d;
|
|
const treeProps = {
|
|
children: (_b = (_a2 = instance == null ? void 0 : instance.store) == null ? void 0 : _a2.states) == null ? void 0 : _b.childrenColumnName.value,
|
|
checkStrictly: (_d = (_c = instance == null ? void 0 : instance.store) == null ? void 0 : _c.states) == null ? void 0 : _d.checkStrictly.value
|
|
};
|
|
const changed = toggleRowStatus(selection.value, row, selected, treeProps, ignoreSelectable ? void 0 : selectable.value);
|
|
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;
|
|
const { childrenColumnName } = instance.store.states;
|
|
const treeProps = {
|
|
children: childrenColumnName.value,
|
|
checkStrictly: false
|
|
};
|
|
data.value.forEach((row, index) => {
|
|
const rowIndex = index + childrenCount;
|
|
if (toggleRowStatus(selection.value, row, value, treeProps, selectable.value, rowIndex)) {
|
|
selectionChanged = true;
|
|
}
|
|
childrenCount += getChildrenCount(getRowIdentity(row, rowKey2));
|
|
});
|
|
if (selectionChanged) {
|
|
instance.emit("selection-change", selection.value ? selection.value.slice() : []);
|
|
}
|
|
instance.emit("select-all", (selection.value || []).slice());
|
|
};
|
|
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;
|
|
if (((_a2 = data.value) == null ? void 0 : _a2.length) === 0) {
|
|
isAllSelected.value = false;
|
|
return;
|
|
}
|
|
const { childrenColumnName } = instance.store.states;
|
|
const selectedMap = rowKey.value ? getKeysMap(selection.value, rowKey.value) : void 0;
|
|
let rowIndex = 0;
|
|
let selectedCount = 0;
|
|
const isSelected2 = (row) => {
|
|
if (selectedMap) {
|
|
return !!selectedMap[getRowIdentity(row, rowKey.value)];
|
|
} else {
|
|
return selection.value.includes(row);
|
|
}
|
|
};
|
|
const checkSelectedStatus = (data2) => {
|
|
var _a3;
|
|
for (const row of data2) {
|
|
const isRowSelectable = selectable.value && selectable.value.call(null, row, rowIndex);
|
|
if (!isSelected2(row)) {
|
|
if (!selectable.value || isRowSelectable) {
|
|
return false;
|
|
}
|
|
} else {
|
|
selectedCount++;
|
|
}
|
|
rowIndex++;
|
|
if (((_a3 = row[childrenColumnName.value]) == null ? void 0 : _a3.length) && !checkSelectedStatus(row[childrenColumnName.value])) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
};
|
|
const isAllSelected_ = checkSelectedStatus(data.value || []);
|
|
isAllSelected.value = selectedCount === 0 ? false : 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 = 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,
|
|
updateKeyChildren,
|
|
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,
|
|
updateKeyChildren,
|
|
states: {
|
|
tableSize,
|
|
rowKey,
|
|
data,
|
|
_data,
|
|
isComplex,
|
|
_columns,
|
|
originColumns,
|
|
columns,
|
|
fixedColumns,
|
|
rightFixedColumns,
|
|
leafColumns,
|
|
fixedLeafColumns,
|
|
rightFixedLeafColumns,
|
|
updateOrderFns,
|
|
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 = getCurrentInstance();
|
|
const watcher = useWatcher$1();
|
|
const ns = useNamespace("table");
|
|
const mutations = {
|
|
setData(states, data) {
|
|
const dataInstanceChanged = 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 (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, updateColumnOrder) {
|
|
const array = 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;
|
|
states.updateOrderFns.push(updateColumnOrder);
|
|
if (column.type === "selection") {
|
|
states.selectable.value = column.selectable;
|
|
states.reserveSelection.value = column.reserveSelection;
|
|
}
|
|
if (instance.$ready) {
|
|
instance.store.updateColumns();
|
|
instance.store.scheduleLayout();
|
|
}
|
|
},
|
|
updateColumnOrder(states, column) {
|
|
var _a;
|
|
const newColumnIndex = (_a = column.getColumnIndex) == null ? void 0 : _a.call(column);
|
|
if (newColumnIndex === column.no)
|
|
return;
|
|
sortColumn(states._columns.value);
|
|
if (instance.$ready) {
|
|
instance.store.updateColumns();
|
|
}
|
|
},
|
|
removeColumn(states, column, parent, updateColumnOrder) {
|
|
const array = unref(states._columns) || [];
|
|
if (parent) {
|
|
parent.children.splice(parent.children.findIndex((item) => item.id === column.id), 1);
|
|
nextTick(() => {
|
|
var _a;
|
|
if (((_a = parent.children) == null ? void 0 : _a.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;
|
|
}
|
|
}
|
|
const updateFnIndex = states.updateOrderFns.indexOf(updateColumnOrder);
|
|
updateFnIndex > -1 && states.updateOrderFns.splice(updateFnIndex, 1);
|
|
if (instance.$ready) {
|
|
instance.store.updateColumns();
|
|
instance.store.scheduleLayout();
|
|
}
|
|
},
|
|
sort(states, options) {
|
|
const { prop, order, init } = options;
|
|
if (prop) {
|
|
const column = 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 = unref(sortingColumn), propValue = unref(sortProp), orderValue = 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() {
|
|
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"
|
|
},
|
|
["treeProps.checkStrictly"]: {
|
|
key: "checkStrictly",
|
|
default: false
|
|
}
|
|
};
|
|
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) => {
|
|
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 = ref(null);
|
|
this.scrollX = ref(false);
|
|
this.scrollY = ref(false);
|
|
this.bodyWidth = ref(null);
|
|
this.fixedWidth = ref(null);
|
|
this.rightFixedWidth = ref(null);
|
|
this.gutterWidth = 0;
|
|
for (const name in options) {
|
|
if (hasOwn(options, name)) {
|
|
if (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 == null ? void 0 : scrollBarRef.wrapRef)) {
|
|
let scrollY = true;
|
|
const prevScrollY = this.scrollY.value;
|
|
scrollY = scrollBarRef.wrapRef.scrollHeight > scrollBarRef.wrapRef.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 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$B = 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
|
|
},
|
|
appendTo: {
|
|
type: String
|
|
}
|
|
},
|
|
setup(props) {
|
|
const instance = 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 = ref(false);
|
|
const tooltip = ref(null);
|
|
const filters = computed(() => {
|
|
return props.column && props.column.filters;
|
|
});
|
|
const filterClassName = computed(() => {
|
|
if (props.column.filterClassName) {
|
|
return `${ns.b()} ${props.column.filterClassName}`;
|
|
}
|
|
return ns.b();
|
|
});
|
|
const filterValue = 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 = computed({
|
|
get() {
|
|
if (props.column) {
|
|
return props.column.filteredValue || [];
|
|
}
|
|
return [];
|
|
},
|
|
set(value) {
|
|
if (props.column) {
|
|
props.upDataColumn("filteredValue", value);
|
|
}
|
|
}
|
|
});
|
|
const multiple = 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();
|
|
};
|
|
watch(tooltipVisible, (value) => {
|
|
if (props.column) {
|
|
props.upDataColumn("filterOpened", value);
|
|
}
|
|
}, {
|
|
immediate: true
|
|
});
|
|
const popperPaneRef = computed(() => {
|
|
var _a, _b;
|
|
return (_b = (_a = tooltip.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
|
|
});
|
|
return {
|
|
tooltipVisible,
|
|
multiple,
|
|
filterClassName,
|
|
filteredValue,
|
|
filterValue,
|
|
filters,
|
|
handleConfirm,
|
|
handleReset,
|
|
handleSelect,
|
|
isActive,
|
|
t,
|
|
ns,
|
|
showFilterPanel,
|
|
hideFilterPanel,
|
|
popperPaneRef,
|
|
tooltip
|
|
};
|
|
}
|
|
});
|
|
function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
|
|
const _component_el_checkbox = resolveComponent("el-checkbox");
|
|
const _component_el_checkbox_group = resolveComponent("el-checkbox-group");
|
|
const _component_el_scrollbar = resolveComponent("el-scrollbar");
|
|
const _component_arrow_up = resolveComponent("arrow-up");
|
|
const _component_arrow_down = resolveComponent("arrow-down");
|
|
const _component_el_icon = resolveComponent("el-icon");
|
|
const _component_el_tooltip = resolveComponent("el-tooltip");
|
|
const _directive_click_outside = resolveDirective("click-outside");
|
|
return openBlock(), 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.filterClassName,
|
|
persistent: "",
|
|
"append-to": _ctx.appendTo
|
|
}, {
|
|
content: withCtx(() => [
|
|
_ctx.multiple ? (openBlock(), createElementBlock("div", { key: 0 }, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(_ctx.ns.e("content"))
|
|
}, [
|
|
createVNode(_component_el_scrollbar, {
|
|
"wrap-class": _ctx.ns.e("wrap")
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_component_el_checkbox_group, {
|
|
modelValue: _ctx.filteredValue,
|
|
"onUpdate:modelValue": ($event) => _ctx.filteredValue = $event,
|
|
class: normalizeClass(_ctx.ns.e("checkbox-group"))
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.filters, (filter) => {
|
|
return openBlock(), createBlock(_component_el_checkbox, {
|
|
key: filter.value,
|
|
value: filter.value
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(filter.text), 1)
|
|
]),
|
|
_: 2
|
|
}, 1032, ["value"]);
|
|
}), 128))
|
|
]),
|
|
_: 1
|
|
}, 8, ["modelValue", "onUpdate:modelValue", "class"])
|
|
]),
|
|
_: 1
|
|
}, 8, ["wrap-class"])
|
|
], 2),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(_ctx.ns.e("bottom"))
|
|
}, [
|
|
createElementVNode("button", {
|
|
class: normalizeClass({ [_ctx.ns.is("disabled")]: _ctx.filteredValue.length === 0 }),
|
|
disabled: _ctx.filteredValue.length === 0,
|
|
type: "button",
|
|
onClick: _ctx.handleConfirm
|
|
}, toDisplayString(_ctx.t("el.table.confirmFilter")), 11, ["disabled", "onClick"]),
|
|
createElementVNode("button", {
|
|
type: "button",
|
|
onClick: _ctx.handleReset
|
|
}, toDisplayString(_ctx.t("el.table.resetFilter")), 9, ["onClick"])
|
|
], 2)
|
|
])) : (openBlock(), createElementBlock("ul", {
|
|
key: 1,
|
|
class: normalizeClass(_ctx.ns.e("list"))
|
|
}, [
|
|
createElementVNode("li", {
|
|
class: normalizeClass([
|
|
_ctx.ns.e("list-item"),
|
|
{
|
|
[_ctx.ns.is("active")]: _ctx.filterValue === void 0 || _ctx.filterValue === null
|
|
}
|
|
]),
|
|
onClick: ($event) => _ctx.handleSelect(null)
|
|
}, toDisplayString(_ctx.t("el.table.clearFilter")), 11, ["onClick"]),
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.filters, (filter) => {
|
|
return openBlock(), createElementBlock("li", {
|
|
key: filter.value,
|
|
class: normalizeClass([_ctx.ns.e("list-item"), _ctx.ns.is("active", _ctx.isActive(filter))]),
|
|
label: filter.value,
|
|
onClick: ($event) => _ctx.handleSelect(filter.value)
|
|
}, toDisplayString(filter.text), 11, ["label", "onClick"]);
|
|
}), 128))
|
|
], 2))
|
|
]),
|
|
default: withCtx(() => [
|
|
withDirectives((openBlock(), createElementBlock("span", {
|
|
class: normalizeClass([
|
|
`${_ctx.ns.namespace.value}-table__column-filter-trigger`,
|
|
`${_ctx.ns.namespace.value}-none-outline`
|
|
]),
|
|
onClick: _ctx.showFilterPanel
|
|
}, [
|
|
createVNode(_component_el_icon, null, {
|
|
default: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "filter-icon", {}, () => [
|
|
_ctx.column.filterOpened ? (openBlock(), createBlock(_component_arrow_up, { key: 0 })) : (openBlock(), createBlock(_component_arrow_down, { key: 1 }))
|
|
])
|
|
]),
|
|
_: 3
|
|
})
|
|
], 10, ["onClick"])), [
|
|
[_directive_click_outside, _ctx.hideFilterPanel, _ctx.popperPaneRef]
|
|
])
|
|
]),
|
|
_: 3
|
|
}, 8, ["visible", "placement", "popper-class", "append-to"]);
|
|
}
|
|
var FilterPanel = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["render", _sfc_render$4], ["__file", "filter-panel.vue"]]);
|
|
|
|
function useLayoutObserver(root) {
|
|
const instance = getCurrentInstance();
|
|
onBeforeMount(() => {
|
|
tableLayout.value.addObserver(instance);
|
|
});
|
|
onMounted(() => {
|
|
onColumnsChange(tableLayout.value);
|
|
onScrollableChange(tableLayout.value);
|
|
});
|
|
onUpdated(() => {
|
|
onColumnsChange(tableLayout.value);
|
|
onScrollableChange(tableLayout.value);
|
|
});
|
|
onUnmounted(() => {
|
|
tableLayout.value.removeObserver(instance);
|
|
});
|
|
const tableLayout = 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 = getCurrentInstance();
|
|
const parent = 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 = ref(null);
|
|
const dragging = ref(false);
|
|
const dragState = 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) => {
|
|
if (column.children && column.children.length > 0)
|
|
return;
|
|
const el = event.target;
|
|
if (!isElement$1(el)) {
|
|
return;
|
|
}
|
|
const target = el == null ? void 0 : el.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 clickTarget = event.currentTarget;
|
|
if (["ascending", "descending"].some((str) => hasClass(clickTarget, str) && !column.sortOrders.includes(str))) {
|
|
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 = 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 = inject(TABLE_INJECTION_KEY);
|
|
const columnRows = computed(() => {
|
|
return convertToRows(props.store.states.originColumns.value);
|
|
});
|
|
const isGroup = 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 = defineComponent({
|
|
name: "ElTableHeader",
|
|
components: {
|
|
ElCheckbox
|
|
},
|
|
props: {
|
|
fixed: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
store: {
|
|
required: true,
|
|
type: Object
|
|
},
|
|
border: Boolean,
|
|
defaultSort: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
prop: "",
|
|
order: ""
|
|
};
|
|
}
|
|
},
|
|
appendFilterPanelTo: {
|
|
type: String
|
|
}
|
|
},
|
|
setup(props, { emit }) {
|
|
const instance = getCurrentInstance();
|
|
const parent = inject(TABLE_INJECTION_KEY);
|
|
const ns = useNamespace("table");
|
|
const filterPanels = ref({});
|
|
const { onColumnsChange, onScrollableChange } = useLayoutObserver(parent);
|
|
onMounted(async () => {
|
|
await nextTick();
|
|
await 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 h$1("thead", {
|
|
class: { [ns.is("group")]: isGroup }
|
|
}, columnRows.map((subColumns, rowIndex) => h$1("tr", {
|
|
class: getHeaderRowClass(rowIndex),
|
|
key: rowIndex,
|
|
style: getHeaderRowStyle(rowIndex)
|
|
}, subColumns.map((column, cellIndex) => {
|
|
if (column.rowSpan > rowSpan) {
|
|
rowSpan = column.rowSpan;
|
|
}
|
|
return h$1("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) => {
|
|
if ($event.currentTarget.classList.contains("noclick")) {
|
|
return;
|
|
}
|
|
handleHeaderClick($event, column);
|
|
},
|
|
onContextmenu: ($event) => handleHeaderContextMenu($event, column),
|
|
onMousedown: ($event) => handleMouseDown($event, column),
|
|
onMousemove: ($event) => handleMouseMove($event, column),
|
|
onMouseout: handleMouseOut
|
|
}, [
|
|
h$1("div", {
|
|
class: [
|
|
"cell",
|
|
column.filteredValue && column.filteredValue.length > 0 ? "highlight" : ""
|
|
]
|
|
}, [
|
|
column.renderHeader ? column.renderHeader({
|
|
column,
|
|
$index: cellIndex,
|
|
store,
|
|
_self: $parent
|
|
}) : column.label,
|
|
column.sortable && h$1("span", {
|
|
onClick: ($event) => handleSortClick($event, column),
|
|
class: "caret-wrapper"
|
|
}, [
|
|
h$1("i", {
|
|
onClick: ($event) => handleSortClick($event, column, "ascending"),
|
|
class: "sort-caret ascending"
|
|
}),
|
|
h$1("i", {
|
|
onClick: ($event) => handleSortClick($event, column, "descending"),
|
|
class: "sort-caret descending"
|
|
})
|
|
]),
|
|
column.filterable && h$1(FilterPanel, {
|
|
store,
|
|
placement: column.filterPlacement || "bottom-start",
|
|
appendTo: $parent.appendFilterPanelTo,
|
|
column,
|
|
upDataColumn: (key, value) => {
|
|
column[key] = value;
|
|
}
|
|
}, {
|
|
"filter-icon": () => column.renderFilterIcon ? column.renderFilterIcon({
|
|
filterOpened: column.filterOpened
|
|
}) : null
|
|
})
|
|
])
|
|
]);
|
|
}))));
|
|
}
|
|
});
|
|
|
|
function isGreaterThan(a, b, epsilon = 0.03) {
|
|
return a - b > epsilon;
|
|
}
|
|
function useEvents(props) {
|
|
const parent = inject(TABLE_INJECTION_KEY);
|
|
const tooltipContent = ref("");
|
|
const tooltipTrigger = ref(h$1("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 getPadding = (el) => {
|
|
const style = window.getComputedStyle(el, null);
|
|
const paddingLeft = Number.parseInt(style.paddingLeft, 10) || 0;
|
|
const paddingRight = Number.parseInt(style.paddingRight, 10) || 0;
|
|
const paddingTop = Number.parseInt(style.paddingTop, 10) || 0;
|
|
const paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0;
|
|
return {
|
|
left: paddingLeft,
|
|
right: paddingRight,
|
|
top: paddingTop,
|
|
bottom: paddingBottom
|
|
};
|
|
};
|
|
const toggleRowClassByCell = (rowSpan, event, toggle) => {
|
|
let node = event.target.parentNode;
|
|
while (rowSpan > 1) {
|
|
node = node == null ? void 0 : node.nextSibling;
|
|
if (!node || node.nodeName !== "TR")
|
|
break;
|
|
toggle(node, "hover-row hover-fixed-row");
|
|
rowSpan--;
|
|
}
|
|
};
|
|
const handleCellMouseEnter = (event, row, tooltipOptions) => {
|
|
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);
|
|
if (cell.rowSpan > 1) {
|
|
toggleRowClassByCell(cell.rowSpan, event, addClass);
|
|
}
|
|
const hoverState = table.hoverState = { cell, column, row };
|
|
table == null ? void 0 : table.emit("cell-mouse-enter", hoverState.row, hoverState.column, hoverState.cell, event);
|
|
}
|
|
if (!tooltipOptions) {
|
|
return;
|
|
}
|
|
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 { width: rangeWidth, height: rangeHeight } = range.getBoundingClientRect();
|
|
const { width: cellChildWidth, height: cellChildHeight } = cellChild.getBoundingClientRect();
|
|
const { top, left, right, bottom } = getPadding(cellChild);
|
|
const horizontalPadding = left + right;
|
|
const verticalPadding = top + bottom;
|
|
if (isGreaterThan(rangeWidth + horizontalPadding, cellChildWidth) || isGreaterThan(rangeHeight + verticalPadding, cellChildHeight) || isGreaterThan(cellChild.scrollWidth, cellChildWidth)) {
|
|
createTablePopper(tooltipOptions, cell.innerText || cell.textContent, cell, table);
|
|
}
|
|
};
|
|
const handleCellMouseLeave = (event) => {
|
|
const cell = getCell(event);
|
|
if (!cell)
|
|
return;
|
|
if (cell.rowSpan > 1) {
|
|
toggleRowClassByCell(cell.rowSpan, event, removeClass);
|
|
}
|
|
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 = 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 = 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 = 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, tooltipOptions, 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 h$1("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 = Object.assign({}, 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 = `${getKeyOfRow(row, $index)},${cellIndex}`;
|
|
const patchKey = columnData.columnKey || columnData.rawColumnKey || "";
|
|
const tdChildren = cellChildren(cellIndex, column, data);
|
|
const mergedTooltipOptions = column.showOverflowTooltip && merge({
|
|
effect: tooltipEffect
|
|
}, tooltipOptions, column.showOverflowTooltip);
|
|
return h$1("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, mergedTooltipOptions),
|
|
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,
|
|
h$1("tr", {
|
|
key: `expanded-row__${tr.key}`
|
|
}, [
|
|
h$1("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,
|
|
tooltipOptions: {
|
|
type: Object
|
|
},
|
|
context: {
|
|
default: () => ({}),
|
|
type: Object
|
|
},
|
|
rowClassName: [String, Function],
|
|
rowStyle: [Object, Function],
|
|
fixed: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
highlight: Boolean
|
|
};
|
|
var defaultProps$3 = defaultProps$2;
|
|
|
|
var TableBody = defineComponent({
|
|
name: "ElTableBody",
|
|
props: defaultProps$3,
|
|
setup(props) {
|
|
const instance = getCurrentInstance();
|
|
const parent = inject(TABLE_INJECTION_KEY);
|
|
const ns = useNamespace("table");
|
|
const { wrappedRowRender, tooltipContent, tooltipTrigger } = useRender$1(props);
|
|
const { onColumnsChange, onScrollableChange } = useLayoutObserver(parent);
|
|
const hoveredCellList = [];
|
|
watch(props.store.states.hoverRow, (newVal, oldVal) => {
|
|
var _a;
|
|
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")}`));
|
|
let rowNum = newVal;
|
|
const childNodes = (_a = rows[rowNum]) == null ? void 0 : _a.childNodes;
|
|
if (childNodes == null ? void 0 : childNodes.length) {
|
|
let control = 0;
|
|
const indexes = Array.from(childNodes).reduce((acc, item, index) => {
|
|
var _a2, _b;
|
|
if (((_a2 = childNodes[index]) == null ? void 0 : _a2.colSpan) > 1) {
|
|
control = (_b = childNodes[index]) == null ? void 0 : _b.colSpan;
|
|
}
|
|
if (item.nodeName !== "TD" && control === 0) {
|
|
acc.push(index);
|
|
}
|
|
control > 0 && control--;
|
|
return acc;
|
|
}, []);
|
|
indexes.forEach((rowIndex) => {
|
|
var _a2;
|
|
rowNum = newVal;
|
|
while (rowNum > 0) {
|
|
const preChildNodes = (_a2 = rows[rowNum - 1]) == null ? void 0 : _a2.childNodes;
|
|
if (preChildNodes[rowIndex] && preChildNodes[rowIndex].nodeName === "TD" && preChildNodes[rowIndex].rowSpan > 1) {
|
|
addClass(preChildNodes[rowIndex], "hover-cell");
|
|
hoveredCellList.push(preChildNodes[rowIndex]);
|
|
break;
|
|
}
|
|
rowNum--;
|
|
}
|
|
});
|
|
} else {
|
|
hoveredCellList.forEach((item) => removeClass(item, "hover-cell"));
|
|
hoveredCellList.length = 0;
|
|
}
|
|
if (!props.store.states.isComplex.value || !isClient)
|
|
return;
|
|
rAF(() => {
|
|
const oldRow = rows[oldVal];
|
|
const newRow = rows[newVal];
|
|
if (oldRow && !oldRow.classList.contains("hover-fixed-row")) {
|
|
removeClass(oldRow, "hover-row");
|
|
}
|
|
if (newRow) {
|
|
addClass(newRow, "hover-row");
|
|
}
|
|
});
|
|
});
|
|
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 h$1("tbody", { tabIndex: -1 }, [
|
|
data.reduce((acc, row) => {
|
|
return acc.concat(wrappedRowRender(row, acc.length));
|
|
}, [])
|
|
]);
|
|
}
|
|
});
|
|
|
|
function useMapState() {
|
|
const table = inject(TABLE_INJECTION_KEY);
|
|
const store = table == null ? void 0 : table.store;
|
|
const leftFixedLeafCount = computed(() => {
|
|
return store.states.fixedLeafColumnsLength.value;
|
|
});
|
|
const rightFixedLeafCount = computed(() => {
|
|
return store.states.rightFixedColumns.value.length;
|
|
});
|
|
const columnsCount = computed(() => {
|
|
return store.states.columns.value.length;
|
|
});
|
|
const leftFixedCount = computed(() => {
|
|
return store.states.fixedColumns.value.length;
|
|
});
|
|
const rightFixedCount = 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 = 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 } = 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 h$1(h$1("tfoot", [
|
|
h$1("tr", {}, [
|
|
...columns.map((column, cellIndex) => h$1("td", {
|
|
key: cellIndex,
|
|
colspan: column.colSpan,
|
|
rowspan: column.rowSpan,
|
|
class: getCellClasses(columns, cellIndex),
|
|
style: getCellStyles(column, cellIndex)
|
|
}, [
|
|
h$1("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, ignoreSelectable = true) => {
|
|
store.toggleRowSelection(row, selected, false, ignoreSelectable);
|
|
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 });
|
|
};
|
|
const updateKeyChildren = (key, data) => {
|
|
store.updateKeyChildren(key, data);
|
|
};
|
|
return {
|
|
setCurrentRow,
|
|
getSelectionRows,
|
|
toggleRowSelection,
|
|
clearSelection,
|
|
clearFilter,
|
|
toggleAllSelection,
|
|
toggleRowExpansion,
|
|
clearSort,
|
|
sort,
|
|
updateKeyChildren
|
|
};
|
|
}
|
|
|
|
function useStyle(props, layout, store, table) {
|
|
const isHidden = ref(false);
|
|
const renderExpanded = ref(null);
|
|
const resizeProxyVisible = ref(false);
|
|
const setDragVisible = (visible) => {
|
|
resizeProxyVisible.value = visible;
|
|
};
|
|
const resizeState = ref({
|
|
width: null,
|
|
height: null,
|
|
headerHeight: null
|
|
});
|
|
const isGroup = ref(false);
|
|
const scrollbarViewStyle = {
|
|
display: "inline-block",
|
|
verticalAlign: "middle"
|
|
};
|
|
const tableWidth = ref();
|
|
const tableScrollHeight = ref(0);
|
|
const bodyScrollHeight = ref(0);
|
|
const headerScrollHeight = ref(0);
|
|
const footerScrollHeight = ref(0);
|
|
const appendScrollHeight = ref(0);
|
|
watchEffect(() => {
|
|
layout.setHeight(props.height);
|
|
});
|
|
watchEffect(() => {
|
|
layout.setMaxHeight(props.maxHeight);
|
|
});
|
|
watch(() => [props.currentRowKey, store.states.rowKey], ([currentRowKey, rowKey]) => {
|
|
if (!unref(rowKey) || !unref(currentRowKey))
|
|
return;
|
|
store.setCurrentRowKey(`${currentRowKey}`);
|
|
}, {
|
|
immediate: true
|
|
});
|
|
watch(() => props.data, (data) => {
|
|
table.store.commit("setData", data);
|
|
}, {
|
|
immediate: true,
|
|
deep: true
|
|
});
|
|
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 = computed(() => {
|
|
return props.height || props.maxHeight || store.states.fixedColumns.value.length > 0 || store.states.rightFixedColumns.value.length > 0;
|
|
});
|
|
const tableBodyStyles = computed(() => {
|
|
return {
|
|
width: layout.bodyWidth.value ? `${layout.bodyWidth.value}px` : ""
|
|
};
|
|
});
|
|
const doLayout = () => {
|
|
if (shouldUpdateHeight.value) {
|
|
layout.updateElsHeight();
|
|
}
|
|
layout.updateColumnsWidth();
|
|
requestAnimationFrame(syncPosition);
|
|
};
|
|
onMounted(async () => {
|
|
await 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.wrapRef;
|
|
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.wrapRef) {
|
|
useEventListener(table.refs.scrollBarRef.wrapRef, "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, _d;
|
|
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;
|
|
appendScrollHeight.value = ((_d = table.refs.appendWrapper) == null ? void 0 : _d.offsetHeight) || 0;
|
|
bodyScrollHeight.value = tableScrollHeight.value - headerScrollHeight.value - footerScrollHeight.value - appendScrollHeight.value;
|
|
if (shouldUpdateLayout) {
|
|
resizeState.value = {
|
|
width,
|
|
height,
|
|
headerHeight: props.showHeader && (tableHeader == null ? void 0 : tableHeader.offsetHeight) || 0
|
|
};
|
|
doLayout();
|
|
}
|
|
};
|
|
const tableSize = useFormSize();
|
|
const bodyWidth = computed(() => {
|
|
const { bodyWidth: bodyWidth_, scrollY, gutterWidth } = layout;
|
|
return bodyWidth_.value ? `${bodyWidth_.value - (scrollY.value ? gutterWidth : 0)}px` : "";
|
|
});
|
|
const tableLayout = computed(() => {
|
|
if (props.maxHeight)
|
|
return "fixed";
|
|
return props.tableLayout;
|
|
});
|
|
const emptyBlockStyle = 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 = 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 = computed(() => {
|
|
if (props.height) {
|
|
return {
|
|
height: "100%"
|
|
};
|
|
}
|
|
if (props.maxHeight) {
|
|
if (!Number.isNaN(Number(props.maxHeight))) {
|
|
return {
|
|
maxHeight: `${props.maxHeight - 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
|
|
};
|
|
}
|
|
|
|
function useKeyRender(table) {
|
|
const observer = ref();
|
|
const initWatchDom = () => {
|
|
const el = table.vnode.el;
|
|
const columnsWrapper = el.querySelector(".hidden-columns");
|
|
const config = { childList: true, subtree: true };
|
|
const updateOrderFns = table.store.states.updateOrderFns;
|
|
observer.value = new MutationObserver(() => {
|
|
updateOrderFns.forEach((fn) => fn());
|
|
});
|
|
observer.value.observe(columnsWrapper, config);
|
|
};
|
|
onMounted(() => {
|
|
initWatchDom();
|
|
});
|
|
onUnmounted(() => {
|
|
var _a;
|
|
(_a = observer.value) == null ? void 0 : _a.disconnect();
|
|
});
|
|
}
|
|
|
|
var defaultProps$1 = {
|
|
data: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
size: useSizeProp,
|
|
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,
|
|
tooltipOptions: Object,
|
|
spanMethod: Function,
|
|
selectOnIndeterminate: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
indent: {
|
|
type: Number,
|
|
default: 16
|
|
},
|
|
treeProps: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
hasChildren: "hasChildren",
|
|
children: "children",
|
|
checkStrictly: false
|
|
};
|
|
}
|
|
},
|
|
lazy: Boolean,
|
|
load: Function,
|
|
style: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
className: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
tableLayout: {
|
|
type: String,
|
|
default: "fixed"
|
|
},
|
|
scrollbarAlwaysOn: Boolean,
|
|
flexible: Boolean,
|
|
showOverflowTooltip: [Boolean, Object],
|
|
appendFilterPanelTo: String,
|
|
scrollbarTabindex: {
|
|
type: [Number, String],
|
|
default: void 0
|
|
}
|
|
};
|
|
|
|
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 h$1("colgroup", {}, columns.map((column) => h$1("col", getPropsData(column))));
|
|
}
|
|
hColgroup.props = ["columns", "tableLayout"];
|
|
|
|
const useScrollbar$1 = () => {
|
|
const scrollBarRef = 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$A = 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 = getCurrentInstance();
|
|
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 = computed(() => (store.states.data.value || []).length === 0);
|
|
const {
|
|
setCurrentRow,
|
|
getSelectionRows,
|
|
toggleRowSelection,
|
|
clearSelection,
|
|
clearFilter,
|
|
toggleAllSelection,
|
|
toggleRowExpansion,
|
|
clearSort,
|
|
sort,
|
|
updateKeyChildren
|
|
} = 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 = computed(() => {
|
|
var _a;
|
|
return (_a = props.sumText) != null ? _a : t("el.table.sumText");
|
|
});
|
|
const computedEmptyText = computed(() => {
|
|
var _a;
|
|
return (_a = props.emptyText) != null ? _a : t("el.table.emptyText");
|
|
});
|
|
const columns = computed(() => {
|
|
return convertToRows(store.states.originColumns.value)[0];
|
|
});
|
|
useKeyRender(table);
|
|
return {
|
|
ns,
|
|
layout,
|
|
store,
|
|
columns,
|
|
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,
|
|
updateKeyChildren,
|
|
t,
|
|
setDragVisible,
|
|
context: table,
|
|
computedSumText,
|
|
computedEmptyText,
|
|
tableLayout,
|
|
scrollbarViewStyle,
|
|
tableInnerStyle,
|
|
scrollbarStyle,
|
|
scrollBarRef,
|
|
scrollTo,
|
|
setScrollLeft,
|
|
setScrollTop
|
|
};
|
|
}
|
|
});
|
|
function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
|
|
const _component_hColgroup = resolveComponent("hColgroup");
|
|
const _component_table_header = resolveComponent("table-header");
|
|
const _component_table_body = resolveComponent("table-body");
|
|
const _component_table_footer = resolveComponent("table-footer");
|
|
const _component_el_scrollbar = resolveComponent("el-scrollbar");
|
|
const _directive_mousewheel = resolveDirective("mousewheel");
|
|
return openBlock(), createElementBlock("div", {
|
|
ref: "tableWrapper",
|
|
class: 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: normalizeStyle(_ctx.style),
|
|
"data-prefix": _ctx.ns.namespace.value,
|
|
onMouseleave: _ctx.handleMouseLeave
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(_ctx.ns.e("inner-wrapper")),
|
|
style: normalizeStyle(_ctx.tableInnerStyle)
|
|
}, [
|
|
createElementVNode("div", {
|
|
ref: "hiddenColumns",
|
|
class: "hidden-columns"
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 512),
|
|
_ctx.showHeader && _ctx.tableLayout === "fixed" ? withDirectives((openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
ref: "headerWrapper",
|
|
class: normalizeClass(_ctx.ns.e("header-wrapper"))
|
|
}, [
|
|
createElementVNode("table", {
|
|
ref: "tableHeader",
|
|
class: normalizeClass(_ctx.ns.e("header")),
|
|
style: normalizeStyle(_ctx.tableBodyStyles),
|
|
border: "0",
|
|
cellpadding: "0",
|
|
cellspacing: "0"
|
|
}, [
|
|
createVNode(_component_hColgroup, {
|
|
columns: _ctx.store.states.columns.value,
|
|
"table-layout": _ctx.tableLayout
|
|
}, null, 8, ["columns", "table-layout"]),
|
|
createVNode(_component_table_header, {
|
|
ref: "tableHeaderRef",
|
|
border: _ctx.border,
|
|
"default-sort": _ctx.defaultSort,
|
|
store: _ctx.store,
|
|
"append-filter-panel-to": _ctx.appendFilterPanelTo,
|
|
onSetDragVisible: _ctx.setDragVisible
|
|
}, null, 8, ["border", "default-sort", "store", "append-filter-panel-to", "onSetDragVisible"])
|
|
], 6)
|
|
], 2)), [
|
|
[_directive_mousewheel, _ctx.handleHeaderFooterMousewheel]
|
|
]) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", {
|
|
ref: "bodyWrapper",
|
|
class: normalizeClass(_ctx.ns.e("body-wrapper"))
|
|
}, [
|
|
createVNode(_component_el_scrollbar, {
|
|
ref: "scrollBarRef",
|
|
"view-style": _ctx.scrollbarViewStyle,
|
|
"wrap-style": _ctx.scrollbarStyle,
|
|
always: _ctx.scrollbarAlwaysOn,
|
|
tabindex: _ctx.scrollbarTabindex
|
|
}, {
|
|
default: withCtx(() => [
|
|
createElementVNode("table", {
|
|
ref: "tableBody",
|
|
class: normalizeClass(_ctx.ns.e("body")),
|
|
cellspacing: "0",
|
|
cellpadding: "0",
|
|
border: "0",
|
|
style: normalizeStyle({
|
|
width: _ctx.bodyWidth,
|
|
tableLayout: _ctx.tableLayout
|
|
})
|
|
}, [
|
|
createVNode(_component_hColgroup, {
|
|
columns: _ctx.store.states.columns.value,
|
|
"table-layout": _ctx.tableLayout
|
|
}, null, 8, ["columns", "table-layout"]),
|
|
_ctx.showHeader && _ctx.tableLayout === "auto" ? (openBlock(), createBlock(_component_table_header, {
|
|
key: 0,
|
|
ref: "tableHeaderRef",
|
|
class: normalizeClass(_ctx.ns.e("body-header")),
|
|
border: _ctx.border,
|
|
"default-sort": _ctx.defaultSort,
|
|
store: _ctx.store,
|
|
"append-filter-panel-to": _ctx.appendFilterPanelTo,
|
|
onSetDragVisible: _ctx.setDragVisible
|
|
}, null, 8, ["class", "border", "default-sort", "store", "append-filter-panel-to", "onSetDragVisible"])) : createCommentVNode("v-if", true),
|
|
createVNode(_component_table_body, {
|
|
context: _ctx.context,
|
|
highlight: _ctx.highlightCurrentRow,
|
|
"row-class-name": _ctx.rowClassName,
|
|
"tooltip-effect": _ctx.tooltipEffect,
|
|
"tooltip-options": _ctx.tooltipOptions,
|
|
"row-style": _ctx.rowStyle,
|
|
store: _ctx.store,
|
|
stripe: _ctx.stripe
|
|
}, null, 8, ["context", "highlight", "row-class-name", "tooltip-effect", "tooltip-options", "row-style", "store", "stripe"]),
|
|
_ctx.showSummary && _ctx.tableLayout === "auto" ? (openBlock(), createBlock(_component_table_footer, {
|
|
key: 1,
|
|
class: normalizeClass(_ctx.ns.e("body-footer")),
|
|
border: _ctx.border,
|
|
"default-sort": _ctx.defaultSort,
|
|
store: _ctx.store,
|
|
"sum-text": _ctx.computedSumText,
|
|
"summary-method": _ctx.summaryMethod
|
|
}, null, 8, ["class", "border", "default-sort", "store", "sum-text", "summary-method"])) : createCommentVNode("v-if", true)
|
|
], 6),
|
|
_ctx.isEmpty ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
ref: "emptyBlock",
|
|
style: normalizeStyle(_ctx.emptyBlockStyle),
|
|
class: normalizeClass(_ctx.ns.e("empty-block"))
|
|
}, [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(_ctx.ns.e("empty-text"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "empty", {}, () => [
|
|
createTextVNode(toDisplayString(_ctx.computedEmptyText), 1)
|
|
])
|
|
], 2)
|
|
], 6)) : createCommentVNode("v-if", true),
|
|
_ctx.$slots.append ? (openBlock(), createElementBlock("div", {
|
|
key: 1,
|
|
ref: "appendWrapper",
|
|
class: normalizeClass(_ctx.ns.e("append-wrapper"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "append")
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
]),
|
|
_: 3
|
|
}, 8, ["view-style", "wrap-style", "always", "tabindex"])
|
|
], 2),
|
|
_ctx.showSummary && _ctx.tableLayout === "fixed" ? withDirectives((openBlock(), createElementBlock("div", {
|
|
key: 1,
|
|
ref: "footerWrapper",
|
|
class: normalizeClass(_ctx.ns.e("footer-wrapper"))
|
|
}, [
|
|
createElementVNode("table", {
|
|
class: normalizeClass(_ctx.ns.e("footer")),
|
|
cellspacing: "0",
|
|
cellpadding: "0",
|
|
border: "0",
|
|
style: normalizeStyle(_ctx.tableBodyStyles)
|
|
}, [
|
|
createVNode(_component_hColgroup, {
|
|
columns: _ctx.store.states.columns.value,
|
|
"table-layout": _ctx.tableLayout
|
|
}, null, 8, ["columns", "table-layout"]),
|
|
createVNode(_component_table_footer, {
|
|
border: _ctx.border,
|
|
"default-sort": _ctx.defaultSort,
|
|
store: _ctx.store,
|
|
"sum-text": _ctx.computedSumText,
|
|
"summary-method": _ctx.summaryMethod
|
|
}, null, 8, ["border", "default-sort", "store", "sum-text", "summary-method"])
|
|
], 6)
|
|
], 2)), [
|
|
[vShow, !_ctx.isEmpty],
|
|
[_directive_mousewheel, _ctx.handleHeaderFooterMousewheel]
|
|
]) : createCommentVNode("v-if", true),
|
|
_ctx.border || _ctx.isGroup ? (openBlock(), createElementBlock("div", {
|
|
key: 2,
|
|
class: normalizeClass(_ctx.ns.e("border-left-patch"))
|
|
}, null, 2)) : createCommentVNode("v-if", true)
|
|
], 6),
|
|
withDirectives(createElementVNode("div", {
|
|
ref: "resizeProxy",
|
|
class: normalizeClass(_ctx.ns.e("column-resize-proxy"))
|
|
}, null, 2), [
|
|
[vShow, _ctx.resizeProxyVisible]
|
|
])
|
|
], 46, ["data-prefix", "onMouseleave"]);
|
|
}
|
|
var Table = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["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, column }) {
|
|
function isDisabled() {
|
|
return store.states.data.value && store.states.data.value.length === 0;
|
|
}
|
|
return h$1(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,
|
|
ariaLabel: column.label
|
|
});
|
|
},
|
|
renderCell({
|
|
row,
|
|
column,
|
|
store,
|
|
$index
|
|
}) {
|
|
return h$1(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),
|
|
ariaLabel: column.label
|
|
});
|
|
},
|
|
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 h$1("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 h$1("div", {
|
|
class: classes,
|
|
onClick: callback
|
|
}, {
|
|
default: () => {
|
|
return [
|
|
h$1(ElIcon, null, {
|
|
default: () => {
|
|
return [h$1(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
|
|
}, createPlaceholder = false) {
|
|
const { ns } = store;
|
|
if (!treeNode) {
|
|
if (createPlaceholder) {
|
|
return [
|
|
h$1("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(h$1("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(h$1("div", {
|
|
class: expandClasses,
|
|
onClick: callback
|
|
}, {
|
|
default: () => {
|
|
return [
|
|
h$1(ElIcon, { class: { [ns.is("loading")]: treeNode.loading } }, {
|
|
default: () => [h$1(icon)]
|
|
})
|
|
];
|
|
}
|
|
}));
|
|
} else {
|
|
ele.push(h$1("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 = 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)) {
|
|
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",
|
|
"filteredValue",
|
|
"sortable",
|
|
"index",
|
|
"formatter",
|
|
"className",
|
|
"labelClassName",
|
|
"filterClassName",
|
|
"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)) {
|
|
watch(() => props_[columnKey], (newVal) => {
|
|
instance.columnConfig.value[key] = newVal;
|
|
});
|
|
}
|
|
});
|
|
};
|
|
return {
|
|
registerComplexWatchers,
|
|
registerNormalWatchers
|
|
};
|
|
}
|
|
|
|
function useRender(props, slots, owner) {
|
|
const instance = getCurrentInstance();
|
|
const columnId = ref("");
|
|
const isSubColumn = ref(false);
|
|
const realAlign = ref();
|
|
const realHeaderAlign = ref();
|
|
const ns = useNamespace("table");
|
|
watchEffect(() => {
|
|
realAlign.value = props.align ? `is-${props.align}` : null;
|
|
realAlign.value;
|
|
});
|
|
watchEffect(() => {
|
|
realHeaderAlign.value = props.headerAlign ? `is-${props.headerAlign}` : realAlign.value;
|
|
realHeaderAlign.value;
|
|
});
|
|
const columnOrTableParent = computed(() => {
|
|
let parent = instance.vnode.vParent || instance.parent;
|
|
while (parent && !parent.tableId && !parent.columnId) {
|
|
parent = parent.vnode.vParent || parent.parent;
|
|
}
|
|
return parent;
|
|
});
|
|
const hasTreeColumn = 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 = ref(parseWidth(props.width));
|
|
const realMinWidth = 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 = `${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"];
|
|
return renderSlot(slots, "header", scope, () => [column.label]);
|
|
};
|
|
}
|
|
if (slots["filter-icon"]) {
|
|
column.renderFilterIcon = (scope) => {
|
|
return renderSlot(slots, "filter-icon", scope);
|
|
};
|
|
}
|
|
let originRenderCell = column.renderCell;
|
|
if (column.type === "expand") {
|
|
column.renderCell = (data) => h$1("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 !== Comment) ? vnodes : originRenderCell(data);
|
|
} else {
|
|
children = originRenderCell(data);
|
|
}
|
|
const { columns } = owner.value.store.states;
|
|
const firstUserColumnIndex = columns.value.findIndex((item) => item.type === "default");
|
|
const shouldCreatePlaceholder = hasTreeColumn.value && data.cellIndex === firstUserColumnIndex;
|
|
const prefix = treeCellPrefix(data, shouldCreatePlaceholder);
|
|
const props2 = {
|
|
class: "cell",
|
|
style: {}
|
|
};
|
|
if (column.showOverflowTooltip) {
|
|
props2.class = `${props2.class} ${unref(ns.namespace)}-tooltip`;
|
|
props2.style = {
|
|
width: `${(data.column.realWidth || Number(data.column.width)) - 1}px`
|
|
};
|
|
}
|
|
checkSubColumn(children);
|
|
return h$1("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);
|
|
};
|
|
const updateColumnOrder = () => {
|
|
owner.value.store.commit("updateColumnOrder", instance.columnConfig.value);
|
|
};
|
|
return {
|
|
columnId,
|
|
realAlign,
|
|
isSubColumn,
|
|
realHeaderAlign,
|
|
columnOrTableParent,
|
|
setColumnWidth,
|
|
setColumnForcedProps,
|
|
setColumnRenders,
|
|
getPropsData,
|
|
getColumnElIndex,
|
|
updateColumnOrder
|
|
};
|
|
}
|
|
|
|
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,
|
|
showOverflowTooltip: {
|
|
type: [Boolean, Object],
|
|
default: void 0
|
|
},
|
|
fixed: [Boolean, String],
|
|
formatter: Function,
|
|
selectable: Function,
|
|
reserveSelection: Boolean,
|
|
filterMethod: Function,
|
|
filteredValue: Array,
|
|
filters: Array,
|
|
filterPlacement: String,
|
|
filterMultiple: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
filterClassName: String,
|
|
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 = defineComponent({
|
|
name: "ElTableColumn",
|
|
components: {
|
|
ElCheckbox
|
|
},
|
|
props: defaultProps,
|
|
setup(props, { slots }) {
|
|
const instance = getCurrentInstance();
|
|
const columnConfig = ref({});
|
|
const owner = 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,
|
|
updateColumnOrder
|
|
} = useRender(props, slots, owner);
|
|
const parent = columnOrTableParent.value;
|
|
columnId.value = `${parent.tableId || parent.columnId}_column_${columnIdSeed++}`;
|
|
onBeforeMount(() => {
|
|
isSubColumn.value = owner.value !== parent;
|
|
const type = props.type || "default";
|
|
const sortable = props.sortable === "" ? true : props.sortable;
|
|
const showOverflowTooltip = isUndefined(props.showOverflowTooltip) ? parent.props.showOverflowTooltip : props.showOverflowTooltip;
|
|
const defaults = {
|
|
...cellStarts[type],
|
|
id: columnId.value,
|
|
type,
|
|
property: props.prop || props.property,
|
|
align: realAlign,
|
|
headerAlign: realHeaderAlign,
|
|
showOverflowTooltip,
|
|
filterable: props.filters || props.filterMethod,
|
|
filteredValue: [],
|
|
filterPlacement: "",
|
|
filterClassName: "",
|
|
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",
|
|
"filterClassName"
|
|
];
|
|
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();
|
|
});
|
|
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, updateColumnOrder);
|
|
});
|
|
onBeforeUnmount(() => {
|
|
const getColumnIndex = columnConfig.value.getColumnIndex;
|
|
const columnIndex = getColumnIndex ? getColumnIndex() : -1;
|
|
columnIndex > -1 && owner.value.store.commit("removeColumn", columnConfig.value, isSubColumn.value ? parent.columnConfig.value : null, updateColumnOrder);
|
|
});
|
|
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 === Fragment && Array.isArray(childNode.children)) {
|
|
childNode.children.forEach((vnode2) => {
|
|
if ((vnode2 == null ? void 0 : vnode2.patchFlag) !== 1024 && !isString$1(vnode2 == null ? void 0 : vnode2.children)) {
|
|
children.push(vnode2);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
const vnode = h$1("div", children);
|
|
return vnode;
|
|
} catch (e) {
|
|
return h$1("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 _columns = computed(() => unref(columns).map((column, index) => {
|
|
var _a, _b;
|
|
return {
|
|
...column,
|
|
key: (_b = (_a = column.key) != null ? _a : column.dataKey) != null ? _b : index
|
|
};
|
|
}));
|
|
const visibleColumns = computed(() => {
|
|
return unref(_columns).filter((column) => !column.hidden);
|
|
});
|
|
const fixedColumnsOnLeft = computed(() => unref(visibleColumns).filter((column) => column.fixed === "left" || column.fixed === true));
|
|
const fixedColumnsOnRight = computed(() => unref(visibleColumns).filter((column) => column.fixed === "right"));
|
|
const normalColumns = computed(() => unref(visibleColumns).filter((column) => !column.fixed));
|
|
const mainColumns = computed(() => {
|
|
const ret = [];
|
|
unref(fixedColumnsOnLeft).forEach((column) => {
|
|
ret.push({
|
|
...column,
|
|
placeholderSign
|
|
});
|
|
});
|
|
unref(normalColumns).forEach((column) => {
|
|
ret.push(column);
|
|
});
|
|
unref(fixedColumnsOnRight).forEach((column) => {
|
|
ret.push({
|
|
...column,
|
|
placeholderSign
|
|
});
|
|
});
|
|
return ret;
|
|
});
|
|
const hasFixedColumns = computed(() => {
|
|
return unref(fixedColumnsOnLeft).length || unref(fixedColumnsOnRight).length;
|
|
});
|
|
const columnsStyles = computed(() => {
|
|
return unref(_columns).reduce((style, column) => {
|
|
style[column.key] = calcColumnStyle(column, unref(fixed), props.fixed);
|
|
return style;
|
|
}, {});
|
|
});
|
|
const columnsTotalWidth = computed(() => {
|
|
return unref(visibleColumns).reduce((width, column) => width + column.width, 0);
|
|
});
|
|
const getColumn = (key) => {
|
|
return unref(_columns).find((column) => column.key === key);
|
|
};
|
|
const getColumnStyle = (key) => {
|
|
return 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: _columns,
|
|
columnsStyles,
|
|
columnsTotalWidth,
|
|
fixedColumnsOnLeft,
|
|
fixedColumnsOnRight,
|
|
hasFixedColumns,
|
|
mainColumns,
|
|
normalColumns,
|
|
visibleColumns,
|
|
getColumn,
|
|
getColumnStyle,
|
|
updateColumnWidth,
|
|
onColumnSorted
|
|
};
|
|
}
|
|
|
|
const useScrollbar = (props, {
|
|
mainTableRef,
|
|
leftTableRef,
|
|
rightTableRef,
|
|
onMaybeEndReached
|
|
}) => {
|
|
const scrollPos = 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(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, 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 } = unref(scrollPos);
|
|
if (scrollTop !== currentScrollTop)
|
|
scrollToTop(scrollTop);
|
|
}
|
|
function scrollToRow(row, strategy = "auto") {
|
|
var _a;
|
|
(_a = mainTableRef.value) == null ? void 0 : _a.scrollToRow(row, strategy);
|
|
}
|
|
watch(() => unref(scrollPos).scrollTop, (cur, prev) => {
|
|
if (cur > prev)
|
|
onMaybeEndReached();
|
|
});
|
|
return {
|
|
scrollPos,
|
|
scrollTo,
|
|
scrollToLeft,
|
|
scrollToTop,
|
|
scrollToRow,
|
|
onScroll,
|
|
onVerticalScroll
|
|
};
|
|
};
|
|
|
|
const useRow = (props, {
|
|
mainTableRef,
|
|
leftTableRef,
|
|
rightTableRef,
|
|
tableInstance,
|
|
ns,
|
|
isScrolling
|
|
}) => {
|
|
const vm = getCurrentInstance();
|
|
const { emit } = vm;
|
|
const isResetting = shallowRef(false);
|
|
const expandedRowKeys = ref(props.defaultExpandedRowKeys || []);
|
|
const lastRenderedRowIndex = ref(-1);
|
|
const resetIndex = shallowRef(null);
|
|
const rowHeights = ref({});
|
|
const pendingRowHeights = ref({});
|
|
const leftTableHeights = shallowRef({});
|
|
const mainTableHeights = shallowRef({});
|
|
const rightTableHeights = shallowRef({});
|
|
const isDynamic = computed(() => isNumber(props.estimatedRowHeight));
|
|
function onRowsRendered(params) {
|
|
var _a;
|
|
(_a = props.onRowsRendered) == null ? void 0 : _a.call(props, params);
|
|
if (params.rowCacheEnd > unref(lastRenderedRowIndex)) {
|
|
lastRenderedRowIndex.value = params.rowCacheEnd;
|
|
}
|
|
}
|
|
function onRowHovered({ hovered, rowKey }) {
|
|
if (isScrolling.value) {
|
|
return;
|
|
}
|
|
const tableRoot = tableInstance.vnode.el;
|
|
const rows = tableRoot.querySelectorAll(`[rowkey="${String(rowKey)}"]`);
|
|
rows.forEach((row) => {
|
|
if (hovered) {
|
|
row.classList.add(ns.is("hovered"));
|
|
} else {
|
|
row.classList.remove(ns.is("hovered"));
|
|
}
|
|
});
|
|
}
|
|
function onRowExpanded({
|
|
expanded,
|
|
rowData,
|
|
rowIndex,
|
|
rowKey
|
|
}) {
|
|
var _a, _b;
|
|
const _expandedRowKeys = [...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 = { ...unref(rowHeights), ...unref(pendingRowHeights) };
|
|
resetAfterIndex(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 (!unref(isDynamic))
|
|
return;
|
|
[mainTableRef, leftTableRef, rightTableRef].forEach((tableRef) => {
|
|
const table = unref(tableRef);
|
|
if (table)
|
|
table.resetAfterRowIndex(index, forceUpdate);
|
|
});
|
|
}
|
|
function resetHeights(rowKey, height, rowIdx) {
|
|
const resetIdx = 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 (unref(rowHeights)[rowKey] !== maximumHeight) {
|
|
resetHeights(rowKey, maximumHeight, rowIndex);
|
|
flushingRowHeights();
|
|
}
|
|
}
|
|
return {
|
|
expandedRowKeys,
|
|
lastRenderedRowIndex,
|
|
isDynamic,
|
|
isResetting,
|
|
rowHeights,
|
|
resetAfterIndex,
|
|
onRowExpanded,
|
|
onRowHovered,
|
|
onRowsRendered,
|
|
onRowHeightChange
|
|
};
|
|
};
|
|
|
|
const useData = (props, { expandedRowKeys, lastRenderedRowIndex, resetAfterIndex }) => {
|
|
const depthMap = ref({});
|
|
const flattenedData = computed(() => {
|
|
const depths = {};
|
|
const { data: data2, rowKey } = props;
|
|
const _expandedRowKeys = 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 = computed(() => {
|
|
const { data: data2, expandColumnKey } = props;
|
|
return expandColumnKey ? unref(flattenedData) : data2;
|
|
});
|
|
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$1(listLike) ? listLike.reduce(sumReducer, 0) : listLike;
|
|
};
|
|
const tryCall = (fLike, params, defaultRet = {}) => {
|
|
return isFunction$1(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) => isVNode(ComponentLike) ? (props) => h$1(ComponentLike, props) : ComponentLike;
|
|
|
|
const useStyles = (props, {
|
|
columnsTotalWidth,
|
|
data,
|
|
fixedColumnsOnLeft,
|
|
fixedColumnsOnRight
|
|
}) => {
|
|
const bodyWidth = computed(() => {
|
|
const { fixed, width, vScrollbarSize } = props;
|
|
const ret = width - vScrollbarSize;
|
|
return fixed ? Math.max(Math.round(unref(columnsTotalWidth)), ret) : ret;
|
|
});
|
|
const headerWidth = computed(() => unref(bodyWidth) + props.vScrollbarSize);
|
|
const mainTableHeight = computed(() => {
|
|
const { height = 0, maxHeight = 0, footerHeight: footerHeight2, hScrollbarSize } = props;
|
|
if (maxHeight > 0) {
|
|
const _fixedRowsHeight = unref(fixedRowsHeight);
|
|
const _rowsHeight = unref(rowsHeight);
|
|
const _headerHeight = unref(headerHeight);
|
|
const total = _headerHeight + _fixedRowsHeight + _rowsHeight + hScrollbarSize;
|
|
return Math.min(total, maxHeight - footerHeight2);
|
|
}
|
|
return height - footerHeight2;
|
|
});
|
|
const rowsHeight = computed(() => {
|
|
const { rowHeight, estimatedRowHeight } = props;
|
|
const _data = unref(data);
|
|
if (isNumber(estimatedRowHeight)) {
|
|
return _data.length * estimatedRowHeight;
|
|
}
|
|
return _data.length * rowHeight;
|
|
});
|
|
const fixedTableHeight = computed(() => {
|
|
const { maxHeight } = props;
|
|
const tableHeight = unref(mainTableHeight);
|
|
if (isNumber(maxHeight) && maxHeight > 0)
|
|
return tableHeight;
|
|
const totalHeight = unref(rowsHeight) + unref(headerHeight) + unref(fixedRowsHeight);
|
|
return Math.min(tableHeight, totalHeight);
|
|
});
|
|
const mapColumn = (column) => column.width;
|
|
const leftTableWidth = computed(() => sum(unref(fixedColumnsOnLeft).map(mapColumn)));
|
|
const rightTableWidth = computed(() => sum(unref(fixedColumnsOnRight).map(mapColumn)));
|
|
const headerHeight = computed(() => sum(props.headerHeight));
|
|
const fixedRowsHeight = computed(() => {
|
|
var _a;
|
|
return (((_a = props.fixedData) == null ? void 0 : _a.length) || 0) * props.rowHeight;
|
|
});
|
|
const windowHeight = computed(() => {
|
|
return unref(mainTableHeight) - unref(headerHeight) - unref(fixedRowsHeight);
|
|
});
|
|
const rootStyle = computed(() => {
|
|
const { style = {}, height, width } = props;
|
|
return enforceUnit({
|
|
...style,
|
|
height,
|
|
width
|
|
});
|
|
});
|
|
const footerHeight = computed(() => enforceUnit({ height: props.footerHeight }));
|
|
const emptyStyle = computed(() => ({
|
|
top: addUnit(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 = ref();
|
|
const width$ = ref(0);
|
|
const height$ = ref(0);
|
|
let resizerStopper;
|
|
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;
|
|
});
|
|
onBeforeUnmount(() => {
|
|
resizerStopper == null ? void 0 : resizerStopper();
|
|
});
|
|
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 = ref();
|
|
const leftTableRef = ref();
|
|
const rightTableRef = ref();
|
|
const {
|
|
columns,
|
|
columnsStyles,
|
|
columnsTotalWidth,
|
|
fixedColumnsOnLeft,
|
|
fixedColumnsOnRight,
|
|
hasFixedColumns,
|
|
mainColumns,
|
|
onColumnSorted
|
|
} = useColumns(props, toRef(props, "columns"), toRef(props, "fixed"));
|
|
const {
|
|
scrollTo,
|
|
scrollToLeft,
|
|
scrollToTop,
|
|
scrollToRow,
|
|
onScroll,
|
|
onVerticalScroll,
|
|
scrollPos
|
|
} = useScrollbar(props, {
|
|
mainTableRef,
|
|
leftTableRef,
|
|
rightTableRef,
|
|
onMaybeEndReached
|
|
});
|
|
const ns = useNamespace("table-v2");
|
|
const instance = getCurrentInstance();
|
|
const isScrolling = shallowRef(false);
|
|
const {
|
|
expandedRowKeys,
|
|
lastRenderedRowIndex,
|
|
isDynamic,
|
|
isResetting,
|
|
rowHeights,
|
|
resetAfterIndex,
|
|
onRowExpanded,
|
|
onRowHeightChange,
|
|
onRowHovered,
|
|
onRowsRendered
|
|
} = useRow(props, {
|
|
mainTableRef,
|
|
leftTableRef,
|
|
rightTableRef,
|
|
tableInstance: instance,
|
|
ns,
|
|
isScrolling
|
|
});
|
|
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 containerRef = ref();
|
|
const showEmpty = computed(() => {
|
|
const noData = unref(data).length === 0;
|
|
return isArray$1(props.fixedData) ? props.fixedData.length === 0 && noData : noData;
|
|
});
|
|
function getRowHeight(rowIndex) {
|
|
const { estimatedRowHeight, rowHeight, rowKey } = props;
|
|
if (!estimatedRowHeight)
|
|
return rowHeight;
|
|
return unref(rowHeights)[unref(data)[rowIndex][rowKey]] || estimatedRowHeight;
|
|
}
|
|
function onMaybeEndReached() {
|
|
const { onEndReached } = props;
|
|
if (!onEndReached)
|
|
return;
|
|
const { scrollTop } = unref(scrollPos);
|
|
const _totalHeight = unref(rowsHeight);
|
|
const clientHeight = unref(windowHeight);
|
|
const heightUntilEnd = _totalHeight - (scrollTop + clientHeight) + props.hScrollbarSize;
|
|
if (unref(lastRenderedRowIndex) >= 0 && _totalHeight === scrollTop + unref(mainTableHeight) - unref(headerHeight)) {
|
|
onEndReached(heightUntilEnd);
|
|
}
|
|
}
|
|
watch(() => props.expandedRowKeys, (val) => expandedRowKeys.value = val, {
|
|
deep: true
|
|
});
|
|
return {
|
|
columns,
|
|
containerRef,
|
|
mainTableRef,
|
|
leftTableRef,
|
|
rightTableRef,
|
|
isDynamic,
|
|
isResetting,
|
|
isScrolling,
|
|
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)) || "";
|
|
const defaultSlot = renderSlot(slots, "default", props, () => [displayText]);
|
|
return createVNode("div", {
|
|
"class": props.class,
|
|
"title": displayText,
|
|
"style": style
|
|
}, [defaultSlot]);
|
|
};
|
|
TableV2Cell.displayName = "ElTableV2Cell";
|
|
TableV2Cell.inheritAttrs = false;
|
|
var TableCell = TableV2Cell;
|
|
|
|
const HeaderCell = (props, {
|
|
slots
|
|
}) => renderSlot(slots, "default", props, () => {
|
|
var _a, _b;
|
|
return [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 = 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$1(node) && node.length === 1) {
|
|
return node[0];
|
|
}
|
|
return node;
|
|
}),
|
|
columns,
|
|
headerIndex
|
|
});
|
|
}
|
|
return createVNode("div", {
|
|
"class": props.class,
|
|
"style": style,
|
|
"role": "row"
|
|
}, [Cells]);
|
|
};
|
|
}
|
|
});
|
|
var HeaderRow = TableV2HeaderRow;
|
|
|
|
const COMPONENT_NAME$7 = "ElTableV2Header";
|
|
const TableV2Header = defineComponent({
|
|
name: COMPONENT_NAME$7,
|
|
props: tableV2HeaderProps,
|
|
setup(props, {
|
|
slots,
|
|
expose
|
|
}) {
|
|
const ns = useNamespace("table-v2");
|
|
const headerRef = ref();
|
|
const headerStyle = computed(() => enforceUnit({
|
|
width: props.width,
|
|
height: props.height
|
|
}));
|
|
const rowStyle = computed(() => enforceUnit({
|
|
width: props.rowWidth,
|
|
height: props.height
|
|
}));
|
|
const headerHeights = computed(() => castArray$1(unref(props.headerHeight)));
|
|
const scrollToLeft = (left) => {
|
|
const headerEl = unref(headerRef);
|
|
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 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 createVNode("div", {
|
|
"ref": headerRef,
|
|
"class": props.class,
|
|
"style": unref(headerStyle),
|
|
"role": "rowgroup"
|
|
}, [createVNode("div", {
|
|
"style": unref(rowStyle),
|
|
"class": ns.e("header")
|
|
}, [renderDynamicRows(), renderFixedRows()])]);
|
|
};
|
|
}
|
|
});
|
|
var Header = TableV2Header;
|
|
|
|
const useTableRow = (props) => {
|
|
const {
|
|
isScrolling
|
|
} = inject(TableV2InjectionKey);
|
|
const measured = ref(false);
|
|
const rowRef = ref();
|
|
const measurable = computed(() => {
|
|
return isNumber(props.estimatedRowHeight) && props.rowIndex >= 0;
|
|
});
|
|
const doMeasure = (isInit = false) => {
|
|
const $rowRef = unref(rowRef);
|
|
if (!$rowRef)
|
|
return;
|
|
const {
|
|
columns,
|
|
onRowHeightChange,
|
|
rowKey,
|
|
rowIndex,
|
|
style
|
|
} = props;
|
|
const {
|
|
height
|
|
} = $rowRef.getBoundingClientRect();
|
|
measured.value = true;
|
|
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 = computed(() => {
|
|
const {
|
|
rowData,
|
|
rowIndex,
|
|
rowKey,
|
|
onRowHover
|
|
} = props;
|
|
const handlers = props.rowEventHandlers || {};
|
|
const eventHandlers2 = {};
|
|
Object.entries(handlers).forEach(([eventName, handler]) => {
|
|
if (isFunction$1(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
|
|
});
|
|
};
|
|
onMounted(() => {
|
|
if (unref(measurable)) {
|
|
doMeasure(true);
|
|
}
|
|
});
|
|
return {
|
|
isScrolling,
|
|
measurable,
|
|
measured,
|
|
rowRef,
|
|
eventHandlers,
|
|
onExpand
|
|
};
|
|
};
|
|
const COMPONENT_NAME$6 = "ElTableV2TableRow";
|
|
const TableV2Row = 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$1(rowData.children) && rowData.children.length > 0 && column.key === expandColumnKey;
|
|
return slots.cell({
|
|
column,
|
|
columns,
|
|
columnIndex,
|
|
depth,
|
|
style: columnsStyles[column.key],
|
|
rowData,
|
|
rowIndex,
|
|
isScrolling: unref(isScrolling),
|
|
expandIconProps: expandable ? {
|
|
rowData,
|
|
rowIndex,
|
|
onExpand
|
|
} : void 0
|
|
});
|
|
});
|
|
if (slots.row) {
|
|
ColumnCells = slots.row({
|
|
cells: ColumnCells.map((node) => {
|
|
if (isArray$1(node) && node.length === 1) {
|
|
return node[0];
|
|
}
|
|
return node;
|
|
}),
|
|
style,
|
|
columns,
|
|
depth,
|
|
rowData,
|
|
rowIndex,
|
|
isScrolling: unref(isScrolling)
|
|
});
|
|
}
|
|
if (unref(measurable)) {
|
|
const {
|
|
height,
|
|
...exceptHeightStyle
|
|
} = style || {};
|
|
const _measured = unref(measured);
|
|
return createVNode("div", mergeProps({
|
|
"ref": rowRef,
|
|
"class": props.class,
|
|
"style": _measured ? style : exceptHeightStyle,
|
|
"role": "row"
|
|
}, attrs, unref(eventHandlers)), [ColumnCells]);
|
|
}
|
|
return createVNode("div", mergeProps(attrs, {
|
|
"ref": rowRef,
|
|
"class": props.class,
|
|
"style": style,
|
|
"role": "row"
|
|
}, unref(eventHandlers)), [ColumnCells]);
|
|
};
|
|
}
|
|
});
|
|
var Row = TableV2Row;
|
|
|
|
const SortIcon = (props) => {
|
|
const {
|
|
sortOrder
|
|
} = props;
|
|
return createVNode(ElIcon, {
|
|
"size": 14,
|
|
"class": props.class
|
|
}, {
|
|
default: () => [sortOrder === SortOrder.ASC ? createVNode(sort_up_default, null, null) : 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 createVNode(ElIcon, mergeProps(expandIconProps, {
|
|
"size": size,
|
|
"style": style
|
|
}), {
|
|
default: () => [createVNode(arrow_right_default, null, null)]
|
|
});
|
|
};
|
|
var ExpandIcon$1 = ExpandIcon;
|
|
|
|
const COMPONENT_NAME$5 = "ElTableV2Grid";
|
|
const useTableGrid = (props) => {
|
|
const headerRef = ref();
|
|
const bodyRef = ref();
|
|
const totalHeight = computed(() => {
|
|
const {
|
|
data,
|
|
rowHeight,
|
|
estimatedRowHeight
|
|
} = props;
|
|
if (estimatedRowHeight) {
|
|
return;
|
|
}
|
|
return data.length * rowHeight;
|
|
});
|
|
const fixedRowHeight = computed(() => {
|
|
const {
|
|
fixedData,
|
|
rowHeight
|
|
} = props;
|
|
return ((fixedData == null ? void 0 : fixedData.length) || 0) * rowHeight;
|
|
});
|
|
const headerHeight = computed(() => sum(props.headerHeight));
|
|
const gridHeight = computed(() => {
|
|
const {
|
|
height
|
|
} = props;
|
|
return Math.max(0, height - unref(headerHeight) - unref(fixedRowHeight));
|
|
});
|
|
const hasHeader = computed(() => {
|
|
return unref(headerHeight) + 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$ = unref(headerRef);
|
|
const body$ = unref(bodyRef);
|
|
if (isObject$1(leftOrOptions)) {
|
|
header$ == null ? void 0 : header$.scrollToLeft(leftOrOptions.scrollLeft);
|
|
body$ == null ? void 0 : body$.scrollTo(leftOrOptions);
|
|
} else {
|
|
header$ == null ? void 0 : header$.scrollToLeft(leftOrOptions);
|
|
body$ == null ? void 0 : body$.scrollTo({
|
|
scrollLeft: leftOrOptions,
|
|
scrollTop: top
|
|
});
|
|
}
|
|
}
|
|
function scrollToTop(scrollTop) {
|
|
var _a;
|
|
(_a = unref(bodyRef)) == null ? void 0 : _a.scrollTo({
|
|
scrollTop
|
|
});
|
|
}
|
|
function scrollToRow(row, strategy) {
|
|
var _a;
|
|
(_a = unref(bodyRef)) == null ? void 0 : _a.scrollToItem(row, 1, strategy);
|
|
}
|
|
function forceUpdate() {
|
|
var _a, _b;
|
|
(_a = unref(bodyRef)) == null ? void 0 : _a.$forceUpdate();
|
|
(_b = unref(headerRef)) == null ? void 0 : _b.$forceUpdate();
|
|
}
|
|
return {
|
|
bodyRef,
|
|
forceUpdate,
|
|
fixedRowHeight,
|
|
gridHeight,
|
|
hasHeader,
|
|
headerHeight,
|
|
headerRef,
|
|
totalHeight,
|
|
itemKey,
|
|
onItemRendered,
|
|
resetAfterRowIndex,
|
|
scrollTo,
|
|
scrollToTop,
|
|
scrollToRow
|
|
};
|
|
};
|
|
const TableGrid = defineComponent({
|
|
name: COMPONENT_NAME$5,
|
|
props: tableV2GridProps,
|
|
setup(props, {
|
|
slots,
|
|
expose
|
|
}) {
|
|
const {
|
|
ns
|
|
} = 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 = unref(headerHeight);
|
|
return createVNode("div", {
|
|
"role": "table",
|
|
"class": [ns.e("table"), props.class],
|
|
"style": style
|
|
}, [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": unref(gridHeight),
|
|
"class": ns.e("body"),
|
|
"role": "rowgroup",
|
|
"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
|
|
});
|
|
}
|
|
}), unref(hasHeader) && 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 + unref(fixedRowHeight), height)
|
|
}, {
|
|
dynamic: slots.header,
|
|
fixed: slots.row
|
|
})]);
|
|
};
|
|
}
|
|
});
|
|
|
|
function _isSlot$5(s) {
|
|
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
|
|
}
|
|
const MainTable = (props, {
|
|
slots
|
|
}) => {
|
|
const {
|
|
mainTableRef,
|
|
...rest
|
|
} = props;
|
|
return createVNode(TableGrid, 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]" && !isVNode(s);
|
|
}
|
|
const LeftTable$1 = (props, {
|
|
slots
|
|
}) => {
|
|
if (!props.columns.length)
|
|
return;
|
|
const {
|
|
leftTableRef,
|
|
...rest
|
|
} = props;
|
|
return createVNode(TableGrid, 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]" && !isVNode(s);
|
|
}
|
|
const LeftTable = (props, {
|
|
slots
|
|
}) => {
|
|
if (!props.columns.length)
|
|
return;
|
|
const {
|
|
rightTableRef,
|
|
...rest
|
|
} = props;
|
|
return createVNode(TableGrid, 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]" && !isVNode(s);
|
|
}
|
|
const RowRenderer = (props, {
|
|
slots
|
|
}) => {
|
|
const {
|
|
columns,
|
|
columnsStyles,
|
|
depthMap,
|
|
expandColumnKey,
|
|
expandedRowKeys,
|
|
estimatedRowHeight,
|
|
hasFixedColumns,
|
|
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("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
|
|
};
|
|
const handlerMosueEnter = (e) => {
|
|
onRowHover == null ? void 0 : onRowHover({
|
|
hovered: true,
|
|
rowKey: _rowKey,
|
|
event: e,
|
|
rowData,
|
|
rowIndex
|
|
});
|
|
};
|
|
const handlerMouseLeave = (e) => {
|
|
onRowHover == null ? void 0 : onRowHover({
|
|
hovered: false,
|
|
rowKey: _rowKey,
|
|
event: e,
|
|
rowData,
|
|
rowIndex
|
|
});
|
|
};
|
|
return createVNode(Row, mergeProps(_rowProps, {
|
|
"onRowExpand": onRowExpanded,
|
|
"onMouseenter": handlerMosueEnter,
|
|
"onMouseleave": handlerMouseLeave,
|
|
"rowkey": _rowKey
|
|
}), _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 createVNode("div", {
|
|
"class": ns.em("row-cell", "placeholder"),
|
|
"style": cellStyle
|
|
}, null);
|
|
}
|
|
const {
|
|
cellRenderer,
|
|
dataKey,
|
|
dataGetter
|
|
} = column;
|
|
const cellData = isFunction$1(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 columnCellRenderer = componentToSlot(cellRenderer);
|
|
const Cell = columnCellRenderer ? columnCellRenderer(cellProps) : renderSlot(slots, "default", cellProps, () => [createVNode(TableCell, cellProps, null)]);
|
|
const kls = [ns.e("row-cell"), column.class, column.align === Alignment.CENTER && ns.is("align-center"), column.align === Alignment.RIGHT && ns.is("align-right")];
|
|
const expandable = rowIndex >= 0 && expandColumnKey && 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 = createVNode(ExpandIcon$1, mergeProps(expandIconProps, {
|
|
"class": [ns.e("expand-icon"), ns.is("expanded", expanded)],
|
|
"size": iconSize,
|
|
"expanded": expanded,
|
|
"style": iconStyle,
|
|
"expandable": true
|
|
}), null);
|
|
} else {
|
|
IconOrPlaceholder = createVNode("div", {
|
|
"style": [iconStyle, `width: ${iconSize}px; height: ${iconSize}px;`].join(" ")
|
|
}, null);
|
|
}
|
|
}
|
|
return createVNode("div", mergeProps({
|
|
"class": kls,
|
|
"style": cellStyle
|
|
}, extraCellProps, {
|
|
"role": "cell"
|
|
}), [IconOrPlaceholder, Cell]);
|
|
};
|
|
CellRenderer.inheritAttrs = false;
|
|
|
|
function _isSlot$1(s) {
|
|
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !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 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 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 columnCellRenderer = componentToSlot(headerCellRenderer);
|
|
const Cell = columnCellRenderer ? columnCellRenderer(cellProps) : renderSlot(slots, "default", cellProps, () => [createVNode(HeaderCell$1, cellProps, null)]);
|
|
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 createVNode("div", mergeProps(cellWrapperProps, {
|
|
"role": "columnheader"
|
|
}), [Cell, sortable && createVNode(SortIcon$1, {
|
|
"class": [ns.e("sort-icon"), sorting && ns.is("sorting")],
|
|
"sortOrder": sortOrder
|
|
}, null)]);
|
|
};
|
|
|
|
const Footer$1 = (props, {
|
|
slots
|
|
}) => {
|
|
var _a;
|
|
return 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
|
|
}) => {
|
|
const defaultSlot = renderSlot(slots, "default", {}, () => [createVNode(ElEmpty, null, null)]);
|
|
return createVNode("div", {
|
|
"class": props.class,
|
|
"style": props.style
|
|
}, [defaultSlot]);
|
|
};
|
|
Footer.displayName = "ElTableV2Empty";
|
|
|
|
const Overlay = (props, {
|
|
slots
|
|
}) => {
|
|
var _a;
|
|
return 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]" && !isVNode(s);
|
|
}
|
|
const COMPONENT_NAME$4 = "ElTableV2";
|
|
const TableV2 = 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,
|
|
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
|
|
});
|
|
provide(TableV2InjectionKey, {
|
|
ns,
|
|
isResetting,
|
|
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 = unref(data);
|
|
const mainTableProps = {
|
|
cache,
|
|
class: ns.e("main"),
|
|
columns: unref(mainColumns),
|
|
data: _data,
|
|
fixedData,
|
|
estimatedRowHeight,
|
|
bodyWidth: unref(bodyWidth) + vScrollbarSize,
|
|
headerHeight,
|
|
headerWidth: unref(headerWidth),
|
|
height: unref(mainTableHeight),
|
|
mainTableRef,
|
|
rowKey,
|
|
rowHeight,
|
|
scrollbarAlwaysOn,
|
|
scrollbarStartGap: 2,
|
|
scrollbarEndGap: vScrollbarSize,
|
|
useIsScrolling,
|
|
width,
|
|
getRowHeight,
|
|
onRowsRendered,
|
|
onScroll
|
|
};
|
|
const leftColumnsWidth = unref(leftTableWidth);
|
|
const _fixedTableHeight = unref(fixedTableHeight);
|
|
const leftTableProps = {
|
|
cache,
|
|
class: ns.e("left"),
|
|
columns: 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 = unref(rightTableWidth);
|
|
const rightColumnsWidthWithScrollbar = rightColumnsWidth + vScrollbarSize;
|
|
const rightTableProps = {
|
|
cache,
|
|
class: ns.e("right"),
|
|
columns: unref(fixedColumnsOnRight),
|
|
data: _data,
|
|
estimatedRowHeight,
|
|
rightTableRef,
|
|
rowHeight,
|
|
bodyWidth: rightColumnsWidthWithScrollbar,
|
|
headerWidth: rightColumnsWidthWithScrollbar,
|
|
headerHeight,
|
|
height: _fixedTableHeight,
|
|
rowKey,
|
|
scrollbarAlwaysOn,
|
|
scrollbarStartGap: 2,
|
|
scrollbarEndGap: vScrollbarSize,
|
|
width: rightColumnsWidthWithScrollbar,
|
|
style: `--${unref(ns.namespace)}-table-scrollbar-size: ${vScrollbarSize}px`,
|
|
useIsScrolling,
|
|
getRowHeight,
|
|
onScroll: onVerticalScroll
|
|
};
|
|
const _columnsStyles = unref(columnsStyles);
|
|
const tableRowProps = {
|
|
ns,
|
|
depthMap: unref(depthMap),
|
|
columnsStyles: _columnsStyles,
|
|
expandColumnKey,
|
|
expandedRowKeys: unref(expandedRowKeys),
|
|
estimatedRowHeight,
|
|
hasFixedColumns: unref(hasFixedColumns),
|
|
rowProps,
|
|
rowClass,
|
|
rowKey,
|
|
rowEventHandlers,
|
|
onRowHovered,
|
|
onRowExpanded,
|
|
onRowHeightChange
|
|
};
|
|
const tableCellProps = {
|
|
cellProps,
|
|
expandColumnKey,
|
|
indentSize,
|
|
iconSize,
|
|
rowKey,
|
|
expandedRowKeys: unref(expandedRowKeys),
|
|
ns
|
|
};
|
|
const tableHeaderProps = {
|
|
ns,
|
|
headerClass,
|
|
headerProps,
|
|
columnsStyles: _columnsStyles
|
|
};
|
|
const tableHeaderCellProps = {
|
|
ns,
|
|
sortBy,
|
|
sortState,
|
|
headerCellProps,
|
|
onColumnSorted
|
|
};
|
|
const tableSlots = {
|
|
row: (props2) => createVNode(RowRenderer, mergeProps(props2, tableRowProps), {
|
|
row: slots.row,
|
|
cell: (props3) => {
|
|
let _slot;
|
|
return slots.cell ? createVNode(CellRenderer, mergeProps(props3, tableCellProps, {
|
|
"style": _columnsStyles[props3.column.key]
|
|
}), _isSlot(_slot = slots.cell(props3)) ? _slot : {
|
|
default: () => [_slot]
|
|
}) : createVNode(CellRenderer, mergeProps(props3, tableCellProps, {
|
|
"style": _columnsStyles[props3.column.key]
|
|
}), null);
|
|
}
|
|
}),
|
|
header: (props2) => createVNode(HeaderRenderer, mergeProps(props2, tableHeaderProps), {
|
|
header: slots.header,
|
|
cell: (props3) => {
|
|
let _slot2;
|
|
return slots["header-cell"] ? createVNode(HeaderCellRenderer, mergeProps(props3, tableHeaderCellProps, {
|
|
"style": _columnsStyles[props3.column.key]
|
|
}), _isSlot(_slot2 = slots["header-cell"](props3)) ? _slot2 : {
|
|
default: () => [_slot2]
|
|
}) : createVNode(HeaderCellRenderer, mergeProps(props3, tableHeaderCellProps, {
|
|
"style": _columnsStyles[props3.column.key]
|
|
}), null);
|
|
}
|
|
})
|
|
};
|
|
const rootKls = [props.class, ns.b(), ns.e("root"), {
|
|
[ns.is("dynamic")]: unref(isDynamic)
|
|
}];
|
|
const footerProps = {
|
|
class: ns.e("footer"),
|
|
style: unref(footerHeight)
|
|
};
|
|
return createVNode("div", {
|
|
"class": rootKls,
|
|
"style": unref(rootStyle)
|
|
}, [createVNode(MainTable, mainTableProps, _isSlot(tableSlots) ? tableSlots : {
|
|
default: () => [tableSlots]
|
|
}), createVNode(LeftTable$1, leftTableProps, _isSlot(tableSlots) ? tableSlots : {
|
|
default: () => [tableSlots]
|
|
}), createVNode(LeftTable, rightTableProps, _isSlot(tableSlots) ? tableSlots : {
|
|
default: () => [tableSlots]
|
|
}), slots.footer && createVNode(Footer$1, footerProps, {
|
|
default: slots.footer
|
|
}), unref(showEmpty) && createVNode(Footer, {
|
|
"class": ns.e("empty"),
|
|
"style": unref(emptyStyle)
|
|
}, {
|
|
default: slots.empty
|
|
}), slots.overlay && 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 = 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 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 tabsRootContextKey = Symbol("tabsRootContextKey");
|
|
|
|
const tabBarProps = buildProps({
|
|
tabs: {
|
|
type: definePropType(Array),
|
|
default: () => mutable([])
|
|
}
|
|
});
|
|
|
|
const COMPONENT_NAME$3 = "ElTabBar";
|
|
const __default__$u = defineComponent({
|
|
name: COMPONENT_NAME$3
|
|
});
|
|
const _sfc_main$z = /* @__PURE__ */ defineComponent({
|
|
...__default__$u,
|
|
props: tabBarProps,
|
|
setup(__props, { expose }) {
|
|
const props = __props;
|
|
const instance = getCurrentInstance();
|
|
const rootTabs = inject(tabsRootContextKey);
|
|
if (!rootTabs)
|
|
throwError(COMPONENT_NAME$3, "<el-tabs><el-tab-bar /></el-tabs>");
|
|
const ns = useNamespace("tabs");
|
|
const barRef = ref();
|
|
const barStyle = 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";
|
|
const position = sizeDir === "x" ? "left" : "top";
|
|
props.tabs.every((tab) => {
|
|
var _a, _b;
|
|
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;
|
|
}
|
|
offset = $el[`offset${capitalize(position)}`];
|
|
tabSize = $el[`client${capitalize(sizeName)}`];
|
|
const tabStyles = window.getComputedStyle($el);
|
|
if (sizeName === "width") {
|
|
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();
|
|
const saveObserver = [];
|
|
const observerTabs = () => {
|
|
var _a;
|
|
saveObserver.forEach((observer) => observer.stop());
|
|
saveObserver.length = 0;
|
|
const list = (_a = instance.parent) == null ? void 0 : _a.refs;
|
|
if (!list)
|
|
return;
|
|
for (const key in list) {
|
|
if (key.startsWith("tab-")) {
|
|
const _el = list[key];
|
|
if (_el) {
|
|
saveObserver.push(useResizeObserver(_el, update));
|
|
}
|
|
}
|
|
}
|
|
};
|
|
watch(() => props.tabs, async () => {
|
|
await nextTick();
|
|
update();
|
|
observerTabs();
|
|
}, { immediate: true });
|
|
const barObserever = useResizeObserver(barRef, () => update());
|
|
onBeforeUnmount(() => {
|
|
saveObserver.forEach((observer) => observer.stop());
|
|
saveObserver.length = 0;
|
|
barObserever.stop();
|
|
});
|
|
expose({
|
|
ref: barRef,
|
|
update
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
ref_key: "barRef",
|
|
ref: barRef,
|
|
class: normalizeClass([unref(ns).e("active-bar"), unref(ns).is(unref(rootTabs).props.tabPosition)]),
|
|
style: normalizeStyle(barStyle.value)
|
|
}, null, 6);
|
|
};
|
|
}
|
|
});
|
|
var TabBar = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__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 = defineComponent({
|
|
name: COMPONENT_NAME$2,
|
|
props: tabNavProps,
|
|
emits: tabNavEmits,
|
|
setup(props, {
|
|
expose,
|
|
emit
|
|
}) {
|
|
const rootTabs = inject(tabsRootContextKey);
|
|
if (!rootTabs)
|
|
throwError(COMPONENT_NAME$2, `<el-tabs><tab-nav /></el-tabs>`);
|
|
const ns = useNamespace("tabs");
|
|
const visibility = useDocumentVisibility();
|
|
const focused = useWindowFocus();
|
|
const navScroll$ = ref();
|
|
const nav$ = ref();
|
|
const el$ = ref();
|
|
const tabBarRef = ref();
|
|
const scrollable = ref(false);
|
|
const navOffset = ref(0);
|
|
const isFocus = ref(false);
|
|
const focusable = ref(true);
|
|
const sizeName = computed(() => ["top", "bottom"].includes(rootTabs.props.tabPosition) ? "width" : "height");
|
|
const navStyle = 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 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 = () => {
|
|
var _a;
|
|
if (!nav$.value || !navScroll$.value)
|
|
return;
|
|
props.stretch && ((_a = tabBarRef.value) == null ? void 0 : _a.update());
|
|
const navSize = nav$.value[`offset${capitalize(sizeName.value)}`];
|
|
const containerSize = navScroll$.value[`offset${capitalize(sizeName.value)}`];
|
|
const currentOffset = navOffset.value;
|
|
if (containerSize < navSize) {
|
|
scrollable.value = scrollable.value || {};
|
|
scrollable.value.prev = currentOffset;
|
|
scrollable.value.next = currentOffset + containerSize < navSize;
|
|
if (navSize - currentOffset < 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;
|
|
watch(visibility, (visibility2) => {
|
|
if (visibility2 === "hidden") {
|
|
focusable.value = false;
|
|
} else if (visibility2 === "visible") {
|
|
setTimeout(() => focusable.value = true, 50);
|
|
}
|
|
});
|
|
watch(focused, (focused2) => {
|
|
if (focused2) {
|
|
setTimeout(() => focusable.value = true, 50);
|
|
} else {
|
|
focusable.value = false;
|
|
}
|
|
});
|
|
useResizeObserver(el$, update);
|
|
onMounted(() => setTimeout(() => scrollToActiveTab(), 0));
|
|
onUpdated(() => update());
|
|
expose({
|
|
scrollToActiveTab,
|
|
removeFocus
|
|
});
|
|
return () => {
|
|
const scrollBtn = scrollable.value ? [createVNode("span", {
|
|
"class": [ns.e("nav-prev"), ns.is("disabled", !scrollable.value.prev)],
|
|
"onClick": scrollPrev
|
|
}, [createVNode(ElIcon, null, {
|
|
default: () => [createVNode(arrow_left_default, null, null)]
|
|
})]), createVNode("span", {
|
|
"class": [ns.e("nav-next"), ns.is("disabled", !scrollable.value.next)],
|
|
"onClick": scrollNext
|
|
}, [createVNode(ElIcon, null, {
|
|
default: () => [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 ? createVNode(ElIcon, {
|
|
"class": "is-icon-close",
|
|
"onClick": (ev) => emit("tabRemove", pane, ev)
|
|
}, {
|
|
default: () => [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 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 createVNode("div", {
|
|
"ref": el$,
|
|
"class": [ns.e("nav-wrap"), ns.is("scrollable", !!scrollable.value), ns.is(rootTabs.props.tabPosition)]
|
|
}, [scrollBtn, createVNode("div", {
|
|
"class": ns.e("nav-scroll"),
|
|
"ref": navScroll$
|
|
}, [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 ? createVNode(TabBar, {
|
|
"ref": tabBarRef,
|
|
"tabs": [...props.panes]
|
|
}, null) : null, tabs]])])]);
|
|
};
|
|
}
|
|
});
|
|
|
|
const tabsProps = buildProps({
|
|
type: {
|
|
type: String,
|
|
values: ["card", "border-card", ""],
|
|
default: ""
|
|
},
|
|
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$1(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
|
|
};
|
|
const Tabs = defineComponent({
|
|
name: "ElTabs",
|
|
props: tabsProps,
|
|
emits: tabsEmits,
|
|
setup(props, {
|
|
emit,
|
|
slots,
|
|
expose
|
|
}) {
|
|
var _a;
|
|
const ns = useNamespace("tabs");
|
|
const isVertical = computed(() => ["left", "right"].includes(props.tabPosition));
|
|
const {
|
|
children: panes,
|
|
addChild: sortPane,
|
|
removeChild: unregisterPane
|
|
} = useOrderedChildren(getCurrentInstance(), "ElTabPane");
|
|
const nav$ = ref();
|
|
const currentName = ref((_a = props.modelValue) != null ? _a : "0");
|
|
const setCurrentName = async (value, trigger = false) => {
|
|
var _a2, _b, _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) {
|
|
currentName.value = value;
|
|
if (trigger) {
|
|
emit(UPDATE_MODEL_EVENT, value);
|
|
emit("tabChange", value);
|
|
}
|
|
(_c = (_b = nav$.value) == null ? void 0 : _b.removeFocus) == null ? void 0 : _c.call(_b);
|
|
}
|
|
} catch (e) {
|
|
}
|
|
};
|
|
const handleTabClick = (tab, tabName, event) => {
|
|
if (tab.props.disabled)
|
|
return;
|
|
setCurrentName(tabName, true);
|
|
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");
|
|
};
|
|
watch(() => props.modelValue, (modelValue) => setCurrentName(modelValue));
|
|
watch(currentName, async () => {
|
|
var _a2;
|
|
await nextTick();
|
|
(_a2 = nav$.value) == null ? void 0 : _a2.scrollToActiveTab();
|
|
});
|
|
provide(tabsRootContextKey, {
|
|
props,
|
|
currentName,
|
|
registerPane: (pane) => {
|
|
panes.value.push(pane);
|
|
},
|
|
sortPane,
|
|
unregisterPane
|
|
});
|
|
expose({
|
|
currentName
|
|
});
|
|
const TabNavRenderer = ({
|
|
render
|
|
}) => {
|
|
return render();
|
|
};
|
|
return () => {
|
|
const addSlot = slots["add-icon"];
|
|
const newButton = props.editable || props.addable ? createVNode("div", {
|
|
"class": [ns.e("new-tab"), isVertical.value && ns.e("new-tab-vertical")],
|
|
"tabindex": "0",
|
|
"onClick": handleTabAdd,
|
|
"onKeydown": (ev) => {
|
|
if (ev.code === EVENT_CODE.enter)
|
|
handleTabAdd();
|
|
}
|
|
}, [addSlot ? renderSlot(slots, "add-icon") : createVNode(ElIcon, {
|
|
"class": ns.is("icon-plus")
|
|
}, {
|
|
default: () => [createVNode(plus_default, null, null)]
|
|
})]) : null;
|
|
const header = createVNode("div", {
|
|
"class": [ns.e("header"), isVertical.value && ns.e("header-vertical"), ns.is(props.tabPosition)]
|
|
}, [createVNode(TabNavRenderer, {
|
|
"render": () => {
|
|
const hasLabelSlot = panes.value.some((pane) => pane.slots.label);
|
|
return createVNode(TabNav, {
|
|
ref: nav$,
|
|
currentName: currentName.value,
|
|
editable: props.editable,
|
|
type: props.type,
|
|
panes: panes.value,
|
|
stretch: props.stretch,
|
|
onTabClick: handleTabClick,
|
|
onTabRemove: handleTabRemove
|
|
}, {
|
|
$stable: !hasLabelSlot
|
|
});
|
|
}
|
|
}, null), newButton]);
|
|
const panels = createVNode("div", {
|
|
"class": ns.e("content")
|
|
}, [renderSlot(slots, "default")]);
|
|
return createVNode("div", {
|
|
"class": [ns.b(), ns.m(props.tabPosition), {
|
|
[ns.m("card")]: props.type === "card",
|
|
[ns.m("border-card")]: props.type === "border-card"
|
|
}]
|
|
}, [panels, header]);
|
|
};
|
|
}
|
|
});
|
|
|
|
const tabPaneProps = buildProps({
|
|
label: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
name: {
|
|
type: [String, Number]
|
|
},
|
|
closable: Boolean,
|
|
disabled: Boolean,
|
|
lazy: Boolean
|
|
});
|
|
|
|
const COMPONENT_NAME$1 = "ElTabPane";
|
|
const __default__$t = defineComponent({
|
|
name: COMPONENT_NAME$1
|
|
});
|
|
const _sfc_main$y = /* @__PURE__ */ defineComponent({
|
|
...__default__$t,
|
|
props: tabPaneProps,
|
|
setup(__props) {
|
|
const props = __props;
|
|
const instance = getCurrentInstance();
|
|
const slots = useSlots();
|
|
const tabsRoot = inject(tabsRootContextKey);
|
|
if (!tabsRoot)
|
|
throwError(COMPONENT_NAME$1, "usage: <el-tabs><el-tab-pane /></el-tabs/>");
|
|
const ns = useNamespace("tab-pane");
|
|
const index = ref();
|
|
const isClosable = computed(() => props.closable || tabsRoot.props.closable);
|
|
const active = computedEager(() => {
|
|
var _a;
|
|
return tabsRoot.currentName.value === ((_a = props.name) != null ? _a : index.value);
|
|
});
|
|
const loaded = ref(active.value);
|
|
const paneName = computed(() => {
|
|
var _a;
|
|
return (_a = props.name) != null ? _a : index.value;
|
|
});
|
|
const shouldBeRender = computedEager(() => !props.lazy || loaded.value || active.value);
|
|
watch(active, (val) => {
|
|
if (val)
|
|
loaded.value = true;
|
|
});
|
|
const pane = reactive({
|
|
uid: instance.uid,
|
|
slots,
|
|
props,
|
|
paneName,
|
|
active,
|
|
index,
|
|
isClosable
|
|
});
|
|
tabsRoot.registerPane(pane);
|
|
onMounted(() => {
|
|
tabsRoot.sortPane(pane);
|
|
});
|
|
onUnmounted(() => {
|
|
tabsRoot.unregisterPane(pane.uid);
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return unref(shouldBeRender) ? withDirectives((openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
id: `pane-${unref(paneName)}`,
|
|
class: normalizeClass(unref(ns).b()),
|
|
role: "tabpanel",
|
|
"aria-hidden": !unref(active),
|
|
"aria-labelledby": `tab-${unref(paneName)}`
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 10, ["id", "aria-hidden", "aria-labelledby"])), [
|
|
[vShow, unref(active)]
|
|
]) : createCommentVNode("v-if", true);
|
|
};
|
|
}
|
|
});
|
|
var TabPane = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__file", "tab-pane.vue"]]);
|
|
|
|
const ElTabs = withInstall(Tabs, {
|
|
TabPane
|
|
});
|
|
const ElTabPane = withNoopInstall(TabPane);
|
|
|
|
const textProps = buildProps({
|
|
type: {
|
|
type: String,
|
|
values: ["primary", "success", "info", "warning", "danger", ""],
|
|
default: ""
|
|
},
|
|
size: {
|
|
type: String,
|
|
values: componentSizes,
|
|
default: ""
|
|
},
|
|
truncated: Boolean,
|
|
lineClamp: {
|
|
type: [String, Number]
|
|
},
|
|
tag: {
|
|
type: String,
|
|
default: "span"
|
|
}
|
|
});
|
|
|
|
const __default__$s = defineComponent({
|
|
name: "ElText"
|
|
});
|
|
const _sfc_main$x = /* @__PURE__ */ defineComponent({
|
|
...__default__$s,
|
|
props: textProps,
|
|
setup(__props) {
|
|
const props = __props;
|
|
const textSize = useFormSize();
|
|
const ns = useNamespace("text");
|
|
const textKls = computed(() => [
|
|
ns.b(),
|
|
ns.m(props.type),
|
|
ns.m(textSize.value),
|
|
ns.is("truncated", props.truncated),
|
|
ns.is("line-clamp", !isUndefined(props.lineClamp))
|
|
]);
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
|
|
class: normalizeClass(unref(textKls)),
|
|
style: normalizeStyle({ "-webkit-line-clamp": _ctx.lineClamp })
|
|
}, {
|
|
default: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "default")
|
|
]),
|
|
_: 3
|
|
}, 8, ["class", "style"]);
|
|
};
|
|
}
|
|
});
|
|
var Text = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__file", "text.vue"]]);
|
|
|
|
const ElText = withInstall(Text);
|
|
|
|
const timeSelectProps = buildProps({
|
|
format: {
|
|
type: String,
|
|
default: "HH:mm"
|
|
},
|
|
modelValue: String,
|
|
disabled: Boolean,
|
|
editable: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
effect: {
|
|
type: definePropType(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
|
|
},
|
|
...useEmptyValuesProps
|
|
});
|
|
|
|
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__$r = defineComponent({
|
|
name: "ElTimeSelect"
|
|
});
|
|
const _sfc_main$w = /* @__PURE__ */ defineComponent({
|
|
...__default__$r,
|
|
props: timeSelectProps,
|
|
emits: ["change", "blur", "focus", "clear", "update:modelValue"],
|
|
setup(__props, { expose }) {
|
|
const props = __props;
|
|
dayjs.extend(customParseFormat);
|
|
const { Option: ElOption } = ElSelect;
|
|
const nsInput = useNamespace("input");
|
|
const select = ref();
|
|
const _disabled = useFormDisabled();
|
|
const { lang } = useLocale();
|
|
const value = computed(() => props.modelValue);
|
|
const start = computed(() => {
|
|
const time = parseTime(props.start);
|
|
return time ? formatTime(time) : null;
|
|
});
|
|
const end = computed(() => {
|
|
const time = parseTime(props.end);
|
|
return time ? formatTime(time) : null;
|
|
});
|
|
const step = computed(() => {
|
|
const time = parseTime(props.step);
|
|
return time ? formatTime(time) : null;
|
|
});
|
|
const minTime = computed(() => {
|
|
const time = parseTime(props.minTime || "");
|
|
return time ? formatTime(time) : null;
|
|
});
|
|
const maxTime = computed(() => {
|
|
const time = parseTime(props.maxTime || "");
|
|
return time ? formatTime(time) : null;
|
|
});
|
|
const items = 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").locale(lang.value).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 openBlock(), createBlock(unref(ElSelect), {
|
|
ref_key: "select",
|
|
ref: select,
|
|
"model-value": unref(value),
|
|
disabled: unref(_disabled),
|
|
clearable: _ctx.clearable,
|
|
"clear-icon": _ctx.clearIcon,
|
|
size: _ctx.size,
|
|
effect: _ctx.effect,
|
|
placeholder: _ctx.placeholder,
|
|
"default-first-option": "",
|
|
filterable: _ctx.editable,
|
|
"empty-values": _ctx.emptyValues,
|
|
"value-on-clear": _ctx.valueOnClear,
|
|
"onUpdate:modelValue": (event) => _ctx.$emit("update:modelValue", event),
|
|
onChange: (event) => _ctx.$emit("change", event),
|
|
onBlur: (event) => _ctx.$emit("blur", event),
|
|
onFocus: (event) => _ctx.$emit("focus", event),
|
|
onClear: () => _ctx.$emit("clear")
|
|
}, {
|
|
prefix: withCtx(() => [
|
|
_ctx.prefixIcon ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 0,
|
|
class: normalizeClass(unref(nsInput).e("prefix-icon"))
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.prefixIcon)))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : createCommentVNode("v-if", true)
|
|
]),
|
|
default: withCtx(() => [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(items), (item) => {
|
|
return openBlock(), createBlock(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", "empty-values", "value-on-clear", "onUpdate:modelValue", "onChange", "onBlur", "onFocus", "onClear"]);
|
|
};
|
|
}
|
|
});
|
|
var TimeSelect = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__file", "time-select.vue"]]);
|
|
|
|
const ElTimeSelect = withInstall(TimeSelect);
|
|
|
|
const Timeline = defineComponent({
|
|
name: "ElTimeline",
|
|
setup(_, { slots }) {
|
|
const ns = useNamespace("timeline");
|
|
provide("timeline", slots);
|
|
return () => {
|
|
return h$1("ul", { class: [ns.b()] }, [renderSlot(slots, "default")]);
|
|
};
|
|
}
|
|
});
|
|
var Timeline$1 = Timeline;
|
|
|
|
const timelineItemProps = buildProps({
|
|
timestamp: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
hideTimestamp: Boolean,
|
|
center: Boolean,
|
|
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: Boolean
|
|
});
|
|
|
|
const __default__$q = defineComponent({
|
|
name: "ElTimelineItem"
|
|
});
|
|
const _sfc_main$v = /* @__PURE__ */ defineComponent({
|
|
...__default__$q,
|
|
props: timelineItemProps,
|
|
setup(__props) {
|
|
const props = __props;
|
|
const ns = useNamespace("timeline-item");
|
|
const defaultNodeKls = computed(() => [
|
|
ns.e("node"),
|
|
ns.em("node", props.size || ""),
|
|
ns.em("node", props.type || ""),
|
|
ns.is("hollow", props.hollow)
|
|
]);
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("li", {
|
|
class: normalizeClass([unref(ns).b(), { [unref(ns).e("center")]: _ctx.center }])
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("tail"))
|
|
}, null, 2),
|
|
!_ctx.$slots.dot ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(defaultNodeKls)),
|
|
style: normalizeStyle({
|
|
backgroundColor: _ctx.color
|
|
})
|
|
}, [
|
|
_ctx.icon ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).e("icon"))
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.icon)))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : createCommentVNode("v-if", true)
|
|
], 6)) : createCommentVNode("v-if", true),
|
|
_ctx.$slots.dot ? (openBlock(), createElementBlock("div", {
|
|
key: 1,
|
|
class: normalizeClass(unref(ns).e("dot"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "dot")
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("wrapper"))
|
|
}, [
|
|
!_ctx.hideTimestamp && _ctx.placement === "top" ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass([unref(ns).e("timestamp"), unref(ns).is("top")])
|
|
}, toDisplayString(_ctx.timestamp), 3)) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("content"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 2),
|
|
!_ctx.hideTimestamp && _ctx.placement === "bottom" ? (openBlock(), createElementBlock("div", {
|
|
key: 1,
|
|
class: normalizeClass([unref(ns).e("timestamp"), unref(ns).is("bottom")])
|
|
}, toDisplayString(_ctx.timestamp), 3)) : createCommentVNode("v-if", true)
|
|
], 2)
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var TimelineItem = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__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({
|
|
arrowPadding: {
|
|
type: definePropType(Number),
|
|
default: 5
|
|
},
|
|
effect: {
|
|
type: definePropType(String),
|
|
default: "light"
|
|
},
|
|
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: Boolean,
|
|
...useAriaProps(["ariaLabel"])
|
|
});
|
|
|
|
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 tooltipV2RootKey = Symbol("tooltipV2");
|
|
const tooltipV2ContentKey = Symbol("tooltipV2Content");
|
|
const TOOLTIP_V2_OPEN = "tooltip_v2.open";
|
|
|
|
const __default__$p = defineComponent({
|
|
name: "ElTooltipV2Root"
|
|
});
|
|
const _sfc_main$u = /* @__PURE__ */ defineComponent({
|
|
...__default__$p,
|
|
props: tooltipV2RootProps,
|
|
setup(__props, { expose }) {
|
|
const props = __props;
|
|
const _open = ref(props.defaultOpen);
|
|
const triggerRef = ref(null);
|
|
const open = 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 = computed(() => isNumber(props.delayDuration) && props.delayDuration > 0);
|
|
const { start: onDelayedOpen, stop: clearTimer } = useTimeoutFn(() => {
|
|
open.value = true;
|
|
}, computed(() => props.delayDuration), {
|
|
immediate: false
|
|
});
|
|
const ns = useNamespace("tooltip-v2");
|
|
const contentId = useId();
|
|
const onNormalOpen = () => {
|
|
clearTimer();
|
|
open.value = true;
|
|
};
|
|
const onDelayOpen = () => {
|
|
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);
|
|
};
|
|
watch(open, onChange);
|
|
onMounted(() => {
|
|
document.addEventListener(TOOLTIP_V2_OPEN, onClose);
|
|
});
|
|
onBeforeUnmount(() => {
|
|
clearTimer();
|
|
document.removeEventListener(TOOLTIP_V2_OPEN, onClose);
|
|
});
|
|
provide(tooltipV2RootKey, {
|
|
contentId,
|
|
triggerRef,
|
|
ns,
|
|
onClose,
|
|
onDelayOpen,
|
|
onOpen
|
|
});
|
|
expose({
|
|
onOpen,
|
|
onClose
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return renderSlot(_ctx.$slots, "default", { open: unref(open) });
|
|
};
|
|
}
|
|
});
|
|
var TooltipV2Root = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__file", "root.vue"]]);
|
|
|
|
const __default__$o = defineComponent({
|
|
name: "ElTooltipV2Arrow"
|
|
});
|
|
const _sfc_main$t = /* @__PURE__ */ defineComponent({
|
|
...__default__$o,
|
|
props: {
|
|
...tooltipV2ArrowProps,
|
|
...tooltipV2ArrowSpecialProps
|
|
},
|
|
setup(__props) {
|
|
const props = __props;
|
|
const { ns } = inject(tooltipV2RootKey);
|
|
const { arrowRef } = inject(tooltipV2ContentKey);
|
|
const arrowStyle = 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 openBlock(), createElementBlock("span", {
|
|
ref_key: "arrowRef",
|
|
ref: arrowRef,
|
|
style: normalizeStyle(unref(arrowStyle)),
|
|
class: normalizeClass(unref(ns).e("arrow"))
|
|
}, null, 6);
|
|
};
|
|
}
|
|
});
|
|
var TooltipV2Arrow = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__file", "arrow.vue"]]);
|
|
|
|
const visualHiddenProps = buildProps({
|
|
style: {
|
|
type: definePropType([String, Object, Array]),
|
|
default: () => ({})
|
|
}
|
|
});
|
|
|
|
const __default__$n = defineComponent({
|
|
name: "ElVisuallyHidden"
|
|
});
|
|
const _sfc_main$s = /* @__PURE__ */ defineComponent({
|
|
...__default__$n,
|
|
props: visualHiddenProps,
|
|
setup(__props) {
|
|
const props = __props;
|
|
const computedStyle = 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 openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, { style: unref(computedStyle) }), [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 16);
|
|
};
|
|
}
|
|
});
|
|
var ElVisuallyHidden = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__file", "visual-hidden.vue"]]);
|
|
|
|
const __default__$m = defineComponent({
|
|
name: "ElTooltipV2Content"
|
|
});
|
|
const _sfc_main$r = /* @__PURE__ */ defineComponent({
|
|
...__default__$m,
|
|
props: { ...tooltipV2ContentProps, ...tooltipV2CommonProps },
|
|
setup(__props) {
|
|
const props = __props;
|
|
const { triggerRef, contentId } = inject(tooltipV2RootKey);
|
|
const placement = ref(props.placement);
|
|
const strategy = ref(props.strategy);
|
|
const arrowRef = ref(null);
|
|
const { referenceRef, contentRef, middlewareData, x, y, update } = useFloating$1({
|
|
placement,
|
|
strategy,
|
|
middleware: 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 = computed(() => {
|
|
return placement.value.split("-")[0];
|
|
});
|
|
const contentStyle = computed(() => {
|
|
return {
|
|
position: unref(strategy),
|
|
top: `${unref(y) || 0}px`,
|
|
left: `${unref(x) || 0}px`,
|
|
zIndex
|
|
};
|
|
});
|
|
const arrowStyle = computed(() => {
|
|
if (!props.showArrow)
|
|
return {};
|
|
const { arrow } = 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 = computed(() => [
|
|
ns.e("content"),
|
|
ns.is("dark", props.effect === "dark"),
|
|
ns.is(unref(strategy)),
|
|
props.contentClass
|
|
]);
|
|
watch(arrowRef, () => update());
|
|
watch(() => props.placement, (val) => placement.value = val);
|
|
onMounted(() => {
|
|
watch(() => props.reference || triggerRef.value, (el) => {
|
|
referenceRef.value = el || void 0;
|
|
}, {
|
|
immediate: true
|
|
});
|
|
});
|
|
provide(tooltipV2ContentKey, { arrowRef });
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
ref_key: "contentRef",
|
|
ref: contentRef,
|
|
style: normalizeStyle(unref(contentStyle)),
|
|
"data-tooltip-v2-root": ""
|
|
}, [
|
|
!_ctx.nowrap ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
"data-side": unref(side),
|
|
class: normalizeClass(unref(contentClass))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default", {
|
|
contentStyle: unref(contentStyle),
|
|
contentClass: unref(contentClass)
|
|
}),
|
|
createVNode(unref(ElVisuallyHidden), {
|
|
id: unref(contentId),
|
|
role: "tooltip"
|
|
}, {
|
|
default: withCtx(() => [
|
|
_ctx.ariaLabel ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
createTextVNode(toDisplayString(_ctx.ariaLabel), 1)
|
|
], 64)) : renderSlot(_ctx.$slots, "default", { key: 1 })
|
|
]),
|
|
_: 3
|
|
}, 8, ["id"]),
|
|
renderSlot(_ctx.$slots, "arrow", {
|
|
style: normalizeStyle(unref(arrowStyle)),
|
|
side: unref(side)
|
|
})
|
|
], 10, ["data-side"])) : createCommentVNode("v-if", true)
|
|
], 4);
|
|
};
|
|
}
|
|
});
|
|
var TooltipV2Content = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__file", "content.vue"]]);
|
|
|
|
const forwardRefProps = buildProps({
|
|
setRef: {
|
|
type: definePropType(Function),
|
|
required: true
|
|
},
|
|
onlyChild: Boolean
|
|
});
|
|
var ForwardRef = defineComponent({
|
|
props: forwardRefProps,
|
|
setup(props, {
|
|
slots
|
|
}) {
|
|
const fragmentRef = 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 createVNode(Fragment, {
|
|
"ref": setRef
|
|
}, [child]);
|
|
};
|
|
}
|
|
});
|
|
|
|
const __default__$l = defineComponent({
|
|
name: "ElTooltipV2Trigger"
|
|
});
|
|
const _sfc_main$q = /* @__PURE__ */ defineComponent({
|
|
...__default__$l,
|
|
props: {
|
|
...tooltipV2CommonProps,
|
|
...tooltipV2TriggerProps
|
|
},
|
|
setup(__props) {
|
|
const props = __props;
|
|
const { onClose, onOpen, onDelayOpen, triggerRef, contentId } = 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);
|
|
});
|
|
}
|
|
};
|
|
watch(triggerRef, (triggerEl, previousTriggerEl) => {
|
|
setEvents(triggerEl, events, "addEventListener");
|
|
setEvents(previousTriggerEl, events, "removeEventListener");
|
|
if (triggerEl) {
|
|
triggerEl.setAttribute("aria-describedby", contentId.value);
|
|
}
|
|
});
|
|
onBeforeUnmount(() => {
|
|
setEvents(triggerRef.value, events, "removeEventListener");
|
|
document.removeEventListener("mouseup", onMouseup);
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return _ctx.nowrap ? (openBlock(), createBlock(unref(ForwardRef), {
|
|
key: 0,
|
|
"set-ref": setTriggerRef,
|
|
"only-child": ""
|
|
}, {
|
|
default: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "default")
|
|
]),
|
|
_: 3
|
|
})) : (openBlock(), createElementBlock("button", mergeProps({
|
|
key: 1,
|
|
ref_key: "triggerRef",
|
|
ref: triggerRef
|
|
}, _ctx.$attrs), [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 16));
|
|
};
|
|
}
|
|
});
|
|
var TooltipV2Trigger = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__file", "trigger.vue"]]);
|
|
|
|
const __default__$k = defineComponent({
|
|
name: "ElTooltipV2"
|
|
});
|
|
const _sfc_main$p = /* @__PURE__ */ defineComponent({
|
|
...__default__$k,
|
|
props: tooltipV2Props,
|
|
setup(__props) {
|
|
const props = __props;
|
|
const refedProps = toRefs(props);
|
|
const arrowProps = reactive(pick(refedProps, Object.keys(tooltipV2ArrowProps)));
|
|
const contentProps = reactive(pick(refedProps, Object.keys(tooltipV2ContentProps)));
|
|
const rootProps = reactive(pick(refedProps, Object.keys(tooltipV2RootProps)));
|
|
const triggerProps = reactive(pick(refedProps, Object.keys(tooltipV2TriggerProps)));
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createBlock(TooltipV2Root, normalizeProps(guardReactiveProps(rootProps)), {
|
|
default: withCtx(({ open }) => [
|
|
createVNode(TooltipV2Trigger, mergeProps(triggerProps, { nowrap: "" }), {
|
|
default: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "trigger")
|
|
]),
|
|
_: 3
|
|
}, 16),
|
|
createVNode(unref(ElTeleport$1), {
|
|
to: _ctx.to,
|
|
disabled: !_ctx.teleported
|
|
}, {
|
|
default: withCtx(() => [
|
|
_ctx.fullTransition ? (openBlock(), createBlock(Transition, normalizeProps(mergeProps({ key: 0 }, _ctx.transitionProps)), {
|
|
default: withCtx(() => [
|
|
_ctx.alwaysOn || open ? (openBlock(), createBlock(TooltipV2Content, normalizeProps(mergeProps({ key: 0 }, contentProps)), {
|
|
arrow: withCtx(({ style, side }) => [
|
|
_ctx.showArrow ? (openBlock(), createBlock(TooltipV2Arrow, mergeProps({ key: 0 }, arrowProps, {
|
|
style,
|
|
side
|
|
}), null, 16, ["style", "side"])) : createCommentVNode("v-if", true)
|
|
]),
|
|
default: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "default")
|
|
]),
|
|
_: 3
|
|
}, 16)) : createCommentVNode("v-if", true)
|
|
]),
|
|
_: 2
|
|
}, 1040)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
_ctx.alwaysOn || open ? (openBlock(), createBlock(TooltipV2Content, normalizeProps(mergeProps({ key: 0 }, contentProps)), {
|
|
arrow: withCtx(({ style, side }) => [
|
|
_ctx.showArrow ? (openBlock(), createBlock(TooltipV2Arrow, mergeProps({ key: 0 }, arrowProps, {
|
|
style,
|
|
side
|
|
}), null, 16, ["style", "side"])) : createCommentVNode("v-if", true)
|
|
]),
|
|
default: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "default")
|
|
]),
|
|
_: 3
|
|
}, 16)) : createCommentVNode("v-if", true)
|
|
], 64))
|
|
]),
|
|
_: 2
|
|
}, 1032, ["to", "disabled"])
|
|
]),
|
|
_: 3
|
|
}, 16);
|
|
};
|
|
}
|
|
});
|
|
var TooltipV2 = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__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$1) || isArray$1(value) && isNil(movedKeys);
|
|
const transferEmits = {
|
|
[CHANGE_EVENT]: (value, direction, movedKeys) => [value, movedKeys].every(isArray$1) && ["left", "right"].includes(direction),
|
|
[UPDATE_MODEL_EVENT]: (value) => isArray$1(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 computed(() => ({
|
|
...initProps,
|
|
...props.props
|
|
}));
|
|
};
|
|
|
|
const useCheck$1 = (props, panelState, emit) => {
|
|
const propsAlias = usePropsAlias(props);
|
|
const filteredData = computed(() => {
|
|
return props.data.filter((item) => {
|
|
if (isFunction$1(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 = computed(() => filteredData.value.filter((item) => !item[propsAlias.value.disabled]));
|
|
const checkedSummary = 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 = 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]) : [];
|
|
};
|
|
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;
|
|
}
|
|
});
|
|
watch(checkableData, () => {
|
|
updateAllChecked();
|
|
});
|
|
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;
|
|
});
|
|
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 = computed(() => props.data.reduce((o, cur) => (o[cur[propsAlias.value.key]] = cur) && o, {}));
|
|
const sourceData = computed(() => props.data.filter((item) => !props.modelValue.includes(item[propsAlias.value.key])));
|
|
const targetData = 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__$j = defineComponent({
|
|
name: "ElTransferPanel"
|
|
});
|
|
const _sfc_main$o = /* @__PURE__ */ defineComponent({
|
|
...__default__$j,
|
|
props: transferPanelProps,
|
|
emits: transferPanelEmits,
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const slots = useSlots();
|
|
const OptionContent = ({ option }) => option;
|
|
const { t } = useLocale();
|
|
const ns = useNamespace("transfer");
|
|
const panelState = reactive({
|
|
checked: [],
|
|
allChecked: false,
|
|
query: "",
|
|
checkChangeByUser: true
|
|
});
|
|
const propsAlias = usePropsAlias(props);
|
|
const {
|
|
filteredData,
|
|
checkedSummary,
|
|
isIndeterminate,
|
|
handleAllCheckedChange
|
|
} = useCheck$1(props, panelState, emit);
|
|
const hasNoMatch = computed(() => !isEmpty(panelState.query) && isEmpty(filteredData.value));
|
|
const hasFooter = computed(() => !isEmpty(slots.default()[0].children));
|
|
const { checked, allChecked, query } = toRefs(panelState);
|
|
expose({
|
|
query
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass(unref(ns).b("panel"))
|
|
}, [
|
|
createElementVNode("p", {
|
|
class: normalizeClass(unref(ns).be("panel", "header"))
|
|
}, [
|
|
createVNode(unref(ElCheckbox), {
|
|
modelValue: unref(allChecked),
|
|
"onUpdate:modelValue": ($event) => isRef(allChecked) ? allChecked.value = $event : null,
|
|
indeterminate: unref(isIndeterminate),
|
|
"validate-event": false,
|
|
onChange: unref(handleAllCheckedChange)
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(_ctx.title) + " ", 1),
|
|
createElementVNode("span", null, toDisplayString(unref(checkedSummary)), 1)
|
|
]),
|
|
_: 1
|
|
}, 8, ["modelValue", "onUpdate:modelValue", "indeterminate", "onChange"])
|
|
], 2),
|
|
createElementVNode("div", {
|
|
class: normalizeClass([unref(ns).be("panel", "body"), unref(ns).is("with-footer", unref(hasFooter))])
|
|
}, [
|
|
_ctx.filterable ? (openBlock(), createBlock(unref(ElInput), {
|
|
key: 0,
|
|
modelValue: unref(query),
|
|
"onUpdate:modelValue": ($event) => isRef(query) ? query.value = $event : null,
|
|
class: normalizeClass(unref(ns).be("panel", "filter")),
|
|
size: "default",
|
|
placeholder: _ctx.placeholder,
|
|
"prefix-icon": unref(search_default),
|
|
clearable: "",
|
|
"validate-event": false
|
|
}, null, 8, ["modelValue", "onUpdate:modelValue", "class", "placeholder", "prefix-icon"])) : createCommentVNode("v-if", true),
|
|
withDirectives(createVNode(unref(ElCheckboxGroup$1), {
|
|
modelValue: unref(checked),
|
|
"onUpdate:modelValue": ($event) => isRef(checked) ? checked.value = $event : null,
|
|
"validate-event": false,
|
|
class: normalizeClass([unref(ns).is("filterable", _ctx.filterable), unref(ns).be("panel", "list")])
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(filteredData), (item) => {
|
|
return openBlock(), createBlock(unref(ElCheckbox), {
|
|
key: item[unref(propsAlias).key],
|
|
class: normalizeClass(unref(ns).be("panel", "item")),
|
|
value: item[unref(propsAlias).key],
|
|
disabled: item[unref(propsAlias).disabled],
|
|
"validate-event": false
|
|
}, {
|
|
default: withCtx(() => {
|
|
var _a;
|
|
return [
|
|
createVNode(OptionContent, {
|
|
option: (_a = _ctx.optionRender) == null ? void 0 : _a.call(_ctx, item)
|
|
}, null, 8, ["option"])
|
|
];
|
|
}),
|
|
_: 2
|
|
}, 1032, ["class", "value", "disabled"]);
|
|
}), 128))
|
|
]),
|
|
_: 1
|
|
}, 8, ["modelValue", "onUpdate:modelValue", "class"]), [
|
|
[vShow, !unref(hasNoMatch) && !unref(isEmpty)(_ctx.data)]
|
|
]),
|
|
withDirectives(createElementVNode("p", {
|
|
class: normalizeClass(unref(ns).be("panel", "empty"))
|
|
}, toDisplayString(unref(hasNoMatch) ? unref(t)("el.transfer.noMatch") : unref(t)("el.transfer.noData")), 3), [
|
|
[vShow, unref(hasNoMatch) || unref(isEmpty)(_ctx.data)]
|
|
])
|
|
], 2),
|
|
unref(hasFooter) ? (openBlock(), createElementBlock("p", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).be("panel", "footer"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var TransferPanel = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__file", "transfer-panel.vue"]]);
|
|
|
|
const __default__$i = defineComponent({
|
|
name: "ElTransfer"
|
|
});
|
|
const _sfc_main$n = /* @__PURE__ */ defineComponent({
|
|
...__default__$i,
|
|
props: transferProps,
|
|
emits: transferEmits,
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const slots = useSlots();
|
|
const { t } = useLocale();
|
|
const ns = useNamespace("transfer");
|
|
const { formItem } = useFormItem();
|
|
const checkedState = 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 = ref();
|
|
const rightPanel = ref();
|
|
const clearQuery = (which) => {
|
|
switch (which) {
|
|
case "left":
|
|
leftPanel.value.query = "";
|
|
break;
|
|
case "right":
|
|
rightPanel.value.query = "";
|
|
break;
|
|
}
|
|
};
|
|
const hasButtonTexts = computed(() => props.buttonTexts.length === 2);
|
|
const leftPanelTitle = computed(() => props.titles[0] || t("el.transfer.titles.0"));
|
|
const rightPanelTitle = computed(() => props.titles[1] || t("el.transfer.titles.1"));
|
|
const panelFilterPlaceholder = computed(() => props.filterPlaceholder || t("el.transfer.filterPlaceholder"));
|
|
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 = computed(() => (option) => {
|
|
if (props.renderContent)
|
|
return props.renderContent(h$1, option);
|
|
if (slots.default)
|
|
return slots.default({ option });
|
|
return h$1("span", option[propsAlias.value.label] || option[propsAlias.value.key]);
|
|
});
|
|
expose({
|
|
clearQuery,
|
|
leftPanel,
|
|
rightPanel
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass(unref(ns).b())
|
|
}, [
|
|
createVNode(TransferPanel, {
|
|
ref_key: "leftPanel",
|
|
ref: leftPanel,
|
|
data: unref(sourceData),
|
|
"option-render": unref(optionRender),
|
|
placeholder: unref(panelFilterPlaceholder),
|
|
title: unref(leftPanelTitle),
|
|
filterable: _ctx.filterable,
|
|
format: _ctx.format,
|
|
"filter-method": _ctx.filterMethod,
|
|
"default-checked": _ctx.leftDefaultChecked,
|
|
props: props.props,
|
|
onCheckedChange: unref(onSourceCheckedChange)
|
|
}, {
|
|
default: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "left-footer")
|
|
]),
|
|
_: 3
|
|
}, 8, ["data", "option-render", "placeholder", "title", "filterable", "format", "filter-method", "default-checked", "props", "onCheckedChange"]),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("buttons"))
|
|
}, [
|
|
createVNode(unref(ElButton), {
|
|
type: "primary",
|
|
class: normalizeClass([unref(ns).e("button"), unref(ns).is("with-texts", unref(hasButtonTexts))]),
|
|
disabled: unref(isEmpty)(checkedState.rightChecked),
|
|
onClick: unref(addToLeft)
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(arrow_left_default))
|
|
]),
|
|
_: 1
|
|
}),
|
|
!unref(isUndefined)(_ctx.buttonTexts[0]) ? (openBlock(), createElementBlock("span", { key: 0 }, toDisplayString(_ctx.buttonTexts[0]), 1)) : createCommentVNode("v-if", true)
|
|
]),
|
|
_: 1
|
|
}, 8, ["class", "disabled", "onClick"]),
|
|
createVNode(unref(ElButton), {
|
|
type: "primary",
|
|
class: normalizeClass([unref(ns).e("button"), unref(ns).is("with-texts", unref(hasButtonTexts))]),
|
|
disabled: unref(isEmpty)(checkedState.leftChecked),
|
|
onClick: unref(addToRight)
|
|
}, {
|
|
default: withCtx(() => [
|
|
!unref(isUndefined)(_ctx.buttonTexts[1]) ? (openBlock(), createElementBlock("span", { key: 0 }, toDisplayString(_ctx.buttonTexts[1]), 1)) : createCommentVNode("v-if", true),
|
|
createVNode(unref(ElIcon), null, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(arrow_right_default))
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
}, 8, ["class", "disabled", "onClick"])
|
|
], 2),
|
|
createVNode(TransferPanel, {
|
|
ref_key: "rightPanel",
|
|
ref: rightPanel,
|
|
data: unref(targetData),
|
|
"option-render": unref(optionRender),
|
|
placeholder: unref(panelFilterPlaceholder),
|
|
filterable: _ctx.filterable,
|
|
format: _ctx.format,
|
|
"filter-method": _ctx.filterMethod,
|
|
title: unref(rightPanelTitle),
|
|
"default-checked": _ctx.rightDefaultChecked,
|
|
props: props.props,
|
|
onCheckedChange: unref(onTargetCheckedChange)
|
|
}, {
|
|
default: withCtx(() => [
|
|
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$n, [["__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.isLeafByUser) {
|
|
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 = 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);
|
|
}
|
|
};
|
|
const reject = () => {
|
|
this.loading = false;
|
|
};
|
|
this.store.load(this, resolve, reject);
|
|
} else {
|
|
if (callback) {
|
|
callback.call(this);
|
|
}
|
|
}
|
|
}
|
|
eachNode(callback) {
|
|
const arr = [this];
|
|
while (arr.length) {
|
|
const node = arr.shift();
|
|
arr.unshift(...node.childNodes);
|
|
callback(node);
|
|
}
|
|
}
|
|
reInitChecked() {
|
|
if (this.store.checkStrictly)
|
|
return;
|
|
reInitChecked(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) {
|
|
if (!lazy || node.loaded) {
|
|
node.expand();
|
|
}
|
|
}
|
|
};
|
|
traverse(this);
|
|
}
|
|
setData(newVal) {
|
|
const instanceChanged = newVal !== this.root.data;
|
|
if (instanceChanged) {
|
|
this.nodesMap = {};
|
|
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 = !isPropAbsent(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) => a.level - b.level);
|
|
const cache = /* @__PURE__ */ Object.create(null);
|
|
const keys = Object.keys(checkedKeys);
|
|
allNodes.forEach((node) => node.setChecked(false, false));
|
|
const cacheCheckedChild = (node) => {
|
|
node.childNodes.forEach((child) => {
|
|
var _a;
|
|
cache[child.data[key]] = true;
|
|
if ((_a = child.childNodes) == null ? void 0 : _a.length) {
|
|
cacheCheckedChild(child);
|
|
}
|
|
});
|
|
};
|
|
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;
|
|
}
|
|
if (node.childNodes.length) {
|
|
cacheCheckedChild(node);
|
|
}
|
|
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$m = defineComponent({
|
|
name: "ElTreeNodeContent",
|
|
props: {
|
|
node: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
renderContent: Function
|
|
},
|
|
setup(props) {
|
|
const ns = useNamespace("tree");
|
|
const nodeInstance = inject("NodeInstance");
|
|
const tree = inject("RootTree");
|
|
return () => {
|
|
const node = props.node;
|
|
const { data, store } = node;
|
|
return props.renderContent ? props.renderContent(h$1, { _self: nodeInstance, node, data, store }) : renderSlot(tree.ctx.slots, "default", { node, data }, () => [
|
|
h$1("span", { class: ns.be("node", "label") }, [node.label])
|
|
]);
|
|
};
|
|
}
|
|
});
|
|
var NodeContent = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__file", "tree-node-content.vue"]]);
|
|
|
|
function useNodeExpandEventBroadcast(props) {
|
|
const parentNodeMap = inject("TreeNodeMap", null);
|
|
const currentNodeMap = {
|
|
treeNodeExpand: (node) => {
|
|
if (props.node !== node) {
|
|
props.node.collapse();
|
|
}
|
|
},
|
|
children: []
|
|
};
|
|
if (parentNodeMap) {
|
|
parentNodeMap.children.push(currentNodeMap);
|
|
}
|
|
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 = 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.node.id !== dropNode.node.id) {
|
|
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 == null ? void 0 : oldDropNode.node.id) !== dropNode.node.id) {
|
|
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;
|
|
} else {
|
|
dragState.value.dropNode = null;
|
|
}
|
|
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.querySelector(`.${ns.be("node", "content")}`).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();
|
|
if (event.dataTransfer) {
|
|
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);
|
|
if (store.value.key) {
|
|
draggingNode.node.eachNode((node) => {
|
|
var _a;
|
|
(_a = store.value.nodesMap[node.data[store.value.key]]) == null ? void 0 : _a.setChecked(node.checked, !store.value.checkStrictly);
|
|
});
|
|
}
|
|
}
|
|
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;
|
|
};
|
|
provide(dragEventsKey, {
|
|
treeNodeDragStart,
|
|
treeNodeDragOver,
|
|
treeNodeDragEnd
|
|
});
|
|
return {
|
|
dragState
|
|
};
|
|
}
|
|
|
|
const _sfc_main$l = defineComponent({
|
|
name: "ElTreeNode",
|
|
components: {
|
|
ElCollapseTransition,
|
|
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 = inject("RootTree");
|
|
const expanded = ref(false);
|
|
const childNodeRendered = ref(false);
|
|
const oldChecked = ref(null);
|
|
const oldIndeterminate = ref(null);
|
|
const node$ = ref(null);
|
|
const dragEvents = inject(dragEventsKey);
|
|
const instance = getCurrentInstance();
|
|
provide("NodeInstance", instance);
|
|
if (props.node.expanded) {
|
|
expanded.value = true;
|
|
childNodeRendered.value = true;
|
|
}
|
|
const childrenKey = tree.props.props["children"] || "children";
|
|
watch(() => {
|
|
const children = props.node.data[childrenKey];
|
|
return children && [...children];
|
|
}, () => {
|
|
props.node.updateChildren();
|
|
});
|
|
watch(() => props.node.indeterminate, (val) => {
|
|
handleSelectChange(props.node.checked, val);
|
|
});
|
|
watch(() => props.node.checked, (val) => {
|
|
handleSelectChange(val, props.node.indeterminate);
|
|
});
|
|
watch(() => props.node.childNodes.length, () => props.node.reInitChecked());
|
|
watch(() => props.node.expanded, (val) => {
|
|
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$1(nodeClassFunc)) {
|
|
const { data } = node;
|
|
className = nodeClassFunc(data, node);
|
|
} else {
|
|
className = nodeClassFunc;
|
|
}
|
|
if (isString$1(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);
|
|
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
|
|
};
|
|
}
|
|
});
|
|
function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
|
|
const _component_el_icon = resolveComponent("el-icon");
|
|
const _component_el_checkbox = resolveComponent("el-checkbox");
|
|
const _component_loading = resolveComponent("loading");
|
|
const _component_node_content = resolveComponent("node-content");
|
|
const _component_el_tree_node = resolveComponent("el-tree-node");
|
|
const _component_el_collapse_transition = resolveComponent("el-collapse-transition");
|
|
return withDirectives((openBlock(), createElementBlock("div", {
|
|
ref: "node$",
|
|
class: 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: withModifiers(_ctx.handleClick, ["stop"]),
|
|
onContextmenu: _ctx.handleContextMenu,
|
|
onDragstart: withModifiers(_ctx.handleDragStart, ["stop"]),
|
|
onDragover: withModifiers(_ctx.handleDragOver, ["stop"]),
|
|
onDragend: withModifiers(_ctx.handleDragEnd, ["stop"]),
|
|
onDrop: withModifiers(_ctx.handleDrop, ["stop"])
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(_ctx.ns.be("node", "content")),
|
|
style: normalizeStyle({ paddingLeft: (_ctx.node.level - 1) * _ctx.tree.props.indent + "px" })
|
|
}, [
|
|
_ctx.tree.props.icon || _ctx.CaretRight ? (openBlock(), createBlock(_component_el_icon, {
|
|
key: 0,
|
|
class: normalizeClass([
|
|
_ctx.ns.be("node", "expand-icon"),
|
|
_ctx.ns.is("leaf", _ctx.node.isLeaf),
|
|
{
|
|
expanded: !_ctx.node.isLeaf && _ctx.expanded
|
|
}
|
|
]),
|
|
onClick: withModifiers(_ctx.handleExpandIconClick, ["stop"])
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.tree.props.icon || _ctx.CaretRight)))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class", "onClick"])) : createCommentVNode("v-if", true),
|
|
_ctx.showCheckbox ? (openBlock(), createBlock(_component_el_checkbox, {
|
|
key: 1,
|
|
"model-value": _ctx.node.checked,
|
|
indeterminate: _ctx.node.indeterminate,
|
|
disabled: !!_ctx.node.disabled,
|
|
onClick: withModifiers(() => {
|
|
}, ["stop"]),
|
|
onChange: _ctx.handleCheckChange
|
|
}, null, 8, ["model-value", "indeterminate", "disabled", "onClick", "onChange"])) : createCommentVNode("v-if", true),
|
|
_ctx.node.loading ? (openBlock(), createBlock(_component_el_icon, {
|
|
key: 2,
|
|
class: normalizeClass([_ctx.ns.be("node", "loading-icon"), _ctx.ns.is("loading")])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_component_loading)
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : createCommentVNode("v-if", true),
|
|
createVNode(_component_node_content, {
|
|
node: _ctx.node,
|
|
"render-content": _ctx.renderContent
|
|
}, null, 8, ["node", "render-content"])
|
|
], 6),
|
|
createVNode(_component_el_collapse_transition, null, {
|
|
default: withCtx(() => [
|
|
!_ctx.renderAfterExpand || _ctx.childNodeRendered ? withDirectives((openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(_ctx.ns.be("node", "children")),
|
|
role: "group",
|
|
"aria-expanded": _ctx.expanded
|
|
}, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.node.childNodes, (child) => {
|
|
return openBlock(), 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, ["aria-expanded"])), [
|
|
[vShow, _ctx.expanded]
|
|
]) : createCommentVNode("v-if", true)
|
|
]),
|
|
_: 1
|
|
})
|
|
], 42, ["aria-expanded", "aria-disabled", "aria-checked", "draggable", "data-key", "onClick", "onContextmenu", "onDragstart", "onDragover", "onDragend", "onDrop"])), [
|
|
[vShow, _ctx.node.visible]
|
|
]);
|
|
}
|
|
var ElTreeNode$1 = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$2], ["__file", "tree-node.vue"]]);
|
|
|
|
function useKeydown({ el$ }, store) {
|
|
const ns = useNamespace("tree");
|
|
const treeItems = shallowRef([]);
|
|
const checkboxItems = shallowRef([]);
|
|
onMounted(() => {
|
|
initTabIndex();
|
|
});
|
|
onUpdated(() => {
|
|
treeItems.value = Array.from(el$.value.querySelectorAll("[role=treeitem]"));
|
|
checkboxItems.value = Array.from(el$.value.querySelectorAll("input[type=checkbox]"));
|
|
});
|
|
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$k = 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 selectInfo = inject(selectKey, null);
|
|
const store = 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 = ref(store.value.root);
|
|
const currentNode = ref(null);
|
|
const el$ = ref(null);
|
|
const dropIndicator$ = ref(null);
|
|
const { broadcastExpanded } = useNodeExpandEventBroadcast(props);
|
|
const { dragState } = useDragNodeHandler({
|
|
props,
|
|
ctx,
|
|
el$,
|
|
dropIndicator$,
|
|
store
|
|
});
|
|
useKeydown({ el$ }, store);
|
|
const isEmpty = computed(() => {
|
|
const { childNodes } = root.value;
|
|
const hasFilteredOptions = selectInfo ? selectInfo.hasFilteredOptions !== 0 : false;
|
|
return (!childNodes || childNodes.length === 0 || childNodes.every(({ visible }) => !visible)) && !hasFilteredOptions;
|
|
});
|
|
watch(() => props.currentNodeKey, (newVal) => {
|
|
store.value.setCurrentNodeKey(newVal);
|
|
});
|
|
watch(() => props.defaultCheckedKeys, (newVal) => {
|
|
store.value.setDefaultCheckedKey(newVal);
|
|
});
|
|
watch(() => props.defaultExpandedKeys, (newVal) => {
|
|
store.value.setDefaultExpandedKeys(newVal);
|
|
});
|
|
watch(() => props.data, (newVal) => {
|
|
store.value.setData(newVal);
|
|
}, { deep: true });
|
|
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, () => {
|
|
broadcastExpanded(node);
|
|
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, () => {
|
|
broadcastExpanded();
|
|
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);
|
|
};
|
|
provide("RootTree", {
|
|
ctx,
|
|
props,
|
|
store,
|
|
root,
|
|
currentNode,
|
|
instance: getCurrentInstance()
|
|
});
|
|
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) {
|
|
const _component_el_tree_node = resolveComponent("el-tree-node");
|
|
return openBlock(), createElementBlock("div", {
|
|
ref: "el$",
|
|
class: 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"
|
|
}, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.root.childNodes, (child) => {
|
|
return openBlock(), 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 ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(_ctx.ns.e("empty-block"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "empty", {}, () => {
|
|
var _a;
|
|
return [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(_ctx.ns.e("empty-text"))
|
|
}, toDisplayString((_a = _ctx.emptyText) != null ? _a : _ctx.t("el.tree.emptyText")), 3)
|
|
];
|
|
})
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
withDirectives(createElementVNode("div", {
|
|
ref: "dropIndicator$",
|
|
class: normalizeClass(_ctx.ns.e("drop-indicator"))
|
|
}, null, 2), [
|
|
[vShow, _ctx.dragState.showDropIndicator]
|
|
])
|
|
], 2);
|
|
}
|
|
var Tree = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$1], ["__file", "tree.vue"]]);
|
|
|
|
const ElTree = withInstall(Tree);
|
|
|
|
const useSelect = (props, { attrs, emit }, {
|
|
select,
|
|
tree,
|
|
key
|
|
}) => {
|
|
const ns = useNamespace("tree-select");
|
|
watch(() => props.data, () => {
|
|
if (props.filterable) {
|
|
nextTick(() => {
|
|
var _a, _b;
|
|
(_b = tree.value) == null ? void 0 : _b.filter((_a = select.value) == null ? void 0 : _a.states.inputValue);
|
|
});
|
|
}
|
|
}, { flush: "post" });
|
|
const result = {
|
|
...pick(toRefs(props), Object.keys(ElSelect.props)),
|
|
...attrs,
|
|
"onUpdate:modelValue": (value) => emit(UPDATE_MODEL_EVENT, value),
|
|
valueKey: key,
|
|
popperClass: computed(() => {
|
|
const classes = [ns.e("popper")];
|
|
if (props.popperClass)
|
|
classes.push(props.popperClass);
|
|
return classes.join(" ");
|
|
}),
|
|
filterMethod: (keyword = "") => {
|
|
var _a;
|
|
if (props.filterMethod) {
|
|
props.filterMethod(keyword);
|
|
} else if (props.remoteMethod) {
|
|
props.remoteMethod(keyword);
|
|
} else {
|
|
(_a = tree.value) == null ? void 0 : _a.filter(keyword);
|
|
}
|
|
}
|
|
};
|
|
return result;
|
|
};
|
|
|
|
const component = defineComponent({
|
|
extends: ElOption,
|
|
setup(props, ctx) {
|
|
const result = ElOption.setup(props, ctx);
|
|
delete result.selectOptionClick;
|
|
const vm = getCurrentInstance().proxy;
|
|
nextTick(() => {
|
|
if (!result.select.states.cachedOptions.get(vm.value)) {
|
|
result.select.onOptionCreate(vm);
|
|
}
|
|
});
|
|
watch(() => ctx.attrs.visible, (val) => {
|
|
result.states.visible = val;
|
|
}, {
|
|
immediate: true
|
|
});
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
function treeEach(treeData, callback, getChildren, parent) {
|
|
for (let i = 0; i < treeData.length; i++) {
|
|
const data = treeData[i];
|
|
callback(data, i, treeData, parent);
|
|
const children = getChildren(data);
|
|
if (isValidArray(children)) {
|
|
treeEach(children, callback, getChildren, data);
|
|
}
|
|
}
|
|
}
|
|
|
|
const useTree$1 = (props, { attrs, slots, emit }, {
|
|
select,
|
|
tree,
|
|
key
|
|
}) => {
|
|
watch(() => props.modelValue, () => {
|
|
if (props.showCheckbox) {
|
|
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 = computed(() => ({
|
|
value: key.value,
|
|
label: "label",
|
|
children: "children",
|
|
disabled: "disabled",
|
|
isLeaf: "isLeaf",
|
|
...props.props
|
|
}));
|
|
const getNodeValByProp = (prop, data) => {
|
|
var _a;
|
|
const propVal = propsMap.value[prop];
|
|
if (isFunction$1(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));
|
|
const cacheOptions = computed(() => {
|
|
if (!props.renderAfterExpand && !props.lazy)
|
|
return [];
|
|
const options = [];
|
|
treeEach(props.data.concat(props.cacheData), (node) => {
|
|
const value = getNodeValByProp("value", node);
|
|
options.push({
|
|
value,
|
|
currentLabel: getNodeValByProp("label", node),
|
|
isDisabled: getNodeValByProp("disabled", node)
|
|
});
|
|
}, (data) => getNodeValByProp("children", data));
|
|
return options;
|
|
});
|
|
const getChildCheckedKeys = () => {
|
|
var _a;
|
|
return (_a = tree.value) == null ? void 0 : _a.getCheckedKeys().filter((checkedKey) => {
|
|
var _a2;
|
|
const node = (_a2 = tree.value) == null ? void 0 : _a2.getNode(checkedKey);
|
|
return !isNil(node) && isEmpty(node.childNodes);
|
|
});
|
|
};
|
|
return {
|
|
...pick(toRefs(props), Object.keys(ElTree.props)),
|
|
...attrs,
|
|
nodeKey: key,
|
|
expandOnClickNode: computed(() => {
|
|
return !props.checkStrictly && props.expandOnClickNode;
|
|
}),
|
|
defaultExpandedKeys: 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),
|
|
visible: node.visible
|
|
}, props.renderContent ? () => props.renderContent(h, { node, data, store }) : slots.default ? () => slots.default({ node, data, store }) : void 0);
|
|
},
|
|
filterNodeMethod: (value, data, node) => {
|
|
if (props.filterNodeMethod)
|
|
return props.filterNodeMethod(value, data, node);
|
|
if (!value)
|
|
return true;
|
|
const regexp = new RegExp(escapeStringRegexp(value), "i");
|
|
return regexp.test(getNodeValByProp("label", data) || "");
|
|
},
|
|
onNodeClick: (data, node, e) => {
|
|
var _a, _b, _c, _d;
|
|
(_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.states.options.get(getNodeValByProp("value", data));
|
|
(_c = select.value) == null ? void 0 : _c.handleOptionSelect(option);
|
|
}
|
|
} else if (props.expandOnClickNode) {
|
|
e.proxy.handleExpandIconClick();
|
|
}
|
|
(_d = select.value) == null ? void 0 : _d.focus();
|
|
},
|
|
onCheck: (data, params) => {
|
|
var _a;
|
|
if (!props.showCheckbox)
|
|
return;
|
|
const dataValue = getNodeValByProp("value", data);
|
|
const dataMap = {};
|
|
treeEach([tree.value.store.root], (node) => dataMap[node.key] = node, (node) => node.childNodes);
|
|
const uncachedCheckedKeys = params.checkedKeys;
|
|
const cachedKeys = props.multiple ? toValidArray(props.modelValue).filter((item) => !(item in dataMap) && !uncachedCheckedKeys.includes(item)) : [];
|
|
const checkedKeys = cachedKeys.concat(uncachedCheckedKeys);
|
|
if (props.checkStrictly) {
|
|
emit(UPDATE_MODEL_EVENT, props.multiple ? checkedKeys : checkedKeys.includes(dataValue) ? dataValue : void 0);
|
|
} else {
|
|
if (props.multiple) {
|
|
const childKeys = getChildCheckedKeys();
|
|
emit(UPDATE_MODEL_EVENT, cachedKeys.concat(childKeys));
|
|
} 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);
|
|
}
|
|
}
|
|
nextTick(() => {
|
|
var _a2;
|
|
const checkedKeys2 = toValidArray(props.modelValue);
|
|
tree.value.setCheckedKeys(checkedKeys2);
|
|
(_a2 = attrs.onCheck) == null ? void 0 : _a2.call(attrs, data, {
|
|
checkedKeys: tree.value.getCheckedKeys(),
|
|
checkedNodes: tree.value.getCheckedNodes(),
|
|
halfCheckedKeys: tree.value.getHalfCheckedKeys(),
|
|
halfCheckedNodes: tree.value.getHalfCheckedNodes()
|
|
});
|
|
});
|
|
(_a = select.value) == null ? void 0 : _a.focus();
|
|
},
|
|
onNodeExpand: (data, node, e) => {
|
|
var _a;
|
|
(_a = attrs.onNodeExpand) == null ? void 0 : _a.call(attrs, data, node, e);
|
|
nextTick(() => {
|
|
if (!props.checkStrictly && props.lazy && props.multiple && node.checked) {
|
|
const dataMap = {};
|
|
const uncachedCheckedKeys = tree.value.getCheckedKeys();
|
|
treeEach([tree.value.store.root], (node2) => dataMap[node2.key] = node2, (node2) => node2.childNodes);
|
|
const cachedKeys = toValidArray(props.modelValue).filter((item) => !(item in dataMap) && !uncachedCheckedKeys.includes(item));
|
|
const childKeys = getChildCheckedKeys();
|
|
emit(UPDATE_MODEL_EVENT, cachedKeys.concat(childKeys));
|
|
}
|
|
});
|
|
},
|
|
cacheOptions
|
|
};
|
|
};
|
|
|
|
var CacheOptions = defineComponent({
|
|
props: {
|
|
data: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
setup(props) {
|
|
const select = inject(selectKey);
|
|
watch(() => props.data, () => {
|
|
var _a;
|
|
props.data.forEach((item) => {
|
|
if (!select.states.cachedOptions.has(item.value)) {
|
|
select.states.cachedOptions.set(item.value, item);
|
|
}
|
|
});
|
|
const inputs = ((_a = select.selectRef) == null ? void 0 : _a.querySelectorAll("input")) || [];
|
|
if (isClient && !Array.from(inputs).includes(document.activeElement)) {
|
|
select.setSelected();
|
|
}
|
|
}, { flush: "post", immediate: true });
|
|
return () => void 0;
|
|
}
|
|
});
|
|
|
|
const _sfc_main$j = defineComponent({
|
|
name: "ElTreeSelect",
|
|
inheritAttrs: false,
|
|
props: {
|
|
...ElSelect.props,
|
|
...ElTree.props,
|
|
cacheData: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
setup(props, context) {
|
|
const { slots, expose } = context;
|
|
const select = ref();
|
|
const tree = ref();
|
|
const key = computed(() => props.nodeKey || props.valueKey || "value");
|
|
const selectProps = useSelect(props, context, { select, tree, key });
|
|
const { cacheOptions, ...treeProps } = useTree$1(props, context, {
|
|
select,
|
|
tree,
|
|
key
|
|
});
|
|
const methods = reactive({});
|
|
expose(methods);
|
|
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 () => h$1(ElSelect, reactive({
|
|
...selectProps,
|
|
ref: (ref2) => select.value = ref2
|
|
}), {
|
|
...slots,
|
|
default: () => [
|
|
h$1(CacheOptions, { data: cacheOptions.value }),
|
|
h$1(ElTree, reactive({
|
|
...treeProps,
|
|
ref: (ref2) => tree.value = ref2
|
|
}))
|
|
]
|
|
});
|
|
}
|
|
});
|
|
var TreeSelect = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__file", "tree-select.vue"]]);
|
|
|
|
const ElTreeSelect = withInstall(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 itemSize = {
|
|
type: Number,
|
|
default: 26
|
|
};
|
|
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
|
|
},
|
|
itemSize,
|
|
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
|
|
},
|
|
itemSize
|
|
});
|
|
const treeNodeContentProps = buildProps({
|
|
node: {
|
|
type: definePropType(Object),
|
|
required: true
|
|
}
|
|
});
|
|
const NODE_CLICK = "node-click";
|
|
const NODE_DROP = "node-drop";
|
|
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_DROP]: (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]: (evt, data, node) => evt && data && node
|
|
};
|
|
const treeNodeEmits = {
|
|
click: (node, e) => !!(node && e),
|
|
drop: (node, e) => !!(node && e),
|
|
toggle: (node) => !!node,
|
|
check: (node, checked) => node && typeof checked === "boolean"
|
|
};
|
|
|
|
function useCheck(props, tree) {
|
|
const checkedKeys = ref(/* @__PURE__ */ new Set());
|
|
const indeterminateKeys = ref(/* @__PURE__ */ new Set());
|
|
const { emit } = getCurrentInstance();
|
|
watch([() => tree.value, () => props.defaultCheckedKeys], () => {
|
|
return 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();
|
|
nextTick(() => {
|
|
_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 = ref(/* @__PURE__ */ new Set([]));
|
|
const hiddenExpandIconKeySet = ref(/* @__PURE__ */ new Set([]));
|
|
const filterable = computed(() => {
|
|
return isFunction$1(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 = ref(new Set(props.defaultExpandedKeys));
|
|
const currentKey = ref();
|
|
const tree = shallowRef();
|
|
const listRef = ref();
|
|
watch(() => props.currentNodeKey, (key) => {
|
|
currentKey.value = key;
|
|
}, {
|
|
immediate: true
|
|
});
|
|
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 = computed(() => {
|
|
var _a;
|
|
return ((_a = props.props) == null ? void 0 : _a.value) || TreeOptionsEnum.KEY;
|
|
});
|
|
const childrenKey = computed(() => {
|
|
var _a;
|
|
return ((_a = props.props) == null ? void 0 : _a.children) || TreeOptionsEnum.CHILDREN;
|
|
});
|
|
const disabledKey = computed(() => {
|
|
var _a;
|
|
return ((_a = props.props) == null ? void 0 : _a.disabled) || TreeOptionsEnum.DISABLED;
|
|
});
|
|
const labelKey = computed(() => {
|
|
var _a;
|
|
return ((_a = props.props) == null ? void 0 : _a.label) || TreeOptionsEnum.LABEL;
|
|
});
|
|
const flattenTree = computed(() => {
|
|
var _a;
|
|
const expandedKeys = expandedKeySet.value;
|
|
const hiddenKeys = hiddenNodeKeySet.value;
|
|
const flattenNodes = [];
|
|
const nodes = ((_a = tree.value) == null ? void 0 : _a.treeNodes) || [];
|
|
const stack = [];
|
|
for (let i = nodes.length - 1; i >= 0; --i) {
|
|
stack.push(nodes[i]);
|
|
}
|
|
while (stack.length) {
|
|
const node = stack.pop();
|
|
if (hiddenKeys.has(node.key))
|
|
continue;
|
|
flattenNodes.push(node);
|
|
if (node.children && expandedKeys.has(node.key)) {
|
|
for (let i = node.children.length - 1; i >= 0; --i) {
|
|
stack.push(node.children[i]);
|
|
}
|
|
}
|
|
}
|
|
return flattenNodes;
|
|
});
|
|
const isNotEmpty = 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) {
|
|
const expandedKeys = /* @__PURE__ */ new Set();
|
|
const nodeMap = tree.value.treeNodeMap;
|
|
keys.forEach((k) => {
|
|
let node = nodeMap.get(k);
|
|
while (node && !expandedKeys.has(node.key)) {
|
|
expandedKeys.add(node.key);
|
|
node = node.parent;
|
|
}
|
|
});
|
|
expandedKeySet.value = expandedKeys;
|
|
}
|
|
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 handleNodeDrop(node, e) {
|
|
emit(NODE_DROP, node.data, node, e);
|
|
}
|
|
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 !== void 0 && 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) {
|
|
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);
|
|
}
|
|
function scrollToNode(key, strategy = "auto") {
|
|
const node = getNode(key);
|
|
if (node && listRef.value) {
|
|
listRef.value.scrollToItem(flattenTree.value.indexOf(node), strategy);
|
|
}
|
|
}
|
|
function scrollTo(offset) {
|
|
var _a;
|
|
(_a = listRef.value) == null ? void 0 : _a.scrollTo(offset);
|
|
}
|
|
return {
|
|
tree,
|
|
flattenTree,
|
|
isNotEmpty,
|
|
listRef,
|
|
getKey,
|
|
getChildren,
|
|
toggleExpand,
|
|
toggleCheckbox,
|
|
isExpanded,
|
|
isChecked,
|
|
isIndeterminate,
|
|
isDisabled,
|
|
isCurrent,
|
|
isForceHiddenExpandIcon,
|
|
handleNodeClick,
|
|
handleNodeDrop,
|
|
handleNodeCheck,
|
|
getCurrentNode,
|
|
getCurrentKey,
|
|
setCurrentKey,
|
|
getCheckedKeys,
|
|
getCheckedNodes,
|
|
getHalfCheckedKeys,
|
|
getHalfCheckedNodes,
|
|
setChecked,
|
|
setCheckedKeys,
|
|
filter,
|
|
setData,
|
|
getNode,
|
|
expandNode,
|
|
collapseNode,
|
|
setExpandedKeys,
|
|
scrollToNode,
|
|
scrollTo
|
|
};
|
|
}
|
|
|
|
var ElNodeContent = defineComponent({
|
|
name: "ElTreeNodeContent",
|
|
props: treeNodeContentProps,
|
|
setup(props) {
|
|
const tree = 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 }) : h$1("span", { class: ns.be("node", "label") }, [node == null ? void 0 : node.label]);
|
|
};
|
|
}
|
|
});
|
|
|
|
const __default__$h = defineComponent({
|
|
name: "ElTreeNode"
|
|
});
|
|
const _sfc_main$i = /* @__PURE__ */ defineComponent({
|
|
...__default__$h,
|
|
props: treeNodeProps,
|
|
emits: treeNodeEmits,
|
|
setup(__props, { emit }) {
|
|
const props = __props;
|
|
const tree = inject(ROOT_TREE_INJECTION_KEY);
|
|
const ns = useNamespace("tree");
|
|
const indent = computed(() => {
|
|
var _a;
|
|
return (_a = tree == null ? void 0 : tree.props.indent) != null ? _a : 16;
|
|
});
|
|
const icon = 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 handleDrop = (e) => {
|
|
emit("drop", 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 openBlock(), createElementBlock("div", {
|
|
ref: "node$",
|
|
class: normalizeClass([
|
|
unref(ns).b("node"),
|
|
unref(ns).is("expanded", _ctx.expanded),
|
|
unref(ns).is("current", _ctx.current),
|
|
unref(ns).is("focusable", !_ctx.disabled),
|
|
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: withModifiers(handleClick, ["stop"]),
|
|
onContextmenu: handleContextMenu,
|
|
onDragover: withModifiers(() => {
|
|
}, ["prevent"]),
|
|
onDragenter: withModifiers(() => {
|
|
}, ["prevent"]),
|
|
onDrop: withModifiers(handleDrop, ["stop"])
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).be("node", "content")),
|
|
style: normalizeStyle({
|
|
paddingLeft: `${(_ctx.node.level - 1) * unref(indent)}px`,
|
|
height: _ctx.itemSize + "px"
|
|
})
|
|
}, [
|
|
unref(icon) ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 0,
|
|
class: normalizeClass([
|
|
unref(ns).is("leaf", !!((_b = _ctx.node) == null ? void 0 : _b.isLeaf)),
|
|
unref(ns).is("hidden", _ctx.hiddenExpandIcon),
|
|
{
|
|
expanded: !((_c = _ctx.node) == null ? void 0 : _c.isLeaf) && _ctx.expanded
|
|
},
|
|
unref(ns).be("node", "expand-icon")
|
|
]),
|
|
onClick: withModifiers(handleExpandIconClick, ["stop"])
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(unref(icon))))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class", "onClick"])) : createCommentVNode("v-if", true),
|
|
_ctx.showCheckbox ? (openBlock(), createBlock(unref(ElCheckbox), {
|
|
key: 1,
|
|
"model-value": _ctx.checked,
|
|
indeterminate: _ctx.indeterminate,
|
|
disabled: _ctx.disabled,
|
|
onChange: handleCheckChange,
|
|
onClick: withModifiers(() => {
|
|
}, ["stop"])
|
|
}, null, 8, ["model-value", "indeterminate", "disabled", "onClick"])) : createCommentVNode("v-if", true),
|
|
createVNode(unref(ElNodeContent), { node: _ctx.node }, null, 8, ["node"])
|
|
], 6)
|
|
], 42, ["aria-expanded", "aria-disabled", "aria-checked", "data-key", "onClick", "onDragover", "onDragenter", "onDrop"]);
|
|
};
|
|
}
|
|
});
|
|
var ElTreeNode = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__file", "tree-node.vue"]]);
|
|
|
|
const __default__$g = defineComponent({
|
|
name: "ElTreeV2"
|
|
});
|
|
const _sfc_main$h = /* @__PURE__ */ defineComponent({
|
|
...__default__$g,
|
|
props: treeProps,
|
|
emits: treeEmits,
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const slots = useSlots();
|
|
const treeNodeSize = computed(() => props.itemSize);
|
|
provide(ROOT_TREE_INJECTION_KEY, {
|
|
ctx: {
|
|
emit,
|
|
slots
|
|
},
|
|
props,
|
|
instance: getCurrentInstance()
|
|
});
|
|
provide(formItemContextKey, void 0);
|
|
const { t } = useLocale();
|
|
const ns = useNamespace("tree");
|
|
const {
|
|
flattenTree,
|
|
isNotEmpty,
|
|
listRef,
|
|
toggleExpand,
|
|
isExpanded,
|
|
isIndeterminate,
|
|
isChecked,
|
|
isDisabled,
|
|
isCurrent,
|
|
isForceHiddenExpandIcon,
|
|
handleNodeClick,
|
|
handleNodeDrop,
|
|
handleNodeCheck,
|
|
toggleCheckbox,
|
|
getCurrentNode,
|
|
getCurrentKey,
|
|
setCurrentKey,
|
|
getCheckedKeys,
|
|
getCheckedNodes,
|
|
getHalfCheckedKeys,
|
|
getHalfCheckedNodes,
|
|
setChecked,
|
|
setCheckedKeys,
|
|
filter,
|
|
setData,
|
|
getNode,
|
|
expandNode,
|
|
collapseNode,
|
|
setExpandedKeys,
|
|
scrollToNode,
|
|
scrollTo
|
|
} = useTree(props, emit);
|
|
expose({
|
|
toggleCheckbox,
|
|
getCurrentNode,
|
|
getCurrentKey,
|
|
setCurrentKey,
|
|
getCheckedKeys,
|
|
getCheckedNodes,
|
|
getHalfCheckedKeys,
|
|
getHalfCheckedNodes,
|
|
setChecked,
|
|
setCheckedKeys,
|
|
filter,
|
|
setData,
|
|
getNode,
|
|
expandNode,
|
|
collapseNode,
|
|
setExpandedKeys,
|
|
scrollToNode,
|
|
scrollTo
|
|
});
|
|
return (_ctx, _cache) => {
|
|
var _a;
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass([unref(ns).b(), { [unref(ns).m("highlight-current")]: _ctx.highlightCurrent }]),
|
|
role: "tree"
|
|
}, [
|
|
unref(isNotEmpty) ? (openBlock(), createBlock(unref(FixedSizeList$1), {
|
|
key: 0,
|
|
ref_key: "listRef",
|
|
ref: listRef,
|
|
"class-name": unref(ns).b("virtual-list"),
|
|
data: unref(flattenTree),
|
|
total: unref(flattenTree).length,
|
|
height: _ctx.height,
|
|
"item-size": unref(treeNodeSize),
|
|
"perf-mode": _ctx.perfMode
|
|
}, {
|
|
default: withCtx(({ data, index, style }) => [
|
|
(openBlock(), createBlock(ElTreeNode, {
|
|
key: data[index].key,
|
|
style: normalizeStyle(style),
|
|
node: data[index],
|
|
expanded: unref(isExpanded)(data[index]),
|
|
"show-checkbox": _ctx.showCheckbox,
|
|
checked: unref(isChecked)(data[index]),
|
|
indeterminate: unref(isIndeterminate)(data[index]),
|
|
"item-size": unref(treeNodeSize),
|
|
disabled: unref(isDisabled)(data[index]),
|
|
current: unref(isCurrent)(data[index]),
|
|
"hidden-expand-icon": unref(isForceHiddenExpandIcon)(data[index]),
|
|
onClick: unref(handleNodeClick),
|
|
onToggle: unref(toggleExpand),
|
|
onCheck: unref(handleNodeCheck),
|
|
onDrop: unref(handleNodeDrop)
|
|
}, null, 8, ["style", "node", "expanded", "show-checkbox", "checked", "indeterminate", "item-size", "disabled", "current", "hidden-expand-icon", "onClick", "onToggle", "onCheck", "onDrop"]))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class-name", "data", "total", "height", "item-size", "perf-mode"])) : (openBlock(), createElementBlock("div", {
|
|
key: 1,
|
|
class: normalizeClass(unref(ns).e("empty-block"))
|
|
}, [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(ns).e("empty-text"))
|
|
}, toDisplayString((_a = _ctx.emptyText) != null ? _a : unref(t)("el.tree.emptyText")), 3)
|
|
], 2))
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var TreeV2 = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__file", "tree.vue"]]);
|
|
|
|
const ElTreeV2 = withInstall(TreeV2);
|
|
|
|
const uploadContextKey = Symbol("uploadContextKey");
|
|
|
|
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 (isArray$1(value) && value.length)
|
|
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: definePropType([Object, Function, Promise]),
|
|
default: () => mutable({})
|
|
},
|
|
multiple: Boolean,
|
|
name: {
|
|
type: String,
|
|
default: "file"
|
|
},
|
|
drag: Boolean,
|
|
withCredentials: Boolean,
|
|
showFileList: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
accept: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
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
|
|
},
|
|
crossorigin: {
|
|
type: definePropType(String)
|
|
}
|
|
});
|
|
|
|
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"
|
|
},
|
|
crossorigin: {
|
|
type: definePropType(String)
|
|
}
|
|
});
|
|
const uploadListEmits = {
|
|
remove: (file) => !!file
|
|
};
|
|
|
|
const __default__$f = defineComponent({
|
|
name: "ElUploadList"
|
|
});
|
|
const _sfc_main$g = /* @__PURE__ */ defineComponent({
|
|
...__default__$f,
|
|
props: uploadListProps,
|
|
emits: uploadListEmits,
|
|
setup(__props, { emit }) {
|
|
const props = __props;
|
|
const { t } = useLocale();
|
|
const nsUpload = useNamespace("upload");
|
|
const nsIcon = useNamespace("icon");
|
|
const nsList = useNamespace("list");
|
|
const disabled = useFormDisabled();
|
|
const focusing = ref(false);
|
|
const containerKls = computed(() => [
|
|
nsUpload.b("list"),
|
|
nsUpload.bm("list", props.listType),
|
|
nsUpload.is("disabled", props.disabled)
|
|
]);
|
|
const handleRemove = (file) => {
|
|
emit("remove", file);
|
|
};
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createBlock(TransitionGroup, {
|
|
tag: "ul",
|
|
class: normalizeClass(unref(containerKls)),
|
|
name: unref(nsList).b()
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.files, (file, index) => {
|
|
return openBlock(), createElementBlock("li", {
|
|
key: file.uid || file.name,
|
|
class: normalizeClass([
|
|
unref(nsUpload).be("list", "item"),
|
|
unref(nsUpload).is(file.status),
|
|
{ focusing: focusing.value }
|
|
]),
|
|
tabindex: "0",
|
|
onKeydown: withKeys(($event) => !unref(disabled) && handleRemove(file), ["delete"]),
|
|
onFocus: ($event) => focusing.value = true,
|
|
onBlur: ($event) => focusing.value = false,
|
|
onClick: ($event) => focusing.value = false
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default", {
|
|
file,
|
|
index
|
|
}, () => [
|
|
_ctx.listType === "picture" || file.status !== "uploading" && _ctx.listType === "picture-card" ? (openBlock(), createElementBlock("img", {
|
|
key: 0,
|
|
class: normalizeClass(unref(nsUpload).be("list", "item-thumbnail")),
|
|
src: file.url,
|
|
crossorigin: _ctx.crossorigin,
|
|
alt: ""
|
|
}, null, 10, ["src", "crossorigin"])) : createCommentVNode("v-if", true),
|
|
file.status === "uploading" || _ctx.listType !== "picture-card" ? (openBlock(), createElementBlock("div", {
|
|
key: 1,
|
|
class: normalizeClass(unref(nsUpload).be("list", "item-info"))
|
|
}, [
|
|
createElementVNode("a", {
|
|
class: normalizeClass(unref(nsUpload).be("list", "item-name")),
|
|
onClick: withModifiers(($event) => _ctx.handlePreview(file), ["prevent"])
|
|
}, [
|
|
createVNode(unref(ElIcon), {
|
|
class: normalizeClass(unref(nsIcon).m("document"))
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(document_default))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"]),
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(nsUpload).be("list", "item-file-name")),
|
|
title: file.name
|
|
}, toDisplayString(file.name), 11, ["title"])
|
|
], 10, ["onClick"]),
|
|
file.status === "uploading" ? (openBlock(), createBlock(unref(ElProgress), {
|
|
key: 0,
|
|
type: _ctx.listType === "picture-card" ? "circle" : "line",
|
|
"stroke-width": _ctx.listType === "picture-card" ? 6 : 2,
|
|
percentage: Number(file.percentage),
|
|
style: normalizeStyle(_ctx.listType === "picture-card" ? "" : "margin-top: 0.5rem")
|
|
}, null, 8, ["type", "stroke-width", "percentage", "style"])) : createCommentVNode("v-if", true)
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
createElementVNode("label", {
|
|
class: normalizeClass(unref(nsUpload).be("list", "item-status-label"))
|
|
}, [
|
|
_ctx.listType === "text" ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 0,
|
|
class: normalizeClass([unref(nsIcon).m("upload-success"), unref(nsIcon).m("circle-check")])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(circle_check_default))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : ["picture-card", "picture"].includes(_ctx.listType) ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 1,
|
|
class: normalizeClass([unref(nsIcon).m("upload-success"), unref(nsIcon).m("check")])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(check_default))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : createCommentVNode("v-if", true)
|
|
], 2),
|
|
!unref(disabled) ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 2,
|
|
class: normalizeClass(unref(nsIcon).m("close")),
|
|
onClick: ($event) => handleRemove(file)
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(close_default))
|
|
]),
|
|
_: 2
|
|
}, 1032, ["class", "onClick"])) : createCommentVNode("v-if", true),
|
|
createCommentVNode(" Due to close btn only appears when li gets focused disappears after li gets blurred, thus keyboard navigation can never reach close btn"),
|
|
createCommentVNode(" This is a bug which needs to be fixed "),
|
|
createCommentVNode(" TODO: Fix the incorrect navigation interaction "),
|
|
!unref(disabled) ? (openBlock(), createElementBlock("i", {
|
|
key: 3,
|
|
class: normalizeClass(unref(nsIcon).m("close-tip"))
|
|
}, toDisplayString(unref(t)("el.upload.deleteTip")), 3)) : createCommentVNode("v-if", true),
|
|
_ctx.listType === "picture-card" ? (openBlock(), createElementBlock("span", {
|
|
key: 4,
|
|
class: normalizeClass(unref(nsUpload).be("list", "item-actions"))
|
|
}, [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(unref(nsUpload).be("list", "item-preview")),
|
|
onClick: ($event) => _ctx.handlePreview(file)
|
|
}, [
|
|
createVNode(unref(ElIcon), {
|
|
class: normalizeClass(unref(nsIcon).m("zoom-in"))
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(zoom_in_default))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])
|
|
], 10, ["onClick"]),
|
|
!unref(disabled) ? (openBlock(), createElementBlock("span", {
|
|
key: 0,
|
|
class: normalizeClass(unref(nsUpload).be("list", "item-delete")),
|
|
onClick: ($event) => handleRemove(file)
|
|
}, [
|
|
createVNode(unref(ElIcon), {
|
|
class: normalizeClass(unref(nsIcon).m("delete"))
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(delete_default))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])
|
|
], 10, ["onClick"])) : createCommentVNode("v-if", true)
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
])
|
|
], 42, ["onKeydown", "onFocus", "onBlur", "onClick"]);
|
|
}), 128)),
|
|
renderSlot(_ctx.$slots, "append")
|
|
]),
|
|
_: 3
|
|
}, 8, ["class", "name"]);
|
|
};
|
|
}
|
|
});
|
|
var UploadList = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__file", "upload-list.vue"]]);
|
|
|
|
const uploadDraggerProps = buildProps({
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
});
|
|
const uploadDraggerEmits = {
|
|
file: (file) => isArray$1(file)
|
|
};
|
|
|
|
const COMPONENT_NAME = "ElUploadDrag";
|
|
const __default__$e = defineComponent({
|
|
name: COMPONENT_NAME
|
|
});
|
|
const _sfc_main$f = /* @__PURE__ */ defineComponent({
|
|
...__default__$e,
|
|
props: uploadDraggerProps,
|
|
emits: uploadDraggerEmits,
|
|
setup(__props, { emit }) {
|
|
const uploaderContext = inject(uploadContextKey);
|
|
if (!uploaderContext) {
|
|
throwError(COMPONENT_NAME, "usage: <el-upload><el-upload-dragger /></el-upload>");
|
|
}
|
|
const ns = useNamespace("upload");
|
|
const dragover = ref(false);
|
|
const disabled = useFormDisabled();
|
|
const onDrop = (e) => {
|
|
if (disabled.value)
|
|
return;
|
|
dragover.value = false;
|
|
e.stopPropagation();
|
|
const files = Array.from(e.dataTransfer.files);
|
|
emit("file", files);
|
|
};
|
|
const onDragover = () => {
|
|
if (!disabled.value)
|
|
dragover.value = true;
|
|
};
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass([unref(ns).b("dragger"), unref(ns).is("dragover", dragover.value)]),
|
|
onDrop: withModifiers(onDrop, ["prevent"]),
|
|
onDragover: withModifiers(onDragover, ["prevent"]),
|
|
onDragleave: withModifiers(($event) => dragover.value = false, ["prevent"])
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 42, ["onDrop", "onDragover", "onDragleave"]);
|
|
};
|
|
}
|
|
});
|
|
var UploadDragger = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__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 __default__$d = defineComponent({
|
|
name: "ElUploadContent",
|
|
inheritAttrs: false
|
|
});
|
|
const _sfc_main$e = /* @__PURE__ */ defineComponent({
|
|
...__default__$d,
|
|
props: uploadContentProps,
|
|
setup(__props, { expose }) {
|
|
const props = __props;
|
|
const ns = useNamespace("upload");
|
|
const disabled = useFormDisabled();
|
|
const requests = shallowRef({});
|
|
const inputRef = 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;
|
|
let beforeData = {};
|
|
try {
|
|
const originData = props.data;
|
|
const beforeUploadPromise = props.beforeUpload(rawFile);
|
|
beforeData = isPlainObject$1(props.data) ? cloneDeep(props.data) : props.data;
|
|
hookResult = await beforeUploadPromise;
|
|
if (isPlainObject$1(props.data) && isEqual$1(originData, beforeData)) {
|
|
beforeData = cloneDeep(props.data);
|
|
}
|
|
} 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
|
|
}), beforeData);
|
|
};
|
|
const resolveData = async (data, rawFile) => {
|
|
if (isFunction$1(data)) {
|
|
return data(rawFile);
|
|
}
|
|
return data;
|
|
};
|
|
const doUpload = async (rawFile, beforeData) => {
|
|
const {
|
|
headers,
|
|
data,
|
|
method,
|
|
withCredentials,
|
|
name: filename,
|
|
action,
|
|
onProgress,
|
|
onSuccess,
|
|
onError,
|
|
httpRequest
|
|
} = props;
|
|
try {
|
|
beforeData = await resolveData(beforeData != null ? beforeData : data, rawFile);
|
|
} catch (e) {
|
|
props.onRemove(rawFile);
|
|
return;
|
|
}
|
|
const { uid } = rawFile;
|
|
const options = {
|
|
headers: headers || {},
|
|
withCredentials,
|
|
file: rawFile,
|
|
data: beforeData,
|
|
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 (!disabled.value) {
|
|
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 openBlock(), createElementBlock("div", {
|
|
class: normalizeClass([
|
|
unref(ns).b(),
|
|
unref(ns).m(_ctx.listType),
|
|
unref(ns).is("drag", _ctx.drag),
|
|
unref(ns).is("disabled", unref(disabled))
|
|
]),
|
|
tabindex: unref(disabled) ? "-1" : "0",
|
|
onClick: handleClick,
|
|
onKeydown: withKeys(withModifiers(handleKeydown, ["self"]), ["enter", "space"])
|
|
}, [
|
|
_ctx.drag ? (openBlock(), createBlock(UploadDragger, {
|
|
key: 0,
|
|
disabled: unref(disabled),
|
|
onFile: uploadFiles
|
|
}, {
|
|
default: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "default")
|
|
]),
|
|
_: 3
|
|
}, 8, ["disabled"])) : renderSlot(_ctx.$slots, "default", { key: 1 }),
|
|
createElementVNode("input", {
|
|
ref_key: "inputRef",
|
|
ref: inputRef,
|
|
class: normalizeClass(unref(ns).e("input")),
|
|
name: _ctx.name,
|
|
disabled: unref(disabled),
|
|
multiple: _ctx.multiple,
|
|
accept: _ctx.accept,
|
|
type: "file",
|
|
onChange: handleChange,
|
|
onClick: withModifiers(() => {
|
|
}, ["stop"])
|
|
}, null, 42, ["name", "disabled", "multiple", "accept", "onClick"])
|
|
], 42, ["tabindex", "onKeydown"]);
|
|
};
|
|
}
|
|
});
|
|
var UploadContent = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__file", "upload-content.vue"]]);
|
|
|
|
const SCOPE$1 = "ElUpload";
|
|
const revokeFileObjectURL = (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));
|
|
}
|
|
function removeFile(file) {
|
|
uploadFiles.value = uploadFiles.value.filter((uploadFile) => uploadFile !== file);
|
|
}
|
|
const handleError = (err, rawFile) => {
|
|
const file = getFile(rawFile);
|
|
if (!file)
|
|
return;
|
|
console.error(err);
|
|
file.status = "fail";
|
|
removeFile(file);
|
|
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);
|
|
removeFile(file2);
|
|
props.onRemove(file2, uploadFiles.value);
|
|
revokeFileObjectURL(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));
|
|
});
|
|
}
|
|
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;
|
|
});
|
|
});
|
|
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,
|
|
revokeFileObjectURL
|
|
};
|
|
};
|
|
|
|
const __default__$c = defineComponent({
|
|
name: "ElUpload"
|
|
});
|
|
const _sfc_main$d = /* @__PURE__ */ defineComponent({
|
|
...__default__$c,
|
|
props: uploadProps,
|
|
setup(__props, { expose }) {
|
|
const props = __props;
|
|
const disabled = useFormDisabled();
|
|
const uploadRef = shallowRef();
|
|
const {
|
|
abort,
|
|
submit,
|
|
clearFiles,
|
|
uploadFiles,
|
|
handleStart,
|
|
handleError,
|
|
handleRemove,
|
|
handleSuccess,
|
|
handleProgress,
|
|
revokeFileObjectURL
|
|
} = useHandlers(props, uploadRef);
|
|
const isPictureCard = computed(() => props.listType === "picture-card");
|
|
const uploadContentProps = computed(() => ({
|
|
...props,
|
|
fileList: uploadFiles.value,
|
|
onStart: handleStart,
|
|
onProgress: handleProgress,
|
|
onSuccess: handleSuccess,
|
|
onError: handleError,
|
|
onRemove: handleRemove
|
|
}));
|
|
onBeforeUnmount(() => {
|
|
uploadFiles.value.forEach(revokeFileObjectURL);
|
|
});
|
|
provide(uploadContextKey, {
|
|
accept: toRef(props, "accept")
|
|
});
|
|
expose({
|
|
abort,
|
|
submit,
|
|
clearFiles,
|
|
handleStart,
|
|
handleRemove
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", null, [
|
|
unref(isPictureCard) && _ctx.showFileList ? (openBlock(), createBlock(UploadList, {
|
|
key: 0,
|
|
disabled: unref(disabled),
|
|
"list-type": _ctx.listType,
|
|
files: unref(uploadFiles),
|
|
crossorigin: _ctx.crossorigin,
|
|
"handle-preview": _ctx.onPreview,
|
|
onRemove: unref(handleRemove)
|
|
}, createSlots({
|
|
append: withCtx(() => [
|
|
createVNode(UploadContent, mergeProps({
|
|
ref_key: "uploadRef",
|
|
ref: uploadRef
|
|
}, unref(uploadContentProps)), {
|
|
default: withCtx(() => [
|
|
_ctx.$slots.trigger ? renderSlot(_ctx.$slots, "trigger", { key: 0 }) : createCommentVNode("v-if", true),
|
|
!_ctx.$slots.trigger && _ctx.$slots.default ? renderSlot(_ctx.$slots, "default", { key: 1 }) : createCommentVNode("v-if", true)
|
|
]),
|
|
_: 3
|
|
}, 16)
|
|
]),
|
|
_: 2
|
|
}, [
|
|
_ctx.$slots.file ? {
|
|
name: "default",
|
|
fn: withCtx(({ file, index }) => [
|
|
renderSlot(_ctx.$slots, "file", {
|
|
file,
|
|
index
|
|
})
|
|
])
|
|
} : void 0
|
|
]), 1032, ["disabled", "list-type", "files", "crossorigin", "handle-preview", "onRemove"])) : createCommentVNode("v-if", true),
|
|
!unref(isPictureCard) || unref(isPictureCard) && !_ctx.showFileList ? (openBlock(), createBlock(UploadContent, mergeProps({
|
|
key: 1,
|
|
ref_key: "uploadRef",
|
|
ref: uploadRef
|
|
}, unref(uploadContentProps)), {
|
|
default: withCtx(() => [
|
|
_ctx.$slots.trigger ? renderSlot(_ctx.$slots, "trigger", { key: 0 }) : createCommentVNode("v-if", true),
|
|
!_ctx.$slots.trigger && _ctx.$slots.default ? renderSlot(_ctx.$slots, "default", { key: 1 }) : createCommentVNode("v-if", true)
|
|
]),
|
|
_: 3
|
|
}, 16)) : createCommentVNode("v-if", true),
|
|
_ctx.$slots.trigger ? renderSlot(_ctx.$slots, "default", { key: 2 }) : createCommentVNode("v-if", true),
|
|
renderSlot(_ctx.$slots, "tip"),
|
|
!unref(isPictureCard) && _ctx.showFileList ? (openBlock(), createBlock(UploadList, {
|
|
key: 3,
|
|
disabled: unref(disabled),
|
|
"list-type": _ctx.listType,
|
|
files: unref(uploadFiles),
|
|
crossorigin: _ctx.crossorigin,
|
|
"handle-preview": _ctx.onPreview,
|
|
onRemove: unref(handleRemove)
|
|
}, createSlots({ _: 2 }, [
|
|
_ctx.$slots.file ? {
|
|
name: "default",
|
|
fn: withCtx(({ file, index }) => [
|
|
renderSlot(_ctx.$slots, "file", {
|
|
file,
|
|
index
|
|
})
|
|
])
|
|
} : void 0
|
|
]), 1032, ["disabled", "list-type", "files", "crossorigin", "handle-preview", "onRemove"])) : createCommentVNode("v-if", true)
|
|
]);
|
|
};
|
|
}
|
|
});
|
|
var Upload = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__file", "upload.vue"]]);
|
|
|
|
const ElUpload = withInstall(Upload);
|
|
|
|
const watermarkProps = buildProps({
|
|
zIndex: {
|
|
type: Number,
|
|
default: 9
|
|
},
|
|
rotate: {
|
|
type: Number,
|
|
default: -22
|
|
},
|
|
width: Number,
|
|
height: Number,
|
|
image: String,
|
|
content: {
|
|
type: definePropType([String, Array]),
|
|
default: "Element Plus"
|
|
},
|
|
font: {
|
|
type: definePropType(Object)
|
|
},
|
|
gap: {
|
|
type: definePropType(Array),
|
|
default: () => [100, 100]
|
|
},
|
|
offset: {
|
|
type: definePropType(Array)
|
|
}
|
|
});
|
|
|
|
function toLowercaseSeparator(key) {
|
|
return key.replace(/([A-Z])/g, "-$1").toLowerCase();
|
|
}
|
|
function getStyleStr(style) {
|
|
return Object.keys(style).map((key) => `${toLowercaseSeparator(key)}: ${style[key]};`).join(" ");
|
|
}
|
|
function getPixelRatio() {
|
|
return window.devicePixelRatio || 1;
|
|
}
|
|
const reRendering = (mutation, watermarkElement) => {
|
|
let flag = false;
|
|
if (mutation.removedNodes.length && watermarkElement) {
|
|
flag = Array.from(mutation.removedNodes).includes(watermarkElement);
|
|
}
|
|
if (mutation.type === "attributes" && mutation.target === watermarkElement) {
|
|
flag = true;
|
|
}
|
|
return flag;
|
|
};
|
|
|
|
const FontGap = 3;
|
|
function prepareCanvas(width, height, ratio = 1) {
|
|
const canvas = document.createElement("canvas");
|
|
const ctx = canvas.getContext("2d");
|
|
const realWidth = width * ratio;
|
|
const realHeight = height * ratio;
|
|
canvas.setAttribute("width", `${realWidth}px`);
|
|
canvas.setAttribute("height", `${realHeight}px`);
|
|
ctx.save();
|
|
return [ctx, canvas, realWidth, realHeight];
|
|
}
|
|
function useClips() {
|
|
function getClips(content, rotate, ratio, width, height, font, gapX, gapY) {
|
|
const [ctx, canvas, contentWidth, contentHeight] = prepareCanvas(width, height, ratio);
|
|
if (content instanceof HTMLImageElement) {
|
|
ctx.drawImage(content, 0, 0, contentWidth, contentHeight);
|
|
} else {
|
|
const {
|
|
color,
|
|
fontSize,
|
|
fontStyle,
|
|
fontWeight,
|
|
fontFamily,
|
|
textAlign,
|
|
textBaseline
|
|
} = font;
|
|
const mergedFontSize = Number(fontSize) * ratio;
|
|
ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${height}px ${fontFamily}`;
|
|
ctx.fillStyle = color;
|
|
ctx.textAlign = textAlign;
|
|
ctx.textBaseline = textBaseline;
|
|
const contents = Array.isArray(content) ? content : [content];
|
|
contents == null ? void 0 : contents.forEach((item, index) => {
|
|
ctx.fillText(item != null ? item : "", contentWidth / 2, index * (mergedFontSize + FontGap * ratio));
|
|
});
|
|
}
|
|
const angle = Math.PI / 180 * Number(rotate);
|
|
const maxSize = Math.max(width, height);
|
|
const [rCtx, rCanvas, realMaxSize] = prepareCanvas(maxSize, maxSize, ratio);
|
|
rCtx.translate(realMaxSize / 2, realMaxSize / 2);
|
|
rCtx.rotate(angle);
|
|
if (contentWidth > 0 && contentHeight > 0) {
|
|
rCtx.drawImage(canvas, -contentWidth / 2, -contentHeight / 2);
|
|
}
|
|
function getRotatePos(x, y) {
|
|
const targetX = x * Math.cos(angle) - y * Math.sin(angle);
|
|
const targetY = x * Math.sin(angle) + y * Math.cos(angle);
|
|
return [targetX, targetY];
|
|
}
|
|
let left = 0;
|
|
let right = 0;
|
|
let top = 0;
|
|
let bottom = 0;
|
|
const halfWidth = contentWidth / 2;
|
|
const halfHeight = contentHeight / 2;
|
|
const points = [
|
|
[0 - halfWidth, 0 - halfHeight],
|
|
[0 + halfWidth, 0 - halfHeight],
|
|
[0 + halfWidth, 0 + halfHeight],
|
|
[0 - halfWidth, 0 + halfHeight]
|
|
];
|
|
points.forEach(([x, y]) => {
|
|
const [targetX, targetY] = getRotatePos(x, y);
|
|
left = Math.min(left, targetX);
|
|
right = Math.max(right, targetX);
|
|
top = Math.min(top, targetY);
|
|
bottom = Math.max(bottom, targetY);
|
|
});
|
|
const cutLeft = left + realMaxSize / 2;
|
|
const cutTop = top + realMaxSize / 2;
|
|
const cutWidth = right - left;
|
|
const cutHeight = bottom - top;
|
|
const realGapX = gapX * ratio;
|
|
const realGapY = gapY * ratio;
|
|
const filledWidth = (cutWidth + realGapX) * 2;
|
|
const filledHeight = cutHeight + realGapY;
|
|
const [fCtx, fCanvas] = prepareCanvas(filledWidth, filledHeight);
|
|
function drawImg(targetX = 0, targetY = 0) {
|
|
fCtx.drawImage(rCanvas, cutLeft, cutTop, cutWidth, cutHeight, targetX, targetY, cutWidth, cutHeight);
|
|
}
|
|
drawImg();
|
|
drawImg(cutWidth + realGapX, -cutHeight / 2 - realGapY / 2);
|
|
drawImg(cutWidth + realGapX, +cutHeight / 2 + realGapY / 2);
|
|
return [fCanvas.toDataURL(), filledWidth / ratio, filledHeight / ratio];
|
|
}
|
|
return getClips;
|
|
}
|
|
|
|
const __default__$b = defineComponent({
|
|
name: "ElWatermark"
|
|
});
|
|
const _sfc_main$c = /* @__PURE__ */ defineComponent({
|
|
...__default__$b,
|
|
props: watermarkProps,
|
|
setup(__props) {
|
|
const props = __props;
|
|
const style = {
|
|
position: "relative"
|
|
};
|
|
const color = computed(() => {
|
|
var _a, _b;
|
|
return (_b = (_a = props.font) == null ? void 0 : _a.color) != null ? _b : "rgba(0,0,0,.15)";
|
|
});
|
|
const fontSize = computed(() => {
|
|
var _a, _b;
|
|
return (_b = (_a = props.font) == null ? void 0 : _a.fontSize) != null ? _b : 16;
|
|
});
|
|
const fontWeight = computed(() => {
|
|
var _a, _b;
|
|
return (_b = (_a = props.font) == null ? void 0 : _a.fontWeight) != null ? _b : "normal";
|
|
});
|
|
const fontStyle = computed(() => {
|
|
var _a, _b;
|
|
return (_b = (_a = props.font) == null ? void 0 : _a.fontStyle) != null ? _b : "normal";
|
|
});
|
|
const fontFamily = computed(() => {
|
|
var _a, _b;
|
|
return (_b = (_a = props.font) == null ? void 0 : _a.fontFamily) != null ? _b : "sans-serif";
|
|
});
|
|
const textAlign = computed(() => {
|
|
var _a, _b;
|
|
return (_b = (_a = props.font) == null ? void 0 : _a.textAlign) != null ? _b : "center";
|
|
});
|
|
const textBaseline = computed(() => {
|
|
var _a, _b;
|
|
return (_b = (_a = props.font) == null ? void 0 : _a.textBaseline) != null ? _b : "hanging";
|
|
});
|
|
const gapX = computed(() => props.gap[0]);
|
|
const gapY = computed(() => props.gap[1]);
|
|
const gapXCenter = computed(() => gapX.value / 2);
|
|
const gapYCenter = computed(() => gapY.value / 2);
|
|
const offsetLeft = computed(() => {
|
|
var _a, _b;
|
|
return (_b = (_a = props.offset) == null ? void 0 : _a[0]) != null ? _b : gapXCenter.value;
|
|
});
|
|
const offsetTop = computed(() => {
|
|
var _a, _b;
|
|
return (_b = (_a = props.offset) == null ? void 0 : _a[1]) != null ? _b : gapYCenter.value;
|
|
});
|
|
const getMarkStyle = () => {
|
|
const markStyle = {
|
|
zIndex: props.zIndex,
|
|
position: "absolute",
|
|
left: 0,
|
|
top: 0,
|
|
width: "100%",
|
|
height: "100%",
|
|
pointerEvents: "none",
|
|
backgroundRepeat: "repeat"
|
|
};
|
|
let positionLeft = offsetLeft.value - gapXCenter.value;
|
|
let positionTop = offsetTop.value - gapYCenter.value;
|
|
if (positionLeft > 0) {
|
|
markStyle.left = `${positionLeft}px`;
|
|
markStyle.width = `calc(100% - ${positionLeft}px)`;
|
|
positionLeft = 0;
|
|
}
|
|
if (positionTop > 0) {
|
|
markStyle.top = `${positionTop}px`;
|
|
markStyle.height = `calc(100% - ${positionTop}px)`;
|
|
positionTop = 0;
|
|
}
|
|
markStyle.backgroundPosition = `${positionLeft}px ${positionTop}px`;
|
|
return markStyle;
|
|
};
|
|
const containerRef = shallowRef(null);
|
|
const watermarkRef = shallowRef();
|
|
const stopObservation = ref(false);
|
|
const destroyWatermark = () => {
|
|
if (watermarkRef.value) {
|
|
watermarkRef.value.remove();
|
|
watermarkRef.value = void 0;
|
|
}
|
|
};
|
|
const appendWatermark = (base64Url, markWidth) => {
|
|
var _a;
|
|
if (containerRef.value && watermarkRef.value) {
|
|
stopObservation.value = true;
|
|
watermarkRef.value.setAttribute("style", getStyleStr({
|
|
...getMarkStyle(),
|
|
backgroundImage: `url('${base64Url}')`,
|
|
backgroundSize: `${Math.floor(markWidth)}px`
|
|
}));
|
|
(_a = containerRef.value) == null ? void 0 : _a.append(watermarkRef.value);
|
|
setTimeout(() => {
|
|
stopObservation.value = false;
|
|
});
|
|
}
|
|
};
|
|
const getMarkSize = (ctx) => {
|
|
let defaultWidth = 120;
|
|
let defaultHeight = 64;
|
|
const image = props.image;
|
|
const content = props.content;
|
|
const width = props.width;
|
|
const height = props.height;
|
|
if (!image && ctx.measureText) {
|
|
ctx.font = `${Number(fontSize.value)}px ${fontFamily.value}`;
|
|
const contents = Array.isArray(content) ? content : [content];
|
|
const sizes = contents.map((item) => {
|
|
const metrics = ctx.measureText(item);
|
|
return [
|
|
metrics.width,
|
|
metrics.fontBoundingBoxAscent !== void 0 ? metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent : metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent
|
|
];
|
|
});
|
|
defaultWidth = Math.ceil(Math.max(...sizes.map((size) => size[0])));
|
|
defaultHeight = Math.ceil(Math.max(...sizes.map((size) => size[1]))) * contents.length + (contents.length - 1) * FontGap;
|
|
}
|
|
return [width != null ? width : defaultWidth, height != null ? height : defaultHeight];
|
|
};
|
|
const getClips = useClips();
|
|
const renderWatermark = () => {
|
|
const canvas = document.createElement("canvas");
|
|
const ctx = canvas.getContext("2d");
|
|
const image = props.image;
|
|
const content = props.content;
|
|
const rotate = props.rotate;
|
|
if (ctx) {
|
|
if (!watermarkRef.value) {
|
|
watermarkRef.value = document.createElement("div");
|
|
}
|
|
const ratio = getPixelRatio();
|
|
const [markWidth, markHeight] = getMarkSize(ctx);
|
|
const drawCanvas = (drawContent) => {
|
|
const [textClips, clipWidth] = getClips(drawContent || "", rotate, ratio, markWidth, markHeight, {
|
|
color: color.value,
|
|
fontSize: fontSize.value,
|
|
fontStyle: fontStyle.value,
|
|
fontWeight: fontWeight.value,
|
|
fontFamily: fontFamily.value,
|
|
textAlign: textAlign.value,
|
|
textBaseline: textBaseline.value
|
|
}, gapX.value, gapY.value);
|
|
appendWatermark(textClips, clipWidth);
|
|
};
|
|
if (image) {
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
drawCanvas(img);
|
|
};
|
|
img.onerror = () => {
|
|
drawCanvas(content);
|
|
};
|
|
img.crossOrigin = "anonymous";
|
|
img.referrerPolicy = "no-referrer";
|
|
img.src = image;
|
|
} else {
|
|
drawCanvas(content);
|
|
}
|
|
}
|
|
};
|
|
onMounted(() => {
|
|
renderWatermark();
|
|
});
|
|
watch(() => props, () => {
|
|
renderWatermark();
|
|
}, {
|
|
deep: true,
|
|
flush: "post"
|
|
});
|
|
onBeforeUnmount(() => {
|
|
destroyWatermark();
|
|
});
|
|
const onMutate = (mutations) => {
|
|
if (stopObservation.value) {
|
|
return;
|
|
}
|
|
mutations.forEach((mutation) => {
|
|
if (reRendering(mutation, watermarkRef.value)) {
|
|
destroyWatermark();
|
|
renderWatermark();
|
|
}
|
|
});
|
|
};
|
|
useMutationObserver(containerRef, onMutate, {
|
|
attributes: true,
|
|
subtree: true,
|
|
childList: true
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
ref_key: "containerRef",
|
|
ref: containerRef,
|
|
style: normalizeStyle([style])
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 4);
|
|
};
|
|
}
|
|
});
|
|
var Watermark = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__file", "watermark.vue"]]);
|
|
|
|
const ElWatermark = withInstall(Watermark);
|
|
|
|
const maskProps = buildProps({
|
|
zIndex: {
|
|
type: Number,
|
|
default: 1001
|
|
},
|
|
visible: Boolean,
|
|
fill: {
|
|
type: String,
|
|
default: "rgba(0,0,0,0.5)"
|
|
},
|
|
pos: {
|
|
type: definePropType(Object)
|
|
},
|
|
targetAreaClickable: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
});
|
|
|
|
const useTarget = (target, open, gap, mergedMask, scrollIntoViewOptions) => {
|
|
const posInfo = ref(null);
|
|
const getTargetEl = () => {
|
|
let targetEl;
|
|
if (isString$1(target.value)) {
|
|
targetEl = document.querySelector(target.value);
|
|
} else if (isFunction$1(target.value)) {
|
|
targetEl = target.value();
|
|
} else {
|
|
targetEl = target.value;
|
|
}
|
|
return targetEl;
|
|
};
|
|
const updatePosInfo = () => {
|
|
const targetEl = getTargetEl();
|
|
if (!targetEl || !open.value) {
|
|
posInfo.value = null;
|
|
return;
|
|
}
|
|
if (!isInViewPort(targetEl) && open.value) {
|
|
targetEl.scrollIntoView(scrollIntoViewOptions.value);
|
|
}
|
|
const { left, top, width, height } = targetEl.getBoundingClientRect();
|
|
posInfo.value = {
|
|
left,
|
|
top,
|
|
width,
|
|
height,
|
|
radius: 0
|
|
};
|
|
};
|
|
onMounted(() => {
|
|
watch([open, target], () => {
|
|
updatePosInfo();
|
|
}, {
|
|
immediate: true
|
|
});
|
|
window.addEventListener("resize", updatePosInfo);
|
|
});
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener("resize", updatePosInfo);
|
|
});
|
|
const getGapOffset = (index) => {
|
|
var _a;
|
|
return (_a = isArray$1(gap.value.offset) ? gap.value.offset[index] : gap.value.offset) != null ? _a : 6;
|
|
};
|
|
const mergedPosInfo = computed(() => {
|
|
var _a;
|
|
if (!posInfo.value)
|
|
return posInfo.value;
|
|
const gapOffsetX = getGapOffset(0);
|
|
const gapOffsetY = getGapOffset(1);
|
|
const gapRadius = ((_a = gap.value) == null ? void 0 : _a.radius) || 2;
|
|
return {
|
|
left: posInfo.value.left - gapOffsetX,
|
|
top: posInfo.value.top - gapOffsetY,
|
|
width: posInfo.value.width + gapOffsetX * 2,
|
|
height: posInfo.value.height + gapOffsetY * 2,
|
|
radius: gapRadius
|
|
};
|
|
});
|
|
const triggerTarget = computed(() => {
|
|
const targetEl = getTargetEl();
|
|
if (!mergedMask.value || !targetEl || !window.DOMRect) {
|
|
return targetEl || void 0;
|
|
}
|
|
return {
|
|
getBoundingClientRect() {
|
|
var _a, _b, _c, _d;
|
|
return window.DOMRect.fromRect({
|
|
width: ((_a = mergedPosInfo.value) == null ? void 0 : _a.width) || 0,
|
|
height: ((_b = mergedPosInfo.value) == null ? void 0 : _b.height) || 0,
|
|
x: ((_c = mergedPosInfo.value) == null ? void 0 : _c.left) || 0,
|
|
y: ((_d = mergedPosInfo.value) == null ? void 0 : _d.top) || 0
|
|
});
|
|
}
|
|
};
|
|
});
|
|
return {
|
|
mergedPosInfo,
|
|
triggerTarget
|
|
};
|
|
};
|
|
const tourKey = Symbol("ElTour");
|
|
function isInViewPort(element) {
|
|
const viewWidth = window.innerWidth || document.documentElement.clientWidth;
|
|
const viewHeight = window.innerHeight || document.documentElement.clientHeight;
|
|
const { top, right, bottom, left } = element.getBoundingClientRect();
|
|
return top >= 0 && left >= 0 && right <= viewWidth && bottom <= viewHeight;
|
|
}
|
|
const useFloating = (referenceRef, contentRef, arrowRef, placement, strategy, offset$1, zIndex, showArrow) => {
|
|
const x = ref();
|
|
const y = ref();
|
|
const middlewareData = ref({});
|
|
const states = {
|
|
x,
|
|
y,
|
|
placement,
|
|
strategy,
|
|
middlewareData
|
|
};
|
|
const middleware = computed(() => {
|
|
const _middleware = [
|
|
offset(unref(offset$1)),
|
|
flip(),
|
|
shift(),
|
|
overflowMiddleware()
|
|
];
|
|
if (unref(showArrow) && unref(arrowRef)) {
|
|
_middleware.push(arrow({
|
|
element: unref(arrowRef)
|
|
}));
|
|
}
|
|
return _middleware;
|
|
});
|
|
const update = async () => {
|
|
if (!isClient)
|
|
return;
|
|
const referenceEl = unref(referenceRef);
|
|
const contentEl = unref(contentRef);
|
|
if (!referenceEl || !contentEl)
|
|
return;
|
|
const data = await computePosition(referenceEl, contentEl, {
|
|
placement: unref(placement),
|
|
strategy: unref(strategy),
|
|
middleware: unref(middleware)
|
|
});
|
|
keysOf(states).forEach((key) => {
|
|
states[key].value = data[key];
|
|
});
|
|
};
|
|
const contentStyle = computed(() => {
|
|
if (!unref(referenceRef)) {
|
|
return {
|
|
position: "fixed",
|
|
top: "50%",
|
|
left: "50%",
|
|
transform: "translate3d(-50%, -50%, 0)",
|
|
maxWidth: "100vw",
|
|
zIndex: unref(zIndex)
|
|
};
|
|
}
|
|
const { overflow } = unref(middlewareData);
|
|
return {
|
|
position: unref(strategy),
|
|
zIndex: unref(zIndex),
|
|
top: unref(y) != null ? `${unref(y)}px` : "",
|
|
left: unref(x) != null ? `${unref(x)}px` : "",
|
|
maxWidth: (overflow == null ? void 0 : overflow.maxWidth) ? `${overflow == null ? void 0 : overflow.maxWidth}px` : ""
|
|
};
|
|
});
|
|
const arrowStyle = computed(() => {
|
|
if (!unref(showArrow))
|
|
return {};
|
|
const { arrow: arrow2 } = unref(middlewareData);
|
|
return {
|
|
left: (arrow2 == null ? void 0 : arrow2.x) != null ? `${arrow2 == null ? void 0 : arrow2.x}px` : "",
|
|
top: (arrow2 == null ? void 0 : arrow2.y) != null ? `${arrow2 == null ? void 0 : arrow2.y}px` : ""
|
|
};
|
|
});
|
|
let cleanup;
|
|
onMounted(() => {
|
|
const referenceEl = unref(referenceRef);
|
|
const contentEl = unref(contentRef);
|
|
if (referenceEl && contentEl) {
|
|
cleanup = autoUpdate(referenceEl, contentEl, update);
|
|
}
|
|
watchEffect(() => {
|
|
update();
|
|
});
|
|
});
|
|
onBeforeUnmount(() => {
|
|
cleanup && cleanup();
|
|
});
|
|
return {
|
|
update,
|
|
contentStyle,
|
|
arrowStyle
|
|
};
|
|
};
|
|
const overflowMiddleware = () => {
|
|
return {
|
|
name: "overflow",
|
|
async fn(state) {
|
|
const overflow = await detectOverflow(state);
|
|
let overWidth = 0;
|
|
if (overflow.left > 0)
|
|
overWidth = overflow.left;
|
|
if (overflow.right > 0)
|
|
overWidth = overflow.right;
|
|
const floatingWidth = state.rects.floating.width;
|
|
return {
|
|
data: {
|
|
maxWidth: floatingWidth - overWidth
|
|
}
|
|
};
|
|
}
|
|
};
|
|
};
|
|
|
|
const __default__$a = defineComponent({
|
|
name: "ElTourMask",
|
|
inheritAttrs: false
|
|
});
|
|
const _sfc_main$b = /* @__PURE__ */ defineComponent({
|
|
...__default__$a,
|
|
props: maskProps,
|
|
setup(__props) {
|
|
const props = __props;
|
|
const { ns } = inject(tourKey);
|
|
const radius = computed(() => {
|
|
var _a, _b;
|
|
return (_b = (_a = props.pos) == null ? void 0 : _a.radius) != null ? _b : 2;
|
|
});
|
|
const roundInfo = computed(() => {
|
|
const v = radius.value;
|
|
const baseInfo = `a${v},${v} 0 0 1`;
|
|
return {
|
|
topRight: `${baseInfo} ${v},${v}`,
|
|
bottomRight: `${baseInfo} ${-v},${v}`,
|
|
bottomLeft: `${baseInfo} ${-v},${-v}`,
|
|
topLeft: `${baseInfo} ${v},${-v}`
|
|
};
|
|
});
|
|
const path = computed(() => {
|
|
const width = window.innerWidth;
|
|
const height = window.innerHeight;
|
|
const info = roundInfo.value;
|
|
const _path = `M${width},0 L0,0 L0,${height} L${width},${height} L${width},0 Z`;
|
|
const _radius = radius.value;
|
|
return props.pos ? `${_path} M${props.pos.left + _radius},${props.pos.top} h${props.pos.width - _radius * 2} ${info.topRight} v${props.pos.height - _radius * 2} ${info.bottomRight} h${-props.pos.width + _radius * 2} ${info.bottomLeft} v${-props.pos.height + _radius * 2} ${info.topLeft} z` : _path;
|
|
});
|
|
const pathStyle = computed(() => {
|
|
return {
|
|
fill: props.fill,
|
|
pointerEvents: "auto",
|
|
cursor: "auto"
|
|
};
|
|
});
|
|
useLockscreen(toRef(props, "visible"), {
|
|
ns
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return _ctx.visible ? (openBlock(), createElementBlock("div", mergeProps({
|
|
key: 0,
|
|
class: unref(ns).e("mask"),
|
|
style: {
|
|
position: "fixed",
|
|
left: 0,
|
|
right: 0,
|
|
top: 0,
|
|
bottom: 0,
|
|
zIndex: _ctx.zIndex,
|
|
pointerEvents: _ctx.pos && _ctx.targetAreaClickable ? "none" : "auto"
|
|
}
|
|
}, _ctx.$attrs), [
|
|
(openBlock(), createElementBlock("svg", { style: {
|
|
width: "100%",
|
|
height: "100%"
|
|
} }, [
|
|
createElementVNode("path", {
|
|
class: normalizeClass(unref(ns).e("hollow")),
|
|
style: normalizeStyle(unref(pathStyle)),
|
|
d: unref(path)
|
|
}, null, 14, ["d"])
|
|
]))
|
|
], 16)) : createCommentVNode("v-if", true);
|
|
};
|
|
}
|
|
});
|
|
var ElTourMask = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__file", "mask.vue"]]);
|
|
|
|
const tourStrategies = ["absolute", "fixed"];
|
|
const tourPlacements = [
|
|
"top-start",
|
|
"top-end",
|
|
"top",
|
|
"bottom-start",
|
|
"bottom-end",
|
|
"bottom",
|
|
"left-start",
|
|
"left-end",
|
|
"left",
|
|
"right-start",
|
|
"right-end",
|
|
"right"
|
|
];
|
|
const tourContentProps = buildProps({
|
|
placement: {
|
|
type: definePropType(String),
|
|
values: tourPlacements,
|
|
default: "bottom"
|
|
},
|
|
reference: {
|
|
type: definePropType(Object),
|
|
default: null
|
|
},
|
|
strategy: {
|
|
type: definePropType(String),
|
|
values: tourStrategies,
|
|
default: "absolute"
|
|
},
|
|
offset: {
|
|
type: Number,
|
|
default: 10
|
|
},
|
|
showArrow: Boolean,
|
|
zIndex: {
|
|
type: Number,
|
|
default: 2001
|
|
}
|
|
});
|
|
const tourContentEmits = {
|
|
close: () => true
|
|
};
|
|
|
|
const __default__$9 = defineComponent({
|
|
name: "ElTourContent"
|
|
});
|
|
const _sfc_main$a = /* @__PURE__ */ defineComponent({
|
|
...__default__$9,
|
|
props: tourContentProps,
|
|
emits: tourContentEmits,
|
|
setup(__props, { emit }) {
|
|
const props = __props;
|
|
const placement = ref(props.placement);
|
|
const strategy = ref(props.strategy);
|
|
const contentRef = ref(null);
|
|
const arrowRef = ref(null);
|
|
watch(() => props.placement, () => {
|
|
placement.value = props.placement;
|
|
});
|
|
const { contentStyle, arrowStyle } = useFloating(toRef(props, "reference"), contentRef, arrowRef, placement, strategy, toRef(props, "offset"), toRef(props, "zIndex"), toRef(props, "showArrow"));
|
|
const side = computed(() => {
|
|
return placement.value.split("-")[0];
|
|
});
|
|
const { ns } = inject(tourKey);
|
|
const onCloseRequested = () => {
|
|
emit("close");
|
|
};
|
|
const onFocusoutPrevented = (event) => {
|
|
if (event.detail.focusReason === "pointer") {
|
|
event.preventDefault();
|
|
}
|
|
};
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
ref_key: "contentRef",
|
|
ref: contentRef,
|
|
style: normalizeStyle(unref(contentStyle)),
|
|
class: normalizeClass(unref(ns).e("content")),
|
|
"data-side": unref(side),
|
|
tabindex: "-1"
|
|
}, [
|
|
createVNode(unref(ElFocusTrap), {
|
|
loop: "",
|
|
trapped: "",
|
|
"focus-start-el": "container",
|
|
"focus-trap-el": contentRef.value || void 0,
|
|
onReleaseRequested: onCloseRequested,
|
|
onFocusoutPrevented
|
|
}, {
|
|
default: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "default")
|
|
]),
|
|
_: 3
|
|
}, 8, ["focus-trap-el"]),
|
|
_ctx.showArrow ? (openBlock(), createElementBlock("span", {
|
|
key: 0,
|
|
ref_key: "arrowRef",
|
|
ref: arrowRef,
|
|
style: normalizeStyle(unref(arrowStyle)),
|
|
class: normalizeClass(unref(ns).e("arrow"))
|
|
}, null, 6)) : createCommentVNode("v-if", true)
|
|
], 14, ["data-side"]);
|
|
};
|
|
}
|
|
});
|
|
var ElTourContent = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__file", "content.vue"]]);
|
|
|
|
var ElTourSteps = defineComponent({
|
|
name: "ElTourSteps",
|
|
props: {
|
|
current: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
emits: ["update-total"],
|
|
setup(props, { slots, emit }) {
|
|
let cacheTotal = 0;
|
|
return () => {
|
|
var _a, _b;
|
|
const children = (_a = slots.default) == null ? void 0 : _a.call(slots);
|
|
const result = [];
|
|
let total = 0;
|
|
function filterSteps(children2) {
|
|
if (!isArray$1(children2))
|
|
return;
|
|
children2.forEach((item) => {
|
|
var _a2;
|
|
const name = (_a2 = (item == null ? void 0 : item.type) || {}) == null ? void 0 : _a2.name;
|
|
if (name === "ElTourStep") {
|
|
result.push(item);
|
|
total += 1;
|
|
}
|
|
});
|
|
}
|
|
if (children.length) {
|
|
filterSteps(flattedChildren((_b = children[0]) == null ? void 0 : _b.children));
|
|
}
|
|
if (cacheTotal !== total) {
|
|
cacheTotal = total;
|
|
emit("update-total", total);
|
|
}
|
|
if (result.length) {
|
|
return result[props.current];
|
|
}
|
|
return null;
|
|
};
|
|
}
|
|
});
|
|
|
|
const tourProps = buildProps({
|
|
modelValue: Boolean,
|
|
current: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
showArrow: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
showClose: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
closeIcon: {
|
|
type: iconPropType
|
|
},
|
|
placement: tourContentProps.placement,
|
|
contentStyle: {
|
|
type: definePropType([Object])
|
|
},
|
|
mask: {
|
|
type: definePropType([Boolean, Object]),
|
|
default: true
|
|
},
|
|
gap: {
|
|
type: definePropType(Object),
|
|
default: () => ({
|
|
offset: 6,
|
|
radius: 2
|
|
})
|
|
},
|
|
zIndex: {
|
|
type: Number
|
|
},
|
|
scrollIntoViewOptions: {
|
|
type: definePropType([Boolean, Object]),
|
|
default: () => ({
|
|
block: "center"
|
|
})
|
|
},
|
|
type: {
|
|
type: definePropType(String)
|
|
},
|
|
appendTo: {
|
|
type: definePropType([String, Object]),
|
|
default: "body"
|
|
},
|
|
closeOnPressEscape: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
targetAreaClickable: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
});
|
|
const tourEmits = {
|
|
[UPDATE_MODEL_EVENT]: (value) => isBoolean(value),
|
|
["update:current"]: (current) => isNumber(current),
|
|
close: (current) => isNumber(current),
|
|
finish: () => true,
|
|
change: (current) => isNumber(current)
|
|
};
|
|
|
|
const __default__$8 = defineComponent({
|
|
name: "ElTour"
|
|
});
|
|
const _sfc_main$9 = /* @__PURE__ */ defineComponent({
|
|
...__default__$8,
|
|
props: tourProps,
|
|
emits: tourEmits,
|
|
setup(__props, { emit }) {
|
|
const props = __props;
|
|
const ns = useNamespace("tour");
|
|
const total = ref(0);
|
|
const currentStep = ref();
|
|
const current = useVModel(props, "current", emit, {
|
|
passive: true
|
|
});
|
|
const currentTarget = computed(() => {
|
|
var _a;
|
|
return (_a = currentStep.value) == null ? void 0 : _a.target;
|
|
});
|
|
const kls = computed(() => [
|
|
ns.b(),
|
|
mergedType.value === "primary" ? ns.m("primary") : ""
|
|
]);
|
|
const mergedPlacement = computed(() => {
|
|
var _a;
|
|
return ((_a = currentStep.value) == null ? void 0 : _a.placement) || props.placement;
|
|
});
|
|
const mergedContentStyle = computed(() => {
|
|
var _a, _b;
|
|
return (_b = (_a = currentStep.value) == null ? void 0 : _a.contentStyle) != null ? _b : props.contentStyle;
|
|
});
|
|
const mergedMask = computed(() => {
|
|
var _a, _b;
|
|
return (_b = (_a = currentStep.value) == null ? void 0 : _a.mask) != null ? _b : props.mask;
|
|
});
|
|
const mergedShowMask = computed(() => !!mergedMask.value && props.modelValue);
|
|
const mergedMaskStyle = computed(() => isBoolean(mergedMask.value) ? void 0 : mergedMask.value);
|
|
const mergedShowArrow = computed(() => {
|
|
var _a, _b;
|
|
return !!currentTarget.value && ((_b = (_a = currentStep.value) == null ? void 0 : _a.showArrow) != null ? _b : props.showArrow);
|
|
});
|
|
const mergedScrollIntoViewOptions = computed(() => {
|
|
var _a, _b;
|
|
return (_b = (_a = currentStep.value) == null ? void 0 : _a.scrollIntoViewOptions) != null ? _b : props.scrollIntoViewOptions;
|
|
});
|
|
const mergedType = computed(() => {
|
|
var _a, _b;
|
|
return (_b = (_a = currentStep.value) == null ? void 0 : _a.type) != null ? _b : props.type;
|
|
});
|
|
const { nextZIndex } = useZIndex();
|
|
const nowZIndex = nextZIndex();
|
|
const mergedZIndex = computed(() => {
|
|
var _a;
|
|
return (_a = props.zIndex) != null ? _a : nowZIndex;
|
|
});
|
|
const { mergedPosInfo: pos, triggerTarget } = useTarget(currentTarget, toRef(props, "modelValue"), toRef(props, "gap"), mergedMask, mergedScrollIntoViewOptions);
|
|
watch(() => props.modelValue, (val) => {
|
|
if (!val) {
|
|
current.value = 0;
|
|
}
|
|
});
|
|
const onEscClose = () => {
|
|
if (props.closeOnPressEscape) {
|
|
emit("update:modelValue", false);
|
|
emit("close", current.value);
|
|
}
|
|
};
|
|
const onUpdateTotal = (val) => {
|
|
total.value = val;
|
|
};
|
|
const slots = useSlots();
|
|
provide(tourKey, {
|
|
currentStep,
|
|
current,
|
|
total,
|
|
showClose: toRef(props, "showClose"),
|
|
closeIcon: toRef(props, "closeIcon"),
|
|
mergedType,
|
|
ns,
|
|
slots,
|
|
updateModelValue(modelValue) {
|
|
emit("update:modelValue", modelValue);
|
|
},
|
|
onClose() {
|
|
emit("close", current.value);
|
|
},
|
|
onFinish() {
|
|
emit("finish");
|
|
},
|
|
onChange() {
|
|
emit("change", current.value);
|
|
}
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock(Fragment, null, [
|
|
createVNode(unref(ElTeleport$1), { to: _ctx.appendTo }, {
|
|
default: withCtx(() => {
|
|
var _a, _b;
|
|
return [
|
|
createElementVNode("div", mergeProps({ class: unref(kls) }, _ctx.$attrs), [
|
|
createVNode(ElTourMask, {
|
|
visible: unref(mergedShowMask),
|
|
fill: (_a = unref(mergedMaskStyle)) == null ? void 0 : _a.color,
|
|
style: normalizeStyle((_b = unref(mergedMaskStyle)) == null ? void 0 : _b.style),
|
|
pos: unref(pos),
|
|
"z-index": unref(mergedZIndex),
|
|
"target-area-clickable": _ctx.targetAreaClickable
|
|
}, null, 8, ["visible", "fill", "style", "pos", "z-index", "target-area-clickable"]),
|
|
_ctx.modelValue ? (openBlock(), createBlock(ElTourContent, {
|
|
key: unref(current),
|
|
reference: unref(triggerTarget),
|
|
placement: unref(mergedPlacement),
|
|
"show-arrow": unref(mergedShowArrow),
|
|
"z-index": unref(mergedZIndex),
|
|
style: normalizeStyle(unref(mergedContentStyle)),
|
|
onClose: onEscClose
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(ElTourSteps), {
|
|
current: unref(current),
|
|
onUpdateTotal
|
|
}, {
|
|
default: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "default")
|
|
]),
|
|
_: 3
|
|
}, 8, ["current"])
|
|
]),
|
|
_: 3
|
|
}, 8, ["reference", "placement", "show-arrow", "z-index", "style"])) : createCommentVNode("v-if", true)
|
|
], 16)
|
|
];
|
|
}),
|
|
_: 3
|
|
}, 8, ["to"]),
|
|
createCommentVNode(" just for IDE "),
|
|
createCommentVNode("v-if", true)
|
|
], 64);
|
|
};
|
|
}
|
|
});
|
|
var Tour = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__file", "tour.vue"]]);
|
|
|
|
const tourStepProps = buildProps({
|
|
target: {
|
|
type: definePropType([String, Object, Function])
|
|
},
|
|
title: String,
|
|
description: String,
|
|
showClose: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
closeIcon: {
|
|
type: iconPropType
|
|
},
|
|
showArrow: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
placement: tourContentProps.placement,
|
|
mask: {
|
|
type: definePropType([Boolean, Object]),
|
|
default: void 0
|
|
},
|
|
contentStyle: {
|
|
type: definePropType([Object])
|
|
},
|
|
prevButtonProps: {
|
|
type: definePropType(Object)
|
|
},
|
|
nextButtonProps: {
|
|
type: definePropType(Object)
|
|
},
|
|
scrollIntoViewOptions: {
|
|
type: definePropType([Boolean, Object]),
|
|
default: void 0
|
|
},
|
|
type: {
|
|
type: definePropType(String)
|
|
}
|
|
});
|
|
const tourStepEmits = {
|
|
close: () => true
|
|
};
|
|
|
|
const __default__$7 = defineComponent({
|
|
name: "ElTourStep"
|
|
});
|
|
const _sfc_main$8 = /* @__PURE__ */ defineComponent({
|
|
...__default__$7,
|
|
props: tourStepProps,
|
|
emits: tourStepEmits,
|
|
setup(__props, { emit }) {
|
|
const props = __props;
|
|
const { Close } = CloseComponents;
|
|
const { t } = useLocale();
|
|
const {
|
|
currentStep,
|
|
current,
|
|
total,
|
|
showClose,
|
|
closeIcon,
|
|
mergedType,
|
|
ns,
|
|
slots: tourSlots,
|
|
updateModelValue,
|
|
onClose: tourOnClose,
|
|
onFinish: tourOnFinish,
|
|
onChange
|
|
} = inject(tourKey);
|
|
watch(props, (val) => {
|
|
currentStep.value = val;
|
|
}, {
|
|
immediate: true
|
|
});
|
|
const mergedShowClose = computed(() => {
|
|
var _a;
|
|
return (_a = props.showClose) != null ? _a : showClose.value;
|
|
});
|
|
const mergedCloseIcon = computed(() => {
|
|
var _a, _b;
|
|
return (_b = (_a = props.closeIcon) != null ? _a : closeIcon.value) != null ? _b : Close;
|
|
});
|
|
const filterButtonProps = (btnProps) => {
|
|
if (!btnProps)
|
|
return;
|
|
return omit(btnProps, ["children", "onClick"]);
|
|
};
|
|
const onPrev = () => {
|
|
var _a, _b;
|
|
current.value -= 1;
|
|
if ((_a = props.prevButtonProps) == null ? void 0 : _a.onClick) {
|
|
(_b = props.prevButtonProps) == null ? void 0 : _b.onClick();
|
|
}
|
|
onChange();
|
|
};
|
|
const onNext = () => {
|
|
var _a;
|
|
if (current.value >= total.value - 1) {
|
|
onFinish();
|
|
} else {
|
|
current.value += 1;
|
|
}
|
|
if ((_a = props.nextButtonProps) == null ? void 0 : _a.onClick) {
|
|
props.nextButtonProps.onClick();
|
|
}
|
|
onChange();
|
|
};
|
|
const onFinish = () => {
|
|
onClose();
|
|
tourOnFinish();
|
|
};
|
|
const onClose = () => {
|
|
updateModelValue(false);
|
|
tourOnClose();
|
|
emit("close");
|
|
};
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock(Fragment, null, [
|
|
unref(mergedShowClose) ? (openBlock(), createElementBlock("button", {
|
|
key: 0,
|
|
"aria-label": "Close",
|
|
class: normalizeClass(unref(ns).e("closebtn")),
|
|
type: "button",
|
|
onClick: onClose
|
|
}, [
|
|
createVNode(unref(ElIcon), {
|
|
class: normalizeClass(unref(ns).e("close"))
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(unref(mergedCloseIcon))))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
createElementVNode("header", {
|
|
class: normalizeClass([unref(ns).e("header"), { "show-close": unref(showClose) }])
|
|
}, [
|
|
renderSlot(_ctx.$slots, "header", {}, () => [
|
|
createElementVNode("span", {
|
|
role: "heading",
|
|
class: normalizeClass(unref(ns).e("title"))
|
|
}, toDisplayString(_ctx.title), 3)
|
|
])
|
|
], 2),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("body"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default", {}, () => [
|
|
createElementVNode("span", null, toDisplayString(_ctx.description), 1)
|
|
])
|
|
], 2),
|
|
createElementVNode("footer", {
|
|
class: normalizeClass(unref(ns).e("footer"))
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).b("indicators"))
|
|
}, [
|
|
unref(tourSlots).indicators ? (openBlock(), createBlock(resolveDynamicComponent(unref(tourSlots).indicators), {
|
|
key: 0,
|
|
current: unref(current),
|
|
total: unref(total)
|
|
}, null, 8, ["current", "total"])) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(total), (item, index) => {
|
|
return openBlock(), createElementBlock("span", {
|
|
key: item,
|
|
class: normalizeClass([unref(ns).b("indicator"), index === unref(current) ? "is-active" : ""])
|
|
}, null, 2);
|
|
}), 128))
|
|
], 2),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).b("buttons"))
|
|
}, [
|
|
unref(current) > 0 ? (openBlock(), createBlock(unref(ElButton), mergeProps({
|
|
key: 0,
|
|
size: "small",
|
|
type: unref(mergedType)
|
|
}, filterButtonProps(_ctx.prevButtonProps), { onClick: onPrev }), {
|
|
default: withCtx(() => {
|
|
var _a, _b;
|
|
return [
|
|
createTextVNode(toDisplayString((_b = (_a = _ctx.prevButtonProps) == null ? void 0 : _a.children) != null ? _b : unref(t)("el.tour.previous")), 1)
|
|
];
|
|
}),
|
|
_: 1
|
|
}, 16, ["type"])) : createCommentVNode("v-if", true),
|
|
unref(current) <= unref(total) - 1 ? (openBlock(), createBlock(unref(ElButton), mergeProps({
|
|
key: 1,
|
|
size: "small",
|
|
type: unref(mergedType) === "primary" ? "default" : "primary"
|
|
}, filterButtonProps(_ctx.nextButtonProps), { onClick: onNext }), {
|
|
default: withCtx(() => {
|
|
var _a, _b;
|
|
return [
|
|
createTextVNode(toDisplayString((_b = (_a = _ctx.nextButtonProps) == null ? void 0 : _a.children) != null ? _b : unref(current) === unref(total) - 1 ? unref(t)("el.tour.finish") : unref(t)("el.tour.next")), 1)
|
|
];
|
|
}),
|
|
_: 1
|
|
}, 16, ["type"])) : createCommentVNode("v-if", true)
|
|
], 2)
|
|
], 2)
|
|
], 64);
|
|
};
|
|
}
|
|
});
|
|
var TourStep = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__file", "step.vue"]]);
|
|
|
|
const ElTour = withInstall(Tour, {
|
|
TourStep
|
|
});
|
|
const ElTourStep = withNoopInstall(TourStep);
|
|
|
|
const anchorProps = buildProps({
|
|
container: {
|
|
type: definePropType([
|
|
String,
|
|
Object
|
|
])
|
|
},
|
|
offset: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
bound: {
|
|
type: Number,
|
|
default: 15
|
|
},
|
|
duration: {
|
|
type: Number,
|
|
default: 300
|
|
},
|
|
marker: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
type: {
|
|
type: definePropType(String),
|
|
default: "default"
|
|
},
|
|
direction: {
|
|
type: definePropType(String),
|
|
default: "vertical"
|
|
}
|
|
});
|
|
const anchorEmits = {
|
|
change: (href) => isString$1(href),
|
|
click: (e, href) => e instanceof MouseEvent && (isString$1(href) || isUndefined(href))
|
|
};
|
|
|
|
const anchorKey = Symbol("anchor");
|
|
|
|
const __default__$6 = defineComponent({
|
|
name: "ElAnchor"
|
|
});
|
|
const _sfc_main$7 = /* @__PURE__ */ defineComponent({
|
|
...__default__$6,
|
|
props: anchorProps,
|
|
emits: anchorEmits,
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const currentAnchor = ref("");
|
|
const anchorRef = ref(null);
|
|
const markerRef = ref(null);
|
|
const containerEl = ref();
|
|
const links = {};
|
|
let isScrolling = false;
|
|
let currentScrollTop = 0;
|
|
const ns = useNamespace("anchor");
|
|
const cls = computed(() => [
|
|
ns.b(),
|
|
props.type === "underline" ? ns.m("underline") : "",
|
|
ns.m(props.direction)
|
|
]);
|
|
const addLink = (state) => {
|
|
links[state.href] = state.el;
|
|
};
|
|
const removeLink = (href) => {
|
|
delete links[href];
|
|
};
|
|
const setCurrentAnchor = (href) => {
|
|
const activeHref = currentAnchor.value;
|
|
if (activeHref !== href) {
|
|
currentAnchor.value = href;
|
|
emit("change", href);
|
|
}
|
|
};
|
|
let clearAnimate = null;
|
|
const scrollToAnchor = (href) => {
|
|
if (!containerEl.value)
|
|
return;
|
|
const target = getElement(href);
|
|
if (!target)
|
|
return;
|
|
if (clearAnimate)
|
|
clearAnimate();
|
|
isScrolling = true;
|
|
const scrollEle = getScrollElement(target, containerEl.value);
|
|
const distance = getOffsetTopDistance(target, scrollEle);
|
|
const max = scrollEle.scrollHeight - scrollEle.clientHeight;
|
|
const to = Math.min(distance - props.offset, max);
|
|
clearAnimate = animateScrollTo(containerEl.value, currentScrollTop, to, props.duration, () => {
|
|
setTimeout(() => {
|
|
isScrolling = false;
|
|
}, 20);
|
|
});
|
|
};
|
|
const scrollTo = (href) => {
|
|
if (href) {
|
|
setCurrentAnchor(href);
|
|
scrollToAnchor(href);
|
|
}
|
|
};
|
|
const handleClick = (e, href) => {
|
|
emit("click", e, href);
|
|
scrollTo(href);
|
|
};
|
|
const handleScroll = throttleByRaf(() => {
|
|
if (containerEl.value) {
|
|
currentScrollTop = getScrollTop(containerEl.value);
|
|
}
|
|
const currentHref = getCurrentHref();
|
|
if (isScrolling || isUndefined(currentHref))
|
|
return;
|
|
setCurrentAnchor(currentHref);
|
|
});
|
|
const getCurrentHref = () => {
|
|
if (!containerEl.value)
|
|
return;
|
|
const scrollTop = getScrollTop(containerEl.value);
|
|
const anchorTopList = [];
|
|
for (const href of Object.keys(links)) {
|
|
const target = getElement(href);
|
|
if (!target)
|
|
continue;
|
|
const scrollEle = getScrollElement(target, containerEl.value);
|
|
const distance = getOffsetTopDistance(target, scrollEle);
|
|
anchorTopList.push({
|
|
top: distance - props.offset - props.bound,
|
|
href
|
|
});
|
|
}
|
|
anchorTopList.sort((prev, next) => prev.top - next.top);
|
|
for (let i = 0; i < anchorTopList.length; i++) {
|
|
const item = anchorTopList[i];
|
|
const next = anchorTopList[i + 1];
|
|
if (i === 0 && scrollTop === 0) {
|
|
return "";
|
|
}
|
|
if (item.top <= scrollTop && (!next || next.top > scrollTop)) {
|
|
return item.href;
|
|
}
|
|
}
|
|
};
|
|
const getContainer = () => {
|
|
const el = getElement(props.container);
|
|
if (!el || isWindow$1(el)) {
|
|
containerEl.value = window;
|
|
} else {
|
|
containerEl.value = el;
|
|
}
|
|
};
|
|
useEventListener(containerEl, "scroll", handleScroll);
|
|
const markerStyle = computed(() => {
|
|
if (!anchorRef.value || !markerRef.value || !currentAnchor.value)
|
|
return {};
|
|
const currentLinkEl = links[currentAnchor.value];
|
|
if (!currentLinkEl)
|
|
return {};
|
|
const anchorRect = anchorRef.value.getBoundingClientRect();
|
|
const markerRect = markerRef.value.getBoundingClientRect();
|
|
const linkRect = currentLinkEl.getBoundingClientRect();
|
|
if (props.direction === "horizontal") {
|
|
const left = linkRect.left - anchorRect.left;
|
|
return {
|
|
left: `${left}px`,
|
|
width: `${linkRect.width}px`,
|
|
opacity: 1
|
|
};
|
|
} else {
|
|
const top = linkRect.top - anchorRect.top + (linkRect.height - markerRect.height) / 2;
|
|
return {
|
|
top: `${top}px`,
|
|
opacity: 1
|
|
};
|
|
}
|
|
});
|
|
onMounted(() => {
|
|
getContainer();
|
|
const hash = decodeURIComponent(window.location.hash);
|
|
const target = getElement(hash);
|
|
if (target) {
|
|
scrollTo(hash);
|
|
} else {
|
|
handleScroll();
|
|
}
|
|
});
|
|
watch(() => props.container, () => {
|
|
getContainer();
|
|
});
|
|
provide(anchorKey, {
|
|
ns,
|
|
direction: props.direction,
|
|
currentAnchor,
|
|
addLink,
|
|
removeLink,
|
|
handleClick
|
|
});
|
|
expose({
|
|
scrollTo
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
ref_key: "anchorRef",
|
|
ref: anchorRef,
|
|
class: normalizeClass(unref(cls))
|
|
}, [
|
|
_ctx.marker ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
ref_key: "markerRef",
|
|
ref: markerRef,
|
|
class: normalizeClass(unref(ns).e("marker")),
|
|
style: normalizeStyle(unref(markerStyle))
|
|
}, null, 6)) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("list"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 2)
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var Anchor = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__file", "anchor.vue"]]);
|
|
|
|
const anchorLinkProps = buildProps({
|
|
title: String,
|
|
href: String
|
|
});
|
|
|
|
const __default__$5 = defineComponent({
|
|
name: "ElAnchorLink"
|
|
});
|
|
const _sfc_main$6 = /* @__PURE__ */ defineComponent({
|
|
...__default__$5,
|
|
props: anchorLinkProps,
|
|
setup(__props) {
|
|
const props = __props;
|
|
const linkRef = ref(null);
|
|
const {
|
|
ns,
|
|
direction,
|
|
currentAnchor,
|
|
addLink,
|
|
removeLink,
|
|
handleClick: contextHandleClick
|
|
} = inject(anchorKey);
|
|
const cls = computed(() => [
|
|
ns.e("link"),
|
|
ns.is("active", currentAnchor.value === props.href)
|
|
]);
|
|
const handleClick = (e) => {
|
|
contextHandleClick(e, props.href);
|
|
};
|
|
watch(() => props.href, (val, oldVal) => {
|
|
nextTick(() => {
|
|
if (oldVal)
|
|
removeLink(oldVal);
|
|
if (val) {
|
|
addLink({
|
|
href: val,
|
|
el: linkRef.value
|
|
});
|
|
}
|
|
});
|
|
});
|
|
onMounted(() => {
|
|
const { href } = props;
|
|
if (href) {
|
|
addLink({
|
|
href,
|
|
el: linkRef.value
|
|
});
|
|
}
|
|
});
|
|
onBeforeUnmount(() => {
|
|
const { href } = props;
|
|
if (href) {
|
|
removeLink(href);
|
|
}
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass(unref(ns).e("item"))
|
|
}, [
|
|
createElementVNode("a", {
|
|
ref_key: "linkRef",
|
|
ref: linkRef,
|
|
class: normalizeClass(unref(cls)),
|
|
href: _ctx.href,
|
|
onClick: handleClick
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default", {}, () => [
|
|
createTextVNode(toDisplayString(_ctx.title), 1)
|
|
])
|
|
], 10, ["href"]),
|
|
_ctx.$slots["sub-link"] && unref(direction) === "vertical" ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).e("list"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "sub-link")
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var AnchorLink = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__file", "anchor-link.vue"]]);
|
|
|
|
const ElAnchor = withInstall(Anchor, {
|
|
AnchorLink
|
|
});
|
|
const ElAnchorLink = withNoopInstall(AnchorLink);
|
|
|
|
const segmentedProps = buildProps({
|
|
options: {
|
|
type: definePropType(Array),
|
|
default: () => []
|
|
},
|
|
modelValue: {
|
|
type: [String, Number, Boolean],
|
|
default: void 0
|
|
},
|
|
block: Boolean,
|
|
size: useSizeProp,
|
|
disabled: Boolean,
|
|
validateEvent: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
id: String,
|
|
name: String,
|
|
...useAriaProps(["ariaLabel"])
|
|
});
|
|
const segmentedEmits = {
|
|
[UPDATE_MODEL_EVENT]: (val) => isString$1(val) || isNumber(val) || isBoolean(val),
|
|
[CHANGE_EVENT]: (val) => isString$1(val) || isNumber(val) || isBoolean(val)
|
|
};
|
|
|
|
const __default__$4 = defineComponent({
|
|
name: "ElSegmented"
|
|
});
|
|
const _sfc_main$5 = /* @__PURE__ */ defineComponent({
|
|
...__default__$4,
|
|
props: segmentedProps,
|
|
emits: segmentedEmits,
|
|
setup(__props, { emit }) {
|
|
const props = __props;
|
|
const ns = useNamespace("segmented");
|
|
const segmentedId = useId();
|
|
const segmentedSize = useFormSize();
|
|
const _disabled = useFormDisabled();
|
|
const { formItem } = useFormItem();
|
|
const { inputId, isLabeledByFormItem } = useFormItemInputId(props, {
|
|
formItemContext: formItem
|
|
});
|
|
const segmentedRef = ref(null);
|
|
const activeElement = useActiveElement();
|
|
const state = reactive({
|
|
isInit: false,
|
|
width: 0,
|
|
translateX: 0,
|
|
focusVisible: false
|
|
});
|
|
const handleChange = (item) => {
|
|
const value = getValue(item);
|
|
emit(UPDATE_MODEL_EVENT, value);
|
|
emit(CHANGE_EVENT, value);
|
|
};
|
|
const getValue = (item) => {
|
|
return isObject$1(item) ? item.value : item;
|
|
};
|
|
const getLabel = (item) => {
|
|
return isObject$1(item) ? item.label : item;
|
|
};
|
|
const getDisabled = (item) => {
|
|
return !!(_disabled.value || (isObject$1(item) ? item.disabled : false));
|
|
};
|
|
const getSelected = (item) => {
|
|
return props.modelValue === getValue(item);
|
|
};
|
|
const getOption = (value) => {
|
|
return props.options.find((item) => getValue(item) === value);
|
|
};
|
|
const getItemCls = (item) => {
|
|
return [
|
|
ns.e("item"),
|
|
ns.is("selected", getSelected(item)),
|
|
ns.is("disabled", getDisabled(item))
|
|
];
|
|
};
|
|
const updateSelect = () => {
|
|
if (!segmentedRef.value)
|
|
return;
|
|
const selectedItem = segmentedRef.value.querySelector(".is-selected");
|
|
const selectedItemInput = segmentedRef.value.querySelector(".is-selected input");
|
|
if (!selectedItem || !selectedItemInput) {
|
|
state.width = 0;
|
|
state.translateX = 0;
|
|
state.focusVisible = false;
|
|
return;
|
|
}
|
|
const rect = selectedItem.getBoundingClientRect();
|
|
state.isInit = true;
|
|
state.width = rect.width;
|
|
state.translateX = selectedItem.offsetLeft;
|
|
try {
|
|
state.focusVisible = selectedItemInput.matches(":focus-visible");
|
|
} catch (e) {
|
|
}
|
|
};
|
|
const segmentedCls = computed(() => [
|
|
ns.b(),
|
|
ns.m(segmentedSize.value),
|
|
ns.is("block", props.block)
|
|
]);
|
|
const selectedStyle = computed(() => ({
|
|
width: `${state.width}px`,
|
|
transform: `translateX(${state.translateX}px)`,
|
|
display: state.isInit ? "block" : "none"
|
|
}));
|
|
const selectedCls = computed(() => [
|
|
ns.e("item-selected"),
|
|
ns.is("disabled", getDisabled(getOption(props.modelValue))),
|
|
ns.is("focus-visible", state.focusVisible)
|
|
]);
|
|
const name = computed(() => {
|
|
return props.name || segmentedId.value;
|
|
});
|
|
useResizeObserver(segmentedRef, updateSelect);
|
|
watch(activeElement, updateSelect);
|
|
watch(() => props.modelValue, () => {
|
|
var _a;
|
|
updateSelect();
|
|
if (props.validateEvent) {
|
|
(_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change").catch((err) => debugWarn());
|
|
}
|
|
}, {
|
|
flush: "post"
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
id: unref(inputId),
|
|
ref_key: "segmentedRef",
|
|
ref: segmentedRef,
|
|
class: normalizeClass(unref(segmentedCls)),
|
|
role: "radiogroup",
|
|
"aria-label": !unref(isLabeledByFormItem) ? _ctx.ariaLabel || "segmented" : void 0,
|
|
"aria-labelledby": unref(isLabeledByFormItem) ? unref(formItem).labelId : void 0
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("group"))
|
|
}, [
|
|
createElementVNode("div", {
|
|
style: normalizeStyle(unref(selectedStyle)),
|
|
class: normalizeClass(unref(selectedCls))
|
|
}, null, 6),
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (item, index) => {
|
|
return openBlock(), createElementBlock("label", {
|
|
key: index,
|
|
class: normalizeClass(getItemCls(item))
|
|
}, [
|
|
createElementVNode("input", {
|
|
class: normalizeClass(unref(ns).e("item-input")),
|
|
type: "radio",
|
|
name: unref(name),
|
|
disabled: getDisabled(item),
|
|
checked: getSelected(item),
|
|
onChange: ($event) => handleChange(item)
|
|
}, null, 42, ["name", "disabled", "checked", "onChange"]),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("item-label"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default", { item }, () => [
|
|
createTextVNode(toDisplayString(getLabel(item)), 1)
|
|
])
|
|
], 2)
|
|
], 2);
|
|
}), 128))
|
|
], 2)
|
|
], 10, ["id", "aria-label", "aria-labelledby"]);
|
|
};
|
|
}
|
|
});
|
|
var Segmented = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__file", "segmented.vue"]]);
|
|
|
|
const ElSegmented = withInstall(Segmented);
|
|
|
|
const filterOption = (pattern, option) => {
|
|
const lowerCase = pattern.toLowerCase();
|
|
const label = option.label || option.value;
|
|
return label.toLowerCase().includes(lowerCase);
|
|
};
|
|
const getMentionCtx = (inputEl, prefix, split) => {
|
|
const { selectionEnd } = inputEl;
|
|
if (selectionEnd === null)
|
|
return;
|
|
const inputValue = inputEl.value;
|
|
const prefixArray = castArray$1(prefix);
|
|
let splitIndex = -1;
|
|
let mentionCtx;
|
|
for (let i = selectionEnd - 1; i >= 0; --i) {
|
|
const char = inputValue[i];
|
|
if (char === split || char === "\n" || char === "\r") {
|
|
splitIndex = i;
|
|
continue;
|
|
}
|
|
if (prefixArray.includes(char)) {
|
|
const end = splitIndex === -1 ? selectionEnd : splitIndex;
|
|
const pattern = inputValue.slice(i + 1, end);
|
|
mentionCtx = {
|
|
pattern,
|
|
start: i + 1,
|
|
end,
|
|
prefix: char,
|
|
prefixIndex: i,
|
|
splitIndex,
|
|
selectionEnd
|
|
};
|
|
break;
|
|
}
|
|
}
|
|
return mentionCtx;
|
|
};
|
|
const getCursorPosition = (element, options = {
|
|
debug: false,
|
|
useSelectionEnd: false
|
|
}) => {
|
|
const selectionStart = element.selectionStart !== null ? element.selectionStart : 0;
|
|
const selectionEnd = element.selectionEnd !== null ? element.selectionEnd : 0;
|
|
const position = options.useSelectionEnd ? selectionEnd : selectionStart;
|
|
const properties = [
|
|
"direction",
|
|
"boxSizing",
|
|
"width",
|
|
"height",
|
|
"overflowX",
|
|
"overflowY",
|
|
"borderTopWidth",
|
|
"borderRightWidth",
|
|
"borderBottomWidth",
|
|
"borderLeftWidth",
|
|
"borderStyle",
|
|
"paddingTop",
|
|
"paddingRight",
|
|
"paddingBottom",
|
|
"paddingLeft",
|
|
"fontStyle",
|
|
"fontVariant",
|
|
"fontWeight",
|
|
"fontStretch",
|
|
"fontSize",
|
|
"fontSizeAdjust",
|
|
"lineHeight",
|
|
"fontFamily",
|
|
"textAlign",
|
|
"textTransform",
|
|
"textIndent",
|
|
"textDecoration",
|
|
"letterSpacing",
|
|
"wordSpacing",
|
|
"tabSize",
|
|
"MozTabSize"
|
|
];
|
|
if (options.debug) {
|
|
const el = document.querySelector("#input-textarea-caret-position-mirror-div");
|
|
if (el == null ? void 0 : el.parentNode)
|
|
el.parentNode.removeChild(el);
|
|
}
|
|
const div = document.createElement("div");
|
|
div.id = "input-textarea-caret-position-mirror-div";
|
|
document.body.appendChild(div);
|
|
const style = div.style;
|
|
const computed = window.getComputedStyle(element);
|
|
const isInput = element.nodeName === "INPUT";
|
|
style.whiteSpace = isInput ? "nowrap" : "pre-wrap";
|
|
if (!isInput)
|
|
style.wordWrap = "break-word";
|
|
style.position = "absolute";
|
|
if (!options.debug)
|
|
style.visibility = "hidden";
|
|
properties.forEach((prop) => {
|
|
if (isInput && prop === "lineHeight") {
|
|
if (computed.boxSizing === "border-box") {
|
|
const height = Number.parseInt(computed.height);
|
|
const outerHeight = Number.parseInt(computed.paddingTop) + Number.parseInt(computed.paddingBottom) + Number.parseInt(computed.borderTopWidth) + Number.parseInt(computed.borderBottomWidth);
|
|
const targetHeight = outerHeight + Number.parseInt(computed.lineHeight);
|
|
if (height > targetHeight) {
|
|
style.lineHeight = `${height - outerHeight}px`;
|
|
} else if (height === targetHeight) {
|
|
style.lineHeight = computed.lineHeight;
|
|
} else {
|
|
style.lineHeight = "0";
|
|
}
|
|
} else {
|
|
style.lineHeight = computed.height;
|
|
}
|
|
} else {
|
|
style[prop] = computed[prop];
|
|
}
|
|
});
|
|
if (isFirefox()) {
|
|
if (element.scrollHeight > Number.parseInt(computed.height)) {
|
|
style.overflowY = "scroll";
|
|
}
|
|
} else {
|
|
style.overflow = "hidden";
|
|
}
|
|
div.textContent = element.value.slice(0, Math.max(0, position));
|
|
if (isInput && div.textContent) {
|
|
div.textContent = div.textContent.replace(/\s/g, "\xA0");
|
|
}
|
|
const span = document.createElement("span");
|
|
span.textContent = element.value.slice(Math.max(0, position)) || ".";
|
|
span.style.position = "relative";
|
|
span.style.left = `${-element.scrollLeft}px`;
|
|
span.style.top = `${-element.scrollTop}px`;
|
|
div.appendChild(span);
|
|
const relativePosition = {
|
|
top: span.offsetTop + Number.parseInt(computed.borderTopWidth),
|
|
left: span.offsetLeft + Number.parseInt(computed.borderLeftWidth),
|
|
height: Number.parseInt(computed.fontSize) * 1.5
|
|
};
|
|
if (options.debug) {
|
|
span.style.backgroundColor = "#aaa";
|
|
} else {
|
|
document.body.removeChild(div);
|
|
}
|
|
if (relativePosition.left >= element.clientWidth) {
|
|
relativePosition.left = element.clientWidth;
|
|
}
|
|
return relativePosition;
|
|
};
|
|
|
|
const mentionProps = buildProps({
|
|
...inputProps,
|
|
options: {
|
|
type: definePropType(Array),
|
|
default: () => []
|
|
},
|
|
prefix: {
|
|
type: definePropType([String, Array]),
|
|
default: "@",
|
|
validator: (val) => {
|
|
if (isString$1(val))
|
|
return val.length === 1;
|
|
return val.every((v) => isString$1(v) && v.length === 1);
|
|
}
|
|
},
|
|
split: {
|
|
type: String,
|
|
default: " ",
|
|
validator: (val) => val.length === 1
|
|
},
|
|
filterOption: {
|
|
type: definePropType([Boolean, Function]),
|
|
default: () => filterOption,
|
|
validator: (val) => {
|
|
if (val === false)
|
|
return true;
|
|
return isFunction$1(val);
|
|
}
|
|
},
|
|
placement: {
|
|
type: definePropType(String),
|
|
default: "bottom"
|
|
},
|
|
showArrow: Boolean,
|
|
offset: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
whole: Boolean,
|
|
checkIsWhole: {
|
|
type: definePropType(Function)
|
|
},
|
|
modelValue: String,
|
|
loading: Boolean,
|
|
popperClass: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
popperOptions: {
|
|
type: definePropType(Object),
|
|
default: () => ({})
|
|
}
|
|
});
|
|
const mentionEmits = {
|
|
[UPDATE_MODEL_EVENT]: (value) => isString$1(value),
|
|
search: (pattern, prefix) => isString$1(pattern) && isString$1(prefix),
|
|
select: (option, prefix) => isString$1(option.value) && isString$1(prefix),
|
|
focus: (evt) => evt instanceof FocusEvent,
|
|
blur: (evt) => evt instanceof FocusEvent
|
|
};
|
|
|
|
const mentionDropdownProps = buildProps({
|
|
options: {
|
|
type: definePropType(Array),
|
|
default: () => []
|
|
},
|
|
loading: Boolean,
|
|
disabled: Boolean,
|
|
contentId: String,
|
|
ariaLabel: String
|
|
});
|
|
const mentionDropdownEmits = {
|
|
select: (option) => isString$1(option.value)
|
|
};
|
|
|
|
const __default__$3 = defineComponent({
|
|
name: "ElMentionDropdown"
|
|
});
|
|
const _sfc_main$4 = /* @__PURE__ */ defineComponent({
|
|
...__default__$3,
|
|
props: mentionDropdownProps,
|
|
emits: mentionDropdownEmits,
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const ns = useNamespace("mention");
|
|
const { t } = useLocale();
|
|
const hoveringIndex = ref(-1);
|
|
const scrollbarRef = ref();
|
|
const optionRefs = ref();
|
|
const dropdownRef = ref();
|
|
const optionkls = (item, index) => [
|
|
ns.be("dropdown", "item"),
|
|
ns.is("hovering", hoveringIndex.value === index),
|
|
ns.is("disabled", item.disabled || props.disabled)
|
|
];
|
|
const handleSelect = (item) => {
|
|
if (item.disabled || props.disabled)
|
|
return;
|
|
emit("select", item);
|
|
};
|
|
const handleMouseEnter = (index) => {
|
|
hoveringIndex.value = index;
|
|
};
|
|
const filteredAllDisabled = computed(() => props.disabled || props.options.every((item) => item.disabled));
|
|
const hoverOption = computed(() => props.options[hoveringIndex.value]);
|
|
const selectHoverOption = () => {
|
|
if (!hoverOption.value)
|
|
return;
|
|
emit("select", hoverOption.value);
|
|
};
|
|
const navigateOptions = (direction) => {
|
|
const { options } = props;
|
|
if (options.length === 0 || filteredAllDisabled.value)
|
|
return;
|
|
if (direction === "next") {
|
|
hoveringIndex.value++;
|
|
if (hoveringIndex.value === options.length) {
|
|
hoveringIndex.value = 0;
|
|
}
|
|
} else if (direction === "prev") {
|
|
hoveringIndex.value--;
|
|
if (hoveringIndex.value < 0) {
|
|
hoveringIndex.value = options.length - 1;
|
|
}
|
|
}
|
|
const option = options[hoveringIndex.value];
|
|
if (option.disabled) {
|
|
navigateOptions(direction);
|
|
return;
|
|
}
|
|
nextTick(() => scrollToOption(option));
|
|
};
|
|
const scrollToOption = (option) => {
|
|
var _a, _b, _c, _d;
|
|
const { options } = props;
|
|
const index = options.findIndex((item) => item.value === option.value);
|
|
const target = (_a = optionRefs.value) == null ? void 0 : _a[index];
|
|
if (target) {
|
|
const menu = (_c = (_b = dropdownRef.value) == null ? void 0 : _b.querySelector) == null ? void 0 : _c.call(_b, `.${ns.be("dropdown", "wrap")}`);
|
|
if (menu) {
|
|
scrollIntoView(menu, target);
|
|
}
|
|
}
|
|
(_d = scrollbarRef.value) == null ? void 0 : _d.handleScroll();
|
|
};
|
|
const resetHoveringIndex = () => {
|
|
if (filteredAllDisabled.value || props.options.length === 0) {
|
|
hoveringIndex.value = -1;
|
|
} else {
|
|
hoveringIndex.value = 0;
|
|
}
|
|
};
|
|
watch(() => props.options, resetHoveringIndex, {
|
|
immediate: true
|
|
});
|
|
expose({
|
|
hoveringIndex,
|
|
navigateOptions,
|
|
selectHoverOption,
|
|
hoverOption
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
ref_key: "dropdownRef",
|
|
ref: dropdownRef,
|
|
class: normalizeClass(unref(ns).b("dropdown"))
|
|
}, [
|
|
_ctx.$slots.header ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).be("dropdown", "header"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "header")
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
withDirectives(createVNode(unref(ElScrollbar), {
|
|
id: _ctx.contentId,
|
|
ref_key: "scrollbarRef",
|
|
ref: scrollbarRef,
|
|
tag: "ul",
|
|
"wrap-class": unref(ns).be("dropdown", "wrap"),
|
|
"view-class": unref(ns).be("dropdown", "list"),
|
|
role: "listbox",
|
|
"aria-label": _ctx.ariaLabel,
|
|
"aria-orientation": "vertical"
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (item, index) => {
|
|
return openBlock(), createElementBlock("li", {
|
|
id: `${_ctx.contentId}-${index}`,
|
|
ref_for: true,
|
|
ref_key: "optionRefs",
|
|
ref: optionRefs,
|
|
key: item.value,
|
|
class: normalizeClass(optionkls(item, index)),
|
|
role: "option",
|
|
"aria-disabled": item.disabled || _ctx.disabled || void 0,
|
|
"aria-selected": hoveringIndex.value === index,
|
|
onMouseenter: ($event) => handleMouseEnter(index),
|
|
onClick: withModifiers(($event) => handleSelect(item), ["stop"])
|
|
}, [
|
|
renderSlot(_ctx.$slots, "label", {
|
|
item,
|
|
index
|
|
}, () => {
|
|
var _a;
|
|
return [
|
|
createElementVNode("span", null, toDisplayString((_a = item.label) != null ? _a : item.value), 1)
|
|
];
|
|
})
|
|
], 42, ["id", "aria-disabled", "aria-selected", "onMouseenter", "onClick"]);
|
|
}), 128))
|
|
]),
|
|
_: 3
|
|
}, 8, ["id", "wrap-class", "view-class", "aria-label"]), [
|
|
[vShow, _ctx.options.length > 0 && !_ctx.loading]
|
|
]),
|
|
_ctx.loading ? (openBlock(), createElementBlock("div", {
|
|
key: 1,
|
|
class: normalizeClass(unref(ns).be("dropdown", "loading"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "loading", {}, () => [
|
|
createTextVNode(toDisplayString(unref(t)("el.mention.loading")), 1)
|
|
])
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
_ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
|
|
key: 2,
|
|
class: normalizeClass(unref(ns).be("dropdown", "footer"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "footer")
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var ElMentionDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__file", "mention-dropdown.vue"]]);
|
|
|
|
const __default__$2 = defineComponent({
|
|
name: "ElMention"
|
|
});
|
|
const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
...__default__$2,
|
|
props: mentionProps,
|
|
emits: mentionEmits,
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const passInputProps = computed(() => pick(props, Object.keys(inputProps)));
|
|
const ns = useNamespace("mention");
|
|
const disabled = useFormDisabled();
|
|
const contentId = useId();
|
|
const elInputRef = ref();
|
|
const tooltipRef = ref();
|
|
const dropdownRef = ref();
|
|
const visible = ref(false);
|
|
const cursorStyle = ref();
|
|
const mentionCtx = ref();
|
|
const computedPlacement = computed(() => props.showArrow ? props.placement : `${props.placement}-start`);
|
|
const computedFallbackPlacements = computed(() => props.showArrow ? ["bottom", "top"] : ["bottom-start", "top-start"]);
|
|
const filteredOptions = computed(() => {
|
|
const { filterOption, options } = props;
|
|
if (!mentionCtx.value || !filterOption)
|
|
return options;
|
|
return options.filter((option) => filterOption(mentionCtx.value.pattern, option));
|
|
});
|
|
const dropdownVisible = computed(() => {
|
|
return visible.value && (!!filteredOptions.value.length || props.loading);
|
|
});
|
|
const hoveringId = computed(() => {
|
|
var _a;
|
|
return `${contentId.value}-${(_a = dropdownRef.value) == null ? void 0 : _a.hoveringIndex}`;
|
|
});
|
|
const handleInputChange = (value) => {
|
|
emit("update:modelValue", value);
|
|
syncAfterCursorMove();
|
|
};
|
|
const handleInputKeyDown = (e) => {
|
|
var _a, _b, _c, _d;
|
|
if (!("key" in e))
|
|
return;
|
|
if ((_a = elInputRef.value) == null ? void 0 : _a.isComposing)
|
|
return;
|
|
if (["ArrowLeft", "ArrowRight"].includes(e.key)) {
|
|
syncAfterCursorMove();
|
|
} else if (["ArrowUp", "ArrowDown"].includes(e.key)) {
|
|
if (!visible.value)
|
|
return;
|
|
e.preventDefault();
|
|
const direction = e.key === "ArrowUp" ? "prev" : "next";
|
|
(_b = dropdownRef.value) == null ? void 0 : _b.navigateOptions(direction);
|
|
} else if (["Enter"].includes(e.key)) {
|
|
if (!visible.value)
|
|
return;
|
|
e.preventDefault();
|
|
if ((_c = dropdownRef.value) == null ? void 0 : _c.hoverOption) {
|
|
(_d = dropdownRef.value) == null ? void 0 : _d.selectHoverOption();
|
|
} else {
|
|
visible.value = false;
|
|
}
|
|
} else if (["Escape"].includes(e.key)) {
|
|
if (!visible.value)
|
|
return;
|
|
e.preventDefault();
|
|
visible.value = false;
|
|
} else if (["Backspace"].includes(e.key)) {
|
|
if (props.whole && mentionCtx.value) {
|
|
const { splitIndex, selectionEnd, pattern, prefixIndex, prefix } = mentionCtx.value;
|
|
const inputEl = getInputEl();
|
|
if (!inputEl)
|
|
return;
|
|
const inputValue = inputEl.value;
|
|
const matchOption = props.options.find((item) => item.value === pattern);
|
|
const isWhole = isFunction$1(props.checkIsWhole) ? props.checkIsWhole(pattern, prefix) : matchOption;
|
|
if (isWhole && splitIndex !== -1 && splitIndex + 1 === selectionEnd) {
|
|
e.preventDefault();
|
|
const newValue = inputValue.slice(0, prefixIndex) + inputValue.slice(splitIndex + 1);
|
|
emit(UPDATE_MODEL_EVENT, newValue);
|
|
const newSelectionEnd = prefixIndex;
|
|
nextTick(() => {
|
|
inputEl.selectionStart = newSelectionEnd;
|
|
inputEl.selectionEnd = newSelectionEnd;
|
|
syncDropdownVisible();
|
|
});
|
|
}
|
|
}
|
|
}
|
|
};
|
|
const { wrapperRef } = useFocusController(elInputRef, {
|
|
beforeFocus() {
|
|
return disabled.value;
|
|
},
|
|
afterFocus() {
|
|
syncAfterCursorMove();
|
|
},
|
|
beforeBlur(event) {
|
|
var _a;
|
|
return (_a = tooltipRef.value) == null ? void 0 : _a.isFocusInsideContent(event);
|
|
},
|
|
afterBlur() {
|
|
visible.value = false;
|
|
}
|
|
});
|
|
const handleInputMouseDown = () => {
|
|
syncAfterCursorMove();
|
|
};
|
|
const handleSelect = (item) => {
|
|
if (!mentionCtx.value)
|
|
return;
|
|
const inputEl = getInputEl();
|
|
if (!inputEl)
|
|
return;
|
|
const inputValue = inputEl.value;
|
|
const { split } = props;
|
|
const newEndPart = inputValue.slice(mentionCtx.value.end);
|
|
const alreadySeparated = newEndPart.startsWith(split);
|
|
const newMiddlePart = `${item.value}${alreadySeparated ? "" : split}`;
|
|
const newValue = inputValue.slice(0, mentionCtx.value.start) + newMiddlePart + newEndPart;
|
|
emit(UPDATE_MODEL_EVENT, newValue);
|
|
emit("select", item, mentionCtx.value.prefix);
|
|
const newSelectionEnd = mentionCtx.value.start + newMiddlePart.length + (alreadySeparated ? 1 : 0);
|
|
nextTick(() => {
|
|
inputEl.selectionStart = newSelectionEnd;
|
|
inputEl.selectionEnd = newSelectionEnd;
|
|
inputEl.focus();
|
|
syncDropdownVisible();
|
|
});
|
|
};
|
|
const getInputEl = () => {
|
|
var _a, _b;
|
|
return props.type === "textarea" ? (_a = elInputRef.value) == null ? void 0 : _a.textarea : (_b = elInputRef.value) == null ? void 0 : _b.input;
|
|
};
|
|
const syncAfterCursorMove = () => {
|
|
setTimeout(() => {
|
|
syncCursor();
|
|
syncDropdownVisible();
|
|
nextTick(() => {
|
|
var _a;
|
|
return (_a = tooltipRef.value) == null ? void 0 : _a.updatePopper();
|
|
});
|
|
}, 0);
|
|
};
|
|
const syncCursor = () => {
|
|
const inputEl = getInputEl();
|
|
if (!inputEl)
|
|
return;
|
|
const caretPosition = getCursorPosition(inputEl);
|
|
const inputRect = inputEl.getBoundingClientRect();
|
|
const elInputRect = elInputRef.value.$el.getBoundingClientRect();
|
|
cursorStyle.value = {
|
|
position: "absolute",
|
|
width: 0,
|
|
height: `${caretPosition.height}px`,
|
|
left: `${caretPosition.left + inputRect.left - elInputRect.left}px`,
|
|
top: `${caretPosition.top + inputRect.top - elInputRect.top}px`
|
|
};
|
|
};
|
|
const syncDropdownVisible = () => {
|
|
const inputEl = getInputEl();
|
|
if (document.activeElement !== inputEl) {
|
|
visible.value = false;
|
|
return;
|
|
}
|
|
const { prefix, split } = props;
|
|
mentionCtx.value = getMentionCtx(inputEl, prefix, split);
|
|
if (mentionCtx.value && mentionCtx.value.splitIndex === -1) {
|
|
visible.value = true;
|
|
emit("search", mentionCtx.value.pattern, mentionCtx.value.prefix);
|
|
return;
|
|
}
|
|
visible.value = false;
|
|
};
|
|
expose({
|
|
input: elInputRef,
|
|
tooltip: tooltipRef
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
ref_key: "wrapperRef",
|
|
ref: wrapperRef,
|
|
class: normalizeClass(unref(ns).b())
|
|
}, [
|
|
createVNode(unref(ElInput), mergeProps(mergeProps(unref(passInputProps), _ctx.$attrs), {
|
|
ref_key: "elInputRef",
|
|
ref: elInputRef,
|
|
"model-value": _ctx.modelValue,
|
|
disabled: unref(disabled),
|
|
role: unref(dropdownVisible) ? "combobox" : void 0,
|
|
"aria-activedescendant": unref(dropdownVisible) ? unref(hoveringId) || "" : void 0,
|
|
"aria-controls": unref(dropdownVisible) ? unref(contentId) : void 0,
|
|
"aria-expanded": unref(dropdownVisible) || void 0,
|
|
"aria-label": _ctx.ariaLabel,
|
|
"aria-autocomplete": unref(dropdownVisible) ? "none" : void 0,
|
|
"aria-haspopup": unref(dropdownVisible) ? "listbox" : void 0,
|
|
onInput: handleInputChange,
|
|
onKeydown: handleInputKeyDown,
|
|
onMousedown: handleInputMouseDown
|
|
}), createSlots({ _: 2 }, [
|
|
renderList(_ctx.$slots, (_, name) => {
|
|
return {
|
|
name,
|
|
fn: withCtx((slotProps) => [
|
|
renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps)))
|
|
])
|
|
};
|
|
})
|
|
]), 1040, ["model-value", "disabled", "role", "aria-activedescendant", "aria-controls", "aria-expanded", "aria-label", "aria-autocomplete", "aria-haspopup"]),
|
|
createVNode(unref(ElTooltip), {
|
|
ref_key: "tooltipRef",
|
|
ref: tooltipRef,
|
|
visible: unref(dropdownVisible),
|
|
"popper-class": [unref(ns).e("popper"), _ctx.popperClass],
|
|
"popper-options": _ctx.popperOptions,
|
|
placement: unref(computedPlacement),
|
|
"fallback-placements": unref(computedFallbackPlacements),
|
|
effect: "light",
|
|
pure: "",
|
|
offset: _ctx.offset,
|
|
"show-arrow": _ctx.showArrow
|
|
}, {
|
|
default: withCtx(() => [
|
|
createElementVNode("div", {
|
|
style: normalizeStyle(cursorStyle.value)
|
|
}, null, 4)
|
|
]),
|
|
content: withCtx(() => {
|
|
var _a;
|
|
return [
|
|
createVNode(ElMentionDropdown, {
|
|
ref_key: "dropdownRef",
|
|
ref: dropdownRef,
|
|
options: unref(filteredOptions),
|
|
disabled: unref(disabled),
|
|
loading: _ctx.loading,
|
|
"content-id": unref(contentId),
|
|
"aria-label": _ctx.ariaLabel,
|
|
onSelect: handleSelect,
|
|
onClick: withModifiers((_a = elInputRef.value) == null ? void 0 : _a.focus, ["stop"])
|
|
}, createSlots({ _: 2 }, [
|
|
renderList(_ctx.$slots, (_, name) => {
|
|
return {
|
|
name,
|
|
fn: withCtx((slotProps) => [
|
|
renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps)))
|
|
])
|
|
};
|
|
})
|
|
]), 1032, ["options", "disabled", "loading", "content-id", "aria-label", "onClick"])
|
|
];
|
|
}),
|
|
_: 3
|
|
}, 8, ["visible", "popper-class", "popper-options", "placement", "fallback-placements", "offset", "show-arrow"])
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var Mention = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__file", "mention.vue"]]);
|
|
|
|
const ElMention = withInstall(Mention);
|
|
|
|
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,
|
|
ElSubMenu,
|
|
ElPageHeader,
|
|
ElPagination,
|
|
ElPopconfirm,
|
|
ElPopover,
|
|
ElPopper,
|
|
ElProgress,
|
|
ElRadio,
|
|
ElRadioButton,
|
|
ElRadioGroup,
|
|
ElRate,
|
|
ElResult,
|
|
ElRow,
|
|
ElScrollbar,
|
|
ElSelect,
|
|
ElOption,
|
|
ElOptionGroup,
|
|
ElSelectV2,
|
|
ElSkeleton,
|
|
ElSkeletonItem,
|
|
ElSlider,
|
|
ElSpace,
|
|
ElStatistic,
|
|
ElCountdown,
|
|
ElSteps,
|
|
ElStep,
|
|
ElSwitch,
|
|
ElTable,
|
|
ElTableColumn,
|
|
ElTableV2,
|
|
ElTabs,
|
|
ElTabPane,
|
|
ElTag,
|
|
ElText,
|
|
ElTimePicker,
|
|
ElTimeSelect,
|
|
ElTimeline,
|
|
ElTimelineItem,
|
|
ElTooltip,
|
|
ElTooltipV2,
|
|
ElTransfer,
|
|
ElTree,
|
|
ElTreeSelect,
|
|
ElTreeV2,
|
|
ElUpload,
|
|
ElWatermark,
|
|
ElTour,
|
|
ElTourStep,
|
|
ElAnchor,
|
|
ElAnchorLink,
|
|
ElSegmented,
|
|
ElMention
|
|
];
|
|
|
|
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$1(cb)) {
|
|
throwError(SCOPE, "'v-infinite-scroll' binding value must be a function");
|
|
}
|
|
await 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) {
|
|
if (!el[SCOPE])
|
|
return;
|
|
const { container, onScroll } = el[SCOPE];
|
|
container == null ? void 0 : container.removeEventListener("scroll", onScroll);
|
|
destroyObserver(el);
|
|
},
|
|
async updated(el) {
|
|
if (!el[SCOPE]) {
|
|
await nextTick();
|
|
} else {
|
|
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 afterLeaveFlag = ref(false);
|
|
const data = reactive({
|
|
...options,
|
|
originalPosition: "",
|
|
originalOverflow: "",
|
|
visible: false
|
|
});
|
|
function setText(text) {
|
|
data.text = text;
|
|
}
|
|
function destroySelf() {
|
|
const target = data.parent;
|
|
const ns = vm.ns;
|
|
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 = 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 = defineComponent({
|
|
name: "ElLoading",
|
|
setup(_, { expose }) {
|
|
const { ns, zIndex } = useGlobalComponentSettings("loading");
|
|
expose({
|
|
ns,
|
|
zIndex
|
|
});
|
|
return () => {
|
|
const svg = data.spinner || data.svg;
|
|
const spinner = h$1("svg", {
|
|
class: "circular",
|
|
viewBox: data.svgViewBox ? data.svgViewBox : "0 0 50 50",
|
|
...svg ? { innerHTML: svg } : {}
|
|
}, [
|
|
h$1("circle", {
|
|
class: "path",
|
|
cx: "25",
|
|
cy: "25",
|
|
r: "20",
|
|
fill: "none"
|
|
})
|
|
]);
|
|
const spinnerText = data.text ? h$1("p", { class: ns.b("text") }, [data.text]) : void 0;
|
|
return h$1(Transition, {
|
|
name: ns.b("fade"),
|
|
onAfterLeave: handleAfterLeave
|
|
}, {
|
|
default: withCtx(() => [
|
|
withDirectives(createVNode("div", {
|
|
style: {
|
|
backgroundColor: data.background || ""
|
|
},
|
|
class: [
|
|
ns.b("mask"),
|
|
data.customClass,
|
|
data.fullscreen ? "is-fullscreen" : ""
|
|
]
|
|
}, [
|
|
h$1("div", {
|
|
class: ns.b("spinner")
|
|
}, [spinner, spinnerText])
|
|
]), [[vShow, data.visible]])
|
|
])
|
|
});
|
|
};
|
|
}
|
|
});
|
|
const loadingInstance = createApp(elLoadingComponent);
|
|
const vm = loadingInstance.mount(document.createElement("div"));
|
|
return {
|
|
...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);
|
|
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$1(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,
|
|
beforeClose: options.beforeClose,
|
|
closed: options.closed,
|
|
target
|
|
};
|
|
};
|
|
const addStyle = async (options, parent, instance) => {
|
|
const { nextZIndex } = instance.vm.zIndex || instance.vm._.exposed.zIndex;
|
|
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 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 = instance.vm.ns || instance.vm._.exposed.ns;
|
|
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$1(key) && (vm == null ? void 0 : vm[key]) || key;
|
|
if (data)
|
|
return 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 (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();
|
|
el[INSTANCE_KEY] = null;
|
|
}
|
|
};
|
|
|
|
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",
|
|
plain: false,
|
|
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),
|
|
default: messageDefaults.onClose
|
|
},
|
|
showClose: {
|
|
type: Boolean,
|
|
default: messageDefaults.showClose
|
|
},
|
|
type: {
|
|
type: String,
|
|
values: messageTypes,
|
|
default: messageDefaults.type
|
|
},
|
|
plain: {
|
|
type: Boolean,
|
|
default: messageDefaults.plain
|
|
},
|
|
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 = 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 getOffsetOrSpace = (id, offset) => {
|
|
const idx = instances.findIndex((instance) => instance.id === id);
|
|
return idx > 0 ? 16 : offset;
|
|
};
|
|
|
|
const __default__$1 = defineComponent({
|
|
name: "ElMessage"
|
|
});
|
|
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
...__default__$1,
|
|
props: messageProps,
|
|
emits: messageEmits,
|
|
setup(__props, { expose }) {
|
|
const props = __props;
|
|
const { Close } = TypeComponents;
|
|
const { ns, zIndex } = useGlobalComponentSettings("message");
|
|
const { currentZIndex, nextZIndex } = zIndex;
|
|
const messageRef = ref();
|
|
const visible = ref(false);
|
|
const height = ref(0);
|
|
let stopTimer = void 0;
|
|
const badgeType = computed(() => props.type ? props.type === "error" ? "danger" : props.type : "info");
|
|
const typeClass = computed(() => {
|
|
const type = props.type;
|
|
return { [ns.bm("icon", type)]: type && TypeComponentsMap[type] };
|
|
});
|
|
const iconComponent = computed(() => props.icon || TypeComponentsMap[props.type] || "");
|
|
const lastOffset = computed(() => getLastOffset(props.id));
|
|
const offset = computed(() => getOffsetOrSpace(props.id, props.offset) + lastOffset.value);
|
|
const bottom = computed(() => height.value + offset.value);
|
|
const customStyle = computed(() => ({
|
|
top: `${offset.value}px`,
|
|
zIndex: currentZIndex.value
|
|
}));
|
|
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();
|
|
}
|
|
}
|
|
onMounted(() => {
|
|
startTimer();
|
|
nextZIndex();
|
|
visible.value = true;
|
|
});
|
|
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 openBlock(), createBlock(Transition, {
|
|
name: unref(ns).b("fade"),
|
|
onBeforeLeave: _ctx.onClose,
|
|
onAfterLeave: ($event) => _ctx.$emit("destroy"),
|
|
persisted: ""
|
|
}, {
|
|
default: withCtx(() => [
|
|
withDirectives(createElementVNode("div", {
|
|
id: _ctx.id,
|
|
ref_key: "messageRef",
|
|
ref: messageRef,
|
|
class: normalizeClass([
|
|
unref(ns).b(),
|
|
{ [unref(ns).m(_ctx.type)]: _ctx.type },
|
|
unref(ns).is("center", _ctx.center),
|
|
unref(ns).is("closable", _ctx.showClose),
|
|
unref(ns).is("plain", _ctx.plain),
|
|
_ctx.customClass
|
|
]),
|
|
style: normalizeStyle(unref(customStyle)),
|
|
role: "alert",
|
|
onMouseenter: clearTimer,
|
|
onMouseleave: startTimer
|
|
}, [
|
|
_ctx.repeatNum > 1 ? (openBlock(), createBlock(unref(ElBadge), {
|
|
key: 0,
|
|
value: _ctx.repeatNum,
|
|
type: unref(badgeType),
|
|
class: normalizeClass(unref(ns).e("badge"))
|
|
}, null, 8, ["value", "type", "class"])) : createCommentVNode("v-if", true),
|
|
unref(iconComponent) ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 1,
|
|
class: normalizeClass([unref(ns).e("icon"), unref(typeClass)])
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(unref(iconComponent))))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : createCommentVNode("v-if", true),
|
|
renderSlot(_ctx.$slots, "default", {}, () => [
|
|
!_ctx.dangerouslyUseHTMLString ? (openBlock(), createElementBlock("p", {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).e("content"))
|
|
}, toDisplayString(_ctx.message), 3)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
createCommentVNode(" Caution here, message could've been compromised, never use user's input as message "),
|
|
createElementVNode("p", {
|
|
class: normalizeClass(unref(ns).e("content")),
|
|
innerHTML: _ctx.message
|
|
}, null, 10, ["innerHTML"])
|
|
], 2112))
|
|
]),
|
|
_ctx.showClose ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 2,
|
|
class: normalizeClass(unref(ns).e("closeBtn")),
|
|
onClick: withModifiers(close, ["stop"])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(Close))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class", "onClick"])) : createCommentVNode("v-if", true)
|
|
], 46, ["id"]), [
|
|
[vShow, visible.value]
|
|
])
|
|
]),
|
|
_: 3
|
|
}, 8, ["name", "onBeforeLeave", "onAfterLeave"]);
|
|
};
|
|
}
|
|
});
|
|
var MessageConstructor = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__file", "message.vue"]]);
|
|
|
|
let seed$1 = 1;
|
|
const normalizeOptions = (params) => {
|
|
const options = !params || isString$1(params) || isVNode(params) || isFunction$1(params) ? { message: params } : params;
|
|
const normalized = {
|
|
...messageDefaults,
|
|
...options
|
|
};
|
|
if (!normalized.appendTo) {
|
|
normalized.appendTo = document.body;
|
|
} else if (isString$1(normalized.appendTo)) {
|
|
let appendTo = document.querySelector(normalized.appendTo);
|
|
if (!isElement$1(appendTo)) {
|
|
appendTo = document.body;
|
|
}
|
|
normalized.appendTo = appendTo;
|
|
}
|
|
if (isBoolean(messageConfig.grouping) && !normalized.grouping) {
|
|
normalized.grouping = messageConfig.grouping;
|
|
}
|
|
if (isNumber(messageConfig.duration) && normalized.duration === 3e3) {
|
|
normalized.duration = messageConfig.duration;
|
|
}
|
|
if (isNumber(messageConfig.offset) && normalized.offset === 16) {
|
|
normalized.offset = messageConfig.offset;
|
|
}
|
|
if (isBoolean(messageConfig.showClose) && !normalized.showClose) {
|
|
normalized.showClose = messageConfig.showClose;
|
|
}
|
|
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 id = `message_${seed$1++}`;
|
|
const userOnClose = options.onClose;
|
|
const container = document.createElement("div");
|
|
const props = {
|
|
...options,
|
|
id,
|
|
onClose: () => {
|
|
userOnClose == null ? void 0 : userOnClose();
|
|
closeMessage(instance);
|
|
},
|
|
onDestroy: () => {
|
|
render(null, container);
|
|
}
|
|
};
|
|
const vnode = createVNode(MessageConstructor, props, isFunction$1(props.message) || isVNode(props.message) ? {
|
|
default: isFunction$1(props.message) ? props.message : () => props.message
|
|
} : null);
|
|
vnode.appContext = context || message._context;
|
|
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 };
|
|
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;
|
|
}
|
|
}
|
|
if (isNumber(messageConfig.max) && instances.length >= messageConfig.max) {
|
|
return { close: () => void 0 };
|
|
}
|
|
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 = 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,
|
|
overflow: Boolean,
|
|
roundButton: {
|
|
default: false,
|
|
type: Boolean
|
|
},
|
|
container: {
|
|
type: String,
|
|
default: "body"
|
|
},
|
|
boxType: {
|
|
type: String,
|
|
default: ""
|
|
}
|
|
},
|
|
emits: ["vanish", "action"],
|
|
setup(props, { emit }) {
|
|
const {
|
|
locale,
|
|
zIndex,
|
|
ns,
|
|
size: btnSize
|
|
} = useGlobalComponentSettings("message-box", computed(() => props.buttonSize));
|
|
const { t } = locale;
|
|
const { nextZIndex } = zIndex;
|
|
const visible = ref(false);
|
|
const state = 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,
|
|
confirmButtonLoadingIcon: markRaw(loading_default),
|
|
cancelButtonLoadingIcon: markRaw(loading_default),
|
|
confirmButtonDisabled: false,
|
|
editorErrorMessage: "",
|
|
validateError: false,
|
|
zIndex: nextZIndex()
|
|
});
|
|
const typeClass = computed(() => {
|
|
const type = state.type;
|
|
return { [ns.bm("icon", type)]: type && TypeComponentsMap[type] };
|
|
});
|
|
const contentId = useId();
|
|
const inputId = useId();
|
|
const iconComponent = computed(() => state.icon || TypeComponentsMap[state.type] || "");
|
|
const hasMessage = computed(() => !!state.message);
|
|
const rootRef = ref();
|
|
const headerRef = ref();
|
|
const focusStartRef = ref();
|
|
const inputRef = ref();
|
|
const confirmRef = ref();
|
|
const confirmButtonClasses = computed(() => state.confirmButtonClass);
|
|
watch(() => state.inputValue, async (val) => {
|
|
await nextTick();
|
|
if (props.boxType === "prompt" && val !== null) {
|
|
validate();
|
|
}
|
|
}, { immediate: true });
|
|
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) {
|
|
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 = computed(() => props.draggable);
|
|
const overflow = computed(() => props.overflow);
|
|
useDraggable(rootRef, headerRef, draggable, overflow);
|
|
onMounted(async () => {
|
|
await nextTick();
|
|
if (props.closeOnHashChange) {
|
|
window.addEventListener("hashchange", doClose);
|
|
}
|
|
});
|
|
onBeforeUnmount(() => {
|
|
if (props.closeOnHashChange) {
|
|
window.removeEventListener("hashchange", doClose);
|
|
}
|
|
});
|
|
function doClose() {
|
|
if (!visible.value)
|
|
return;
|
|
visible.value = false;
|
|
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);
|
|
}
|
|
return {
|
|
...toRefs(state),
|
|
ns,
|
|
overlayEvent,
|
|
visible,
|
|
hasMessage,
|
|
typeClass,
|
|
contentId,
|
|
inputId,
|
|
btnSize,
|
|
iconComponent,
|
|
confirmButtonClasses,
|
|
rootRef,
|
|
focusStartRef,
|
|
headerRef,
|
|
inputRef,
|
|
confirmRef,
|
|
doClose,
|
|
handleClose,
|
|
onCloseRequested,
|
|
handleWrapperClick,
|
|
handleInputEnter,
|
|
handleAction,
|
|
t
|
|
};
|
|
}
|
|
});
|
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
const _component_el_icon = resolveComponent("el-icon");
|
|
const _component_close = resolveComponent("close");
|
|
const _component_el_input = resolveComponent("el-input");
|
|
const _component_el_button = resolveComponent("el-button");
|
|
const _component_el_focus_trap = resolveComponent("el-focus-trap");
|
|
const _component_el_overlay = resolveComponent("el-overlay");
|
|
return openBlock(), createBlock(Transition, {
|
|
name: "fade-in-linear",
|
|
onAfterLeave: ($event) => _ctx.$emit("vanish"),
|
|
persisted: ""
|
|
}, {
|
|
default: withCtx(() => [
|
|
withDirectives(createVNode(_component_el_overlay, {
|
|
"z-index": _ctx.zIndex,
|
|
"overlay-class": [_ctx.ns.is("message-box"), _ctx.modalClass],
|
|
mask: _ctx.modal
|
|
}, {
|
|
default: withCtx(() => [
|
|
createElementVNode("div", {
|
|
role: "dialog",
|
|
"aria-label": _ctx.title,
|
|
"aria-modal": "true",
|
|
"aria-describedby": !_ctx.showInput ? _ctx.contentId : void 0,
|
|
class: normalizeClass(`${_ctx.ns.namespace.value}-overlay-message-box`),
|
|
onClick: _ctx.overlayEvent.onClick,
|
|
onMousedown: _ctx.overlayEvent.onMousedown,
|
|
onMouseup: _ctx.overlayEvent.onMouseup
|
|
}, [
|
|
createVNode(_component_el_focus_trap, {
|
|
loop: "",
|
|
trapped: _ctx.visible,
|
|
"focus-trap-el": _ctx.rootRef,
|
|
"focus-start-el": _ctx.focusStartRef,
|
|
onReleaseRequested: _ctx.onCloseRequested
|
|
}, {
|
|
default: withCtx(() => [
|
|
createElementVNode("div", {
|
|
ref: "rootRef",
|
|
class: normalizeClass([
|
|
_ctx.ns.b(),
|
|
_ctx.customClass,
|
|
_ctx.ns.is("draggable", _ctx.draggable),
|
|
{ [_ctx.ns.m("center")]: _ctx.center }
|
|
]),
|
|
style: normalizeStyle(_ctx.customStyle),
|
|
tabindex: "-1",
|
|
onClick: withModifiers(() => {
|
|
}, ["stop"])
|
|
}, [
|
|
_ctx.title !== null && _ctx.title !== void 0 ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
ref: "headerRef",
|
|
class: normalizeClass([_ctx.ns.e("header"), { "show-close": _ctx.showClose }])
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(_ctx.ns.e("title"))
|
|
}, [
|
|
_ctx.iconComponent && _ctx.center ? (openBlock(), createBlock(_component_el_icon, {
|
|
key: 0,
|
|
class: normalizeClass([_ctx.ns.e("status"), _ctx.typeClass])
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.iconComponent)))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : createCommentVNode("v-if", true),
|
|
createElementVNode("span", null, toDisplayString(_ctx.title), 1)
|
|
], 2),
|
|
_ctx.showClose ? (openBlock(), createElementBlock("button", {
|
|
key: 0,
|
|
type: "button",
|
|
class: normalizeClass(_ctx.ns.e("headerbtn")),
|
|
"aria-label": _ctx.t("el.messagebox.close"),
|
|
onClick: ($event) => _ctx.handleAction(_ctx.distinguishCancelAndClose ? "close" : "cancel"),
|
|
onKeydown: withKeys(withModifiers(($event) => _ctx.handleAction(_ctx.distinguishCancelAndClose ? "close" : "cancel"), ["prevent"]), ["enter"])
|
|
}, [
|
|
createVNode(_component_el_icon, {
|
|
class: normalizeClass(_ctx.ns.e("close"))
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_component_close)
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])
|
|
], 42, ["aria-label", "onClick", "onKeydown"])) : createCommentVNode("v-if", true)
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", {
|
|
id: _ctx.contentId,
|
|
class: normalizeClass(_ctx.ns.e("content"))
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(_ctx.ns.e("container"))
|
|
}, [
|
|
_ctx.iconComponent && !_ctx.center && _ctx.hasMessage ? (openBlock(), createBlock(_component_el_icon, {
|
|
key: 0,
|
|
class: normalizeClass([_ctx.ns.e("status"), _ctx.typeClass])
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.iconComponent)))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : createCommentVNode("v-if", true),
|
|
_ctx.hasMessage ? (openBlock(), createElementBlock("div", {
|
|
key: 1,
|
|
class: normalizeClass(_ctx.ns.e("message"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default", {}, () => [
|
|
!_ctx.dangerouslyUseHTMLString ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.showInput ? "label" : "p"), {
|
|
key: 0,
|
|
for: _ctx.showInput ? _ctx.inputId : void 0
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(!_ctx.dangerouslyUseHTMLString ? _ctx.message : ""), 1)
|
|
]),
|
|
_: 1
|
|
}, 8, ["for"])) : (openBlock(), createBlock(resolveDynamicComponent(_ctx.showInput ? "label" : "p"), {
|
|
key: 1,
|
|
for: _ctx.showInput ? _ctx.inputId : void 0,
|
|
innerHTML: _ctx.message
|
|
}, null, 8, ["for", "innerHTML"]))
|
|
])
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
], 2),
|
|
withDirectives(createElementVNode("div", {
|
|
class: normalizeClass(_ctx.ns.e("input"))
|
|
}, [
|
|
createVNode(_component_el_input, {
|
|
id: _ctx.inputId,
|
|
ref: "inputRef",
|
|
modelValue: _ctx.inputValue,
|
|
"onUpdate:modelValue": ($event) => _ctx.inputValue = $event,
|
|
type: _ctx.inputType,
|
|
placeholder: _ctx.inputPlaceholder,
|
|
"aria-invalid": _ctx.validateError,
|
|
class: normalizeClass({ invalid: _ctx.validateError }),
|
|
onKeydown: withKeys(_ctx.handleInputEnter, ["enter"])
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue", "type", "placeholder", "aria-invalid", "class", "onKeydown"]),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(_ctx.ns.e("errormsg")),
|
|
style: normalizeStyle({
|
|
visibility: !!_ctx.editorErrorMessage ? "visible" : "hidden"
|
|
})
|
|
}, toDisplayString(_ctx.editorErrorMessage), 7)
|
|
], 2), [
|
|
[vShow, _ctx.showInput]
|
|
])
|
|
], 10, ["id"]),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(_ctx.ns.e("btns"))
|
|
}, [
|
|
_ctx.showCancelButton ? (openBlock(), createBlock(_component_el_button, {
|
|
key: 0,
|
|
loading: _ctx.cancelButtonLoading,
|
|
"loading-icon": _ctx.cancelButtonLoadingIcon,
|
|
class: normalizeClass([_ctx.cancelButtonClass]),
|
|
round: _ctx.roundButton,
|
|
size: _ctx.btnSize,
|
|
onClick: ($event) => _ctx.handleAction("cancel"),
|
|
onKeydown: withKeys(withModifiers(($event) => _ctx.handleAction("cancel"), ["prevent"]), ["enter"])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(_ctx.cancelButtonText || _ctx.t("el.messagebox.cancel")), 1)
|
|
]),
|
|
_: 1
|
|
}, 8, ["loading", "loading-icon", "class", "round", "size", "onClick", "onKeydown"])) : createCommentVNode("v-if", true),
|
|
withDirectives(createVNode(_component_el_button, {
|
|
ref: "confirmRef",
|
|
type: "primary",
|
|
loading: _ctx.confirmButtonLoading,
|
|
"loading-icon": _ctx.confirmButtonLoadingIcon,
|
|
class: normalizeClass([_ctx.confirmButtonClasses]),
|
|
round: _ctx.roundButton,
|
|
disabled: _ctx.confirmButtonDisabled,
|
|
size: _ctx.btnSize,
|
|
onClick: ($event) => _ctx.handleAction("confirm"),
|
|
onKeydown: withKeys(withModifiers(($event) => _ctx.handleAction("confirm"), ["prevent"]), ["enter"])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(_ctx.confirmButtonText || _ctx.t("el.messagebox.confirm")), 1)
|
|
]),
|
|
_: 1
|
|
}, 8, ["loading", "loading-icon", "class", "round", "disabled", "size", "onClick", "onKeydown"]), [
|
|
[vShow, _ctx.showConfirmButton]
|
|
])
|
|
], 2)
|
|
], 14, ["onClick"])
|
|
]),
|
|
_: 3
|
|
}, 8, ["trapped", "focus-trap-el", "focus-start-el", "onReleaseRequested"])
|
|
], 42, ["aria-label", "aria-describedby", "onClick", "onMousedown", "onMouseup"])
|
|
]),
|
|
_: 3
|
|
}, 8, ["z-index", "overlay-class", "mask"]), [
|
|
[vShow, _ctx.visible]
|
|
])
|
|
]),
|
|
_: 3
|
|
}, 8, ["onAfterLeave"]);
|
|
}
|
|
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$1(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 = createVNode(MessageBoxConstructor, props, isFunction$1(props.message) || isVNode(props.message) ? {
|
|
default: isFunction$1(props.message) ? props.message : () => props.message
|
|
} : null);
|
|
vnode.appContext = appContext;
|
|
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 = () => {
|
|
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$1(options) || 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: Boolean,
|
|
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: Number
|
|
});
|
|
const notificationEmits = {
|
|
destroy: () => true
|
|
};
|
|
|
|
const __default__ = defineComponent({
|
|
name: "ElNotification"
|
|
});
|
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
...__default__,
|
|
props: notificationProps,
|
|
emits: notificationEmits,
|
|
setup(__props, { expose }) {
|
|
const props = __props;
|
|
const { ns, zIndex } = useGlobalComponentSettings("notification");
|
|
const { nextZIndex, currentZIndex } = zIndex;
|
|
const { Close } = CloseComponents;
|
|
const visible = ref(false);
|
|
let timer = void 0;
|
|
const typeClass = computed(() => {
|
|
const type = props.type;
|
|
return type && TypeComponentsMap[props.type] ? ns.m(type) : "";
|
|
});
|
|
const iconComponent = computed(() => {
|
|
if (!props.type)
|
|
return props.icon;
|
|
return TypeComponentsMap[props.type] || props.icon;
|
|
});
|
|
const horizontalClass = computed(() => props.position.endsWith("right") ? "right" : "left");
|
|
const verticalProperty = computed(() => props.position.startsWith("top") ? "top" : "bottom");
|
|
const positionStyle = computed(() => {
|
|
var _a;
|
|
return {
|
|
[verticalProperty.value]: `${props.offset}px`,
|
|
zIndex: (_a = props.zIndex) != null ? _a : currentZIndex.value
|
|
};
|
|
});
|
|
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();
|
|
}
|
|
}
|
|
onMounted(() => {
|
|
startTimer();
|
|
nextZIndex();
|
|
visible.value = true;
|
|
});
|
|
useEventListener(document, "keydown", onKeydown);
|
|
expose({
|
|
visible,
|
|
close
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createBlock(Transition, {
|
|
name: unref(ns).b("fade"),
|
|
onBeforeLeave: _ctx.onClose,
|
|
onAfterLeave: ($event) => _ctx.$emit("destroy"),
|
|
persisted: ""
|
|
}, {
|
|
default: withCtx(() => [
|
|
withDirectives(createElementVNode("div", {
|
|
id: _ctx.id,
|
|
class: normalizeClass([unref(ns).b(), _ctx.customClass, unref(horizontalClass)]),
|
|
style: normalizeStyle(unref(positionStyle)),
|
|
role: "alert",
|
|
onMouseenter: clearTimer,
|
|
onMouseleave: startTimer,
|
|
onClick: _ctx.onClick
|
|
}, [
|
|
unref(iconComponent) ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 0,
|
|
class: normalizeClass([unref(ns).e("icon"), unref(typeClass)])
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(unref(iconComponent))))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("group"))
|
|
}, [
|
|
createElementVNode("h2", {
|
|
class: normalizeClass(unref(ns).e("title")),
|
|
textContent: toDisplayString(_ctx.title)
|
|
}, null, 10, ["textContent"]),
|
|
withDirectives(createElementVNode("div", {
|
|
class: normalizeClass(unref(ns).e("content")),
|
|
style: normalizeStyle(!!_ctx.title ? void 0 : { margin: 0 })
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default", {}, () => [
|
|
!_ctx.dangerouslyUseHTMLString ? (openBlock(), createElementBlock("p", { key: 0 }, toDisplayString(_ctx.message), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
createCommentVNode(" Caution here, message could've been compromised, never use user's input as message "),
|
|
createElementVNode("p", { innerHTML: _ctx.message }, null, 8, ["innerHTML"])
|
|
], 2112))
|
|
])
|
|
], 6), [
|
|
[vShow, _ctx.message]
|
|
]),
|
|
_ctx.showClose ? (openBlock(), createBlock(unref(ElIcon), {
|
|
key: 0,
|
|
class: normalizeClass(unref(ns).e("closeBtn")),
|
|
onClick: withModifiers(close, ["stop"])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(Close))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class", "onClick"])) : createCommentVNode("v-if", true)
|
|
], 2)
|
|
], 46, ["id", "onClick"]), [
|
|
[vShow, visible.value]
|
|
])
|
|
]),
|
|
_: 3
|
|
}, 8, ["name", "onBeforeLeave", "onAfterLeave"]);
|
|
};
|
|
}
|
|
});
|
|
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" || 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 id = `notification_${seed++}`;
|
|
const userOnClose = options.onClose;
|
|
const props = {
|
|
...options,
|
|
offset: verticalOffset,
|
|
id,
|
|
onClose: () => {
|
|
close(id, position, userOnClose);
|
|
}
|
|
};
|
|
let appendTo = document.body;
|
|
if (isElement$1(options.appendTo)) {
|
|
appendTo = options.appendTo;
|
|
} else if (isString$1(options.appendTo)) {
|
|
appendTo = document.querySelector(options.appendTo);
|
|
}
|
|
if (!isElement$1(appendTo)) {
|
|
appendTo = document.body;
|
|
}
|
|
const container = document.createElement("div");
|
|
const vm = createVNode(NotificationConstructor, props, isVNode(props.message) ? {
|
|
default: () => props.message
|
|
} : null);
|
|
vm.appContext = context != null ? context : notify._context;
|
|
vm.props.onDestroy = () => {
|
|
render(null, container);
|
|
};
|
|
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" || 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;
|
|
|
|
export { BAR_MAP, CAROUSEL_ITEM_NAME, CASCADER_PANEL_INJECTION_KEY, CHANGE_EVENT, ClickOutside, CommonPicker, CommonProps, DEFAULT_EMPTY_VALUES, DEFAULT_FORMATS_DATE, DEFAULT_FORMATS_DATEPICKER, DEFAULT_FORMATS_TIME, DEFAULT_VALUE_ON_CLEAR, COLLECTION_INJECTION_KEY as DROPDOWN_COLLECTION_INJECTION_KEY, COLLECTION_ITEM_INJECTION_KEY as DROPDOWN_COLLECTION_ITEM_INJECTION_KEY, DROPDOWN_INJECTION_KEY, DefaultProps, DynamicSizeGrid$1 as DynamicSizeGrid, DynamicSizeList$1 as DynamicSizeList, EVENT_CODE, Effect, ElAffix, ElAlert, ElAnchor, ElAnchorLink, ElAside, ElAutoResizer, ElAutocomplete, ElAvatar, ElBacktop, ElBadge, ElBreadcrumb, ElBreadcrumbItem, ElButton, ElButtonGroup$1 as ElButtonGroup, ElCalendar, ElCard, ElCarousel, ElCarouselItem, ElCascader, ElCascaderPanel, ElCheckTag, ElCheckbox, ElCheckboxButton, ElCheckboxGroup$1 as ElCheckboxGroup, ElCol, ElCollapse, ElCollapseItem, ElCollapseTransition, ElCollection, ElCollectionItem, ElColorPicker, ElConfigProvider, ElContainer, ElCountdown, ElDatePicker, ElDescriptions, ElDescriptionsItem, ElDialog, ElDivider, ElDrawer, ElDropdown, ElDropdownItem, ElDropdownMenu, ElEmpty, ElFooter, ElForm, ElFormItem, ElHeader, ElIcon, ElImage, ElImageViewer, ElInfiniteScroll, ElInput, ElInputNumber, ElLink, ElLoading, vLoading as ElLoadingDirective, Loading as ElLoadingService, ElMain, ElMention, ElMenu, ElMenuItem, ElMenuItemGroup, ElMessage, ElMessageBox, ElNotification, ElOption, ElOptionGroup, ElOverlay, ElPageHeader, ElPagination, ElPopconfirm, ElPopover, ElPopoverDirective, ElPopper, ElPopperArrow, ElPopperContent, ElPopperTrigger, ElProgress, ElRadio, ElRadioButton, ElRadioGroup, ElRate, ElResult, ElRow, ElScrollbar, ElSegmented, ElSelect, ElSelectV2, ElSkeleton, ElSkeletonItem, ElSlider, ElSpace, ElStatistic, ElStep, ElSteps, ElSubMenu, ElSwitch, ElTabPane, ElTable, ElTableColumn, ElTableV2, ElTabs, ElTag, ElText, ElTimePicker, ElTimeSelect, ElTimeline, ElTimelineItem, ElTooltip, ElTour, ElTourStep, ElTransfer, ElTree, ElTreeSelect, ElTreeV2, ElUpload, ElWatermark, FIRST_KEYS, FIRST_LAST_KEYS, FORWARD_REF_INJECTION_KEY, FixedSizeGrid$1 as FixedSizeGrid, FixedSizeList$1 as FixedSizeList, GAP, ID_INJECTION_KEY, INPUT_EVENT, INSTALLED_KEY, IconComponentMap, IconMap, LAST_KEYS, LEFT_CHECK_CHANGE_EVENT, Mousewheel, POPPER_CONTENT_INJECTION_KEY, POPPER_INJECTION_KEY, RIGHT_CHECK_CHANGE_EVENT, ROOT_PICKER_INJECTION_KEY, RowAlign, RowJustify, SCOPE$3 as SCOPE, SIZE_INJECTION_KEY, TOOLTIP_INJECTION_KEY, TableV2$1 as TableV2, Alignment as TableV2Alignment, FixedDir as TableV2FixedDir, placeholderSign as TableV2Placeholder, SortOrder as TableV2SortOrder, TimePickPanel, TrapFocus, UPDATE_MODEL_EVENT, WEEK_DAYS, ZINDEX_INJECTION_KEY, affixEmits, affixProps, alertEffects, alertEmits, alertProps, anchorEmits, anchorProps, ariaProps, arrowMiddleware, autoResizerProps, autocompleteEmits, autocompleteProps, avatarEmits, avatarProps, backtopEmits, backtopProps, badgeProps, breadcrumbItemProps, breadcrumbKey, breadcrumbProps, buildLocaleContext, buildTimeList, buildTranslator, buttonEmits, buttonGroupContextKey, buttonNativeTypes, buttonProps, buttonTypes, calendarEmits, calendarProps, cardProps, carouselContextKey, carouselEmits, carouselItemProps, carouselProps, cascaderEmits, cascaderProps, checkTagEmits, checkTagProps, checkboxEmits, checkboxGroupContextKey, checkboxGroupEmits, checkboxGroupProps, checkboxProps, colProps, collapseContextKey, collapseEmits, collapseItemProps, collapseProps, colorPickerContextKey, colorPickerEmits, colorPickerProps, componentSizeMap, componentSizes, configProviderContextKey, configProviderProps, countdownEmits, countdownProps, createModelToggleComposable, dateEquals, datePickTypes, datePickerProps, dayjs, installer as default, defaultInitialZIndex, defaultNamespace, descriptionItemProps, descriptionProps, dialogEmits, dialogInjectionKey, dialogProps, dividerProps, drawerEmits, drawerProps, dropdownItemProps, dropdownMenuProps, dropdownProps, elPaginationKey, emitChangeFn, emptyProps, emptyValuesContextKey, extractDateFormat, extractTimeFormat, formContextKey, formEmits, formItemContextKey, formItemProps, formItemValidateStates, formMetaProps, formProps, formatter, genFileId, getPositionDataWithUnit, iconProps, imageEmits, imageProps, imageViewerEmits, imageViewerProps, inputEmits, inputNumberEmits, inputNumberProps, inputProps, install, linkEmits, linkProps, localeContextKey, makeInstaller, makeList, mentionEmits, mentionProps, menuEmits, menuItemEmits, menuItemGroupProps, menuItemProps, menuProps, messageConfig, messageDefaults, messageEmits, messageProps, messageTypes, namespaceContextKey, notificationEmits, notificationProps, notificationTypes, overlayEmits, overlayProps, pageHeaderEmits, pageHeaderProps, paginationEmits, paginationProps, parseDate, popconfirmEmits, popconfirmProps, popoverEmits, popoverProps, popperArrowProps, popperContentEmits, popperContentProps, popperCoreConfigProps, popperProps, popperTriggerProps, progressProps, provideGlobalConfig, radioButtonProps, radioEmits, radioGroupEmits, radioGroupKey, radioGroupProps, radioProps, radioPropsBase, rangeArr, rateEmits, rateProps, renderThumbStyle$1 as renderThumbStyle, resultProps, roleTypes, rowContextKey, rowProps, scrollbarContextKey, scrollbarEmits, scrollbarProps, segmentedEmits, segmentedProps, selectGroupKey, selectKey, selectV2InjectionKey, skeletonItemProps, skeletonProps, sliderContextKey, sliderEmits, sliderProps, spaceItemProps, spaceProps, statisticProps, stepProps, stepsEmits, stepsProps, subMenuProps, switchEmits, switchProps, tabBarProps, tabNavEmits, tabNavProps, tabPaneProps, tableV2Props, tableV2RowProps, tabsEmits, tabsProps, tabsRootContextKey, tagEmits, tagProps, textProps, thumbProps, timePickerDefaultProps, timeSelectProps, timeUnits$1 as timeUnits, timelineItemProps, tooltipEmits, tourContentEmits, tourContentProps, tourEmits, tourPlacements, tourProps, tourStepEmits, tourStepProps, tourStrategies, transferCheckedChangeFn, transferEmits, transferProps, translate, uploadBaseProps, uploadContentProps, uploadContextKey, uploadDraggerEmits, uploadDraggerProps, uploadListEmits, uploadListProps, uploadListTypes, uploadProps, useAriaProps, useAttrs, useCascaderConfig, useComposition, useCursor, useDelayedRender, useDelayedToggle, useDelayedToggleProps, useDeprecated, useDialog, useDisabled, useDraggable, useEmptyValues, useEmptyValuesProps, useEscapeKeydown, useFloating$1 as useFloating, useFloatingProps, useFocus, useFocusController, useFormDisabled, useFormItem, useFormItemInputId, useFormSize, useForwardRef, useForwardRefDirective, useGetDerivedNamespace, useGlobalComponentSettings, useGlobalConfig, useGlobalSize, useId, useIdInjection, useLocale, useLockscreen, useModal, useModelToggle, useModelToggleEmits, useModelToggleProps, useNamespace, useOrderedChildren, usePopper, usePopperArrowProps, usePopperContainer, usePopperContainerId, usePopperContentEmits, usePopperContentProps, usePopperCoreConfigProps, usePopperProps, usePopperTriggerProps, usePreventGlobal, useProp, useSameTarget, useSize, useSizeProp, useSizeProps, useSpace, useTeleport, useThrottleRender, useTimeout, useTooltipContentProps, useTooltipModelToggle, useTooltipModelToggleEmits, useTooltipModelToggleProps, useTooltipProps, useTooltipTriggerProps, useTransitionFallthrough, useTransitionFallthroughEmits, useZIndex, vLoading, vRepeatClick, valueEquals, version, virtualizedGridProps, virtualizedListProps, virtualizedProps, virtualizedScrollbarProps, watermarkProps, zIndexContextKey };
|