mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-03 14:20:50 +08:00
2865 lines
96 KiB
JavaScript
2865 lines
96 KiB
JavaScript
import { J as on, aS as off, bA as getNative, bB as root, bC as overArg, bD as isPrototype, bE as isArrayLike, bF as arrayLikeKeys, bG as isArray, bH as isSymbol, bI as MapCache, bJ as toString, bK as toSource, bL as Map$1, bM as baseGetTag, bN as Symbol$1, bO as eq, bP as Uint8Array, bQ as isBuffer, bR as Stack, bS as isTypedArray, bT as isObjectLike, bU as isObject, bV as isLength, bW as isIndex, bX as isArguments, bY as identity, bZ as baseFor, b_ as arrayMap, bk as replaceable, l as h, d as defineComponent, m as c, p as cB, V as cNotM, Y as cE, W as cM, b$ as cCB, x as useConfig, q as useTheme, c0 as popoverLight, r as ref, as as inject, a8 as watchEffect, G as computed, aT as clickoutside, a6 as vShow, ap as useThemeClass, a as onBeforeUnmount, E as watch, A as toRef, c1 as getPreciseEventTarget, $ as provide, ak as Transition, aY as popoverBodyInjectionKey, aX as drawerBodyInjectionKey, aZ as modalBodyInjectionKey, bu as isSlotEmpty, aV as FocusTrap, ax as mergeProps, w as withDirectives, I as resolveWrappedSlot, a3 as Fragment, az as XScrollbar, aR as isMounted, C as useMergedState, D as useMemo, c2 as useCompitable, c3 as getFirstSlotVNode, c4 as cloneVNode, c5 as Text, b4 as zindexable, bf as keep, L as call, c6 as isBrowser, c7 as tooltipLight, aL as createInjectionKey, a$ as fadeInTransition, aM as fadeInScaleUpTransition, c8 as imageLight, N as NBaseIcon, b1 as LazyTeleport, a2 as normalizeStyle, o as onMounted, K as resolveSlot } from "./index-DKaFsuse.js";
|
||
import { d as useAdjustedTo, e as VFollower, V as VTarget, B as Binder, u as useLocale, b as beforeNextFrameOnce } from "./use-locale-DLWAOXez.js";
|
||
const ctxKey = "@@mmoContext";
|
||
const mousemoveoutside = {
|
||
mounted(el, { value }) {
|
||
el[ctxKey] = {
|
||
handler: void 0
|
||
};
|
||
if (typeof value === "function") {
|
||
el[ctxKey].handler = value;
|
||
on("mousemoveoutside", el, value);
|
||
}
|
||
},
|
||
updated(el, { value }) {
|
||
const ctx = el[ctxKey];
|
||
if (typeof value === "function") {
|
||
if (ctx.handler) {
|
||
if (ctx.handler !== value) {
|
||
off("mousemoveoutside", el, ctx.handler);
|
||
ctx.handler = value;
|
||
on("mousemoveoutside", el, value);
|
||
}
|
||
} else {
|
||
el[ctxKey].handler = value;
|
||
on("mousemoveoutside", el, value);
|
||
}
|
||
} else {
|
||
if (ctx.handler) {
|
||
off("mousemoveoutside", el, ctx.handler);
|
||
ctx.handler = void 0;
|
||
}
|
||
}
|
||
},
|
||
unmounted(el) {
|
||
const { handler } = el[ctxKey];
|
||
if (handler) {
|
||
off("mousemoveoutside", el, handler);
|
||
}
|
||
el[ctxKey].handler = void 0;
|
||
}
|
||
};
|
||
const pureNumberRegex = /^(\d|\.)+$/;
|
||
const numberRegex = /(\d|\.)+/;
|
||
function formatLength(length, {
|
||
c: c2 = 1,
|
||
offset = 0,
|
||
attachPx = true
|
||
} = {}) {
|
||
if (typeof length === "number") {
|
||
const result = (length + offset) * c2;
|
||
if (result === 0) return "0";
|
||
return `${result}px`;
|
||
} else if (typeof length === "string") {
|
||
if (pureNumberRegex.test(length)) {
|
||
const result = (Number(length) + offset) * c2;
|
||
if (attachPx) {
|
||
if (result === 0) return "0";
|
||
return `${result}px`;
|
||
} else {
|
||
return `${result}`;
|
||
}
|
||
} else {
|
||
const result = numberRegex.exec(length);
|
||
if (!result) return length;
|
||
return length.replace(numberRegex, String((Number(result[0]) + offset) * c2));
|
||
}
|
||
}
|
||
return length;
|
||
}
|
||
function download(url, name) {
|
||
if (!url) return;
|
||
const a = document.createElement("a");
|
||
a.href = url;
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
document.body.removeChild(a);
|
||
}
|
||
let _isJsdom;
|
||
function isJsdom() {
|
||
if (_isJsdom === void 0) {
|
||
_isJsdom = navigator.userAgent.includes("Node.js") || navigator.userAgent.includes("jsdom");
|
||
}
|
||
return _isJsdom;
|
||
}
|
||
var WeakMap$1 = getNative(root, "WeakMap");
|
||
var nativeKeys = overArg(Object.keys, Object);
|
||
var objectProto$3 = Object.prototype;
|
||
var hasOwnProperty$2 = objectProto$3.hasOwnProperty;
|
||
function baseKeys(object) {
|
||
if (!isPrototype(object)) {
|
||
return nativeKeys(object);
|
||
}
|
||
var result = [];
|
||
for (var key in Object(object)) {
|
||
if (hasOwnProperty$2.call(object, key) && key != "constructor") {
|
||
result.push(key);
|
||
}
|
||
}
|
||
return result;
|
||
}
|
||
function keys(object) {
|
||
return isArrayLike(object) ? arrayLikeKeys(object) : baseKeys(object);
|
||
}
|
||
var reIsDeepProp = /\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/, 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 FUNC_ERROR_TEXT = "Expected a function";
|
||
function memoize(func, resolver) {
|
||
if (typeof func != "function" || resolver != null && typeof resolver != "function") {
|
||
throw new TypeError(FUNC_ERROR_TEXT);
|
||
}
|
||
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 castPath(value, object) {
|
||
if (isArray(value)) {
|
||
return value;
|
||
}
|
||
return isKey(value, object) ? [value] : stringToPath(toString(value));
|
||
}
|
||
var INFINITY = 1 / 0;
|
||
function toKey(value) {
|
||
if (typeof value == "string" || isSymbol(value)) {
|
||
return value;
|
||
}
|
||
var result = value + "";
|
||
return result == "0" && 1 / value == -INFINITY ? "-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 arrayPush(array, values) {
|
||
var index = -1, length = values.length, offset = array.length;
|
||
while (++index < length) {
|
||
array[offset + index] = values[index];
|
||
}
|
||
return array;
|
||
}
|
||
function arrayReduce(array, iteratee, accumulator, initAccum) {
|
||
var index = -1, length = array == null ? 0 : array.length;
|
||
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 = {
|
||
// Latin-1 Supplement block.
|
||
"À": "A",
|
||
"Á": "A",
|
||
"Â": "A",
|
||
"Ã": "A",
|
||
"Ä": "A",
|
||
"Å": "A",
|
||
"à": "a",
|
||
"á": "a",
|
||
"â": "a",
|
||
"ã": "a",
|
||
"ä": "a",
|
||
"å": "a",
|
||
"Ç": "C",
|
||
"ç": "c",
|
||
"Ð": "D",
|
||
"ð": "d",
|
||
"È": "E",
|
||
"É": "E",
|
||
"Ê": "E",
|
||
"Ë": "E",
|
||
"è": "e",
|
||
"é": "e",
|
||
"ê": "e",
|
||
"ë": "e",
|
||
"Ì": "I",
|
||
"Í": "I",
|
||
"Î": "I",
|
||
"Ï": "I",
|
||
"ì": "i",
|
||
"í": "i",
|
||
"î": "i",
|
||
"ï": "i",
|
||
"Ñ": "N",
|
||
"ñ": "n",
|
||
"Ò": "O",
|
||
"Ó": "O",
|
||
"Ô": "O",
|
||
"Õ": "O",
|
||
"Ö": "O",
|
||
"Ø": "O",
|
||
"ò": "o",
|
||
"ó": "o",
|
||
"ô": "o",
|
||
"õ": "o",
|
||
"ö": "o",
|
||
"ø": "o",
|
||
"Ù": "U",
|
||
"Ú": "U",
|
||
"Û": "U",
|
||
"Ü": "U",
|
||
"ù": "u",
|
||
"ú": "u",
|
||
"û": "u",
|
||
"ü": "u",
|
||
"Ý": "Y",
|
||
"ý": "y",
|
||
"ÿ": "y",
|
||
"Æ": "Ae",
|
||
"æ": "ae",
|
||
"Þ": "Th",
|
||
"þ": "th",
|
||
"ß": "ss",
|
||
// Latin Extended-A block.
|
||
"Ā": "A",
|
||
"Ă": "A",
|
||
"Ą": "A",
|
||
"ā": "a",
|
||
"ă": "a",
|
||
"ą": "a",
|
||
"Ć": "C",
|
||
"Ĉ": "C",
|
||
"Ċ": "C",
|
||
"Č": "C",
|
||
"ć": "c",
|
||
"ĉ": "c",
|
||
"ċ": "c",
|
||
"č": "c",
|
||
"Ď": "D",
|
||
"Đ": "D",
|
||
"ď": "d",
|
||
"đ": "d",
|
||
"Ē": "E",
|
||
"Ĕ": "E",
|
||
"Ė": "E",
|
||
"Ę": "E",
|
||
"Ě": "E",
|
||
"ē": "e",
|
||
"ĕ": "e",
|
||
"ė": "e",
|
||
"ę": "e",
|
||
"ě": "e",
|
||
"Ĝ": "G",
|
||
"Ğ": "G",
|
||
"Ġ": "G",
|
||
"Ģ": "G",
|
||
"ĝ": "g",
|
||
"ğ": "g",
|
||
"ġ": "g",
|
||
"ģ": "g",
|
||
"Ĥ": "H",
|
||
"Ħ": "H",
|
||
"ĥ": "h",
|
||
"ħ": "h",
|
||
"Ĩ": "I",
|
||
"Ī": "I",
|
||
"Ĭ": "I",
|
||
"Į": "I",
|
||
"İ": "I",
|
||
"ĩ": "i",
|
||
"ī": "i",
|
||
"ĭ": "i",
|
||
"į": "i",
|
||
"ı": "i",
|
||
"Ĵ": "J",
|
||
"ĵ": "j",
|
||
"Ķ": "K",
|
||
"ķ": "k",
|
||
"ĸ": "k",
|
||
"Ĺ": "L",
|
||
"Ļ": "L",
|
||
"Ľ": "L",
|
||
"Ŀ": "L",
|
||
"Ł": "L",
|
||
"ĺ": "l",
|
||
"ļ": "l",
|
||
"ľ": "l",
|
||
"ŀ": "l",
|
||
"ł": "l",
|
||
"Ń": "N",
|
||
"Ņ": "N",
|
||
"Ň": "N",
|
||
"Ŋ": "N",
|
||
"ń": "n",
|
||
"ņ": "n",
|
||
"ň": "n",
|
||
"ŋ": "n",
|
||
"Ō": "O",
|
||
"Ŏ": "O",
|
||
"Ő": "O",
|
||
"ō": "o",
|
||
"ŏ": "o",
|
||
"ő": "o",
|
||
"Ŕ": "R",
|
||
"Ŗ": "R",
|
||
"Ř": "R",
|
||
"ŕ": "r",
|
||
"ŗ": "r",
|
||
"ř": "r",
|
||
"Ś": "S",
|
||
"Ŝ": "S",
|
||
"Ş": "S",
|
||
"Š": "S",
|
||
"ś": "s",
|
||
"ŝ": "s",
|
||
"ş": "s",
|
||
"š": "s",
|
||
"Ţ": "T",
|
||
"Ť": "T",
|
||
"Ŧ": "T",
|
||
"ţ": "t",
|
||
"ť": "t",
|
||
"ŧ": "t",
|
||
"Ũ": "U",
|
||
"Ū": "U",
|
||
"Ŭ": "U",
|
||
"Ů": "U",
|
||
"Ű": "U",
|
||
"Ų": "U",
|
||
"ũ": "u",
|
||
"ū": "u",
|
||
"ŭ": "u",
|
||
"ů": "u",
|
||
"ű": "u",
|
||
"ų": "u",
|
||
"Ŵ": "W",
|
||
"ŵ": "w",
|
||
"Ŷ": "Y",
|
||
"ŷ": "y",
|
||
"Ÿ": "Y",
|
||
"Ź": "Z",
|
||
"Ż": "Z",
|
||
"Ž": "Z",
|
||
"ź": "z",
|
||
"ż": "z",
|
||
"ž": "z",
|
||
"IJ": "IJ",
|
||
"ij": "ij",
|
||
"Œ": "Oe",
|
||
"œ": "oe",
|
||
"ʼn": "'n",
|
||
"ſ": "s"
|
||
};
|
||
var deburrLetter = basePropertyOf(deburredLetters);
|
||
var reLatin = /[\xc0-\xd6\xd8-\xf6\xf8-\xff\u0100-\u017f]/g;
|
||
var rsComboMarksRange$1 = "\\u0300-\\u036f", reComboHalfMarksRange$1 = "\\ufe20-\\ufe2f", rsComboSymbolsRange$1 = "\\u20d0-\\u20ff", rsComboRange$1 = rsComboMarksRange$1 + reComboHalfMarksRange$1 + rsComboSymbolsRange$1;
|
||
var rsCombo$1 = "[" + rsComboRange$1 + "]";
|
||
var reComboMark = RegExp(rsCombo$1, "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 = "\\ud800-\\udfff", rsComboMarksRange = "\\u0300-\\u036f", reComboHalfMarksRange = "\\ufe20-\\ufe2f", rsComboSymbolsRange = "\\u20d0-\\u20ff", rsComboRange = rsComboMarksRange + reComboHalfMarksRange + rsComboSymbolsRange, rsDingbatRange = "\\u2700-\\u27bf", rsLowerRange = "a-z\\xdf-\\xf6\\xf8-\\xff", rsMathOpRange = "\\xac\\xb1\\xd7\\xf7", rsNonCharRange = "\\x00-\\x2f\\x3a-\\x40\\x5b-\\x60\\x7b-\\xbf", rsPunctuationRange = "\\u2000-\\u206f", 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", rsUpperRange = "A-Z\\xc0-\\xd6\\xd8-\\xde", rsVarRange = "\\ufe0e\\ufe0f", rsBreakRange = rsMathOpRange + rsNonCharRange + rsPunctuationRange + rsSpaceRange;
|
||
var rsApos$1 = "['’]", rsBreak = "[" + rsBreakRange + "]", rsCombo = "[" + rsComboRange + "]", rsDigits = "\\d+", rsDingbat = "[" + rsDingbatRange + "]", rsLower = "[" + rsLowerRange + "]", rsMisc = "[^" + rsAstralRange + rsBreakRange + rsDigits + rsDingbatRange + rsLowerRange + rsUpperRange + "]", rsFitz = "\\ud83c[\\udffb-\\udfff]", rsModifier = "(?:" + rsCombo + "|" + rsFitz + ")", rsNonAstral = "[^" + rsAstralRange + "]", rsRegional = "(?:\\ud83c[\\udde6-\\uddff]){2}", rsSurrPair = "[\\ud800-\\udbff][\\udc00-\\udfff]", rsUpper = "[" + rsUpperRange + "]", rsZWJ = "\\u200d";
|
||
var rsMiscLower = "(?:" + rsLower + "|" + rsMisc + ")", rsMiscUpper = "(?:" + rsUpper + "|" + rsMisc + ")", rsOptContrLower = "(?:" + rsApos$1 + "(?:d|ll|m|re|s|t|ve))?", rsOptContrUpper = "(?:" + rsApos$1 + "(?:D|LL|M|RE|S|T|VE))?", reOptMod = rsModifier + "?", rsOptVar = "[" + rsVarRange + "]?", rsOptJoin = "(?:" + rsZWJ + "(?:" + [rsNonAstral, rsRegional, rsSurrPair].join("|") + ")" + rsOptVar + reOptMod + ")*", rsOrdLower = "\\d*(?:1st|2nd|3rd|(?![123])\\dth)(?=\\b|[A-Z_])", rsOrdUpper = "\\d*(?:1ST|2ND|3RD|(?![123])\\dTH)(?=\\b|[a-z_])", rsSeq = rsOptVar + reOptMod + rsOptJoin, rsEmoji = "(?:" + [rsDingbat, rsRegional, rsSurrPair].join("|") + ")" + rsSeq;
|
||
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 = pattern;
|
||
if (pattern === void 0) {
|
||
return hasUnicodeWord(string) ? unicodeWords(string) : asciiWords(string);
|
||
}
|
||
return string.match(pattern) || [];
|
||
}
|
||
var rsApos = "['’]";
|
||
var reApos = RegExp(rsApos, "g");
|
||
function createCompounder(callback) {
|
||
return function(string) {
|
||
return arrayReduce(words(deburr(string).replace(reApos, "")), callback, "");
|
||
};
|
||
}
|
||
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$2 = Object.prototype;
|
||
var propertyIsEnumerable = objectProto$2.propertyIsEnumerable;
|
||
var nativeGetSymbols = Object.getOwnPropertySymbols;
|
||
var getSymbols = !nativeGetSymbols ? stubArray : function(object) {
|
||
if (object == null) {
|
||
return [];
|
||
}
|
||
object = Object(object);
|
||
return arrayFilter(nativeGetSymbols(object), function(symbol) {
|
||
return propertyIsEnumerable.call(object, symbol);
|
||
});
|
||
};
|
||
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);
|
||
}
|
||
var DataView = getNative(root, "DataView");
|
||
var Promise$1 = getNative(root, "Promise");
|
||
var Set$1 = getNative(root, "Set");
|
||
var mapTag$1 = "[object Map]", objectTag$1 = "[object Object]", promiseTag = "[object Promise]", setTag$1 = "[object Set]", weakMapTag = "[object WeakMap]";
|
||
var dataViewTag$1 = "[object DataView]";
|
||
var dataViewCtorString = toSource(DataView), mapCtorString = toSource(Map$1), promiseCtorString = toSource(Promise$1), setCtorString = toSource(Set$1), weakMapCtorString = toSource(WeakMap$1);
|
||
var getTag = baseGetTag;
|
||
if (DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag$1 || Map$1 && getTag(new Map$1()) != mapTag$1 || Promise$1 && getTag(Promise$1.resolve()) != promiseTag || Set$1 && getTag(new Set$1()) != setTag$1 || WeakMap$1 && getTag(new WeakMap$1()) != weakMapTag) {
|
||
getTag = function(value) {
|
||
var result = baseGetTag(value), Ctor = result == objectTag$1 ? value.constructor : void 0, ctorString = Ctor ? toSource(Ctor) : "";
|
||
if (ctorString) {
|
||
switch (ctorString) {
|
||
case dataViewCtorString:
|
||
return dataViewTag$1;
|
||
case mapCtorString:
|
||
return mapTag$1;
|
||
case promiseCtorString:
|
||
return promiseTag;
|
||
case setCtorString:
|
||
return setTag$1;
|
||
case weakMapCtorString:
|
||
return weakMapTag;
|
||
}
|
||
}
|
||
return result;
|
||
};
|
||
}
|
||
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, 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(map2) {
|
||
var index = -1, result = Array(map2.size);
|
||
map2.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, COMPARE_UNORDERED_FLAG$2 = 2;
|
||
var boolTag = "[object Boolean]", dateTag = "[object Date]", errorTag = "[object Error]", mapTag = "[object Map]", numberTag = "[object Number]", regexpTag = "[object RegExp]", setTag = "[object Set]", stringTag = "[object String]", symbolTag = "[object Symbol]";
|
||
var arrayBufferTag = "[object ArrayBuffer]", dataViewTag = "[object DataView]";
|
||
var symbolProto = Symbol$1 ? Symbol$1.prototype : void 0, 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:
|
||
if (object.byteLength != other.byteLength || !equalFunc(new Uint8Array(object), new Uint8Array(other))) {
|
||
return false;
|
||
}
|
||
return true;
|
||
case boolTag:
|
||
case dateTag:
|
||
case numberTag:
|
||
return eq(+object, +other);
|
||
case errorTag:
|
||
return object.name == other.name && object.message == other.message;
|
||
case regexpTag:
|
||
case stringTag:
|
||
return object == other + "";
|
||
case mapTag:
|
||
var convert = mapToArray;
|
||
case setTag:
|
||
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$1 = Object.prototype;
|
||
var hasOwnProperty$1 = objectProto$1.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$1.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]", arrayTag = "[object Array]", objectTag = "[object Object]";
|
||
var objectProto = Object.prototype;
|
||
var hasOwnProperty = objectProto.hasOwnProperty;
|
||
function baseIsEqualDeep(object, other, bitmask, customizer, equalFunc, stack) {
|
||
var objIsArr = isArray(object), othIsArr = isArray(other), objTag = objIsArr ? arrayTag : getTag(object), othTag = othIsArr ? arrayTag : getTag(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.call(object, "__wrapped__"), othIsWrapped = othIsObj && hasOwnProperty.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, COMPARE_UNORDERED_FLAG$1 = 2;
|
||
function baseIsMatch(object, source, matchData, customizer) {
|
||
var index = matchData.length, length = index;
|
||
if (object == null) {
|
||
return !length;
|
||
}
|
||
object = Object(object);
|
||
while (index--) {
|
||
var data = matchData[index];
|
||
if (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 (data[2]) {
|
||
if (objValue === void 0 && !(key in object)) {
|
||
return false;
|
||
}
|
||
} else {
|
||
var stack = new Stack();
|
||
var result;
|
||
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, 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);
|
||
}
|
||
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 = -1, iterable = Object(collection);
|
||
while (++index < length) {
|
||
if (iteratee(iterable[index], index, iterable) === false) {
|
||
break;
|
||
}
|
||
}
|
||
return collection;
|
||
};
|
||
}
|
||
var baseEach = createBaseEach(baseForOwn);
|
||
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));
|
||
}
|
||
var kebabCase = createCompounder(function(result, word, index) {
|
||
return result + (index ? "-" : "") + word.toLowerCase();
|
||
});
|
||
const DownloadIcon = replaceable("download", () => h("svg", {
|
||
viewBox: "0 0 16 16",
|
||
version: "1.1",
|
||
xmlns: "http://www.w3.org/2000/svg"
|
||
}, h("g", {
|
||
stroke: "none",
|
||
"stroke-width": "1",
|
||
fill: "none",
|
||
"fill-rule": "evenodd"
|
||
}, h("g", {
|
||
fill: "currentColor",
|
||
"fill-rule": "nonzero"
|
||
}, h("path", {
|
||
d: "M3.5,13 L12.5,13 C12.7761424,13 13,13.2238576 13,13.5 C13,13.7454599 12.8231248,13.9496084 12.5898756,13.9919443 L12.5,14 L3.5,14 C3.22385763,14 3,13.7761424 3,13.5 C3,13.2545401 3.17687516,13.0503916 3.41012437,13.0080557 L3.5,13 L12.5,13 L3.5,13 Z M7.91012437,1.00805567 L8,1 C8.24545989,1 8.44960837,1.17687516 8.49194433,1.41012437 L8.5,1.5 L8.5,10.292 L11.1819805,7.6109127 C11.3555469,7.43734635 11.6249713,7.4180612 11.8198394,7.55305725 L11.8890873,7.6109127 C12.0626536,7.78447906 12.0819388,8.05390346 11.9469427,8.2487716 L11.8890873,8.31801948 L8.35355339,11.8535534 C8.17998704,12.0271197 7.91056264,12.0464049 7.7156945,11.9114088 L7.64644661,11.8535534 L4.1109127,8.31801948 C3.91565056,8.12275734 3.91565056,7.80617485 4.1109127,7.6109127 C4.28447906,7.43734635 4.55390346,7.4180612 4.7487716,7.55305725 L4.81801948,7.6109127 L7.5,10.292 L7.5,1.5 C7.5,1.25454011 7.67687516,1.05039163 7.91012437,1.00805567 L8,1 L7.91012437,1.00805567 Z"
|
||
})))));
|
||
const ResizeSmallIcon = defineComponent({
|
||
name: "ResizeSmall",
|
||
render() {
|
||
return h("svg", {
|
||
xmlns: "http://www.w3.org/2000/svg",
|
||
viewBox: "0 0 20 20"
|
||
}, h("g", {
|
||
fill: "none"
|
||
}, h("path", {
|
||
d: "M5.5 4A1.5 1.5 0 0 0 4 5.5v1a.5.5 0 0 1-1 0v-1A2.5 2.5 0 0 1 5.5 3h1a.5.5 0 0 1 0 1h-1zM16 5.5A1.5 1.5 0 0 0 14.5 4h-1a.5.5 0 0 1 0-1h1A2.5 2.5 0 0 1 17 5.5v1a.5.5 0 0 1-1 0v-1zm0 9a1.5 1.5 0 0 1-1.5 1.5h-1a.5.5 0 0 0 0 1h1a2.5 2.5 0 0 0 2.5-2.5v-1a.5.5 0 0 0-1 0v1zm-12 0A1.5 1.5 0 0 0 5.5 16h1.25a.5.5 0 0 1 0 1H5.5A2.5 2.5 0 0 1 3 14.5v-1.25a.5.5 0 0 1 1 0v1.25zM8.5 7A1.5 1.5 0 0 0 7 8.5v3A1.5 1.5 0 0 0 8.5 13h3a1.5 1.5 0 0 0 1.5-1.5v-3A1.5 1.5 0 0 0 11.5 7h-3zM8 8.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-3z",
|
||
fill: "currentColor"
|
||
})));
|
||
}
|
||
});
|
||
const RotateClockwiseIcon = replaceable("rotateClockwise", () => h("svg", {
|
||
viewBox: "0 0 20 20",
|
||
fill: "none",
|
||
xmlns: "http://www.w3.org/2000/svg"
|
||
}, h("path", {
|
||
d: "M3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10C17 12.7916 15.3658 15.2026 13 16.3265V14.5C13 14.2239 12.7761 14 12.5 14C12.2239 14 12 14.2239 12 14.5V17.5C12 17.7761 12.2239 18 12.5 18H15.5C15.7761 18 16 17.7761 16 17.5C16 17.2239 15.7761 17 15.5 17H13.8758C16.3346 15.6357 18 13.0128 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 10.2761 2.22386 10.5 2.5 10.5C2.77614 10.5 3 10.2761 3 10Z",
|
||
fill: "currentColor"
|
||
}), h("path", {
|
||
d: "M10 12C11.1046 12 12 11.1046 12 10C12 8.89543 11.1046 8 10 8C8.89543 8 8 8.89543 8 10C8 11.1046 8.89543 12 10 12ZM10 11C9.44772 11 9 10.5523 9 10C9 9.44772 9.44772 9 10 9C10.5523 9 11 9.44772 11 10C11 10.5523 10.5523 11 10 11Z",
|
||
fill: "currentColor"
|
||
})));
|
||
const RotateCounterclockwiseIcon = replaceable("rotateClockwise", () => h("svg", {
|
||
viewBox: "0 0 20 20",
|
||
fill: "none",
|
||
xmlns: "http://www.w3.org/2000/svg"
|
||
}, h("path", {
|
||
d: "M17 10C17 6.13401 13.866 3 10 3C6.13401 3 3 6.13401 3 10C3 12.7916 4.63419 15.2026 7 16.3265V14.5C7 14.2239 7.22386 14 7.5 14C7.77614 14 8 14.2239 8 14.5V17.5C8 17.7761 7.77614 18 7.5 18H4.5C4.22386 18 4 17.7761 4 17.5C4 17.2239 4.22386 17 4.5 17H6.12422C3.66539 15.6357 2 13.0128 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 10.2761 17.7761 10.5 17.5 10.5C17.2239 10.5 17 10.2761 17 10Z",
|
||
fill: "currentColor"
|
||
}), h("path", {
|
||
d: "M10 12C8.89543 12 8 11.1046 8 10C8 8.89543 8.89543 8 10 8C11.1046 8 12 8.89543 12 10C12 11.1046 11.1046 12 10 12ZM10 11C10.5523 11 11 10.5523 11 10C11 9.44772 10.5523 9 10 9C9.44772 9 9 9.44772 9 10C9 10.5523 9.44772 11 10 11Z",
|
||
fill: "currentColor"
|
||
})));
|
||
const ZoomInIcon = replaceable("zoomIn", () => h("svg", {
|
||
viewBox: "0 0 20 20",
|
||
fill: "none",
|
||
xmlns: "http://www.w3.org/2000/svg"
|
||
}, h("path", {
|
||
d: "M11.5 8.5C11.5 8.22386 11.2761 8 11 8H9V6C9 5.72386 8.77614 5.5 8.5 5.5C8.22386 5.5 8 5.72386 8 6V8H6C5.72386 8 5.5 8.22386 5.5 8.5C5.5 8.77614 5.72386 9 6 9H8V11C8 11.2761 8.22386 11.5 8.5 11.5C8.77614 11.5 9 11.2761 9 11V9H11C11.2761 9 11.5 8.77614 11.5 8.5Z",
|
||
fill: "currentColor"
|
||
}), h("path", {
|
||
d: "M8.5 3C11.5376 3 14 5.46243 14 8.5C14 9.83879 13.5217 11.0659 12.7266 12.0196L16.8536 16.1464C17.0488 16.3417 17.0488 16.6583 16.8536 16.8536C16.68 17.0271 16.4106 17.0464 16.2157 16.9114L16.1464 16.8536L12.0196 12.7266C11.0659 13.5217 9.83879 14 8.5 14C5.46243 14 3 11.5376 3 8.5C3 5.46243 5.46243 3 8.5 3ZM8.5 4C6.01472 4 4 6.01472 4 8.5C4 10.9853 6.01472 13 8.5 13C10.9853 13 13 10.9853 13 8.5C13 6.01472 10.9853 4 8.5 4Z",
|
||
fill: "currentColor"
|
||
})));
|
||
const ZoomOutIcon = replaceable("zoomOut", () => h("svg", {
|
||
viewBox: "0 0 20 20",
|
||
fill: "none",
|
||
xmlns: "http://www.w3.org/2000/svg"
|
||
}, h("path", {
|
||
d: "M11 8C11.2761 8 11.5 8.22386 11.5 8.5C11.5 8.77614 11.2761 9 11 9H6C5.72386 9 5.5 8.77614 5.5 8.5C5.5 8.22386 5.72386 8 6 8H11Z",
|
||
fill: "currentColor"
|
||
}), h("path", {
|
||
d: "M14 8.5C14 5.46243 11.5376 3 8.5 3C5.46243 3 3 5.46243 3 8.5C3 11.5376 5.46243 14 8.5 14C9.83879 14 11.0659 13.5217 12.0196 12.7266L16.1464 16.8536L16.2157 16.9114C16.4106 17.0464 16.68 17.0271 16.8536 16.8536C17.0488 16.6583 17.0488 16.3417 16.8536 16.1464L12.7266 12.0196C13.5217 11.0659 14 9.83879 14 8.5ZM4 8.5C4 6.01472 6.01472 4 8.5 4C10.9853 4 13 6.01472 13 8.5C13 10.9853 10.9853 13 8.5 13C6.01472 13 4 10.9853 4 8.5Z",
|
||
fill: "currentColor"
|
||
})));
|
||
const oppositePlacement = {
|
||
top: "bottom",
|
||
bottom: "top",
|
||
left: "right",
|
||
right: "left"
|
||
};
|
||
const arrowSize = "var(--n-arrow-height) * 1.414";
|
||
const style$1 = c([cB("popover", `
|
||
transition:
|
||
box-shadow .3s var(--n-bezier),
|
||
background-color .3s var(--n-bezier),
|
||
color .3s var(--n-bezier);
|
||
position: relative;
|
||
font-size: var(--n-font-size);
|
||
color: var(--n-text-color);
|
||
box-shadow: var(--n-box-shadow);
|
||
word-break: break-word;
|
||
`, [c(">", [cB("scrollbar", `
|
||
height: inherit;
|
||
max-height: inherit;
|
||
`)]), cNotM("raw", `
|
||
background-color: var(--n-color);
|
||
border-radius: var(--n-border-radius);
|
||
`, [cNotM("scrollable", [cNotM("show-header-or-footer", "padding: var(--n-padding);")])]), cE("header", `
|
||
padding: var(--n-padding);
|
||
border-bottom: 1px solid var(--n-divider-color);
|
||
transition: border-color .3s var(--n-bezier);
|
||
`), cE("footer", `
|
||
padding: var(--n-padding);
|
||
border-top: 1px solid var(--n-divider-color);
|
||
transition: border-color .3s var(--n-bezier);
|
||
`), cM("scrollable, show-header-or-footer", [cE("content", `
|
||
padding: var(--n-padding);
|
||
`)])]), cB("popover-shared", `
|
||
transform-origin: inherit;
|
||
`, [
|
||
cB("popover-arrow-wrapper", `
|
||
position: absolute;
|
||
overflow: hidden;
|
||
pointer-events: none;
|
||
`, [cB("popover-arrow", `
|
||
transition: background-color .3s var(--n-bezier);
|
||
position: absolute;
|
||
display: block;
|
||
width: calc(${arrowSize});
|
||
height: calc(${arrowSize});
|
||
box-shadow: 0 0 8px 0 rgba(0, 0, 0, .12);
|
||
transform: rotate(45deg);
|
||
background-color: var(--n-color);
|
||
pointer-events: all;
|
||
`)]),
|
||
// body transition
|
||
c("&.popover-transition-enter-from, &.popover-transition-leave-to", `
|
||
opacity: 0;
|
||
transform: scale(.85);
|
||
`),
|
||
c("&.popover-transition-enter-to, &.popover-transition-leave-from", `
|
||
transform: scale(1);
|
||
opacity: 1;
|
||
`),
|
||
c("&.popover-transition-enter-active", `
|
||
transition:
|
||
box-shadow .3s var(--n-bezier),
|
||
background-color .3s var(--n-bezier),
|
||
color .3s var(--n-bezier),
|
||
opacity .15s var(--n-bezier-ease-out),
|
||
transform .15s var(--n-bezier-ease-out);
|
||
`),
|
||
c("&.popover-transition-leave-active", `
|
||
transition:
|
||
box-shadow .3s var(--n-bezier),
|
||
background-color .3s var(--n-bezier),
|
||
color .3s var(--n-bezier),
|
||
opacity .15s var(--n-bezier-ease-in),
|
||
transform .15s var(--n-bezier-ease-in);
|
||
`)
|
||
]), placementStyle("top-start", `
|
||
top: calc(${arrowSize} / -2);
|
||
left: calc(${getArrowOffset("top-start")} - var(--v-offset-left));
|
||
`), placementStyle("top", `
|
||
top: calc(${arrowSize} / -2);
|
||
transform: translateX(calc(${arrowSize} / -2)) rotate(45deg);
|
||
left: 50%;
|
||
`), placementStyle("top-end", `
|
||
top: calc(${arrowSize} / -2);
|
||
right: calc(${getArrowOffset("top-end")} + var(--v-offset-left));
|
||
`), placementStyle("bottom-start", `
|
||
bottom: calc(${arrowSize} / -2);
|
||
left: calc(${getArrowOffset("bottom-start")} - var(--v-offset-left));
|
||
`), placementStyle("bottom", `
|
||
bottom: calc(${arrowSize} / -2);
|
||
transform: translateX(calc(${arrowSize} / -2)) rotate(45deg);
|
||
left: 50%;
|
||
`), placementStyle("bottom-end", `
|
||
bottom: calc(${arrowSize} / -2);
|
||
right: calc(${getArrowOffset("bottom-end")} + var(--v-offset-left));
|
||
`), placementStyle("left-start", `
|
||
left: calc(${arrowSize} / -2);
|
||
top: calc(${getArrowOffset("left-start")} - var(--v-offset-top));
|
||
`), placementStyle("left", `
|
||
left: calc(${arrowSize} / -2);
|
||
transform: translateY(calc(${arrowSize} / -2)) rotate(45deg);
|
||
top: 50%;
|
||
`), placementStyle("left-end", `
|
||
left: calc(${arrowSize} / -2);
|
||
bottom: calc(${getArrowOffset("left-end")} + var(--v-offset-top));
|
||
`), placementStyle("right-start", `
|
||
right: calc(${arrowSize} / -2);
|
||
top: calc(${getArrowOffset("right-start")} - var(--v-offset-top));
|
||
`), placementStyle("right", `
|
||
right: calc(${arrowSize} / -2);
|
||
transform: translateY(calc(${arrowSize} / -2)) rotate(45deg);
|
||
top: 50%;
|
||
`), placementStyle("right-end", `
|
||
right: calc(${arrowSize} / -2);
|
||
bottom: calc(${getArrowOffset("right-end")} + var(--v-offset-top));
|
||
`), ...map({
|
||
top: ["right-start", "left-start"],
|
||
right: ["top-end", "bottom-end"],
|
||
bottom: ["right-end", "left-end"],
|
||
left: ["top-start", "bottom-start"]
|
||
}, (placements, direction) => {
|
||
const isVertical = ["right", "left"].includes(direction);
|
||
const sizeType = isVertical ? "width" : "height";
|
||
return placements.map((placement) => {
|
||
const isReverse = placement.split("-")[1] === "end";
|
||
const targetSize = `var(--v-target-${sizeType}, 0px)`;
|
||
const centerOffset = `calc((${targetSize} - ${arrowSize}) / 2)`;
|
||
const offset = getArrowOffset(placement);
|
||
return c(`[v-placement="${placement}"] >`, [cB("popover-shared", [cM("center-arrow", [cB("popover-arrow", `${direction}: calc(max(${centerOffset}, ${offset}) ${isReverse ? "+" : "-"} var(--v-offset-${isVertical ? "left" : "top"}));`)])])]);
|
||
});
|
||
})]);
|
||
function getArrowOffset(placement) {
|
||
return ["top", "bottom"].includes(placement.split("-")[0]) ? "var(--n-arrow-offset)" : "var(--n-arrow-offset-vertical)";
|
||
}
|
||
function placementStyle(placement, arrowStyleLiteral) {
|
||
const position = placement.split("-")[0];
|
||
const sizeStyle = ["top", "bottom"].includes(position) ? "height: var(--n-space-arrow);" : "width: var(--n-space-arrow);";
|
||
return c(`[v-placement="${placement}"] >`, [cB("popover-shared", `
|
||
margin-${oppositePlacement[position]}: var(--n-space);
|
||
`, [cM("show-arrow", `
|
||
margin-${oppositePlacement[position]}: var(--n-space-arrow);
|
||
`), cM("overlap", `
|
||
margin: 0;
|
||
`), cCB("popover-arrow-wrapper", `
|
||
right: 0;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
${position}: 100%;
|
||
${oppositePlacement[position]}: auto;
|
||
${sizeStyle}
|
||
`, [cB("popover-arrow", arrowStyleLiteral)])])]);
|
||
}
|
||
const popoverBodyProps = Object.assign(Object.assign({}, useTheme.props), {
|
||
to: useAdjustedTo.propTo,
|
||
show: Boolean,
|
||
trigger: String,
|
||
showArrow: Boolean,
|
||
delay: Number,
|
||
duration: Number,
|
||
raw: Boolean,
|
||
arrowPointToCenter: Boolean,
|
||
arrowClass: String,
|
||
arrowStyle: [String, Object],
|
||
arrowWrapperClass: String,
|
||
arrowWrapperStyle: [String, Object],
|
||
displayDirective: String,
|
||
x: Number,
|
||
y: Number,
|
||
flip: Boolean,
|
||
overlap: Boolean,
|
||
placement: String,
|
||
width: [Number, String],
|
||
keepAliveOnHover: Boolean,
|
||
scrollable: Boolean,
|
||
contentClass: String,
|
||
contentStyle: [Object, String],
|
||
headerClass: String,
|
||
headerStyle: [Object, String],
|
||
footerClass: String,
|
||
footerStyle: [Object, String],
|
||
// private
|
||
internalDeactivateImmediately: Boolean,
|
||
animated: Boolean,
|
||
onClickoutside: Function,
|
||
internalTrapFocus: Boolean,
|
||
internalOnAfterLeave: Function,
|
||
// deprecated
|
||
minWidth: Number,
|
||
maxWidth: Number
|
||
});
|
||
function renderArrow({
|
||
arrowClass,
|
||
arrowStyle,
|
||
arrowWrapperClass,
|
||
arrowWrapperStyle,
|
||
clsPrefix
|
||
}) {
|
||
return h("div", {
|
||
key: "__popover-arrow__",
|
||
style: arrowWrapperStyle,
|
||
class: [`${clsPrefix}-popover-arrow-wrapper`, arrowWrapperClass]
|
||
}, h("div", {
|
||
class: [`${clsPrefix}-popover-arrow`, arrowClass],
|
||
style: arrowStyle
|
||
}));
|
||
}
|
||
const NPopoverBody = defineComponent({
|
||
name: "PopoverBody",
|
||
inheritAttrs: false,
|
||
props: popoverBodyProps,
|
||
setup(props, {
|
||
slots,
|
||
attrs
|
||
}) {
|
||
const {
|
||
namespaceRef,
|
||
mergedClsPrefixRef,
|
||
inlineThemeDisabled
|
||
} = useConfig(props);
|
||
const themeRef = useTheme("Popover", "-popover", style$1, popoverLight, props, mergedClsPrefixRef);
|
||
const followerRef = ref(null);
|
||
const NPopover = inject("NPopover");
|
||
const bodyRef = ref(null);
|
||
const followerEnabledRef = ref(props.show);
|
||
const displayedRef = ref(false);
|
||
watchEffect(() => {
|
||
const {
|
||
show
|
||
} = props;
|
||
if (show && !isJsdom() && !props.internalDeactivateImmediately) {
|
||
displayedRef.value = true;
|
||
}
|
||
});
|
||
const directivesRef = computed(() => {
|
||
const {
|
||
trigger,
|
||
onClickoutside
|
||
} = props;
|
||
const directives = [];
|
||
const {
|
||
positionManuallyRef: {
|
||
value: positionManually
|
||
}
|
||
} = NPopover;
|
||
if (!positionManually) {
|
||
if (trigger === "click" && !onClickoutside) {
|
||
directives.push([clickoutside, handleClickOutside, void 0, {
|
||
capture: true
|
||
}]);
|
||
}
|
||
if (trigger === "hover") {
|
||
directives.push([mousemoveoutside, handleMouseMoveOutside]);
|
||
}
|
||
}
|
||
if (onClickoutside) {
|
||
directives.push([clickoutside, handleClickOutside, void 0, {
|
||
capture: true
|
||
}]);
|
||
}
|
||
if (props.displayDirective === "show" || props.animated && displayedRef.value) {
|
||
directives.push([vShow, props.show]);
|
||
}
|
||
return directives;
|
||
});
|
||
const cssVarsRef = computed(() => {
|
||
const {
|
||
common: {
|
||
cubicBezierEaseInOut,
|
||
cubicBezierEaseIn,
|
||
cubicBezierEaseOut
|
||
},
|
||
self: {
|
||
space,
|
||
spaceArrow,
|
||
padding,
|
||
fontSize,
|
||
textColor,
|
||
dividerColor,
|
||
color,
|
||
boxShadow,
|
||
borderRadius,
|
||
arrowHeight,
|
||
arrowOffset,
|
||
arrowOffsetVertical
|
||
}
|
||
} = themeRef.value;
|
||
return {
|
||
"--n-box-shadow": boxShadow,
|
||
"--n-bezier": cubicBezierEaseInOut,
|
||
"--n-bezier-ease-in": cubicBezierEaseIn,
|
||
"--n-bezier-ease-out": cubicBezierEaseOut,
|
||
"--n-font-size": fontSize,
|
||
"--n-text-color": textColor,
|
||
"--n-color": color,
|
||
"--n-divider-color": dividerColor,
|
||
"--n-border-radius": borderRadius,
|
||
"--n-arrow-height": arrowHeight,
|
||
"--n-arrow-offset": arrowOffset,
|
||
"--n-arrow-offset-vertical": arrowOffsetVertical,
|
||
"--n-padding": padding,
|
||
"--n-space": space,
|
||
"--n-space-arrow": spaceArrow
|
||
};
|
||
});
|
||
const styleRef = computed(() => {
|
||
const width = props.width === "trigger" ? void 0 : formatLength(props.width);
|
||
const style2 = [];
|
||
if (width) {
|
||
style2.push({
|
||
width
|
||
});
|
||
}
|
||
const {
|
||
maxWidth,
|
||
minWidth
|
||
} = props;
|
||
if (maxWidth) {
|
||
style2.push({
|
||
maxWidth: formatLength(maxWidth)
|
||
});
|
||
}
|
||
if (minWidth) {
|
||
style2.push({
|
||
maxWidth: formatLength(minWidth)
|
||
});
|
||
}
|
||
if (!inlineThemeDisabled) {
|
||
style2.push(cssVarsRef.value);
|
||
}
|
||
return style2;
|
||
});
|
||
const themeClassHandle = inlineThemeDisabled ? useThemeClass("popover", void 0, cssVarsRef, props) : void 0;
|
||
NPopover.setBodyInstance({
|
||
syncPosition
|
||
});
|
||
onBeforeUnmount(() => {
|
||
NPopover.setBodyInstance(null);
|
||
});
|
||
watch(toRef(props, "show"), (value) => {
|
||
if (props.animated) return;
|
||
if (value) {
|
||
followerEnabledRef.value = true;
|
||
} else {
|
||
followerEnabledRef.value = false;
|
||
}
|
||
});
|
||
function syncPosition() {
|
||
var _a;
|
||
(_a = followerRef.value) === null || _a === void 0 ? void 0 : _a.syncPosition();
|
||
}
|
||
function handleMouseEnter(e) {
|
||
if (props.trigger === "hover" && props.keepAliveOnHover && props.show) {
|
||
NPopover.handleMouseEnter(e);
|
||
}
|
||
}
|
||
function handleMouseLeave(e) {
|
||
if (props.trigger === "hover" && props.keepAliveOnHover) {
|
||
NPopover.handleMouseLeave(e);
|
||
}
|
||
}
|
||
function handleMouseMoveOutside(e) {
|
||
if (props.trigger === "hover" && !getTriggerElement().contains(getPreciseEventTarget(e))) {
|
||
NPopover.handleMouseMoveOutside(e);
|
||
}
|
||
}
|
||
function handleClickOutside(e) {
|
||
if (props.trigger === "click" && !getTriggerElement().contains(getPreciseEventTarget(e)) || props.onClickoutside) {
|
||
NPopover.handleClickOutside(e);
|
||
}
|
||
}
|
||
function getTriggerElement() {
|
||
return NPopover.getTriggerElement();
|
||
}
|
||
provide(popoverBodyInjectionKey, bodyRef);
|
||
provide(drawerBodyInjectionKey, null);
|
||
provide(modalBodyInjectionKey, null);
|
||
function renderContentNode() {
|
||
themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender();
|
||
const shouldRenderDom = props.displayDirective === "show" || props.show || props.animated && displayedRef.value;
|
||
if (!shouldRenderDom) {
|
||
return null;
|
||
}
|
||
let contentNode;
|
||
const renderBody = NPopover.internalRenderBodyRef.value;
|
||
const {
|
||
value: mergedClsPrefix
|
||
} = mergedClsPrefixRef;
|
||
if (!renderBody) {
|
||
const {
|
||
value: extraClass
|
||
} = NPopover.extraClassRef;
|
||
const {
|
||
internalTrapFocus
|
||
} = props;
|
||
const hasHeaderOrFooter = !isSlotEmpty(slots.header) || !isSlotEmpty(slots.footer);
|
||
const renderContentInnerNode = () => {
|
||
var _a, _b;
|
||
const body = hasHeaderOrFooter ? h(Fragment, null, resolveWrappedSlot(slots.header, (children) => {
|
||
return children ? h("div", {
|
||
class: [`${mergedClsPrefix}-popover__header`, props.headerClass],
|
||
style: props.headerStyle
|
||
}, children) : null;
|
||
}), resolveWrappedSlot(slots.default, (children) => {
|
||
return children ? h("div", {
|
||
class: [`${mergedClsPrefix}-popover__content`, props.contentClass],
|
||
style: props.contentStyle
|
||
}, slots) : null;
|
||
}), resolveWrappedSlot(slots.footer, (children) => {
|
||
return children ? h("div", {
|
||
class: [`${mergedClsPrefix}-popover__footer`, props.footerClass],
|
||
style: props.footerStyle
|
||
}, children) : null;
|
||
})) : props.scrollable ? (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots) : h("div", {
|
||
class: [`${mergedClsPrefix}-popover__content`, props.contentClass],
|
||
style: props.contentStyle
|
||
}, slots);
|
||
const maybeScrollableBody = props.scrollable ? h(XScrollbar, {
|
||
contentClass: hasHeaderOrFooter ? void 0 : `${mergedClsPrefix}-popover__content ${(_b = props.contentClass) !== null && _b !== void 0 ? _b : ""}`,
|
||
contentStyle: hasHeaderOrFooter ? void 0 : props.contentStyle
|
||
}, {
|
||
default: () => body
|
||
}) : body;
|
||
const arrow = props.showArrow ? renderArrow({
|
||
arrowClass: props.arrowClass,
|
||
arrowStyle: props.arrowStyle,
|
||
arrowWrapperClass: props.arrowWrapperClass,
|
||
arrowWrapperStyle: props.arrowWrapperStyle,
|
||
clsPrefix: mergedClsPrefix
|
||
}) : null;
|
||
return [maybeScrollableBody, arrow];
|
||
};
|
||
contentNode = h("div", mergeProps({
|
||
class: [`${mergedClsPrefix}-popover`, `${mergedClsPrefix}-popover-shared`, themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass.value, extraClass.map((v) => `${mergedClsPrefix}-${v}`), {
|
||
[`${mergedClsPrefix}-popover--scrollable`]: props.scrollable,
|
||
[`${mergedClsPrefix}-popover--show-header-or-footer`]: hasHeaderOrFooter,
|
||
[`${mergedClsPrefix}-popover--raw`]: props.raw,
|
||
[`${mergedClsPrefix}-popover-shared--overlap`]: props.overlap,
|
||
[`${mergedClsPrefix}-popover-shared--show-arrow`]: props.showArrow,
|
||
[`${mergedClsPrefix}-popover-shared--center-arrow`]: props.arrowPointToCenter
|
||
}],
|
||
ref: bodyRef,
|
||
style: styleRef.value,
|
||
onKeydown: NPopover.handleKeydown,
|
||
onMouseenter: handleMouseEnter,
|
||
onMouseleave: handleMouseLeave
|
||
}, attrs), internalTrapFocus ? h(FocusTrap, {
|
||
active: props.show,
|
||
autoFocus: true
|
||
}, {
|
||
default: renderContentInnerNode
|
||
}) : renderContentInnerNode());
|
||
} else {
|
||
contentNode = renderBody(
|
||
// The popover class and overlap class must exists, they will be used
|
||
// to place the body & transition animation.
|
||
// Shadow class exists for reuse box-shadow.
|
||
[`${mergedClsPrefix}-popover-shared`, themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass.value, props.overlap && `${mergedClsPrefix}-popover-shared--overlap`, props.showArrow && `${mergedClsPrefix}-popover-shared--show-arrow`, props.arrowPointToCenter && `${mergedClsPrefix}-popover-shared--center-arrow`],
|
||
bodyRef,
|
||
styleRef.value,
|
||
handleMouseEnter,
|
||
handleMouseLeave
|
||
);
|
||
}
|
||
return withDirectives(contentNode, directivesRef.value);
|
||
}
|
||
return {
|
||
displayed: displayedRef,
|
||
namespace: namespaceRef,
|
||
isMounted: NPopover.isMountedRef,
|
||
zIndex: NPopover.zIndexRef,
|
||
followerRef,
|
||
adjustedTo: useAdjustedTo(props),
|
||
followerEnabled: followerEnabledRef,
|
||
renderContentNode
|
||
};
|
||
},
|
||
render() {
|
||
return h(VFollower, {
|
||
ref: "followerRef",
|
||
zIndex: this.zIndex,
|
||
show: this.show,
|
||
enabled: this.followerEnabled,
|
||
to: this.adjustedTo,
|
||
x: this.x,
|
||
y: this.y,
|
||
flip: this.flip,
|
||
placement: this.placement,
|
||
containerClass: this.namespace,
|
||
overlap: this.overlap,
|
||
width: this.width === "trigger" ? "target" : void 0,
|
||
teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey
|
||
}, {
|
||
default: () => {
|
||
return this.animated ? h(Transition, {
|
||
name: "popover-transition",
|
||
appear: this.isMounted,
|
||
// Don't use watch to enable follower, since the transition may
|
||
// make position sync timing very subtle and buggy.
|
||
onEnter: () => {
|
||
this.followerEnabled = true;
|
||
},
|
||
onAfterLeave: () => {
|
||
var _a;
|
||
(_a = this.internalOnAfterLeave) === null || _a === void 0 ? void 0 : _a.call(this);
|
||
this.followerEnabled = false;
|
||
this.displayed = false;
|
||
}
|
||
}, {
|
||
default: this.renderContentNode
|
||
}) : this.renderContentNode();
|
||
}
|
||
});
|
||
}
|
||
});
|
||
const bodyPropKeys = Object.keys(popoverBodyProps);
|
||
const triggerEventMap = {
|
||
focus: ["onFocus", "onBlur"],
|
||
click: ["onClick"],
|
||
hover: ["onMouseenter", "onMouseleave"],
|
||
manual: [],
|
||
nested: ["onFocus", "onBlur", "onMouseenter", "onMouseleave", "onClick"]
|
||
};
|
||
function appendEvents(vNode, trigger, events) {
|
||
triggerEventMap[trigger].forEach((eventName) => {
|
||
if (!vNode.props) {
|
||
vNode.props = {};
|
||
} else {
|
||
vNode.props = Object.assign({}, vNode.props);
|
||
}
|
||
const originalHandler = vNode.props[eventName];
|
||
const handler = events[eventName];
|
||
if (!originalHandler) {
|
||
vNode.props[eventName] = handler;
|
||
} else {
|
||
vNode.props[eventName] = (...args) => {
|
||
originalHandler(...args);
|
||
handler(...args);
|
||
};
|
||
}
|
||
});
|
||
}
|
||
const popoverBaseProps = {
|
||
show: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
defaultShow: Boolean,
|
||
showArrow: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
trigger: {
|
||
type: String,
|
||
default: "hover"
|
||
},
|
||
delay: {
|
||
type: Number,
|
||
default: 100
|
||
},
|
||
duration: {
|
||
type: Number,
|
||
default: 100
|
||
},
|
||
raw: Boolean,
|
||
placement: {
|
||
type: String,
|
||
default: "top"
|
||
},
|
||
x: Number,
|
||
y: Number,
|
||
arrowPointToCenter: Boolean,
|
||
disabled: Boolean,
|
||
getDisabled: Function,
|
||
displayDirective: {
|
||
type: String,
|
||
default: "if"
|
||
},
|
||
arrowClass: String,
|
||
arrowStyle: [String, Object],
|
||
arrowWrapperClass: String,
|
||
arrowWrapperStyle: [String, Object],
|
||
flip: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
animated: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
width: {
|
||
type: [Number, String],
|
||
default: void 0
|
||
},
|
||
overlap: Boolean,
|
||
keepAliveOnHover: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
zIndex: Number,
|
||
to: useAdjustedTo.propTo,
|
||
scrollable: Boolean,
|
||
contentClass: String,
|
||
contentStyle: [Object, String],
|
||
headerClass: String,
|
||
headerStyle: [Object, String],
|
||
footerClass: String,
|
||
footerStyle: [Object, String],
|
||
// events
|
||
onClickoutside: Function,
|
||
"onUpdate:show": [Function, Array],
|
||
onUpdateShow: [Function, Array],
|
||
// internal
|
||
internalDeactivateImmediately: Boolean,
|
||
internalSyncTargetWithParent: Boolean,
|
||
internalInheritedEventHandlers: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
internalTrapFocus: Boolean,
|
||
internalExtraClass: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
// deprecated
|
||
onShow: [Function, Array],
|
||
onHide: [Function, Array],
|
||
arrow: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
minWidth: Number,
|
||
maxWidth: Number
|
||
};
|
||
const popoverProps = Object.assign(Object.assign(Object.assign({}, useTheme.props), popoverBaseProps), {
|
||
internalOnAfterLeave: Function,
|
||
internalRenderBody: Function
|
||
});
|
||
const __unplugin_components_5 = defineComponent({
|
||
name: "Popover",
|
||
inheritAttrs: false,
|
||
props: popoverProps,
|
||
__popover__: true,
|
||
setup(props) {
|
||
const isMountedRef = isMounted();
|
||
const binderInstRef = ref(null);
|
||
const controlledShowRef = computed(() => props.show);
|
||
const uncontrolledShowRef = ref(props.defaultShow);
|
||
const mergedShowWithoutDisabledRef = useMergedState(controlledShowRef, uncontrolledShowRef);
|
||
const mergedShowConsideringDisabledPropRef = useMemo(() => {
|
||
if (props.disabled) return false;
|
||
return mergedShowWithoutDisabledRef.value;
|
||
});
|
||
const getMergedDisabled = () => {
|
||
if (props.disabled) return true;
|
||
const {
|
||
getDisabled
|
||
} = props;
|
||
if (getDisabled === null || getDisabled === void 0 ? void 0 : getDisabled()) return true;
|
||
return false;
|
||
};
|
||
const getMergedShow = () => {
|
||
if (getMergedDisabled()) return false;
|
||
return mergedShowWithoutDisabledRef.value;
|
||
};
|
||
const compatibleShowArrowRef = useCompitable(props, ["arrow", "showArrow"]);
|
||
const mergedShowArrowRef = computed(() => {
|
||
if (props.overlap) return false;
|
||
return compatibleShowArrowRef.value;
|
||
});
|
||
let bodyInstance = null;
|
||
const showTimerIdRef = ref(null);
|
||
const hideTimerIdRef = ref(null);
|
||
const positionManuallyRef = useMemo(() => {
|
||
return props.x !== void 0 && props.y !== void 0;
|
||
});
|
||
function doUpdateShow(value) {
|
||
const {
|
||
"onUpdate:show": _onUpdateShow,
|
||
onUpdateShow,
|
||
onShow,
|
||
onHide
|
||
} = props;
|
||
uncontrolledShowRef.value = value;
|
||
if (_onUpdateShow) {
|
||
call(_onUpdateShow, value);
|
||
}
|
||
if (onUpdateShow) {
|
||
call(onUpdateShow, value);
|
||
}
|
||
if (value && onShow) {
|
||
call(onShow, true);
|
||
}
|
||
if (value && onHide) {
|
||
call(onHide, false);
|
||
}
|
||
}
|
||
function syncPosition() {
|
||
if (bodyInstance) {
|
||
bodyInstance.syncPosition();
|
||
}
|
||
}
|
||
function clearShowTimer() {
|
||
const {
|
||
value: showTimerId
|
||
} = showTimerIdRef;
|
||
if (showTimerId) {
|
||
window.clearTimeout(showTimerId);
|
||
showTimerIdRef.value = null;
|
||
}
|
||
}
|
||
function clearHideTimer() {
|
||
const {
|
||
value: hideTimerId
|
||
} = hideTimerIdRef;
|
||
if (hideTimerId) {
|
||
window.clearTimeout(hideTimerId);
|
||
hideTimerIdRef.value = null;
|
||
}
|
||
}
|
||
function handleFocus() {
|
||
const mergedDisabled = getMergedDisabled();
|
||
if (props.trigger === "focus" && !mergedDisabled) {
|
||
if (getMergedShow()) return;
|
||
doUpdateShow(true);
|
||
}
|
||
}
|
||
function handleBlur() {
|
||
const mergedDisabled = getMergedDisabled();
|
||
if (props.trigger === "focus" && !mergedDisabled) {
|
||
if (!getMergedShow()) return;
|
||
doUpdateShow(false);
|
||
}
|
||
}
|
||
function handleMouseEnter() {
|
||
const mergedDisabled = getMergedDisabled();
|
||
if (props.trigger === "hover" && !mergedDisabled) {
|
||
clearHideTimer();
|
||
if (showTimerIdRef.value !== null) return;
|
||
if (getMergedShow()) return;
|
||
const delayCallback = () => {
|
||
doUpdateShow(true);
|
||
showTimerIdRef.value = null;
|
||
};
|
||
const {
|
||
delay
|
||
} = props;
|
||
if (delay === 0) {
|
||
delayCallback();
|
||
} else {
|
||
showTimerIdRef.value = window.setTimeout(delayCallback, delay);
|
||
}
|
||
}
|
||
}
|
||
function handleMouseLeave() {
|
||
const mergedDisabled = getMergedDisabled();
|
||
if (props.trigger === "hover" && !mergedDisabled) {
|
||
clearShowTimer();
|
||
if (hideTimerIdRef.value !== null) return;
|
||
if (!getMergedShow()) return;
|
||
const delayedCallback = () => {
|
||
doUpdateShow(false);
|
||
hideTimerIdRef.value = null;
|
||
};
|
||
const {
|
||
duration
|
||
} = props;
|
||
if (duration === 0) {
|
||
delayedCallback();
|
||
} else {
|
||
hideTimerIdRef.value = window.setTimeout(delayedCallback, duration);
|
||
}
|
||
}
|
||
}
|
||
function handleMouseMoveOutside() {
|
||
handleMouseLeave();
|
||
}
|
||
function handleClickOutside(e) {
|
||
var _a;
|
||
if (!getMergedShow()) return;
|
||
if (props.trigger === "click") {
|
||
clearShowTimer();
|
||
clearHideTimer();
|
||
doUpdateShow(false);
|
||
}
|
||
(_a = props.onClickoutside) === null || _a === void 0 ? void 0 : _a.call(props, e);
|
||
}
|
||
function handleClick() {
|
||
if (props.trigger === "click" && !getMergedDisabled()) {
|
||
clearShowTimer();
|
||
clearHideTimer();
|
||
const nextShow = !getMergedShow();
|
||
doUpdateShow(nextShow);
|
||
}
|
||
}
|
||
function handleKeydown(e) {
|
||
if (!props.internalTrapFocus) return;
|
||
if (e.key === "Escape") {
|
||
clearShowTimer();
|
||
clearHideTimer();
|
||
doUpdateShow(false);
|
||
}
|
||
}
|
||
function setShow(value) {
|
||
uncontrolledShowRef.value = value;
|
||
}
|
||
function getTriggerElement() {
|
||
var _a;
|
||
return (_a = binderInstRef.value) === null || _a === void 0 ? void 0 : _a.targetRef;
|
||
}
|
||
function setBodyInstance(value) {
|
||
bodyInstance = value;
|
||
}
|
||
provide("NPopover", {
|
||
getTriggerElement,
|
||
handleKeydown,
|
||
handleMouseEnter,
|
||
handleMouseLeave,
|
||
handleClickOutside,
|
||
handleMouseMoveOutside,
|
||
setBodyInstance,
|
||
positionManuallyRef,
|
||
isMountedRef,
|
||
zIndexRef: toRef(props, "zIndex"),
|
||
extraClassRef: toRef(props, "internalExtraClass"),
|
||
internalRenderBodyRef: toRef(props, "internalRenderBody")
|
||
});
|
||
watchEffect(() => {
|
||
if (mergedShowWithoutDisabledRef.value && getMergedDisabled()) {
|
||
doUpdateShow(false);
|
||
}
|
||
});
|
||
const returned = {
|
||
binderInstRef,
|
||
positionManually: positionManuallyRef,
|
||
mergedShowConsideringDisabledProp: mergedShowConsideringDisabledPropRef,
|
||
// if to show popover body
|
||
uncontrolledShow: uncontrolledShowRef,
|
||
mergedShowArrow: mergedShowArrowRef,
|
||
getMergedShow,
|
||
setShow,
|
||
handleClick,
|
||
handleMouseEnter,
|
||
handleMouseLeave,
|
||
handleFocus,
|
||
handleBlur,
|
||
syncPosition
|
||
};
|
||
return returned;
|
||
},
|
||
render() {
|
||
var _a;
|
||
const {
|
||
positionManually,
|
||
$slots: slots
|
||
} = this;
|
||
let triggerVNode;
|
||
let popoverInside = false;
|
||
if (!positionManually) {
|
||
if (slots.activator) {
|
||
triggerVNode = getFirstSlotVNode(slots, "activator");
|
||
} else {
|
||
triggerVNode = getFirstSlotVNode(slots, "trigger");
|
||
}
|
||
if (triggerVNode) {
|
||
triggerVNode = cloneVNode(triggerVNode);
|
||
triggerVNode = triggerVNode.type === Text ? h("span", [triggerVNode]) : triggerVNode;
|
||
const handlers = {
|
||
onClick: this.handleClick,
|
||
onMouseenter: this.handleMouseEnter,
|
||
onMouseleave: this.handleMouseLeave,
|
||
onFocus: this.handleFocus,
|
||
onBlur: this.handleBlur
|
||
};
|
||
if ((_a = triggerVNode.type) === null || _a === void 0 ? void 0 : _a.__popover__) {
|
||
popoverInside = true;
|
||
if (!triggerVNode.props) {
|
||
triggerVNode.props = {
|
||
internalSyncTargetWithParent: true,
|
||
internalInheritedEventHandlers: []
|
||
};
|
||
}
|
||
triggerVNode.props.internalSyncTargetWithParent = true;
|
||
if (!triggerVNode.props.internalInheritedEventHandlers) {
|
||
triggerVNode.props.internalInheritedEventHandlers = [handlers];
|
||
} else {
|
||
triggerVNode.props.internalInheritedEventHandlers = [handlers, ...triggerVNode.props.internalInheritedEventHandlers];
|
||
}
|
||
} else {
|
||
const {
|
||
internalInheritedEventHandlers
|
||
} = this;
|
||
const ascendantAndCurrentHandlers = [handlers, ...internalInheritedEventHandlers];
|
||
const mergedHandlers = {
|
||
onBlur: (e) => {
|
||
ascendantAndCurrentHandlers.forEach((_handlers) => {
|
||
_handlers.onBlur(e);
|
||
});
|
||
},
|
||
onFocus: (e) => {
|
||
ascendantAndCurrentHandlers.forEach((_handlers) => {
|
||
_handlers.onFocus(e);
|
||
});
|
||
},
|
||
onClick: (e) => {
|
||
ascendantAndCurrentHandlers.forEach((_handlers) => {
|
||
_handlers.onClick(e);
|
||
});
|
||
},
|
||
onMouseenter: (e) => {
|
||
ascendantAndCurrentHandlers.forEach((_handlers) => {
|
||
_handlers.onMouseenter(e);
|
||
});
|
||
},
|
||
onMouseleave: (e) => {
|
||
ascendantAndCurrentHandlers.forEach((_handlers) => {
|
||
_handlers.onMouseleave(e);
|
||
});
|
||
}
|
||
};
|
||
appendEvents(triggerVNode, internalInheritedEventHandlers ? "nested" : positionManually ? "manual" : this.trigger, mergedHandlers);
|
||
}
|
||
}
|
||
}
|
||
return h(Binder, {
|
||
ref: "binderInstRef",
|
||
syncTarget: !popoverInside,
|
||
syncTargetWithParent: this.internalSyncTargetWithParent
|
||
}, {
|
||
default: () => {
|
||
void this.mergedShowConsideringDisabledProp;
|
||
const mergedShow = this.getMergedShow();
|
||
return [this.internalTrapFocus && mergedShow ? withDirectives(h("div", {
|
||
style: {
|
||
position: "fixed",
|
||
top: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
left: 0
|
||
}
|
||
}), [[zindexable, {
|
||
enabled: mergedShow,
|
||
zIndex: this.zIndex
|
||
}]]) : null, positionManually ? null : h(VTarget, null, {
|
||
default: () => triggerVNode
|
||
}), h(NPopoverBody, keep(this.$props, bodyPropKeys, Object.assign(Object.assign({}, this.$attrs), {
|
||
showArrow: this.mergedShowArrow,
|
||
show: mergedShow
|
||
})), {
|
||
default: () => {
|
||
var _a2, _b;
|
||
return (_b = (_a2 = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a2);
|
||
},
|
||
header: () => {
|
||
var _a2, _b;
|
||
return (_b = (_a2 = this.$slots).header) === null || _b === void 0 ? void 0 : _b.call(_a2);
|
||
},
|
||
footer: () => {
|
||
var _a2, _b;
|
||
return (_b = (_a2 = this.$slots).footer) === null || _b === void 0 ? void 0 : _b.call(_a2);
|
||
}
|
||
})];
|
||
}
|
||
});
|
||
}
|
||
});
|
||
const isImageSupportNativeLazy = isBrowser && "loading" in document.createElement("img");
|
||
function resolveOptionsAndHash(options = {}) {
|
||
var _a;
|
||
const {
|
||
root: root2 = null
|
||
} = options;
|
||
return {
|
||
hash: `${options.rootMargin || "0px 0px 0px 0px"}-${Array.isArray(options.threshold) ? options.threshold.join(",") : (_a = options.threshold) !== null && _a !== void 0 ? _a : "0"}`,
|
||
options: Object.assign(Object.assign({}, options), {
|
||
root: (typeof root2 === "string" ? document.querySelector(root2) : root2) || document.documentElement
|
||
})
|
||
};
|
||
}
|
||
const observers = /* @__PURE__ */ new WeakMap();
|
||
const unobserveHandleMap = /* @__PURE__ */ new WeakMap();
|
||
const shouldStartLoadingRefMap = /* @__PURE__ */ new WeakMap();
|
||
const observeIntersection = (el, options, shouldStartLoadingRef) => {
|
||
if (!el) return () => {
|
||
};
|
||
const resolvedOptionsAndHash = resolveOptionsAndHash(options);
|
||
const {
|
||
root: root2
|
||
} = resolvedOptionsAndHash.options;
|
||
let rootObservers;
|
||
const _rootObservers = observers.get(root2);
|
||
if (_rootObservers) {
|
||
rootObservers = _rootObservers;
|
||
} else {
|
||
rootObservers = /* @__PURE__ */ new Map();
|
||
observers.set(root2, rootObservers);
|
||
}
|
||
let observer;
|
||
let observerAndObservedElements;
|
||
if (rootObservers.has(resolvedOptionsAndHash.hash)) {
|
||
observerAndObservedElements = rootObservers.get(resolvedOptionsAndHash.hash);
|
||
if (!observerAndObservedElements[1].has(el)) {
|
||
observer = observerAndObservedElements[0];
|
||
observerAndObservedElements[1].add(el);
|
||
observer.observe(el);
|
||
}
|
||
} else {
|
||
observer = new IntersectionObserver((entries) => {
|
||
entries.forEach((entry) => {
|
||
if (entry.isIntersecting) {
|
||
const _unobserve = unobserveHandleMap.get(entry.target);
|
||
const _shouldStartLoadingRef = shouldStartLoadingRefMap.get(entry.target);
|
||
if (_unobserve) _unobserve();
|
||
if (_shouldStartLoadingRef) {
|
||
_shouldStartLoadingRef.value = true;
|
||
}
|
||
}
|
||
});
|
||
}, resolvedOptionsAndHash.options);
|
||
observer.observe(el);
|
||
observerAndObservedElements = [observer, /* @__PURE__ */ new Set([el])];
|
||
rootObservers.set(resolvedOptionsAndHash.hash, observerAndObservedElements);
|
||
}
|
||
let unobservered = false;
|
||
const unobserve = () => {
|
||
if (unobservered) return;
|
||
unobserveHandleMap.delete(el);
|
||
shouldStartLoadingRefMap.delete(el);
|
||
unobservered = true;
|
||
if (observerAndObservedElements[1].has(el)) {
|
||
observerAndObservedElements[0].unobserve(el);
|
||
observerAndObservedElements[1].delete(el);
|
||
}
|
||
if (observerAndObservedElements[1].size <= 0) {
|
||
rootObservers.delete(resolvedOptionsAndHash.hash);
|
||
}
|
||
if (!rootObservers.size) {
|
||
observers.delete(root2);
|
||
}
|
||
};
|
||
unobserveHandleMap.set(el, unobserve);
|
||
shouldStartLoadingRefMap.set(el, shouldStartLoadingRef);
|
||
return unobserve;
|
||
};
|
||
const tooltipProps = Object.assign(Object.assign({}, popoverBaseProps), useTheme.props);
|
||
const __unplugin_components_3 = defineComponent({
|
||
name: "Tooltip",
|
||
props: tooltipProps,
|
||
__popover__: true,
|
||
setup(props) {
|
||
const {
|
||
mergedClsPrefixRef
|
||
} = useConfig(props);
|
||
const themeRef = useTheme("Tooltip", "-tooltip", void 0, tooltipLight, props, mergedClsPrefixRef);
|
||
const popoverRef = ref(null);
|
||
const tooltipExposedMethod = {
|
||
syncPosition() {
|
||
popoverRef.value.syncPosition();
|
||
},
|
||
setShow(show) {
|
||
popoverRef.value.setShow(show);
|
||
}
|
||
};
|
||
return Object.assign(Object.assign({}, tooltipExposedMethod), {
|
||
popoverRef,
|
||
mergedTheme: themeRef,
|
||
popoverThemeOverrides: computed(() => {
|
||
return themeRef.value.self;
|
||
})
|
||
});
|
||
},
|
||
render() {
|
||
const {
|
||
mergedTheme,
|
||
internalExtraClass
|
||
} = this;
|
||
return h(__unplugin_components_5, Object.assign(Object.assign({}, this.$props), {
|
||
theme: mergedTheme.peers.Popover,
|
||
themeOverrides: mergedTheme.peerOverrides.Popover,
|
||
builtinThemeOverrides: this.popoverThemeOverrides,
|
||
internalExtraClass: internalExtraClass.concat("tooltip"),
|
||
ref: "popoverRef"
|
||
}), this.$slots);
|
||
}
|
||
});
|
||
function renderPrevIcon() {
|
||
return h("svg", {
|
||
viewBox: "0 0 20 20",
|
||
fill: "none",
|
||
xmlns: "http://www.w3.org/2000/svg"
|
||
}, h("path", {
|
||
d: "M6 5C5.75454 5 5.55039 5.17688 5.50806 5.41012L5.5 5.5V14.5C5.5 14.7761 5.72386 15 6 15C6.24546 15 6.44961 14.8231 6.49194 14.5899L6.5 14.5V5.5C6.5 5.22386 6.27614 5 6 5ZM13.8536 5.14645C13.68 4.97288 13.4106 4.9536 13.2157 5.08859L13.1464 5.14645L8.64645 9.64645C8.47288 9.82001 8.4536 10.0894 8.58859 10.2843L8.64645 10.3536L13.1464 14.8536C13.3417 15.0488 13.6583 15.0488 13.8536 14.8536C14.0271 14.68 14.0464 14.4106 13.9114 14.2157L13.8536 14.1464L9.70711 10L13.8536 5.85355C14.0488 5.65829 14.0488 5.34171 13.8536 5.14645Z",
|
||
fill: "currentColor"
|
||
}));
|
||
}
|
||
function renderNextIcon() {
|
||
return h("svg", {
|
||
viewBox: "0 0 20 20",
|
||
fill: "none",
|
||
xmlns: "http://www.w3.org/2000/svg"
|
||
}, h("path", {
|
||
d: "M13.5 5C13.7455 5 13.9496 5.17688 13.9919 5.41012L14 5.5V14.5C14 14.7761 13.7761 15 13.5 15C13.2545 15 13.0504 14.8231 13.0081 14.5899L13 14.5V5.5C13 5.22386 13.2239 5 13.5 5ZM5.64645 5.14645C5.82001 4.97288 6.08944 4.9536 6.28431 5.08859L6.35355 5.14645L10.8536 9.64645C11.0271 9.82001 11.0464 10.0894 10.9114 10.2843L10.8536 10.3536L6.35355 14.8536C6.15829 15.0488 5.84171 15.0488 5.64645 14.8536C5.47288 14.68 5.4536 14.4106 5.58859 14.2157L5.64645 14.1464L9.79289 10L5.64645 5.85355C5.45118 5.65829 5.45118 5.34171 5.64645 5.14645Z",
|
||
fill: "currentColor"
|
||
}));
|
||
}
|
||
function renderCloseIcon() {
|
||
return h("svg", {
|
||
viewBox: "0 0 20 20",
|
||
fill: "none",
|
||
xmlns: "http://www.w3.org/2000/svg"
|
||
}, h("path", {
|
||
d: "M4.089 4.216l.057-.07a.5.5 0 0 1 .638-.057l.07.057L10 9.293l5.146-5.147a.5.5 0 0 1 .638-.057l.07.057a.5.5 0 0 1 .057.638l-.057.07L10.707 10l5.147 5.146a.5.5 0 0 1 .057.638l-.057.07a.5.5 0 0 1-.638.057l-.07-.057L10 10.707l-5.146 5.147a.5.5 0 0 1-.638.057l-.07-.057a.5.5 0 0 1-.057-.638l.057-.07L9.293 10L4.146 4.854a.5.5 0 0 1-.057-.638l.057-.07l-.057.07z",
|
||
fill: "currentColor"
|
||
}));
|
||
}
|
||
const imagePreviewSharedProps = Object.assign(Object.assign({}, useTheme.props), {
|
||
onPreviewPrev: Function,
|
||
onPreviewNext: Function,
|
||
showToolbar: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
showToolbarTooltip: Boolean,
|
||
renderToolbar: Function
|
||
});
|
||
const imageContextKey = createInjectionKey("n-image");
|
||
const style = c([c("body >", [cB("image-container", "position: fixed;")]), cB("image-preview-container", `
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
display: flex;
|
||
`), cB("image-preview-overlay", `
|
||
z-index: -1;
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, .3);
|
||
`, [fadeInTransition()]), cB("image-preview-toolbar", `
|
||
z-index: 1;
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
border-radius: var(--n-toolbar-border-radius);
|
||
height: 48px;
|
||
bottom: 40px;
|
||
padding: 0 12px;
|
||
background: var(--n-toolbar-color);
|
||
box-shadow: var(--n-toolbar-box-shadow);
|
||
color: var(--n-toolbar-icon-color);
|
||
transition: color .3s var(--n-bezier);
|
||
display: flex;
|
||
align-items: center;
|
||
`, [cB("base-icon", `
|
||
padding: 0 8px;
|
||
font-size: 28px;
|
||
cursor: pointer;
|
||
`), fadeInTransition()]), cB("image-preview-wrapper", `
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
display: flex;
|
||
pointer-events: none;
|
||
`, [fadeInScaleUpTransition()]), cB("image-preview", `
|
||
user-select: none;
|
||
-webkit-user-select: none;
|
||
pointer-events: all;
|
||
margin: auto;
|
||
max-height: calc(100vh - 32px);
|
||
max-width: calc(100vw - 32px);
|
||
transition: transform .3s var(--n-bezier);
|
||
`), cB("image", `
|
||
display: inline-flex;
|
||
max-height: 100%;
|
||
max-width: 100%;
|
||
`, [cNotM("preview-disabled", `
|
||
cursor: pointer;
|
||
`), c("img", `
|
||
border-radius: inherit;
|
||
`)])]);
|
||
const BLEEDING = 32;
|
||
const NImagePreview = defineComponent({
|
||
name: "ImagePreview",
|
||
props: Object.assign(Object.assign({}, imagePreviewSharedProps), {
|
||
onNext: Function,
|
||
onPrev: Function,
|
||
clsPrefix: {
|
||
type: String,
|
||
required: true
|
||
}
|
||
}),
|
||
setup(props) {
|
||
const themeRef = useTheme("Image", "-image", style, imageLight, props, toRef(props, "clsPrefix"));
|
||
let thumbnailEl = null;
|
||
const previewRef = ref(null);
|
||
const previewWrapperRef = ref(null);
|
||
const previewSrcRef = ref(void 0);
|
||
const showRef = ref(false);
|
||
const displayedRef = ref(false);
|
||
const {
|
||
localeRef
|
||
} = useLocale("Image");
|
||
function syncTransformOrigin() {
|
||
const {
|
||
value: previewWrapper
|
||
} = previewWrapperRef;
|
||
if (!thumbnailEl || !previewWrapper) return;
|
||
const {
|
||
style: style2
|
||
} = previewWrapper;
|
||
const tbox = thumbnailEl.getBoundingClientRect();
|
||
const tx = tbox.left + tbox.width / 2;
|
||
const ty = tbox.top + tbox.height / 2;
|
||
style2.transformOrigin = `${tx}px ${ty}px`;
|
||
}
|
||
function handleKeydown(e) {
|
||
var _a, _b;
|
||
switch (e.key) {
|
||
case " ":
|
||
e.preventDefault();
|
||
break;
|
||
case "ArrowLeft":
|
||
(_a = props.onPrev) === null || _a === void 0 ? void 0 : _a.call(props);
|
||
break;
|
||
case "ArrowRight":
|
||
(_b = props.onNext) === null || _b === void 0 ? void 0 : _b.call(props);
|
||
break;
|
||
case "Escape":
|
||
toggleShow();
|
||
break;
|
||
}
|
||
}
|
||
watch(showRef, (value) => {
|
||
if (value) {
|
||
on("keydown", document, handleKeydown);
|
||
} else {
|
||
off("keydown", document, handleKeydown);
|
||
}
|
||
});
|
||
onBeforeUnmount(() => {
|
||
off("keydown", document, handleKeydown);
|
||
});
|
||
let startX = 0;
|
||
let startY = 0;
|
||
let offsetX = 0;
|
||
let offsetY = 0;
|
||
let startOffsetX = 0;
|
||
let startOffsetY = 0;
|
||
let mouseDownClientX = 0;
|
||
let mouseDownClientY = 0;
|
||
let dragging = false;
|
||
function handleMouseMove(e) {
|
||
const {
|
||
clientX,
|
||
clientY
|
||
} = e;
|
||
offsetX = clientX - startX;
|
||
offsetY = clientY - startY;
|
||
beforeNextFrameOnce(derivePreviewStyle);
|
||
}
|
||
function getMoveStrategy(opts) {
|
||
const {
|
||
mouseUpClientX,
|
||
mouseUpClientY,
|
||
mouseDownClientX: mouseDownClientX2,
|
||
mouseDownClientY: mouseDownClientY2
|
||
} = opts;
|
||
const deltaHorizontal = mouseDownClientX2 - mouseUpClientX;
|
||
const deltaVertical = mouseDownClientY2 - mouseUpClientY;
|
||
const moveVerticalDirection = `vertical${deltaVertical > 0 ? "Top" : "Bottom"}`;
|
||
const moveHorizontalDirection = `horizontal${deltaHorizontal > 0 ? "Left" : "Right"}`;
|
||
return {
|
||
moveVerticalDirection,
|
||
moveHorizontalDirection,
|
||
deltaHorizontal,
|
||
deltaVertical
|
||
};
|
||
}
|
||
function getDerivedOffset(moveStrategy) {
|
||
const {
|
||
value: preview
|
||
} = previewRef;
|
||
if (!preview) return {
|
||
offsetX: 0,
|
||
offsetY: 0
|
||
};
|
||
const pbox = preview.getBoundingClientRect();
|
||
const {
|
||
moveVerticalDirection,
|
||
moveHorizontalDirection,
|
||
deltaHorizontal,
|
||
deltaVertical
|
||
} = moveStrategy || {};
|
||
let nextOffsetX = 0;
|
||
let nextOffsetY = 0;
|
||
if (pbox.width <= window.innerWidth) {
|
||
nextOffsetX = 0;
|
||
} else if (pbox.left > 0) {
|
||
nextOffsetX = (pbox.width - window.innerWidth) / 2;
|
||
} else if (pbox.right < window.innerWidth) {
|
||
nextOffsetX = -(pbox.width - window.innerWidth) / 2;
|
||
} else if (moveHorizontalDirection === "horizontalRight") {
|
||
nextOffsetX = Math.min((pbox.width - window.innerWidth) / 2, startOffsetX - (deltaHorizontal !== null && deltaHorizontal !== void 0 ? deltaHorizontal : 0));
|
||
} else {
|
||
nextOffsetX = Math.max(-((pbox.width - window.innerWidth) / 2), startOffsetX - (deltaHorizontal !== null && deltaHorizontal !== void 0 ? deltaHorizontal : 0));
|
||
}
|
||
if (pbox.height <= window.innerHeight) {
|
||
nextOffsetY = 0;
|
||
} else if (pbox.top > 0) {
|
||
nextOffsetY = (pbox.height - window.innerHeight) / 2;
|
||
} else if (pbox.bottom < window.innerHeight) {
|
||
nextOffsetY = -(pbox.height - window.innerHeight) / 2;
|
||
} else if (moveVerticalDirection === "verticalBottom") {
|
||
nextOffsetY = Math.min((pbox.height - window.innerHeight) / 2, startOffsetY - (deltaVertical !== null && deltaVertical !== void 0 ? deltaVertical : 0));
|
||
} else {
|
||
nextOffsetY = Math.max(-((pbox.height - window.innerHeight) / 2), startOffsetY - (deltaVertical !== null && deltaVertical !== void 0 ? deltaVertical : 0));
|
||
}
|
||
return {
|
||
offsetX: nextOffsetX,
|
||
offsetY: nextOffsetY
|
||
};
|
||
}
|
||
function handleMouseUp(e) {
|
||
off("mousemove", document, handleMouseMove);
|
||
off("mouseup", document, handleMouseUp);
|
||
const {
|
||
clientX: mouseUpClientX,
|
||
clientY: mouseUpClientY
|
||
} = e;
|
||
dragging = false;
|
||
const moveStrategy = getMoveStrategy({
|
||
mouseUpClientX,
|
||
mouseUpClientY,
|
||
mouseDownClientX,
|
||
mouseDownClientY
|
||
});
|
||
const offset = getDerivedOffset(moveStrategy);
|
||
offsetX = offset.offsetX;
|
||
offsetY = offset.offsetY;
|
||
derivePreviewStyle();
|
||
}
|
||
const imageContext = inject(imageContextKey, null);
|
||
function handlePreviewMousedown(e) {
|
||
var _a, _b;
|
||
(_b = (_a = imageContext === null || imageContext === void 0 ? void 0 : imageContext.previewedImgPropsRef.value) === null || _a === void 0 ? void 0 : _a.onMousedown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
|
||
if (e.button !== 0) return;
|
||
const {
|
||
clientX,
|
||
clientY
|
||
} = e;
|
||
dragging = true;
|
||
startX = clientX - offsetX;
|
||
startY = clientY - offsetY;
|
||
startOffsetX = offsetX;
|
||
startOffsetY = offsetY;
|
||
mouseDownClientX = clientX;
|
||
mouseDownClientY = clientY;
|
||
derivePreviewStyle();
|
||
on("mousemove", document, handleMouseMove);
|
||
on("mouseup", document, handleMouseUp);
|
||
}
|
||
const scaleRadix = 1.5;
|
||
let scaleExp = 0;
|
||
let scale = 1;
|
||
let rotate = 0;
|
||
function handlePreviewDblclick(e) {
|
||
var _a, _b;
|
||
(_b = (_a = imageContext === null || imageContext === void 0 ? void 0 : imageContext.previewedImgPropsRef.value) === null || _a === void 0 ? void 0 : _a.onDblclick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
|
||
const originalImageSizeScale = getOrignalImageSizeScale();
|
||
scale = scale === originalImageSizeScale ? 1 : originalImageSizeScale;
|
||
derivePreviewStyle();
|
||
}
|
||
function resetScale() {
|
||
scale = 1;
|
||
scaleExp = 0;
|
||
}
|
||
function handleSwitchPrev() {
|
||
var _a;
|
||
resetScale();
|
||
rotate = 0;
|
||
(_a = props.onPrev) === null || _a === void 0 ? void 0 : _a.call(props);
|
||
}
|
||
function handleSwitchNext() {
|
||
var _a;
|
||
resetScale();
|
||
rotate = 0;
|
||
(_a = props.onNext) === null || _a === void 0 ? void 0 : _a.call(props);
|
||
}
|
||
function rotateCounterclockwise() {
|
||
rotate -= 90;
|
||
derivePreviewStyle();
|
||
}
|
||
function rotateClockwise() {
|
||
rotate += 90;
|
||
derivePreviewStyle();
|
||
}
|
||
function getMaxScale() {
|
||
const {
|
||
value: preview
|
||
} = previewRef;
|
||
if (!preview) return 1;
|
||
const {
|
||
innerWidth,
|
||
innerHeight
|
||
} = window;
|
||
const heightMaxScale = Math.max(1, preview.naturalHeight / (innerHeight - BLEEDING));
|
||
const widthMaxScale = Math.max(1, preview.naturalWidth / (innerWidth - BLEEDING));
|
||
return Math.max(3, heightMaxScale * 2, widthMaxScale * 2);
|
||
}
|
||
function getOrignalImageSizeScale() {
|
||
const {
|
||
value: preview
|
||
} = previewRef;
|
||
if (!preview) return 1;
|
||
const {
|
||
innerWidth,
|
||
innerHeight
|
||
} = window;
|
||
const heightScale = preview.naturalHeight / (innerHeight - BLEEDING);
|
||
const widthScale = preview.naturalWidth / (innerWidth - BLEEDING);
|
||
if (heightScale < 1 && widthScale < 1) {
|
||
return 1;
|
||
}
|
||
return Math.max(heightScale, widthScale);
|
||
}
|
||
function zoomIn() {
|
||
const maxScale = getMaxScale();
|
||
if (scale < maxScale) {
|
||
scaleExp += 1;
|
||
scale = Math.min(maxScale, Math.pow(scaleRadix, scaleExp));
|
||
derivePreviewStyle();
|
||
}
|
||
}
|
||
function zoomOut() {
|
||
if (scale > 0.5) {
|
||
const originalScale = scale;
|
||
scaleExp -= 1;
|
||
scale = Math.max(0.5, Math.pow(scaleRadix, scaleExp));
|
||
const diff = originalScale - scale;
|
||
derivePreviewStyle(false);
|
||
const offset = getDerivedOffset();
|
||
scale += diff;
|
||
derivePreviewStyle(false);
|
||
scale -= diff;
|
||
offsetX = offset.offsetX;
|
||
offsetY = offset.offsetY;
|
||
derivePreviewStyle();
|
||
}
|
||
}
|
||
function handleDownloadClick() {
|
||
const src = previewSrcRef.value;
|
||
if (src) {
|
||
download(src);
|
||
}
|
||
}
|
||
function derivePreviewStyle(transition = true) {
|
||
var _a;
|
||
const {
|
||
value: preview
|
||
} = previewRef;
|
||
if (!preview) return;
|
||
const {
|
||
style: style2
|
||
} = preview;
|
||
const controlledStyle = normalizeStyle((_a = imageContext === null || imageContext === void 0 ? void 0 : imageContext.previewedImgPropsRef.value) === null || _a === void 0 ? void 0 : _a.style);
|
||
let controlledStyleString = "";
|
||
if (typeof controlledStyle === "string") {
|
||
controlledStyleString = `${controlledStyle};`;
|
||
} else {
|
||
for (const key in controlledStyle) {
|
||
controlledStyleString += `${kebabCase(key)}: ${controlledStyle[key]};`;
|
||
}
|
||
}
|
||
const transformStyle = `transform-origin: center; transform: translateX(${offsetX}px) translateY(${offsetY}px) rotate(${rotate}deg) scale(${scale});`;
|
||
if (dragging) {
|
||
style2.cssText = `${controlledStyleString}cursor: grabbing; transition: none;${transformStyle}`;
|
||
} else {
|
||
style2.cssText = `${controlledStyleString}cursor: grab;${transformStyle}${transition ? "" : "transition: none;"}`;
|
||
}
|
||
if (!transition) {
|
||
void preview.offsetHeight;
|
||
}
|
||
}
|
||
function toggleShow() {
|
||
showRef.value = !showRef.value;
|
||
displayedRef.value = true;
|
||
}
|
||
function resizeToOrignalImageSize() {
|
||
scale = getOrignalImageSizeScale();
|
||
scaleExp = Math.ceil(Math.log(scale) / Math.log(scaleRadix));
|
||
offsetX = 0;
|
||
offsetY = 0;
|
||
derivePreviewStyle();
|
||
}
|
||
const exposedMethods = {
|
||
setPreviewSrc: (src) => {
|
||
previewSrcRef.value = src;
|
||
},
|
||
setThumbnailEl: (el) => {
|
||
thumbnailEl = el;
|
||
},
|
||
toggleShow
|
||
};
|
||
function withTooltip(node, tooltipKey) {
|
||
if (props.showToolbarTooltip) {
|
||
const {
|
||
value: theme
|
||
} = themeRef;
|
||
return h(__unplugin_components_3, {
|
||
to: false,
|
||
theme: theme.peers.Tooltip,
|
||
themeOverrides: theme.peerOverrides.Tooltip,
|
||
keepAliveOnHover: false
|
||
}, {
|
||
default: () => {
|
||
return localeRef.value[tooltipKey];
|
||
},
|
||
trigger: () => node
|
||
});
|
||
} else {
|
||
return node;
|
||
}
|
||
}
|
||
const cssVarsRef = computed(() => {
|
||
const {
|
||
common: {
|
||
cubicBezierEaseInOut
|
||
},
|
||
self: {
|
||
toolbarIconColor,
|
||
toolbarBorderRadius,
|
||
toolbarBoxShadow,
|
||
toolbarColor
|
||
}
|
||
} = themeRef.value;
|
||
return {
|
||
"--n-bezier": cubicBezierEaseInOut,
|
||
"--n-toolbar-icon-color": toolbarIconColor,
|
||
"--n-toolbar-color": toolbarColor,
|
||
"--n-toolbar-border-radius": toolbarBorderRadius,
|
||
"--n-toolbar-box-shadow": toolbarBoxShadow
|
||
};
|
||
});
|
||
const {
|
||
inlineThemeDisabled
|
||
} = useConfig();
|
||
const themeClassHandle = inlineThemeDisabled ? useThemeClass("image-preview", void 0, cssVarsRef, props) : void 0;
|
||
return Object.assign({
|
||
previewRef,
|
||
previewWrapperRef,
|
||
previewSrc: previewSrcRef,
|
||
show: showRef,
|
||
appear: isMounted(),
|
||
displayed: displayedRef,
|
||
previewedImgProps: imageContext === null || imageContext === void 0 ? void 0 : imageContext.previewedImgPropsRef,
|
||
handleWheel(e) {
|
||
e.preventDefault();
|
||
},
|
||
handlePreviewMousedown,
|
||
handlePreviewDblclick,
|
||
syncTransformOrigin,
|
||
handleAfterLeave: () => {
|
||
resetScale();
|
||
rotate = 0;
|
||
displayedRef.value = false;
|
||
},
|
||
handleDragStart: (e) => {
|
||
var _a, _b;
|
||
(_b = (_a = imageContext === null || imageContext === void 0 ? void 0 : imageContext.previewedImgPropsRef.value) === null || _a === void 0 ? void 0 : _a.onDragstart) === null || _b === void 0 ? void 0 : _b.call(_a, e);
|
||
e.preventDefault();
|
||
},
|
||
zoomIn,
|
||
zoomOut,
|
||
handleDownloadClick,
|
||
rotateCounterclockwise,
|
||
rotateClockwise,
|
||
handleSwitchPrev,
|
||
handleSwitchNext,
|
||
withTooltip,
|
||
resizeToOrignalImageSize,
|
||
cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
|
||
themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
|
||
onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
|
||
}, exposedMethods);
|
||
},
|
||
render() {
|
||
var _a, _b;
|
||
const {
|
||
clsPrefix,
|
||
renderToolbar,
|
||
withTooltip
|
||
} = this;
|
||
const prevNode = withTooltip(h(NBaseIcon, {
|
||
clsPrefix,
|
||
onClick: this.handleSwitchPrev
|
||
}, {
|
||
default: renderPrevIcon
|
||
}), "tipPrevious");
|
||
const nextNode = withTooltip(h(NBaseIcon, {
|
||
clsPrefix,
|
||
onClick: this.handleSwitchNext
|
||
}, {
|
||
default: renderNextIcon
|
||
}), "tipNext");
|
||
const rotateCounterclockwiseNode = withTooltip(h(NBaseIcon, {
|
||
clsPrefix,
|
||
onClick: this.rotateCounterclockwise
|
||
}, {
|
||
default: () => h(RotateCounterclockwiseIcon, null)
|
||
}), "tipCounterclockwise");
|
||
const rotateClockwiseNode = withTooltip(h(NBaseIcon, {
|
||
clsPrefix,
|
||
onClick: this.rotateClockwise
|
||
}, {
|
||
default: () => h(RotateClockwiseIcon, null)
|
||
}), "tipClockwise");
|
||
const originalSizeNode = withTooltip(h(NBaseIcon, {
|
||
clsPrefix,
|
||
onClick: this.resizeToOrignalImageSize
|
||
}, {
|
||
default: () => {
|
||
return h(ResizeSmallIcon, null);
|
||
}
|
||
}), "tipOriginalSize");
|
||
const zoomOutNode = withTooltip(h(NBaseIcon, {
|
||
clsPrefix,
|
||
onClick: this.zoomOut
|
||
}, {
|
||
default: () => h(ZoomOutIcon, null)
|
||
}), "tipZoomOut");
|
||
const downloadNode = withTooltip(h(NBaseIcon, {
|
||
clsPrefix,
|
||
onClick: this.handleDownloadClick
|
||
}, {
|
||
default: () => h(DownloadIcon, null)
|
||
}), "tipDownload");
|
||
const closeNode = withTooltip(h(NBaseIcon, {
|
||
clsPrefix,
|
||
onClick: this.toggleShow
|
||
}, {
|
||
default: renderCloseIcon
|
||
}), "tipClose");
|
||
const zoomInNode = withTooltip(h(NBaseIcon, {
|
||
clsPrefix,
|
||
onClick: this.zoomIn
|
||
}, {
|
||
default: () => h(ZoomInIcon, null)
|
||
}), "tipZoomIn");
|
||
return h(Fragment, null, (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a), h(LazyTeleport, {
|
||
show: this.show
|
||
}, {
|
||
default: () => {
|
||
var _a2;
|
||
if (!(this.show || this.displayed)) {
|
||
return null;
|
||
}
|
||
(_a2 = this.onRender) === null || _a2 === void 0 ? void 0 : _a2.call(this);
|
||
return withDirectives(h("div", {
|
||
class: [`${clsPrefix}-image-preview-container`, this.themeClass],
|
||
style: this.cssVars,
|
||
onWheel: this.handleWheel
|
||
}, h(Transition, {
|
||
name: "fade-in-transition",
|
||
appear: this.appear
|
||
}, {
|
||
default: () => this.show ? h("div", {
|
||
class: `${clsPrefix}-image-preview-overlay`,
|
||
onClick: this.toggleShow
|
||
}) : null
|
||
}), this.showToolbar ? h(Transition, {
|
||
name: "fade-in-transition",
|
||
appear: this.appear
|
||
}, {
|
||
default: () => {
|
||
if (!this.show) return null;
|
||
return h("div", {
|
||
class: `${clsPrefix}-image-preview-toolbar`
|
||
}, renderToolbar ? renderToolbar({
|
||
nodes: {
|
||
prev: prevNode,
|
||
next: nextNode,
|
||
rotateCounterclockwise: rotateCounterclockwiseNode,
|
||
rotateClockwise: rotateClockwiseNode,
|
||
resizeToOriginalSize: originalSizeNode,
|
||
zoomOut: zoomOutNode,
|
||
zoomIn: zoomInNode,
|
||
download: downloadNode,
|
||
close: closeNode
|
||
}
|
||
}) : h(Fragment, null, this.onPrev ? h(Fragment, null, prevNode, nextNode) : null, rotateCounterclockwiseNode, rotateClockwiseNode, originalSizeNode, zoomOutNode, zoomInNode, downloadNode, closeNode));
|
||
}
|
||
}) : null, h(Transition, {
|
||
name: "fade-in-scale-up-transition",
|
||
onAfterLeave: this.handleAfterLeave,
|
||
appear: this.appear,
|
||
// BUG:
|
||
// onEnter will be called twice, I don't know why
|
||
// Maybe it is a bug of vue
|
||
onEnter: this.syncTransformOrigin,
|
||
onBeforeLeave: this.syncTransformOrigin
|
||
}, {
|
||
default: () => {
|
||
const {
|
||
previewedImgProps = {}
|
||
} = this;
|
||
return withDirectives(h("div", {
|
||
class: `${clsPrefix}-image-preview-wrapper`,
|
||
ref: "previewWrapperRef"
|
||
}, h("img", Object.assign({}, previewedImgProps, {
|
||
draggable: false,
|
||
onMousedown: this.handlePreviewMousedown,
|
||
onDblclick: this.handlePreviewDblclick,
|
||
class: [`${clsPrefix}-image-preview`, previewedImgProps.class],
|
||
key: this.previewSrc,
|
||
src: this.previewSrc,
|
||
ref: "previewRef",
|
||
onDragstart: this.handleDragStart
|
||
}))), [[vShow, this.show]]);
|
||
}
|
||
})), [[zindexable, {
|
||
enabled: this.show
|
||
}]]);
|
||
}
|
||
}));
|
||
}
|
||
});
|
||
const imageGroupInjectionKey = createInjectionKey("n-image-group");
|
||
const imageProps = Object.assign({
|
||
alt: String,
|
||
height: [String, Number],
|
||
imgProps: Object,
|
||
previewedImgProps: Object,
|
||
lazy: Boolean,
|
||
intersectionObserverOptions: Object,
|
||
objectFit: {
|
||
type: String,
|
||
default: "fill"
|
||
},
|
||
previewSrc: String,
|
||
fallbackSrc: String,
|
||
width: [String, Number],
|
||
src: String,
|
||
previewDisabled: Boolean,
|
||
loadDescription: String,
|
||
onError: Function,
|
||
onLoad: Function
|
||
}, imagePreviewSharedProps);
|
||
const NImage = defineComponent({
|
||
name: "Image",
|
||
props: imageProps,
|
||
inheritAttrs: false,
|
||
setup(props) {
|
||
const imageRef = ref(null);
|
||
const showErrorRef = ref(false);
|
||
const previewInstRef = ref(null);
|
||
const imageGroupHandle = inject(imageGroupInjectionKey, null);
|
||
const {
|
||
mergedClsPrefixRef
|
||
} = imageGroupHandle || useConfig(props);
|
||
const exposedMethods = {
|
||
click: () => {
|
||
if (props.previewDisabled || showErrorRef.value) return;
|
||
const mergedPreviewSrc = props.previewSrc || props.src;
|
||
if (imageGroupHandle) {
|
||
imageGroupHandle.setPreviewSrc(mergedPreviewSrc);
|
||
imageGroupHandle.setThumbnailEl(imageRef.value);
|
||
imageGroupHandle.toggleShow();
|
||
return;
|
||
}
|
||
const {
|
||
value: previewInst
|
||
} = previewInstRef;
|
||
if (!previewInst) return;
|
||
previewInst.setPreviewSrc(mergedPreviewSrc);
|
||
previewInst.setThumbnailEl(imageRef.value);
|
||
previewInst.toggleShow();
|
||
}
|
||
};
|
||
const shouldStartLoadingRef = ref(!props.lazy);
|
||
onMounted(() => {
|
||
var _a;
|
||
(_a = imageRef.value) === null || _a === void 0 ? void 0 : _a.setAttribute("data-group-id", (imageGroupHandle === null || imageGroupHandle === void 0 ? void 0 : imageGroupHandle.groupId) || "");
|
||
});
|
||
onMounted(() => {
|
||
if (props.lazy && props.intersectionObserverOptions) {
|
||
let unobserve;
|
||
const stopWatchHandle = watchEffect(() => {
|
||
unobserve === null || unobserve === void 0 ? void 0 : unobserve();
|
||
unobserve = void 0;
|
||
unobserve = observeIntersection(imageRef.value, props.intersectionObserverOptions, shouldStartLoadingRef);
|
||
});
|
||
onBeforeUnmount(() => {
|
||
stopWatchHandle();
|
||
unobserve === null || unobserve === void 0 ? void 0 : unobserve();
|
||
});
|
||
}
|
||
});
|
||
watchEffect(() => {
|
||
var _a;
|
||
void (props.src || ((_a = props.imgProps) === null || _a === void 0 ? void 0 : _a.src));
|
||
showErrorRef.value = false;
|
||
});
|
||
const loadedRef = ref(false);
|
||
provide(imageContextKey, {
|
||
previewedImgPropsRef: toRef(props, "previewedImgProps")
|
||
});
|
||
return Object.assign({
|
||
mergedClsPrefix: mergedClsPrefixRef,
|
||
groupId: imageGroupHandle === null || imageGroupHandle === void 0 ? void 0 : imageGroupHandle.groupId,
|
||
previewInstRef,
|
||
imageRef,
|
||
showError: showErrorRef,
|
||
shouldStartLoading: shouldStartLoadingRef,
|
||
loaded: loadedRef,
|
||
mergedOnClick: (e) => {
|
||
var _a, _b;
|
||
exposedMethods.click();
|
||
(_b = (_a = props.imgProps) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
|
||
},
|
||
mergedOnError: (e) => {
|
||
if (!shouldStartLoadingRef.value) return;
|
||
showErrorRef.value = true;
|
||
const {
|
||
onError,
|
||
imgProps: {
|
||
onError: imgPropsOnError
|
||
} = {}
|
||
} = props;
|
||
onError === null || onError === void 0 ? void 0 : onError(e);
|
||
imgPropsOnError === null || imgPropsOnError === void 0 ? void 0 : imgPropsOnError(e);
|
||
},
|
||
mergedOnLoad: (e) => {
|
||
const {
|
||
onLoad,
|
||
imgProps: {
|
||
onLoad: imgPropsOnLoad
|
||
} = {}
|
||
} = props;
|
||
onLoad === null || onLoad === void 0 ? void 0 : onLoad(e);
|
||
imgPropsOnLoad === null || imgPropsOnLoad === void 0 ? void 0 : imgPropsOnLoad(e);
|
||
loadedRef.value = true;
|
||
}
|
||
}, exposedMethods);
|
||
},
|
||
render() {
|
||
var _a, _b;
|
||
const {
|
||
mergedClsPrefix,
|
||
imgProps = {},
|
||
loaded,
|
||
$attrs,
|
||
lazy
|
||
} = this;
|
||
const errorNode = resolveSlot(this.$slots.error, () => []);
|
||
const placeholderNode = (_b = (_a = this.$slots).placeholder) === null || _b === void 0 ? void 0 : _b.call(_a);
|
||
const loadSrc = this.src || imgProps.src;
|
||
const imgNode = this.showError && errorNode.length ? errorNode : h("img", Object.assign(Object.assign({}, imgProps), {
|
||
ref: "imageRef",
|
||
width: this.width || imgProps.width,
|
||
height: this.height || imgProps.height,
|
||
src: this.showError ? this.fallbackSrc : lazy && this.intersectionObserverOptions ? this.shouldStartLoading ? loadSrc : void 0 : loadSrc,
|
||
alt: this.alt || imgProps.alt,
|
||
"aria-label": this.alt || imgProps.alt,
|
||
onClick: this.mergedOnClick,
|
||
onError: this.mergedOnError,
|
||
onLoad: this.mergedOnLoad,
|
||
// If interseciton observer options is set, do not use native lazy
|
||
loading: isImageSupportNativeLazy && lazy && !this.intersectionObserverOptions ? "lazy" : "eager",
|
||
style: [imgProps.style || "", placeholderNode && !loaded ? {
|
||
height: "0",
|
||
width: "0",
|
||
visibility: "hidden"
|
||
} : "", {
|
||
objectFit: this.objectFit
|
||
}],
|
||
"data-error": this.showError,
|
||
"data-preview-src": this.previewSrc || this.src
|
||
}));
|
||
return h("div", Object.assign({}, $attrs, {
|
||
role: "none",
|
||
class: [$attrs.class, `${mergedClsPrefix}-image`, (this.previewDisabled || this.showError) && `${mergedClsPrefix}-image--preview-disabled`]
|
||
}), this.groupId ? imgNode : h(NImagePreview, {
|
||
theme: this.theme,
|
||
themeOverrides: this.themeOverrides,
|
||
clsPrefix: mergedClsPrefix,
|
||
ref: "previewInstRef",
|
||
showToolbar: this.showToolbar,
|
||
showToolbarTooltip: this.showToolbarTooltip,
|
||
renderToolbar: this.renderToolbar
|
||
}, {
|
||
default: () => imgNode,
|
||
toolbar: () => {
|
||
var _a2, _b2;
|
||
return (_b2 = (_a2 = this.$slots).toolbar) === null || _b2 === void 0 ? void 0 : _b2.call(_a2);
|
||
}
|
||
}), !loaded && placeholderNode);
|
||
}
|
||
});
|
||
export {
|
||
NImage as N,
|
||
__unplugin_components_3 as _,
|
||
__unplugin_components_5 as a,
|
||
formatLength as f,
|
||
isImageSupportNativeLazy as i,
|
||
observeIntersection as o,
|
||
popoverBaseProps as p,
|
||
renderArrow as r
|
||
};
|