Element Plus v2.1.11
Skrip ini tidak untuk dipasang secara langsung. Ini adalah pustaka skrip lain untuk disertakan dengan direktif meta // @require https://update.greasyfork.org/scripts/488201/1332874/elementPlus.js
let elementwin = window.unsafeWindow || document.defaultView || window;
(function (global, factory) {
elementwin.ElementPlus={}
factory(elementwin.ElementPlus, elementwin.Vue)
})(elementwin, function (exports, vue) {
"use strict";
let $ELEMENT = {};
const setConfig = (option) => {
$ELEMENT = option;
};
const getConfig = (key) => {
return $ELEMENT[key];
};
function fromPairs(pairs) {
var index = -1,
length = pairs == null ? 0 : pairs.length,
result = {};
while (++index < length) {
var pair = pairs[index];
result[pair[0]] = pair[1];
}
return result;
}
var fromPairs_1 = fromPairs;
class ElementPlusError extends Error {
constructor(m) {
super(m);
this.name = "ElementPlusError";
}
}
function throwError(scope, m) {
throw new ElementPlusError(`[${scope}] ${m}`);
}
function debugWarn(scope, message) {}
const DEFAULT_EXCLUDE_KEYS = ["class", "style"];
const LISTENER_PREFIX = /^on[A-Z]/;
var useAttrs = (params = {}) => {
const { excludeListeners = false, excludeKeys = [] } = params;
const allExcludeKeys = excludeKeys.concat(DEFAULT_EXCLUDE_KEYS);
const instance = vue.getCurrentInstance();
if (!instance) {
return vue.computed(() => ({}));
}
return vue.computed(() => {
var _a;
return fromPairs_1(
Object.entries(
(_a = instance.proxy) == null ? void 0 : _a.$attrs
).filter(
([key]) =>
!allExcludeKeys.includes(key) &&
!(excludeListeners && LISTENER_PREFIX.test(key))
)
);
});
};
var isServer = typeof window === "undefined";
/**
* Make a map and return a function for checking if a key
* is in that map.
* IMPORTANT: all calls of this function must be prefixed with
* \/\*#\_\_PURE\_\_\*\/
* So that rollup can tree-shake them if necessary.
*/
const NOOP = () => {};
const extend = Object.assign;
const hasOwnProperty$c = Object.prototype.hasOwnProperty;
const hasOwn = (val, key) => hasOwnProperty$c.call(val, key);
const isArray$1 = Array.isArray;
const isFunction$1 = (val) => typeof val === "function";
const isString$1 = (val) => typeof val === "string";
const isObject$2 = (val) => val !== null && typeof val === "object";
const isPromise = (val) => {
return isObject$2(val) && isFunction$1(val.then) && isFunction$1(val.catch);
};
const objectToString$1 = Object.prototype.toString;
const toTypeString = (value) => objectToString$1.call(value);
const toRawType = (value) => {
// extract "RawType" from strings like "[object RawType]"
return toTypeString(value).slice(8, -1);
};
const cacheStringFunction = (fn) => {
const cache = Object.create(null);
return (str) => {
const hit = cache[str];
return hit || (cache[str] = fn(str));
};
};
const camelizeRE = /-(\w)/g;
/**
* @private
*/
const camelize = cacheStringFunction((str) => {
return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ""));
});
/**
* @private
*/
const capitalize = cacheStringFunction(
(str) => str.charAt(0).toUpperCase() + str.slice(1)
);
/**
* Removes all key-value entries from the list cache.
*
* @private
* @name clear
* @memberOf ListCache
*/
function listCacheClear() {
this.__data__ = [];
this.size = 0;
}
var _listCacheClear = listCacheClear;
/**
* Performs a
* [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
* comparison between two values to determine if they are equivalent.
*
* @static
* @memberOf _
* @since 4.0.0
* @category Lang
* @param {*} value The value to compare.
* @param {*} other The other value to compare.
* @returns {boolean} Returns `true` if the values are equivalent, else `false`.
* @example
*
* var object = { 'a': 1 };
* var other = { 'a': 1 };
*
* _.eq(object, object);
* // => true
*
* _.eq(object, other);
* // => false
*
* _.eq('a', 'a');
* // => true
*
* _.eq('a', Object('a'));
* // => false
*
* _.eq(NaN, NaN);
* // => true
*/
function eq(value, other) {
return value === other || (value !== value && other !== other);
}
var eq_1 = eq;
/**
* Gets the index at which the `key` is found in `array` of key-value pairs.
*
* @private
* @param {Array} array The array to inspect.
* @param {*} key The key to search for.
* @returns {number} Returns the index of the matched value, else `-1`.
*/
function assocIndexOf(array, key) {
var length = array.length;
while (length--) {
if (eq_1(array[length][0], key)) {
return length;
}
}
return -1;
}
var _assocIndexOf = assocIndexOf;
/** Used for built-in method references. */
var arrayProto = Array.prototype;
/** Built-in value references. */
var splice = arrayProto.splice;
/**
* Removes `key` and its value from the list cache.
*
* @private
* @name delete
* @memberOf ListCache
* @param {string} key The key of the value to remove.
* @returns {boolean} Returns `true` if the entry was removed, else `false`.
*/
function listCacheDelete(key) {
var data = this.__data__,
index = _assocIndexOf(data, key);
if (index < 0) {
return false;
}
var lastIndex = data.length - 1;
if (index == lastIndex) {
data.pop();
} else {
splice.call(data, index, 1);
}
--this.size;
return true;
}
var _listCacheDelete = listCacheDelete;
/**
* Gets the list cache value for `key`.
*
* @private
* @name get
* @memberOf ListCache
* @param {string} key The key of the value to get.
* @returns {*} Returns the entry value.
*/
function listCacheGet(key) {
var data = this.__data__,
index = _assocIndexOf(data, key);
return index < 0 ? undefined : data[index][1];
}
var _listCacheGet = listCacheGet;
/**
* Checks if a list cache value for `key` exists.
*
* @private
* @name has
* @memberOf ListCache
* @param {string} key The key of the entry to check.
* @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
*/
function listCacheHas(key) {
return _assocIndexOf(this.__data__, key) > -1;
}
var _listCacheHas = listCacheHas;
/**
* Sets the list cache `key` to `value`.
*
* @private
* @name set
* @memberOf ListCache
* @param {string} key The key of the value to set.
* @param {*} value The value to set.
* @returns {Object} Returns the list cache instance.
*/
function listCacheSet(key, value) {
var data = this.__data__,
index = _assocIndexOf(data, key);
if (index < 0) {
++this.size;
data.push([key, value]);
} else {
data[index][1] = value;
}
return this;
}
var _listCacheSet = listCacheSet;
/**
* Creates an list cache object.
*
* @private
* @constructor
* @param {Array} [entries] The key-value pairs to cache.
*/
function ListCache(entries) {
var index = -1,
length = entries == null ? 0 : entries.length;
this.clear();
while (++index < length) {
var entry = entries[index];
this.set(entry[0], entry[1]);
}
}
// Add methods to `ListCache`.
ListCache.prototype.clear = _listCacheClear;
ListCache.prototype["delete"] = _listCacheDelete;
ListCache.prototype.get = _listCacheGet;
ListCache.prototype.has = _listCacheHas;
ListCache.prototype.set = _listCacheSet;
var _ListCache = ListCache;
/**
* Removes all key-value entries from the stack.
*
* @private
* @name clear
* @memberOf Stack
*/
function stackClear() {
this.__data__ = new _ListCache();
this.size = 0;
}
var _stackClear = stackClear;
/**
* Removes `key` and its value from the stack.
*
* @private
* @name delete
* @memberOf Stack
* @param {string} key The key of the value to remove.
* @returns {boolean} Returns `true` if the entry was removed, else `false`.
*/
function stackDelete(key) {
var data = this.__data__,
result = data["delete"](key);
this.size = data.size;
return result;
}
var _stackDelete = stackDelete;
/**
* Gets the stack value for `key`.
*
* @private
* @name get
* @memberOf Stack
* @param {string} key The key of the value to get.
* @returns {*} Returns the entry value.
*/
function stackGet(key) {
return this.__data__.get(key);
}
var _stackGet = stackGet;
/**
* Checks if a stack value for `key` exists.
*
* @private
* @name has
* @memberOf Stack
* @param {string} key The key of the entry to check.
* @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
*/
function stackHas(key) {
return this.__data__.has(key);
}
var _stackHas = stackHas;
var commonjsGlobal =
typeof globalThis !== "undefined"
? globalThis
: typeof window !== "undefined"
? window
: typeof global !== "undefined"
? global
: typeof self !== "undefined"
? self
: {};
function createCommonjsModule(fn, basedir, module) {
return (
(module = {
path: basedir,
exports: {},
require: function (path, base) {
return commonjsRequire(
path,
base === undefined || base === null ? module.path : base
);
},
}),
fn(module, module.exports),
module.exports
);
}
function commonjsRequire() {
throw new Error(
"Dynamic requires are not currently supported by @rollup/plugin-commonjs"
);
}
/** Detect free variable `global` from Node.js. */
var freeGlobal =
typeof commonjsGlobal == "object" &&
commonjsGlobal &&
commonjsGlobal.Object === Object &&
commonjsGlobal;
var _freeGlobal = freeGlobal;
/** Detect free variable `self`. */
var freeSelf =
typeof self == "object" && self && self.Object === Object && self;
/** Used as a reference to the global object. */
var root = _freeGlobal || freeSelf || Function("return this")();
var _root = root;
/** Built-in value references. */
var Symbol$1 = _root.Symbol;
var _Symbol = Symbol$1;
/** Used for built-in method references. */
var objectProto$e = Object.prototype;
/** Used to check objects for own properties. */
var hasOwnProperty$b = objectProto$e.hasOwnProperty;
/**
* Used to resolve the
* [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
* of values.
*/
var nativeObjectToString$1 = objectProto$e.toString;
/** Built-in value references. */
var symToStringTag$1 = _Symbol ? _Symbol.toStringTag : undefined;
/**
* A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
*
* @private
* @param {*} value The value to query.
* @returns {string} Returns the raw `toStringTag`.
*/
function getRawTag(value) {
var isOwn = hasOwnProperty$b.call(value, symToStringTag$1),
tag = value[symToStringTag$1];
try {
value[symToStringTag$1] = undefined;
var unmasked = true;
} catch (e) {}
var result = nativeObjectToString$1.call(value);
if (unmasked) {
if (isOwn) {
value[symToStringTag$1] = tag;
} else {
delete value[symToStringTag$1];
}
}
return result;
}
var _getRawTag = getRawTag;
/** Used for built-in method references. */
var objectProto$d = Object.prototype;
/**
* Used to resolve the
* [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
* of values.
*/
var nativeObjectToString = objectProto$d.toString;
/**
* Converts `value` to a string using `Object.prototype.toString`.
*
* @private
* @param {*} value The value to convert.
* @returns {string} Returns the converted string.
*/
function objectToString(value) {
return nativeObjectToString.call(value);
}
var _objectToString = objectToString;
/** `Object#toString` result references. */
var nullTag = "[object Null]",
undefinedTag = "[object Undefined]";
/** Built-in value references. */
var symToStringTag = _Symbol ? _Symbol.toStringTag : undefined;
/**
* The base implementation of `getTag` without fallbacks for buggy environments.
*
* @private
* @param {*} value The value to query.
* @returns {string} Returns the `toStringTag`.
*/
function baseGetTag(value) {
if (value == null) {
return value === undefined ? undefinedTag : nullTag;
}
return symToStringTag && symToStringTag in Object(value)
? _getRawTag(value)
: _objectToString(value);
}
var _baseGetTag = baseGetTag;
/**
* Checks if `value` is the
* [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
* of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
*
* @static
* @memberOf _
* @since 0.1.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is an object, else `false`.
* @example
*
* _.isObject({});
* // => true
*
* _.isObject([1, 2, 3]);
* // => true
*
* _.isObject(_.noop);
* // => true
*
* _.isObject(null);
* // => false
*/
function isObject$1(value) {
var type = typeof value;
return value != null && (type == "object" || type == "function");
}
var isObject_1 = isObject$1;
/** `Object#toString` result references. */
var asyncTag = "[object AsyncFunction]",
funcTag$2 = "[object Function]",
genTag$1 = "[object GeneratorFunction]",
proxyTag = "[object Proxy]";
/**
* Checks if `value` is classified as a `Function` object.
*
* @static
* @memberOf _
* @since 0.1.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a function, else `false`.
* @example
*
* _.isFunction(_);
* // => true
*
* _.isFunction(/abc/);
* // => false
*/
function isFunction(value) {
if (!isObject_1(value)) {
return false;
}
// The use of `Object#toString` avoids issues with the `typeof` operator
// in Safari 9 which returns 'object' for typed arrays and other constructors.
var tag = _baseGetTag(value);
return (
tag == funcTag$2 || tag == genTag$1 || tag == asyncTag || tag == proxyTag
);
}
var isFunction_1 = isFunction;
/** Used to detect overreaching core-js shims. */
var coreJsData = _root["__core-js_shared__"];
var _coreJsData = coreJsData;
/** Used to detect methods masquerading as native. */
var maskSrcKey = (function () {
var uid = /[^.]+$/.exec(
(_coreJsData && _coreJsData.keys && _coreJsData.keys.IE_PROTO) || ""
);
return uid ? "Symbol(src)_1." + uid : "";
})();
/**
* Checks if `func` has its source masked.
*
* @private
* @param {Function} func The function to check.
* @returns {boolean} Returns `true` if `func` is masked, else `false`.
*/
function isMasked(func) {
return !!maskSrcKey && maskSrcKey in func;
}
var _isMasked = isMasked;
/** Used for built-in method references. */
var funcProto$1 = Function.prototype;
/** Used to resolve the decompiled source of functions. */
var funcToString$1 = funcProto$1.toString;
/**
* Converts `func` to its source code.
*
* @private
* @param {Function} func The function to convert.
* @returns {string} Returns the source code.
*/
function toSource(func) {
if (func != null) {
try {
return funcToString$1.call(func);
} catch (e) {}
try {
return func + "";
} catch (e) {}
}
return "";
}
var _toSource = toSource;
/**
* Used to match `RegExp`
* [syntax characters](http://ecma-international.org/ecma-262/7.0/#sec-patterns).
*/
var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
/** Used to detect host constructors (Safari). */
var reIsHostCtor = /^\[object .+?Constructor\]$/;
/** Used for built-in method references. */
var funcProto = Function.prototype,
objectProto$c = Object.prototype;
/** Used to resolve the decompiled source of functions. */
var funcToString = funcProto.toString;
/** Used to check objects for own properties. */
var hasOwnProperty$a = objectProto$c.hasOwnProperty;
/** Used to detect if a method is native. */
var reIsNative = RegExp(
"^" +
funcToString
.call(hasOwnProperty$a)
.replace(reRegExpChar, "\\$&")
.replace(
/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,
"$1.*?"
) +
"$"
);
/**
* The base implementation of `_.isNative` without bad shim checks.
*
* @private
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a native function,
* else `false`.
*/
function baseIsNative(value) {
if (!isObject_1(value) || _isMasked(value)) {
return false;
}
var pattern = isFunction_1(value) ? reIsNative : reIsHostCtor;
return pattern.test(_toSource(value));
}
var _baseIsNative = baseIsNative;
/**
* Gets the value at `key` of `object`.
*
* @private
* @param {Object} [object] The object to query.
* @param {string} key The key of the property to get.
* @returns {*} Returns the property value.
*/
function getValue(object, key) {
return object == null ? undefined : object[key];
}
var _getValue = getValue;
/**
* Gets the native function at `key` of `object`.
*
* @private
* @param {Object} object The object to query.
* @param {string} key The key of the method to get.
* @returns {*} Returns the function if it's native, else `undefined`.
*/
function getNative(object, key) {
var value = _getValue(object, key);
return _baseIsNative(value) ? value : undefined;
}
var _getNative = getNative;
/* Built-in method references that are verified to be native. */
var Map$1 = _getNative(_root, "Map");
var _Map = Map$1;
/* Built-in method references that are verified to be native. */
var nativeCreate = _getNative(Object, "create");
var _nativeCreate = nativeCreate;
/**
* Removes all key-value entries from the hash.
*
* @private
* @name clear
* @memberOf Hash
*/
function hashClear() {
this.__data__ = _nativeCreate ? _nativeCreate(null) : {};
this.size = 0;
}
var _hashClear = hashClear;
/**
* Removes `key` and its value from the hash.
*
* @private
* @name delete
* @memberOf Hash
* @param {Object} hash The hash to modify.
* @param {string} key The key of the value to remove.
* @returns {boolean} Returns `true` if the entry was removed, else `false`.
*/
function hashDelete(key) {
var result = this.has(key) && delete this.__data__[key];
this.size -= result ? 1 : 0;
return result;
}
var _hashDelete = hashDelete;
/** Used to stand-in for `undefined` hash values. */
var HASH_UNDEFINED$2 = "__lodash_hash_undefined__";
/** Used for built-in method references. */
var objectProto$b = Object.prototype;
/** Used to check objects for own properties. */
var hasOwnProperty$9 = objectProto$b.hasOwnProperty;
/**
* Gets the hash value for `key`.
*
* @private
* @name get
* @memberOf Hash
* @param {string} key The key of the value to get.
* @returns {*} Returns the entry value.
*/
function hashGet(key) {
var data = this.__data__;
if (_nativeCreate) {
var result = data[key];
return result === HASH_UNDEFINED$2 ? undefined : result;
}
return hasOwnProperty$9.call(data, key) ? data[key] : undefined;
}
var _hashGet = hashGet;
/** Used for built-in method references. */
var objectProto$a = Object.prototype;
/** Used to check objects for own properties. */
var hasOwnProperty$8 = objectProto$a.hasOwnProperty;
/**
* Checks if a hash value for `key` exists.
*
* @private
* @name has
* @memberOf Hash
* @param {string} key The key of the entry to check.
* @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
*/
function hashHas(key) {
var data = this.__data__;
return _nativeCreate
? data[key] !== undefined
: hasOwnProperty$8.call(data, key);
}
var _hashHas = hashHas;
/** Used to stand-in for `undefined` hash values. */
var HASH_UNDEFINED$1 = "__lodash_hash_undefined__";
/**
* Sets the hash `key` to `value`.
*
* @private
* @name set
* @memberOf Hash
* @param {string} key The key of the value to set.
* @param {*} value The value to set.
* @returns {Object} Returns the hash instance.
*/
function hashSet(key, value) {
var data = this.__data__;
this.size += this.has(key) ? 0 : 1;
data[key] = _nativeCreate && value === undefined ? HASH_UNDEFINED$1 : value;
return this;
}
var _hashSet = hashSet;
/**
* Creates a hash object.
*
* @private
* @constructor
* @param {Array} [entries] The key-value pairs to cache.
*/
function Hash(entries) {
var index = -1,
length = entries == null ? 0 : entries.length;
this.clear();
while (++index < length) {
var entry = entries[index];
this.set(entry[0], entry[1]);
}
}
// Add methods to `Hash`.
Hash.prototype.clear = _hashClear;
Hash.prototype["delete"] = _hashDelete;
Hash.prototype.get = _hashGet;
Hash.prototype.has = _hashHas;
Hash.prototype.set = _hashSet;
var _Hash = Hash;
/**
* Removes all key-value entries from the map.
*
* @private
* @name clear
* @memberOf MapCache
*/
function mapCacheClear() {
this.size = 0;
this.__data__ = {
hash: new _Hash(),
map: new (_Map || _ListCache)(),
string: new _Hash(),
};
}
var _mapCacheClear = mapCacheClear;
/**
* Checks if `value` is suitable for use as unique object key.
*
* @private
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is suitable, else `false`.
*/
function isKeyable(value) {
var type = typeof value;
return type == "string" ||
type == "number" ||
type == "symbol" ||
type == "boolean"
? value !== "__proto__"
: value === null;
}
var _isKeyable = isKeyable;
/**
* Gets the data for `map`.
*
* @private
* @param {Object} map The map to query.
* @param {string} key The reference key.
* @returns {*} Returns the map data.
*/
function getMapData(map, key) {
var data = map.__data__;
return _isKeyable(key)
? data[typeof key == "string" ? "string" : "hash"]
: data.map;
}
var _getMapData = getMapData;
/**
* Removes `key` and its value from the map.
*
* @private
* @name delete
* @memberOf MapCache
* @param {string} key The key of the value to remove.
* @returns {boolean} Returns `true` if the entry was removed, else `false`.
*/
function mapCacheDelete(key) {
var result = _getMapData(this, key)["delete"](key);
this.size -= result ? 1 : 0;
return result;
}
var _mapCacheDelete = mapCacheDelete;
/**
* Gets the map value for `key`.
*
* @private
* @name get
* @memberOf MapCache
* @param {string} key The key of the value to get.
* @returns {*} Returns the entry value.
*/
function mapCacheGet(key) {
return _getMapData(this, key).get(key);
}
var _mapCacheGet = mapCacheGet;
/**
* Checks if a map value for `key` exists.
*
* @private
* @name has
* @memberOf MapCache
* @param {string} key The key of the entry to check.
* @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
*/
function mapCacheHas(key) {
return _getMapData(this, key).has(key);
}
var _mapCacheHas = mapCacheHas;
/**
* Sets the map `key` to `value`.
*
* @private
* @name set
* @memberOf MapCache
* @param {string} key The key of the value to set.
* @param {*} value The value to set.
* @returns {Object} Returns the map cache instance.
*/
function mapCacheSet(key, value) {
var data = _getMapData(this, key),
size = data.size;
data.set(key, value);
this.size += data.size == size ? 0 : 1;
return this;
}
var _mapCacheSet = mapCacheSet;
/**
* Creates a map cache object to store key-value pairs.
*
* @private
* @constructor
* @param {Array} [entries] The key-value pairs to cache.
*/
function MapCache(entries) {
var index = -1,
length = entries == null ? 0 : entries.length;
this.clear();
while (++index < length) {
var entry = entries[index];
this.set(entry[0], entry[1]);
}
}
// Add methods to `MapCache`.
MapCache.prototype.clear = _mapCacheClear;
MapCache.prototype["delete"] = _mapCacheDelete;
MapCache.prototype.get = _mapCacheGet;
MapCache.prototype.has = _mapCacheHas;
MapCache.prototype.set = _mapCacheSet;
var _MapCache = MapCache;
/** Used as the size to enable large array optimizations. */
var LARGE_ARRAY_SIZE$1 = 200;
/**
* Sets the stack `key` to `value`.
*
* @private
* @name set
* @memberOf Stack
* @param {string} key The key of the value to set.
* @param {*} value The value to set.
* @returns {Object} Returns the stack cache instance.
*/
function stackSet(key, value) {
var data = this.__data__;
if (data instanceof _ListCache) {
var pairs = data.__data__;
if (!_Map || pairs.length < LARGE_ARRAY_SIZE$1 - 1) {
pairs.push([key, value]);
this.size = ++data.size;
return this;
}
data = this.__data__ = new _MapCache(pairs);
}
data.set(key, value);
this.size = data.size;
return this;
}
var _stackSet = stackSet;
/**
* Creates a stack cache object to store key-value pairs.
*
* @private
* @constructor
* @param {Array} [entries] The key-value pairs to cache.
*/
function Stack(entries) {
var data = (this.__data__ = new _ListCache(entries));
this.size = data.size;
}
// Add methods to `Stack`.
Stack.prototype.clear = _stackClear;
Stack.prototype["delete"] = _stackDelete;
Stack.prototype.get = _stackGet;
Stack.prototype.has = _stackHas;
Stack.prototype.set = _stackSet;
var _Stack = Stack;
/** Used to stand-in for `undefined` hash values. */
var HASH_UNDEFINED = "__lodash_hash_undefined__";
/**
* Adds `value` to the array cache.
*
* @private
* @name add
* @memberOf SetCache
* @alias push
* @param {*} value The value to cache.
* @returns {Object} Returns the cache instance.
*/
function setCacheAdd(value) {
this.__data__.set(value, HASH_UNDEFINED);
return this;
}
var _setCacheAdd = setCacheAdd;
/**
* Checks if `value` is in the array cache.
*
* @private
* @name has
* @memberOf SetCache
* @param {*} value The value to search for.
* @returns {number} Returns `true` if `value` is found, else `false`.
*/
function setCacheHas(value) {
return this.__data__.has(value);
}
var _setCacheHas = setCacheHas;
/**
*
* Creates an array cache object to store unique values.
*
* @private
* @constructor
* @param {Array} [values] The values to cache.
*/
function SetCache(values) {
var index = -1,
length = values == null ? 0 : values.length;
this.__data__ = new _MapCache();
while (++index < length) {
this.add(values[index]);
}
}
// Add methods to `SetCache`.
SetCache.prototype.add = SetCache.prototype.push = _setCacheAdd;
SetCache.prototype.has = _setCacheHas;
var _SetCache = SetCache;
/**
* A specialized version of `_.some` for arrays without support for iteratee
* shorthands.
*
* @private
* @param {Array} [array] The array to iterate over.
* @param {Function} predicate The function invoked per iteration.
* @returns {boolean} Returns `true` if any element passes the predicate check,
* else `false`.
*/
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;
}
var _arraySome = arraySome;
/**
* Checks if a `cache` value for `key` exists.
*
* @private
* @param {Object} cache The cache to query.
* @param {string} key The key of the entry to check.
* @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
*/
function cacheHas(cache, key) {
return cache.has(key);
}
var _cacheHas = cacheHas;
/** Used to compose bitmasks for value comparisons. */
var COMPARE_PARTIAL_FLAG$3 = 1,
COMPARE_UNORDERED_FLAG$1 = 2;
/**
* A specialized version of `baseIsEqualDeep` for arrays with support for
* partial deep comparisons.
*
* @private
* @param {Array} array The array to compare.
* @param {Array} other The other array to compare.
* @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details.
* @param {Function} customizer The function to customize comparisons.
* @param {Function} equalFunc The function to determine equivalents of values.
* @param {Object} stack Tracks traversed `array` and `other` objects.
* @returns {boolean} Returns `true` if the arrays are equivalent, else `false`.
*/
function equalArrays(array, other, bitmask, customizer, equalFunc, stack) {
var isPartial = bitmask & COMPARE_PARTIAL_FLAG$3,
arrLength = array.length,
othLength = other.length;
if (arrLength != othLength && !(isPartial && othLength > arrLength)) {
return false;
}
// Check that cyclic values are equal.
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$1 ? new _SetCache() : undefined;
stack.set(array, other);
stack.set(other, array);
// Ignore non-index properties.
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 !== undefined) {
if (compared) {
continue;
}
result = false;
break;
}
// Recursively compare arrays (susceptible to call stack limits).
if (seen) {
if (
!_arraySome(other, function (othValue, othIndex) {
if (
!_cacheHas(seen, othIndex) &&
(arrValue === othValue ||
equalFunc(arrValue, othValue, 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;
}
var _equalArrays = equalArrays;
/** Built-in value references. */
var Uint8Array = _root.Uint8Array;
var _Uint8Array = Uint8Array;
/**
* Converts `map` to its key-value pairs.
*
* @private
* @param {Object} map The map to convert.
* @returns {Array} Returns the key-value pairs.
*/
function mapToArray(map) {
var index = -1,
result = Array(map.size);
map.forEach(function (value, key) {
result[++index] = [key, value];
});
return result;
}
var _mapToArray = mapToArray;
/**
* Converts `set` to an array of its values.
*
* @private
* @param {Object} set The set to convert.
* @returns {Array} Returns the values.
*/
function setToArray(set) {
var index = -1,
result = Array(set.size);
set.forEach(function (value) {
result[++index] = value;
});
return result;
}
var _setToArray = setToArray;
/** Used to compose bitmasks for value comparisons. */
var COMPARE_PARTIAL_FLAG$2 = 1,
COMPARE_UNORDERED_FLAG = 2;
/** `Object#toString` result references. */
var boolTag$3 = "[object Boolean]",
dateTag$3 = "[object Date]",
errorTag$2 = "[object Error]",
mapTag$5 = "[object Map]",
numberTag$3 = "[object Number]",
regexpTag$3 = "[object RegExp]",
setTag$5 = "[object Set]",
stringTag$3 = "[object String]",
symbolTag$3 = "[object Symbol]";
var arrayBufferTag$3 = "[object ArrayBuffer]",
dataViewTag$4 = "[object DataView]";
/** Used to convert symbols to primitives and strings. */
var symbolProto$1 = _Symbol ? _Symbol.prototype : undefined,
symbolValueOf$1 = symbolProto$1 ? symbolProto$1.valueOf : undefined;
/**
* A specialized version of `baseIsEqualDeep` for comparing objects of
* the same `toStringTag`.
*
* **Note:** This function only supports comparing values with tags of
* `Boolean`, `Date`, `Error`, `Number`, `RegExp`, or `String`.
*
* @private
* @param {Object} object The object to compare.
* @param {Object} other The other object to compare.
* @param {string} tag The `toStringTag` of the objects to compare.
* @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details.
* @param {Function} customizer The function to customize comparisons.
* @param {Function} equalFunc The function to determine equivalents of values.
* @param {Object} stack Tracks traversed `object` and `other` objects.
* @returns {boolean} Returns `true` if the objects are equivalent, else `false`.
*/
function equalByTag(
object,
other,
tag,
bitmask,
customizer,
equalFunc,
stack
) {
switch (tag) {
case dataViewTag$4:
if (
object.byteLength != other.byteLength ||
object.byteOffset != other.byteOffset
) {
return false;
}
object = object.buffer;
other = other.buffer;
case arrayBufferTag$3:
if (
object.byteLength != other.byteLength ||
!equalFunc(new _Uint8Array(object), new _Uint8Array(other))
) {
return false;
}
return true;
case boolTag$3:
case dateTag$3:
case numberTag$3:
// Coerce booleans to `1` or `0` and dates to milliseconds.
// Invalid dates are coerced to `NaN`.
return eq_1(+object, +other);
case errorTag$2:
return object.name == other.name && object.message == other.message;
case regexpTag$3:
case stringTag$3:
// Coerce regexes to strings and treat strings, primitives and objects,
// as equal. See http://www.ecma-international.org/ecma-262/7.0/#sec-regexp.prototype.tostring
// for more details.
return object == other + "";
case mapTag$5:
var convert = _mapToArray;
case setTag$5:
var isPartial = bitmask & COMPARE_PARTIAL_FLAG$2;
convert || (convert = _setToArray);
if (object.size != other.size && !isPartial) {
return false;
}
// Assume cyclic values are equal.
var stacked = stack.get(object);
if (stacked) {
return stacked == other;
}
bitmask |= COMPARE_UNORDERED_FLAG;
// Recursively compare objects (susceptible to call stack limits).
stack.set(object, other);
var result = _equalArrays(
convert(object),
convert(other),
bitmask,
customizer,
equalFunc,
stack
);
stack["delete"](object);
return result;
case symbolTag$3:
if (symbolValueOf$1) {
return symbolValueOf$1.call(object) == symbolValueOf$1.call(other);
}
}
return false;
}
var _equalByTag = equalByTag;
/**
* Appends the elements of `values` to `array`.
*
* @private
* @param {Array} array The array to modify.
* @param {Array} values The values to append.
* @returns {Array} Returns `array`.
*/
function arrayPush(array, values) {
var index = -1,
length = values.length,
offset = array.length;
while (++index < length) {
array[offset + index] = values[index];
}
return array;
}
var _arrayPush = arrayPush;
/**
* Checks if `value` is classified as an `Array` object.
*
* @static
* @memberOf _
* @since 0.1.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is an array, else `false`.
* @example
*
* _.isArray([1, 2, 3]);
* // => true
*
* _.isArray(document.body.children);
* // => false
*
* _.isArray('abc');
* // => false
*
* _.isArray(_.noop);
* // => false
*/
var isArray = Array.isArray;
var isArray_1 = isArray;
/**
* The base implementation of `getAllKeys` and `getAllKeysIn` which uses
* `keysFunc` and `symbolsFunc` to get the enumerable property names and
* symbols of `object`.
*
* @private
* @param {Object} object The object to query.
* @param {Function} keysFunc The function to get the keys of `object`.
* @param {Function} symbolsFunc The function to get the symbols of `object`.
* @returns {Array} Returns the array of property names and symbols.
*/
function baseGetAllKeys(object, keysFunc, symbolsFunc) {
var result = keysFunc(object);
return isArray_1(object) ? result : _arrayPush(result, symbolsFunc(object));
}
var _baseGetAllKeys = baseGetAllKeys;
/**
* A specialized version of `_.filter` for arrays without support for
* iteratee shorthands.
*
* @private
* @param {Array} [array] The array to iterate over.
* @param {Function} predicate The function invoked per iteration.
* @returns {Array} Returns the new filtered array.
*/
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;
}
var _arrayFilter = arrayFilter;
/**
* This method returns a new empty array.
*
* @static
* @memberOf _
* @since 4.13.0
* @category Util
* @returns {Array} Returns the new empty array.
* @example
*
* var arrays = _.times(2, _.stubArray);
*
* console.log(arrays);
* // => [[], []]
*
* console.log(arrays[0] === arrays[1]);
* // => false
*/
function stubArray() {
return [];
}
var stubArray_1 = stubArray;
/** Used for built-in method references. */
var objectProto$9 = Object.prototype;
/** Built-in value references. */
var propertyIsEnumerable$1 = objectProto$9.propertyIsEnumerable;
/* Built-in method references for those with the same name as other `lodash` methods. */
var nativeGetSymbols$1 = Object.getOwnPropertySymbols;
/**
* Creates an array of the own enumerable symbols of `object`.
*
* @private
* @param {Object} object The object to query.
* @returns {Array} Returns the array of symbols.
*/
var getSymbols = !nativeGetSymbols$1
? stubArray_1
: function (object) {
if (object == null) {
return [];
}
object = Object(object);
return _arrayFilter(nativeGetSymbols$1(object), function (symbol) {
return propertyIsEnumerable$1.call(object, symbol);
});
};
var _getSymbols = getSymbols;
/**
* The base implementation of `_.times` without support for iteratee shorthands
* or max array length checks.
*
* @private
* @param {number} n The number of times to invoke `iteratee`.
* @param {Function} iteratee The function invoked per iteration.
* @returns {Array} Returns the array of results.
*/
function baseTimes(n, iteratee) {
var index = -1,
result = Array(n);
while (++index < n) {
result[index] = iteratee(index);
}
return result;
}
var _baseTimes = baseTimes;
/**
* Checks if `value` is object-like. A value is object-like if it's not `null`
* and has a `typeof` result of "object".
*
* @static
* @memberOf _
* @since 4.0.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is object-like, else `false`.
* @example
*
* _.isObjectLike({});
* // => true
*
* _.isObjectLike([1, 2, 3]);
* // => true
*
* _.isObjectLike(_.noop);
* // => false
*
* _.isObjectLike(null);
* // => false
*/
function isObjectLike(value) {
return value != null && typeof value == "object";
}
var isObjectLike_1 = isObjectLike;
/** `Object#toString` result references. */
var argsTag$3 = "[object Arguments]";
/**
* The base implementation of `_.isArguments`.
*
* @private
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is an `arguments` object,
*/
function baseIsArguments(value) {
return isObjectLike_1(value) && _baseGetTag(value) == argsTag$3;
}
var _baseIsArguments = baseIsArguments;
/** Used for built-in method references. */
var objectProto$8 = Object.prototype;
/** Used to check objects for own properties. */
var hasOwnProperty$7 = objectProto$8.hasOwnProperty;
/** Built-in value references. */
var propertyIsEnumerable = objectProto$8.propertyIsEnumerable;
/**
* Checks if `value` is likely an `arguments` object.
*
* @static
* @memberOf _
* @since 0.1.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is an `arguments` object,
* else `false`.
* @example
*
* _.isArguments(function() { return arguments; }());
* // => true
*
* _.isArguments([1, 2, 3]);
* // => false
*/
var isArguments = _baseIsArguments(
(function () {
return arguments;
})()
)
? _baseIsArguments
: function (value) {
return (
isObjectLike_1(value) &&
hasOwnProperty$7.call(value, "callee") &&
!propertyIsEnumerable.call(value, "callee")
);
};
var isArguments_1 = isArguments;
/**
* This method returns `false`.
*
* @static
* @memberOf _
* @since 4.13.0
* @category Util
* @returns {boolean} Returns `false`.
* @example
*
* _.times(2, _.stubFalse);
* // => [false, false]
*/
function stubFalse() {
return false;
}
var stubFalse_1 = stubFalse;
var isBuffer_1 = createCommonjsModule(function (module, exports) {
/** Detect free variable `exports`. */
var freeExports = exports && !exports.nodeType && exports;
/** Detect free variable `module`. */
var freeModule =
freeExports &&
"object" == "object" &&
module &&
!module.nodeType &&
module;
/** Detect the popular CommonJS extension `module.exports`. */
var moduleExports = freeModule && freeModule.exports === freeExports;
/** Built-in value references. */
var Buffer = moduleExports ? _root.Buffer : undefined;
/* Built-in method references for those with the same name as other `lodash` methods. */
var nativeIsBuffer = Buffer ? Buffer.isBuffer : undefined;
/**
* Checks if `value` is a buffer.
*
* @static
* @memberOf _
* @since 4.3.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a buffer, else `false`.
* @example
*
* _.isBuffer(new Buffer(2));
* // => true
*
* _.isBuffer(new Uint8Array(2));
* // => false
*/
var isBuffer = nativeIsBuffer || stubFalse_1;
module.exports = isBuffer;
});
/** Used as references for various `Number` constants. */
var MAX_SAFE_INTEGER$1 = 9007199254740991;
/** Used to detect unsigned integer values. */
var reIsUint = /^(?:0|[1-9]\d*)$/;
/**
* Checks if `value` is a valid array-like index.
*
* @private
* @param {*} value The value to check.
* @param {number} [length=MAX_SAFE_INTEGER] The upper bounds of a valid index.
* @returns {boolean} Returns `true` if `value` is a valid index, else `false`.
*/
function isIndex(value, length) {
var type = typeof value;
length = length == null ? MAX_SAFE_INTEGER$1 : length;
return (
!!length &&
(type == "number" || (type != "symbol" && reIsUint.test(value))) &&
value > -1 &&
value % 1 == 0 &&
value < length
);
}
var _isIndex = isIndex;
/** Used as references for various `Number` constants. */
var MAX_SAFE_INTEGER = 9007199254740991;
/**
* Checks if `value` is a valid array-like length.
*
* **Note:** This method is loosely based on
* [`ToLength`](http://ecma-international.org/ecma-262/7.0/#sec-tolength).
*
* @static
* @memberOf _
* @since 4.0.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a valid length, else `false`.
* @example
*
* _.isLength(3);
* // => true
*
* _.isLength(Number.MIN_VALUE);
* // => false
*
* _.isLength(Infinity);
* // => false
*
* _.isLength('3');
* // => false
*/
function isLength(value) {
return (
typeof value == "number" &&
value > -1 &&
value % 1 == 0 &&
value <= MAX_SAFE_INTEGER
);
}
var isLength_1 = isLength;
/** `Object#toString` result references. */
var argsTag$2 = "[object Arguments]",
arrayTag$2 = "[object Array]",
boolTag$2 = "[object Boolean]",
dateTag$2 = "[object Date]",
errorTag$1 = "[object Error]",
funcTag$1 = "[object Function]",
mapTag$4 = "[object Map]",
numberTag$2 = "[object Number]",
objectTag$3 = "[object Object]",
regexpTag$2 = "[object RegExp]",
setTag$4 = "[object Set]",
stringTag$2 = "[object String]",
weakMapTag$2 = "[object WeakMap]";
var arrayBufferTag$2 = "[object ArrayBuffer]",
dataViewTag$3 = "[object DataView]",
float32Tag$2 = "[object Float32Array]",
float64Tag$2 = "[object Float64Array]",
int8Tag$2 = "[object Int8Array]",
int16Tag$2 = "[object Int16Array]",
int32Tag$2 = "[object Int32Array]",
uint8Tag$2 = "[object Uint8Array]",
uint8ClampedTag$2 = "[object Uint8ClampedArray]",
uint16Tag$2 = "[object Uint16Array]",
uint32Tag$2 = "[object Uint32Array]";
/** Used to identify `toStringTag` values of typed arrays. */
var typedArrayTags = {};
typedArrayTags[float32Tag$2] =
typedArrayTags[float64Tag$2] =
typedArrayTags[int8Tag$2] =
typedArrayTags[int16Tag$2] =
typedArrayTags[int32Tag$2] =
typedArrayTags[uint8Tag$2] =
typedArrayTags[uint8ClampedTag$2] =
typedArrayTags[uint16Tag$2] =
typedArrayTags[uint32Tag$2] =
true;
typedArrayTags[argsTag$2] =
typedArrayTags[arrayTag$2] =
typedArrayTags[arrayBufferTag$2] =
typedArrayTags[boolTag$2] =
typedArrayTags[dataViewTag$3] =
typedArrayTags[dateTag$2] =
typedArrayTags[errorTag$1] =
typedArrayTags[funcTag$1] =
typedArrayTags[mapTag$4] =
typedArrayTags[numberTag$2] =
typedArrayTags[objectTag$3] =
typedArrayTags[regexpTag$2] =
typedArrayTags[setTag$4] =
typedArrayTags[stringTag$2] =
typedArrayTags[weakMapTag$2] =
false;
/**
* The base implementation of `_.isTypedArray` without Node.js optimizations.
*
* @private
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a typed array, else `false`.
*/
function baseIsTypedArray(value) {
return (
isObjectLike_1(value) &&
isLength_1(value.length) &&
!!typedArrayTags[_baseGetTag(value)]
);
}
var _baseIsTypedArray = baseIsTypedArray;
/**
* The base implementation of `_.unary` without support for storing metadata.
*
* @private
* @param {Function} func The function to cap arguments for.
* @returns {Function} Returns the new capped function.
*/
function baseUnary(func) {
return function (value) {
return func(value);
};
}
var _baseUnary = baseUnary;
var _nodeUtil = createCommonjsModule(function (module, exports) {
/** Detect free variable `exports`. */
var freeExports = exports && !exports.nodeType && exports;
/** Detect free variable `module`. */
var freeModule =
freeExports &&
"object" == "object" &&
module &&
!module.nodeType &&
module;
/** Detect the popular CommonJS extension `module.exports`. */
var moduleExports = freeModule && freeModule.exports === freeExports;
/** Detect free variable `process` from Node.js. */
var freeProcess = moduleExports && _freeGlobal.process;
/** Used to access faster Node.js helpers. */
var nodeUtil = (function () {
try {
// Use `util.types` for Node.js 10+.
var types =
freeModule && freeModule.require && freeModule.require("util").types;
if (types) {
return types;
}
// Legacy `process.binding('util')` for Node.js < 10.
return (
freeProcess && freeProcess.binding && freeProcess.binding("util")
);
} catch (e) {}
})();
module.exports = nodeUtil;
});
/* Node.js helper references. */
var nodeIsTypedArray = _nodeUtil && _nodeUtil.isTypedArray;
/**
* Checks if `value` is classified as a typed array.
*
* @static
* @memberOf _
* @since 3.0.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a typed array, else `false`.
* @example
*
* _.isTypedArray(new Uint8Array);
* // => true
*
* _.isTypedArray([]);
* // => false
*/
var isTypedArray = nodeIsTypedArray
? _baseUnary(nodeIsTypedArray)
: _baseIsTypedArray;
var isTypedArray_1 = isTypedArray;
/** Used for built-in method references. */
var objectProto$7 = Object.prototype;
/** Used to check objects for own properties. */
var hasOwnProperty$6 = objectProto$7.hasOwnProperty;
/**
* Creates an array of the enumerable property names of the array-like `value`.
*
* @private
* @param {*} value The value to query.
* @param {boolean} inherited Specify returning inherited property names.
* @returns {Array} Returns the array of property names.
*/
function arrayLikeKeys(value, inherited) {
var isArr = isArray_1(value),
isArg = !isArr && isArguments_1(value),
isBuff = !isArr && !isArg && isBuffer_1(value),
isType = !isArr && !isArg && !isBuff && isTypedArray_1(value),
skipIndexes = isArr || isArg || isBuff || isType,
result = skipIndexes ? _baseTimes(value.length, String) : [],
length = result.length;
for (var key in value) {
if (
(inherited || hasOwnProperty$6.call(value, key)) &&
!(
skipIndexes &&
// Safari 9 has enumerable `arguments.length` in strict mode.
(key == "length" ||
// Node.js 0.10 has enumerable non-index properties on buffers.
(isBuff && (key == "offset" || key == "parent")) ||
// PhantomJS 2 has enumerable non-index properties on typed arrays.
(isType &&
(key == "buffer" ||
key == "byteLength" ||
key == "byteOffset")) ||
// Skip index properties.
_isIndex(key, length))
)
) {
result.push(key);
}
}
return result;
}
var _arrayLikeKeys = arrayLikeKeys;
/** Used for built-in method references. */
var objectProto$6 = Object.prototype;
/**
* Checks if `value` is likely a prototype object.
*
* @private
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a prototype, else `false`.
*/
function isPrototype(value) {
var Ctor = value && value.constructor,
proto = (typeof Ctor == "function" && Ctor.prototype) || objectProto$6;
return value === proto;
}
var _isPrototype = isPrototype;
/**
* Creates a unary function that invokes `func` with its argument transformed.
*
* @private
* @param {Function} func The function to wrap.
* @param {Function} transform The argument transform.
* @returns {Function} Returns the new function.
*/
function overArg(func, transform) {
return function (arg) {
return func(transform(arg));
};
}
var _overArg = overArg;
/* Built-in method references for those with the same name as other `lodash` methods. */
var nativeKeys = _overArg(Object.keys, Object);
var _nativeKeys = nativeKeys;
/** Used for built-in method references. */
var objectProto$5 = Object.prototype;
/** Used to check objects for own properties. */
var hasOwnProperty$5 = objectProto$5.hasOwnProperty;
/**
* The base implementation of `_.keys` which doesn't treat sparse arrays as dense.
*
* @private
* @param {Object} object The object to query.
* @returns {Array} Returns the array of property names.
*/
function baseKeys(object) {
if (!_isPrototype(object)) {
return _nativeKeys(object);
}
var result = [];
for (var key in Object(object)) {
if (hasOwnProperty$5.call(object, key) && key != "constructor") {
result.push(key);
}
}
return result;
}
var _baseKeys = baseKeys;
/**
* Checks if `value` is array-like. A value is considered array-like if it's
* not a function and has a `value.length` that's an integer greater than or
* equal to `0` and less than or equal to `Number.MAX_SAFE_INTEGER`.
*
* @static
* @memberOf _
* @since 4.0.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is array-like, else `false`.
* @example
*
* _.isArrayLike([1, 2, 3]);
* // => true
*
* _.isArrayLike(document.body.children);
* // => true
*
* _.isArrayLike('abc');
* // => true
*
* _.isArrayLike(_.noop);
* // => false
*/
function isArrayLike(value) {
return value != null && isLength_1(value.length) && !isFunction_1(value);
}
var isArrayLike_1 = isArrayLike;
/**
* Creates an array of the own enumerable property names of `object`.
*
* **Note:** Non-object values are coerced to objects. See the
* [ES spec](http://ecma-international.org/ecma-262/7.0/#sec-object.keys)
* for more details.
*
* @static
* @since 0.1.0
* @memberOf _
* @category Object
* @param {Object} object The object to query.
* @returns {Array} Returns the array of property names.
* @example
*
* function Foo() {
* this.a = 1;
* this.b = 2;
* }
*
* Foo.prototype.c = 3;
*
* _.keys(new Foo);
* // => ['a', 'b'] (iteration order is not guaranteed)
*
* _.keys('hi');
* // => ['0', '1']
*/
function keys(object) {
return isArrayLike_1(object) ? _arrayLikeKeys(object) : _baseKeys(object);
}
var keys_1 = keys;
/**
* Creates an array of own enumerable property names and symbols of `object`.
*
* @private
* @param {Object} object The object to query.
* @returns {Array} Returns the array of property names and symbols.
*/
function getAllKeys(object) {
return _baseGetAllKeys(object, keys_1, _getSymbols);
}
var _getAllKeys = getAllKeys;
/** Used to compose bitmasks for value comparisons. */
var COMPARE_PARTIAL_FLAG$1 = 1;
/** Used for built-in method references. */
var objectProto$4 = Object.prototype;
/** Used to check objects for own properties. */
var hasOwnProperty$4 = objectProto$4.hasOwnProperty;
/**
* A specialized version of `baseIsEqualDeep` for objects with support for
* partial deep comparisons.
*
* @private
* @param {Object} object The object to compare.
* @param {Object} other The other object to compare.
* @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details.
* @param {Function} customizer The function to customize comparisons.
* @param {Function} equalFunc The function to determine equivalents of values.
* @param {Object} stack Tracks traversed `object` and `other` objects.
* @returns {boolean} Returns `true` if the objects are equivalent, else `false`.
*/
function equalObjects(object, other, bitmask, customizer, equalFunc, stack) {
var isPartial = bitmask & COMPARE_PARTIAL_FLAG$1,
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$4.call(other, key))) {
return false;
}
}
// Check that cyclic values are equal.
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);
}
// Recursively compare objects (susceptible to call stack limits).
if (
!(compared === undefined
? 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;
// Non `Object` object instances with different constructors are not equal.
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 _equalObjects = equalObjects;
/* Built-in method references that are verified to be native. */
var DataView = _getNative(_root, "DataView");
var _DataView = DataView;
/* Built-in method references that are verified to be native. */
var Promise$1 = _getNative(_root, "Promise");
var _Promise = Promise$1;
/* Built-in method references that are verified to be native. */
var Set$1 = _getNative(_root, "Set");
var _Set = Set$1;
/* Built-in method references that are verified to be native. */
var WeakMap$1 = _getNative(_root, "WeakMap");
var _WeakMap = WeakMap$1;
/** `Object#toString` result references. */
var mapTag$3 = "[object Map]",
objectTag$2 = "[object Object]",
promiseTag = "[object Promise]",
setTag$3 = "[object Set]",
weakMapTag$1 = "[object WeakMap]";
var dataViewTag$2 = "[object DataView]";
/** Used to detect maps, sets, and weakmaps. */
var dataViewCtorString = _toSource(_DataView),
mapCtorString = _toSource(_Map),
promiseCtorString = _toSource(_Promise),
setCtorString = _toSource(_Set),
weakMapCtorString = _toSource(_WeakMap);
/**
* Gets the `toStringTag` of `value`.
*
* @private
* @param {*} value The value to query.
* @returns {string} Returns the `toStringTag`.
*/
var getTag = _baseGetTag;
// Fallback for data views, maps, sets, and weak maps in IE 11 and promises in Node.js < 6.
if (
(_DataView && getTag(new _DataView(new ArrayBuffer(1))) != dataViewTag$2) ||
(_Map && getTag(new _Map()) != mapTag$3) ||
(_Promise && getTag(_Promise.resolve()) != promiseTag) ||
(_Set && getTag(new _Set()) != setTag$3) ||
(_WeakMap && getTag(new _WeakMap()) != weakMapTag$1)
) {
getTag = function (value) {
var result = _baseGetTag(value),
Ctor = result == objectTag$2 ? value.constructor : undefined,
ctorString = Ctor ? _toSource(Ctor) : "";
if (ctorString) {
switch (ctorString) {
case dataViewCtorString:
return dataViewTag$2;
case mapCtorString:
return mapTag$3;
case promiseCtorString:
return promiseTag;
case setCtorString:
return setTag$3;
case weakMapCtorString:
return weakMapTag$1;
}
}
return result;
};
}
var _getTag = getTag;
/** Used to compose bitmasks for value comparisons. */
var COMPARE_PARTIAL_FLAG = 1;
/** `Object#toString` result references. */
var argsTag$1 = "[object Arguments]",
arrayTag$1 = "[object Array]",
objectTag$1 = "[object Object]";
/** Used for built-in method references. */
var objectProto$3 = Object.prototype;
/** Used to check objects for own properties. */
var hasOwnProperty$3 = objectProto$3.hasOwnProperty;
/**
* A specialized version of `baseIsEqual` for arrays and objects which performs
* deep comparisons and tracks traversed objects enabling objects with circular
* references to be compared.
*
* @private
* @param {Object} object The object to compare.
* @param {Object} other The other object to compare.
* @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details.
* @param {Function} customizer The function to customize comparisons.
* @param {Function} equalFunc The function to determine equivalents of values.
* @param {Object} [stack] Tracks traversed `object` and `other` objects.
* @returns {boolean} Returns `true` if the objects are equivalent, else `false`.
*/
function baseIsEqualDeep(
object,
other,
bitmask,
customizer,
equalFunc,
stack
) {
var objIsArr = isArray_1(object),
othIsArr = isArray_1(other),
objTag = objIsArr ? arrayTag$1 : _getTag(object),
othTag = othIsArr ? arrayTag$1 : _getTag(other);
objTag = objTag == argsTag$1 ? objectTag$1 : objTag;
othTag = othTag == argsTag$1 ? objectTag$1 : othTag;
var objIsObj = objTag == objectTag$1,
othIsObj = othTag == objectTag$1,
isSameTag = objTag == othTag;
if (isSameTag && isBuffer_1(object)) {
if (!isBuffer_1(other)) {
return false;
}
objIsArr = true;
objIsObj = false;
}
if (isSameTag && !objIsObj) {
stack || (stack = new _Stack());
return objIsArr || isTypedArray_1(object)
? _equalArrays(object, other, bitmask, customizer, equalFunc, stack)
: _equalByTag(
object,
other,
objTag,
bitmask,
customizer,
equalFunc,
stack
);
}
if (!(bitmask & COMPARE_PARTIAL_FLAG)) {
var objIsWrapped =
objIsObj && hasOwnProperty$3.call(object, "__wrapped__"),
othIsWrapped = othIsObj && hasOwnProperty$3.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);
}
var _baseIsEqualDeep = baseIsEqualDeep;
/**
* The base implementation of `_.isEqual` which supports partial comparisons
* and tracks traversed objects.
*
* @private
* @param {*} value The value to compare.
* @param {*} other The other value to compare.
* @param {boolean} bitmask The bitmask flags.
* 1 - Unordered comparison
* 2 - Partial comparison
* @param {Function} [customizer] The function to customize comparisons.
* @param {Object} [stack] Tracks traversed `value` and `other` objects.
* @returns {boolean} Returns `true` if the values are equivalent, else `false`.
*/
function baseIsEqual(value, other, bitmask, customizer, stack) {
if (value === other) {
return true;
}
if (
value == null ||
other == null ||
(!isObjectLike_1(value) && !isObjectLike_1(other))
) {
return value !== value && other !== other;
}
return _baseIsEqualDeep(
value,
other,
bitmask,
customizer,
baseIsEqual,
stack
);
}
var _baseIsEqual = baseIsEqual;
function toObject(arr) {
const res = {};
for (let i = 0; i < arr.length; i++) {
if (arr[i]) {
extend(res, arr[i]);
}
}
return res;
}
const getValueByPath = (obj, paths = "") => {
let ret = obj;
paths.split(".").map((path) => {
ret = ret == null ? void 0 : ret[path];
});
return ret;
};
function getPropByPath(obj, path, strict) {
let tempObj = obj;
let key, value;
if (obj && hasOwn(obj, path)) {
key = path;
value = tempObj == null ? void 0 : tempObj[path];
} else {
path = path.replace(/\[(\w+)\]/g, ".$1");
path = path.replace(/^\./, "");
const keyArr = path.split(".");
let i = 0;
for (i; i < keyArr.length - 1; i++) {
if (!tempObj && !strict) break;
const key2 = keyArr[i];
if (key2 in tempObj) {
tempObj = tempObj[key2];
} else {
if (strict) {
throw new Error("please transfer a valid prop path to form item!");
}
break;
}
}
key = keyArr[i];
value = tempObj == null ? void 0 : tempObj[keyArr[i]];
}
return {
o: tempObj,
k: key,
v: value,
};
}
const generateId = () => Math.floor(Math.random() * 1e4);
const escapeRegexpString = (value = "") =>
String(value).replace(/[|\\{}()[\]^$+*?.]/g, "\\$&");
const coerceTruthyValueToArray = (arr) => {
if (!arr && arr !== 0) {
return [];
}
return Array.isArray(arr) ? arr : [arr];
};
const isFirefox$1 = function () {
return !isServer && !!window.navigator.userAgent.match(/firefox/i);
};
const autoprefixer = function (style) {
const rules = ["transform", "transition", "animation"];
const prefixes = ["ms-", "webkit-"];
rules.forEach((rule) => {
const value = style[rule];
if (rule && value) {
prefixes.forEach((prefix) => {
style[prefix + rule] = value;
});
}
});
return style;
};
const isBool = (val) => typeof val === "boolean";
const isNumber = (val) => typeof val === "number";
const isHTMLElement$1 = (val) => toRawType(val).startsWith("HTML");
function rafThrottle(fn) {
let locked = false;
return function (...args) {
if (locked) return;
locked = true;
window.requestAnimationFrame(() => {
fn.apply(this, args);
locked = false;
});
};
}
function isUndefined(val) {
return val === void 0;
}
function useGlobalConfig() {
const vm = vue.getCurrentInstance();
if ("$ELEMENT" in vm.proxy) {
return vm.proxy.$ELEMENT;
}
return {};
}
function isEmpty(val) {
if (
(!val && val !== 0) ||
(isArray$1(val) && !val.length) ||
(isObject$2(val) && !Object.keys(val).length)
)
return true;
return false;
}
function arrayFlat(arr) {
return arr.reduce((acm, item) => {
const val = Array.isArray(item) ? arrayFlat(item) : item;
return acm.concat(val);
}, []);
}
function deduplicate(arr) {
return Array.from(new Set(arr));
}
function $(ref) {
return ref.value;
}
function addUnit(value) {
if (isString$1(value)) {
return value;
} else if (isNumber(value)) {
return `${value}px`;
}
return "";
}
const refAttacher = (ref) => {
return (val) => {
ref.value = val;
};
};
const trim = function (s) {
return (s || "").replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, "");
};
const on = function (element, event, handler, useCapture = false) {
if (element && event && handler) {
element == null
? void 0
: element.addEventListener(event, handler, useCapture);
}
};
const off = function (element, event, handler, useCapture = false) {
if (element && event && handler) {
element == null
? void 0
: element.removeEventListener(event, handler, useCapture);
}
};
const once = function (el, event, fn) {
const listener = function (...args) {
if (fn) {
fn.apply(this, args);
}
off(el, event, listener);
};
on(el, event, listener);
};
function hasClass(el, cls) {
if (!el || !cls) return false;
if (cls.indexOf(" ") !== -1)
throw new Error("className should not contain space.");
if (el.classList) {
return el.classList.contains(cls);
} else {
return ` ${el.className} `.indexOf(` ${cls} `) > -1;
}
}
function addClass(el, cls) {
if (!el) return;
let curClass = el.className;
const classes = (cls || "").split(" ");
for (let i = 0, j = classes.length; i < j; i++) {
const clsName = classes[i];
if (!clsName) continue;
if (el.classList) {
el.classList.add(clsName);
} else if (!hasClass(el, clsName)) {
curClass += ` ${clsName}`;
}
}
if (!el.classList) {
el.className = curClass;
}
}
function removeClass(el, cls) {
if (!el || !cls) return;
const classes = cls.split(" ");
let curClass = ` ${el.className} `;
for (let i = 0, j = classes.length; i < j; i++) {
const clsName = classes[i];
if (!clsName) continue;
if (el.classList) {
el.classList.remove(clsName);
} else if (hasClass(el, clsName)) {
curClass = curClass.replace(` ${clsName} `, " ");
}
}
if (!el.classList) {
el.className = trim(curClass);
}
}
const getStyle = function (element, styleName) {
if (isServer) return;
if (!element || !styleName) return null;
styleName = camelize(styleName);
if (styleName === "float") {
styleName = "cssFloat";
}
try {
const style = element.style[styleName];
if (style) return style;
const computed = document.defaultView.getComputedStyle(element, "");
return computed ? computed[styleName] : "";
} catch (e) {
return element.style[styleName];
}
};
const isScroll = (el, isVertical) => {
if (isServer) return;
const determinedDirection = isVertical === null || isVertical === void 0;
const overflow = determinedDirection
? getStyle(el, "overflow")
: isVertical
? getStyle(el, "overflow-y")
: getStyle(el, "overflow-x");
return overflow.match(/(scroll|auto|overlay)/);
};
const getScrollContainer = (el, isVertical) => {
if (isServer) return;
let parent = el;
while (parent) {
if ([window, document, document.documentElement].includes(parent)) {
return window;
}
if (isScroll(parent, isVertical)) {
return parent;
}
parent = parent.parentNode;
}
return parent;
};
const isInContainer = (el, container) => {
if (isServer || !el || !container) return false;
const elRect = el.getBoundingClientRect();
let containerRect;
if (
[window, document, document.documentElement, null, void 0].includes(
container
)
) {
containerRect = {
top: 0,
right: window.innerWidth,
bottom: window.innerHeight,
left: 0,
};
} else {
containerRect = container.getBoundingClientRect();
}
return (
elRect.top < containerRect.bottom &&
elRect.bottom > containerRect.top &&
elRect.right > containerRect.left &&
elRect.left < containerRect.right
);
};
const getOffsetTop = (el) => {
let offset = 0;
let parent = el;
while (parent) {
offset += parent.offsetTop;
parent = parent.offsetParent;
}
return offset;
};
const getOffsetTopDistance = (el, containerEl) => {
return Math.abs(getOffsetTop(el) - getOffsetTop(containerEl));
};
const stop = (e) => e.stopPropagation();
var index$1 = (el, events) => {
vue.watch(el, (val) => {
if (val) {
events.forEach(({ name, handler }) => {
on(el.value, name, handler);
});
} else {
events.forEach(({ name, handler }) => {
off(el.value, name, handler);
});
}
});
};
let scrollBarWidth;
function scrollbarWidth() {
var _a;
if (isServer) return 0;
if (scrollBarWidth !== void 0) return scrollBarWidth;
const outer = document.createElement("div");
outer.className = "el-scrollbar__wrap";
outer.style.visibility = "hidden";
outer.style.width = "100px";
outer.style.position = "absolute";
outer.style.top = "-9999px";
document.body.appendChild(outer);
const widthNoScroll = outer.offsetWidth;
outer.style.overflow = "scroll";
const inner = document.createElement("div");
inner.style.width = "100%";
outer.appendChild(inner);
const widthWithScroll = inner.offsetWidth;
(_a = outer.parentNode) == null ? void 0 : _a.removeChild(outer);
scrollBarWidth = widthNoScroll - widthWithScroll;
return scrollBarWidth;
}
var useLockScreen = (trigger) => {
if (!vue.isRef(trigger)) {
throwError(
"[useLockScreen]",
"You need to pass a ref param to this function"
);
}
let scrollBarWidth = 0;
let withoutHiddenClass = false;
let bodyPaddingRight = "0";
let computedBodyPaddingRight = 0;
vue.onUnmounted(() => {
cleanup();
});
const cleanup = () => {
removeClass(document.body, "el-popup-parent--hidden");
if (withoutHiddenClass) {
document.body.style.paddingRight = bodyPaddingRight;
}
};
vue.watch(trigger, (val) => {
if (val) {
withoutHiddenClass = !hasClass(
document.body,
"el-popup-parent--hidden"
);
if (withoutHiddenClass) {
bodyPaddingRight = document.body.style.paddingRight;
computedBodyPaddingRight = parseInt(
getStyle(document.body, "paddingRight"),
10
);
}
scrollBarWidth = scrollbarWidth();
const bodyHasOverflow =
document.documentElement.clientHeight < document.body.scrollHeight;
const bodyOverflowY = getStyle(document.body, "overflowY");
if (
scrollBarWidth > 0 &&
(bodyHasOverflow || bodyOverflowY === "scroll") &&
withoutHiddenClass
) {
document.body.style.paddingRight = `${
computedBodyPaddingRight + scrollBarWidth
}px`;
}
addClass(document.body, "el-popup-parent--hidden");
} else {
cleanup();
}
});
};
var useRestoreActive = (toggle, initialFocus) => {
let previousActive;
vue.watch(
() => toggle.value,
(val) => {
var _a, _b;
if (val) {
previousActive = document.activeElement;
if (vue.isRef(initialFocus)) {
(_b = (_a = initialFocus.value).focus) == null
? void 0
: _b.call(_a);
}
} else {
{
previousActive.focus();
}
}
}
);
};
const EVENT_CODE = {
tab: "Tab",
enter: "Enter",
space: "Space",
left: "ArrowLeft",
up: "ArrowUp",
right: "ArrowRight",
down: "ArrowDown",
esc: "Escape",
delete: "Delete",
backspace: "Backspace",
};
const FOCUSABLE_ELEMENT_SELECTORS = `a[href],button:not([disabled]),button:not([hidden]),:not([tabindex="-1"]),input:not([disabled]),input:not([type="hidden"]),select:not([disabled]),textarea:not([disabled])`;
const isVisible = (element) => {
const computed = getComputedStyle(element);
return computed.position === "fixed"
? false
: element.offsetParent !== null;
};
const obtainAllFocusableElements = (element) => {
return Array.from(element.querySelectorAll(FOCUSABLE_ELEMENT_SELECTORS))
.filter(isFocusable)
.filter(isVisible);
};
const isFocusable = (element) => {
if (
element.tabIndex > 0 ||
(element.tabIndex === 0 && element.getAttribute("tabIndex") !== null)
) {
return true;
}
if (element.disabled) {
return false;
}
switch (element.nodeName) {
case "A": {
return !!element.href && element.rel !== "ignore";
}
case "INPUT": {
return !(element.type === "hidden" || element.type === "file");
}
case "BUTTON":
case "SELECT":
case "TEXTAREA": {
return true;
}
default: {
return false;
}
}
};
const triggerEvent = function (elm, name, ...opts) {
let eventName;
if (name.includes("mouse") || name.includes("click")) {
eventName = "MouseEvents";
} else if (name.includes("key")) {
eventName = "KeyboardEvent";
} else {
eventName = "HTMLEvents";
}
const evt = document.createEvent(eventName);
evt.initEvent(name, ...opts);
elm.dispatchEvent(evt);
return elm;
};
const modalStack = [];
const closeModal = (e) => {
if (modalStack.length === 0) return;
if (e.code === EVENT_CODE.esc) {
e.stopPropagation();
const topModal = modalStack[modalStack.length - 1];
topModal.handleClose();
}
};
var useModal = (instance, visibleRef) => {
vue.watch(
() => visibleRef.value,
(val) => {
if (val) {
modalStack.push(instance);
} else {
modalStack.splice(
modalStack.findIndex((modal) => modal === instance),
1
);
}
}
);
};
if (!isServer) {
on(document, "keydown", closeModal);
}
const useMigrating = function () {
vue.onMounted(() => {
vue.getCurrentInstance();
return;
});
const getMigratingConfig = function () {
return {
props: {},
events: {},
};
};
return {
getMigratingConfig,
};
};
var useFocus = (el) => {
return {
focus: () => {
var _a, _b;
(_b = (_a = el.value) == null ? void 0 : _a.focus) == null
? void 0
: _b.call(_a);
},
};
};
function useThrottleRender(loading, throttle = 0) {
if (throttle === 0) return loading;
const throttled = vue.ref(false);
let timeoutHandle = 0;
const dispatchThrottling = () => {
if (timeoutHandle) {
clearTimeout(timeoutHandle);
}
timeoutHandle = window.setTimeout(() => {
throttled.value = loading.value;
}, throttle);
};
vue.onMounted(dispatchThrottling);
vue.watch(
() => loading.value,
(val) => {
if (val) {
dispatchThrottling();
} else {
throttled.value = val;
}
}
);
return throttled;
}
var usePreventGlobal = (indicator, evt, cb) => {
const prevent = (e) => {
if (cb(e)) {
e.stopImmediatePropagation();
}
};
vue.watch(
() => indicator.value,
(val) => {
if (val) {
on(document, evt, prevent, true);
} else {
off(document, evt, prevent, true);
}
},
{ immediate: true }
);
};
let target = isServer ? void 0 : document.body;
function createGlobalNode(id) {
const el = document.createElement("div");
if (id !== void 0) {
el.id = id;
}
target.appendChild(el);
return el;
}
function removeGlobalNode(el) {
el.remove();
}
var useTeleport = (contentRenderer, appendToBody) => {
const isTeleportVisible = vue.ref(false);
if (isServer) {
return {
isTeleportVisible,
showTeleport: NOOP,
hideTeleport: NOOP,
renderTeleport: NOOP,
};
}
let $el = null;
const showTeleport = () => {
isTeleportVisible.value = true;
if ($el !== null) return;
$el = createGlobalNode();
};
const hideTeleport = () => {
isTeleportVisible.value = false;
if ($el !== null) {
removeGlobalNode($el);
$el = null;
}
};
const renderTeleport = () => {
return appendToBody.value !== true
? contentRenderer()
: isTeleportVisible.value
? [vue.h(vue.Teleport, { to: $el }, contentRenderer())]
: void 0;
};
vue.onUnmounted(hideTeleport);
return {
isTeleportVisible,
showTeleport,
hideTeleport,
renderTeleport,
};
};
function useTimeout() {
let timeoutHandle;
vue.onBeforeUnmount(() => {
clearTimeout(timeoutHandle);
});
return {
registerTimeout: (fn, delay) => {
clearTimeout(timeoutHandle);
timeoutHandle = setTimeout(fn, delay);
},
cancelTimeout: () => {
clearTimeout(timeoutHandle);
},
};
}
const UPDATE_MODEL_EVENT = "update:modelValue";
const CHANGE_EVENT = "change";
const INPUT_EVENT = "input";
const VALIDATE_STATE_MAP = {
validating: "el-icon-loading",
success: "el-icon-circle-check",
error: "el-icon-circle-close",
};
var __defProp$M = Object.defineProperty;
var __getOwnPropSymbols$M = Object.getOwnPropertySymbols;
var __hasOwnProp$M = Object.prototype.hasOwnProperty;
var __propIsEnum$M = Object.prototype.propertyIsEnumerable;
var __defNormalProp$M = (obj, key, value) =>
key in obj
? __defProp$M(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$M = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$M.call(b, prop)) __defNormalProp$M(a, prop, b[prop]);
if (__getOwnPropSymbols$M)
for (var prop of __getOwnPropSymbols$M(b)) {
if (__propIsEnum$M.call(b, prop)) __defNormalProp$M(a, prop, b[prop]);
}
return a;
};
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
const useModelToggleProps = {
modelValue: {
type: Boolean,
default: null,
},
"onUpdate:modelValue": Function,
};
const useModelToggleEmits = [UPDATE_MODEL_EVENT];
const useModelToggle = ({
indicator,
shouldHideWhenRouteChanges,
shouldProceed,
onShow,
onHide,
}) => {
const { appContext, props, proxy, emit } = vue.getCurrentInstance();
const hasUpdateHandler = vue.computed(() =>
isFunction$1(props["onUpdate:modelValue"])
);
const isModelBindingAbsent = vue.computed(() => props.modelValue === null);
const doShow = () => {
if (indicator.value === true) {
return;
}
indicator.value = true;
if (isFunction$1(onShow)) {
onShow();
}
};
const doHide = () => {
if (indicator.value === false) {
return;
}
indicator.value = false;
if (isFunction$1(onHide)) {
onHide();
}
};
const show = () => {
if (
props.disabled === true ||
(isFunction$1(shouldProceed) && !shouldProceed())
)
return;
const shouldEmit = hasUpdateHandler.value && !isServer;
if (shouldEmit) {
emit(UPDATE_MODEL_EVENT, true);
}
if (isModelBindingAbsent.value || !shouldEmit) {
doShow();
}
};
const hide = () => {
if (props.disabled === true || isServer) return;
const shouldEmit = hasUpdateHandler.value && !isServer;
if (shouldEmit) {
emit(UPDATE_MODEL_EVENT, false);
}
if (isModelBindingAbsent.value || !shouldEmit) {
doHide();
}
};
const onChange = (val) => {
if (!isBool(val)) return;
if (props.disabled && val) {
if (hasUpdateHandler.value) {
emit(UPDATE_MODEL_EVENT, false);
}
} else if (indicator.value !== val) {
if (val) {
doShow();
} else {
doHide();
}
}
};
const toggle = () => {
if (indicator.value) {
hide();
} else {
show();
}
};
vue.watch(() => props.modelValue, onChange);
if (
shouldHideWhenRouteChanges &&
appContext.config.globalProperties.$route !== void 0
) {
vue.watch(
() => __spreadValues$M({}, proxy.$route),
() => {
if (shouldHideWhenRouteChanges.value && indicator.value) {
hide();
}
}
);
}
vue.onMounted(() => {
onChange(props.modelValue);
});
return {
hide,
show,
toggle,
};
};
var top = "top";
var bottom = "bottom";
var right = "right";
var left = "left";
var auto = "auto";
var basePlacements = [top, bottom, right, left];
var start = "start";
var end = "end";
var clippingParents = "clippingParents";
var viewport = "viewport";
var popper = "popper";
var reference = "reference";
var variationPlacements = /*#__PURE__*/ basePlacements.reduce(function (
acc,
placement
) {
return acc.concat([placement + "-" + start, placement + "-" + end]);
},
[]);
var placements = /*#__PURE__*/ []
.concat(basePlacements, [auto])
.reduce(function (acc, placement) {
return acc.concat([
placement,
placement + "-" + start,
placement + "-" + end,
]);
}, []); // modifiers that need to read the DOM
var beforeRead = "beforeRead";
var read = "read";
var afterRead = "afterRead"; // pure-logic modifiers
var beforeMain = "beforeMain";
var main = "main";
var afterMain = "afterMain"; // modifier with the purpose to write to the DOM (or write into a framework state)
var beforeWrite = "beforeWrite";
var write = "write";
var afterWrite = "afterWrite";
var modifierPhases = [
beforeRead,
read,
afterRead,
beforeMain,
main,
afterMain,
beforeWrite,
write,
afterWrite,
];
function getNodeName(element) {
return element ? (element.nodeName || "").toLowerCase() : null;
}
function getWindow(node) {
if (node == null) {
return window;
}
if (node.toString() !== "[object Window]") {
var ownerDocument = node.ownerDocument;
return ownerDocument ? ownerDocument.defaultView || window : window;
}
return node;
}
function isElement(node) {
var OwnElement = getWindow(node).Element;
return node instanceof OwnElement || node instanceof Element;
}
function isHTMLElement(node) {
var OwnElement = getWindow(node).HTMLElement;
return node instanceof OwnElement || node instanceof HTMLElement;
}
function isShadowRoot(node) {
// IE 11 has no ShadowRoot
if (typeof ShadowRoot === "undefined") {
return false;
}
var OwnElement = getWindow(node).ShadowRoot;
return node instanceof OwnElement || node instanceof ShadowRoot;
}
// and applies them to the HTMLElements such as popper and arrow
function applyStyles(_ref) {
var state = _ref.state;
Object.keys(state.elements).forEach(function (name) {
var style = state.styles[name] || {};
var attributes = state.attributes[name] || {};
var element = state.elements[name]; // arrow is optional + virtual elements
if (!isHTMLElement(element) || !getNodeName(element)) {
return;
} // Flow doesn't support to extend this property, but it's the most
// effective way to apply styles to an HTMLElement
// $FlowFixMe[cannot-write]
Object.assign(element.style, style);
Object.keys(attributes).forEach(function (name) {
var value = attributes[name];
if (value === false) {
element.removeAttribute(name);
} else {
element.setAttribute(name, value === true ? "" : value);
}
});
});
}
function effect$2(_ref2) {
var state = _ref2.state;
var initialStyles = {
popper: {
position: state.options.strategy,
left: "0",
top: "0",
margin: "0",
},
arrow: {
position: "absolute",
},
reference: {},
};
Object.assign(state.elements.popper.style, initialStyles.popper);
state.styles = initialStyles;
if (state.elements.arrow) {
Object.assign(state.elements.arrow.style, initialStyles.arrow);
}
return function () {
Object.keys(state.elements).forEach(function (name) {
var element = state.elements[name];
var attributes = state.attributes[name] || {};
var styleProperties = Object.keys(
state.styles.hasOwnProperty(name)
? state.styles[name]
: initialStyles[name]
); // Set all values to an empty string to unset them
var style = styleProperties.reduce(function (style, property) {
style[property] = "";
return style;
}, {}); // arrow is optional + virtual elements
if (!isHTMLElement(element) || !getNodeName(element)) {
return;
}
Object.assign(element.style, style);
Object.keys(attributes).forEach(function (attribute) {
element.removeAttribute(attribute);
});
});
};
} // eslint-disable-next-line import/no-unused-modules
var applyStyles$1 = {
name: "applyStyles",
enabled: true,
phase: "write",
fn: applyStyles,
effect: effect$2,
requires: ["computeStyles"],
};
function getBasePlacement(placement) {
return placement.split("-")[0];
}
var round$1 = Math.round;
function getBoundingClientRect(element, includeScale) {
if (includeScale === void 0) {
includeScale = false;
}
var rect = element.getBoundingClientRect();
var scaleX = 1;
var scaleY = 1;
if (isHTMLElement(element) && includeScale) {
var offsetHeight = element.offsetHeight;
var offsetWidth = element.offsetWidth; // Do not attempt to divide by 0, otherwise we get `Infinity` as scale
// Fallback to 1 in case both values are `0`
if (offsetWidth > 0) {
scaleX = rect.width / offsetWidth || 1;
}
if (offsetHeight > 0) {
scaleY = rect.height / offsetHeight || 1;
}
}
return {
width: round$1(rect.width / scaleX),
height: round$1(rect.height / scaleY),
top: round$1(rect.top / scaleY),
right: round$1(rect.right / scaleX),
bottom: round$1(rect.bottom / scaleY),
left: round$1(rect.left / scaleX),
x: round$1(rect.left / scaleX),
y: round$1(rect.top / scaleY),
};
}
// means it doesn't take into account transforms.
function getLayoutRect(element) {
var clientRect = getBoundingClientRect(element); // Use the clientRect sizes if it's not been transformed.
// Fixes https://github.com/popperjs/popper-core/issues/1223
var width = element.offsetWidth;
var height = element.offsetHeight;
if (Math.abs(clientRect.width - width) <= 1) {
width = clientRect.width;
}
if (Math.abs(clientRect.height - height) <= 1) {
height = clientRect.height;
}
return {
x: element.offsetLeft,
y: element.offsetTop,
width: width,
height: height,
};
}
function contains(parent, child) {
var rootNode = child.getRootNode && child.getRootNode(); // First, attempt with faster native method
if (parent.contains(child)) {
return true;
} // then fallback to custom implementation with Shadow DOM support
else if (rootNode && isShadowRoot(rootNode)) {
var next = child;
do {
if (next && parent.isSameNode(next)) {
return true;
} // $FlowFixMe[prop-missing]: need a better way to handle this...
next = next.parentNode || next.host;
} while (next);
} // Give up, the result is false
return false;
}
function getComputedStyle$1(element) {
return getWindow(element).getComputedStyle(element);
}
function isTableElement(element) {
return ["table", "td", "th"].indexOf(getNodeName(element)) >= 0;
}
function getDocumentElement(element) {
// $FlowFixMe[incompatible-return]: assume body is always available
return (
(isElement(element)
? element.ownerDocument // $FlowFixMe[prop-missing]
: element.document) || window.document
).documentElement;
}
function getParentNode(element) {
if (getNodeName(element) === "html") {
return element;
}
return (
// this is a quicker (but less type safe) way to save quite some bytes from the bundle
// $FlowFixMe[incompatible-return]
// $FlowFixMe[prop-missing]
element.assignedSlot || // step into the shadow DOM of the parent of a slotted node
element.parentNode || // DOM Element detected
(isShadowRoot(element) ? element.host : null) || // ShadowRoot detected
// $FlowFixMe[incompatible-call]: HTMLElement is a Node
getDocumentElement(element) // fallback
);
}
function getTrueOffsetParent(element) {
if (
!isHTMLElement(element) || // https://github.com/popperjs/popper-core/issues/837
getComputedStyle$1(element).position === "fixed"
) {
return null;
}
return element.offsetParent;
} // `.offsetParent` reports `null` for fixed elements, while absolute elements
// return the containing block
function getContainingBlock(element) {
var isFirefox = navigator.userAgent.toLowerCase().indexOf("firefox") !== -1;
var isIE = navigator.userAgent.indexOf("Trident") !== -1;
if (isIE && isHTMLElement(element)) {
// In IE 9, 10 and 11 fixed elements containing block is always established by the viewport
var elementCss = getComputedStyle$1(element);
if (elementCss.position === "fixed") {
return null;
}
}
var currentNode = getParentNode(element);
while (
isHTMLElement(currentNode) &&
["html", "body"].indexOf(getNodeName(currentNode)) < 0
) {
var css = getComputedStyle$1(currentNode); // This is non-exhaustive but covers the most common CSS properties that
// create a containing block.
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
if (
css.transform !== "none" ||
css.perspective !== "none" ||
css.contain === "paint" ||
["transform", "perspective"].indexOf(css.willChange) !== -1 ||
(isFirefox && css.willChange === "filter") ||
(isFirefox && css.filter && css.filter !== "none")
) {
return currentNode;
} else {
currentNode = currentNode.parentNode;
}
}
return null;
} // Gets the closest ancestor positioned element. Handles some edge cases,
// such as table ancestors and cross browser bugs.
function getOffsetParent(element) {
var window = getWindow(element);
var offsetParent = getTrueOffsetParent(element);
while (
offsetParent &&
isTableElement(offsetParent) &&
getComputedStyle$1(offsetParent).position === "static"
) {
offsetParent = getTrueOffsetParent(offsetParent);
}
if (
offsetParent &&
(getNodeName(offsetParent) === "html" ||
(getNodeName(offsetParent) === "body" &&
getComputedStyle$1(offsetParent).position === "static"))
) {
return window;
}
return offsetParent || getContainingBlock(element) || window;
}
function getMainAxisFromPlacement(placement) {
return ["top", "bottom"].indexOf(placement) >= 0 ? "x" : "y";
}
var max$1 = Math.max;
var min$1 = Math.min;
var round = Math.round;
function within(min, value, max) {
return max$1(min, min$1(value, max));
}
function getFreshSideObject() {
return {
top: 0,
right: 0,
bottom: 0,
left: 0,
};
}
function mergePaddingObject(paddingObject) {
return Object.assign({}, getFreshSideObject(), paddingObject);
}
function expandToHashMap(value, keys) {
return keys.reduce(function (hashMap, key) {
hashMap[key] = value;
return hashMap;
}, {});
}
var toPaddingObject = function toPaddingObject(padding, state) {
padding =
typeof padding === "function"
? padding(
Object.assign({}, state.rects, {
placement: state.placement,
})
)
: padding;
return mergePaddingObject(
typeof padding !== "number"
? padding
: expandToHashMap(padding, basePlacements)
);
};
function arrow(_ref) {
var _state$modifiersData$;
var state = _ref.state,
name = _ref.name,
options = _ref.options;
var arrowElement = state.elements.arrow;
var popperOffsets = state.modifiersData.popperOffsets;
var basePlacement = getBasePlacement(state.placement);
var axis = getMainAxisFromPlacement(basePlacement);
var isVertical = [left, right].indexOf(basePlacement) >= 0;
var len = isVertical ? "height" : "width";
if (!arrowElement || !popperOffsets) {
return;
}
var paddingObject = toPaddingObject(options.padding, state);
var arrowRect = getLayoutRect(arrowElement);
var minProp = axis === "y" ? top : left;
var maxProp = axis === "y" ? bottom : right;
var endDiff =
state.rects.reference[len] +
state.rects.reference[axis] -
popperOffsets[axis] -
state.rects.popper[len];
var startDiff = popperOffsets[axis] - state.rects.reference[axis];
var arrowOffsetParent = getOffsetParent(arrowElement);
var clientSize = arrowOffsetParent
? axis === "y"
? arrowOffsetParent.clientHeight || 0
: arrowOffsetParent.clientWidth || 0
: 0;
var centerToReference = endDiff / 2 - startDiff / 2; // Make sure the arrow doesn't overflow the popper if the center point is
// outside of the popper bounds
var min = paddingObject[minProp];
var max = clientSize - arrowRect[len] - paddingObject[maxProp];
var center = clientSize / 2 - arrowRect[len] / 2 + centerToReference;
var offset = within(min, center, max); // Prevents breaking syntax highlighting...
var axisProp = axis;
state.modifiersData[name] =
((_state$modifiersData$ = {}),
(_state$modifiersData$[axisProp] = offset),
(_state$modifiersData$.centerOffset = offset - center),
_state$modifiersData$);
}
function effect$1(_ref2) {
var state = _ref2.state,
options = _ref2.options;
var _options$element = options.element,
arrowElement =
_options$element === void 0 ? "[data-popper-arrow]" : _options$element;
if (arrowElement == null) {
return;
} // CSS selector
if (typeof arrowElement === "string") {
arrowElement = state.elements.popper.querySelector(arrowElement);
if (!arrowElement) {
return;
}
}
if (!contains(state.elements.popper, arrowElement)) {
return;
}
state.elements.arrow = arrowElement;
} // eslint-disable-next-line import/no-unused-modules
var arrow$1 = {
name: "arrow",
enabled: true,
phase: "main",
fn: arrow,
effect: effect$1,
requires: ["popperOffsets"],
requiresIfExists: ["preventOverflow"],
};
function getVariation(placement) {
return placement.split("-")[1];
}
var unsetSides = {
top: "auto",
right: "auto",
bottom: "auto",
left: "auto",
}; // Round the offsets to the nearest suitable subpixel based on the DPR.
// Zooming can change the DPR, but it seems to report a value that will
// cleanly divide the values into the appropriate subpixels.
function roundOffsetsByDPR(_ref) {
var x = _ref.x,
y = _ref.y;
var win = window;
var dpr = win.devicePixelRatio || 1;
return {
x: round(round(x * dpr) / dpr) || 0,
y: round(round(y * dpr) / dpr) || 0,
};
}
function mapToStyles(_ref2) {
var _Object$assign2;
var popper = _ref2.popper,
popperRect = _ref2.popperRect,
placement = _ref2.placement,
variation = _ref2.variation,
offsets = _ref2.offsets,
position = _ref2.position,
gpuAcceleration = _ref2.gpuAcceleration,
adaptive = _ref2.adaptive,
roundOffsets = _ref2.roundOffsets;
var _ref3 =
roundOffsets === true
? roundOffsetsByDPR(offsets)
: typeof roundOffsets === "function"
? roundOffsets(offsets)
: offsets,
_ref3$x = _ref3.x,
x = _ref3$x === void 0 ? 0 : _ref3$x,
_ref3$y = _ref3.y,
y = _ref3$y === void 0 ? 0 : _ref3$y;
var hasX = offsets.hasOwnProperty("x");
var hasY = offsets.hasOwnProperty("y");
var sideX = left;
var sideY = top;
var win = window;
if (adaptive) {
var offsetParent = getOffsetParent(popper);
var heightProp = "clientHeight";
var widthProp = "clientWidth";
if (offsetParent === getWindow(popper)) {
offsetParent = getDocumentElement(popper);
if (
getComputedStyle$1(offsetParent).position !== "static" &&
position === "absolute"
) {
heightProp = "scrollHeight";
widthProp = "scrollWidth";
}
} // $FlowFixMe[incompatible-cast]: force type refinement, we compare offsetParent with window above, but Flow doesn't detect it
offsetParent = offsetParent;
if (
placement === top ||
((placement === left || placement === right) && variation === end)
) {
sideY = bottom; // $FlowFixMe[prop-missing]
y -= offsetParent[heightProp] - popperRect.height;
y *= gpuAcceleration ? 1 : -1;
}
if (
placement === left ||
((placement === top || placement === bottom) && variation === end)
) {
sideX = right; // $FlowFixMe[prop-missing]
x -= offsetParent[widthProp] - popperRect.width;
x *= gpuAcceleration ? 1 : -1;
}
}
var commonStyles = Object.assign(
{
position: position,
},
adaptive && unsetSides
);
if (gpuAcceleration) {
var _Object$assign;
return Object.assign(
{},
commonStyles,
((_Object$assign = {}),
(_Object$assign[sideY] = hasY ? "0" : ""),
(_Object$assign[sideX] = hasX ? "0" : ""),
(_Object$assign.transform =
(win.devicePixelRatio || 1) <= 1
? "translate(" + x + "px, " + y + "px)"
: "translate3d(" + x + "px, " + y + "px, 0)"),
_Object$assign)
);
}
return Object.assign(
{},
commonStyles,
((_Object$assign2 = {}),
(_Object$assign2[sideY] = hasY ? y + "px" : ""),
(_Object$assign2[sideX] = hasX ? x + "px" : ""),
(_Object$assign2.transform = ""),
_Object$assign2)
);
}
function computeStyles(_ref4) {
var state = _ref4.state,
options = _ref4.options;
var _options$gpuAccelerat = options.gpuAcceleration,
gpuAcceleration =
_options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat,
_options$adaptive = options.adaptive,
adaptive = _options$adaptive === void 0 ? true : _options$adaptive,
_options$roundOffsets = options.roundOffsets,
roundOffsets =
_options$roundOffsets === void 0 ? true : _options$roundOffsets;
var commonStyles = {
placement: getBasePlacement(state.placement),
variation: getVariation(state.placement),
popper: state.elements.popper,
popperRect: state.rects.popper,
gpuAcceleration: gpuAcceleration,
};
if (state.modifiersData.popperOffsets != null) {
state.styles.popper = Object.assign(
{},
state.styles.popper,
mapToStyles(
Object.assign({}, commonStyles, {
offsets: state.modifiersData.popperOffsets,
position: state.options.strategy,
adaptive: adaptive,
roundOffsets: roundOffsets,
})
)
);
}
if (state.modifiersData.arrow != null) {
state.styles.arrow = Object.assign(
{},
state.styles.arrow,
mapToStyles(
Object.assign({}, commonStyles, {
offsets: state.modifiersData.arrow,
position: "absolute",
adaptive: false,
roundOffsets: roundOffsets,
})
)
);
}
state.attributes.popper = Object.assign({}, state.attributes.popper, {
"data-popper-placement": state.placement,
});
} // eslint-disable-next-line import/no-unused-modules
var computeStyles$1 = {
name: "computeStyles",
enabled: true,
phase: "beforeWrite",
fn: computeStyles,
data: {},
};
var passive = {
passive: true,
};
function effect(_ref) {
var state = _ref.state,
instance = _ref.instance,
options = _ref.options;
var _options$scroll = options.scroll,
scroll = _options$scroll === void 0 ? true : _options$scroll,
_options$resize = options.resize,
resize = _options$resize === void 0 ? true : _options$resize;
var window = getWindow(state.elements.popper);
var scrollParents = [].concat(
state.scrollParents.reference,
state.scrollParents.popper
);
if (scroll) {
scrollParents.forEach(function (scrollParent) {
scrollParent.addEventListener("scroll", instance.update, passive);
});
}
if (resize) {
window.addEventListener("resize", instance.update, passive);
}
return function () {
if (scroll) {
scrollParents.forEach(function (scrollParent) {
scrollParent.removeEventListener("scroll", instance.update, passive);
});
}
if (resize) {
window.removeEventListener("resize", instance.update, passive);
}
};
} // eslint-disable-next-line import/no-unused-modules
var eventListeners = {
name: "eventListeners",
enabled: true,
phase: "write",
fn: function fn() {},
effect: effect,
data: {},
};
var hash$1 = {
left: "right",
right: "left",
bottom: "top",
top: "bottom",
};
function getOppositePlacement(placement) {
return placement.replace(/left|right|bottom|top/g, function (matched) {
return hash$1[matched];
});
}
var hash = {
start: "end",
end: "start",
};
function getOppositeVariationPlacement(placement) {
return placement.replace(/start|end/g, function (matched) {
return hash[matched];
});
}
function getWindowScroll(node) {
var win = getWindow(node);
var scrollLeft = win.pageXOffset;
var scrollTop = win.pageYOffset;
return {
scrollLeft: scrollLeft,
scrollTop: scrollTop,
};
}
function getWindowScrollBarX(element) {
// If <html> has a CSS width greater than the viewport, then this will be
// incorrect for RTL.
// Popper 1 is broken in this case and never had a bug report so let's assume
// it's not an issue. I don't think anyone ever specifies width on <html>
// anyway.
// Browsers where the left scrollbar doesn't cause an issue report `0` for
// this (e.g. Edge 2019, IE11, Safari)
return (
getBoundingClientRect(getDocumentElement(element)).left +
getWindowScroll(element).scrollLeft
);
}
function getViewportRect(element) {
var win = getWindow(element);
var html = getDocumentElement(element);
var visualViewport = win.visualViewport;
var width = html.clientWidth;
var height = html.clientHeight;
var x = 0;
var y = 0; // NB: This isn't supported on iOS <= 12. If the keyboard is open, the popper
// can be obscured underneath it.
// Also, `html.clientHeight` adds the bottom bar height in Safari iOS, even
// if it isn't open, so if this isn't available, the popper will be detected
// to overflow the bottom of the screen too early.
if (visualViewport) {
width = visualViewport.width;
height = visualViewport.height; // Uses Layout Viewport (like Chrome; Safari does not currently)
// In Chrome, it returns a value very close to 0 (+/-) but contains rounding
// errors due to floating point numbers, so we need to check precision.
// Safari returns a number <= 0, usually < -1 when pinch-zoomed
// Feature detection fails in mobile emulation mode in Chrome.
// Math.abs(win.innerWidth / visualViewport.scale - visualViewport.width) <
// 0.001
// Fallback here: "Not Safari" userAgent
if (!/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
x = visualViewport.offsetLeft;
y = visualViewport.offsetTop;
}
}
return {
width: width,
height: height,
x: x + getWindowScrollBarX(element),
y: y,
};
}
// of the `<html>` and `<body>` rect bounds if horizontally scrollable
function getDocumentRect(element) {
var _element$ownerDocumen;
var html = getDocumentElement(element);
var winScroll = getWindowScroll(element);
var body =
(_element$ownerDocumen = element.ownerDocument) == null
? void 0
: _element$ownerDocumen.body;
var width = max$1(
html.scrollWidth,
html.clientWidth,
body ? body.scrollWidth : 0,
body ? body.clientWidth : 0
);
var height = max$1(
html.scrollHeight,
html.clientHeight,
body ? body.scrollHeight : 0,
body ? body.clientHeight : 0
);
var x = -winScroll.scrollLeft + getWindowScrollBarX(element);
var y = -winScroll.scrollTop;
if (getComputedStyle$1(body || html).direction === "rtl") {
x += max$1(html.clientWidth, body ? body.clientWidth : 0) - width;
}
return {
width: width,
height: height,
x: x,
y: y,
};
}
function isScrollParent(element) {
// Firefox wants us to check `-x` and `-y` variations as well
var _getComputedStyle = getComputedStyle$1(element),
overflow = _getComputedStyle.overflow,
overflowX = _getComputedStyle.overflowX,
overflowY = _getComputedStyle.overflowY;
return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX);
}
function getScrollParent(node) {
if (["html", "body", "#document"].indexOf(getNodeName(node)) >= 0) {
// $FlowFixMe[incompatible-return]: assume body is always available
return node.ownerDocument.body;
}
if (isHTMLElement(node) && isScrollParent(node)) {
return node;
}
return getScrollParent(getParentNode(node));
}
/*
given a DOM element, return the list of all scroll parents, up the list of ancesors
until we get to the top window object. This list is what we attach scroll listeners
to, because if any of these parent elements scroll, we'll need to re-calculate the
reference element's position.
*/
function listScrollParents(element, list) {
var _element$ownerDocumen;
if (list === void 0) {
list = [];
}
var scrollParent = getScrollParent(element);
var isBody =
scrollParent ===
((_element$ownerDocumen = element.ownerDocument) == null
? void 0
: _element$ownerDocumen.body);
var win = getWindow(scrollParent);
var target = isBody
? [win].concat(
win.visualViewport || [],
isScrollParent(scrollParent) ? scrollParent : []
)
: scrollParent;
var updatedList = list.concat(target);
return isBody
? updatedList // $FlowFixMe[incompatible-call]: isBody tells us target will be an HTMLElement here
: updatedList.concat(listScrollParents(getParentNode(target)));
}
function rectToClientRect(rect) {
return Object.assign({}, rect, {
left: rect.x,
top: rect.y,
right: rect.x + rect.width,
bottom: rect.y + rect.height,
});
}
function getInnerBoundingClientRect(element) {
var rect = getBoundingClientRect(element);
rect.top = rect.top + element.clientTop;
rect.left = rect.left + element.clientLeft;
rect.bottom = rect.top + element.clientHeight;
rect.right = rect.left + element.clientWidth;
rect.width = element.clientWidth;
rect.height = element.clientHeight;
rect.x = rect.left;
rect.y = rect.top;
return rect;
}
function getClientRectFromMixedType(element, clippingParent) {
return clippingParent === viewport
? rectToClientRect(getViewportRect(element))
: isHTMLElement(clippingParent)
? getInnerBoundingClientRect(clippingParent)
: rectToClientRect(getDocumentRect(getDocumentElement(element)));
} // A "clipping parent" is an overflowable container with the characteristic of
// clipping (or hiding) overflowing elements with a position different from
// `initial`
function getClippingParents(element) {
var clippingParents = listScrollParents(getParentNode(element));
var canEscapeClipping =
["absolute", "fixed"].indexOf(getComputedStyle$1(element).position) >= 0;
var clipperElement =
canEscapeClipping && isHTMLElement(element)
? getOffsetParent(element)
: element;
if (!isElement(clipperElement)) {
return [];
} // $FlowFixMe[incompatible-return]: https://github.com/facebook/flow/issues/1414
return clippingParents.filter(function (clippingParent) {
return (
isElement(clippingParent) &&
contains(clippingParent, clipperElement) &&
getNodeName(clippingParent) !== "body"
);
});
} // Gets the maximum area that the element is visible in due to any number of
// clipping parents
function getClippingRect(element, boundary, rootBoundary) {
var mainClippingParents =
boundary === "clippingParents"
? getClippingParents(element)
: [].concat(boundary);
var clippingParents = [].concat(mainClippingParents, [rootBoundary]);
var firstClippingParent = clippingParents[0];
var clippingRect = clippingParents.reduce(function (
accRect,
clippingParent
) {
var rect = getClientRectFromMixedType(element, clippingParent);
accRect.top = max$1(rect.top, accRect.top);
accRect.right = min$1(rect.right, accRect.right);
accRect.bottom = min$1(rect.bottom, accRect.bottom);
accRect.left = max$1(rect.left, accRect.left);
return accRect;
},
getClientRectFromMixedType(element, firstClippingParent));
clippingRect.width = clippingRect.right - clippingRect.left;
clippingRect.height = clippingRect.bottom - clippingRect.top;
clippingRect.x = clippingRect.left;
clippingRect.y = clippingRect.top;
return clippingRect;
}
function computeOffsets(_ref) {
var reference = _ref.reference,
element = _ref.element,
placement = _ref.placement;
var basePlacement = placement ? getBasePlacement(placement) : null;
var variation = placement ? getVariation(placement) : null;
var commonX = reference.x + reference.width / 2 - element.width / 2;
var commonY = reference.y + reference.height / 2 - element.height / 2;
var offsets;
switch (basePlacement) {
case top:
offsets = {
x: commonX,
y: reference.y - element.height,
};
break;
case bottom:
offsets = {
x: commonX,
y: reference.y + reference.height,
};
break;
case right:
offsets = {
x: reference.x + reference.width,
y: commonY,
};
break;
case left:
offsets = {
x: reference.x - element.width,
y: commonY,
};
break;
default:
offsets = {
x: reference.x,
y: reference.y,
};
}
var mainAxis = basePlacement
? getMainAxisFromPlacement(basePlacement)
: null;
if (mainAxis != null) {
var len = mainAxis === "y" ? "height" : "width";
switch (variation) {
case start:
offsets[mainAxis] =
offsets[mainAxis] - (reference[len] / 2 - element[len] / 2);
break;
case end:
offsets[mainAxis] =
offsets[mainAxis] + (reference[len] / 2 - element[len] / 2);
break;
}
}
return offsets;
}
function detectOverflow(state, options) {
if (options === void 0) {
options = {};
}
var _options = options,
_options$placement = _options.placement,
placement =
_options$placement === void 0 ? state.placement : _options$placement,
_options$boundary = _options.boundary,
boundary =
_options$boundary === void 0 ? clippingParents : _options$boundary,
_options$rootBoundary = _options.rootBoundary,
rootBoundary =
_options$rootBoundary === void 0 ? viewport : _options$rootBoundary,
_options$elementConte = _options.elementContext,
elementContext =
_options$elementConte === void 0 ? popper : _options$elementConte,
_options$altBoundary = _options.altBoundary,
altBoundary =
_options$altBoundary === void 0 ? false : _options$altBoundary,
_options$padding = _options.padding,
padding = _options$padding === void 0 ? 0 : _options$padding;
var paddingObject = mergePaddingObject(
typeof padding !== "number"
? padding
: expandToHashMap(padding, basePlacements)
);
var altContext = elementContext === popper ? reference : popper;
var popperRect = state.rects.popper;
var element = state.elements[altBoundary ? altContext : elementContext];
var clippingClientRect = getClippingRect(
isElement(element)
? element
: element.contextElement || getDocumentElement(state.elements.popper),
boundary,
rootBoundary
);
var referenceClientRect = getBoundingClientRect(state.elements.reference);
var popperOffsets = computeOffsets({
reference: referenceClientRect,
element: popperRect,
strategy: "absolute",
placement: placement,
});
var popperClientRect = rectToClientRect(
Object.assign({}, popperRect, popperOffsets)
);
var elementClientRect =
elementContext === popper ? popperClientRect : referenceClientRect; // positive = overflowing the clipping rect
// 0 or negative = within the clipping rect
var overflowOffsets = {
top: clippingClientRect.top - elementClientRect.top + paddingObject.top,
bottom:
elementClientRect.bottom -
clippingClientRect.bottom +
paddingObject.bottom,
left:
clippingClientRect.left - elementClientRect.left + paddingObject.left,
right:
elementClientRect.right -
clippingClientRect.right +
paddingObject.right,
};
var offsetData = state.modifiersData.offset; // Offsets can be applied only to the popper element
if (elementContext === popper && offsetData) {
var offset = offsetData[placement];
Object.keys(overflowOffsets).forEach(function (key) {
var multiply = [right, bottom].indexOf(key) >= 0 ? 1 : -1;
var axis = [top, bottom].indexOf(key) >= 0 ? "y" : "x";
overflowOffsets[key] += offset[axis] * multiply;
});
}
return overflowOffsets;
}
function computeAutoPlacement(state, options) {
if (options === void 0) {
options = {};
}
var _options = options,
placement = _options.placement,
boundary = _options.boundary,
rootBoundary = _options.rootBoundary,
padding = _options.padding,
flipVariations = _options.flipVariations,
_options$allowedAutoP = _options.allowedAutoPlacements,
allowedAutoPlacements =
_options$allowedAutoP === void 0 ? placements : _options$allowedAutoP;
var variation = getVariation(placement);
var placements$1 = variation
? flipVariations
? variationPlacements
: variationPlacements.filter(function (placement) {
return getVariation(placement) === variation;
})
: basePlacements;
var allowedPlacements = placements$1.filter(function (placement) {
return allowedAutoPlacements.indexOf(placement) >= 0;
});
if (allowedPlacements.length === 0) {
allowedPlacements = placements$1;
} // $FlowFixMe[incompatible-type]: Flow seems to have problems with two array unions...
var overflows = allowedPlacements.reduce(function (acc, placement) {
acc[placement] = detectOverflow(state, {
placement: placement,
boundary: boundary,
rootBoundary: rootBoundary,
padding: padding,
})[getBasePlacement(placement)];
return acc;
}, {});
return Object.keys(overflows).sort(function (a, b) {
return overflows[a] - overflows[b];
});
}
function getExpandedFallbackPlacements(placement) {
if (getBasePlacement(placement) === auto) {
return [];
}
var oppositePlacement = getOppositePlacement(placement);
return [
getOppositeVariationPlacement(placement),
oppositePlacement,
getOppositeVariationPlacement(oppositePlacement),
];
}
function flip(_ref) {
var state = _ref.state,
options = _ref.options,
name = _ref.name;
if (state.modifiersData[name]._skip) {
return;
}
var _options$mainAxis = options.mainAxis,
checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis,
_options$altAxis = options.altAxis,
checkAltAxis = _options$altAxis === void 0 ? true : _options$altAxis,
specifiedFallbackPlacements = options.fallbackPlacements,
padding = options.padding,
boundary = options.boundary,
rootBoundary = options.rootBoundary,
altBoundary = options.altBoundary,
_options$flipVariatio = options.flipVariations,
flipVariations =
_options$flipVariatio === void 0 ? true : _options$flipVariatio,
allowedAutoPlacements = options.allowedAutoPlacements;
var preferredPlacement = state.options.placement;
var basePlacement = getBasePlacement(preferredPlacement);
var isBasePlacement = basePlacement === preferredPlacement;
var fallbackPlacements =
specifiedFallbackPlacements ||
(isBasePlacement || !flipVariations
? [getOppositePlacement(preferredPlacement)]
: getExpandedFallbackPlacements(preferredPlacement));
var placements = [preferredPlacement]
.concat(fallbackPlacements)
.reduce(function (acc, placement) {
return acc.concat(
getBasePlacement(placement) === auto
? computeAutoPlacement(state, {
placement: placement,
boundary: boundary,
rootBoundary: rootBoundary,
padding: padding,
flipVariations: flipVariations,
allowedAutoPlacements: allowedAutoPlacements,
})
: placement
);
}, []);
var referenceRect = state.rects.reference;
var popperRect = state.rects.popper;
var checksMap = new Map();
var makeFallbackChecks = true;
var firstFittingPlacement = placements[0];
for (var i = 0; i < placements.length; i++) {
var placement = placements[i];
var _basePlacement = getBasePlacement(placement);
var isStartVariation = getVariation(placement) === start;
var isVertical = [top, bottom].indexOf(_basePlacement) >= 0;
var len = isVertical ? "width" : "height";
var overflow = detectOverflow(state, {
placement: placement,
boundary: boundary,
rootBoundary: rootBoundary,
altBoundary: altBoundary,
padding: padding,
});
var mainVariationSide = isVertical
? isStartVariation
? right
: left
: isStartVariation
? bottom
: top;
if (referenceRect[len] > popperRect[len]) {
mainVariationSide = getOppositePlacement(mainVariationSide);
}
var altVariationSide = getOppositePlacement(mainVariationSide);
var checks = [];
if (checkMainAxis) {
checks.push(overflow[_basePlacement] <= 0);
}
if (checkAltAxis) {
checks.push(
overflow[mainVariationSide] <= 0,
overflow[altVariationSide] <= 0
);
}
if (
checks.every(function (check) {
return check;
})
) {
firstFittingPlacement = placement;
makeFallbackChecks = false;
break;
}
checksMap.set(placement, checks);
}
if (makeFallbackChecks) {
// `2` may be desired in some cases – research later
var numberOfChecks = flipVariations ? 3 : 1;
var _loop = function _loop(_i) {
var fittingPlacement = placements.find(function (placement) {
var checks = checksMap.get(placement);
if (checks) {
return checks.slice(0, _i).every(function (check) {
return check;
});
}
});
if (fittingPlacement) {
firstFittingPlacement = fittingPlacement;
return "break";
}
};
for (var _i = numberOfChecks; _i > 0; _i--) {
var _ret = _loop(_i);
if (_ret === "break") break;
}
}
if (state.placement !== firstFittingPlacement) {
state.modifiersData[name]._skip = true;
state.placement = firstFittingPlacement;
state.reset = true;
}
} // eslint-disable-next-line import/no-unused-modules
var flip$1 = {
name: "flip",
enabled: true,
phase: "main",
fn: flip,
requiresIfExists: ["offset"],
data: {
_skip: false,
},
};
function getSideOffsets(overflow, rect, preventedOffsets) {
if (preventedOffsets === void 0) {
preventedOffsets = {
x: 0,
y: 0,
};
}
return {
top: overflow.top - rect.height - preventedOffsets.y,
right: overflow.right - rect.width + preventedOffsets.x,
bottom: overflow.bottom - rect.height + preventedOffsets.y,
left: overflow.left - rect.width - preventedOffsets.x,
};
}
function isAnySideFullyClipped(overflow) {
return [top, right, bottom, left].some(function (side) {
return overflow[side] >= 0;
});
}
function hide(_ref) {
var state = _ref.state,
name = _ref.name;
var referenceRect = state.rects.reference;
var popperRect = state.rects.popper;
var preventedOffsets = state.modifiersData.preventOverflow;
var referenceOverflow = detectOverflow(state, {
elementContext: "reference",
});
var popperAltOverflow = detectOverflow(state, {
altBoundary: true,
});
var referenceClippingOffsets = getSideOffsets(
referenceOverflow,
referenceRect
);
var popperEscapeOffsets = getSideOffsets(
popperAltOverflow,
popperRect,
preventedOffsets
);
var isReferenceHidden = isAnySideFullyClipped(referenceClippingOffsets);
var hasPopperEscaped = isAnySideFullyClipped(popperEscapeOffsets);
state.modifiersData[name] = {
referenceClippingOffsets: referenceClippingOffsets,
popperEscapeOffsets: popperEscapeOffsets,
isReferenceHidden: isReferenceHidden,
hasPopperEscaped: hasPopperEscaped,
};
state.attributes.popper = Object.assign({}, state.attributes.popper, {
"data-popper-reference-hidden": isReferenceHidden,
"data-popper-escaped": hasPopperEscaped,
});
} // eslint-disable-next-line import/no-unused-modules
var hide$1 = {
name: "hide",
enabled: true,
phase: "main",
requiresIfExists: ["preventOverflow"],
fn: hide,
};
function distanceAndSkiddingToXY(placement, rects, offset) {
var basePlacement = getBasePlacement(placement);
var invertDistance = [left, top].indexOf(basePlacement) >= 0 ? -1 : 1;
var _ref =
typeof offset === "function"
? offset(
Object.assign({}, rects, {
placement: placement,
})
)
: offset,
skidding = _ref[0],
distance = _ref[1];
skidding = skidding || 0;
distance = (distance || 0) * invertDistance;
return [left, right].indexOf(basePlacement) >= 0
? {
x: distance,
y: skidding,
}
: {
x: skidding,
y: distance,
};
}
function offset(_ref2) {
var state = _ref2.state,
options = _ref2.options,
name = _ref2.name;
var _options$offset = options.offset,
offset = _options$offset === void 0 ? [0, 0] : _options$offset;
var data = placements.reduce(function (acc, placement) {
acc[placement] = distanceAndSkiddingToXY(placement, state.rects, offset);
return acc;
}, {});
var _data$state$placement = data[state.placement],
x = _data$state$placement.x,
y = _data$state$placement.y;
if (state.modifiersData.popperOffsets != null) {
state.modifiersData.popperOffsets.x += x;
state.modifiersData.popperOffsets.y += y;
}
state.modifiersData[name] = data;
} // eslint-disable-next-line import/no-unused-modules
var offset$1 = {
name: "offset",
enabled: true,
phase: "main",
requires: ["popperOffsets"],
fn: offset,
};
function popperOffsets(_ref) {
var state = _ref.state,
name = _ref.name;
// Offsets are the actual position the popper needs to have to be
// properly positioned near its reference element
// This is the most basic placement, and will be adjusted by
// the modifiers in the next step
state.modifiersData[name] = computeOffsets({
reference: state.rects.reference,
element: state.rects.popper,
strategy: "absolute",
placement: state.placement,
});
} // eslint-disable-next-line import/no-unused-modules
var popperOffsets$1 = {
name: "popperOffsets",
enabled: true,
phase: "read",
fn: popperOffsets,
data: {},
};
function getAltAxis(axis) {
return axis === "x" ? "y" : "x";
}
function preventOverflow(_ref) {
var state = _ref.state,
options = _ref.options,
name = _ref.name;
var _options$mainAxis = options.mainAxis,
checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis,
_options$altAxis = options.altAxis,
checkAltAxis = _options$altAxis === void 0 ? false : _options$altAxis,
boundary = options.boundary,
rootBoundary = options.rootBoundary,
altBoundary = options.altBoundary,
padding = options.padding,
_options$tether = options.tether,
tether = _options$tether === void 0 ? true : _options$tether,
_options$tetherOffset = options.tetherOffset,
tetherOffset =
_options$tetherOffset === void 0 ? 0 : _options$tetherOffset;
var overflow = detectOverflow(state, {
boundary: boundary,
rootBoundary: rootBoundary,
padding: padding,
altBoundary: altBoundary,
});
var basePlacement = getBasePlacement(state.placement);
var variation = getVariation(state.placement);
var isBasePlacement = !variation;
var mainAxis = getMainAxisFromPlacement(basePlacement);
var altAxis = getAltAxis(mainAxis);
var popperOffsets = state.modifiersData.popperOffsets;
var referenceRect = state.rects.reference;
var popperRect = state.rects.popper;
var tetherOffsetValue =
typeof tetherOffset === "function"
? tetherOffset(
Object.assign({}, state.rects, {
placement: state.placement,
})
)
: tetherOffset;
var data = {
x: 0,
y: 0,
};
if (!popperOffsets) {
return;
}
if (checkMainAxis || checkAltAxis) {
var mainSide = mainAxis === "y" ? top : left;
var altSide = mainAxis === "y" ? bottom : right;
var len = mainAxis === "y" ? "height" : "width";
var offset = popperOffsets[mainAxis];
var min = popperOffsets[mainAxis] + overflow[mainSide];
var max = popperOffsets[mainAxis] - overflow[altSide];
var additive = tether ? -popperRect[len] / 2 : 0;
var minLen = variation === start ? referenceRect[len] : popperRect[len];
var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go
// outside the reference bounds
var arrowElement = state.elements.arrow;
var arrowRect =
tether && arrowElement
? getLayoutRect(arrowElement)
: {
width: 0,
height: 0,
};
var arrowPaddingObject = state.modifiersData["arrow#persistent"]
? state.modifiersData["arrow#persistent"].padding
: getFreshSideObject();
var arrowPaddingMin = arrowPaddingObject[mainSide];
var arrowPaddingMax = arrowPaddingObject[altSide]; // If the reference length is smaller than the arrow length, we don't want
// to include its full size in the calculation. If the reference is small
// and near the edge of a boundary, the popper can overflow even if the
// reference is not overflowing as well (e.g. virtual elements with no
// width or height)
var arrowLen = within(0, referenceRect[len], arrowRect[len]);
var minOffset = isBasePlacement
? referenceRect[len] / 2 -
additive -
arrowLen -
arrowPaddingMin -
tetherOffsetValue
: minLen - arrowLen - arrowPaddingMin - tetherOffsetValue;
var maxOffset = isBasePlacement
? -referenceRect[len] / 2 +
additive +
arrowLen +
arrowPaddingMax +
tetherOffsetValue
: maxLen + arrowLen + arrowPaddingMax + tetherOffsetValue;
var arrowOffsetParent =
state.elements.arrow && getOffsetParent(state.elements.arrow);
var clientOffset = arrowOffsetParent
? mainAxis === "y"
? arrowOffsetParent.clientTop || 0
: arrowOffsetParent.clientLeft || 0
: 0;
var offsetModifierValue = state.modifiersData.offset
? state.modifiersData.offset[state.placement][mainAxis]
: 0;
var tetherMin =
popperOffsets[mainAxis] +
minOffset -
offsetModifierValue -
clientOffset;
var tetherMax = popperOffsets[mainAxis] + maxOffset - offsetModifierValue;
if (checkMainAxis) {
var preventedOffset = within(
tether ? min$1(min, tetherMin) : min,
offset,
tether ? max$1(max, tetherMax) : max
);
popperOffsets[mainAxis] = preventedOffset;
data[mainAxis] = preventedOffset - offset;
}
if (checkAltAxis) {
var _mainSide = mainAxis === "x" ? top : left;
var _altSide = mainAxis === "x" ? bottom : right;
var _offset = popperOffsets[altAxis];
var _min = _offset + overflow[_mainSide];
var _max = _offset - overflow[_altSide];
var _preventedOffset = within(
tether ? min$1(_min, tetherMin) : _min,
_offset,
tether ? max$1(_max, tetherMax) : _max
);
popperOffsets[altAxis] = _preventedOffset;
data[altAxis] = _preventedOffset - _offset;
}
}
state.modifiersData[name] = data;
} // eslint-disable-next-line import/no-unused-modules
var preventOverflow$1 = {
name: "preventOverflow",
enabled: true,
phase: "main",
fn: preventOverflow,
requiresIfExists: ["offset"],
};
function getHTMLElementScroll(element) {
return {
scrollLeft: element.scrollLeft,
scrollTop: element.scrollTop,
};
}
function getNodeScroll(node) {
if (node === getWindow(node) || !isHTMLElement(node)) {
return getWindowScroll(node);
} else {
return getHTMLElementScroll(node);
}
}
function isElementScaled(element) {
var rect = element.getBoundingClientRect();
var scaleX = rect.width / element.offsetWidth || 1;
var scaleY = rect.height / element.offsetHeight || 1;
return scaleX !== 1 || scaleY !== 1;
} // Returns the composite rect of an element relative to its offsetParent.
// Composite means it takes into account transforms as well as layout.
function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
if (isFixed === void 0) {
isFixed = false;
}
var isOffsetParentAnElement = isHTMLElement(offsetParent);
var offsetParentIsScaled =
isHTMLElement(offsetParent) && isElementScaled(offsetParent);
var documentElement = getDocumentElement(offsetParent);
var rect = getBoundingClientRect(
elementOrVirtualElement,
offsetParentIsScaled
);
var scroll = {
scrollLeft: 0,
scrollTop: 0,
};
var offsets = {
x: 0,
y: 0,
};
if (isOffsetParentAnElement || (!isOffsetParentAnElement && !isFixed)) {
if (
getNodeName(offsetParent) !== "body" || // https://github.com/popperjs/popper-core/issues/1078
isScrollParent(documentElement)
) {
scroll = getNodeScroll(offsetParent);
}
if (isHTMLElement(offsetParent)) {
offsets = getBoundingClientRect(offsetParent, true);
offsets.x += offsetParent.clientLeft;
offsets.y += offsetParent.clientTop;
} else if (documentElement) {
offsets.x = getWindowScrollBarX(documentElement);
}
}
return {
x: rect.left + scroll.scrollLeft - offsets.x,
y: rect.top + scroll.scrollTop - offsets.y,
width: rect.width,
height: rect.height,
};
}
function order(modifiers) {
var map = new Map();
var visited = new Set();
var result = [];
modifiers.forEach(function (modifier) {
map.set(modifier.name, modifier);
}); // On visiting object, check for its dependencies and visit them recursively
function sort(modifier) {
visited.add(modifier.name);
var requires = [].concat(
modifier.requires || [],
modifier.requiresIfExists || []
);
requires.forEach(function (dep) {
if (!visited.has(dep)) {
var depModifier = map.get(dep);
if (depModifier) {
sort(depModifier);
}
}
});
result.push(modifier);
}
modifiers.forEach(function (modifier) {
if (!visited.has(modifier.name)) {
// check for visited object
sort(modifier);
}
});
return result;
}
function orderModifiers(modifiers) {
// order based on dependencies
var orderedModifiers = order(modifiers); // order based on phase
return modifierPhases.reduce(function (acc, phase) {
return acc.concat(
orderedModifiers.filter(function (modifier) {
return modifier.phase === phase;
})
);
}, []);
}
function debounce$1(fn) {
var pending;
return function () {
if (!pending) {
pending = new Promise(function (resolve) {
Promise.resolve().then(function () {
pending = undefined;
resolve(fn());
});
});
}
return pending;
};
}
function mergeByName(modifiers) {
var merged = modifiers.reduce(function (merged, current) {
var existing = merged[current.name];
merged[current.name] = existing
? Object.assign({}, existing, current, {
options: Object.assign({}, existing.options, current.options),
data: Object.assign({}, existing.data, current.data),
})
: current;
return merged;
}, {}); // IE11 does not support Object.values
return Object.keys(merged).map(function (key) {
return merged[key];
});
}
var DEFAULT_OPTIONS = {
placement: "bottom",
modifiers: [],
strategy: "absolute",
};
function areValidElements() {
for (
var _len = arguments.length, args = new Array(_len), _key = 0;
_key < _len;
_key++
) {
args[_key] = arguments[_key];
}
return !args.some(function (element) {
return !(element && typeof element.getBoundingClientRect === "function");
});
}
function popperGenerator(generatorOptions) {
if (generatorOptions === void 0) {
generatorOptions = {};
}
var _generatorOptions = generatorOptions,
_generatorOptions$def = _generatorOptions.defaultModifiers,
defaultModifiers =
_generatorOptions$def === void 0 ? [] : _generatorOptions$def,
_generatorOptions$def2 = _generatorOptions.defaultOptions,
defaultOptions =
_generatorOptions$def2 === void 0
? DEFAULT_OPTIONS
: _generatorOptions$def2;
return function createPopper(reference, popper, options) {
if (options === void 0) {
options = defaultOptions;
}
var state = {
placement: "bottom",
orderedModifiers: [],
options: Object.assign({}, DEFAULT_OPTIONS, defaultOptions),
modifiersData: {},
elements: {
reference: reference,
popper: popper,
},
attributes: {},
styles: {},
};
var effectCleanupFns = [];
var isDestroyed = false;
var instance = {
state: state,
setOptions: function setOptions(setOptionsAction) {
var options =
typeof setOptionsAction === "function"
? setOptionsAction(state.options)
: setOptionsAction;
cleanupModifierEffects();
state.options = Object.assign(
{},
defaultOptions,
state.options,
options
);
state.scrollParents = {
reference: isElement(reference)
? listScrollParents(reference)
: reference.contextElement
? listScrollParents(reference.contextElement)
: [],
popper: listScrollParents(popper),
}; // Orders the modifiers based on their dependencies and `phase`
// properties
var orderedModifiers = orderModifiers(
mergeByName([].concat(defaultModifiers, state.options.modifiers))
); // Strip out disabled modifiers
state.orderedModifiers = orderedModifiers.filter(function (m) {
return m.enabled;
}); // Validate the provided modifiers so that the consumer will get warned
runModifierEffects();
return instance.update();
},
// Sync update – it will always be executed, even if not necessary. This
// is useful for low frequency updates where sync behavior simplifies the
// logic.
// For high frequency updates (e.g. `resize` and `scroll` events), always
// prefer the async Popper#update method
forceUpdate: function forceUpdate() {
if (isDestroyed) {
return;
}
var _state$elements = state.elements,
reference = _state$elements.reference,
popper = _state$elements.popper; // Don't proceed if `reference` or `popper` are not valid elements
// anymore
if (!areValidElements(reference, popper)) {
return;
} // Store the reference and popper rects to be read by modifiers
state.rects = {
reference: getCompositeRect(
reference,
getOffsetParent(popper),
state.options.strategy === "fixed"
),
popper: getLayoutRect(popper),
}; // Modifiers have the ability to reset the current update cycle. The
// most common use case for this is the `flip` modifier changing the
// placement, which then needs to re-run all the modifiers, because the
// logic was previously ran for the previous placement and is therefore
// stale/incorrect
state.reset = false;
state.placement = state.options.placement; // On each update cycle, the `modifiersData` property for each modifier
// is filled with the initial data specified by the modifier. This means
// it doesn't persist and is fresh on each update.
// To ensure persistent data, use `${name}#persistent`
state.orderedModifiers.forEach(function (modifier) {
return (state.modifiersData[modifier.name] = Object.assign(
{},
modifier.data
));
});
for (var index = 0; index < state.orderedModifiers.length; index++) {
if (state.reset === true) {
state.reset = false;
index = -1;
continue;
}
var _state$orderedModifie = state.orderedModifiers[index],
fn = _state$orderedModifie.fn,
_state$orderedModifie2 = _state$orderedModifie.options,
_options =
_state$orderedModifie2 === void 0 ? {} : _state$orderedModifie2,
name = _state$orderedModifie.name;
if (typeof fn === "function") {
state =
fn({
state: state,
options: _options,
name: name,
instance: instance,
}) || state;
}
}
},
// Async and optimistically optimized update – it will not be executed if
// not necessary (debounced to run at most once-per-tick)
update: debounce$1(function () {
return new Promise(function (resolve) {
instance.forceUpdate();
resolve(state);
});
}),
destroy: function destroy() {
cleanupModifierEffects();
isDestroyed = true;
},
};
if (!areValidElements(reference, popper)) {
return instance;
}
instance.setOptions(options).then(function (state) {
if (!isDestroyed && options.onFirstUpdate) {
options.onFirstUpdate(state);
}
}); // Modifiers have the ability to execute arbitrary code before the first
// update cycle runs. They will be executed in the same order as the update
// cycle. This is useful when a modifier adds some persistent data that
// other modifiers need to use, but the modifier is run after the dependent
// one.
function runModifierEffects() {
state.orderedModifiers.forEach(function (_ref3) {
var name = _ref3.name,
_ref3$options = _ref3.options,
options = _ref3$options === void 0 ? {} : _ref3$options,
effect = _ref3.effect;
if (typeof effect === "function") {
var cleanupFn = effect({
state: state,
name: name,
instance: instance,
options: options,
});
var noopFn = function noopFn() {};
effectCleanupFns.push(cleanupFn || noopFn);
}
});
}
function cleanupModifierEffects() {
effectCleanupFns.forEach(function (fn) {
return fn();
});
effectCleanupFns = [];
}
return instance;
};
}
var defaultModifiers$1 = [
eventListeners,
popperOffsets$1,
computeStyles$1,
applyStyles$1,
offset$1,
flip$1,
preventOverflow$1,
arrow$1,
hide$1,
];
var createPopper = /*#__PURE__*/ popperGenerator({
defaultModifiers: defaultModifiers$1,
}); // eslint-disable-next-line import/no-unused-modules
const nodeList = new Map();
let startClick;
if (!isServer) {
on(document, "mousedown", (e) => (startClick = e));
on(document, "mouseup", (e) => {
for (const handlers of nodeList.values()) {
for (const { documentHandler } of handlers) {
documentHandler(e, startClick);
}
}
});
}
function createDocumentHandler(el, binding) {
let excludes = [];
if (Array.isArray(binding.arg)) {
excludes = binding.arg;
} else if (binding.arg instanceof HTMLElement) {
excludes.push(binding.arg);
}
return function (mouseup, mousedown) {
const popperRef = binding.instance.popperRef;
const mouseUpTarget = mouseup.target;
const mouseDownTarget = mousedown == null ? void 0 : mousedown.target;
const isBound = !binding || !binding.instance;
const isTargetExists = !mouseUpTarget || !mouseDownTarget;
const isContainedByEl =
el.contains(mouseUpTarget) || el.contains(mouseDownTarget);
const isSelf = el === mouseUpTarget;
const isTargetExcluded =
(excludes.length &&
excludes.some((item) =>
item == null ? void 0 : item.contains(mouseUpTarget)
)) ||
(excludes.length && excludes.includes(mouseDownTarget));
const isContainedByPopper =
popperRef &&
(popperRef.contains(mouseUpTarget) ||
popperRef.contains(mouseDownTarget));
if (
isBound ||
isTargetExists ||
isContainedByEl ||
isSelf ||
isTargetExcluded ||
isContainedByPopper
) {
return;
}
binding.value(mouseup, mousedown);
};
}
const ClickOutside = {
beforeMount(el, binding) {
if (!nodeList.has(el)) {
nodeList.set(el, []);
}
nodeList.get(el).push({
documentHandler: createDocumentHandler(el, binding),
bindingFn: binding.value,
});
},
updated(el, binding) {
if (!nodeList.has(el)) {
nodeList.set(el, []);
}
const handlers = nodeList.get(el);
const oldHandlerIndex = handlers.findIndex(
(item) => item.bindingFn === binding.oldValue
);
const newHandler = {
documentHandler: createDocumentHandler(el, binding),
bindingFn: binding.value,
};
if (oldHandlerIndex >= 0) {
handlers.splice(oldHandlerIndex, 1, newHandler);
} else {
handlers.push(newHandler);
}
},
unmounted(el) {
nodeList.delete(el);
},
};
var RepeatClick = {
beforeMount(el, binding) {
let interval = null;
let startTime;
const handler = () => binding.value && binding.value();
const clear = () => {
if (Date.now() - startTime < 100) {
handler();
}
clearInterval(interval);
interval = null;
};
on(el, "mousedown", (e) => {
if (e.button !== 0) return;
startTime = Date.now();
once(document, "mouseup", clear);
clearInterval(interval);
interval = setInterval(handler, 100);
});
},
};
const FOCUSABLE_CHILDREN = "_trap-focus-children";
const FOCUS_STACK = [];
const FOCUS_HANDLER = (e) => {
if (FOCUS_STACK.length === 0) return;
const focusableElement =
FOCUS_STACK[FOCUS_STACK.length - 1][FOCUSABLE_CHILDREN];
if (focusableElement.length > 0 && e.code === EVENT_CODE.tab) {
if (focusableElement.length === 1) {
e.preventDefault();
if (document.activeElement !== focusableElement[0]) {
focusableElement[0].focus();
}
return;
}
const goingBackward = e.shiftKey;
const isFirst = e.target === focusableElement[0];
const isLast = e.target === focusableElement[focusableElement.length - 1];
if (isFirst && goingBackward) {
e.preventDefault();
focusableElement[focusableElement.length - 1].focus();
}
if (isLast && !goingBackward) {
e.preventDefault();
focusableElement[0].focus();
}
}
};
const TrapFocus = {
beforeMount(el) {
el[FOCUSABLE_CHILDREN] = obtainAllFocusableElements(el);
FOCUS_STACK.push(el);
if (FOCUS_STACK.length <= 1) {
on(document, "keydown", FOCUS_HANDLER);
}
},
updated(el) {
vue.nextTick(() => {
el[FOCUSABLE_CHILDREN] = obtainAllFocusableElements(el);
});
},
unmounted() {
FOCUS_STACK.shift();
if (FOCUS_STACK.length === 0) {
off(document, "keydown", FOCUS_HANDLER);
}
},
};
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule UserAgent_DEPRECATED
*/
/**
* Provides entirely client-side User Agent and OS detection. You should prefer
* the non-deprecated UserAgent module when possible, which exposes our
* authoritative server-side PHP-based detection to the client.
*
* Usage is straightforward:
*
* if (UserAgent_DEPRECATED.ie()) {
* // IE
* }
*
* You can also do version checks:
*
* if (UserAgent_DEPRECATED.ie() >= 7) {
* // IE7 or better
* }
*
* The browser functions will return NaN if the browser does not match, so
* you can also do version compares the other way:
*
* if (UserAgent_DEPRECATED.ie() < 7) {
* // IE6 or worse
* }
*
* Note that the version is a float and may include a minor version number,
* so you should always use range operators to perform comparisons, not
* strict equality.
*
* **Note:** You should **strongly** prefer capability detection to browser
* version detection where it's reasonable:
*
* http://www.quirksmode.org/js/support.html
*
* Further, we have a large number of mature wrapper functions and classes
* which abstract away many browser irregularities. Check the documentation,
* grep for things, or ask on [email protected] before writing yet
* another copy of "event || window.event".
*
*/
var _populated = false;
// Browsers
var _ie, _firefox, _opera, _webkit, _chrome;
// Actual IE browser for compatibility mode
var _ie_real_version;
// Platforms
var _osx, _windows, _linux, _android;
// Architectures
var _win64;
// Devices
var _iphone, _ipad, _native;
var _mobile;
function _populate() {
if (_populated) {
return;
}
_populated = true;
// To work around buggy JS libraries that can't handle multi-digit
// version numbers, Opera 10's user agent string claims it's Opera
// 9, then later includes a Version/X.Y field:
//
// Opera/9.80 (foo) Presto/2.2.15 Version/10.10
var uas = navigator.userAgent;
var agent =
/(?:MSIE.(\d+\.\d+))|(?:(?:Firefox|GranParadiso|Iceweasel).(\d+\.\d+))|(?:Opera(?:.+Version.|.)(\d+\.\d+))|(?:AppleWebKit.(\d+(?:\.\d+)?))|(?:Trident\/\d+\.\d+.*rv:(\d+\.\d+))/.exec(
uas
);
var os = /(Mac OS X)|(Windows)|(Linux)/.exec(uas);
_iphone = /\b(iPhone|iP[ao]d)/.exec(uas);
_ipad = /\b(iP[ao]d)/.exec(uas);
_android = /Android/i.exec(uas);
_native = /FBAN\/\w+;/i.exec(uas);
_mobile = /Mobile/i.exec(uas);
// Note that the IE team blog would have you believe you should be checking
// for 'Win64; x64'. But MSDN then reveals that you can actually be coming
// from either x64 or ia64; so ultimately, you should just check for Win64
// as in indicator of whether you're in 64-bit IE. 32-bit IE on 64-bit
// Windows will send 'WOW64' instead.
_win64 = !!/Win64/.exec(uas);
if (agent) {
_ie = agent[1]
? parseFloat(agent[1])
: agent[5]
? parseFloat(agent[5])
: NaN;
// IE compatibility mode
if (_ie && document && document.documentMode) {
_ie = document.documentMode;
}
// grab the "true" ie version from the trident token if available
var trident = /(?:Trident\/(\d+.\d+))/.exec(uas);
_ie_real_version = trident ? parseFloat(trident[1]) + 4 : _ie;
_firefox = agent[2] ? parseFloat(agent[2]) : NaN;
_opera = agent[3] ? parseFloat(agent[3]) : NaN;
_webkit = agent[4] ? parseFloat(agent[4]) : NaN;
if (_webkit) {
// We do not add the regexp to the above test, because it will always
// match 'safari' only since 'AppleWebKit' appears before 'Chrome' in
// the userAgent string.
agent = /(?:Chrome\/(\d+\.\d+))/.exec(uas);
_chrome = agent && agent[1] ? parseFloat(agent[1]) : NaN;
} else {
_chrome = NaN;
}
} else {
_ie = _firefox = _opera = _chrome = _webkit = NaN;
}
if (os) {
if (os[1]) {
// Detect OS X version. If no version number matches, set _osx to true.
// Version examples: 10, 10_6_1, 10.7
// Parses version number as a float, taking only first two sets of
// digits. If only one set of digits is found, returns just the major
// version number.
var ver = /(?:Mac OS X (\d+(?:[._]\d+)?))/.exec(uas);
_osx = ver ? parseFloat(ver[1].replace("_", ".")) : true;
} else {
_osx = false;
}
_windows = !!os[2];
_linux = !!os[3];
} else {
_osx = _windows = _linux = false;
}
}
var UserAgent_DEPRECATED = {
/**
* Check if the UA is Internet Explorer.
*
*
* @return float|NaN Version number (if match) or NaN.
*/
ie: function () {
return _populate() || _ie;
},
/**
* Check if we're in Internet Explorer compatibility mode.
*
* @return bool true if in compatibility mode, false if
* not compatibility mode or not ie
*/
ieCompatibilityMode: function () {
return _populate() || _ie_real_version > _ie;
},
/**
* Whether the browser is 64-bit IE. Really, this is kind of weak sauce; we
* only need this because Skype can't handle 64-bit IE yet. We need to remove
* this when we don't need it -- tracked by #601957.
*/
ie64: function () {
return UserAgent_DEPRECATED.ie() && _win64;
},
/**
* Check if the UA is Firefox.
*
*
* @return float|NaN Version number (if match) or NaN.
*/
firefox: function () {
return _populate() || _firefox;
},
/**
* Check if the UA is Opera.
*
*
* @return float|NaN Version number (if match) or NaN.
*/
opera: function () {
return _populate() || _opera;
},
/**
* Check if the UA is WebKit.
*
*
* @return float|NaN Version number (if match) or NaN.
*/
webkit: function () {
return _populate() || _webkit;
},
/**
* For Push
* WILL BE REMOVED VERY SOON. Use UserAgent_DEPRECATED.webkit
*/
safari: function () {
return UserAgent_DEPRECATED.webkit();
},
/**
* Check if the UA is a Chrome browser.
*
*
* @return float|NaN Version number (if match) or NaN.
*/
chrome: function () {
return _populate() || _chrome;
},
/**
* Check if the user is running Windows.
*
* @return bool `true' if the user's OS is Windows.
*/
windows: function () {
return _populate() || _windows;
},
/**
* Check if the user is running Mac OS X.
*
* @return float|bool Returns a float if a version number is detected,
* otherwise true/false.
*/
osx: function () {
return _populate() || _osx;
},
/**
* Check if the user is running Linux.
*
* @return bool `true' if the user's OS is some flavor of Linux.
*/
linux: function () {
return _populate() || _linux;
},
/**
* Check if the user is running on an iPhone or iPod platform.
*
* @return bool `true' if the user is running some flavor of the
* iPhone OS.
*/
iphone: function () {
return _populate() || _iphone;
},
mobile: function () {
return _populate() || _iphone || _ipad || _android || _mobile;
},
nativeApp: function () {
// webviews inside of the native apps
return _populate() || _native;
},
android: function () {
return _populate() || _android;
},
ipad: function () {
return _populate() || _ipad;
},
};
var UserAgent_DEPRECATED_1 = UserAgent_DEPRECATED;
/**
* Copyright (c) 2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule ExecutionEnvironment
*/
var canUseDOM = !!(
typeof window !== "undefined" &&
window.document &&
window.document.createElement
);
/**
* Simple, lightweight module assisting with the detection and context of
* Worker. Helps avoid circular dependencies and allows code to reason about
* whether or not they are in a Worker, even if they never include the main
* `ReactWorker` dependency.
*/
var ExecutionEnvironment = {
canUseDOM: canUseDOM,
canUseWorkers: typeof Worker !== "undefined",
canUseEventListeners:
canUseDOM && !!(window.addEventListener || window.attachEvent),
canUseViewport: canUseDOM && !!window.screen,
isInWorker: !canUseDOM, // For now, this is true - might change in the future.
};
var ExecutionEnvironment_1 = ExecutionEnvironment;
var useHasFeature;
if (ExecutionEnvironment_1.canUseDOM) {
useHasFeature =
document.implementation &&
document.implementation.hasFeature &&
// always returns true in newer browsers as per the standard.
// @see http://dom.spec.whatwg.org/#dom-domimplementation-hasfeature
document.implementation.hasFeature("", "") !== true;
}
/**
* Checks if an event is supported in the current execution environment.
*
* NOTE: This will not work correctly for non-generic events such as `change`,
* `reset`, `load`, `error`, and `select`.
*
* Borrows from Modernizr.
*
* @param {string} eventNameSuffix Event name, e.g. "click".
* @param {?boolean} capture Check if the capture phase is supported.
* @return {boolean} True if the event is supported.
* @internal
* @license Modernizr 3.0.0pre (Custom Build) | MIT
*/
function isEventSupported(eventNameSuffix, capture) {
if (
!ExecutionEnvironment_1.canUseDOM ||
(capture && !("addEventListener" in document))
) {
return false;
}
var eventName = "on" + eventNameSuffix;
var isSupported = eventName in document;
if (!isSupported) {
var element = document.createElement("div");
element.setAttribute(eventName, "return;");
isSupported = typeof element[eventName] === "function";
}
if (!isSupported && useHasFeature && eventNameSuffix === "wheel") {
// This is the only way to test support for the `wheel` event in IE9+.
isSupported = document.implementation.hasFeature("Events.wheel", "3.0");
}
return isSupported;
}
var isEventSupported_1 = isEventSupported;
// Reasonable defaults
var PIXEL_STEP = 10;
var LINE_HEIGHT = 40;
var PAGE_HEIGHT = 800;
/**
* Mouse wheel (and 2-finger trackpad) support on the web sucks. It is
* complicated, thus this doc is long and (hopefully) detailed enough to answer
* your questions.
*
* If you need to react to the mouse wheel in a predictable way, this code is
* like your bestest friend. * hugs *
*
* As of today, there are 4 DOM event types you can listen to:
*
* 'wheel' -- Chrome(31+), FF(17+), IE(9+)
* 'mousewheel' -- Chrome, IE(6+), Opera, Safari
* 'MozMousePixelScroll' -- FF(3.5 only!) (2010-2013) -- don't bother!
* 'DOMMouseScroll' -- FF(0.9.7+) since 2003
*
* So what to do? The is the best:
*
* normalizeWheel.getEventType();
*
* In your event callback, use this code to get sane interpretation of the
* deltas. This code will return an object with properties:
*
* spinX -- normalized spin speed (use for zoom) - x plane
* spinY -- " - y plane
* pixelX -- normalized distance (to pixels) - x plane
* pixelY -- " - y plane
*
* Wheel values are provided by the browser assuming you are using the wheel to
* scroll a web page by a number of lines or pixels (or pages). Values can vary
* significantly on different platforms and browsers, forgetting that you can
* scroll at different speeds. Some devices (like trackpads) emit more events
* at smaller increments with fine granularity, and some emit massive jumps with
* linear speed or acceleration.
*
* This code does its best to normalize the deltas for you:
*
* - spin is trying to normalize how far the wheel was spun (or trackpad
* dragged). This is super useful for zoom support where you want to
* throw away the chunky scroll steps on the PC and make those equal to
* the slow and smooth tiny steps on the Mac. Key data: This code tries to
* resolve a single slow step on a wheel to 1.
*
* - pixel is normalizing the desired scroll delta in pixel units. You'll
* get the crazy differences between browsers, but at least it'll be in
* pixels!
*
* - positive value indicates scrolling DOWN/RIGHT, negative UP/LEFT. This
* should translate to positive value zooming IN, negative zooming OUT.
* This matches the newer 'wheel' event.
*
* Why are there spinX, spinY (or pixels)?
*
* - spinX is a 2-finger side drag on the trackpad, and a shift + wheel turn
* with a mouse. It results in side-scrolling in the browser by default.
*
* - spinY is what you expect -- it's the classic axis of a mouse wheel.
*
* - I dropped spinZ/pixelZ. It is supported by the DOM 3 'wheel' event and
* probably is by browsers in conjunction with fancy 3D controllers .. but
* you know.
*
* Implementation info:
*
* Examples of 'wheel' event if you scroll slowly (down) by one step with an
* average mouse:
*
* OS X + Chrome (mouse) - 4 pixel delta (wheelDelta -120)
* OS X + Safari (mouse) - N/A pixel delta (wheelDelta -12)
* OS X + Firefox (mouse) - 0.1 line delta (wheelDelta N/A)
* Win8 + Chrome (mouse) - 100 pixel delta (wheelDelta -120)
* Win8 + Firefox (mouse) - 3 line delta (wheelDelta -120)
*
* On the trackpad:
*
* OS X + Chrome (trackpad) - 2 pixel delta (wheelDelta -6)
* OS X + Firefox (trackpad) - 1 pixel delta (wheelDelta N/A)
*
* On other/older browsers.. it's more complicated as there can be multiple and
* also missing delta values.
*
* The 'wheel' event is more standard:
*
* http://www.w3.org/TR/DOM-Level-3-Events/#events-wheelevents
*
* The basics is that it includes a unit, deltaMode (pixels, lines, pages), and
* deltaX, deltaY and deltaZ. Some browsers provide other values to maintain
* backward compatibility with older events. Those other values help us
* better normalize spin speed. Example of what the browsers provide:
*
* | event.wheelDelta | event.detail
* ------------------+------------------+--------------
* Safari v5/OS X | -120 | 0
* Safari v5/Win7 | -120 | 0
* Chrome v17/OS X | -120 | 0
* Chrome v17/Win7 | -120 | 0
* IE9/Win7 | -120 | undefined
* Firefox v4/OS X | undefined | 1
* Firefox v4/Win7 | undefined | 3
*
*/
function normalizeWheel$1(/*object*/ event) /*object*/ {
var sX = 0,
sY = 0, // spinX, spinY
pX = 0,
pY = 0; // pixelX, pixelY
// Legacy
if ("detail" in event) {
sY = event.detail;
}
if ("wheelDelta" in event) {
sY = -event.wheelDelta / 120;
}
if ("wheelDeltaY" in event) {
sY = -event.wheelDeltaY / 120;
}
if ("wheelDeltaX" in event) {
sX = -event.wheelDeltaX / 120;
}
// side scrolling on FF with DOMMouseScroll
if ("axis" in event && event.axis === event.HORIZONTAL_AXIS) {
sX = sY;
sY = 0;
}
pX = sX * PIXEL_STEP;
pY = sY * PIXEL_STEP;
if ("deltaY" in event) {
pY = event.deltaY;
}
if ("deltaX" in event) {
pX = event.deltaX;
}
if ((pX || pY) && event.deltaMode) {
if (event.deltaMode == 1) {
// delta in LINE units
pX *= LINE_HEIGHT;
pY *= LINE_HEIGHT;
} else {
// delta in PAGE units
pX *= PAGE_HEIGHT;
pY *= PAGE_HEIGHT;
}
}
// Fall-back if spin cannot be determined
if (pX && !sX) {
sX = pX < 1 ? -1 : 1;
}
if (pY && !sY) {
sY = pY < 1 ? -1 : 1;
}
return { spinX: sX, spinY: sY, pixelX: pX, pixelY: pY };
}
/**
* The best combination if you prefer spinX + spinY normalization. It favors
* the older DOMMouseScroll for Firefox, as FF does not include wheelDelta with
* 'wheel' event, making spin speed determination impossible.
*/
normalizeWheel$1.getEventType = function () /*string*/ {
return UserAgent_DEPRECATED_1.firefox()
? "DOMMouseScroll"
: isEventSupported_1("wheel")
? "wheel"
: "mousewheel";
};
var normalizeWheel_1 = normalizeWheel$1;
var normalizeWheel = normalizeWheel_1;
const isFirefox =
typeof navigator !== "undefined" &&
navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
const mousewheel = function (element, callback) {
if (element && element.addEventListener) {
const fn = function (event) {
const normalized = normalizeWheel(event);
callback && callback.apply(this, [event, normalized]);
};
if (isFirefox) {
element.addEventListener("DOMMouseScroll", fn);
} else {
element.onmousewheel = fn;
}
}
};
const Mousewheel = {
beforeMount(el, binding) {
mousewheel(el, binding.value);
},
};
/**
* A collection of shims that provide minimal functionality of the ES6 collections.
*
* These implementations are not meant to be used outside of the ResizeObserver
* modules as they cover only a limited range of use cases.
*/
/* eslint-disable require-jsdoc, valid-jsdoc */
var MapShim = (function () {
if (typeof Map !== "undefined") {
return Map;
}
/**
* Returns index in provided array that matches the specified key.
*
* @param {Array<Array>} arr
* @param {*} key
* @returns {number}
*/
function getIndex(arr, key) {
var result = -1;
arr.some(function (entry, index) {
if (entry[0] === key) {
result = index;
return true;
}
return false;
});
return result;
}
return /** @class */ (function () {
function class_1() {
this.__entries__ = [];
}
Object.defineProperty(class_1.prototype, "size", {
/**
* @returns {boolean}
*/
get: function () {
return this.__entries__.length;
},
enumerable: true,
configurable: true,
});
/**
* @param {*} key
* @returns {*}
*/
class_1.prototype.get = function (key) {
var index = getIndex(this.__entries__, key);
var entry = this.__entries__[index];
return entry && entry[1];
};
/**
* @param {*} key
* @param {*} value
* @returns {void}
*/
class_1.prototype.set = function (key, value) {
var index = getIndex(this.__entries__, key);
if (~index) {
this.__entries__[index][1] = value;
} else {
this.__entries__.push([key, value]);
}
};
/**
* @param {*} key
* @returns {void}
*/
class_1.prototype.delete = function (key) {
var entries = this.__entries__;
var index = getIndex(entries, key);
if (~index) {
entries.splice(index, 1);
}
};
/**
* @param {*} key
* @returns {void}
*/
class_1.prototype.has = function (key) {
return !!~getIndex(this.__entries__, key);
};
/**
* @returns {void}
*/
class_1.prototype.clear = function () {
this.__entries__.splice(0);
};
/**
* @param {Function} callback
* @param {*} [ctx=null]
* @returns {void}
*/
class_1.prototype.forEach = function (callback, ctx) {
if (ctx === void 0) {
ctx = null;
}
for (var _i = 0, _a = this.__entries__; _i < _a.length; _i++) {
var entry = _a[_i];
callback.call(ctx, entry[1], entry[0]);
}
};
return class_1;
})();
})();
/**
* Detects whether window and document objects are available in current environment.
*/
var isBrowser =
typeof window !== "undefined" &&
typeof document !== "undefined" &&
window.document === document;
// Returns global object of a current environment.
var global$1 = (function () {
if (typeof global !== "undefined" && global.Math === Math) {
return global;
}
if (typeof self !== "undefined" && self.Math === Math) {
return self;
}
if (typeof window !== "undefined" && window.Math === Math) {
return window;
}
// eslint-disable-next-line no-new-func
return Function("return this")();
})();
/**
* A shim for the requestAnimationFrame which falls back to the setTimeout if
* first one is not supported.
*
* @returns {number} Requests' identifier.
*/
var requestAnimationFrame$1 = (function () {
if (typeof requestAnimationFrame === "function") {
// It's required to use a bounded function because IE sometimes throws
// an "Invalid calling object" error if rAF is invoked without the global
// object on the left hand side.
return requestAnimationFrame.bind(global$1);
}
return function (callback) {
return setTimeout(function () {
return callback(Date.now());
}, 1000 / 60);
};
})();
// Defines minimum timeout before adding a trailing call.
var trailingTimeout = 2;
/**
* Creates a wrapper function which ensures that provided callback will be
* invoked only once during the specified delay period.
*
* @param {Function} callback - Function to be invoked after the delay period.
* @param {number} delay - Delay after which to invoke callback.
* @returns {Function}
*/
function throttle$1(callback, delay) {
var leadingCall = false,
trailingCall = false,
lastCallTime = 0;
/**
* Invokes the original callback function and schedules new invocation if
* the "proxy" was called during current request.
*
* @returns {void}
*/
function resolvePending() {
if (leadingCall) {
leadingCall = false;
callback();
}
if (trailingCall) {
proxy();
}
}
/**
* Callback invoked after the specified delay. It will further postpone
* invocation of the original function delegating it to the
* requestAnimationFrame.
*
* @returns {void}
*/
function timeoutCallback() {
requestAnimationFrame$1(resolvePending);
}
/**
* Schedules invocation of the original function.
*
* @returns {void}
*/
function proxy() {
var timeStamp = Date.now();
if (leadingCall) {
// Reject immediately following calls.
if (timeStamp - lastCallTime < trailingTimeout) {
return;
}
// Schedule new call to be in invoked when the pending one is resolved.
// This is important for "transitions" which never actually start
// immediately so there is a chance that we might miss one if change
// happens amids the pending invocation.
trailingCall = true;
} else {
leadingCall = true;
trailingCall = false;
setTimeout(timeoutCallback, delay);
}
lastCallTime = timeStamp;
}
return proxy;
}
// Minimum delay before invoking the update of observers.
var REFRESH_DELAY = 20;
// A list of substrings of CSS properties used to find transition events that
// might affect dimensions of observed elements.
var transitionKeys = [
"top",
"right",
"bottom",
"left",
"width",
"height",
"size",
"weight",
];
// Check if MutationObserver is available.
var mutationObserverSupported = typeof MutationObserver !== "undefined";
/**
* Singleton controller class which handles updates of ResizeObserver instances.
*/
var ResizeObserverController = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserverController.
*
* @private
*/
function ResizeObserverController() {
/**
* Indicates whether DOM listeners have been added.
*
* @private {boolean}
*/
this.connected_ = false;
/**
* Tells that controller has subscribed for Mutation Events.
*
* @private {boolean}
*/
this.mutationEventsAdded_ = false;
/**
* Keeps reference to the instance of MutationObserver.
*
* @private {MutationObserver}
*/
this.mutationsObserver_ = null;
/**
* A list of connected observers.
*
* @private {Array<ResizeObserverSPI>}
*/
this.observers_ = [];
this.onTransitionEnd_ = this.onTransitionEnd_.bind(this);
this.refresh = throttle$1(this.refresh.bind(this), REFRESH_DELAY);
}
/**
* Adds observer to observers list.
*
* @param {ResizeObserverSPI} observer - Observer to be added.
* @returns {void}
*/
ResizeObserverController.prototype.addObserver = function (observer) {
if (!~this.observers_.indexOf(observer)) {
this.observers_.push(observer);
}
// Add listeners if they haven't been added yet.
if (!this.connected_) {
this.connect_();
}
};
/**
* Removes observer from observers list.
*
* @param {ResizeObserverSPI} observer - Observer to be removed.
* @returns {void}
*/
ResizeObserverController.prototype.removeObserver = function (observer) {
var observers = this.observers_;
var index = observers.indexOf(observer);
// Remove observer if it's present in registry.
if (~index) {
observers.splice(index, 1);
}
// Remove listeners if controller has no connected observers.
if (!observers.length && this.connected_) {
this.disconnect_();
}
};
/**
* Invokes the update of observers. It will continue running updates insofar
* it detects changes.
*
* @returns {void}
*/
ResizeObserverController.prototype.refresh = function () {
var changesDetected = this.updateObservers_();
// Continue running updates if changes have been detected as there might
// be future ones caused by CSS transitions.
if (changesDetected) {
this.refresh();
}
};
/**
* Updates every observer from observers list and notifies them of queued
* entries.
*
* @private
* @returns {boolean} Returns "true" if any observer has detected changes in
* dimensions of it's elements.
*/
ResizeObserverController.prototype.updateObservers_ = function () {
// Collect observers that have active observations.
var activeObservers = this.observers_.filter(function (observer) {
return observer.gatherActive(), observer.hasActive();
});
// Deliver notifications in a separate cycle in order to avoid any
// collisions between observers, e.g. when multiple instances of
// ResizeObserver are tracking the same element and the callback of one
// of them changes content dimensions of the observed target. Sometimes
// this may result in notifications being blocked for the rest of observers.
activeObservers.forEach(function (observer) {
return observer.broadcastActive();
});
return activeObservers.length > 0;
};
/**
* Initializes DOM listeners.
*
* @private
* @returns {void}
*/
ResizeObserverController.prototype.connect_ = function () {
// Do nothing if running in a non-browser environment or if listeners
// have been already added.
if (!isBrowser || this.connected_) {
return;
}
// Subscription to the "Transitionend" event is used as a workaround for
// delayed transitions. This way it's possible to capture at least the
// final state of an element.
document.addEventListener("transitionend", this.onTransitionEnd_);
window.addEventListener("resize", this.refresh);
if (mutationObserverSupported) {
this.mutationsObserver_ = new MutationObserver(this.refresh);
this.mutationsObserver_.observe(document, {
attributes: true,
childList: true,
characterData: true,
subtree: true,
});
} else {
document.addEventListener("DOMSubtreeModified", this.refresh);
this.mutationEventsAdded_ = true;
}
this.connected_ = true;
};
/**
* Removes DOM listeners.
*
* @private
* @returns {void}
*/
ResizeObserverController.prototype.disconnect_ = function () {
// Do nothing if running in a non-browser environment or if listeners
// have been already removed.
if (!isBrowser || !this.connected_) {
return;
}
document.removeEventListener("transitionend", this.onTransitionEnd_);
window.removeEventListener("resize", this.refresh);
if (this.mutationsObserver_) {
this.mutationsObserver_.disconnect();
}
if (this.mutationEventsAdded_) {
document.removeEventListener("DOMSubtreeModified", this.refresh);
}
this.mutationsObserver_ = null;
this.mutationEventsAdded_ = false;
this.connected_ = false;
};
/**
* "Transitionend" event handler.
*
* @private
* @param {TransitionEvent} event
* @returns {void}
*/
ResizeObserverController.prototype.onTransitionEnd_ = function (_a) {
var _b = _a.propertyName,
propertyName = _b === void 0 ? "" : _b;
// Detect whether transition may affect dimensions of an element.
var isReflowProperty = transitionKeys.some(function (key) {
return !!~propertyName.indexOf(key);
});
if (isReflowProperty) {
this.refresh();
}
};
/**
* Returns instance of the ResizeObserverController.
*
* @returns {ResizeObserverController}
*/
ResizeObserverController.getInstance = function () {
if (!this.instance_) {
this.instance_ = new ResizeObserverController();
}
return this.instance_;
};
/**
* Holds reference to the controller's instance.
*
* @private {ResizeObserverController}
*/
ResizeObserverController.instance_ = null;
return ResizeObserverController;
})();
/**
* Defines non-writable/enumerable properties of the provided target object.
*
* @param {Object} target - Object for which to define properties.
* @param {Object} props - Properties to be defined.
* @returns {Object} Target object.
*/
var defineConfigurable = function (target, props) {
for (var _i = 0, _a = Object.keys(props); _i < _a.length; _i++) {
var key = _a[_i];
Object.defineProperty(target, key, {
value: props[key],
enumerable: false,
writable: false,
configurable: true,
});
}
return target;
};
/**
* Returns the global object associated with provided element.
*
* @param {Object} target
* @returns {Object}
*/
var getWindowOf = function (target) {
// Assume that the element is an instance of Node, which means that it
// has the "ownerDocument" property from which we can retrieve a
// corresponding global object.
var ownerGlobal =
target && target.ownerDocument && target.ownerDocument.defaultView;
// Return the local global object if it's not possible extract one from
// provided element.
return ownerGlobal || global$1;
};
// Placeholder of an empty content rectangle.
var emptyRect = createRectInit(0, 0, 0, 0);
/**
* Converts provided string to a number.
*
* @param {number|string} value
* @returns {number}
*/
function toFloat(value) {
return parseFloat(value) || 0;
}
/**
* Extracts borders size from provided styles.
*
* @param {CSSStyleDeclaration} styles
* @param {...string} positions - Borders positions (top, right, ...)
* @returns {number}
*/
function getBordersSize(styles) {
var positions = [];
for (var _i = 1; _i < arguments.length; _i++) {
positions[_i - 1] = arguments[_i];
}
return positions.reduce(function (size, position) {
var value = styles["border-" + position + "-width"];
return size + toFloat(value);
}, 0);
}
/**
* Extracts paddings sizes from provided styles.
*
* @param {CSSStyleDeclaration} styles
* @returns {Object} Paddings box.
*/
function getPaddings(styles) {
var positions = ["top", "right", "bottom", "left"];
var paddings = {};
for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
var position = positions_1[_i];
var value = styles["padding-" + position];
paddings[position] = toFloat(value);
}
return paddings;
}
/**
* Calculates content rectangle of provided SVG element.
*
* @param {SVGGraphicsElement} target - Element content rectangle of which needs
* to be calculated.
* @returns {DOMRectInit}
*/
function getSVGContentRect(target) {
var bbox = target.getBBox();
return createRectInit(0, 0, bbox.width, bbox.height);
}
/**
* Calculates content rectangle of provided HTMLElement.
*
* @param {HTMLElement} target - Element for which to calculate the content rectangle.
* @returns {DOMRectInit}
*/
function getHTMLElementContentRect(target) {
// Client width & height properties can't be
// used exclusively as they provide rounded values.
var clientWidth = target.clientWidth,
clientHeight = target.clientHeight;
// By this condition we can catch all non-replaced inline, hidden and
// detached elements. Though elements with width & height properties less
// than 0.5 will be discarded as well.
//
// Without it we would need to implement separate methods for each of
// those cases and it's not possible to perform a precise and performance
// effective test for hidden elements. E.g. even jQuery's ':visible' filter
// gives wrong results for elements with width & height less than 0.5.
if (!clientWidth && !clientHeight) {
return emptyRect;
}
var styles = getWindowOf(target).getComputedStyle(target);
var paddings = getPaddings(styles);
var horizPad = paddings.left + paddings.right;
var vertPad = paddings.top + paddings.bottom;
// Computed styles of width & height are being used because they are the
// only dimensions available to JS that contain non-rounded values. It could
// be possible to utilize the getBoundingClientRect if only it's data wasn't
// affected by CSS transformations let alone paddings, borders and scroll bars.
var width = toFloat(styles.width),
height = toFloat(styles.height);
// Width & height include paddings and borders when the 'border-box' box
// model is applied (except for IE).
if (styles.boxSizing === "border-box") {
// Following conditions are required to handle Internet Explorer which
// doesn't include paddings and borders to computed CSS dimensions.
//
// We can say that if CSS dimensions + paddings are equal to the "client"
// properties then it's either IE, and thus we don't need to subtract
// anything, or an element merely doesn't have paddings/borders styles.
if (Math.round(width + horizPad) !== clientWidth) {
width -= getBordersSize(styles, "left", "right") + horizPad;
}
if (Math.round(height + vertPad) !== clientHeight) {
height -= getBordersSize(styles, "top", "bottom") + vertPad;
}
}
// Following steps can't be applied to the document's root element as its
// client[Width/Height] properties represent viewport area of the window.
// Besides, it's as well not necessary as the <html> itself neither has
// rendered scroll bars nor it can be clipped.
if (!isDocumentElement(target)) {
// In some browsers (only in Firefox, actually) CSS width & height
// include scroll bars size which can be removed at this step as scroll
// bars are the only difference between rounded dimensions + paddings
// and "client" properties, though that is not always true in Chrome.
var vertScrollbar = Math.round(width + horizPad) - clientWidth;
var horizScrollbar = Math.round(height + vertPad) - clientHeight;
// Chrome has a rather weird rounding of "client" properties.
// E.g. for an element with content width of 314.2px it sometimes gives
// the client width of 315px and for the width of 314.7px it may give
// 314px. And it doesn't happen all the time. So just ignore this delta
// as a non-relevant.
if (Math.abs(vertScrollbar) !== 1) {
width -= vertScrollbar;
}
if (Math.abs(horizScrollbar) !== 1) {
height -= horizScrollbar;
}
}
return createRectInit(paddings.left, paddings.top, width, height);
}
/**
* Checks whether provided element is an instance of the SVGGraphicsElement.
*
* @param {Element} target - Element to be checked.
* @returns {boolean}
*/
var isSVGGraphicsElement = (function () {
// Some browsers, namely IE and Edge, don't have the SVGGraphicsElement
// interface.
if (typeof SVGGraphicsElement !== "undefined") {
return function (target) {
return target instanceof getWindowOf(target).SVGGraphicsElement;
};
}
// If it's so, then check that element is at least an instance of the
// SVGElement and that it has the "getBBox" method.
// eslint-disable-next-line no-extra-parens
return function (target) {
return (
target instanceof getWindowOf(target).SVGElement &&
typeof target.getBBox === "function"
);
};
})();
/**
* Checks whether provided element is a document element (<html>).
*
* @param {Element} target - Element to be checked.
* @returns {boolean}
*/
function isDocumentElement(target) {
return target === getWindowOf(target).document.documentElement;
}
/**
* Calculates an appropriate content rectangle for provided html or svg element.
*
* @param {Element} target - Element content rectangle of which needs to be calculated.
* @returns {DOMRectInit}
*/
function getContentRect(target) {
if (!isBrowser) {
return emptyRect;
}
if (isSVGGraphicsElement(target)) {
return getSVGContentRect(target);
}
return getHTMLElementContentRect(target);
}
/**
* Creates rectangle with an interface of the DOMRectReadOnly.
* Spec: https://drafts.fxtf.org/geometry/#domrectreadonly
*
* @param {DOMRectInit} rectInit - Object with rectangle's x/y coordinates and dimensions.
* @returns {DOMRectReadOnly}
*/
function createReadOnlyRect(_a) {
var x = _a.x,
y = _a.y,
width = _a.width,
height = _a.height;
// If DOMRectReadOnly is available use it as a prototype for the rectangle.
var Constr =
typeof DOMRectReadOnly !== "undefined" ? DOMRectReadOnly : Object;
var rect = Object.create(Constr.prototype);
// Rectangle's properties are not writable and non-enumerable.
defineConfigurable(rect, {
x: x,
y: y,
width: width,
height: height,
top: y,
right: x + width,
bottom: height + y,
left: x,
});
return rect;
}
/**
* Creates DOMRectInit object based on the provided dimensions and the x/y coordinates.
* Spec: https://drafts.fxtf.org/geometry/#dictdef-domrectinit
*
* @param {number} x - X coordinate.
* @param {number} y - Y coordinate.
* @param {number} width - Rectangle's width.
* @param {number} height - Rectangle's height.
* @returns {DOMRectInit}
*/
function createRectInit(x, y, width, height) {
return { x: x, y: y, width: width, height: height };
}
/**
* Class that is responsible for computations of the content rectangle of
* provided DOM element and for keeping track of it's changes.
*/
var ResizeObservation = /** @class */ (function () {
/**
* Creates an instance of ResizeObservation.
*
* @param {Element} target - Element to be observed.
*/
function ResizeObservation(target) {
/**
* Broadcasted width of content rectangle.
*
* @type {number}
*/
this.broadcastWidth = 0;
/**
* Broadcasted height of content rectangle.
*
* @type {number}
*/
this.broadcastHeight = 0;
/**
* Reference to the last observed content rectangle.
*
* @private {DOMRectInit}
*/
this.contentRect_ = createRectInit(0, 0, 0, 0);
this.target = target;
}
/**
* Updates content rectangle and tells whether it's width or height properties
* have changed since the last broadcast.
*
* @returns {boolean}
*/
ResizeObservation.prototype.isActive = function () {
var rect = getContentRect(this.target);
this.contentRect_ = rect;
return (
rect.width !== this.broadcastWidth ||
rect.height !== this.broadcastHeight
);
};
/**
* Updates 'broadcastWidth' and 'broadcastHeight' properties with a data
* from the corresponding properties of the last observed content rectangle.
*
* @returns {DOMRectInit} Last observed content rectangle.
*/
ResizeObservation.prototype.broadcastRect = function () {
var rect = this.contentRect_;
this.broadcastWidth = rect.width;
this.broadcastHeight = rect.height;
return rect;
};
return ResizeObservation;
})();
var ResizeObserverEntry = /** @class */ (function () {
/**
* Creates an instance of ResizeObserverEntry.
*
* @param {Element} target - Element that is being observed.
* @param {DOMRectInit} rectInit - Data of the element's content rectangle.
*/
function ResizeObserverEntry(target, rectInit) {
var contentRect = createReadOnlyRect(rectInit);
// According to the specification following properties are not writable
// and are also not enumerable in the native implementation.
//
// Property accessors are not being used as they'd require to define a
// private WeakMap storage which may cause memory leaks in browsers that
// don't support this type of collections.
defineConfigurable(this, { target: target, contentRect: contentRect });
}
return ResizeObserverEntry;
})();
var ResizeObserverSPI = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserver.
*
* @param {ResizeObserverCallback} callback - Callback function that is invoked
* when one of the observed elements changes it's content dimensions.
* @param {ResizeObserverController} controller - Controller instance which
* is responsible for the updates of observer.
* @param {ResizeObserver} callbackCtx - Reference to the public
* ResizeObserver instance which will be passed to callback function.
*/
function ResizeObserverSPI(callback, controller, callbackCtx) {
/**
* Collection of resize observations that have detected changes in dimensions
* of elements.
*
* @private {Array<ResizeObservation>}
*/
this.activeObservations_ = [];
/**
* Registry of the ResizeObservation instances.
*
* @private {Map<Element, ResizeObservation>}
*/
this.observations_ = new MapShim();
if (typeof callback !== "function") {
throw new TypeError(
"The callback provided as parameter 1 is not a function."
);
}
this.callback_ = callback;
this.controller_ = controller;
this.callbackCtx_ = callbackCtx;
}
/**
* Starts observing provided element.
*
* @param {Element} target - Element to be observed.
* @returns {void}
*/
ResizeObserverSPI.prototype.observe = function (target) {
if (!arguments.length) {
throw new TypeError("1 argument required, but only 0 present.");
}
// Do nothing if current environment doesn't have the Element interface.
if (typeof Element === "undefined" || !(Element instanceof Object)) {
return;
}
if (!(target instanceof getWindowOf(target).Element)) {
throw new TypeError('parameter 1 is not of type "Element".');
}
var observations = this.observations_;
// Do nothing if element is already being observed.
if (observations.has(target)) {
return;
}
observations.set(target, new ResizeObservation(target));
this.controller_.addObserver(this);
// Force the update of observations.
this.controller_.refresh();
};
/**
* Stops observing provided element.
*
* @param {Element} target - Element to stop observing.
* @returns {void}
*/
ResizeObserverSPI.prototype.unobserve = function (target) {
if (!arguments.length) {
throw new TypeError("1 argument required, but only 0 present.");
}
// Do nothing if current environment doesn't have the Element interface.
if (typeof Element === "undefined" || !(Element instanceof Object)) {
return;
}
if (!(target instanceof getWindowOf(target).Element)) {
throw new TypeError('parameter 1 is not of type "Element".');
}
var observations = this.observations_;
// Do nothing if element is not being observed.
if (!observations.has(target)) {
return;
}
observations.delete(target);
if (!observations.size) {
this.controller_.removeObserver(this);
}
};
/**
* Stops observing all elements.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.disconnect = function () {
this.clearActive();
this.observations_.clear();
this.controller_.removeObserver(this);
};
/**
* Collects observation instances the associated element of which has changed
* it's content rectangle.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.gatherActive = function () {
var _this = this;
this.clearActive();
this.observations_.forEach(function (observation) {
if (observation.isActive()) {
_this.activeObservations_.push(observation);
}
});
};
/**
* Invokes initial callback function with a list of ResizeObserverEntry
* instances collected from active resize observations.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.broadcastActive = function () {
// Do nothing if observer doesn't have active observations.
if (!this.hasActive()) {
return;
}
var ctx = this.callbackCtx_;
// Create ResizeObserverEntry instance for every active observation.
var entries = this.activeObservations_.map(function (observation) {
return new ResizeObserverEntry(
observation.target,
observation.broadcastRect()
);
});
this.callback_.call(ctx, entries, ctx);
this.clearActive();
};
/**
* Clears the collection of active observations.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.clearActive = function () {
this.activeObservations_.splice(0);
};
/**
* Tells whether observer has active observations.
*
* @returns {boolean}
*/
ResizeObserverSPI.prototype.hasActive = function () {
return this.activeObservations_.length > 0;
};
return ResizeObserverSPI;
})();
// Registry of internal observers. If WeakMap is not available use current shim
// for the Map collection as it has all required methods and because WeakMap
// can't be fully polyfilled anyway.
var observers =
typeof WeakMap !== "undefined" ? new WeakMap() : new MapShim();
/**
* ResizeObserver API. Encapsulates the ResizeObserver SPI implementation
* exposing only those methods and properties that are defined in the spec.
*/
var ResizeObserver = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserver.
*
* @param {ResizeObserverCallback} callback - Callback that is invoked when
* dimensions of the observed elements change.
*/
function ResizeObserver(callback) {
if (!(this instanceof ResizeObserver)) {
throw new TypeError("Cannot call a class as a function.");
}
if (!arguments.length) {
throw new TypeError("1 argument required, but only 0 present.");
}
var controller = ResizeObserverController.getInstance();
var observer = new ResizeObserverSPI(callback, controller, this);
observers.set(this, observer);
}
return ResizeObserver;
})();
// Expose public methods of ResizeObserver.
["observe", "unobserve", "disconnect"].forEach(function (method) {
ResizeObserver.prototype[method] = function () {
var _a;
return (_a = observers.get(this))[method].apply(_a, arguments);
};
});
var index = (function () {
// Export existing implementation if available.
if (typeof global$1.ResizeObserver !== "undefined") {
return global$1.ResizeObserver;
}
return ResizeObserver;
})();
const resizeHandler = function (entries) {
for (const entry of entries) {
const listeners = entry.target.__resizeListeners__ || [];
if (listeners.length) {
listeners.forEach((fn) => {
fn();
});
}
}
};
const addResizeListener = function (element, fn) {
if (isServer || !element) return;
if (!element.__resizeListeners__) {
element.__resizeListeners__ = [];
element.__ro__ = new index(resizeHandler);
element.__ro__.observe(element);
}
element.__resizeListeners__.push(fn);
};
const removeResizeListener = function (element, fn) {
var _a;
if (!element || !element.__resizeListeners__) return;
element.__resizeListeners__.splice(
element.__resizeListeners__.indexOf(fn),
1
);
if (!element.__resizeListeners__.length) {
(_a = element.__ro__) == null ? void 0 : _a.disconnect();
}
};
const Resize = {
beforeMount(el, binding) {
el._handleResize = () => {
var _a;
el && ((_a = binding.value) == null ? void 0 : _a.call(binding, el));
};
addResizeListener(el, el._handleResize);
},
beforeUnmount(el) {
removeResizeListener(el, el._handleResize);
},
};
const TEMPLATE = "template";
var PatchFlags;
(function (PatchFlags2) {
PatchFlags2[(PatchFlags2["TEXT"] = 1)] = "TEXT";
PatchFlags2[(PatchFlags2["CLASS"] = 2)] = "CLASS";
PatchFlags2[(PatchFlags2["STYLE"] = 4)] = "STYLE";
PatchFlags2[(PatchFlags2["PROPS"] = 8)] = "PROPS";
PatchFlags2[(PatchFlags2["FULL_PROPS"] = 16)] = "FULL_PROPS";
PatchFlags2[(PatchFlags2["HYDRATE_EVENTS"] = 32)] = "HYDRATE_EVENTS";
PatchFlags2[(PatchFlags2["STABLE_FRAGMENT"] = 64)] = "STABLE_FRAGMENT";
PatchFlags2[(PatchFlags2["KEYED_FRAGMENT"] = 128)] = "KEYED_FRAGMENT";
PatchFlags2[(PatchFlags2["UNKEYED_FRAGMENT"] = 256)] = "UNKEYED_FRAGMENT";
PatchFlags2[(PatchFlags2["NEED_PATCH"] = 512)] = "NEED_PATCH";
PatchFlags2[(PatchFlags2["DYNAMIC_SLOTS"] = 1024)] = "DYNAMIC_SLOTS";
PatchFlags2[(PatchFlags2["HOISTED"] = -1)] = "HOISTED";
PatchFlags2[(PatchFlags2["BAIL"] = -2)] = "BAIL";
})(PatchFlags || (PatchFlags = {}));
const isFragment = (node) => node.type === vue.Fragment;
const isComment = (node) => node.type === vue.Comment;
const isTemplate = (node) => node.type === TEMPLATE;
function getChildren(node, depth) {
if (isComment(node)) return;
if (isFragment(node) || isTemplate(node)) {
return depth > 0 ? getFirstValidNode(node.children, depth - 1) : void 0;
}
return node;
}
const isValidElementNode = (node) => !(isFragment(node) || isComment(node));
const getFirstValidNode = (nodes, maxDepth = 3) => {
if (Array.isArray(nodes)) {
return getChildren(nodes[0], maxDepth);
} else {
return getChildren(nodes, maxDepth);
}
};
function renderIf(condition, node, props, children, patchFlag, patchProps) {
return condition
? renderBlock(node, props, children, patchFlag, patchProps)
: vue.createCommentVNode("v-if", true);
}
function renderBlock(node, props, children, patchFlag, patchProps) {
return (
vue.openBlock(),
vue.createBlock(node, props, children, patchFlag, patchProps)
);
}
const getNormalizedProps = (node) => {
if (!vue.isVNode(node)) {
return;
}
const raw = node.props || {};
const type = node.type.props || {};
const props = {};
Object.keys(type).forEach((key) => {
if (hasOwn(type[key], "default")) {
props[key] = type[key].default;
}
});
Object.keys(raw).forEach((key) => {
props[vue.camelize(key)] = raw[key];
});
return props;
};
const onTouchMove = (e) => {
e.preventDefault();
e.stopPropagation();
};
const onModalClick = () => {
PopupManager == null ? void 0 : PopupManager.doOnModalClick();
};
let hasModal = false;
let zIndex;
const getModal = function () {
if (isServer) return;
let modalDom = PopupManager.modalDom;
if (modalDom) {
hasModal = true;
} else {
hasModal = false;
modalDom = document.createElement("div");
PopupManager.modalDom = modalDom;
on(modalDom, "touchmove", onTouchMove);
on(modalDom, "click", onModalClick);
}
return modalDom;
};
const instances$1 = {};
const PopupManager = {
modalFade: true,
modalDom: void 0,
zIndex,
getInstance(id) {
return instances$1[id];
},
register(id, instance) {
if (id && instance) {
instances$1[id] = instance;
}
},
deregister(id) {
if (id) {
instances$1[id] = null;
delete instances$1[id];
}
},
nextZIndex() {
return ++PopupManager.zIndex;
},
modalStack: [],
doOnModalClick() {
const topItem =
PopupManager.modalStack[PopupManager.modalStack.length - 1];
if (!topItem) return;
const instance = PopupManager.getInstance(topItem.id);
if (instance && instance.closeOnClickModal.value) {
instance.close();
}
},
openModal(id, zIndex2, dom, modalClass, modalFade) {
if (isServer) return;
if (!id || zIndex2 === void 0) return;
this.modalFade = modalFade;
const modalStack = this.modalStack;
for (let i = 0, j = modalStack.length; i < j; i++) {
const item = modalStack[i];
if (item.id === id) {
return;
}
}
const modalDom = getModal();
addClass(modalDom, "v-modal");
if (this.modalFade && !hasModal) {
addClass(modalDom, "v-modal-enter");
}
if (modalClass) {
const classArr = modalClass.trim().split(/\s+/);
classArr.forEach((item) => addClass(modalDom, item));
}
setTimeout(() => {
removeClass(modalDom, "v-modal-enter");
}, 200);
if (dom && dom.parentNode && dom.parentNode.nodeType !== 11) {
dom.parentNode.appendChild(modalDom);
} else {
document.body.appendChild(modalDom);
}
if (zIndex2) {
modalDom.style.zIndex = String(zIndex2);
}
modalDom.tabIndex = 0;
modalDom.style.display = "";
this.modalStack.push({ id, zIndex: zIndex2, modalClass });
},
closeModal(id) {
const modalStack = this.modalStack;
const modalDom = getModal();
if (modalStack.length > 0) {
const topItem = modalStack[modalStack.length - 1];
if (topItem.id === id) {
if (topItem.modalClass) {
const classArr = topItem.modalClass.trim().split(/\s+/);
classArr.forEach((item) => removeClass(modalDom, item));
}
modalStack.pop();
if (modalStack.length > 0) {
modalDom.style.zIndex = modalStack[modalStack.length - 1].zIndex;
}
} else {
for (let i = modalStack.length - 1; i >= 0; i--) {
if (modalStack[i].id === id) {
modalStack.splice(i, 1);
break;
}
}
}
}
if (modalStack.length === 0) {
if (this.modalFade) {
addClass(modalDom, "v-modal-leave");
}
setTimeout(() => {
if (modalStack.length === 0) {
if (modalDom.parentNode) modalDom.parentNode.removeChild(modalDom);
modalDom.style.display = "none";
PopupManager.modalDom = void 0;
}
removeClass(modalDom, "v-modal-leave");
}, 200);
}
},
};
Object.defineProperty(PopupManager, "zIndex", {
configurable: true,
get() {
if (zIndex === void 0) {
zIndex = getConfig("zIndex") || 2e3;
}
return zIndex;
},
set(value) {
zIndex = value;
},
});
const getTopPopup = function () {
if (isServer) return;
if (PopupManager.modalStack.length > 0) {
const topPopup =
PopupManager.modalStack[PopupManager.modalStack.length - 1];
if (!topPopup) return;
const instance = PopupManager.getInstance(topPopup.id);
return instance;
}
};
if (!isServer) {
on(window, "keydown", function (event) {
if (event.code === EVENT_CODE.esc) {
const topPopup = getTopPopup();
if (topPopup && topPopup.closeOnPressEscape.value) {
topPopup.handleClose
? topPopup.handleClose()
: topPopup.handleAction
? topPopup.handleAction("cancel")
: topPopup.close();
}
}
});
}
const AFTER_APPEAR = "after-appear";
const AFTER_ENTER = "after-enter";
const AFTER_LEAVE = "after-leave";
const APPEAR_CANCELLED = "appear-cancelled";
const BEFORE_ENTER = "before-enter";
const BEFORE_LEAVE = "before-leave";
const ENTER = "enter";
const ENTER_CANCELLED = "enter-cancelled";
const LEAVE = "leave";
const LEAVE_CANCELLED = "leave-cancelled";
const useTransitionFallthrough = () => {
const { emit } = vue.getCurrentInstance();
return {
onAfterAppear: () => {
emit(AFTER_APPEAR);
},
onAfterEnter: () => {
emit(AFTER_ENTER);
},
onAfterLeave: () => {
emit(AFTER_LEAVE);
},
onAppearCancelled: () => {
emit(APPEAR_CANCELLED);
},
onBeforeEnter: () => {
emit(BEFORE_ENTER);
},
onBeforeLeave: () => {
emit(BEFORE_LEAVE);
},
onEnter: () => {
emit(ENTER);
},
onEnterCancelled: () => {
emit(ENTER_CANCELLED);
},
onLeave: () => {
emit(LEAVE);
},
onLeaveCancelled: () => {
emit(LEAVE_CANCELLED);
},
};
};
const DEFAULT_FALLBACK_PLACEMENTS$1 = [];
const defaultModifiers = [
{
name: "offset",
options: {
offset: [0, 12],
},
},
{
name: "preventOverflow",
options: {
padding: {
top: 2,
bottom: 2,
left: 5,
right: 5,
},
},
},
{
name: "flip",
options: {
padding: 5,
fallbackPlacements: [],
},
},
{
name: "computeStyles",
options: {
gpuAcceleration: true,
adaptive: true,
},
},
];
const defaultPopperOptions = {
type: Object,
default: () => {
return {
fallbackPlacements: DEFAULT_FALLBACK_PLACEMENTS$1,
strategy: "fixed",
modifiers: defaultModifiers,
};
},
};
var __defProp$L = Object.defineProperty;
var __getOwnPropSymbols$L = Object.getOwnPropertySymbols;
var __hasOwnProp$L = Object.prototype.hasOwnProperty;
var __propIsEnum$L = Object.prototype.propertyIsEnumerable;
var __defNormalProp$L = (obj, key, value) =>
key in obj
? __defProp$L(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$L = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$L.call(b, prop)) __defNormalProp$L(a, prop, b[prop]);
if (__getOwnPropSymbols$L)
for (var prop of __getOwnPropSymbols$L(b)) {
if (__propIsEnum$L.call(b, prop)) __defNormalProp$L(a, prop, b[prop]);
}
return a;
};
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
const DEFAULT_TRIGGER = "hover";
const useTargetEvents = (onShow, onHide, onToggle) => {
const { props } = vue.getCurrentInstance();
let triggerFocused = false;
const popperEventsHandler = (e) => {
e.stopPropagation();
switch (e.type) {
case "click": {
if (triggerFocused) {
triggerFocused = false;
} else {
onToggle();
}
break;
}
case "mouseenter": {
onShow();
break;
}
case "mouseleave": {
onHide();
break;
}
case "focus": {
triggerFocused = true;
onShow();
break;
}
case "blur": {
triggerFocused = false;
onHide();
break;
}
}
};
const triggerEventsMap = {
click: ["onClick"],
hover: ["onMouseenter", "onMouseleave"],
focus: ["onFocus", "onBlur"],
};
const mapEvents = (t) => {
const events = {};
triggerEventsMap[t].forEach((event) => {
events[event] = popperEventsHandler;
});
return events;
};
return vue.computed(() => {
if (isArray$1(props.trigger)) {
return Object.values(props.trigger).reduce((pre, t) => {
return __spreadValues$L(__spreadValues$L({}, pre), mapEvents(t));
}, {});
} else {
return mapEvents(props.trigger);
}
});
};
var __defProp$K = Object.defineProperty;
var __defProps$x = Object.defineProperties;
var __getOwnPropDescs$x = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$K = Object.getOwnPropertySymbols;
var __hasOwnProp$K = Object.prototype.hasOwnProperty;
var __propIsEnum$K = Object.prototype.propertyIsEnumerable;
var __defNormalProp$K = (obj, key, value) =>
key in obj
? __defProp$K(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$K = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$K.call(b, prop)) __defNormalProp$K(a, prop, b[prop]);
if (__getOwnPropSymbols$K)
for (var prop of __getOwnPropSymbols$K(b)) {
if (__propIsEnum$K.call(b, prop)) __defNormalProp$K(a, prop, b[prop]);
}
return a;
};
var __spreadProps$x = (a, b) => __defProps$x(a, __getOwnPropDescs$x(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
const DARK_EFFECT = "dark";
const LIGHT_EFFECT = "light";
const usePopperControlProps = {
appendToBody: {
type: Boolean,
default: true,
},
arrowOffset: {
type: Number,
},
popperOptions: defaultPopperOptions,
popperClass: {
type: String,
default: "",
},
};
const usePopperProps = __spreadProps$x(
__spreadValues$K({}, usePopperControlProps),
{
autoClose: {
type: Number,
default: 0,
},
content: {
type: String,
default: "",
},
class: String,
style: Object,
hideAfter: {
type: Number,
default: 200,
},
disabled: {
type: Boolean,
default: false,
},
effect: {
type: String,
default: DARK_EFFECT,
},
enterable: {
type: Boolean,
default: true,
},
manualMode: {
type: Boolean,
default: false,
},
showAfter: {
type: Number,
default: 0,
},
pure: {
type: Boolean,
default: false,
},
showArrow: {
type: Boolean,
default: true,
},
transition: {
type: String,
default: "el-fade-in-linear",
},
trigger: {
type: [String, Array],
default: DEFAULT_TRIGGER,
},
visible: {
type: Boolean,
default: void 0,
},
stopPopperMouseEvent: {
type: Boolean,
default: true,
},
}
);
const usePopperHook = () => {
const vm = vue.getCurrentInstance();
const props = vm.props;
const { slots } = vm;
const arrowRef = vue.ref(null);
const triggerRef = vue.ref(null);
const popperRef = vue.ref(null);
const popperStyle = vue.ref({ zIndex: PopupManager.nextZIndex() });
const visible = vue.ref(false);
const isManual = vue.computed(
() => props.manualMode || props.trigger === "manual"
);
const popperId = `el-popper-${generateId()}`;
let popperInstance = null;
const { renderTeleport, showTeleport, hideTeleport } = useTeleport(
popupRenderer,
vue.toRef(props, "appendToBody")
);
const { show, hide } = useModelToggle({
indicator: visible,
onShow,
onHide,
});
const { registerTimeout, cancelTimeout } = useTimeout();
function onShow() {
popperStyle.value.zIndex = PopupManager.nextZIndex();
vue.nextTick(initializePopper);
}
function onHide() {
hideTeleport();
vue.nextTick(detachPopper);
}
function delayShow() {
if (isManual.value || props.disabled) return;
showTeleport();
registerTimeout(show, props.showAfter);
}
function delayHide() {
if (isManual.value) return;
registerTimeout(hide, props.hideAfter);
}
function onToggle() {
if (visible.value) {
delayShow();
} else {
delayHide();
}
}
function detachPopper() {
var _a;
(_a = popperInstance == null ? void 0 : popperInstance.destroy) == null
? void 0
: _a.call(popperInstance);
popperInstance = null;
}
function onPopperMouseEnter() {
if (props.enterable && props.trigger !== "click") {
cancelTimeout();
}
}
function onPopperMouseLeave() {
const { trigger } = props;
const shouldPrevent =
(isString$1(trigger) && (trigger === "click" || trigger === "focus")) ||
(trigger.length === 1 &&
(trigger[0] === "click" || trigger[0] === "focus"));
if (shouldPrevent) return;
delayHide();
}
function initializePopper() {
if (!visible.value || popperInstance !== null) {
return;
}
const unwrappedTrigger = triggerRef.value;
const $el = isHTMLElement$1(unwrappedTrigger)
? unwrappedTrigger
: unwrappedTrigger.$el;
popperInstance = createPopper($el, popperRef.value, buildPopperOptions());
popperInstance.update();
}
function buildPopperOptions() {
const modifiers = [...defaultModifiers, ...props.popperOptions.modifiers];
if (props.showArrow) {
modifiers.push({
name: "arrow",
options: {
padding: props.arrowOffset || 5,
element: arrowRef.value,
},
});
}
return __spreadProps$x(__spreadValues$K({}, props.popperOptions), {
modifiers,
});
}
const { onAfterEnter, onAfterLeave, onBeforeEnter, onBeforeLeave } =
useTransitionFallthrough();
const events = useTargetEvents(delayShow, delayHide, onToggle);
const arrowRefAttacher = refAttacher(arrowRef);
const popperRefAttacher = refAttacher(popperRef);
const triggerRefAttacher = refAttacher(triggerRef);
function popupRenderer() {
const mouseUpAndDown = props.stopPopperMouseEvent ? stop : NOOP;
return vue.h(
vue.Transition,
{
name: props.transition,
onAfterEnter,
onAfterLeave,
onBeforeEnter,
onBeforeLeave,
},
{
default: () => () =>
visible.value
? vue.h(
"div",
{
"aria-hidden": false,
class: [
props.popperClass,
"el-popper",
`is-${props.effect}`,
props.pure ? "is-pure" : "",
],
style: popperStyle.value,
id: popperId,
ref: popperRefAttacher,
role: "tooltip",
onMouseenter: onPopperMouseEnter,
onMouseleave: onPopperMouseLeave,
onClick: stop,
onMousedown: mouseUpAndDown,
onMouseup: mouseUpAndDown,
},
[
vue.renderSlot(slots, "default", {}, () => [
vue.toDisplayString(props.content),
]),
arrowRenderer(),
]
)
: null,
}
);
}
function arrowRenderer() {
return props.showArrow
? vue.h(
"div",
{
ref: arrowRefAttacher,
class: "el-popper__arrow",
"data-popper-arrow": "",
},
null
)
: null;
}
function triggerRenderer(triggerProps) {
var _a;
const trigger = (_a = slots.trigger) == null ? void 0 : _a.call(slots);
const firstElement = getFirstValidNode(trigger, 1);
if (!firstElement)
throwError("renderTrigger", "trigger expects single rooted node");
return vue.cloneVNode(firstElement, triggerProps, true);
}
function render() {
const trigger = triggerRenderer(
__spreadValues$K(
{
"aria-describedby": popperId,
class: props.class,
style: props.style,
ref: triggerRefAttacher,
},
events
)
);
return vue.h(vue.Fragment, null, [
isManual.value
? trigger
: vue.withDirectives(trigger, [[ClickOutside, delayHide]]),
renderTeleport(),
]);
}
return {
render,
};
};
var __defProp$J = Object.defineProperty;
var __getOwnPropSymbols$J = Object.getOwnPropertySymbols;
var __hasOwnProp$J = Object.prototype.hasOwnProperty;
var __propIsEnum$J = Object.prototype.propertyIsEnumerable;
var __defNormalProp$J = (obj, key, value) =>
key in obj
? __defProp$J(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$J = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$J.call(b, prop)) __defNormalProp$J(a, prop, b[prop]);
if (__getOwnPropSymbols$J)
for (var prop of __getOwnPropSymbols$J(b)) {
if (__propIsEnum$J.call(b, prop)) __defNormalProp$J(a, prop, b[prop]);
}
return a;
};
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
const VAR_PREFIX = "--el-";
const setVars = (target, val) => {
Object.keys(val).forEach((key) => {
if (key.startsWith(VAR_PREFIX)) {
target == null ? void 0 : target.style.setProperty(key, val[key]);
} else {
target == null
? void 0
: target.style.setProperty(VAR_PREFIX + key, val[key]);
}
});
};
const themeVarsKey = "themeVars";
function useCssVar(vars, target) {
let stopWatchCssVar = null;
const elRef = vue.computed(() => {
var _a;
return (
vue.unref(target) ||
((_a = window == null ? void 0 : window.document) == null
? void 0
: _a.documentElement)
);
});
const themeVars = useThemeVars();
const customVars = __spreadValues$J(
__spreadValues$J({}, themeVars),
vue.unref(vars)
);
vue.provide(themeVarsKey, vue.ref(customVars));
vue.onMounted(() => {
vue.isRef(vars)
? (stopWatchCssVar = vue.watch(
vars,
(val) => {
setVars(
elRef.value,
__spreadValues$J(
__spreadValues$J({}, vue.unref(themeVars)),
val
)
);
},
{
immediate: true,
deep: true,
}
))
: setVars(
elRef.value,
__spreadValues$J(__spreadValues$J({}, vue.unref(themeVars)), vars)
);
});
vue.onUnmounted(() => stopWatchCssVar && stopWatchCssVar());
}
const useThemeVars = () => {
const themeVars = vue.inject(themeVarsKey, {});
return themeVars;
};
var English = {
name: "en",
el: {
colorpicker: {
confirm: "OK",
clear: "Clear",
},
datepicker: {
now: "Now",
today: "Today",
cancel: "Cancel",
clear: "Clear",
confirm: "OK",
selectDate: "Select date",
selectTime: "Select time",
startDate: "Start Date",
startTime: "Start Time",
endDate: "End Date",
endTime: "End Time",
prevYear: "Previous Year",
nextYear: "Next Year",
prevMonth: "Previous Month",
nextMonth: "Next Month",
year: "",
month1: "January",
month2: "February",
month3: "March",
month4: "April",
month5: "May",
month6: "June",
month7: "July",
month8: "August",
month9: "September",
month10: "October",
month11: "November",
month12: "December",
week: "week",
weeks: {
sun: "Sun",
mon: "Mon",
tue: "Tue",
wed: "Wed",
thu: "Thu",
fri: "Fri",
sat: "Sat",
},
months: {
jan: "Jan",
feb: "Feb",
mar: "Mar",
apr: "Apr",
may: "May",
jun: "Jun",
jul: "Jul",
aug: "Aug",
sep: "Sep",
oct: "Oct",
nov: "Nov",
dec: "Dec",
},
},
select: {
loading: "Loading",
noMatch: "No matching data",
noData: "No data",
placeholder: "Select",
},
cascader: {
noMatch: "No matching data",
loading: "Loading",
placeholder: "Select",
noData: "No data",
},
pagination: {
goto: "Go to",
pagesize: "/page",
total: "Total {total}",
pageClassifier: "",
deprecationWarning:
"Deprecated usages detected, please refer to the el-pagination documentation for more details",
},
messagebox: {
title: "Message",
confirm: "OK",
cancel: "Cancel",
error: "Illegal input",
},
upload: {
deleteTip: "press delete to remove",
delete: "Delete",
preview: "Preview",
continue: "Continue",
},
table: {
emptyText: "No Data",
confirmFilter: "Confirm",
resetFilter: "Reset",
clearFilter: "All",
sumText: "Sum",
},
tree: {
emptyText: "No Data",
},
transfer: {
noMatch: "No matching data",
noData: "No data",
titles: ["List 1", "List 2"],
filterPlaceholder: "Enter keyword",
noCheckedFormat: "{total} items",
hasCheckedFormat: "{checked}/{total} checked",
},
image: {
error: "FAILED",
},
pageHeader: {
title: "Back",
},
popconfirm: {
confirmButtonText: "Yes",
cancelButtonText: "No",
},
},
};
const useLocaleProps = {
locale: {
type: Object,
},
};
const LocaleInjectionKey = "ElLocaleInjection";
let localeObjCache;
function translate(path, option, current) {
const paths = path.split(".");
let value;
for (let i = 0, j = paths.length; i < j; i++) {
const property = paths[i];
value = current[property];
if (i === j - 1) return template(value, option);
if (!value) return "";
current = value;
}
}
const useLocale = () => {
const vm = vue.getCurrentInstance();
const props = vm.props;
const locale = vue.computed(() => props.locale || English);
const lang = vue.computed(() => locale.value.name);
const _translator = (...args) => {
const [path, option] = args;
return translate(path, option, locale.value);
};
const t = (...args) => {
return _translator(...args);
};
const provides = {
locale,
lang,
t,
};
localeObjCache = provides;
vue.provide(LocaleInjectionKey, provides);
};
function template(str, option) {
if (!str || !option) return str;
return str.replace(/\{(\w+)\}/g, (_, key) => {
return option[key];
});
}
const localeProviderMaker = (locale = English) => {
const lang = vue.ref(locale.name);
const localeRef = vue.ref(locale);
return {
lang,
locale: localeRef,
t: (...args) => {
const [path, option] = args;
return translate(path, option, localeRef.value);
},
};
};
const useLocaleInject = () => {
return vue.inject(
LocaleInjectionKey,
localeObjCache || {
lang: vue.ref(English.name),
locale: vue.ref(English),
t: (...args) => {
const [path, option] = args;
return translate(path, option, English);
},
}
);
};
const elFormKey = Symbol("elForm");
const elFormItemKey = Symbol("elFormItem");
const elButtonGroupKey = Symbol();
const elBreadcrumbKey = Symbol("elBreadcrumbKey");
const elPaginationKey = Symbol("elPaginationKey");
const wrapperKey = Symbol();
function buildProp({
values,
required,
default: defaultValue,
type,
validator,
} = {}) {
const _validator =
values || validator
? (val) => {
let valid = false;
let allowedValues = [];
if (values) {
allowedValues = [...values, defaultValue];
valid || (valid = allowedValues.includes(val));
}
if (validator) valid || (valid = validator(val));
if (!valid && allowedValues.length > 0) {
debugWarn(
`Vue warn`,
`Invalid prop: Expected one of (${allowedValues.join(
", "
)}), got value ${val}`
);
}
return valid;
}
: void 0;
return {
type: (type == null ? void 0 : type[wrapperKey]) || type,
required: !!required,
default: defaultValue,
validator: _validator,
};
}
const definePropType = (val) => ({ [wrapperKey]: val });
const keyOf = (arr) => Object.keys(arr);
const mutable = (val) => val;
const sizes = ["", "large", "medium", "small", "mini"];
const useFormItemProps = {
size: buildProp({
type: String,
values: sizes,
default: "",
}),
disabled: Boolean,
};
const useFormItem = ({ size, disabled }) => {
const vm = vue.getCurrentInstance();
const $ELEMENT = useGlobalConfig();
const props = vm.proxy.$props;
const form = vue.inject(elFormKey, void 0);
const formItem = vue.inject(elFormItemKey, void 0);
return {
size: vue.computed(() => {
return (
props.size ||
vue.unref(size) ||
(formItem == null ? void 0 : formItem.size) ||
(form == null ? void 0 : form.size) ||
$ELEMENT.size ||
""
);
}),
disabled: vue.computed(() => {
return (
props.disabled === true ||
vue.unref(disabled) ||
(form == null ? void 0 : form.disabled) ||
false
);
}),
};
};
const useSameTarget = (handleClick) => {
if (!handleClick) {
return { onClick: NOOP, onMousedown: NOOP, onMouseup: NOOP };
}
let mousedownTarget = false;
let mouseupTarget = false;
const onClick = (e) => {
if (mousedownTarget && mouseupTarget) {
handleClick(e);
}
mousedownTarget = mouseupTarget = false;
};
const onMousedown = (e) => {
mousedownTarget = e.target === e.currentTarget;
};
const onMouseup = (e) => {
mouseupTarget = e.target === e.currentTarget;
};
return { onClick, onMousedown, onMouseup };
};
const version$1 = "1.1.0-beta.16";
const makeInstaller = (components = []) => {
const apps = [];
const install = (app, opts) => {
const defaultInstallOpt = {
size: "",
zIndex: 2e3,
};
const option = Object.assign(defaultInstallOpt, opts);
if (apps.includes(app)) return;
apps.push(app);
components.forEach((c) => {
app.use(c);
});
if (option.locale) {
const localeProvides = localeProviderMaker(opts.locale);
app.provide(LocaleInjectionKey, localeProvides);
}
app.config.globalProperties.$ELEMENT = option;
setConfig(option);
};
return {
version: version$1,
install,
};
};
const withInstall = (main, extra) => {
main.install = (app) => {
for (const comp of [main, ...Object.values(extra != null ? extra : {})]) {
app.component(comp.name, comp);
}
};
if (extra) {
for (const [key, comp] of Object.entries(extra)) {
main[key] = comp;
}
}
return main;
};
const withInstallFunction = (fn, name) => {
fn.install = (app) => {
app.config.globalProperties[name] = fn;
};
return fn;
};
const withNoopInstall = (component) => {
component.install = NOOP;
return component;
};
const isClient = typeof window !== "undefined";
const isString = (val) => typeof val === "string";
const noop$1 = () => {};
/**
* @internal
*/
function createFilterWrapper(filter, fn) {
function wrapper(...args) {
filter(() => fn.apply(this, args), { fn, thisArg: this, args });
}
return wrapper;
}
/**
* Create an EventFilter that throttle the events
*
* @param ms
* @param [trailing=true]
*/
function throttleFilter(ms, trailing = true) {
let lastExec = 0;
let timer;
const clear = () => {
if (timer) {
clearTimeout(timer);
timer = undefined;
}
};
const filter = (invoke) => {
const duration = vue.unref(ms);
const elapsed = Date.now() - lastExec;
clear();
if (duration <= 0) {
lastExec = Date.now();
return invoke();
}
if (elapsed > duration) {
lastExec = Date.now();
invoke();
} else if (trailing) {
timer = setTimeout(() => {
lastExec = Date.now();
clear();
invoke();
}, duration);
}
};
return filter;
}
/**
* Call onScopeDispose() if it's inside a effect scope lifecycle, if not, do nothing
*
* @param fn
*/
function tryOnScopeDispose(fn) {
if (vue.getCurrentScope()) {
vue.onScopeDispose(fn);
return true;
}
return false;
}
/**
* Throttle execution of a function. Especially useful for rate limiting
* execution of handlers on events like resize and scroll.
*
* @param fn A function to be executed after delay milliseconds. The `this` context and all arguments are passed through, as-is,
* to `callback` when the throttled-function is executed.
* @param ms A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher) are most useful.
*
* @return A new, throttled, function.
*/
function useThrottleFn(fn, ms = 200, trailing = true) {
return createFilterWrapper(throttleFilter(ms, trailing), fn);
}
/**
* Wrapper for `setTimeout` with controls.
*
* @param cb
* @param interval
* @param immediate
*/
function useTimeoutFn(cb, interval, options = {}) {
const { immediate = true } = options;
const isPending = vue.ref(false);
let timer = null;
function clear() {
if (timer) {
clearTimeout(timer);
timer = null;
}
}
function stop() {
isPending.value = false;
clear();
}
function start(...args) {
clear();
isPending.value = true;
timer = setTimeout(() => {
isPending.value = false;
timer = null;
// eslint-disable-next-line node/no-callback-literal
cb(...args);
}, vue.unref(interval));
}
if (immediate) {
isPending.value = true;
if (isClient) start();
}
tryOnScopeDispose(stop);
return {
isPending,
start,
stop,
};
}
/**
* Get the dom element of a ref of element or Vue component instance
*
* @param elRef
*/
function unrefElement(elRef) {
var _a, _b;
const plain = vue.unref(elRef);
return (_b = (_a = plain) === null || _a === void 0 ? void 0 : _a.$el) !==
null && _b !== void 0
? _b
: plain;
}
const defaultWindow = isClient ? window : undefined;
isClient ? window.document : undefined;
isClient ? window.navigator : undefined;
function useEventListener(...args) {
let target;
let event;
let listener;
let options;
if (isString(args[0])) {
[event, listener, options] = args;
target = defaultWindow;
} else {
[target, event, listener, options] = args;
}
if (!target) return noop$1;
let cleanup = noop$1;
const stopWatch = vue.watch(
() => vue.unref(target),
(el) => {
cleanup();
if (!el) return;
el.addEventListener(event, listener, options);
cleanup = () => {
el.removeEventListener(event, listener, options);
cleanup = noop$1;
};
},
{ immediate: true, flush: "post" }
);
const stop = () => {
stopWatch();
cleanup();
};
tryOnScopeDispose(stop);
return stop;
}
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
function __rest(s, e) {
var t = {};
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (
e.indexOf(p[i]) < 0 &&
Object.prototype.propertyIsEnumerable.call(s, p[i])
)
t[p[i]] = s[p[i]];
}
return t;
}
/**
* Reports changes to the dimensions of an Element's content or the border-box
*
* @see https://vueuse.org/useResizeObserver
* @param target
* @param callback
* @param options
*/
function useResizeObserver(target, callback, options = {}) {
const { window = defaultWindow } = options,
observerOptions = __rest(options, ["window"]);
let observer;
const isSupported = window && "ResizeObserver" in window;
const cleanup = () => {
if (observer) {
observer.disconnect();
observer = undefined;
}
};
const stopWatch = vue.watch(
() => unrefElement(target),
(el) => {
cleanup();
if (isSupported && window && el) {
// @ts-expect-error missing type
observer = new window.ResizeObserver(callback);
observer.observe(el, observerOptions);
}
},
{ immediate: true, flush: "post" }
);
const stop = () => {
cleanup();
stopWatch();
};
tryOnScopeDispose(stop);
return {
isSupported,
stop,
};
}
var SwipeDirection;
(function (SwipeDirection) {
SwipeDirection["UP"] = "UP";
SwipeDirection["RIGHT"] = "RIGHT";
SwipeDirection["DOWN"] = "DOWN";
SwipeDirection["LEFT"] = "LEFT";
SwipeDirection["NONE"] = "NONE";
})(SwipeDirection || (SwipeDirection = {}));
const affixProps = {
zIndex: buildProp({
type: definePropType([Number, String]),
default: 100,
}),
target: {
type: String,
default: "",
},
offset: {
type: Number,
default: 0,
},
position: buildProp({
type: String,
values: ["top", "bottom"],
default: "top",
}),
};
const affixEmits = {
scroll: ({ scrollTop, fixed }) =>
typeof scrollTop === "number" && typeof fixed === "boolean",
change: (fixed) => typeof fixed === "boolean",
};
var script$20 = vue.defineComponent({
name: "ElAffix",
props: affixProps,
emits: affixEmits,
setup(props, { emit }) {
const target = vue.shallowRef();
const root = vue.shallowRef();
const scrollContainer = vue.shallowRef();
const state = vue.reactive({
fixed: false,
height: 0,
width: 0,
scrollTop: 0,
clientHeight: 0,
transform: 0,
});
const rootStyle = vue.computed(() => {
return {
height: state.fixed ? `${state.height}px` : "",
width: state.fixed ? `${state.width}px` : "",
};
});
const affixStyle = vue.computed(() => {
if (!state.fixed) return;
const offset = props.offset ? `${props.offset}px` : 0;
const transform = state.transform
? `translateY(${state.transform}px)`
: "";
return {
height: `${state.height}px`,
width: `${state.width}px`,
top: props.position === "top" ? offset : "",
bottom: props.position === "bottom" ? offset : "",
transform,
zIndex: props.zIndex,
};
});
const update = () => {
if (!root.value || !target.value || !scrollContainer.value) return;
const rootRect = root.value.getBoundingClientRect();
const targetRect = target.value.getBoundingClientRect();
state.height = rootRect.height;
state.width = rootRect.width;
state.scrollTop =
scrollContainer.value instanceof Window
? document.documentElement.scrollTop
: scrollContainer.value.scrollTop;
state.clientHeight = document.documentElement.clientHeight;
if (props.position === "top") {
if (props.target) {
const difference = targetRect.bottom - props.offset - state.height;
state.fixed = props.offset > rootRect.top && targetRect.bottom > 0;
state.transform = difference < 0 ? difference : 0;
} else {
state.fixed = props.offset > rootRect.top;
}
} else {
if (props.target) {
const difference =
state.clientHeight - targetRect.top - props.offset - state.height;
state.fixed =
state.clientHeight - props.offset < rootRect.bottom &&
state.clientHeight > targetRect.top;
state.transform = difference < 0 ? -difference : 0;
} else {
state.fixed = state.clientHeight - props.offset < rootRect.bottom;
}
}
};
const onScroll = () => {
update();
emit("scroll", {
scrollTop: state.scrollTop,
fixed: state.fixed,
});
};
vue.watch(
() => state.fixed,
() => {
emit("change", state.fixed);
}
);
vue.onMounted(() => {
var _a;
if (props.target) {
target.value =
(_a = document.querySelector(props.target)) != null ? _a : void 0;
if (!target.value) {
throw new Error(`target is not existed: ${props.target}`);
}
} else {
target.value = document.documentElement;
}
scrollContainer.value = getScrollContainer(root.value);
});
useEventListener(scrollContainer, "scroll", onScroll);
useResizeObserver(root, () => update());
return {
root,
state,
rootStyle,
affixStyle,
};
},
});
function render$1T(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
ref: "root",
class: "el-affix",
style: vue.normalizeStyle(_ctx.rootStyle),
},
[
vue.createElementVNode(
"div",
{
class: vue.normalizeClass({
"el-affix--fixed": _ctx.state.fixed,
}),
style: vue.normalizeStyle(_ctx.affixStyle),
},
[vue.renderSlot(_ctx.$slots, "default")],
6
),
],
4
)
);
}
script$20.render = render$1T;
script$20.__file = "packages/components/affix/src/affix.vue";
const ElAffix = withInstall(script$20);
const ALERT_TYPE_CLASSES_MAP = {
success: "el-icon-success",
warning: "el-icon-warning",
error: "el-icon-error",
info: "el-icon-info",
};
const alertProps = {
title: {
type: String,
default: "",
},
description: {
type: String,
default: "",
},
type: buildProp({
type: String,
values: keyOf(ALERT_TYPE_CLASSES_MAP),
default: "info",
}),
closable: {
type: Boolean,
default: true,
},
closeText: {
type: String,
default: "",
},
showIcon: Boolean,
center: Boolean,
effect: buildProp({
type: String,
values: ["light", "dark"],
default: "light",
}),
};
const alertEmits = {
close: (evt) => evt instanceof MouseEvent,
};
var script$1$ = vue.defineComponent({
name: "ElAlert",
props: alertProps,
emits: alertEmits,
setup(props, { emit, slots }) {
const visible = vue.ref(true);
const typeClass = vue.computed(() => `el-alert--${props.type}`);
const iconClass = vue.computed(
() =>
ALERT_TYPE_CLASSES_MAP[props.type] || ALERT_TYPE_CLASSES_MAP["info"]
);
const isBigIcon = vue.computed(() =>
props.description || slots.default ? "is-big" : ""
);
const isBoldTitle = vue.computed(() =>
props.description || slots.default ? "is-bold" : ""
);
const close = (evt) => {
visible.value = false;
emit("close", evt);
};
return {
visible,
typeClass,
iconClass,
isBigIcon,
isBoldTitle,
close,
};
},
});
const _hoisted_1$1p = { class: "el-alert__content" };
const _hoisted_2$11 = {
key: 1,
class: "el-alert__description",
};
function render$1S(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createBlock(
vue.Transition,
{ name: "el-alert-fade" },
{
default: vue.withCtx(() => [
vue.withDirectives(
vue.createElementVNode(
"div",
{
class: vue.normalizeClass([
"el-alert",
[
_ctx.typeClass,
_ctx.center ? "is-center" : "",
"is-" + _ctx.effect,
],
]),
role: "alert",
},
[
_ctx.showIcon
? (vue.openBlock(),
vue.createElementBlock(
"i",
{
key: 0,
class: vue.normalizeClass([
"el-alert__icon",
[_ctx.iconClass, _ctx.isBigIcon],
]),
},
null,
2
))
: vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", _hoisted_1$1p, [
_ctx.title || _ctx.$slots.title
? (vue.openBlock(),
vue.createElementBlock(
"span",
{
key: 0,
class: vue.normalizeClass([
"el-alert__title",
[_ctx.isBoldTitle],
]),
},
[
vue.renderSlot(_ctx.$slots, "title", {}, () => [
vue.createTextVNode(
vue.toDisplayString(_ctx.title),
1
),
]),
],
2
))
: vue.createCommentVNode("v-if", true),
_ctx.$slots.default || _ctx.description
? (vue.openBlock(),
vue.createElementBlock("p", _hoisted_2$11, [
vue.renderSlot(_ctx.$slots, "default", {}, () => [
vue.createTextVNode(
vue.toDisplayString(_ctx.description),
1
),
]),
]))
: vue.createCommentVNode("v-if", true),
_ctx.closable
? (vue.openBlock(),
vue.createElementBlock(
"i",
{
key: 2,
class: vue.normalizeClass([
"el-alert__closebtn",
{
"is-customed": _ctx.closeText !== "",
"el-icon-close": _ctx.closeText === "",
},
]),
onClick:
_cache[0] ||
(_cache[0] = (...args) =>
_ctx.close && _ctx.close(...args)),
},
vue.toDisplayString(_ctx.closeText),
3
))
: vue.createCommentVNode("v-if", true),
]),
],
2
),
[[vue.vShow, _ctx.visible]]
),
]),
_: 3,
}
)
);
}
script$1$.render = render$1S;
script$1$.__file = "packages/components/alert/src/alert.vue";
const ElAlert = withInstall(script$1$);
/**
* Gets the timestamp of the number of milliseconds that have elapsed since
* the Unix epoch (1 January 1970 00:00:00 UTC).
*
* @static
* @memberOf _
* @since 2.4.0
* @category Date
* @returns {number} Returns the timestamp.
* @example
*
* _.defer(function(stamp) {
* console.log(_.now() - stamp);
* }, _.now());
* // => Logs the number of milliseconds it took for the deferred invocation.
*/
var now = function () {
return _root.Date.now();
};
var now_1 = now;
/** Used to match a single whitespace character. */
var reWhitespace = /\s/;
/**
* Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace
* character of `string`.
*
* @private
* @param {string} string The string to inspect.
* @returns {number} Returns the index of the last non-whitespace character.
*/
function trimmedEndIndex(string) {
var index = string.length;
while (index-- && reWhitespace.test(string.charAt(index))) {}
return index;
}
var _trimmedEndIndex = trimmedEndIndex;
/** Used to match leading whitespace. */
var reTrimStart = /^\s+/;
/**
* The base implementation of `_.trim`.
*
* @private
* @param {string} string The string to trim.
* @returns {string} Returns the trimmed string.
*/
function baseTrim(string) {
return string
? string.slice(0, _trimmedEndIndex(string) + 1).replace(reTrimStart, "")
: string;
}
var _baseTrim = baseTrim;
/** `Object#toString` result references. */
var symbolTag$2 = "[object Symbol]";
/**
* Checks if `value` is classified as a `Symbol` primitive or object.
*
* @static
* @memberOf _
* @since 4.0.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
* @example
*
* _.isSymbol(Symbol.iterator);
* // => true
*
* _.isSymbol('abc');
* // => false
*/
function isSymbol(value) {
return (
typeof value == "symbol" ||
(isObjectLike_1(value) && _baseGetTag(value) == symbolTag$2)
);
}
var isSymbol_1 = isSymbol;
/** Used as references for various `Number` constants. */
var NAN = 0 / 0;
/** Used to detect bad signed hexadecimal string values. */
var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
/** Used to detect binary string values. */
var reIsBinary = /^0b[01]+$/i;
/** Used to detect octal string values. */
var reIsOctal = /^0o[0-7]+$/i;
/** Built-in method references without a dependency on `root`. */
var freeParseInt = parseInt;
/**
* Converts `value` to a number.
*
* @static
* @memberOf _
* @since 4.0.0
* @category Lang
* @param {*} value The value to process.
* @returns {number} Returns the number.
* @example
*
* _.toNumber(3.2);
* // => 3.2
*
* _.toNumber(Number.MIN_VALUE);
* // => 5e-324
*
* _.toNumber(Infinity);
* // => Infinity
*
* _.toNumber('3.2');
* // => 3.2
*/
function toNumber(value) {
if (typeof value == "number") {
return value;
}
if (isSymbol_1(value)) {
return NAN;
}
if (isObject_1(value)) {
var other = typeof value.valueOf == "function" ? value.valueOf() : value;
value = isObject_1(other) ? other + "" : other;
}
if (typeof value != "string") {
return value === 0 ? value : +value;
}
value = _baseTrim(value);
var isBinary = reIsBinary.test(value);
return isBinary || reIsOctal.test(value)
? freeParseInt(value.slice(2), isBinary ? 2 : 8)
: reIsBadHex.test(value)
? NAN
: +value;
}
var toNumber_1 = toNumber;
/** Error message constants. */
var FUNC_ERROR_TEXT$2 = "Expected a function";
/* Built-in method references for those with the same name as other `lodash` methods. */
var nativeMax$1 = Math.max,
nativeMin = Math.min;
/**
* Creates a debounced function that delays invoking `func` until after `wait`
* milliseconds have elapsed since the last time the debounced function was
* invoked. The debounced function comes with a `cancel` method to cancel
* delayed `func` invocations and a `flush` method to immediately invoke them.
* Provide `options` to indicate whether `func` should be invoked on the
* leading and/or trailing edge of the `wait` timeout. The `func` is invoked
* with the last arguments provided to the debounced function. Subsequent
* calls to the debounced function return the result of the last `func`
* invocation.
*
* **Note:** If `leading` and `trailing` options are `true`, `func` is
* invoked on the trailing edge of the timeout only if the debounced function
* is invoked more than once during the `wait` timeout.
*
* If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
* until to the next tick, similar to `setTimeout` with a timeout of `0`.
*
* See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
* for details over the differences between `_.debounce` and `_.throttle`.
*
* @static
* @memberOf _
* @since 0.1.0
* @category Function
* @param {Function} func The function to debounce.
* @param {number} [wait=0] The number of milliseconds to delay.
* @param {Object} [options={}] The options object.
* @param {boolean} [options.leading=false]
* Specify invoking on the leading edge of the timeout.
* @param {number} [options.maxWait]
* The maximum time `func` is allowed to be delayed before it's invoked.
* @param {boolean} [options.trailing=true]
* Specify invoking on the trailing edge of the timeout.
* @returns {Function} Returns the new debounced function.
* @example
*
* // Avoid costly calculations while the window size is in flux.
* jQuery(window).on('resize', _.debounce(calculateLayout, 150));
*
* // Invoke `sendMail` when clicked, debouncing subsequent calls.
* jQuery(element).on('click', _.debounce(sendMail, 300, {
* 'leading': true,
* 'trailing': false
* }));
*
* // Ensure `batchLog` is invoked once after 1 second of debounced calls.
* var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
* var source = new EventSource('/stream');
* jQuery(source).on('message', debounced);
*
* // Cancel the trailing debounced invocation.
* jQuery(window).on('popstate', debounced.cancel);
*/
function debounce(func, wait, options) {
var lastArgs,
lastThis,
maxWait,
result,
timerId,
lastCallTime,
lastInvokeTime = 0,
leading = false,
maxing = false,
trailing = true;
if (typeof func != "function") {
throw new TypeError(FUNC_ERROR_TEXT$2);
}
wait = toNumber_1(wait) || 0;
if (isObject_1(options)) {
leading = !!options.leading;
maxing = "maxWait" in options;
maxWait = maxing
? nativeMax$1(toNumber_1(options.maxWait) || 0, wait)
: maxWait;
trailing = "trailing" in options ? !!options.trailing : trailing;
}
function invokeFunc(time) {
var args = lastArgs,
thisArg = lastThis;
lastArgs = lastThis = undefined;
lastInvokeTime = time;
result = func.apply(thisArg, args);
return result;
}
function leadingEdge(time) {
// Reset any `maxWait` timer.
lastInvokeTime = time;
// Start the timer for the trailing edge.
timerId = setTimeout(timerExpired, wait);
// Invoke the leading edge.
return leading ? invokeFunc(time) : result;
}
function remainingWait(time) {
var timeSinceLastCall = time - lastCallTime,
timeSinceLastInvoke = time - lastInvokeTime,
timeWaiting = wait - timeSinceLastCall;
return maxing
? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke)
: timeWaiting;
}
function shouldInvoke(time) {
var timeSinceLastCall = time - lastCallTime,
timeSinceLastInvoke = time - lastInvokeTime;
// Either this is the first call, activity has stopped and we're at the
// trailing edge, the system time has gone backwards and we're treating
// it as the trailing edge, or we've hit the `maxWait` limit.
return (
lastCallTime === undefined ||
timeSinceLastCall >= wait ||
timeSinceLastCall < 0 ||
(maxing && timeSinceLastInvoke >= maxWait)
);
}
function timerExpired() {
var time = now_1();
if (shouldInvoke(time)) {
return trailingEdge(time);
}
// Restart the timer.
timerId = setTimeout(timerExpired, remainingWait(time));
}
function trailingEdge(time) {
timerId = undefined;
// Only invoke if we have `lastArgs` which means `func` has been
// debounced at least once.
if (trailing && lastArgs) {
return invokeFunc(time);
}
lastArgs = lastThis = undefined;
return result;
}
function cancel() {
if (timerId !== undefined) {
clearTimeout(timerId);
}
lastInvokeTime = 0;
lastArgs = lastCallTime = lastThis = timerId = undefined;
}
function flush() {
return timerId === undefined ? result : trailingEdge(now_1());
}
function debounced() {
var time = now_1(),
isInvoking = shouldInvoke(time);
lastArgs = arguments;
lastThis = this;
lastCallTime = time;
if (isInvoking) {
if (timerId === undefined) {
return leadingEdge(lastCallTime);
}
if (maxing) {
// Handle invocations in a tight loop.
clearTimeout(timerId);
timerId = setTimeout(timerExpired, wait);
return invokeFunc(lastCallTime);
}
}
if (timerId === undefined) {
timerId = setTimeout(timerExpired, wait);
}
return result;
}
debounced.cancel = cancel;
debounced.flush = flush;
return debounced;
}
var debounce_1 = debounce;
function isKorean(text) {
const reg = /([(\uAC00-\uD7AF)|(\u3130-\u318F)])+/gi;
return reg.test(text);
}
const isValidWidthUnit = (val) => {
if (isNumber(val)) {
return true;
} else {
return (
["px", "rem", "em", "vw", "%", "vmin", "vmax"].some((unit) =>
val.endsWith(unit)
) || val.startsWith("calc")
);
}
};
const isValidComponentSize = (val) =>
["", "large", "medium", "small", "mini"].includes(val);
const isValidDatePickType = (val) =>
[
"year",
"month",
"date",
"dates",
"week",
"datetime",
"datetimerange",
"daterange",
"monthrange",
].includes(val);
let hiddenTextarea;
const HIDDEN_STYLE = `
height:0 !important;
visibility:hidden !important;
overflow:hidden !important;
position:absolute !important;
z-index:-1000 !important;
top:0 !important;
right:0 !important;
`;
const CONTEXT_STYLE = [
"letter-spacing",
"line-height",
"padding-top",
"padding-bottom",
"font-family",
"font-weight",
"font-size",
"text-rendering",
"text-transform",
"width",
"text-indent",
"padding-left",
"padding-right",
"border-width",
"box-sizing",
];
function calculateNodeStyling(targetElement) {
const style = window.getComputedStyle(targetElement);
const boxSizing = style.getPropertyValue("box-sizing");
const paddingSize =
parseFloat(style.getPropertyValue("padding-bottom")) +
parseFloat(style.getPropertyValue("padding-top"));
const borderSize =
parseFloat(style.getPropertyValue("border-bottom-width")) +
parseFloat(style.getPropertyValue("border-top-width"));
const contextStyle = CONTEXT_STYLE.map(
(name) => `${name}:${style.getPropertyValue(name)}`
).join(";");
return { contextStyle, paddingSize, borderSize, boxSizing };
}
function calcTextareaHeight(targetElement, minRows = 1, maxRows = null) {
var _a;
if (!hiddenTextarea) {
hiddenTextarea = document.createElement("textarea");
document.body.appendChild(hiddenTextarea);
}
const { paddingSize, borderSize, boxSizing, contextStyle } =
calculateNodeStyling(targetElement);
hiddenTextarea.setAttribute("style", `${contextStyle};${HIDDEN_STYLE}`);
hiddenTextarea.value =
targetElement.value || targetElement.placeholder || "";
let height = hiddenTextarea.scrollHeight;
const result = {};
if (boxSizing === "border-box") {
height = height + borderSize;
} else if (boxSizing === "content-box") {
height = height - paddingSize;
}
hiddenTextarea.value = "";
const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
if (minRows !== null) {
let minHeight = singleRowHeight * minRows;
if (boxSizing === "border-box") {
minHeight = minHeight + paddingSize + borderSize;
}
height = Math.max(minHeight, height);
result.minHeight = `${minHeight}px`;
}
if (maxRows !== null) {
let maxHeight = singleRowHeight * maxRows;
if (boxSizing === "border-box") {
maxHeight = maxHeight + paddingSize + borderSize;
}
height = Math.min(maxHeight, height);
}
result.height = `${height}px`;
(_a = hiddenTextarea.parentNode) == null
? void 0
: _a.removeChild(hiddenTextarea);
hiddenTextarea = null;
return result;
}
var __defProp$I = Object.defineProperty;
var __defProps$w = Object.defineProperties;
var __getOwnPropDescs$w = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$I = Object.getOwnPropertySymbols;
var __hasOwnProp$I = Object.prototype.hasOwnProperty;
var __propIsEnum$I = Object.prototype.propertyIsEnumerable;
var __defNormalProp$I = (obj, key, value) =>
key in obj
? __defProp$I(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$I = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$I.call(b, prop)) __defNormalProp$I(a, prop, b[prop]);
if (__getOwnPropSymbols$I)
for (var prop of __getOwnPropSymbols$I(b)) {
if (__propIsEnum$I.call(b, prop)) __defNormalProp$I(a, prop, b[prop]);
}
return a;
};
var __spreadProps$w = (a, b) => __defProps$w(a, __getOwnPropDescs$w(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
const PENDANT_MAP = {
suffix: "append",
prefix: "prepend",
};
var script$1_ = vue.defineComponent({
name: "ElInput",
inheritAttrs: false,
props: {
modelValue: {
type: [String, Number],
default: "",
},
type: {
type: String,
default: "text",
},
size: {
type: String,
validator: isValidComponentSize,
},
resize: {
type: String,
validator: (val) =>
["none", "both", "horizontal", "vertical"].includes(val),
},
autosize: {
type: [Boolean, Object],
default: false,
},
autocomplete: {
type: String,
default: "off",
},
placeholder: {
type: String,
},
form: {
type: String,
default: "",
},
disabled: {
type: Boolean,
default: false,
},
readonly: {
type: Boolean,
default: false,
},
clearable: {
type: Boolean,
default: false,
},
showPassword: {
type: Boolean,
default: false,
},
showWordLimit: {
type: Boolean,
default: false,
},
suffixIcon: {
type: String,
default: "",
},
prefixIcon: {
type: String,
default: "",
},
label: {
type: String,
},
tabindex: {
type: [Number, String],
},
validateEvent: {
type: Boolean,
default: true,
},
inputStyle: {
type: Object,
default: () => ({}),
},
maxlength: {
type: [Number, String],
},
},
emits: [
UPDATE_MODEL_EVENT,
"input",
"change",
"focus",
"blur",
"clear",
"mouseleave",
"mouseenter",
"keydown",
"compositionstart",
"compositionupdate",
"compositionend",
],
setup(props, ctx) {
const instance = vue.getCurrentInstance();
const attrs = useAttrs();
const $ELEMENT = useGlobalConfig();
const elForm = vue.inject(elFormKey, {});
const elFormItem = vue.inject(elFormItemKey, {});
const input = vue.ref(null);
const textarea = vue.ref(null);
const focused = vue.ref(false);
const hovering = vue.ref(false);
const isComposing = vue.ref(false);
const passwordVisible = vue.ref(false);
const _textareaCalcStyle = vue.shallowRef(props.inputStyle);
const inputOrTextarea = vue.computed(() => input.value || textarea.value);
const inputSize = vue.computed(
() => props.size || elFormItem.size || $ELEMENT.size
);
const needStatusIcon = vue.computed(() => elForm.statusIcon);
const validateState = vue.computed(() => elFormItem.validateState || "");
const validateIcon = vue.computed(
() => VALIDATE_STATE_MAP[validateState.value]
);
const computedTextareaStyle = vue.computed(() =>
__spreadProps$w(
__spreadValues$I(
__spreadValues$I({}, props.inputStyle),
_textareaCalcStyle.value
),
{
resize: props.resize,
}
)
);
const inputDisabled = vue.computed(
() => props.disabled || elForm.disabled
);
const nativeInputValue = vue.computed(() =>
props.modelValue === null || props.modelValue === void 0
? ""
: String(props.modelValue)
);
const showClear = vue.computed(() => {
return (
props.clearable &&
!inputDisabled.value &&
!props.readonly &&
nativeInputValue.value &&
(focused.value || hovering.value)
);
});
const showPwdVisible = vue.computed(() => {
return (
props.showPassword &&
!inputDisabled.value &&
!props.readonly &&
(!!nativeInputValue.value || focused.value)
);
});
const isWordLimitVisible = vue.computed(() => {
return (
props.showWordLimit &&
props.maxlength &&
(props.type === "text" || props.type === "textarea") &&
!inputDisabled.value &&
!props.readonly &&
!props.showPassword
);
});
const textLength = vue.computed(() => {
return Array.from(nativeInputValue.value).length;
});
const inputExceed = vue.computed(() => {
return (
isWordLimitVisible.value && textLength.value > Number(props.maxlength)
);
});
const resizeTextarea = () => {
const { type, autosize } = props;
if (isServer || type !== "textarea") return;
if (autosize) {
const minRows = isObject$2(autosize) ? autosize.minRows : void 0;
const maxRows = isObject$2(autosize) ? autosize.maxRows : void 0;
_textareaCalcStyle.value = __spreadValues$I(
{},
calcTextareaHeight(textarea.value, minRows, maxRows)
);
} else {
_textareaCalcStyle.value = {
minHeight: calcTextareaHeight(textarea.value).minHeight,
};
}
};
const setNativeInputValue = () => {
const input2 = inputOrTextarea.value;
if (!input2 || input2.value === nativeInputValue.value) return;
input2.value = nativeInputValue.value;
};
const calcIconOffset = (place) => {
const { el } = instance.vnode;
const elList = Array.from(el.querySelectorAll(`.el-input__${place}`));
const target = elList.find((item) => item.parentNode === el);
if (!target) return;
const pendant = PENDANT_MAP[place];
if (ctx.slots[pendant]) {
target.style.transform = `translateX(${
place === "suffix" ? "-" : ""
}${el.querySelector(`.el-input-group__${pendant}`).offsetWidth}px)`;
} else {
target.removeAttribute("style");
}
};
const updateIconOffset = () => {
calcIconOffset("prefix");
calcIconOffset("suffix");
};
const handleInput = (event) => {
let { value } = event.target;
if (isComposing.value) return;
if (value === nativeInputValue.value) return;
if (props.maxlength) {
const sliceIndex = inputExceed.value
? textLength.value
: props.maxlength;
value = Array.from(value).slice(0, Number(sliceIndex)).join("");
}
ctx.emit(UPDATE_MODEL_EVENT, value);
ctx.emit("input", value);
vue.nextTick(setNativeInputValue);
};
const handleChange = (event) => {
ctx.emit("change", event.target.value);
};
const focus = () => {
vue.nextTick(() => {
inputOrTextarea.value.focus();
});
};
const blur = () => {
inputOrTextarea.value.blur();
};
const handleFocus = (event) => {
focused.value = true;
ctx.emit("focus", event);
};
const handleBlur = (event) => {
var _a;
focused.value = false;
ctx.emit("blur", event);
if (props.validateEvent) {
(_a = elFormItem.validate) == null
? void 0
: _a.call(elFormItem, "blur");
}
};
const select = () => {
inputOrTextarea.value.select();
};
const handleCompositionStart = (event) => {
ctx.emit("compositionstart", event);
isComposing.value = true;
};
const handleCompositionUpdate = (event) => {
var _a;
ctx.emit("compositionupdate", event);
const text = (_a = event.target) == null ? void 0 : _a.value;
const lastCharacter = text[text.length - 1] || "";
isComposing.value = !isKorean(lastCharacter);
};
const handleCompositionEnd = (event) => {
ctx.emit("compositionend", event);
if (isComposing.value) {
isComposing.value = false;
handleInput(event);
}
};
const clear = () => {
ctx.emit(UPDATE_MODEL_EVENT, "");
ctx.emit("change", "");
ctx.emit("clear");
ctx.emit("input", "");
};
const handlePasswordVisible = () => {
passwordVisible.value = !passwordVisible.value;
focus();
};
const getSuffixVisible = () => {
return (
ctx.slots.suffix ||
props.suffixIcon ||
showClear.value ||
props.showPassword ||
isWordLimitVisible.value ||
(validateState.value && needStatusIcon.value)
);
};
vue.watch(
() => props.modelValue,
() => {
var _a;
vue.nextTick(resizeTextarea);
if (props.validateEvent) {
(_a = elFormItem.validate) == null
? void 0
: _a.call(elFormItem, "change");
}
}
);
vue.watch(nativeInputValue, () => {
setNativeInputValue();
});
vue.watch(
() => props.type,
() => {
vue.nextTick(() => {
setNativeInputValue();
resizeTextarea();
updateIconOffset();
});
}
);
vue.onMounted(() => {
setNativeInputValue();
updateIconOffset();
vue.nextTick(resizeTextarea);
});
vue.onUpdated(() => {
vue.nextTick(updateIconOffset);
});
const onMouseLeave = (e) => {
hovering.value = false;
ctx.emit("mouseleave", e);
};
const onMouseEnter = (e) => {
hovering.value = true;
ctx.emit("mouseenter", e);
};
const handleKeydown = (e) => {
ctx.emit("keydown", e);
};
return {
input,
textarea,
attrs,
inputSize,
validateState,
validateIcon,
computedTextareaStyle,
resizeTextarea,
inputDisabled,
showClear,
showPwdVisible,
isWordLimitVisible,
textLength,
hovering,
inputExceed,
passwordVisible,
inputOrTextarea,
handleInput,
handleChange,
handleFocus,
handleBlur,
handleCompositionStart,
handleCompositionUpdate,
handleCompositionEnd,
handlePasswordVisible,
clear,
select,
focus,
blur,
getSuffixVisible,
onMouseLeave,
onMouseEnter,
handleKeydown,
};
},
});
const _hoisted_1$1o = {
key: 0,
class: "el-input-group__prepend",
};
const _hoisted_2$10 = [
"type",
"disabled",
"readonly",
"autocomplete",
"tabindex",
"aria-label",
"placeholder",
];
const _hoisted_3$V = {
key: 2,
class: "el-input__prefix",
};
const _hoisted_4$A = {
key: 3,
class: "el-input__suffix",
};
const _hoisted_5$u = { class: "el-input__suffix-inner" };
const _hoisted_6$n = {
key: 3,
class: "el-input__count",
};
const _hoisted_7$f = { class: "el-input__count-inner" };
const _hoisted_8$b = {
key: 4,
class: "el-input-group__append",
};
const _hoisted_9$a = [
"tabindex",
"disabled",
"readonly",
"autocomplete",
"aria-label",
"placeholder",
];
const _hoisted_10$a = {
key: 2,
class: "el-input__count",
};
function render$1R(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
class: vue.normalizeClass([
_ctx.type === "textarea" ? "el-textarea" : "el-input",
_ctx.inputSize ? "el-input--" + _ctx.inputSize : "",
{
"is-disabled": _ctx.inputDisabled,
"is-exceed": _ctx.inputExceed,
"el-input-group": _ctx.$slots.prepend || _ctx.$slots.append,
"el-input-group--append": _ctx.$slots.append,
"el-input-group--prepend": _ctx.$slots.prepend,
"el-input--prefix": _ctx.$slots.prefix || _ctx.prefixIcon,
"el-input--suffix":
_ctx.$slots.suffix ||
_ctx.suffixIcon ||
_ctx.clearable ||
_ctx.showPassword,
"el-input--suffix--password-clear":
_ctx.clearable && _ctx.showPassword,
},
_ctx.$attrs.class,
]),
style: vue.normalizeStyle(_ctx.$attrs.style),
onMouseenter:
_cache[19] ||
(_cache[19] = (...args) =>
_ctx.onMouseEnter && _ctx.onMouseEnter(...args)),
onMouseleave:
_cache[20] ||
(_cache[20] = (...args) =>
_ctx.onMouseLeave && _ctx.onMouseLeave(...args)),
},
[
_ctx.type !== "textarea"
? (vue.openBlock(),
vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
vue.createCommentVNode(" \u524D\u7F6E\u5143\u7D20 "),
_ctx.$slots.prepend
? (vue.openBlock(),
vue.createElementBlock("div", _hoisted_1$1o, [
vue.renderSlot(_ctx.$slots, "prepend"),
]))
: vue.createCommentVNode("v-if", true),
_ctx.type !== "textarea"
? (vue.openBlock(),
vue.createElementBlock(
"input",
vue.mergeProps(
{
key: 1,
ref: "input",
class: "el-input__inner",
},
_ctx.attrs,
{
type: _ctx.showPassword
? _ctx.passwordVisible
? "text"
: "password"
: _ctx.type,
disabled: _ctx.inputDisabled,
readonly: _ctx.readonly,
autocomplete: _ctx.autocomplete,
tabindex: _ctx.tabindex,
"aria-label": _ctx.label,
placeholder: _ctx.placeholder,
style: _ctx.inputStyle,
onCompositionstart:
_cache[0] ||
(_cache[0] = (...args) =>
_ctx.handleCompositionStart &&
_ctx.handleCompositionStart(...args)),
onCompositionupdate:
_cache[1] ||
(_cache[1] = (...args) =>
_ctx.handleCompositionUpdate &&
_ctx.handleCompositionUpdate(...args)),
onCompositionend:
_cache[2] ||
(_cache[2] = (...args) =>
_ctx.handleCompositionEnd &&
_ctx.handleCompositionEnd(...args)),
onInput:
_cache[3] ||
(_cache[3] = (...args) =>
_ctx.handleInput && _ctx.handleInput(...args)),
onFocus:
_cache[4] ||
(_cache[4] = (...args) =>
_ctx.handleFocus && _ctx.handleFocus(...args)),
onBlur:
_cache[5] ||
(_cache[5] = (...args) =>
_ctx.handleBlur && _ctx.handleBlur(...args)),
onChange:
_cache[6] ||
(_cache[6] = (...args) =>
_ctx.handleChange &&
_ctx.handleChange(...args)),
onKeydown:
_cache[7] ||
(_cache[7] = (...args) =>
_ctx.handleKeydown &&
_ctx.handleKeydown(...args)),
}
),
null,
16,
_hoisted_2$10
))
: vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" \u524D\u7F6E\u5185\u5BB9 "),
_ctx.$slots.prefix || _ctx.prefixIcon
? (vue.openBlock(),
vue.createElementBlock("span", _hoisted_3$V, [
vue.renderSlot(_ctx.$slots, "prefix"),
_ctx.prefixIcon
? (vue.openBlock(),
vue.createElementBlock(
"i",
{
key: 0,
class: vue.normalizeClass([
"el-input__icon",
_ctx.prefixIcon,
]),
},
null,
2
))
: vue.createCommentVNode("v-if", true),
]))
: vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" \u540E\u7F6E\u5185\u5BB9 "),
_ctx.getSuffixVisible()
? (vue.openBlock(),
vue.createElementBlock("span", _hoisted_4$A, [
vue.createElementVNode("span", _hoisted_5$u, [
!_ctx.showClear ||
!_ctx.showPwdVisible ||
!_ctx.isWordLimitVisible
? (vue.openBlock(),
vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
vue.renderSlot(_ctx.$slots, "suffix"),
_ctx.suffixIcon
? (vue.openBlock(),
vue.createElementBlock(
"i",
{
key: 0,
class: vue.normalizeClass([
"el-input__icon",
_ctx.suffixIcon,
]),
},
null,
2
))
: vue.createCommentVNode("v-if", true),
],
64
))
: vue.createCommentVNode("v-if", true),
_ctx.showClear
? (vue.openBlock(),
vue.createElementBlock(
"i",
{
key: 1,
class:
"el-input__icon el-icon-circle-close el-input__clear",
onMousedown:
_cache[8] ||
(_cache[8] = vue.withModifiers(() => {}, [
"prevent",
])),
onClick:
_cache[9] ||
(_cache[9] = (...args) =>
_ctx.clear && _ctx.clear(...args)),
},
null,
32
))
: vue.createCommentVNode("v-if", true),
_ctx.showPwdVisible
? (vue.openBlock(),
vue.createElementBlock("i", {
key: 2,
class:
"el-input__icon el-icon-view el-input__clear",
onClick:
_cache[10] ||
(_cache[10] = (...args) =>
_ctx.handlePasswordVisible &&
_ctx.handlePasswordVisible(...args)),
}))
: vue.createCommentVNode("v-if", true),
_ctx.isWordLimitVisible
? (vue.openBlock(),
vue.createElementBlock("span", _hoisted_6$n, [
vue.createElementVNode(
"span",
_hoisted_7$f,
vue.toDisplayString(_ctx.textLength) +
"/" +
vue.toDisplayString(_ctx.maxlength),
1
),
]))
: vue.createCommentVNode("v-if", true),
]),
_ctx.validateState
? (vue.openBlock(),
vue.createElementBlock(
"i",
{
key: 0,
class: vue.normalizeClass([
"el-input__icon",
"el-input__validateIcon",
_ctx.validateIcon,
]),
},
null,
2
))
: vue.createCommentVNode("v-if", true),
]))
: vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" \u540E\u7F6E\u5143\u7D20 "),
_ctx.$slots.append
? (vue.openBlock(),
vue.createElementBlock("div", _hoisted_8$b, [
vue.renderSlot(_ctx.$slots, "append"),
]))
: vue.createCommentVNode("v-if", true),
],
64
))
: (vue.openBlock(),
vue.createElementBlock(
"textarea",
vue.mergeProps(
{
key: 1,
ref: "textarea",
class: "el-textarea__inner",
},
_ctx.attrs,
{
tabindex: _ctx.tabindex,
disabled: _ctx.inputDisabled,
readonly: _ctx.readonly,
autocomplete: _ctx.autocomplete,
style: _ctx.computedTextareaStyle,
"aria-label": _ctx.label,
placeholder: _ctx.placeholder,
onCompositionstart:
_cache[11] ||
(_cache[11] = (...args) =>
_ctx.handleCompositionStart &&
_ctx.handleCompositionStart(...args)),
onCompositionupdate:
_cache[12] ||
(_cache[12] = (...args) =>
_ctx.handleCompositionUpdate &&
_ctx.handleCompositionUpdate(...args)),
onCompositionend:
_cache[13] ||
(_cache[13] = (...args) =>
_ctx.handleCompositionEnd &&
_ctx.handleCompositionEnd(...args)),
onInput:
_cache[14] ||
(_cache[14] = (...args) =>
_ctx.handleInput && _ctx.handleInput(...args)),
onFocus:
_cache[15] ||
(_cache[15] = (...args) =>
_ctx.handleFocus && _ctx.handleFocus(...args)),
onBlur:
_cache[16] ||
(_cache[16] = (...args) =>
_ctx.handleBlur && _ctx.handleBlur(...args)),
onChange:
_cache[17] ||
(_cache[17] = (...args) =>
_ctx.handleChange && _ctx.handleChange(...args)),
onKeydown:
_cache[18] ||
(_cache[18] = (...args) =>
_ctx.handleKeydown && _ctx.handleKeydown(...args)),
}
),
"\n ",
16,
_hoisted_9$a
)),
_ctx.isWordLimitVisible && _ctx.type === "textarea"
? (vue.openBlock(),
vue.createElementBlock(
"span",
_hoisted_10$a,
vue.toDisplayString(_ctx.textLength) +
"/" +
vue.toDisplayString(_ctx.maxlength),
1
))
: vue.createCommentVNode("v-if", true),
],
38
)
);
}
script$1_.render = render$1R;
script$1_.__file = "packages/components/input/src/index.vue";
script$1_.install = (app) => {
app.component(script$1_.name, script$1_);
};
const _Input = script$1_;
const ElInput = _Input;
const BAR_MAP = {
vertical: {
offset: "offsetHeight",
scroll: "scrollTop",
scrollSize: "scrollHeight",
size: "height",
key: "vertical",
axis: "Y",
client: "clientY",
direction: "top",
},
horizontal: {
offset: "offsetWidth",
scroll: "scrollLeft",
scrollSize: "scrollWidth",
size: "width",
key: "horizontal",
axis: "X",
client: "clientX",
direction: "left",
},
};
function renderThumbStyle$1({ move, size, bar }) {
const style = {};
const translate = `translate${bar.axis}(${move}%)`;
style[bar.size] = size;
style.transform = translate;
style.msTransform = translate;
style.webkitTransform = translate;
return style;
}
var __pow$1 = Math.pow;
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
var script$1Z = vue.defineComponent({
name: "Bar",
props: {
vertical: Boolean,
size: String,
move: Number,
ratio: Number,
always: Boolean,
},
setup(props) {
const instance = vue.ref(null);
const thumb = vue.ref(null);
const scrollbar = vue.inject("scrollbar", {});
const wrap = vue.inject("scrollbar-wrap", {});
const bar = vue.computed(
() => BAR_MAP[props.vertical ? "vertical" : "horizontal"]
);
const barStore = vue.ref({});
const cursorDown = vue.ref(null);
const cursorLeave = vue.ref(null);
const visible = vue.ref(false);
let onselectstartStore = null;
const offsetRatio = vue.computed(() => {
return (
__pow$1(instance.value[bar.value.offset], 2) /
wrap.value[bar.value.scrollSize] /
props.ratio /
thumb.value[bar.value.offset]
);
});
const clickThumbHandler = (e) => {
e.stopPropagation();
if (e.ctrlKey || [1, 2].includes(e.button)) {
return;
}
window.getSelection().removeAllRanges();
startDrag(e);
barStore.value[bar.value.axis] =
e.currentTarget[bar.value.offset] -
(e[bar.value.client] -
e.currentTarget.getBoundingClientRect()[bar.value.direction]);
};
const clickTrackHandler = (e) => {
const offset = Math.abs(
e.target.getBoundingClientRect()[bar.value.direction] -
e[bar.value.client]
);
const thumbHalf = thumb.value[bar.value.offset] / 2;
const thumbPositionPercentage =
((offset - thumbHalf) * 100 * offsetRatio.value) /
instance.value[bar.value.offset];
wrap.value[bar.value.scroll] =
(thumbPositionPercentage * wrap.value[bar.value.scrollSize]) / 100;
};
const startDrag = (e) => {
e.stopImmediatePropagation();
cursorDown.value = true;
on(document, "mousemove", mouseMoveDocumentHandler);
on(document, "mouseup", mouseUpDocumentHandler);
onselectstartStore = document.onselectstart;
document.onselectstart = () => false;
};
const mouseMoveDocumentHandler = (e) => {
if (cursorDown.value === false) return;
const prevPage = barStore.value[bar.value.axis];
if (!prevPage) return;
const offset =
(instance.value.getBoundingClientRect()[bar.value.direction] -
e[bar.value.client]) *
-1;
const thumbClickPosition = thumb.value[bar.value.offset] - prevPage;
const thumbPositionPercentage =
((offset - thumbClickPosition) * 100 * offsetRatio.value) /
instance.value[bar.value.offset];
wrap.value[bar.value.scroll] =
(thumbPositionPercentage * wrap.value[bar.value.scrollSize]) / 100;
};
const mouseUpDocumentHandler = () => {
cursorDown.value = false;
barStore.value[bar.value.axis] = 0;
off(document, "mousemove", mouseMoveDocumentHandler);
off(document, "mouseup", mouseUpDocumentHandler);
document.onselectstart = onselectstartStore;
if (cursorLeave.value) {
visible.value = false;
}
};
const thumbStyle = vue.computed(() =>
renderThumbStyle$1({
size: props.size,
move: props.move,
bar: bar.value,
})
);
const mouseMoveScrollbarHandler = () => {
cursorLeave.value = false;
visible.value = !!props.size;
};
const mouseLeaveScrollbarHandler = () => {
cursorLeave.value = true;
visible.value = cursorDown.value;
};
vue.onMounted(() => {
on(scrollbar.value, "mousemove", mouseMoveScrollbarHandler);
on(scrollbar.value, "mouseleave", mouseLeaveScrollbarHandler);
});
vue.onBeforeUnmount(() => {
off(document, "mouseup", mouseUpDocumentHandler);
off(scrollbar.value, "mousemove", mouseMoveScrollbarHandler);
off(scrollbar.value, "mouseleave", mouseLeaveScrollbarHandler);
});
return {
instance,
thumb,
bar,
clickTrackHandler,
clickThumbHandler,
thumbStyle,
visible,
};
},
});
function render$1Q(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createBlock(
vue.Transition,
{ name: "el-scrollbar-fade" },
{
default: vue.withCtx(() => [
vue.withDirectives(
vue.createElementVNode(
"div",
{
ref: "instance",
class: vue.normalizeClass([
"el-scrollbar__bar",
"is-" + _ctx.bar.key,
]),
onMousedown:
_cache[1] ||
(_cache[1] = (...args) =>
_ctx.clickTrackHandler &&
_ctx.clickTrackHandler(...args)),
},
[
vue.createElementVNode(
"div",
{
ref: "thumb",
class: "el-scrollbar__thumb",
style: vue.normalizeStyle(_ctx.thumbStyle),
onMousedown:
_cache[0] ||
(_cache[0] = (...args) =>
_ctx.clickThumbHandler &&
_ctx.clickThumbHandler(...args)),
},
null,
36
),
],
34
),
[[vue.vShow, _ctx.always || _ctx.visible]]
),
]),
_: 1,
}
)
);
}
script$1Z.render = render$1Q;
script$1Z.__file = "packages/components/scrollbar/src/bar.vue";
var __pow = Math.pow;
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
var script$1Y = vue.defineComponent({
name: "ElScrollbar",
components: { Bar: script$1Z },
props: {
height: {
type: [String, Number],
default: "",
},
maxHeight: {
type: [String, Number],
default: "",
},
native: {
type: Boolean,
default: false,
},
wrapStyle: {
type: [String, Array],
default: "",
},
wrapClass: {
type: [String, Array],
default: "",
},
viewClass: {
type: [String, Array],
default: "",
},
viewStyle: {
type: [String, Array],
default: "",
},
noresize: Boolean,
tag: {
type: String,
default: "div",
},
always: {
type: Boolean,
default: false,
},
minSize: {
type: Number,
default: 20,
},
},
emits: ["scroll"],
setup(props, { emit }) {
const sizeWidth = vue.ref("0");
const sizeHeight = vue.ref("0");
const moveX = vue.ref(0);
const moveY = vue.ref(0);
const scrollbar = vue.ref(null);
const wrap = vue.ref(null);
const resize = vue.ref(null);
const ratioY = vue.ref(1);
const ratioX = vue.ref(1);
const GAP = 4;
vue.provide("scrollbar", scrollbar);
vue.provide("scrollbar-wrap", wrap);
const handleScroll = () => {
if (wrap.value) {
const offsetHeight = wrap.value.offsetHeight - GAP;
const offsetWidth = wrap.value.offsetWidth - GAP;
moveY.value =
((wrap.value.scrollTop * 100) / offsetHeight) * ratioY.value;
moveX.value =
((wrap.value.scrollLeft * 100) / offsetWidth) * ratioX.value;
emit("scroll", {
scrollTop: wrap.value.scrollTop,
scrollLeft: wrap.value.scrollLeft,
});
}
};
const setScrollTop = (value) => {
if (!isNumber(value)) {
return;
}
wrap.value.scrollTop = value;
};
const setScrollLeft = (value) => {
if (!isNumber(value)) {
return;
}
wrap.value.scrollLeft = value;
};
const update = () => {
if (!wrap.value) return;
const offsetHeight = wrap.value.offsetHeight - GAP;
const offsetWidth = wrap.value.offsetWidth - GAP;
const originalHeight = __pow(offsetHeight, 2) / wrap.value.scrollHeight;
const originalWidth = __pow(offsetWidth, 2) / wrap.value.scrollWidth;
const height = Math.max(originalHeight, props.minSize);
const width = Math.max(originalWidth, props.minSize);
ratioY.value =
originalHeight /
(offsetHeight - originalHeight) /
(height / (offsetHeight - height));
ratioX.value =
originalWidth /
(offsetWidth - originalWidth) /
(width / (offsetWidth - width));
sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : "";
sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : "";
};
const style = vue.computed(() => {
let style2 = props.wrapStyle;
if (isArray$1(style2)) {
style2 = toObject(style2);
style2.height = addUnit(props.height);
style2.maxHeight = addUnit(props.maxHeight);
} else if (isString$1(style2)) {
style2 += addUnit(props.height)
? `height: ${addUnit(props.height)};`
: "";
style2 += addUnit(props.maxHeight)
? `max-height: ${addUnit(props.maxHeight)};`
: "";
}
return style2;
});
vue.onMounted(() => {
if (!props.native) {
vue.nextTick(update);
}
if (!props.noresize) {
addResizeListener(resize.value, update);
addEventListener("resize", update);
}
});
vue.onBeforeUnmount(() => {
if (!props.noresize) {
removeResizeListener(resize.value, update);
removeEventListener("resize", update);
}
});
return {
moveX,
moveY,
ratioX,
ratioY,
sizeWidth,
sizeHeight,
style,
scrollbar,
wrap,
resize,
update,
handleScroll,
setScrollTop,
setScrollLeft,
};
},
});
const _hoisted_1$1n = {
ref: "scrollbar",
class: "el-scrollbar",
};
function render$1P(_ctx, _cache, $props, $setup, $data, $options) {
const _component_bar = vue.resolveComponent("bar");
return (
vue.openBlock(),
vue.createElementBlock(
"div",
_hoisted_1$1n,
[
vue.createElementVNode(
"div",
{
ref: "wrap",
class: vue.normalizeClass([
_ctx.wrapClass,
"el-scrollbar__wrap",
_ctx.native ? "" : "el-scrollbar__wrap--hidden-default",
]),
style: vue.normalizeStyle(_ctx.style),
onScroll:
_cache[0] ||
(_cache[0] = (...args) =>
_ctx.handleScroll && _ctx.handleScroll(...args)),
},
[
(vue.openBlock(),
vue.createBlock(
vue.resolveDynamicComponent(_ctx.tag),
{
ref: "resize",
class: vue.normalizeClass([
"el-scrollbar__view",
_ctx.viewClass,
]),
style: vue.normalizeStyle(_ctx.viewStyle),
},
{
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default"),
]),
_: 3,
},
8,
["class", "style"]
)),
],
38
),
!_ctx.native
? (vue.openBlock(),
vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
vue.createVNode(
_component_bar,
{
move: _ctx.moveX,
ratio: _ctx.ratioX,
size: _ctx.sizeWidth,
always: _ctx.always,
},
null,
8,
["move", "ratio", "size", "always"]
),
vue.createVNode(
_component_bar,
{
move: _ctx.moveY,
ratio: _ctx.ratioY,
size: _ctx.sizeHeight,
vertical: "",
always: _ctx.always,
},
null,
8,
["move", "ratio", "size", "always"]
),
],
64
))
: vue.createCommentVNode("v-if", true),
],
512
)
);
}
script$1Y.render = render$1P;
script$1Y.__file = "packages/components/scrollbar/src/index.vue";
script$1Y.install = (app) => {
app.component(script$1Y.name, script$1Y);
};
const _Scrollbar = script$1Y;
const ElScrollbar = _Scrollbar;
function buildModifier(props, externalModifiers = []) {
const { arrow, arrowOffset, offset, gpuAcceleration, fallbackPlacements } =
props;
const modifiers = [
{
name: "offset",
options: {
offset: [0, offset != null ? offset : 12],
},
},
{
name: "preventOverflow",
options: {
padding: {
top: 2,
bottom: 2,
left: 5,
right: 5,
},
},
},
{
name: "flip",
options: {
padding: 5,
fallbackPlacements:
fallbackPlacements != null ? fallbackPlacements : [],
},
},
{
name: "computeStyles",
options: {
gpuAcceleration,
adaptive: gpuAcceleration,
},
},
];
if (arrow) {
modifiers.push({
name: "arrow",
options: {
element: arrow,
padding: arrowOffset != null ? arrowOffset : 5,
},
});
}
modifiers.push(...externalModifiers);
return modifiers;
}
var __defProp$H = Object.defineProperty;
var __defProps$v = Object.defineProperties;
var __getOwnPropDescs$v = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$H = Object.getOwnPropertySymbols;
var __hasOwnProp$H = Object.prototype.hasOwnProperty;
var __propIsEnum$H = Object.prototype.propertyIsEnumerable;
var __defNormalProp$H = (obj, key, value) =>
key in obj
? __defProp$H(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$H = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$H.call(b, prop)) __defNormalProp$H(a, prop, b[prop]);
if (__getOwnPropSymbols$H)
for (var prop of __getOwnPropSymbols$H(b)) {
if (__propIsEnum$H.call(b, prop)) __defNormalProp$H(a, prop, b[prop]);
}
return a;
};
var __spreadProps$v = (a, b) => __defProps$v(a, __getOwnPropDescs$v(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
function usePopperOptions(props, state) {
return vue.computed(() => {
var _a;
return __spreadProps$v(
__spreadValues$H(
{
placement: props.placement,
},
props.popperOptions
),
{
modifiers: buildModifier(
{
arrow: state.arrow.value,
arrowOffset: props.arrowOffset,
offset: props.offset,
gpuAcceleration: props.gpuAcceleration,
fallbackPlacements: props.fallbackPlacements,
},
(_a = props.popperOptions) == null ? void 0 : _a.modifiers
),
}
);
});
}
exports.Effect = void 0;
(function (Effect2) {
Effect2["DARK"] = "dark";
Effect2["LIGHT"] = "light";
})(exports.Effect || (exports.Effect = {}));
const DEFAULT_FALLBACK_PLACEMENTS = [];
var popperDefaultProps = {
arrowOffset: {
type: Number,
default: 5,
},
appendToBody: {
type: Boolean,
default: true,
},
autoClose: {
type: Number,
default: 0,
},
boundariesPadding: {
type: Number,
default: 0,
},
content: {
type: String,
default: "",
},
class: {
type: String,
default: "",
},
style: Object,
hideAfter: {
type: Number,
default: 200,
},
cutoff: {
type: Boolean,
default: false,
},
disabled: {
type: Boolean,
default: false,
},
effect: {
type: String,
default: exports.Effect.DARK,
},
enterable: {
type: Boolean,
default: true,
},
manualMode: {
type: Boolean,
default: false,
},
showAfter: {
type: Number,
default: 0,
},
offset: {
type: Number,
default: 12,
},
placement: {
type: String,
default: "bottom",
},
popperClass: {
type: String,
default: "",
},
pure: {
type: Boolean,
default: false,
},
popperOptions: {
type: Object,
default: () => null,
},
showArrow: {
type: Boolean,
default: true,
},
strategy: {
type: String,
default: "fixed",
},
transition: {
type: String,
default: "el-fade-in-linear",
},
trigger: {
type: [String, Array],
default: "hover",
},
visible: {
type: Boolean,
default: void 0,
},
stopPopperMouseEvent: {
type: Boolean,
default: true,
},
gpuAcceleration: {
type: Boolean,
default: true,
},
fallbackPlacements: {
type: Array,
default: DEFAULT_FALLBACK_PLACEMENTS,
},
};
const UPDATE_VISIBLE_EVENT$1 = "update:visible";
function usePopper(props, { emit }) {
const arrowRef = vue.ref(null);
const triggerRef = vue.ref(null);
const popperRef = vue.ref(null);
const popperId = `el-popper-${generateId()}`;
let popperInstance = null;
let showTimer = null;
let hideTimer = null;
let triggerFocused = false;
const isManualMode = () => props.manualMode || props.trigger === "manual";
const popperStyle = vue.ref({ zIndex: PopupManager.nextZIndex() });
const popperOptions = usePopperOptions(props, {
arrow: arrowRef,
});
const state = vue.reactive({
visible: !!props.visible,
});
const visibility = vue.computed({
get() {
if (props.disabled) {
return false;
} else {
return isBool(props.visible) ? props.visible : state.visible;
}
},
set(val) {
if (isManualMode()) return;
isBool(props.visible)
? emit(UPDATE_VISIBLE_EVENT$1, val)
: (state.visible = val);
},
});
function _show() {
if (props.autoClose > 0) {
hideTimer = window.setTimeout(() => {
_hide();
}, props.autoClose);
}
visibility.value = true;
}
function _hide() {
visibility.value = false;
}
function clearTimers() {
clearTimeout(showTimer);
clearTimeout(hideTimer);
}
const show = () => {
if (isManualMode() || props.disabled) return;
clearTimers();
if (props.showAfter === 0) {
_show();
} else {
showTimer = window.setTimeout(() => {
_show();
}, props.showAfter);
}
};
const hide = () => {
if (isManualMode()) return;
clearTimers();
if (props.hideAfter > 0) {
hideTimer = window.setTimeout(() => {
close();
}, props.hideAfter);
} else {
close();
}
};
const close = () => {
_hide();
if (props.disabled) {
doDestroy(true);
}
};
function onPopperMouseEnter() {
if (props.enterable && props.trigger !== "click") {
clearTimeout(hideTimer);
}
}
function onPopperMouseLeave() {
const { trigger } = props;
const shouldPrevent =
(isString$1(trigger) && (trigger === "click" || trigger === "focus")) ||
(trigger.length === 1 &&
(trigger[0] === "click" || trigger[0] === "focus"));
if (shouldPrevent) return;
hide();
}
function initializePopper() {
if (!$(visibility)) {
return;
}
const unwrappedTrigger = $(triggerRef);
const _trigger = isHTMLElement$1(unwrappedTrigger)
? unwrappedTrigger
: unwrappedTrigger.$el;
popperInstance = createPopper(_trigger, $(popperRef), $(popperOptions));
popperInstance.update();
}
function doDestroy(forceDestroy) {
if (!popperInstance || ($(visibility) && !forceDestroy)) return;
detachPopper();
}
function detachPopper() {
var _a;
(_a = popperInstance == null ? void 0 : popperInstance.destroy) == null
? void 0
: _a.call(popperInstance);
popperInstance = null;
}
const events = {};
function update() {
if (!$(visibility)) {
return;
}
if (popperInstance) {
popperInstance.update();
} else {
initializePopper();
}
}
function onVisibilityChange(toState) {
if (toState) {
popperStyle.value.zIndex = PopupManager.nextZIndex();
initializePopper();
}
}
if (!isManualMode()) {
const toggleState = () => {
if ($(visibility)) {
hide();
} else {
show();
}
};
const popperEventsHandler = (e) => {
e.stopPropagation();
switch (e.type) {
case "click": {
if (triggerFocused) {
triggerFocused = false;
} else {
toggleState();
}
break;
}
case "mouseenter": {
show();
break;
}
case "mouseleave": {
hide();
break;
}
case "focus": {
triggerFocused = true;
show();
break;
}
case "blur": {
triggerFocused = false;
hide();
break;
}
}
};
const triggerEventsMap = {
click: ["onClick"],
hover: ["onMouseenter", "onMouseleave"],
focus: ["onFocus", "onBlur"],
};
const mapEvents = (t) => {
triggerEventsMap[t].forEach((event) => {
events[event] = popperEventsHandler;
});
};
if (isArray$1(props.trigger)) {
Object.values(props.trigger).forEach(mapEvents);
} else {
mapEvents(props.trigger);
}
}
vue.watch(popperOptions, (val) => {
if (!popperInstance) return;
popperInstance.setOptions(val);
popperInstance.update();
});
vue.watch(visibility, onVisibilityChange);
return {
update,
doDestroy,
show,
hide,
onPopperMouseEnter,
onPopperMouseLeave,
onAfterEnter: () => {
emit("after-enter");
},
onAfterLeave: () => {
detachPopper();
emit("after-leave");
},
onBeforeEnter: () => {
emit("before-enter");
},
onBeforeLeave: () => {
emit("before-leave");
},
initializePopper,
isManualMode,
arrowRef,
events,
popperId,
popperInstance,
popperRef,
popperStyle,
triggerRef,
visibility,
};
}
function renderPopper(props, children) {
const {
effect,
name,
stopPopperMouseEvent,
popperClass,
popperStyle,
popperRef,
pure,
popperId,
visibility,
onMouseenter,
onMouseleave,
onAfterEnter,
onAfterLeave,
onBeforeEnter,
onBeforeLeave,
} = props;
const kls = [
popperClass,
"el-popper",
`is-${effect}`,
pure ? "is-pure" : "",
];
const mouseUpAndDown = stopPopperMouseEvent ? stop : NOOP;
return vue.h(
vue.Transition,
{
name,
onAfterEnter,
onAfterLeave,
onBeforeEnter,
onBeforeLeave,
},
{
default: vue.withCtx(() => [
vue.withDirectives(
vue.h(
"div",
{
"aria-hidden": String(!visibility),
class: kls,
style: popperStyle != null ? popperStyle : {},
id: popperId,
ref: popperRef != null ? popperRef : "popperRef",
role: "tooltip",
onMouseenter,
onMouseleave,
onClick: stop,
onMousedown: mouseUpAndDown,
onMouseup: mouseUpAndDown,
},
children
),
[[vue.vShow, visibility]]
),
]),
}
);
}
function renderTrigger(trigger, extraProps) {
const firstElement = getFirstValidNode(trigger, 1);
if (!firstElement)
throwError("renderTrigger", "trigger expects single rooted node");
return vue.cloneVNode(firstElement, extraProps, true);
}
function renderArrow(showArrow) {
return showArrow
? vue.h(
"div",
{
ref: "arrowRef",
class: "el-popper__arrow",
"data-popper-arrow": "",
},
null
)
: vue.h(vue.Comment, null, "");
}
var __defProp$G = Object.defineProperty;
var __getOwnPropSymbols$G = Object.getOwnPropertySymbols;
var __hasOwnProp$G = Object.prototype.hasOwnProperty;
var __propIsEnum$G = Object.prototype.propertyIsEnumerable;
var __defNormalProp$G = (obj, key, value) =>
key in obj
? __defProp$G(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$G = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$G.call(b, prop)) __defNormalProp$G(a, prop, b[prop]);
if (__getOwnPropSymbols$G)
for (var prop of __getOwnPropSymbols$G(b)) {
if (__propIsEnum$G.call(b, prop)) __defNormalProp$G(a, prop, b[prop]);
}
return a;
};
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
const compName = "ElPopper";
const UPDATE_VISIBLE_EVENT = "update:visible";
var script$1X = vue.defineComponent({
name: compName,
props: popperDefaultProps,
emits: [
UPDATE_VISIBLE_EVENT,
"after-enter",
"after-leave",
"before-enter",
"before-leave",
],
setup(props, ctx) {
if (!ctx.slots.trigger) {
throwError(compName, "Trigger must be provided");
}
const popperStates = usePopper(props, ctx);
const forceDestroy = () => popperStates.doDestroy(true);
vue.onMounted(popperStates.initializePopper);
vue.onBeforeUnmount(forceDestroy);
vue.onActivated(popperStates.initializePopper);
vue.onDeactivated(forceDestroy);
return popperStates;
},
render() {
var _a;
const {
$slots,
appendToBody,
class: kls,
style,
effect,
hide,
onPopperMouseEnter,
onPopperMouseLeave,
onAfterEnter,
onAfterLeave,
onBeforeEnter,
onBeforeLeave,
popperClass,
popperId,
popperStyle,
pure,
showArrow,
transition,
visibility,
stopPopperMouseEvent,
} = this;
const isManual = this.isManualMode();
const arrow = renderArrow(showArrow);
const popper = renderPopper(
{
effect,
name: transition,
popperClass,
popperId,
popperStyle,
pure,
stopPopperMouseEvent,
onMouseenter: onPopperMouseEnter,
onMouseleave: onPopperMouseLeave,
onAfterEnter,
onAfterLeave,
onBeforeEnter,
onBeforeLeave,
visibility,
},
[
vue.renderSlot($slots, "default", {}, () => {
return [vue.toDisplayString(this.content)];
}),
arrow,
]
);
const _t = (_a = $slots.trigger) == null ? void 0 : _a.call($slots);
const triggerProps = __spreadValues$G(
{
"aria-describedby": popperId,
class: kls,
style,
ref: "triggerRef",
},
this.events
);
const trigger = isManual
? renderTrigger(_t, triggerProps)
: vue.withDirectives(renderTrigger(_t, triggerProps), [
[ClickOutside, hide],
]);
return vue.h(vue.Fragment, null, [
trigger,
vue.h(
vue.Teleport,
{
to: "body",
disabled: !appendToBody,
},
[popper]
),
]);
},
});
script$1X.__file = "packages/components/popper/src/index.vue";
script$1X.install = (app) => {
app.component(script$1X.name, script$1X);
};
const _Popper = script$1X;
const ElPopper = _Popper;
var script$1W = vue.defineComponent({
name: "ElAutocomplete",
components: {
ElPopper: _Popper,
ElInput: _Input,
ElScrollbar: _Scrollbar,
},
directives: {
clickoutside: ClickOutside,
},
inheritAttrs: false,
props: {
valueKey: {
type: String,
default: "value",
},
modelValue: {
type: [String, Number],
default: "",
},
debounce: {
type: Number,
default: 300,
},
placement: {
type: String,
validator: (val) => {
return [
"top",
"top-start",
"top-end",
"bottom",
"bottom-start",
"bottom-end",
].includes(val);
},
default: "bottom-start",
},
fetchSuggestions: {
type: Function,
default: NOOP,
},
popperClass: {
type: String,
default: "",
},
triggerOnFocus: {
type: Boolean,
default: true,
},
selectWhenUnmatched: {
type: Boolean,
default: false,
},
hideLoading: {
type: Boolean,
default: false,
},
popperAppendToBody: {
type: Boolean,
default: true,
},
highlightFirstItem: {
type: Boolean,
default: false,
},
},
emits: [
UPDATE_MODEL_EVENT,
"input",
"change",
"focus",
"blur",
"clear",
"select",
],
setup(props, ctx) {
const attrs = useAttrs();
const suggestions = vue.ref([]);
const highlightedIndex = vue.ref(-1);
const dropdownWidth = vue.ref("");
const activated = vue.ref(false);
const suggestionDisabled = vue.ref(false);
const loading = vue.ref(false);
const inputRef = vue.ref(null);
const regionRef = vue.ref(null);
const popper = vue.ref(null);
const id = vue.computed(() => {
return `el-autocomplete-${generateId()}`;
});
const suggestionVisible = vue.computed(() => {
const isValidData =
isArray$1(suggestions.value) && suggestions.value.length > 0;
return (isValidData || loading.value) && activated.value;
});
const suggestionLoading = vue.computed(() => {
return !props.hideLoading && loading.value;
});
const updatePopperPosition = () => {
vue.nextTick(popper.value.update);
};
vue.watch(suggestionVisible, () => {
dropdownWidth.value = `${inputRef.value.$el.offsetWidth}px`;
});
vue.onMounted(() => {
inputRef.value.inputOrTextarea.setAttribute("role", "textbox");
inputRef.value.inputOrTextarea.setAttribute(
"aria-autocomplete",
"list"
);
inputRef.value.inputOrTextarea.setAttribute("aria-controls", "id");
inputRef.value.inputOrTextarea.setAttribute(
"aria-activedescendant",
`${id.value}-item-${highlightedIndex.value}`
);
const $ul = regionRef.value.querySelector(
".el-autocomplete-suggestion__list"
);
$ul.setAttribute("role", "listbox");
$ul.setAttribute("id", id.value);
});
vue.onUpdated(updatePopperPosition);
const getData = (queryString) => {
if (suggestionDisabled.value) {
return;
}
loading.value = true;
updatePopperPosition();
props.fetchSuggestions(queryString, (suggestionsArg) => {
loading.value = false;
if (suggestionDisabled.value) {
return;
}
if (isArray$1(suggestionsArg)) {
suggestions.value = suggestionsArg;
highlightedIndex.value = props.highlightFirstItem ? 0 : -1;
} else {
throwError(
"ElAutocomplete",
"autocomplete suggestions must be an array"
);
}
});
};
const debouncedGetData = debounce_1(getData, props.debounce);
const handleInput = (value) => {
ctx.emit("input", value);
ctx.emit(UPDATE_MODEL_EVENT, value);
suggestionDisabled.value = false;
if (!props.triggerOnFocus && !value) {
suggestionDisabled.value = true;
suggestions.value = [];
return;
}
debouncedGetData(value);
};
const handleChange = (value) => {
ctx.emit("change", value);
};
const handleFocus = (e) => {
activated.value = true;
ctx.emit("focus", e);
if (props.triggerOnFocus) {
debouncedGetData(props.modelValue);
}
};
const handleBlur = (e) => {
ctx.emit("blur", e);
};
const handleClear = () => {
activated.value = false;
ctx.emit(UPDATE_MODEL_EVENT, "");
ctx.emit("clear");
};
const handleKeyEnter = () => {
if (
suggestionVisible.value &&
highlightedIndex.value >= 0 &&
highlightedIndex.value < suggestions.value.length
) {
select(suggestions.value[highlightedIndex.value]);
} else if (props.selectWhenUnmatched) {
ctx.emit("select", { value: props.modelValue });
vue.nextTick(() => {
suggestions.value = [];
highlightedIndex.value = -1;
});
}
};
const close = () => {
activated.value = false;
};
const focus = () => {
inputRef.value.focus();
};
const select = (item) => {
ctx.emit("input", item[props.valueKey]);
ctx.emit(UPDATE_MODEL_EVENT, item[props.valueKey]);
ctx.emit("select", item);
vue.nextTick(() => {
suggestions.value = [];
highlightedIndex.value = -1;
});
};
const highlight = (index) => {
if (!suggestionVisible.value || loading.value) {
return;
}
if (index < 0) {
highlightedIndex.value = -1;
return;
}
if (index >= suggestions.value.length) {
index = suggestions.value.length - 1;
}
const suggestion = regionRef.value.querySelector(
".el-autocomplete-suggestion__wrap"
);
const suggestionList = suggestion.querySelectorAll(
".el-autocomplete-suggestion__list li"
);
const highlightItem = suggestionList[index];
const scrollTop = suggestion.scrollTop;
const { offsetTop, scrollHeight } = highlightItem;
if (offsetTop + scrollHeight > scrollTop + suggestion.clientHeight) {
suggestion.scrollTop += scrollHeight;
}
if (offsetTop < scrollTop) {
suggestion.scrollTop -= scrollHeight;
}
highlightedIndex.value = index;
inputRef.value.inputOrTextarea.setAttribute(
"aria-activedescendant",
`${id.value}-item-${highlightedIndex.value}`
);
};
return {
Effect: exports.Effect,
attrs,
suggestions,
highlightedIndex,
dropdownWidth,
activated,
suggestionDisabled,
loading,
inputRef,
regionRef,
popper,
id,
suggestionVisible,
suggestionLoading,
getData,
handleInput,
handleChange,
handleFocus,
handleBlur,
handleClear,
handleKeyEnter,
close,
focus,
select,
highlight,
};
},
});
const _hoisted_1$1m = ["aria-expanded", "aria-owns"];
const _hoisted_2$$ = { key: 0 };
const _hoisted_3$U = /* @__PURE__ */ vue.createElementVNode(
"i",
{ class: "el-icon-loading" },
null,
-1
);
const _hoisted_4$z = [_hoisted_3$U];
const _hoisted_5$t = ["id", "aria-selected", "onClick"];
function render$1O(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_input = vue.resolveComponent("el-input");
const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
const _component_el_popper = vue.resolveComponent("el-popper");
const _directive_clickoutside = vue.resolveDirective("clickoutside");
return (
vue.openBlock(),
vue.createBlock(
_component_el_popper,
{
ref: "popper",
visible: _ctx.suggestionVisible,
"onUpdate:visible":
_cache[2] ||
(_cache[2] = ($event) => (_ctx.suggestionVisible = $event)),
placement: _ctx.placement,
"popper-class": `el-autocomplete__popper ${_ctx.popperClass}`,
"append-to-body": _ctx.popperAppendToBody,
pure: "",
"manual-mode": "",
effect: _ctx.Effect.LIGHT,
trigger: "click",
transition: "el-zoom-in-top",
"gpu-acceleration": false,
},
{
trigger: vue.withCtx(() => [
vue.withDirectives(
vue.createElementVNode(
"div",
{
class: vue.normalizeClass([
"el-autocomplete",
_ctx.$attrs.class,
]),
style: vue.normalizeStyle(_ctx.$attrs.style),
role: "combobox",
"aria-haspopup": "listbox",
"aria-expanded": _ctx.suggestionVisible,
"aria-owns": _ctx.id,
},
[
vue.createVNode(
_component_el_input,
vue.mergeProps({ ref: "inputRef" }, _ctx.attrs, {
"model-value": _ctx.modelValue,
onInput: _ctx.handleInput,
onChange: _ctx.handleChange,
onFocus: _ctx.handleFocus,
onBlur: _ctx.handleBlur,
onClear: _ctx.handleClear,
onKeydown: [
_cache[0] ||
(_cache[0] = vue.withKeys(
vue.withModifiers(
($event) =>
_ctx.highlight(_ctx.highlightedIndex - 1),
["prevent"]
),
["up"]
)),
_cache[1] ||
(_cache[1] = vue.withKeys(
vue.withModifiers(
($event) =>
_ctx.highlight(_ctx.highlightedIndex + 1),
["prevent"]
),
["down"]
)),
vue.withKeys(_ctx.handleKeyEnter, ["enter"]),
vue.withKeys(_ctx.close, ["tab"]),
],
}),
vue.createSlots({ _: 2 }, [
_ctx.$slots.prepend
? {
name: "prepend",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "prepend"),
]),
}
: void 0,
_ctx.$slots.append
? {
name: "append",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "append"),
]),
}
: void 0,
_ctx.$slots.prefix
? {
name: "prefix",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "prefix"),
]),
}
: void 0,
_ctx.$slots.suffix
? {
name: "suffix",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "suffix"),
]),
}
: void 0,
]),
1040,
[
"model-value",
"onInput",
"onChange",
"onFocus",
"onBlur",
"onClear",
"onKeydown",
]
),
],
14,
_hoisted_1$1m
),
[[_directive_clickoutside, _ctx.close]]
),
]),
default: vue.withCtx(() => [
vue.createElementVNode(
"div",
{
ref: "regionRef",
class: vue.normalizeClass([
"el-autocomplete-suggestion",
_ctx.suggestionLoading && "is-loading",
]),
style: vue.normalizeStyle({
width: _ctx.dropdownWidth,
outline: "none",
}),
role: "region",
},
[
vue.createVNode(
_component_el_scrollbar,
{
tag: "ul",
"wrap-class": "el-autocomplete-suggestion__wrap",
"view-class": "el-autocomplete-suggestion__list",
},
{
default: vue.withCtx(() => [
_ctx.suggestionLoading
? (vue.openBlock(),
vue.createElementBlock(
"li",
_hoisted_2$$,
_hoisted_4$z
))
: (vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
{ key: 1 },
vue.renderList(_ctx.suggestions, (item, index) => {
return (
vue.openBlock(),
vue.createElementBlock(
"li",
{
id: `${_ctx.id}-item-${index}`,
key: index,
class: vue.normalizeClass({
highlighted:
_ctx.highlightedIndex === index,
}),
role: "option",
"aria-selected":
_ctx.highlightedIndex === index,
onClick: ($event) => _ctx.select(item),
},
[
vue.renderSlot(
_ctx.$slots,
"default",
{ item },
() => [
vue.createTextVNode(
vue.toDisplayString(
item[_ctx.valueKey]
),
1
),
]
),
],
10,
_hoisted_5$t
)
);
}),
128
)),
]),
_: 3,
}
),
],
6
),
]),
_: 3,
},
8,
["visible", "placement", "popper-class", "append-to-body", "effect"]
)
);
}
script$1W.render = render$1O;
script$1W.__file = "packages/components/autocomplete/src/index.vue";
script$1W.install = (app) => {
app.component(script$1W.name, script$1W);
};
const _Autocomplete = script$1W;
const ElAutocomplete = _Autocomplete;
const avatarProps = {
size: buildProp({
type: [Number, String],
values: ["large", "medium", "small"],
default: "large",
validator: (val) => typeof val === "number",
}),
shape: buildProp({
type: String,
values: ["circle", "square"],
default: "circle",
}),
icon: String,
src: {
type: String,
default: "",
},
alt: String,
srcSet: String,
fit: buildProp({
type: definePropType(String),
default: "cover",
}),
};
const avatarEmits = {
error: (evt) => evt instanceof Event,
};
var script$1V = vue.defineComponent({
name: "ElAvatar",
props: avatarProps,
emits: avatarEmits,
setup(props, { emit }) {
const hasLoadError = vue.ref(false);
const avatarClass = vue.computed(() => {
const { size, icon, shape } = props;
const classList = ["el-avatar"];
if (size && typeof size === "string")
classList.push(`el-avatar--${size}`);
if (icon) classList.push("el-avatar--icon");
if (shape) classList.push(`el-avatar--${shape}`);
return classList;
});
const sizeStyle = vue.computed(() => {
const { size } = props;
return typeof size === "number"
? {
height: `${size}px`,
width: `${size}px`,
lineHeight: `${size}px`,
}
: {};
});
const fitStyle = vue.computed(() => ({
objectFit: props.fit,
}));
vue.watch(
() => props.src,
() => (hasLoadError.value = false)
);
function handleError(e) {
hasLoadError.value = true;
emit("error", e);
}
return {
hasLoadError,
avatarClass,
sizeStyle,
fitStyle,
handleError,
};
},
});
const _hoisted_1$1l = ["src", "alt", "srcset"];
function render$1N(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"span",
{
class: vue.normalizeClass(_ctx.avatarClass),
style: vue.normalizeStyle(_ctx.sizeStyle),
},
[
(_ctx.src || _ctx.srcSet) && !_ctx.hasLoadError
? (vue.openBlock(),
vue.createElementBlock(
"img",
{
key: 0,
src: _ctx.src,
alt: _ctx.alt,
srcset: _ctx.srcSet,
style: vue.normalizeStyle(_ctx.fitStyle),
onError:
_cache[0] ||
(_cache[0] = (...args) =>
_ctx.handleError && _ctx.handleError(...args)),
},
null,
44,
_hoisted_1$1l
))
: _ctx.icon
? (vue.openBlock(),
vue.createElementBlock(
"i",
{
key: 1,
class: vue.normalizeClass(_ctx.icon),
},
null,
2
))
: vue.renderSlot(_ctx.$slots, "default", { key: 2 }),
],
6
)
);
}
script$1V.render = render$1N;
script$1V.__file = "packages/components/avatar/src/avatar.vue";
const ElAvatar = withInstall(script$1V);
const cubic = (value) => Math.pow(value, 3);
const easeInOutCubic = (value) =>
value < 0.5 ? cubic(value * 2) / 2 : 1 - cubic((1 - value) * 2) / 2;
const backtopProps = {
visibilityHeight: {
type: Number,
default: 200,
},
target: {
type: String,
default: "",
},
right: {
type: Number,
default: 40,
},
bottom: {
type: Number,
default: 40,
},
};
const backtopEmits = {
click: (evt) => evt instanceof MouseEvent,
};
const COMPONENT_NAME$1 = "ElBacktop";
var script$1U = vue.defineComponent({
name: COMPONENT_NAME$1,
props: backtopProps,
emits: backtopEmits,
setup(props, { emit }) {
const el = vue.shallowRef(document.documentElement);
const container = vue.shallowRef(document);
const visible = vue.ref(false);
const styleBottom = vue.computed(() => `${props.bottom}px`);
const styleRight = vue.computed(() => `${props.right}px`);
const scrollToTop = () => {
if (!el.value) return;
const beginTime = Date.now();
const beginValue = el.value.scrollTop;
const frameFunc = () => {
if (!el.value) return;
const progress = (Date.now() - beginTime) / 500;
if (progress < 1) {
el.value.scrollTop = beginValue * (1 - easeInOutCubic(progress));
requestAnimationFrame(frameFunc);
} else {
el.value.scrollTop = 0;
}
};
requestAnimationFrame(frameFunc);
};
const handleScroll = () => {
if (el.value)
visible.value = el.value.scrollTop >= props.visibilityHeight;
};
const handleClick = (event) => {
scrollToTop();
emit("click", event);
};
const handleScrollThrottled = useThrottleFn(handleScroll, 300);
vue.onMounted(() => {
var _a;
if (props.target) {
el.value =
(_a = document.querySelector(props.target)) != null ? _a : void 0;
if (!el.value) {
throwError(
COMPONENT_NAME$1,
`target is not existed: ${props.target}`
);
}
container.value = el.value;
}
useEventListener(container, "scroll", handleScrollThrottled);
});
return {
visible,
styleBottom,
styleRight,
handleClick,
};
},
});
const _hoisted_1$1k = /* @__PURE__ */ vue.createElementVNode(
"i",
{ class: "el-icon-caret-top" },
null,
-1
);
function render$1M(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createBlock(
vue.Transition,
{ name: "el-fade-in" },
{
default: vue.withCtx(() => [
_ctx.visible
? (vue.openBlock(),
vue.createElementBlock(
"div",
{
key: 0,
style: vue.normalizeStyle({
right: _ctx.styleRight,
bottom: _ctx.styleBottom,
}),
class: "el-backtop",
onClick:
_cache[0] ||
(_cache[0] = vue.withModifiers(
(...args) =>
_ctx.handleClick && _ctx.handleClick(...args),
["stop"]
)),
},
[
vue.renderSlot(_ctx.$slots, "default", {}, () => [
_hoisted_1$1k,
]),
],
4
))
: vue.createCommentVNode("v-if", true),
]),
_: 3,
}
)
);
}
script$1U.render = render$1M;
script$1U.__file = "packages/components/backtop/src/backtop.vue";
const ElBacktop = withInstall(script$1U);
const badgeProps = {
value: buildProp({
type: [String, Number],
default: "",
}),
max: {
type: Number,
default: 99,
},
isDot: Boolean,
hidden: Boolean,
type: buildProp({
type: String,
values: ["primary", "success", "warning", "info", "danger"],
default: "danger",
}),
};
var script$1T = vue.defineComponent({
name: "ElBadge",
props: badgeProps,
setup(props) {
const content = vue.computed(() => {
if (props.isDot) return "";
if (typeof props.value === "number" && typeof props.max === "number") {
return props.max < props.value ? `${props.max}+` : `${props.value}`;
}
return `${props.value}`;
});
return {
content,
};
},
});
const _hoisted_1$1j = { class: "el-badge" };
const _hoisted_2$_ = ["textContent"];
function render$1L(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock("div", _hoisted_1$1j, [
vue.renderSlot(_ctx.$slots, "default"),
vue.createVNode(
vue.Transition,
{ name: "el-zoom-in-center" },
{
default: vue.withCtx(() => [
vue.withDirectives(
vue.createElementVNode(
"sup",
{
class: vue.normalizeClass([
"el-badge__content",
[
"el-badge__content--" + _ctx.type,
{
"is-fixed": _ctx.$slots.default,
"is-dot": _ctx.isDot,
},
],
]),
textContent: vue.toDisplayString(_ctx.content),
},
null,
10,
_hoisted_2$_
),
[
[
vue.vShow,
!_ctx.hidden &&
(_ctx.content || _ctx.content === "0" || _ctx.isDot),
],
]
),
]),
_: 1,
}
),
])
);
}
script$1T.render = render$1L;
script$1T.__file = "packages/components/badge/src/badge.vue";
const ElBadge = withInstall(script$1T);
const breadcrumbProps = {
separator: {
type: String,
default: "/",
},
separatorClass: {
type: String,
default: "",
},
};
var script$1S = vue.defineComponent({
name: "ElBreadcrumb",
props: breadcrumbProps,
setup(props) {
const breadcrumb = vue.ref();
vue.provide(elBreadcrumbKey, props);
vue.onMounted(() => {
const items = breadcrumb.value.querySelectorAll(".el-breadcrumb__item");
if (items.length) {
items[items.length - 1].setAttribute("aria-current", "page");
}
});
return {
breadcrumb,
};
},
});
const _hoisted_1$1i = {
ref: "breadcrumb",
class: "el-breadcrumb",
"aria-label": "Breadcrumb",
role: "navigation",
};
function render$1K(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"div",
_hoisted_1$1i,
[vue.renderSlot(_ctx.$slots, "default")],
512
)
);
}
script$1S.render = render$1K;
script$1S.__file = "packages/components/breadcrumb/src/breadcrumb.vue";
const breadcrumbItemProps = {
to: buildProp({
type: definePropType([String, Object]),
default: "",
}),
replace: {
type: Boolean,
default: false,
},
};
const COMPONENT_NAME = "ElBreadcrumbItem";
var script$1R = vue.defineComponent({
name: COMPONENT_NAME,
props: breadcrumbItemProps,
setup(props) {
const instance = vue.getCurrentInstance();
const router = instance.appContext.config.globalProperties.$router;
const parent = vue.inject(elBreadcrumbKey, void 0);
const link = vue.ref();
vue.onMounted(() => {
link.value.setAttribute("role", "link");
link.value.addEventListener("click", () => {
if (!props.to || !router) return;
props.replace ? router.replace(props.to) : router.push(props.to);
});
});
return {
link,
separator: parent == null ? void 0 : parent.separator,
separatorClass: parent == null ? void 0 : parent.separatorClass,
};
},
});
const _hoisted_1$1h = { class: "el-breadcrumb__item" };
const _hoisted_2$Z = {
key: 1,
class: "el-breadcrumb__separator",
role: "presentation",
};
function render$1J(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock("span", _hoisted_1$1h, [
vue.createElementVNode(
"span",
{
ref: "link",
class: vue.normalizeClass([
"el-breadcrumb__inner",
_ctx.to ? "is-link" : "",
]),
role: "link",
},
[vue.renderSlot(_ctx.$slots, "default")],
2
),
_ctx.separatorClass
? (vue.openBlock(),
vue.createElementBlock(
"i",
{
key: 0,
class: vue.normalizeClass([
"el-breadcrumb__separator",
_ctx.separatorClass,
]),
},
null,
2
))
: (vue.openBlock(),
vue.createElementBlock(
"span",
_hoisted_2$Z,
vue.toDisplayString(_ctx.separator),
1
)),
])
);
}
script$1R.render = render$1J;
script$1R.__file = "packages/components/breadcrumb/src/breadcrumb-item.vue";
const ElBreadcrumb = withInstall(script$1S, {
BreadcrumbItem: script$1R,
});
const ElBreadcrumbItem = withNoopInstall(script$1R);
var __defProp$F = Object.defineProperty;
var __defProps$u = Object.defineProperties;
var __getOwnPropDescs$u = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$F = Object.getOwnPropertySymbols;
var __hasOwnProp$F = Object.prototype.hasOwnProperty;
var __propIsEnum$F = Object.prototype.propertyIsEnumerable;
var __defNormalProp$F = (obj, key, value) =>
key in obj
? __defProp$F(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$F = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$F.call(b, prop)) __defNormalProp$F(a, prop, b[prop]);
if (__getOwnPropSymbols$F)
for (var prop of __getOwnPropSymbols$F(b)) {
if (__propIsEnum$F.call(b, prop)) __defNormalProp$F(a, prop, b[prop]);
}
return a;
};
var __spreadProps$u = (a, b) => __defProps$u(a, __getOwnPropDescs$u(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
const buttonType = [
"default",
"primary",
"success",
"warning",
"info",
"danger",
"text",
];
const buttonSize = ["", "large", "medium", "small", "mini"];
const buttonNativeType = ["button", "submit", "reset"];
const buttonProps = __spreadProps$u(__spreadValues$F({}, useFormItemProps), {
type: buildProp({
type: String,
values: buttonType,
default: "default",
}),
icon: {
type: String,
default: "",
},
nativeType: buildProp({
type: String,
values: buttonNativeType,
default: "button",
}),
loading: Boolean,
plain: Boolean,
autofocus: Boolean,
round: Boolean,
circle: Boolean,
});
const buttonEmits = {
click: (evt) => evt instanceof MouseEvent,
};
var script$1Q = vue.defineComponent({
name: "ElButton",
props: buttonProps,
emits: buttonEmits,
setup(props, { emit }) {
const elBtnGroup = vue.inject(elButtonGroupKey, void 0);
const { size: buttonSize, disabled: buttonDisabled } = useFormItem({
size: vue.computed(() =>
elBtnGroup == null ? void 0 : elBtnGroup.size
),
});
const elForm = vue.inject(elFormKey, void 0);
const handleClick = (evt) => {
if (props.nativeType === "reset") {
elForm == null ? void 0 : elForm.resetFields();
}
emit("click", evt);
};
return {
buttonSize,
buttonDisabled,
handleClick,
};
},
});
const _hoisted_1$1g = ["disabled", "autofocus", "type"];
const _hoisted_2$Y = {
key: 0,
class: "el-icon-loading",
};
const _hoisted_3$T = { key: 2 };
function render$1I(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"button",
{
class: vue.normalizeClass([
"el-button",
_ctx.type ? "el-button--" + _ctx.type : "",
_ctx.buttonSize ? "el-button--" + _ctx.buttonSize : "",
{
"is-disabled": _ctx.buttonDisabled,
"is-loading": _ctx.loading,
"is-plain": _ctx.plain,
"is-round": _ctx.round,
"is-circle": _ctx.circle,
},
]),
disabled: _ctx.buttonDisabled || _ctx.loading,
autofocus: _ctx.autofocus,
type: _ctx.nativeType,
onClick:
_cache[0] ||
(_cache[0] = (...args) =>
_ctx.handleClick && _ctx.handleClick(...args)),
},
[
_ctx.loading
? (vue.openBlock(), vue.createElementBlock("i", _hoisted_2$Y))
: vue.createCommentVNode("v-if", true),
_ctx.icon && !_ctx.loading
? (vue.openBlock(),
vue.createElementBlock(
"i",
{
key: 1,
class: vue.normalizeClass(_ctx.icon),
},
null,
2
))
: vue.createCommentVNode("v-if", true),
_ctx.$slots.default
? (vue.openBlock(),
vue.createElementBlock("span", _hoisted_3$T, [
vue.renderSlot(_ctx.$slots, "default"),
]))
: vue.createCommentVNode("v-if", true),
],
10,
_hoisted_1$1g
)
);
}
script$1Q.render = render$1I;
script$1Q.__file = "packages/components/button/src/button.vue";
var script$1P = vue.defineComponent({
name: "ElButtonGroup",
props: {
size: {
type: String,
validator: isValidComponentSize,
},
},
setup(props) {
vue.provide(
elButtonGroupKey,
vue.reactive({
size: vue.toRef(props, "size"),
})
);
},
});
const _hoisted_1$1f = { class: "el-button-group" };
function render$1H(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock("div", _hoisted_1$1f, [
vue.renderSlot(_ctx.$slots, "default"),
])
);
}
script$1P.render = render$1H;
script$1P.__file = "packages/components/button/src/button-group.vue";
const ElButton = withInstall(script$1Q, {
ButtonGroup: script$1P,
});
const ElButtonGroup$2 = withNoopInstall(script$1P);
var dayjs_min = createCommonjsModule(function (module, exports) {
!(function (t, e) {
module.exports = e();
})(commonjsGlobal, function () {
var t = 1e3,
e = 6e4,
n = 36e5,
r = "millisecond",
i = "second",
s = "minute",
u = "hour",
a = "day",
o = "week",
f = "month",
h = "quarter",
c = "year",
d = "date",
$ = "Invalid Date",
l =
/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,
y =
/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,
M = {
name: "en",
weekdays:
"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split(
"_"
),
months:
"January_February_March_April_May_June_July_August_September_October_November_December".split(
"_"
),
},
m = function (t, e, n) {
var r = String(t);
return !r || r.length >= e
? t
: "" + Array(e + 1 - r.length).join(n) + t;
},
g = {
s: m,
z: function (t) {
var e = -t.utcOffset(),
n = Math.abs(e),
r = Math.floor(n / 60),
i = n % 60;
return (e <= 0 ? "+" : "-") + m(r, 2, "0") + ":" + m(i, 2, "0");
},
m: function t(e, n) {
if (e.date() < n.date()) return -t(n, e);
var r = 12 * (n.year() - e.year()) + (n.month() - e.month()),
i = e.clone().add(r, f),
s = n - i < 0,
u = e.clone().add(r + (s ? -1 : 1), f);
return +(-(r + (n - i) / (s ? i - u : u - i)) || 0);
},
a: function (t) {
return t < 0 ? Math.ceil(t) || 0 : Math.floor(t);
},
p: function (t) {
return (
{ M: f, y: c, w: o, d: a, D: d, h: u, m: s, s: i, ms: r, Q: h }[
t
] ||
String(t || "")
.toLowerCase()
.replace(/s$/, "")
);
},
u: function (t) {
return void 0 === t;
},
},
D = "en",
v = {};
v[D] = M;
var p = function (t) {
return t instanceof _;
},
S = function (t, e, n) {
var r;
if (!t) return D;
if ("string" == typeof t) v[t] && (r = t), e && ((v[t] = e), (r = t));
else {
var i = t.name;
(v[i] = t), (r = i);
}
return !n && r && (D = r), r || (!n && D);
},
w = function (t, e) {
if (p(t)) return t.clone();
var n = "object" == typeof e ? e : {};
return (n.date = t), (n.args = arguments), new _(n);
},
O = g;
(O.l = S),
(O.i = p),
(O.w = function (t, e) {
return w(t, { locale: e.$L, utc: e.$u, x: e.$x, $offset: e.$offset });
});
var _ = (function () {
function M(t) {
(this.$L = S(t.locale, null, !0)), this.parse(t);
}
var m = M.prototype;
return (
(m.parse = function (t) {
(this.$d = (function (t) {
var e = t.date,
n = t.utc;
if (null === e) return new Date(NaN);
if (O.u(e)) return new Date();
if (e instanceof Date) return new Date(e);
if ("string" == typeof e && !/Z$/i.test(e)) {
var r = e.match(l);
if (r) {
var i = r[2] - 1 || 0,
s = (r[7] || "0").substring(0, 3);
return n
? new Date(
Date.UTC(
r[1],
i,
r[3] || 1,
r[4] || 0,
r[5] || 0,
r[6] || 0,
s
)
)
: new Date(
r[1],
i,
r[3] || 1,
r[4] || 0,
r[5] || 0,
r[6] || 0,
s
);
}
}
return new Date(e);
})(t)),
(this.$x = t.x || {}),
this.init();
}),
(m.init = function () {
var t = this.$d;
(this.$y = t.getFullYear()),
(this.$M = t.getMonth()),
(this.$D = t.getDate()),
(this.$W = t.getDay()),
(this.$H = t.getHours()),
(this.$m = t.getMinutes()),
(this.$s = t.getSeconds()),
(this.$ms = t.getMilliseconds());
}),
(m.$utils = function () {
return O;
}),
(m.isValid = function () {
return !(this.$d.toString() === $);
}),
(m.isSame = function (t, e) {
var n = w(t);
return this.startOf(e) <= n && n <= this.endOf(e);
}),
(m.isAfter = function (t, e) {
return w(t) < this.startOf(e);
}),
(m.isBefore = function (t, e) {
return this.endOf(e) < w(t);
}),
(m.$g = function (t, e, n) {
return O.u(t) ? this[e] : this.set(n, t);
}),
(m.unix = function () {
return Math.floor(this.valueOf() / 1e3);
}),
(m.valueOf = function () {
return this.$d.getTime();
}),
(m.startOf = function (t, e) {
var n = this,
r = !!O.u(e) || e,
h = O.p(t),
$ = function (t, e) {
var i = O.w(
n.$u ? Date.UTC(n.$y, e, t) : new Date(n.$y, e, t),
n
);
return r ? i : i.endOf(a);
},
l = function (t, e) {
return O.w(
n
.toDate()
[t].apply(
n.toDate("s"),
(r ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(e)
),
n
);
},
y = this.$W,
M = this.$M,
m = this.$D,
g = "set" + (this.$u ? "UTC" : "");
switch (h) {
case c:
return r ? $(1, 0) : $(31, 11);
case f:
return r ? $(1, M) : $(0, M + 1);
case o:
var D = this.$locale().weekStart || 0,
v = (y < D ? y + 7 : y) - D;
return $(r ? m - v : m + (6 - v), M);
case a:
case d:
return l(g + "Hours", 0);
case u:
return l(g + "Minutes", 1);
case s:
return l(g + "Seconds", 2);
case i:
return l(g + "Milliseconds", 3);
default:
return this.clone();
}
}),
(m.endOf = function (t) {
return this.startOf(t, !1);
}),
(m.$set = function (t, e) {
var n,
o = O.p(t),
h = "set" + (this.$u ? "UTC" : ""),
$ = ((n = {}),
(n[a] = h + "Date"),
(n[d] = h + "Date"),
(n[f] = h + "Month"),
(n[c] = h + "FullYear"),
(n[u] = h + "Hours"),
(n[s] = h + "Minutes"),
(n[i] = h + "Seconds"),
(n[r] = h + "Milliseconds"),
n)[o],
l = o === a ? this.$D + (e - this.$W) : e;
if (o === f || o === c) {
var y = this.clone().set(d, 1);
y.$d[$](l),
y.init(),
(this.$d = y.set(d, Math.min(this.$D, y.daysInMonth())).$d);
} else $ && this.$d[$](l);
return this.init(), this;
}),
(m.set = function (t, e) {
return this.clone().$set(t, e);
}),
(m.get = function (t) {
return this[O.p(t)]();
}),
(m.add = function (r, h) {
var d,
$ = this;
r = Number(r);
var l = O.p(h),
y = function (t) {
var e = w($);
return O.w(e.date(e.date() + Math.round(t * r)), $);
};
if (l === f) return this.set(f, this.$M + r);
if (l === c) return this.set(c, this.$y + r);
if (l === a) return y(1);
if (l === o) return y(7);
var M = ((d = {}), (d[s] = e), (d[u] = n), (d[i] = t), d)[l] || 1,
m = this.$d.getTime() + r * M;
return O.w(m, this);
}),
(m.subtract = function (t, e) {
return this.add(-1 * t, e);
}),
(m.format = function (t) {
var e = this,
n = this.$locale();
if (!this.isValid()) return n.invalidDate || $;
var r = t || "YYYY-MM-DDTHH:mm:ssZ",
i = O.z(this),
s = this.$H,
u = this.$m,
a = this.$M,
o = n.weekdays,
f = n.months,
h = function (t, n, i, s) {
return (t && (t[n] || t(e, r))) || i[n].substr(0, s);
},
c = function (t) {
return O.s(s % 12 || 12, t, "0");
},
d =
n.meridiem ||
function (t, e, n) {
var r = t < 12 ? "AM" : "PM";
return n ? r.toLowerCase() : r;
},
l = {
YY: String(this.$y).slice(-2),
YYYY: this.$y,
M: a + 1,
MM: O.s(a + 1, 2, "0"),
MMM: h(n.monthsShort, a, f, 3),
MMMM: h(f, a),
D: this.$D,
DD: O.s(this.$D, 2, "0"),
d: String(this.$W),
dd: h(n.weekdaysMin, this.$W, o, 2),
ddd: h(n.weekdaysShort, this.$W, o, 3),
dddd: o[this.$W],
H: String(s),
HH: O.s(s, 2, "0"),
h: c(1),
hh: c(2),
a: d(s, u, !0),
A: d(s, u, !1),
m: String(u),
mm: O.s(u, 2, "0"),
s: String(this.$s),
ss: O.s(this.$s, 2, "0"),
SSS: O.s(this.$ms, 3, "0"),
Z: i,
};
return r.replace(y, function (t, e) {
return e || l[t] || i.replace(":", "");
});
}),
(m.utcOffset = function () {
return 15 * -Math.round(this.$d.getTimezoneOffset() / 15);
}),
(m.diff = function (r, d, $) {
var l,
y = O.p(d),
M = w(r),
m = (M.utcOffset() - this.utcOffset()) * e,
g = this - M,
D = O.m(this, M);
return (
(D =
((l = {}),
(l[c] = D / 12),
(l[f] = D),
(l[h] = D / 3),
(l[o] = (g - m) / 6048e5),
(l[a] = (g - m) / 864e5),
(l[u] = g / n),
(l[s] = g / e),
(l[i] = g / t),
l)[y] || g),
$ ? D : O.a(D)
);
}),
(m.daysInMonth = function () {
return this.endOf(f).$D;
}),
(m.$locale = function () {
return v[this.$L];
}),
(m.locale = function (t, e) {
if (!t) return this.$L;
var n = this.clone(),
r = S(t, e, !0);
return r && (n.$L = r), n;
}),
(m.clone = function () {
return O.w(this.$d, this);
}),
(m.toDate = function () {
return new Date(this.valueOf());
}),
(m.toJSON = function () {
return this.isValid() ? this.toISOString() : null;
}),
(m.toISOString = function () {
return this.$d.toISOString();
}),
(m.toString = function () {
return this.$d.toUTCString();
}),
M
);
})(),
b = _.prototype;
return (
(w.prototype = b),
[
["$ms", r],
["$s", i],
["$m", s],
["$H", u],
["$W", a],
["$M", f],
["$y", c],
["$D", d],
].forEach(function (t) {
b[t[1]] = function (e) {
return this.$g(e, t[0], t[1]);
};
}),
(w.extend = function (t, e) {
return t.$i || (t(e, _, w), (t.$i = !0)), w;
}),
(w.locale = S),
(w.isDayjs = p),
(w.unix = function (t) {
return w(1e3 * t);
}),
(w.en = v[D]),
(w.Ls = v),
(w.p = {}),
w
);
});
});
var localeData = createCommonjsModule(function (module, exports) {
!(function (n, e) {
module.exports = e();
})(commonjsGlobal, function () {
return function (n, e, t) {
var r = e.prototype,
o = function (n) {
return n && (n.indexOf ? n : n.s);
},
u = function (n, e, t, r, u) {
var i = n.name ? n : n.$locale(),
a = o(i[e]),
s = o(i[t]),
f =
a ||
s.map(function (n) {
return n.substr(0, r);
});
if (!u) return f;
var d = i.weekStart;
return f.map(function (n, e) {
return f[(e + (d || 0)) % 7];
});
},
i = function () {
return t.Ls[t.locale()];
},
a = function (n, e) {
return (
n.formats[e] ||
(function (n) {
return n.replace(
/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g,
function (n, e, t) {
return e || t.slice(1);
}
);
})(n.formats[e.toUpperCase()])
);
},
s = function () {
var n = this;
return {
months: function (e) {
return e ? e.format("MMMM") : u(n, "months");
},
monthsShort: function (e) {
return e ? e.format("MMM") : u(n, "monthsShort", "months", 3);
},
firstDayOfWeek: function () {
return n.$locale().weekStart || 0;
},
weekdays: function (e) {
return e ? e.format("dddd") : u(n, "weekdays");
},
weekdaysMin: function (e) {
return e ? e.format("dd") : u(n, "weekdaysMin", "weekdays", 2);
},
weekdaysShort: function (e) {
return e
? e.format("ddd")
: u(n, "weekdaysShort", "weekdays", 3);
},
longDateFormat: function (e) {
return a(n.$locale(), e);
},
meridiem: this.$locale().meridiem,
ordinal: this.$locale().ordinal,
};
};
(r.localeData = function () {
return s.bind(this)();
}),
(t.localeData = function () {
var n = i();
return {
firstDayOfWeek: function () {
return n.weekStart || 0;
},
weekdays: function () {
return t.weekdays();
},
weekdaysShort: function () {
return t.weekdaysShort();
},
weekdaysMin: function () {
return t.weekdaysMin();
},
months: function () {
return t.months();
},
monthsShort: function () {
return t.monthsShort();
},
longDateFormat: function (e) {
return a(n, e);
},
meridiem: n.meridiem,
ordinal: n.ordinal,
};
}),
(t.months = function () {
return u(i(), "months");
}),
(t.monthsShort = function () {
return u(i(), "monthsShort", "months", 3);
}),
(t.weekdays = function (n) {
return u(i(), "weekdays", null, null, n);
}),
(t.weekdaysShort = function (n) {
return u(i(), "weekdaysShort", "weekdays", 3, n);
}),
(t.weekdaysMin = function (n) {
return u(i(), "weekdaysMin", "weekdays", 2, n);
});
};
});
});
var customParseFormat = createCommonjsModule(function (module, exports) {
!(function (t, e) {
module.exports = e();
})(commonjsGlobal, function () {
var t = {
LTS: "h:mm:ss A",
LT: "h:mm A",
L: "MM/DD/YYYY",
LL: "MMMM D, YYYY",
LLL: "MMMM D, YYYY h:mm A",
LLLL: "dddd, MMMM D, YYYY h:mm A",
},
e =
/(\[[^[]*\])|([-:/.()\s]+)|(A|a|YYYY|YY?|MM?M?M?|Do|DD?|hh?|HH?|mm?|ss?|S{1,3}|z|ZZ?)/g,
n = /\d\d/,
r = /\d\d?/,
i = /\d*[^\s\d-_:/()]+/,
o = {},
s = function (t) {
return (t = +t) + (t > 68 ? 1900 : 2e3);
};
var a = function (t) {
return function (e) {
this[t] = +e;
};
},
f = [
/[+-]\d\d:?(\d\d)?|Z/,
function (t) {
(this.zone || (this.zone = {})).offset = (function (t) {
if (!t) return 0;
if ("Z" === t) return 0;
var e = t.match(/([+-]|\d\d)/g),
n = 60 * e[1] + (+e[2] || 0);
return 0 === n ? 0 : "+" === e[0] ? -n : n;
})(t);
},
],
u = function (t) {
var e = o[t];
return e && (e.indexOf ? e : e.s.concat(e.f));
},
h = function (t, e) {
var n,
r = o.meridiem;
if (r) {
for (var i = 1; i <= 24; i += 1)
if (t.indexOf(r(i, 0, e)) > -1) {
n = i > 12;
break;
}
} else n = t === (e ? "pm" : "PM");
return n;
},
d = {
A: [
i,
function (t) {
this.afternoon = h(t, !1);
},
],
a: [
i,
function (t) {
this.afternoon = h(t, !0);
},
],
S: [
/\d/,
function (t) {
this.milliseconds = 100 * +t;
},
],
SS: [
n,
function (t) {
this.milliseconds = 10 * +t;
},
],
SSS: [
/\d{3}/,
function (t) {
this.milliseconds = +t;
},
],
s: [r, a("seconds")],
ss: [r, a("seconds")],
m: [r, a("minutes")],
mm: [r, a("minutes")],
H: [r, a("hours")],
h: [r, a("hours")],
HH: [r, a("hours")],
hh: [r, a("hours")],
D: [r, a("day")],
DD: [n, a("day")],
Do: [
i,
function (t) {
var e = o.ordinal,
n = t.match(/\d+/);
if (((this.day = n[0]), e))
for (var r = 1; r <= 31; r += 1)
e(r).replace(/\[|\]/g, "") === t && (this.day = r);
},
],
M: [r, a("month")],
MM: [n, a("month")],
MMM: [
i,
function (t) {
var e = u("months"),
n =
(
u("monthsShort") ||
e.map(function (t) {
return t.substr(0, 3);
})
).indexOf(t) + 1;
if (n < 1) throw new Error();
this.month = n % 12 || n;
},
],
MMMM: [
i,
function (t) {
var e = u("months").indexOf(t) + 1;
if (e < 1) throw new Error();
this.month = e % 12 || e;
},
],
Y: [/[+-]?\d+/, a("year")],
YY: [
n,
function (t) {
this.year = s(t);
},
],
YYYY: [/\d{4}/, a("year")],
Z: f,
ZZ: f,
};
function c(n) {
var r, i;
(r = n), (i = o && o.formats);
for (
var s = (n = r.replace(
/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g,
function (e, n, r) {
var o = r && r.toUpperCase();
return (
n ||
i[r] ||
t[r] ||
i[o].replace(
/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g,
function (t, e, n) {
return e || n.slice(1);
}
)
);
}
)).match(e),
a = s.length,
f = 0;
f < a;
f += 1
) {
var u = s[f],
h = d[u],
c = h && h[0],
l = h && h[1];
s[f] = l ? { regex: c, parser: l } : u.replace(/^\[|\]$/g, "");
}
return function (t) {
for (var e = {}, n = 0, r = 0; n < a; n += 1) {
var i = s[n];
if ("string" == typeof i) r += i.length;
else {
var o = i.regex,
f = i.parser,
u = t.substr(r),
h = o.exec(u)[0];
f.call(e, h), (t = t.replace(h, ""));
}
}
return (
(function (t) {
var e = t.afternoon;
if (void 0 !== e) {
var n = t.hours;
e ? n < 12 && (t.hours += 12) : 12 === n && (t.hours = 0),
delete t.afternoon;
}
})(e),
e
);
};
}
return function (t, e, n) {
(n.p.customParseFormat = !0),
t && t.parseTwoDigitYear && (s = t.parseTwoDigitYear);
var r = e.prototype,
i = r.parse;
r.parse = function (t) {
var e = t.date,
r = t.utc,
s = t.args;
this.$u = r;
var a = s[1];
if ("string" == typeof a) {
var f = !0 === s[2],
u = !0 === s[3],
h = f || u,
d = s[2];
u && (d = s[2]),
(o = this.$locale()),
!f && d && (o = n.Ls[d]),
(this.$d = (function (t, e, n) {
try {
if (["x", "X"].indexOf(e) > -1)
return new Date(("X" === e ? 1e3 : 1) * t);
var r = c(e)(t),
i = r.year,
o = r.month,
s = r.day,
a = r.hours,
f = r.minutes,
u = r.seconds,
h = r.milliseconds,
d = r.zone,
l = new Date(),
m = s || (i || o ? 1 : l.getDate()),
M = i || l.getFullYear(),
Y = 0;
(i && !o) || (Y = o > 0 ? o - 1 : l.getMonth());
var p = a || 0,
v = f || 0,
D = u || 0,
g = h || 0;
return d
? new Date(
Date.UTC(M, Y, m, p, v, D, g + 60 * d.offset * 1e3)
)
: n
? new Date(Date.UTC(M, Y, m, p, v, D, g))
: new Date(M, Y, m, p, v, D, g);
} catch (t) {
return new Date("");
}
})(e, a, r)),
this.init(),
d && !0 !== d && (this.$L = this.locale(d).$L),
h && e != this.format(a) && (this.$d = new Date("")),
(o = {});
} else if (a instanceof Array)
for (var l = a.length, m = 1; m <= l; m += 1) {
s[1] = a[m - 1];
var M = n.apply(this, s);
if (M.isValid()) {
(this.$d = M.$d), (this.$L = M.$L), this.init();
break;
}
m === l && (this.$d = new Date(""));
}
else i.call(this, t);
};
};
});
});
const DEFAULT_FORMATS_TIME = "HH:mm:ss";
const DEFAULT_FORMATS_DATE = "YYYY-MM-DD";
const DEFAULT_FORMATS_DATEPICKER = {
date: DEFAULT_FORMATS_DATE,
week: "gggg[w]ww",
year: "YYYY",
month: "YYYY-MM",
datetime: `${DEFAULT_FORMATS_DATE} ${DEFAULT_FORMATS_TIME}`,
monthrange: "YYYY-MM",
daterange: DEFAULT_FORMATS_DATE,
datetimerange: `${DEFAULT_FORMATS_DATE} ${DEFAULT_FORMATS_TIME}`,
};
/**
* Performs a deep comparison between two values to determine if they are
* equivalent.
*
* **Note:** This method supports comparing arrays, array buffers, booleans,
* date objects, error objects, maps, numbers, `Object` objects, regexes,
* sets, strings, symbols, and typed arrays. `Object` objects are compared
* by their own, not inherited, enumerable properties. Functions and DOM
* nodes are compared by strict equality, i.e. `===`.
*
* @static
* @memberOf _
* @since 0.1.0
* @category Lang
* @param {*} value The value to compare.
* @param {*} other The other value to compare.
* @returns {boolean} Returns `true` if the values are equivalent, else `false`.
* @example
*
* var object = { 'a': 1 };
* var other = { 'a': 1 };
*
* _.isEqual(object, other);
* // => true
*
* object === other;
* // => false
*/
function isEqual$1(value, other) {
return _baseIsEqual(value, other);
}
var isEqual_1 = isEqual$1;
var isEqual$2 = isEqual_1;
const timePickerDefaultProps = {
name: {
type: [Array, String],
default: "",
},
popperClass: {
type: String,
default: "",
},
format: {
type: String,
},
valueFormat: {
type: String,
},
type: {
type: String,
default: "",
},
clearable: {
type: Boolean,
default: true,
},
clearIcon: {
type: String,
default: "el-icon-circle-close",
},
editable: {
type: Boolean,
default: true,
},
prefixIcon: {
type: String,
default: "",
},
size: {
type: String,
validator: isValidComponentSize,
},
readonly: {
type: Boolean,
default: false,
},
disabled: {
type: Boolean,
default: false,
},
placeholder: {
type: String,
default: "",
},
popperOptions: {
type: Object,
default: () => ({}),
},
modelValue: {
type: [Date, Array, String],
default: "",
},
rangeSeparator: {
type: String,
default: "-",
},
startPlaceholder: String,
endPlaceholder: String,
defaultValue: {
type: [Date, Array],
},
defaultTime: {
type: [Date, Array],
},
isRange: {
type: Boolean,
default: false,
},
disabledHours: {
type: Function,
},
disabledMinutes: {
type: Function,
},
disabledSeconds: {
type: Function,
},
disabledDate: {
type: Function,
},
cellClassName: {
type: Function,
},
shortcuts: {
type: Array,
default: () => [],
},
arrowControl: {
type: Boolean,
default: false,
},
validateEvent: {
type: Boolean,
default: true,
},
unlinkPanels: Boolean,
};
const dateEquals = function (a, b) {
const aIsDate = a instanceof Date;
const bIsDate = b instanceof Date;
if (aIsDate && bIsDate) {
return a.getTime() === b.getTime();
}
if (!aIsDate && !bIsDate) {
return a === b;
}
return false;
};
const valueEquals = function (a, b) {
const aIsArray = a instanceof Array;
const bIsArray = b instanceof Array;
if (aIsArray && bIsArray) {
if (a.length !== b.length) {
return false;
}
return a.every((item, index) => dateEquals(item, b[index]));
}
if (!aIsArray && !bIsArray) {
return dateEquals(a, b);
}
return false;
};
const parser = function (date, format, lang) {
const day = isEmpty(format)
? dayjs_min(date).locale(lang)
: dayjs_min(date, format).locale(lang);
return day.isValid() ? day : void 0;
};
const formatter = function (date, format, lang) {
return isEmpty(format) ? date : dayjs_min(date).locale(lang).format(format);
};
var script$1O = vue.defineComponent({
name: "Picker",
components: {
ElInput: _Input,
ElPopper: _Popper,
},
directives: { clickoutside: ClickOutside },
props: timePickerDefaultProps,
emits: ["update:modelValue", "change", "focus", "blur", "calendar-change"],
setup(props, ctx) {
const ELEMENT = useGlobalConfig();
const { lang } = useLocaleInject();
const elForm = vue.inject(elFormKey, {});
const elFormItem = vue.inject(elFormItemKey, {});
const elPopperOptions = vue.inject("ElPopperOptions", {});
const refPopper = vue.ref(null);
const pickerVisible = vue.ref(false);
const pickerActualVisible = vue.ref(false);
const valueOnOpen = vue.ref(null);
vue.watch(pickerVisible, (val) => {
var _a;
if (!val) {
userInput.value = null;
vue.nextTick(() => {
emitChange(props.modelValue);
});
ctx.emit("blur");
blurInput();
props.validateEvent &&
((_a = elFormItem.validate) == null
? void 0
: _a.call(elFormItem, "blur"));
} else {
valueOnOpen.value = props.modelValue;
}
});
const emitChange = (val, isClear) => {
var _a;
if (isClear || !valueEquals(val, valueOnOpen.value)) {
ctx.emit("change", val);
props.validateEvent &&
((_a = elFormItem.validate) == null
? void 0
: _a.call(elFormItem, "change", val));
}
};
const emitInput = (val) => {
if (!valueEquals(props.modelValue, val)) {
let formatValue;
if (Array.isArray(val)) {
formatValue = val.map((_) =>
formatter(_, props.valueFormat, lang.value)
);
} else if (val) {
formatValue = formatter(val, props.valueFormat, lang.value);
}
ctx.emit("update:modelValue", val ? formatValue : val, lang.value);
}
};
const refInput = vue.computed(() => {
if (refPopper.value.triggerRef) {
const _r = isRangeInput.value
? refPopper.value.triggerRef
: refPopper.value.triggerRef.$el;
return [].slice.call(_r.querySelectorAll("input"));
}
return [];
});
const setSelectionRange = (start, end, pos) => {
const _inputs = refInput.value;
if (!_inputs.length) return;
if (!pos || pos === "min") {
_inputs[0].setSelectionRange(start, end);
_inputs[0].focus();
} else if (pos === "max") {
_inputs[1].setSelectionRange(start, end);
_inputs[1].focus();
}
};
const onPick = (date = "", visible = false) => {
pickerVisible.value = visible;
let result;
if (Array.isArray(date)) {
result = date.map((_) => _.toDate());
} else {
result = date ? date.toDate() : date;
}
userInput.value = null;
emitInput(result);
};
const handleFocus = (e) => {
if (props.readonly || pickerDisabled.value || pickerVisible.value)
return;
pickerVisible.value = true;
ctx.emit("focus", e);
};
const handleBlur = () => {
pickerVisible.value = false;
blurInput();
};
const pickerDisabled = vue.computed(() => {
return props.disabled || elForm.disabled;
});
const parsedValue = vue.computed(() => {
let result;
if (valueIsEmpty.value) {
if (pickerOptions.value.getDefaultValue) {
result = pickerOptions.value.getDefaultValue();
}
} else {
if (Array.isArray(props.modelValue)) {
result = props.modelValue.map((_) =>
parser(_, props.valueFormat, lang.value)
);
} else {
result = parser(props.modelValue, props.valueFormat, lang.value);
}
}
if (pickerOptions.value.getRangeAvailableTime) {
const availableResult =
pickerOptions.value.getRangeAvailableTime(result);
if (!isEqual$2(availableResult, result)) {
result = availableResult;
emitInput(
Array.isArray(result)
? result.map((_) => _.toDate())
: result.toDate()
);
}
}
if (Array.isArray(result) && result.some((_) => !_)) {
result = [];
}
return result;
});
const displayValue = vue.computed(() => {
if (!pickerOptions.value.panelReady) return;
const formattedValue = formatDayjsToString(parsedValue.value);
if (Array.isArray(userInput.value)) {
return [
userInput.value[0] || (formattedValue && formattedValue[0]) || "",
userInput.value[1] || (formattedValue && formattedValue[1]) || "",
];
} else if (userInput.value !== null) {
return userInput.value;
}
if (!isTimePicker.value && valueIsEmpty.value) return;
if (!pickerVisible.value && valueIsEmpty.value) return;
if (formattedValue) {
return isDatesPicker.value
? formattedValue.join(", ")
: formattedValue;
}
return "";
});
const isTimeLikePicker = vue.computed(() => props.type.includes("time"));
const isTimePicker = vue.computed(() => props.type.startsWith("time"));
const isDatesPicker = vue.computed(() => props.type === "dates");
const triggerClass = vue.computed(
() =>
props.prefixIcon ||
(isTimeLikePicker.value ? "el-icon-time" : "el-icon-date")
);
const showClose = vue.ref(false);
const onClearIconClick = (event) => {
if (props.readonly || pickerDisabled.value) return;
if (showClose.value) {
event.stopPropagation();
emitInput(null);
emitChange(null, true);
showClose.value = false;
pickerVisible.value = false;
pickerOptions.value.handleClear && pickerOptions.value.handleClear();
}
};
const valueIsEmpty = vue.computed(() => {
return (
!props.modelValue ||
(Array.isArray(props.modelValue) && !props.modelValue.length)
);
});
const onMouseEnter = () => {
if (props.readonly || pickerDisabled.value) return;
if (!valueIsEmpty.value && props.clearable) {
showClose.value = true;
}
};
const onMouseLeave = () => {
showClose.value = false;
};
const isRangeInput = vue.computed(() => {
return props.type.indexOf("range") > -1;
});
const pickerSize = vue.computed(() => {
return props.size || elFormItem.size || ELEMENT.size;
});
const popperPaneRef = vue.computed(() => {
var _a;
return (_a = refPopper.value) == null ? void 0 : _a.popperRef;
});
const onClickOutside = () => {
if (!pickerVisible.value) return;
pickerVisible.value = false;
};
const userInput = vue.ref(null);
const handleChange = () => {
if (userInput.value) {
const value = parseUserInputToDayjs(displayValue.value);
if (value) {
if (isValidValue(value)) {
emitInput(
Array.isArray(value)
? value.map((_) => _.toDate())
: value.toDate()
);
userInput.value = null;
}
}
}
if (userInput.value === "") {
emitInput(null);
emitChange(null);
userInput.value = null;
}
};
const blurInput = () => {
refInput.value.forEach((input) => input.blur());
};
const parseUserInputToDayjs = (value) => {
if (!value) return null;
return pickerOptions.value.parseUserInput(value);
};
const formatDayjsToString = (value) => {
if (!value) return null;
return pickerOptions.value.formatToString(value);
};
const isValidValue = (value) => {
return pickerOptions.value.isValidValue(value);
};
const handleKeydown = (event) => {
const code = event.code;
if (code === EVENT_CODE.esc) {
pickerVisible.value = false;
event.stopPropagation();
return;
}
if (code === EVENT_CODE.tab) {
if (!isRangeInput.value) {
handleChange();
pickerVisible.value = false;
event.stopPropagation();
} else {
setTimeout(() => {
if (refInput.value.indexOf(document.activeElement) === -1) {
pickerVisible.value = false;
blurInput();
}
}, 0);
}
return;
}
if (code === EVENT_CODE.enter) {
if (
userInput.value === "" ||
isValidValue(parseUserInputToDayjs(displayValue.value))
) {
handleChange();
pickerVisible.value = false;
}
event.stopPropagation();
return;
}
if (userInput.value) {
event.stopPropagation();
return;
}
if (pickerOptions.value.handleKeydown) {
pickerOptions.value.handleKeydown(event);
}
};
const onUserInput = (e) => {
userInput.value = e;
};
const handleStartInput = (event) => {
if (userInput.value) {
userInput.value = [event.target.value, userInput.value[1]];
} else {
userInput.value = [event.target.value, null];
}
};
const handleEndInput = (event) => {
if (userInput.value) {
userInput.value = [userInput.value[0], event.target.value];
} else {
userInput.value = [null, event.target.value];
}
};
const handleStartChange = () => {
const value = parseUserInputToDayjs(
userInput.value && userInput.value[0]
);
if (value && value.isValid()) {
userInput.value = [formatDayjsToString(value), displayValue.value[1]];
const newValue = [value, parsedValue.value && parsedValue.value[1]];
if (isValidValue(newValue)) {
emitInput(newValue);
userInput.value = null;
}
}
};
const handleEndChange = () => {
const value = parseUserInputToDayjs(
userInput.value && userInput.value[1]
);
if (value && value.isValid()) {
userInput.value = [displayValue.value[0], formatDayjsToString(value)];
const newValue = [parsedValue.value && parsedValue.value[0], value];
if (isValidValue(newValue)) {
emitInput(newValue);
userInput.value = null;
}
}
};
const pickerOptions = vue.ref({});
const onSetPickerOption = (e) => {
pickerOptions.value[e[0]] = e[1];
pickerOptions.value.panelReady = true;
};
const onCalendarChange = (e) => {
ctx.emit("calendar-change", e);
};
vue.provide("EP_PICKER_BASE", {
props,
});
return {
Effect: exports.Effect,
elPopperOptions,
isDatesPicker,
handleEndChange,
handleStartChange,
handleStartInput,
handleEndInput,
onUserInput,
handleChange,
handleKeydown,
popperPaneRef,
onClickOutside,
pickerSize,
isRangeInput,
onMouseLeave,
onMouseEnter,
onClearIconClick,
showClose,
triggerClass,
onPick,
handleFocus,
handleBlur,
pickerVisible,
pickerActualVisible,
displayValue,
parsedValue,
setSelectionRange,
refPopper,
pickerDisabled,
onSetPickerOption,
onCalendarChange,
};
},
});
const _hoisted_1$1e = [
"name",
"placeholder",
"value",
"disabled",
"readonly",
];
const _hoisted_2$X = { class: "el-range-separator" };
const _hoisted_3$S = ["name", "placeholder", "value", "disabled", "readonly"];
function render$1G(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_input = vue.resolveComponent("el-input");
const _component_el_popper = vue.resolveComponent("el-popper");
const _directive_clickoutside = vue.resolveDirective("clickoutside");
return (
vue.openBlock(),
vue.createBlock(
_component_el_popper,
vue.mergeProps(
{
ref: "refPopper",
visible: _ctx.pickerVisible,
"onUpdate:visible":
_cache[18] ||
(_cache[18] = ($event) => (_ctx.pickerVisible = $event)),
"manual-mode": "",
effect: _ctx.Effect.LIGHT,
pure: "",
trigger: "click",
},
_ctx.$attrs,
{
"popper-class": `el-picker__popper ${_ctx.popperClass}`,
"popper-options": _ctx.elPopperOptions,
"fallback-placements": ["bottom", "top", "right", "left"],
transition: "el-zoom-in-top",
"gpu-acceleration": false,
"stop-popper-mouse-event": false,
"append-to-body": "",
onBeforeEnter:
_cache[19] ||
(_cache[19] = ($event) => (_ctx.pickerActualVisible = true)),
onAfterLeave:
_cache[20] ||
(_cache[20] = ($event) => (_ctx.pickerActualVisible = false)),
}
),
{
trigger: vue.withCtx(() => [
!_ctx.isRangeInput
? vue.withDirectives(
(vue.openBlock(),
vue.createBlock(
_component_el_input,
{
key: 0,
"model-value": _ctx.displayValue,
name: _ctx.name,
size: _ctx.pickerSize,
disabled: _ctx.pickerDisabled,
placeholder: _ctx.placeholder,
class: vue.normalizeClass([
"el-date-editor",
"el-date-editor--" + _ctx.type,
]),
readonly:
!_ctx.editable ||
_ctx.readonly ||
_ctx.isDatesPicker ||
_ctx.type === "week",
onInput: _ctx.onUserInput,
onFocus: _ctx.handleFocus,
onKeydown: _ctx.handleKeydown,
onChange: _ctx.handleChange,
onMouseenter: _ctx.onMouseEnter,
onMouseleave: _ctx.onMouseLeave,
},
{
prefix: vue.withCtx(() => [
vue.createElementVNode(
"i",
{
class: vue.normalizeClass([
"el-input__icon",
_ctx.triggerClass,
]),
onClick:
_cache[0] ||
(_cache[0] = (...args) =>
_ctx.handleFocus && _ctx.handleFocus(...args)),
},
null,
2
),
]),
suffix: vue.withCtx(() => [
vue.createElementVNode(
"i",
{
class: vue.normalizeClass([
"el-input__icon",
[_ctx.showClose ? "" + _ctx.clearIcon : ""],
]),
onClick:
_cache[1] ||
(_cache[1] = (...args) =>
_ctx.onClearIconClick &&
_ctx.onClearIconClick(...args)),
},
null,
2
),
]),
_: 1,
},
8,
[
"model-value",
"name",
"size",
"disabled",
"placeholder",
"class",
"readonly",
"onInput",
"onFocus",
"onKeydown",
"onChange",
"onMouseenter",
"onMouseleave",
]
)),
[
[
_directive_clickoutside,
_ctx.onClickOutside,
_ctx.popperPaneRef,
],
]
)
: vue.withDirectives(
(vue.openBlock(),
vue.createElementBlock(
"div",
{
key: 1,
class: vue.normalizeClass([
"el-date-editor el-range-editor el-input__inner",
[
"el-date-editor--" + _ctx.type,
_ctx.pickerSize
? `el-range-editor--${_ctx.pickerSize}`
: "",
_ctx.pickerDisabled ? "is-disabled" : "",
_ctx.pickerVisible ? "is-active" : "",
],
]),
onClick:
_cache[9] ||
(_cache[9] = (...args) =>
_ctx.handleFocus && _ctx.handleFocus(...args)),
onMouseenter:
_cache[10] ||
(_cache[10] = (...args) =>
_ctx.onMouseEnter && _ctx.onMouseEnter(...args)),
onMouseleave:
_cache[11] ||
(_cache[11] = (...args) =>
_ctx.onMouseLeave && _ctx.onMouseLeave(...args)),
onKeydown:
_cache[12] ||
(_cache[12] = (...args) =>
_ctx.handleKeydown && _ctx.handleKeydown(...args)),
},
[
vue.createElementVNode(
"i",
{
class: vue.normalizeClass([
"el-input__icon",
"el-range__icon",
_ctx.triggerClass,
]),
},
null,
2
),
vue.createElementVNode(
"input",
{
autocomplete: "off",
name: _ctx.name && _ctx.name[0],
placeholder: _ctx.startPlaceholder,
value: _ctx.displayValue && _ctx.displayValue[0],
disabled: _ctx.pickerDisabled,
readonly: !_ctx.editable || _ctx.readonly,
class: "el-range-input",
onInput:
_cache[2] ||
(_cache[2] = (...args) =>
_ctx.handleStartInput &&
_ctx.handleStartInput(...args)),
onChange:
_cache[3] ||
(_cache[3] = (...args) =>
_ctx.handleStartChange &&
_ctx.handleStartChange(...args)),
onFocus:
_cache[4] ||
(_cache[4] = (...args) =>
_ctx.handleFocus && _ctx.handleFocus(...args)),
},
null,
40,
_hoisted_1$1e
),
vue.renderSlot(_ctx.$slots, "range-separator", {}, () => [
vue.createElementVNode(
"span",
_hoisted_2$X,
vue.toDisplayString(_ctx.rangeSeparator),
1
),
]),
vue.createElementVNode(
"input",
{
autocomplete: "off",
name: _ctx.name && _ctx.name[1],
placeholder: _ctx.endPlaceholder,
value: _ctx.displayValue && _ctx.displayValue[1],
disabled: _ctx.pickerDisabled,
readonly: !_ctx.editable || _ctx.readonly,
class: "el-range-input",
onFocus:
_cache[5] ||
(_cache[5] = (...args) =>
_ctx.handleFocus && _ctx.handleFocus(...args)),
onInput:
_cache[6] ||
(_cache[6] = (...args) =>
_ctx.handleEndInput &&
_ctx.handleEndInput(...args)),
onChange:
_cache[7] ||
(_cache[7] = (...args) =>
_ctx.handleEndChange &&
_ctx.handleEndChange(...args)),
},
null,
40,
_hoisted_3$S
),
vue.createElementVNode(
"i",
{
class: vue.normalizeClass([
[_ctx.showClose ? "" + _ctx.clearIcon : ""],
"el-input__icon el-range__close-icon",
]),
onClick:
_cache[8] ||
(_cache[8] = (...args) =>
_ctx.onClearIconClick &&
_ctx.onClearIconClick(...args)),
},
null,
2
),
],
34
)),
[
[
_directive_clickoutside,
_ctx.onClickOutside,
_ctx.popperPaneRef,
],
]
),
]),
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default", {
visible: _ctx.pickerVisible,
actualVisible: _ctx.pickerActualVisible,
parsedValue: _ctx.parsedValue,
format: _ctx.format,
unlinkPanels: _ctx.unlinkPanels,
type: _ctx.type,
defaultValue: _ctx.defaultValue,
onPick:
_cache[13] ||
(_cache[13] = (...args) => _ctx.onPick && _ctx.onPick(...args)),
onSelectRange:
_cache[14] ||
(_cache[14] = (...args) =>
_ctx.setSelectionRange && _ctx.setSelectionRange(...args)),
onSetPickerOption:
_cache[15] ||
(_cache[15] = (...args) =>
_ctx.onSetPickerOption && _ctx.onSetPickerOption(...args)),
onCalendarChange:
_cache[16] ||
(_cache[16] = (...args) =>
_ctx.onCalendarChange && _ctx.onCalendarChange(...args)),
onMousedown:
_cache[17] ||
(_cache[17] = vue.withModifiers(() => {}, ["stop"])),
}),
]),
_: 3,
},
16,
["visible", "effect", "popper-class", "popper-options"]
)
);
}
script$1O.render = render$1G;
script$1O.__file = "packages/components/time-picker/src/common/picker.vue";
const makeList = (total, method, methodFunc) => {
const arr = [];
const disabledArr = method && methodFunc();
for (let i = 0; i < total; i++) {
arr[i] = disabledArr ? disabledArr.includes(i) : false;
}
return arr;
};
const makeAvailableArr = (list) => {
return list.map((_, index) => (!_ ? index : _)).filter((_) => _ !== true);
};
const getTimeLists = (disabledHours, disabledMinutes, disabledSeconds) => {
const getHoursList = (role, compare) => {
return makeList(24, disabledHours, () => disabledHours(role, compare));
};
const getMinutesList = (hour, role, compare) => {
return makeList(60, disabledMinutes, () =>
disabledMinutes(hour, role, compare)
);
};
const getSecondsList = (hour, minute, role, compare) => {
return makeList(60, disabledSeconds, () =>
disabledSeconds(hour, minute, role, compare)
);
};
return {
getHoursList,
getMinutesList,
getSecondsList,
};
};
const getAvailableArrs = (
disabledHours,
disabledMinutes,
disabledSeconds
) => {
const { getHoursList, getMinutesList, getSecondsList } = getTimeLists(
disabledHours,
disabledMinutes,
disabledSeconds
);
const getAvailableHours = (role, compare) => {
return makeAvailableArr(getHoursList(role, compare));
};
const getAvailableMinutes = (hour, role, compare) => {
return makeAvailableArr(getMinutesList(hour, role, compare));
};
const getAvailableSeconds = (hour, minute, role, compare) => {
return makeAvailableArr(getSecondsList(hour, minute, role, compare));
};
return {
getAvailableHours,
getAvailableMinutes,
getAvailableSeconds,
};
};
const useOldValue = (props) => {
const oldValue = vue.ref(props.parsedValue);
vue.watch(
() => props.visible,
(val) => {
if (!val) {
oldValue.value = props.parsedValue;
}
}
);
return oldValue;
};
var script$1N = vue.defineComponent({
directives: {
repeatClick: RepeatClick,
},
components: {
ElScrollbar: _Scrollbar,
},
props: {
role: {
type: String,
required: true,
},
spinnerDate: {
type: Object,
required: true,
},
showSeconds: {
type: Boolean,
default: true,
},
arrowControl: Boolean,
amPmMode: {
type: String,
default: "",
},
disabledHours: {
type: Function,
},
disabledMinutes: {
type: Function,
},
disabledSeconds: {
type: Function,
},
},
emits: ["change", "select-range", "set-option"],
setup(props, ctx) {
let isScrolling = false;
const debouncedResetScroll = debounce_1((type) => {
isScrolling = false;
adjustCurrentSpinner(type);
}, 200);
const currentScrollbar = vue.ref(null);
const listHoursRef = vue.ref(null);
const listMinutesRef = vue.ref(null);
const listSecondsRef = vue.ref(null);
const listRefsMap = {
hours: listHoursRef,
minutes: listMinutesRef,
seconds: listSecondsRef,
};
const spinnerItems = vue.computed(() => {
const arr = ["hours", "minutes", "seconds"];
return props.showSeconds ? arr : arr.slice(0, 2);
});
const hours = vue.computed(() => {
return props.spinnerDate.hour();
});
const minutes = vue.computed(() => {
return props.spinnerDate.minute();
});
const seconds = vue.computed(() => {
return props.spinnerDate.second();
});
const timePartsMap = vue.computed(() => ({
hours,
minutes,
seconds,
}));
const hoursList = vue.computed(() => {
return getHoursList(props.role);
});
const minutesList = vue.computed(() => {
return getMinutesList(hours.value, props.role);
});
const secondsList = vue.computed(() => {
return getSecondsList(hours.value, minutes.value, props.role);
});
const listMap = vue.computed(() => ({
hours: hoursList,
minutes: minutesList,
seconds: secondsList,
}));
const arrowHourList = vue.computed(() => {
const hour = hours.value;
return [
hour > 0 ? hour - 1 : void 0,
hour,
hour < 23 ? hour + 1 : void 0,
];
});
const arrowMinuteList = vue.computed(() => {
const minute = minutes.value;
return [
minute > 0 ? minute - 1 : void 0,
minute,
minute < 59 ? minute + 1 : void 0,
];
});
const arrowSecondList = vue.computed(() => {
const second = seconds.value;
return [
second > 0 ? second - 1 : void 0,
second,
second < 59 ? second + 1 : void 0,
];
});
const arrowListMap = vue.computed(() => ({
hours: arrowHourList,
minutes: arrowMinuteList,
seconds: arrowSecondList,
}));
const getAmPmFlag = (hour) => {
const shouldShowAmPm = !!props.amPmMode;
if (!shouldShowAmPm) return "";
const isCapital = props.amPmMode === "A";
let content = hour < 12 ? " am" : " pm";
if (isCapital) content = content.toUpperCase();
return content;
};
const emitSelectRange = (type) => {
if (type === "hours") {
ctx.emit("select-range", 0, 2);
} else if (type === "minutes") {
ctx.emit("select-range", 3, 5);
} else if (type === "seconds") {
ctx.emit("select-range", 6, 8);
}
currentScrollbar.value = type;
};
const adjustCurrentSpinner = (type) => {
adjustSpinner(type, timePartsMap.value[type].value);
};
const adjustSpinners = () => {
adjustCurrentSpinner("hours");
adjustCurrentSpinner("minutes");
adjustCurrentSpinner("seconds");
};
const adjustSpinner = (type, value) => {
if (props.arrowControl) return;
const el = listRefsMap[type];
if (el.value) {
el.value.$el.querySelector(".el-scrollbar__wrap").scrollTop =
Math.max(0, value * typeItemHeight(type));
}
};
const typeItemHeight = (type) => {
const el = listRefsMap[type];
return el.value.$el.querySelector("li").offsetHeight;
};
const onIncreaseClick = () => {
scrollDown(1);
};
const onDecreaseClick = () => {
scrollDown(-1);
};
const scrollDown = (step) => {
if (!currentScrollbar.value) {
emitSelectRange("hours");
}
const label = currentScrollbar.value;
let now = timePartsMap.value[label].value;
const total = currentScrollbar.value === "hours" ? 24 : 60;
now = (now + step + total) % total;
modifyDateField(label, now);
adjustSpinner(label, now);
vue.nextTick(() => emitSelectRange(currentScrollbar.value));
};
const modifyDateField = (type, value) => {
const list = listMap.value[type].value;
const isDisabled = list[value];
if (isDisabled) return;
switch (type) {
case "hours":
ctx.emit(
"change",
props.spinnerDate
.hour(value)
.minute(minutes.value)
.second(seconds.value)
);
break;
case "minutes":
ctx.emit(
"change",
props.spinnerDate
.hour(hours.value)
.minute(value)
.second(seconds.value)
);
break;
case "seconds":
ctx.emit(
"change",
props.spinnerDate
.hour(hours.value)
.minute(minutes.value)
.second(value)
);
break;
}
};
const handleClick = (type, { value, disabled }) => {
if (!disabled) {
modifyDateField(type, value);
emitSelectRange(type);
adjustSpinner(type, value);
}
};
const handleScroll = (type) => {
isScrolling = true;
debouncedResetScroll(type);
const value = Math.min(
Math.round(
(listRefsMap[type].value.$el.querySelector(".el-scrollbar__wrap")
.scrollTop -
(scrollBarHeight(type) * 0.5 - 10) / typeItemHeight(type) +
3) /
typeItemHeight(type)
),
type === "hours" ? 23 : 59
);
modifyDateField(type, value);
};
const scrollBarHeight = (type) => {
return listRefsMap[type].value.$el.offsetHeight;
};
const bindScrollEvent = () => {
const bindFuntion = (type) => {
if (listRefsMap[type].value) {
listRefsMap[type].value.$el.querySelector(
".el-scrollbar__wrap"
).onscroll = () => {
handleScroll(type);
};
}
};
bindFuntion("hours");
bindFuntion("minutes");
bindFuntion("seconds");
};
vue.onMounted(() => {
vue.nextTick(() => {
!props.arrowControl && bindScrollEvent();
adjustSpinners();
if (props.role === "start") emitSelectRange("hours");
});
});
const getRefId = (item) => {
return `list${item.charAt(0).toUpperCase() + item.slice(1)}Ref`;
};
ctx.emit("set-option", [`${props.role}_scrollDown`, scrollDown]);
ctx.emit("set-option", [
`${props.role}_emitSelectRange`,
emitSelectRange,
]);
const { getHoursList, getMinutesList, getSecondsList } = getTimeLists(
props.disabledHours,
props.disabledMinutes,
props.disabledSeconds
);
vue.watch(
() => props.spinnerDate,
() => {
if (isScrolling) return;
adjustSpinners();
}
);
return {
getRefId,
spinnerItems,
currentScrollbar,
hours,
minutes,
seconds,
hoursList,
minutesList,
arrowHourList,
arrowMinuteList,
arrowSecondList,
getAmPmFlag,
emitSelectRange,
adjustCurrentSpinner,
typeItemHeight,
listHoursRef,
listMinutesRef,
listSecondsRef,
onIncreaseClick,
onDecreaseClick,
handleClick,
secondsList,
timePartsMap,
arrowListMap,
listMap,
};
},
});
const _hoisted_1$1d = ["onClick"];
const _hoisted_2$W = ["onMouseenter"];
const _hoisted_3$R = { class: "el-time-spinner__arrow el-icon-arrow-up" };
const _hoisted_4$y = { class: "el-time-spinner__arrow el-icon-arrow-down" };
const _hoisted_5$s = { class: "el-time-spinner__list" };
function render$1F(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
const _directive_repeat_click = vue.resolveDirective("repeat-click");
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
class: vue.normalizeClass([
"el-time-spinner",
{ "has-seconds": _ctx.showSeconds },
]),
},
[
!_ctx.arrowControl
? (vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
{ key: 0 },
vue.renderList(_ctx.spinnerItems, (item) => {
return (
vue.openBlock(),
vue.createBlock(
_component_el_scrollbar,
{
key: item,
ref: _ctx.getRefId(item),
class: "el-time-spinner__wrapper",
"wrap-style": "max-height: inherit;",
"view-class": "el-time-spinner__list",
noresize: "",
tag: "ul",
onMouseenter: ($event) => _ctx.emitSelectRange(item),
onMousemove: ($event) =>
_ctx.adjustCurrentSpinner(item),
},
{
default: vue.withCtx(() => [
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(
_ctx.listMap[item].value,
(disabled, key) => {
return (
vue.openBlock(),
vue.createElementBlock(
"li",
{
key,
class: vue.normalizeClass([
"el-time-spinner__item",
{
active:
key ===
_ctx.timePartsMap[item].value,
disabled,
},
]),
onClick: ($event) =>
_ctx.handleClick(item, {
value: key,
disabled,
}),
},
[
item === "hours"
? (vue.openBlock(),
vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
vue.createTextVNode(
vue.toDisplayString(
(
"0" +
(_ctx.amPmMode
? key % 12 || 12
: key)
).slice(-2)
) +
vue.toDisplayString(
_ctx.getAmPmFlag(key)
),
1
),
],
2112
))
: (vue.openBlock(),
vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
vue.createTextVNode(
vue.toDisplayString(
("0" + key).slice(-2)
),
1
),
],
2112
)),
],
10,
_hoisted_1$1d
)
);
}
),
128
)),
]),
_: 2,
},
1032,
["onMouseenter", "onMousemove"]
)
);
}),
128
))
: vue.createCommentVNode("v-if", true),
_ctx.arrowControl
? (vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
{ key: 1 },
vue.renderList(_ctx.spinnerItems, (item) => {
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
key: item,
class: "el-time-spinner__wrapper is-arrow",
onMouseenter: ($event) => _ctx.emitSelectRange(item),
},
[
vue.withDirectives(
vue.createElementVNode("i", _hoisted_3$R, null, 512),
[[_directive_repeat_click, _ctx.onDecreaseClick]]
),
vue.withDirectives(
vue.createElementVNode("i", _hoisted_4$y, null, 512),
[[_directive_repeat_click, _ctx.onIncreaseClick]]
),
vue.createElementVNode("ul", _hoisted_5$s, [
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(
_ctx.arrowListMap[item].value,
(time, key) => {
return (
vue.openBlock(),
vue.createElementBlock(
"li",
{
key,
class: vue.normalizeClass([
"el-time-spinner__item",
{
active:
time ===
_ctx.timePartsMap[item].value,
disabled:
_ctx.listMap[item].value[time],
},
]),
},
vue.toDisplayString(
time === void 0
? ""
: (
"0" +
(_ctx.amPmMode
? time % 12 || 12
: time)
).slice(-2) + _ctx.getAmPmFlag(time)
),
3
)
);
}
),
128
)),
]),
],
40,
_hoisted_2$W
)
);
}),
128
))
: vue.createCommentVNode("v-if", true),
],
2
)
);
}
script$1N.render = render$1F;
script$1N.__file =
"packages/components/time-picker/src/time-picker-com/basic-time-spinner.vue";
var script$1M = vue.defineComponent({
components: {
TimeSpinner: script$1N,
},
props: {
visible: Boolean,
actualVisible: {
type: Boolean,
default: void 0,
},
datetimeRole: {
type: String,
},
parsedValue: {
type: [Object, String],
},
format: {
type: String,
default: "",
},
},
emits: ["pick", "select-range", "set-picker-option"],
setup(props, ctx) {
const { t, lang } = useLocaleInject();
const selectionRange = vue.ref([0, 2]);
const oldValue = useOldValue(props);
const transitionName = vue.computed(() => {
return props.actualVisible === void 0 ? "el-zoom-in-top" : "";
});
const showSeconds = vue.computed(() => {
return props.format.includes("ss");
});
const amPmMode = vue.computed(() => {
if (props.format.includes("A")) return "A";
if (props.format.includes("a")) return "a";
return "";
});
const isValidValue = (_date) => {
const parsedDate = dayjs_min(_date).locale(lang.value);
const result = getRangeAvailableTime(parsedDate);
return parsedDate.isSame(result);
};
const handleCancel = () => {
ctx.emit("pick", oldValue.value, false);
};
const handleConfirm = (visible = false, first = false) => {
if (first) return;
ctx.emit("pick", props.parsedValue, visible);
};
const handleChange = (_date) => {
if (!props.visible) {
return;
}
const result = getRangeAvailableTime(_date).millisecond(0);
ctx.emit("pick", result, true);
};
const setSelectionRange = (start, end) => {
ctx.emit("select-range", start, end);
selectionRange.value = [start, end];
};
const changeSelectionRange = (step) => {
const list = [0, 3].concat(showSeconds.value ? [6] : []);
const mapping = ["hours", "minutes"].concat(
showSeconds.value ? ["seconds"] : []
);
const index = list.indexOf(selectionRange.value[0]);
const next = (index + step + list.length) % list.length;
timePickerOptions["start_emitSelectRange"](mapping[next]);
};
const handleKeydown = (event) => {
const code = event.code;
if (code === EVENT_CODE.left || code === EVENT_CODE.right) {
const step = code === EVENT_CODE.left ? -1 : 1;
changeSelectionRange(step);
event.preventDefault();
return;
}
if (code === EVENT_CODE.up || code === EVENT_CODE.down) {
const step = code === EVENT_CODE.up ? -1 : 1;
timePickerOptions["start_scrollDown"](step);
event.preventDefault();
return;
}
};
const getRangeAvailableTime = (date) => {
const availableMap = {
hour: getAvailableHours,
minute: getAvailableMinutes,
second: getAvailableSeconds,
};
let result = date;
["hour", "minute", "second"].forEach((_) => {
if (availableMap[_]) {
let availableArr;
const method = availableMap[_];
if (_ === "minute") {
availableArr = method(result.hour(), props.datetimeRole);
} else if (_ === "second") {
availableArr = method(
result.hour(),
result.minute(),
props.datetimeRole
);
} else {
availableArr = method(props.datetimeRole);
}
if (
availableArr &&
availableArr.length &&
!availableArr.includes(result[_]())
) {
result = result[_](availableArr[0]);
}
}
});
return result;
};
const parseUserInput = (value) => {
if (!value) return null;
return dayjs_min(value, props.format).locale(lang.value);
};
const formatToString = (value) => {
if (!value) return null;
return value.format(props.format);
};
const getDefaultValue = () => {
return dayjs_min(defaultValue).locale(lang.value);
};
ctx.emit("set-picker-option", ["isValidValue", isValidValue]);
ctx.emit("set-picker-option", ["formatToString", formatToString]);
ctx.emit("set-picker-option", ["parseUserInput", parseUserInput]);
ctx.emit("set-picker-option", ["handleKeydown", handleKeydown]);
ctx.emit("set-picker-option", [
"getRangeAvailableTime",
getRangeAvailableTime,
]);
ctx.emit("set-picker-option", ["getDefaultValue", getDefaultValue]);
const timePickerOptions = {};
const onSetOption = (e) => {
timePickerOptions[e[0]] = e[1];
};
const pickerBase = vue.inject("EP_PICKER_BASE");
const {
arrowControl,
disabledHours,
disabledMinutes,
disabledSeconds,
defaultValue,
} = pickerBase.props;
const { getAvailableHours, getAvailableMinutes, getAvailableSeconds } =
getAvailableArrs(disabledHours, disabledMinutes, disabledSeconds);
return {
transitionName,
arrowControl,
onSetOption,
t,
handleConfirm,
handleChange,
setSelectionRange,
amPmMode,
showSeconds,
handleCancel,
disabledHours,
disabledMinutes,
disabledSeconds,
};
},
});
const _hoisted_1$1c = {
key: 0,
class: "el-time-panel",
};
const _hoisted_2$V = { class: "el-time-panel__footer" };
function render$1E(_ctx, _cache, $props, $setup, $data, $options) {
const _component_time_spinner = vue.resolveComponent("time-spinner");
return (
vue.openBlock(),
vue.createBlock(
vue.Transition,
{ name: _ctx.transitionName },
{
default: vue.withCtx(() => [
_ctx.actualVisible || _ctx.visible
? (vue.openBlock(),
vue.createElementBlock("div", _hoisted_1$1c, [
vue.createElementVNode(
"div",
{
class: vue.normalizeClass([
"el-time-panel__content",
{ "has-seconds": _ctx.showSeconds },
]),
},
[
vue.createVNode(
_component_time_spinner,
{
ref: "spinner",
role: _ctx.datetimeRole || "start",
"arrow-control": _ctx.arrowControl,
"show-seconds": _ctx.showSeconds,
"am-pm-mode": _ctx.amPmMode,
"spinner-date": _ctx.parsedValue,
"disabled-hours": _ctx.disabledHours,
"disabled-minutes": _ctx.disabledMinutes,
"disabled-seconds": _ctx.disabledSeconds,
onChange: _ctx.handleChange,
onSetOption: _ctx.onSetOption,
onSelectRange: _ctx.setSelectionRange,
},
null,
8,
[
"role",
"arrow-control",
"show-seconds",
"am-pm-mode",
"spinner-date",
"disabled-hours",
"disabled-minutes",
"disabled-seconds",
"onChange",
"onSetOption",
"onSelectRange",
]
),
],
2
),
vue.createElementVNode("div", _hoisted_2$V, [
vue.createElementVNode(
"button",
{
type: "button",
class: "el-time-panel__btn cancel",
onClick:
_cache[0] ||
(_cache[0] = (...args) =>
_ctx.handleCancel && _ctx.handleCancel(...args)),
},
vue.toDisplayString(_ctx.t("el.datepicker.cancel")),
1
),
vue.createElementVNode(
"button",
{
type: "button",
class: "el-time-panel__btn confirm",
onClick:
_cache[1] ||
(_cache[1] = ($event) => _ctx.handleConfirm()),
},
vue.toDisplayString(_ctx.t("el.datepicker.confirm")),
1
),
]),
]))
: vue.createCommentVNode("v-if", true),
]),
_: 1,
},
8,
["name"]
)
);
}
script$1M.render = render$1E;
script$1M.__file =
"packages/components/time-picker/src/time-picker-com/panel-time-pick.vue";
/** Built-in value references. */
var spreadableSymbol = _Symbol ? _Symbol.isConcatSpreadable : undefined;
/**
* Checks if `value` is a flattenable `arguments` object or array.
*
* @private
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is flattenable, else `false`.
*/
function isFlattenable(value) {
return (
isArray_1(value) ||
isArguments_1(value) ||
!!(spreadableSymbol && value && value[spreadableSymbol])
);
}
var _isFlattenable = isFlattenable;
/**
* The base implementation of `_.flatten` with support for restricting flattening.
*
* @private
* @param {Array} array The array to flatten.
* @param {number} depth The maximum recursion depth.
* @param {boolean} [predicate=isFlattenable] The function invoked per iteration.
* @param {boolean} [isStrict] Restrict to values that pass `predicate` checks.
* @param {Array} [result=[]] The initial result value.
* @returns {Array} Returns the new flattened array.
*/
function baseFlatten(array, depth, predicate, isStrict, result) {
var index = -1,
length = array.length;
predicate || (predicate = _isFlattenable);
result || (result = []);
while (++index < length) {
var value = array[index];
if (depth > 0 && predicate(value)) {
if (depth > 1) {
// Recursively flatten arrays (susceptible to call stack limits).
baseFlatten(value, depth - 1, predicate, isStrict, result);
} else {
_arrayPush(result, value);
}
} else if (!isStrict) {
result[result.length] = value;
}
}
return result;
}
var _baseFlatten = baseFlatten;
/**
* This method returns the first argument it receives.
*
* @static
* @since 0.1.0
* @memberOf _
* @category Util
* @param {*} value Any value.
* @returns {*} Returns `value`.
* @example
*
* var object = { 'a': 1 };
*
* console.log(_.identity(object) === object);
* // => true
*/
function identity(value) {
return value;
}
var identity_1 = identity;
/**
* A faster alternative to `Function#apply`, this function invokes `func`
* with the `this` binding of `thisArg` and the arguments of `args`.
*
* @private
* @param {Function} func The function to invoke.
* @param {*} thisArg The `this` binding of `func`.
* @param {Array} args The arguments to invoke `func` with.
* @returns {*} Returns the result of `func`.
*/
function apply(func, thisArg, args) {
switch (args.length) {
case 0:
return func.call(thisArg);
case 1:
return func.call(thisArg, args[0]);
case 2:
return func.call(thisArg, args[0], args[1]);
case 3:
return func.call(thisArg, args[0], args[1], args[2]);
}
return func.apply(thisArg, args);
}
var _apply = apply;
/* Built-in method references for those with the same name as other `lodash` methods. */
var nativeMax = Math.max;
/**
* A specialized version of `baseRest` which transforms the rest array.
*
* @private
* @param {Function} func The function to apply a rest parameter to.
* @param {number} [start=func.length-1] The start position of the rest parameter.
* @param {Function} transform The rest array transform.
* @returns {Function} Returns the new function.
*/
function overRest(func, start, transform) {
start = nativeMax(start === undefined ? func.length - 1 : start, 0);
return function () {
var args = arguments,
index = -1,
length = nativeMax(args.length - start, 0),
array = Array(length);
while (++index < length) {
array[index] = args[start + index];
}
index = -1;
var otherArgs = Array(start + 1);
while (++index < start) {
otherArgs[index] = args[index];
}
otherArgs[start] = transform(array);
return _apply(func, this, otherArgs);
};
}
var _overRest = overRest;
/**
* Creates a function that returns `value`.
*
* @static
* @memberOf _
* @since 2.4.0
* @category Util
* @param {*} value The value to return from the new function.
* @returns {Function} Returns the new constant function.
* @example
*
* var objects = _.times(2, _.constant({ 'a': 1 }));
*
* console.log(objects);
* // => [{ 'a': 1 }, { 'a': 1 }]
*
* console.log(objects[0] === objects[1]);
* // => true
*/
function constant(value) {
return function () {
return value;
};
}
var constant_1 = constant;
var defineProperty = (function () {
try {
var func = _getNative(Object, "defineProperty");
func({}, "", {});
return func;
} catch (e) {}
})();
var _defineProperty = defineProperty;
/**
* The base implementation of `setToString` without support for hot loop shorting.
*
* @private
* @param {Function} func The function to modify.
* @param {Function} string The `toString` result.
* @returns {Function} Returns `func`.
*/
var baseSetToString = !_defineProperty
? identity_1
: function (func, string) {
return _defineProperty(func, "toString", {
configurable: true,
enumerable: false,
value: constant_1(string),
writable: true,
});
};
var _baseSetToString = baseSetToString;
/** Used to detect hot functions by number of calls within a span of milliseconds. */
var HOT_COUNT = 800,
HOT_SPAN = 16;
/* Built-in method references for those with the same name as other `lodash` methods. */
var nativeNow = Date.now;
/**
* Creates a function that'll short out and invoke `identity` instead
* of `func` when it's called `HOT_COUNT` or more times in `HOT_SPAN`
* milliseconds.
*
* @private
* @param {Function} func The function to restrict.
* @returns {Function} Returns the new shortable function.
*/
function shortOut(func) {
var count = 0,
lastCalled = 0;
return function () {
var stamp = nativeNow(),
remaining = HOT_SPAN - (stamp - lastCalled);
lastCalled = stamp;
if (remaining > 0) {
if (++count >= HOT_COUNT) {
return arguments[0];
}
} else {
count = 0;
}
return func.apply(undefined, arguments);
};
}
var _shortOut = shortOut;
/**
* Sets the `toString` method of `func` to return `string`.
*
* @private
* @param {Function} func The function to modify.
* @param {Function} string The `toString` result.
* @returns {Function} Returns `func`.
*/
var setToString = _shortOut(_baseSetToString);
var _setToString = setToString;
/**
* The base implementation of `_.rest` which doesn't validate or coerce arguments.
*
* @private
* @param {Function} func The function to apply a rest parameter to.
* @param {number} [start=func.length-1] The start position of the rest parameter.
* @returns {Function} Returns the new function.
*/
function baseRest(func, start) {
return _setToString(_overRest(func, start, identity_1), func + "");
}
var _baseRest = baseRest;
/**
* The base implementation of `_.findIndex` and `_.findLastIndex` without
* support for iteratee shorthands.
*
* @private
* @param {Array} array The array to inspect.
* @param {Function} predicate The function invoked per iteration.
* @param {number} fromIndex The index to search from.
* @param {boolean} [fromRight] Specify iterating from right to left.
* @returns {number} Returns the index of the matched value, else `-1`.
*/
function baseFindIndex(array, predicate, fromIndex, fromRight) {
var length = array.length,
index = fromIndex + (fromRight ? 1 : -1);
while (fromRight ? index-- : ++index < length) {
if (predicate(array[index], index, array)) {
return index;
}
}
return -1;
}
var _baseFindIndex = baseFindIndex;
/**
* The base implementation of `_.isNaN` without support for number objects.
*
* @private
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is `NaN`, else `false`.
*/
function baseIsNaN(value) {
return value !== value;
}
var _baseIsNaN = baseIsNaN;
/**
* A specialized version of `_.indexOf` which performs strict equality
* comparisons of values, i.e. `===`.
*
* @private
* @param {Array} array The array to inspect.
* @param {*} value The value to search for.
* @param {number} fromIndex The index to search from.
* @returns {number} Returns the index of the matched value, else `-1`.
*/
function strictIndexOf(array, value, fromIndex) {
var index = fromIndex - 1,
length = array.length;
while (++index < length) {
if (array[index] === value) {
return index;
}
}
return -1;
}
var _strictIndexOf = strictIndexOf;
/**
* The base implementation of `_.indexOf` without `fromIndex` bounds checks.
*
* @private
* @param {Array} array The array to inspect.
* @param {*} value The value to search for.
* @param {number} fromIndex The index to search from.
* @returns {number} Returns the index of the matched value, else `-1`.
*/
function baseIndexOf(array, value, fromIndex) {
return value === value
? _strictIndexOf(array, value, fromIndex)
: _baseFindIndex(array, _baseIsNaN, fromIndex);
}
var _baseIndexOf = baseIndexOf;
/**
* A specialized version of `_.includes` for arrays without support for
* specifying an index to search from.
*
* @private
* @param {Array} [array] The array to inspect.
* @param {*} target The value to search for.
* @returns {boolean} Returns `true` if `target` is found, else `false`.
*/
function arrayIncludes(array, value) {
var length = array == null ? 0 : array.length;
return !!length && _baseIndexOf(array, value, 0) > -1;
}
var _arrayIncludes = arrayIncludes;
/**
* This function is like `arrayIncludes` except that it accepts a comparator.
*
* @private
* @param {Array} [array] The array to inspect.
* @param {*} target The value to search for.
* @param {Function} comparator The comparator invoked per element.
* @returns {boolean} Returns `true` if `target` is found, else `false`.
*/
function arrayIncludesWith(array, value, comparator) {
var index = -1,
length = array == null ? 0 : array.length;
while (++index < length) {
if (comparator(value, array[index])) {
return true;
}
}
return false;
}
var _arrayIncludesWith = arrayIncludesWith;
/**
* This method returns `undefined`.
*
* @static
* @memberOf _
* @since 2.3.0
* @category Util
* @example
*
* _.times(2, _.noop);
* // => [undefined, undefined]
*/
function noop() {
// No operation performed.
}
var noop_1 = noop;
/** Used as references for various `Number` constants. */
var INFINITY = 1 / 0;
/**
* Creates a set object of `values`.
*
* @private
* @param {Array} values The values to add to the set.
* @returns {Object} Returns the new set.
*/
var createSet = !(_Set && 1 / _setToArray(new _Set([, -0]))[1] == INFINITY)
? noop_1
: function (values) {
return new _Set(values);
};
var _createSet = createSet;
/** Used as the size to enable large array optimizations. */
var LARGE_ARRAY_SIZE = 200;
/**
* The base implementation of `_.uniqBy` without support for iteratee shorthands.
*
* @private
* @param {Array} array The array to inspect.
* @param {Function} [iteratee] The iteratee invoked per element.
* @param {Function} [comparator] The comparator invoked per element.
* @returns {Array} Returns the new duplicate free array.
*/
function baseUniq(array, iteratee, comparator) {
var index = -1,
includes = _arrayIncludes,
length = array.length,
isCommon = true,
result = [],
seen = result;
if (comparator) {
isCommon = false;
includes = _arrayIncludesWith;
} else if (length >= LARGE_ARRAY_SIZE) {
var set = iteratee ? null : _createSet(array);
if (set) {
return _setToArray(set);
}
isCommon = false;
includes = _cacheHas;
seen = new _SetCache();
} else {
seen = iteratee ? [] : result;
}
outer: while (++index < length) {
var value = array[index],
computed = iteratee ? iteratee(value) : value;
value = comparator || value !== 0 ? value : 0;
if (isCommon && computed === computed) {
var seenIndex = seen.length;
while (seenIndex--) {
if (seen[seenIndex] === computed) {
continue outer;
}
}
if (iteratee) {
seen.push(computed);
}
result.push(value);
} else if (!includes(seen, computed, comparator)) {
if (seen !== result) {
seen.push(computed);
}
result.push(value);
}
}
return result;
}
var _baseUniq = baseUniq;
/**
* This method is like `_.isArrayLike` except that it also checks if `value`
* is an object.
*
* @static
* @memberOf _
* @since 4.0.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is an array-like object,
* else `false`.
* @example
*
* _.isArrayLikeObject([1, 2, 3]);
* // => true
*
* _.isArrayLikeObject(document.body.children);
* // => true
*
* _.isArrayLikeObject('abc');
* // => false
*
* _.isArrayLikeObject(_.noop);
* // => false
*/
function isArrayLikeObject(value) {
return isObjectLike_1(value) && isArrayLike_1(value);
}
var isArrayLikeObject_1 = isArrayLikeObject;
/**
* Creates an array of unique values, in order, from all given arrays using
* [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
* for equality comparisons.
*
* @static
* @memberOf _
* @since 0.1.0
* @category Array
* @param {...Array} [arrays] The arrays to inspect.
* @returns {Array} Returns the new array of combined values.
* @example
*
* _.union([2], [1, 2]);
* // => [2, 1]
*/
var union = _baseRest(function (arrays) {
return _baseUniq(_baseFlatten(arrays, 1, isArrayLikeObject_1, true));
});
var union_1 = union;
var union$1 = union_1;
const makeSelectRange = (start, end) => {
const result = [];
for (let i = start; i <= end; i++) {
result.push(i);
}
return result;
};
var script$1L = vue.defineComponent({
components: { TimeSpinner: script$1N },
props: {
visible: Boolean,
actualVisible: Boolean,
parsedValue: {
type: [Array],
},
format: {
type: String,
default: "",
},
},
emits: ["pick", "select-range", "set-picker-option"],
setup(props, ctx) {
const { t, lang } = useLocaleInject();
const minDate = vue.computed(() => props.parsedValue[0]);
const maxDate = vue.computed(() => props.parsedValue[1]);
const oldValue = useOldValue(props);
const handleCancel = () => {
ctx.emit("pick", oldValue.value, null);
};
const showSeconds = vue.computed(() => {
return props.format.includes("ss");
});
const amPmMode = vue.computed(() => {
if (props.format.includes("A")) return "A";
if (props.format.includes("a")) return "a";
return "";
});
const minSelectableRange = vue.ref([]);
const maxSelectableRange = vue.ref([]);
const handleConfirm = (visible = false) => {
ctx.emit("pick", [minDate.value, maxDate.value], visible);
};
const handleMinChange = (date) => {
handleChange(date.millisecond(0), maxDate.value);
};
const handleMaxChange = (date) => {
handleChange(minDate.value, date.millisecond(0));
};
const isValidValue = (_date) => {
const parsedDate = _date.map((_) => dayjs_min(_).locale(lang.value));
const result = getRangeAvailableTime(parsedDate);
return (
parsedDate[0].isSame(result[0]) && parsedDate[1].isSame(result[1])
);
};
const handleChange = (_minDate, _maxDate) => {
ctx.emit("pick", [_minDate, _maxDate], true);
};
const btnConfirmDisabled = vue.computed(() => {
return minDate.value > maxDate.value;
});
const selectionRange = vue.ref([0, 2]);
const setMinSelectionRange = (start, end) => {
ctx.emit("select-range", start, end, "min");
selectionRange.value = [start, end];
};
const offset = vue.computed(() => (showSeconds.value ? 11 : 8));
const setMaxSelectionRange = (start, end) => {
ctx.emit("select-range", start, end, "max");
selectionRange.value = [start + offset.value, end + offset.value];
};
const changeSelectionRange = (step) => {
const list = showSeconds.value ? [0, 3, 6, 11, 14, 17] : [0, 3, 8, 11];
const mapping = ["hours", "minutes"].concat(
showSeconds.value ? ["seconds"] : []
);
const index = list.indexOf(selectionRange.value[0]);
const next = (index + step + list.length) % list.length;
const half = list.length / 2;
if (next < half) {
timePickerOptions["start_emitSelectRange"](mapping[next]);
} else {
timePickerOptions["end_emitSelectRange"](mapping[next - half]);
}
};
const handleKeydown = (event) => {
const code = event.code;
if (code === EVENT_CODE.left || code === EVENT_CODE.right) {
const step = code === EVENT_CODE.left ? -1 : 1;
changeSelectionRange(step);
event.preventDefault();
return;
}
if (code === EVENT_CODE.up || code === EVENT_CODE.down) {
const step = code === EVENT_CODE.up ? -1 : 1;
const role = selectionRange.value[0] < offset.value ? "start" : "end";
timePickerOptions[`${role}_scrollDown`](step);
event.preventDefault();
return;
}
};
const disabledHours_ = (role, compare) => {
const defaultDisable = disabledHours ? disabledHours(role) : [];
const isStart = role === "start";
const compareDate =
compare || (isStart ? maxDate.value : minDate.value);
const compareHour = compareDate.hour();
const nextDisable = isStart
? makeSelectRange(compareHour + 1, 23)
: makeSelectRange(0, compareHour - 1);
return union$1(defaultDisable, nextDisable);
};
const disabledMinutes_ = (hour, role, compare) => {
const defaultDisable = disabledMinutes
? disabledMinutes(hour, role)
: [];
const isStart = role === "start";
const compareDate =
compare || (isStart ? maxDate.value : minDate.value);
const compareHour = compareDate.hour();
if (hour !== compareHour) {
return defaultDisable;
}
const compareMinute = compareDate.minute();
const nextDisable = isStart
? makeSelectRange(compareMinute + 1, 59)
: makeSelectRange(0, compareMinute - 1);
return union$1(defaultDisable, nextDisable);
};
const disabledSeconds_ = (hour, minute, role, compare) => {
const defaultDisable = disabledSeconds
? disabledSeconds(hour, minute, role)
: [];
const isStart = role === "start";
const compareDate =
compare || (isStart ? maxDate.value : minDate.value);
const compareHour = compareDate.hour();
const compareMinute = compareDate.minute();
if (hour !== compareHour || minute !== compareMinute) {
return defaultDisable;
}
const compareSecond = compareDate.second();
const nextDisable = isStart
? makeSelectRange(compareSecond + 1, 59)
: makeSelectRange(0, compareSecond - 1);
return union$1(defaultDisable, nextDisable);
};
const getRangeAvailableTime = (dates) => {
return dates.map((_, index) =>
getRangeAvailableTimeEach(
dates[0],
dates[1],
index === 0 ? "start" : "end"
)
);
};
const { getAvailableHours, getAvailableMinutes, getAvailableSeconds } =
getAvailableArrs(disabledHours_, disabledMinutes_, disabledSeconds_);
const getRangeAvailableTimeEach = (startDate, endDate, role) => {
const availableMap = {
hour: getAvailableHours,
minute: getAvailableMinutes,
second: getAvailableSeconds,
};
const isStart = role === "start";
let result = isStart ? startDate : endDate;
const compareDate = isStart ? endDate : startDate;
["hour", "minute", "second"].forEach((_) => {
if (availableMap[_]) {
let availableArr;
const method = availableMap[_];
if (_ === "minute") {
availableArr = method(result.hour(), role, compareDate);
} else if (_ === "second") {
availableArr = method(
result.hour(),
result.minute(),
role,
compareDate
);
} else {
availableArr = method(role, compareDate);
}
if (
availableArr &&
availableArr.length &&
!availableArr.includes(result[_]())
) {
const pos = isStart ? 0 : availableArr.length - 1;
result = result[_](availableArr[pos]);
}
}
});
return result;
};
const parseUserInput = (value) => {
if (!value) return null;
if (Array.isArray(value)) {
return value.map((_) =>
dayjs_min(_, props.format).locale(lang.value)
);
}
return dayjs_min(value, props.format).locale(lang.value);
};
const formatToString = (value) => {
if (!value) return null;
if (Array.isArray(value)) {
return value.map((_) => _.format(props.format));
}
return value.format(props.format);
};
const getDefaultValue = () => {
if (Array.isArray(defaultValue)) {
return defaultValue.map((_) => dayjs_min(_).locale(lang.value));
}
const defaultDay = dayjs_min(defaultValue).locale(lang.value);
return [defaultDay, defaultDay.add(60, "m")];
};
ctx.emit("set-picker-option", ["formatToString", formatToString]);
ctx.emit("set-picker-option", ["parseUserInput", parseUserInput]);
ctx.emit("set-picker-option", ["isValidValue", isValidValue]);
ctx.emit("set-picker-option", ["handleKeydown", handleKeydown]);
ctx.emit("set-picker-option", ["getDefaultValue", getDefaultValue]);
ctx.emit("set-picker-option", [
"getRangeAvailableTime",
getRangeAvailableTime,
]);
const timePickerOptions = {};
const onSetOption = (e) => {
timePickerOptions[e[0]] = e[1];
};
const pickerBase = vue.inject("EP_PICKER_BASE");
const {
arrowControl,
disabledHours,
disabledMinutes,
disabledSeconds,
defaultValue,
} = pickerBase.props;
return {
arrowControl,
onSetOption,
setMaxSelectionRange,
setMinSelectionRange,
btnConfirmDisabled,
handleCancel,
handleConfirm,
t,
showSeconds,
minDate,
maxDate,
amPmMode,
handleMinChange,
handleMaxChange,
minSelectableRange,
maxSelectableRange,
disabledHours_,
disabledMinutes_,
disabledSeconds_,
};
},
});
const _hoisted_1$1b = {
key: 0,
class: "el-time-range-picker el-picker-panel",
};
const _hoisted_2$U = { class: "el-time-range-picker__content" };
const _hoisted_3$Q = { class: "el-time-range-picker__cell" };
const _hoisted_4$x = { class: "el-time-range-picker__header" };
const _hoisted_5$r = { class: "el-time-range-picker__cell" };
const _hoisted_6$m = { class: "el-time-range-picker__header" };
const _hoisted_7$e = { class: "el-time-panel__footer" };
const _hoisted_8$a = ["disabled"];
function render$1D(_ctx, _cache, $props, $setup, $data, $options) {
const _component_time_spinner = vue.resolveComponent("time-spinner");
return _ctx.actualVisible
? (vue.openBlock(),
vue.createElementBlock("div", _hoisted_1$1b, [
vue.createElementVNode("div", _hoisted_2$U, [
vue.createElementVNode("div", _hoisted_3$Q, [
vue.createElementVNode(
"div",
_hoisted_4$x,
vue.toDisplayString(_ctx.t("el.datepicker.startTime")),
1
),
vue.createElementVNode(
"div",
{
class: vue.normalizeClass([
{
"has-seconds": _ctx.showSeconds,
"is-arrow": _ctx.arrowControl,
},
"el-time-range-picker__body el-time-panel__content",
]),
},
[
vue.createVNode(
_component_time_spinner,
{
ref: "minSpinner",
role: "start",
"show-seconds": _ctx.showSeconds,
"am-pm-mode": _ctx.amPmMode,
"arrow-control": _ctx.arrowControl,
"spinner-date": _ctx.minDate,
"disabled-hours": _ctx.disabledHours_,
"disabled-minutes": _ctx.disabledMinutes_,
"disabled-seconds": _ctx.disabledSeconds_,
onChange: _ctx.handleMinChange,
onSetOption: _ctx.onSetOption,
onSelectRange: _ctx.setMinSelectionRange,
},
null,
8,
[
"show-seconds",
"am-pm-mode",
"arrow-control",
"spinner-date",
"disabled-hours",
"disabled-minutes",
"disabled-seconds",
"onChange",
"onSetOption",
"onSelectRange",
]
),
],
2
),
]),
vue.createElementVNode("div", _hoisted_5$r, [
vue.createElementVNode(
"div",
_hoisted_6$m,
vue.toDisplayString(_ctx.t("el.datepicker.endTime")),
1
),
vue.createElementVNode(
"div",
{
class: vue.normalizeClass([
{
"has-seconds": _ctx.showSeconds,
"is-arrow": _ctx.arrowControl,
},
"el-time-range-picker__body el-time-panel__content",
]),
},
[
vue.createVNode(
_component_time_spinner,
{
ref: "maxSpinner",
role: "end",
"show-seconds": _ctx.showSeconds,
"am-pm-mode": _ctx.amPmMode,
"arrow-control": _ctx.arrowControl,
"spinner-date": _ctx.maxDate,
"disabled-hours": _ctx.disabledHours_,
"disabled-minutes": _ctx.disabledMinutes_,
"disabled-seconds": _ctx.disabledSeconds_,
onChange: _ctx.handleMaxChange,
onSetOption: _ctx.onSetOption,
onSelectRange: _ctx.setMaxSelectionRange,
},
null,
8,
[
"show-seconds",
"am-pm-mode",
"arrow-control",
"spinner-date",
"disabled-hours",
"disabled-minutes",
"disabled-seconds",
"onChange",
"onSetOption",
"onSelectRange",
]
),
],
2
),
]),
]),
vue.createElementVNode("div", _hoisted_7$e, [
vue.createElementVNode(
"button",
{
type: "button",
class: "el-time-panel__btn cancel",
onClick:
_cache[0] || (_cache[0] = ($event) => _ctx.handleCancel()),
},
vue.toDisplayString(_ctx.t("el.datepicker.cancel")),
1
),
vue.createElementVNode(
"button",
{
type: "button",
class: "el-time-panel__btn confirm",
disabled: _ctx.btnConfirmDisabled,
onClick:
_cache[1] || (_cache[1] = ($event) => _ctx.handleConfirm()),
},
vue.toDisplayString(_ctx.t("el.datepicker.confirm")),
9,
_hoisted_8$a
),
]),
]))
: vue.createCommentVNode("v-if", true);
}
script$1L.render = render$1D;
script$1L.__file =
"packages/components/time-picker/src/time-picker-com/panel-time-range.vue";
var __defProp$E = Object.defineProperty;
var __defProps$t = Object.defineProperties;
var __getOwnPropDescs$t = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$E = Object.getOwnPropertySymbols;
var __hasOwnProp$E = Object.prototype.hasOwnProperty;
var __propIsEnum$E = Object.prototype.propertyIsEnumerable;
var __defNormalProp$E = (obj, key, value) =>
key in obj
? __defProp$E(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$E = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$E.call(b, prop)) __defNormalProp$E(a, prop, b[prop]);
if (__getOwnPropSymbols$E)
for (var prop of __getOwnPropSymbols$E(b)) {
if (__propIsEnum$E.call(b, prop)) __defNormalProp$E(a, prop, b[prop]);
}
return a;
};
var __spreadProps$t = (a, b) => __defProps$t(a, __getOwnPropDescs$t(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
dayjs_min.extend(customParseFormat);
var TimePicker = vue.defineComponent({
name: "ElTimePicker",
install: null,
props: __spreadProps$t(__spreadValues$E({}, timePickerDefaultProps), {
isRange: {
type: Boolean,
default: false,
},
}),
emits: ["update:modelValue"],
setup(props, ctx) {
const commonPicker = vue.ref(null);
const type = props.isRange ? "timerange" : "time";
const panel = props.isRange ? script$1L : script$1M;
const refProps = __spreadProps$t(__spreadValues$E({}, props), {
focus: () => {
var _a;
(_a = commonPicker.value) == null ? void 0 : _a.handleFocus();
},
blur: () => {
var _a;
(_a = commonPicker.value) == null ? void 0 : _a.handleBlur();
},
});
vue.provide("ElPopperOptions", props.popperOptions);
ctx.expose(refProps);
return () => {
var _a;
const format = (_a = props.format) != null ? _a : DEFAULT_FORMATS_TIME;
return vue.h(
script$1O,
__spreadProps$t(__spreadValues$E({}, props), {
format,
type,
ref: commonPicker,
"onUpdate:modelValue": (value) =>
ctx.emit("update:modelValue", value),
}),
{
default: (scopedProps) => vue.h(panel, scopedProps),
}
);
};
},
});
const rangeArr = (n) => {
return Array.from(Array(n).keys());
};
const extractDateFormat = (format) => {
return format
.replace(/\W?m{1,2}|\W?ZZ/g, "")
.replace(/\W?h{1,2}|\W?s{1,3}|\W?a/gi, "")
.trim();
};
const extractTimeFormat = (format) => {
return format
.replace(/\W?D{1,2}|\W?Do|\W?d{1,4}|\W?M{1,4}|\W?Y{2,4}/g, "")
.trim();
};
const _TimePicker = TimePicker;
_TimePicker.install = (app) => {
app.component(_TimePicker.name, _TimePicker);
};
const ElTimePicker = _TimePicker;
dayjs_min.extend(localeData);
const getPrevMonthLastDays = (date, amount) => {
const lastDay = date.subtract(1, "month").endOf("month").date();
return rangeArr(amount).map((_, index) => lastDay - (amount - index - 1));
};
const getMonthDays = (date) => {
const days = date.daysInMonth();
return rangeArr(days).map((_, index) => index + 1);
};
var script$1K = vue.defineComponent({
props: {
selectedDay: {
type: Object,
},
range: {
type: Array,
},
date: {
type: Object,
},
hideHeader: {
type: Boolean,
},
},
emits: ["pick"],
setup(props, ctx) {
const { lang } = useLocaleInject();
const WEEK_DAYS = vue.ref(
dayjs_min().locale(lang.value).localeData().weekdaysShort()
);
const now = dayjs_min().locale(lang.value);
const firstDayOfWeek = now.$locale().weekStart || 0;
const toNestedArr = (days) => {
return rangeArr(days.length / 7).map((_, index) => {
const start = index * 7;
return days.slice(start, start + 7);
});
};
const getFormattedDate = (day, type) => {
let result;
if (type === "prev") {
result = props.date.startOf("month").subtract(1, "month").date(day);
} else if (type === "next") {
result = props.date.startOf("month").add(1, "month").date(day);
} else {
result = props.date.date(day);
}
return result;
};
const getCellClass = ({ text, type }) => {
const classes = [type];
if (type === "current") {
const date_ = getFormattedDate(text, type);
if (date_.isSame(props.selectedDay, "day")) {
classes.push("is-selected");
}
if (date_.isSame(now, "day")) {
classes.push("is-today");
}
}
return classes;
};
const pickDay = ({ text, type }) => {
const date = getFormattedDate(text, type);
ctx.emit("pick", date);
};
const getSlotData = ({ text, type }) => {
const day = getFormattedDate(text, type);
return {
isSelected: day.isSame(props.selectedDay),
type: `${type}-month`,
day: day.format("YYYY-MM-DD"),
date: day.toDate(),
};
};
const isInRange = vue.computed(() => {
return props.range && props.range.length;
});
const rows = vue.computed(() => {
let days = [];
if (isInRange.value) {
const [start, end] = props.range;
const currentMonthRange = rangeArr(end.date() - start.date() + 1).map(
(_, index) => ({
text: start.date() + index,
type: "current",
})
);
let remaining = currentMonthRange.length % 7;
remaining = remaining === 0 ? 0 : 7 - remaining;
const nextMonthRange = rangeArr(remaining).map((_, index) => ({
text: index + 1,
type: "next",
}));
days = currentMonthRange.concat(nextMonthRange);
} else {
const firstDay = props.date.startOf("month").day() || 7;
const prevMonthDays = getPrevMonthLastDays(
props.date,
firstDay - firstDayOfWeek
).map((day) => ({
text: day,
type: "prev",
}));
const currentMonthDays = getMonthDays(props.date).map((day) => ({
text: day,
type: "current",
}));
days = [...prevMonthDays, ...currentMonthDays];
const nextMonthDays = rangeArr(42 - days.length).map((_, index) => ({
text: index + 1,
type: "next",
}));
days = days.concat(nextMonthDays);
}
return toNestedArr(days);
});
const weekDays = vue.computed(() => {
const start = firstDayOfWeek;
if (start === 0) {
return WEEK_DAYS.value;
} else {
return WEEK_DAYS.value
.slice(start)
.concat(WEEK_DAYS.value.slice(0, start));
}
});
return {
isInRange,
weekDays,
rows,
getCellClass,
pickDay,
getSlotData,
};
},
});
const _hoisted_1$1a = { key: 0 };
const _hoisted_2$T = ["onClick"];
const _hoisted_3$P = { class: "el-calendar-day" };
function render$1C(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"table",
{
class: vue.normalizeClass({
"el-calendar-table": true,
"is-range": _ctx.isInRange,
}),
cellspacing: "0",
cellpadding: "0",
},
[
!_ctx.hideHeader
? (vue.openBlock(),
vue.createElementBlock("thead", _hoisted_1$1a, [
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.weekDays, (day) => {
return (
vue.openBlock(),
vue.createElementBlock(
"th",
{ key: day },
vue.toDisplayString(day),
1
)
);
}),
128
)),
]))
: vue.createCommentVNode("v-if", true),
vue.createElementVNode("tbody", null, [
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.rows, (row, index) => {
return (
vue.openBlock(),
vue.createElementBlock(
"tr",
{
key: index,
class: vue.normalizeClass({
"el-calendar-table__row": true,
"el-calendar-table__row--hide-border":
index === 0 && _ctx.hideHeader,
}),
},
[
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(row, (cell, key) => {
return (
vue.openBlock(),
vue.createElementBlock(
"td",
{
key,
class: vue.normalizeClass(
_ctx.getCellClass(cell)
),
onClick: ($event) => _ctx.pickDay(cell),
},
[
vue.createElementVNode("div", _hoisted_3$P, [
vue.renderSlot(
_ctx.$slots,
"dateCell",
{
data: _ctx.getSlotData(cell),
},
() => [
vue.createElementVNode(
"span",
null,
vue.toDisplayString(cell.text),
1
),
]
),
]),
],
10,
_hoisted_2$T
)
);
}),
128
)),
],
2
)
);
}),
128
)),
]),
],
2
)
);
}
script$1K.render = render$1C;
script$1K.__file = "packages/components/calendar/src/date-table.vue";
const { ButtonGroup: ElButtonGroup$1 } = ElButton;
var script$1J = vue.defineComponent({
name: "ElCalendar",
components: {
DateTable: script$1K,
ElButton,
ElButtonGroup: ElButtonGroup$1,
},
props: {
modelValue: {
type: Date,
},
range: {
type: Array,
validator: (range) => {
if (Array.isArray(range)) {
return (
range.length === 2 && range.every((item) => item instanceof Date)
);
}
return false;
},
},
},
emits: ["input", "update:modelValue"],
setup(props, ctx) {
const { t, lang } = useLocaleInject();
const selectedDay = vue.ref(null);
const now = dayjs_min().locale(lang.value);
const prevMonthDayjs = vue.computed(() => {
return date.value.subtract(1, "month");
});
const curMonthDatePrefix = vue.computed(() => {
return dayjs_min(date.value).locale(lang.value).format("YYYY-MM");
});
const nextMonthDayjs = vue.computed(() => {
return date.value.add(1, "month");
});
const prevYearDayjs = vue.computed(() => {
return date.value.subtract(1, "year");
});
const nextYearDayjs = vue.computed(() => {
return date.value.add(1, "year");
});
const i18nDate = vue.computed(() => {
const pickedMonth = `el.datepicker.month${date.value.format("M")}`;
return `${date.value.year()} ${t("el.datepicker.year")} ${t(
pickedMonth
)}`;
});
const realSelectedDay = vue.computed({
get() {
if (!props.modelValue) return selectedDay.value;
return date.value;
},
set(val) {
selectedDay.value = val;
const result = val.toDate();
ctx.emit("input", result);
ctx.emit("update:modelValue", result);
},
});
const date = vue.computed(() => {
if (!props.modelValue) {
if (realSelectedDay.value) {
return realSelectedDay.value;
} else if (validatedRange.value.length) {
return validatedRange.value[0][0];
}
return now;
} else {
return dayjs_min(props.modelValue).locale(lang.value);
}
});
const calculateValidatedDateRange = (startDayjs, endDayjs) => {
const firstDay = startDayjs.startOf("week");
const lastDay = endDayjs.endOf("week");
const firstMonth = firstDay.get("month");
const lastMonth = lastDay.get("month");
if (firstMonth === lastMonth) {
return [[firstDay, lastDay]];
} else if (firstMonth + 1 === lastMonth) {
const firstMonthLastDay = firstDay.endOf("month");
const lastMonthFirstDay = lastDay.startOf("month");
const isSameWeek = firstMonthLastDay.isSame(
lastMonthFirstDay,
"week"
);
const lastMonthStartDay = isSameWeek
? lastMonthFirstDay.add(1, "week")
: lastMonthFirstDay;
return [
[firstDay, firstMonthLastDay],
[lastMonthStartDay.startOf("week"), lastDay],
];
} else if (firstMonth + 2 === lastMonth) {
const firstMonthLastDay = firstDay.endOf("month");
const secondMonthFisrtDay = firstDay.add(1, "month").startOf("month");
const secondMonthStartDay = firstMonthLastDay.isSame(
secondMonthFisrtDay,
"week"
)
? secondMonthFisrtDay.add(1, "week")
: secondMonthFisrtDay;
const secondMonthLastDay = secondMonthStartDay.endOf("month");
const lastMonthFirstDay = lastDay.startOf("month");
const lastMonthStartDay = secondMonthLastDay.isSame(
lastMonthFirstDay,
"week"
)
? lastMonthFirstDay.add(1, "week")
: lastMonthFirstDay;
return [
[firstDay, firstMonthLastDay],
[secondMonthStartDay.startOf("week"), secondMonthLastDay],
[lastMonthStartDay.startOf("week"), lastDay],
];
} else {
return [];
}
};
const validatedRange = vue.computed(() => {
if (!props.range) return [];
const rangeArrDayjs = props.range.map((_) =>
dayjs_min(_).locale(lang.value)
);
const [startDayjs, endDayjs] = rangeArrDayjs;
if (startDayjs.isAfter(endDayjs)) {
return [];
}
if (startDayjs.isSame(endDayjs, "month")) {
return calculateValidatedDateRange(startDayjs, endDayjs);
} else {
if (startDayjs.add(1, "month").month() !== endDayjs.month()) {
return [];
}
return calculateValidatedDateRange(startDayjs, endDayjs);
}
});
const pickDay = (day) => {
realSelectedDay.value = day;
};
const selectDate = (type) => {
let day;
if (type === "prev-month") {
day = prevMonthDayjs.value;
} else if (type === "next-month") {
day = nextMonthDayjs.value;
} else if (type === "prev-year") {
day = prevYearDayjs.value;
} else if (type === "next-year") {
day = nextYearDayjs.value;
} else {
day = now;
}
if (day.isSame(date.value, "day")) return;
pickDay(day);
};
return {
selectedDay,
curMonthDatePrefix,
i18nDate,
realSelectedDay,
date,
validatedRange,
pickDay,
selectDate,
t,
};
},
});
const _hoisted_1$19 = { class: "el-calendar" };
const _hoisted_2$S = { class: "el-calendar__header" };
const _hoisted_3$O = { class: "el-calendar__title" };
const _hoisted_4$w = {
key: 0,
class: "el-calendar__button-group",
};
const _hoisted_5$q = {
key: 0,
class: "el-calendar__body",
};
const _hoisted_6$l = {
key: 1,
class: "el-calendar__body",
};
function render$1B(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_button = vue.resolveComponent("el-button");
const _component_el_button_group = vue.resolveComponent("el-button-group");
const _component_date_table = vue.resolveComponent("date-table");
return (
vue.openBlock(),
vue.createElementBlock("div", _hoisted_1$19, [
vue.createElementVNode("div", _hoisted_2$S, [
vue.renderSlot(_ctx.$slots, "header", { date: _ctx.i18nDate }, () => [
vue.createElementVNode(
"div",
_hoisted_3$O,
vue.toDisplayString(_ctx.i18nDate),
1
),
_ctx.validatedRange.length === 0
? (vue.openBlock(),
vue.createElementBlock("div", _hoisted_4$w, [
vue.createVNode(_component_el_button_group, null, {
default: vue.withCtx(() => [
vue.createVNode(
_component_el_button,
{
size: "mini",
onClick:
_cache[0] ||
(_cache[0] = ($event) =>
_ctx.selectDate("prev-month")),
},
{
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(
_ctx.t("el.datepicker.prevMonth")
),
1
),
]),
_: 1,
}
),
vue.createVNode(
_component_el_button,
{
size: "mini",
onClick:
_cache[1] ||
(_cache[1] = ($event) => _ctx.selectDate("today")),
},
{
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(
_ctx.t("el.datepicker.today")
),
1
),
]),
_: 1,
}
),
vue.createVNode(
_component_el_button,
{
size: "mini",
onClick:
_cache[2] ||
(_cache[2] = ($event) =>
_ctx.selectDate("next-month")),
},
{
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(
_ctx.t("el.datepicker.nextMonth")
),
1
),
]),
_: 1,
}
),
]),
_: 1,
}),
]))
: vue.createCommentVNode("v-if", true),
]),
]),
_ctx.validatedRange.length === 0
? (vue.openBlock(),
vue.createElementBlock("div", _hoisted_5$q, [
vue.createVNode(
_component_date_table,
{
date: _ctx.date,
"selected-day": _ctx.realSelectedDay,
onPick: _ctx.pickDay,
},
vue.createSlots({ _: 2 }, [
_ctx.$slots.dateCell
? {
name: "dateCell",
fn: vue.withCtx((data) => [
vue.renderSlot(
_ctx.$slots,
"dateCell",
vue.normalizeProps(vue.guardReactiveProps(data))
),
]),
}
: void 0,
]),
1032,
["date", "selected-day", "onPick"]
),
]))
: (vue.openBlock(),
vue.createElementBlock("div", _hoisted_6$l, [
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.validatedRange, (range_, index) => {
return (
vue.openBlock(),
vue.createBlock(
_component_date_table,
{
key: index,
date: range_[0],
"selected-day": _ctx.realSelectedDay,
range: range_,
"hide-header": index !== 0,
onPick: _ctx.pickDay,
},
vue.createSlots({ _: 2 }, [
_ctx.$slots.dateCell
? {
name: "dateCell",
fn: vue.withCtx((data) => [
vue.renderSlot(
_ctx.$slots,
"dateCell",
vue.normalizeProps(
vue.guardReactiveProps(data)
)
),
]),
}
: void 0,
]),
1032,
["date", "selected-day", "range", "hide-header", "onPick"]
)
);
}),
128
)),
])),
])
);
}
script$1J.render = render$1B;
script$1J.__file = "packages/components/calendar/src/index.vue";
script$1J.install = (app) => {
app.component(script$1J.name, script$1J);
};
const _Calendar = script$1J;
const ElCalendar = _Calendar;
const cardProps = {
header: {
type: String,
default: "",
},
bodyStyle: buildProp({
type: definePropType([String, Object, Array]),
default: "",
}),
shadow: {
type: String,
default: "",
},
};
var script$1I = vue.defineComponent({
name: "ElCard",
props: cardProps,
});
const _hoisted_1$18 = {
key: 0,
class: "el-card__header",
};
function render$1A(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
class: vue.normalizeClass([
"el-card",
_ctx.shadow ? "is-" + _ctx.shadow + "-shadow" : "is-always-shadow",
]),
},
[
_ctx.$slots.header || _ctx.header
? (vue.openBlock(),
vue.createElementBlock("div", _hoisted_1$18, [
vue.renderSlot(_ctx.$slots, "header", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.header), 1),
]),
]))
: vue.createCommentVNode("v-if", true),
vue.createElementVNode(
"div",
{
class: "el-card__body",
style: vue.normalizeStyle(_ctx.bodyStyle),
},
[vue.renderSlot(_ctx.$slots, "default")],
4
),
],
2
)
);
}
script$1I.render = render$1A;
script$1I.__file = "packages/components/card/src/card.vue";
const ElCard = withInstall(script$1I);
/** Error message constants. */
var FUNC_ERROR_TEXT$1 = "Expected a function";
/**
* Creates a throttled function that only invokes `func` at most once per
* every `wait` milliseconds. The throttled function comes with a `cancel`
* method to cancel delayed `func` invocations and a `flush` method to
* immediately invoke them. Provide `options` to indicate whether `func`
* should be invoked on the leading and/or trailing edge of the `wait`
* timeout. The `func` is invoked with the last arguments provided to the
* throttled function. Subsequent calls to the throttled function return the
* result of the last `func` invocation.
*
* **Note:** If `leading` and `trailing` options are `true`, `func` is
* invoked on the trailing edge of the timeout only if the throttled function
* is invoked more than once during the `wait` timeout.
*
* If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
* until to the next tick, similar to `setTimeout` with a timeout of `0`.
*
* See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
* for details over the differences between `_.throttle` and `_.debounce`.
*
* @static
* @memberOf _
* @since 0.1.0
* @category Function
* @param {Function} func The function to throttle.
* @param {number} [wait=0] The number of milliseconds to throttle invocations to.
* @param {Object} [options={}] The options object.
* @param {boolean} [options.leading=true]
* Specify invoking on the leading edge of the timeout.
* @param {boolean} [options.trailing=true]
* Specify invoking on the trailing edge of the timeout.
* @returns {Function} Returns the new throttled function.
* @example
*
* // Avoid excessively updating the position while scrolling.
* jQuery(window).on('scroll', _.throttle(updatePosition, 100));
*
* // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
* var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
* jQuery(element).on('click', throttled);
*
* // Cancel the trailing throttled invocation.
* jQuery(window).on('popstate', throttled.cancel);
*/
function throttle(func, wait, options) {
var leading = true,
trailing = true;
if (typeof func != "function") {
throw new TypeError(FUNC_ERROR_TEXT$1);
}
if (isObject_1(options)) {
leading = "leading" in options ? !!options.leading : leading;
trailing = "trailing" in options ? !!options.trailing : trailing;
}
return debounce_1(func, wait, {
leading: leading,
maxWait: wait,
trailing: trailing,
});
}
var throttle_1 = throttle;
var script$1H = vue.defineComponent({
name: "ElCarousel",
props: {
initialIndex: {
type: Number,
default: 0,
},
height: { type: String, default: "" },
trigger: {
type: String,
default: "hover",
},
autoplay: {
type: Boolean,
default: true,
},
interval: {
type: Number,
default: 3e3,
},
indicatorPosition: { type: String, default: "" },
indicator: {
type: Boolean,
default: true,
},
arrow: {
type: String,
default: "hover",
},
type: { type: String, default: "" },
loop: {
type: Boolean,
default: true,
},
direction: {
type: String,
default: "horizontal",
validator(val) {
return ["horizontal", "vertical"].includes(val);
},
},
pauseOnHover: {
type: Boolean,
default: true,
},
},
emits: ["change"],
setup(props, { emit }) {
const data = vue.reactive({
activeIndex: -1,
containerWidth: 0,
timer: null,
hover: false,
});
const root = vue.ref(null);
const items = vue.ref([]);
const arrowDisplay = vue.computed(
() => props.arrow !== "never" && props.direction !== "vertical"
);
const hasLabel = vue.computed(() => {
return items.value.some((item) => item.label.toString().length > 0);
});
const carouselClasses = vue.computed(() => {
const classes = ["el-carousel", `el-carousel--${props.direction}`];
if (props.type === "card") {
classes.push("el-carousel--card");
}
return classes;
});
const indicatorsClasses = vue.computed(() => {
const classes = [
"el-carousel__indicators",
`el-carousel__indicators--${props.direction}`,
];
if (hasLabel.value) {
classes.push("el-carousel__indicators--labels");
}
if (props.indicatorPosition === "outside" || props.type === "card") {
classes.push("el-carousel__indicators--outside");
}
return classes;
});
const throttledArrowClick = throttle_1(
(index) => {
setActiveItem(index);
},
300,
{ trailing: true }
);
const throttledIndicatorHover = throttle_1((index) => {
handleIndicatorHover(index);
}, 300);
function pauseTimer() {
if (data.timer) {
clearInterval(data.timer);
data.timer = null;
}
}
function startTimer() {
if (props.interval <= 0 || !props.autoplay || data.timer) return;
data.timer = setInterval(() => playSlides(), props.interval);
}
const playSlides = () => {
if (data.activeIndex < items.value.length - 1) {
data.activeIndex = data.activeIndex + 1;
} else if (props.loop) {
data.activeIndex = 0;
}
};
function setActiveItem(index) {
if (typeof index === "string") {
const filteredItems = items.value.filter(
(item) => item.name === index
);
if (filteredItems.length > 0) {
index = items.value.indexOf(filteredItems[0]);
}
}
index = Number(index);
if (isNaN(index) || index !== Math.floor(index)) {
return;
}
const length = items.value.length;
const oldIndex = data.activeIndex;
if (index < 0) {
data.activeIndex = props.loop ? length - 1 : 0;
} else if (index >= length) {
data.activeIndex = props.loop ? 0 : length - 1;
} else {
data.activeIndex = index;
}
if (oldIndex === data.activeIndex) {
resetItemPosition(oldIndex);
}
}
function resetItemPosition(oldIndex) {
items.value.forEach((item, index) => {
item.translateItem(index, data.activeIndex, oldIndex);
});
}
function addItem(item) {
items.value.push(item);
}
function removeItem(uid) {
const index = items.value.findIndex((item) => item.uid === uid);
if (index !== -1) {
items.value.splice(index, 1);
if (data.activeIndex === index) next();
}
}
function itemInStage(item, index) {
const length = items.value.length;
if (
(index === length - 1 && item.inStage && items.value[0].active) ||
(item.inStage &&
items.value[index + 1] &&
items.value[index + 1].active)
) {
return "left";
} else if (
(index === 0 && item.inStage && items.value[length - 1].active) ||
(item.inStage &&
items.value[index - 1] &&
items.value[index - 1].active)
) {
return "right";
}
return false;
}
function handleMouseEnter() {
data.hover = true;
if (props.pauseOnHover) {
pauseTimer();
}
}
function handleMouseLeave() {
data.hover = false;
startTimer();
}
function handleButtonEnter(arrow) {
if (props.direction === "vertical") return;
items.value.forEach((item, index) => {
if (arrow === itemInStage(item, index)) {
item.hover = true;
}
});
}
function handleButtonLeave() {
if (props.direction === "vertical") return;
items.value.forEach((item) => {
item.hover = false;
});
}
function handleIndicatorClick(index) {
data.activeIndex = index;
}
function handleIndicatorHover(index) {
if (props.trigger === "hover" && index !== data.activeIndex) {
data.activeIndex = index;
}
}
function prev() {
setActiveItem(data.activeIndex - 1);
}
function next() {
setActiveItem(data.activeIndex + 1);
}
vue.watch(
() => data.activeIndex,
(current, prev2) => {
resetItemPosition(prev2);
if (prev2 > -1) {
emit("change", current, prev2);
}
}
);
vue.watch(
() => props.autoplay,
(current) => {
current ? startTimer() : pauseTimer();
}
);
vue.watch(
() => props.loop,
() => {
setActiveItem(data.activeIndex);
}
);
vue.onMounted(() => {
vue.nextTick(() => {
addResizeListener(root.value, resetItemPosition);
if (
props.initialIndex < items.value.length &&
props.initialIndex >= 0
) {
data.activeIndex = props.initialIndex;
}
startTimer();
});
});
vue.onBeforeUnmount(() => {
if (root.value) removeResizeListener(root.value, resetItemPosition);
pauseTimer();
});
vue.provide("injectCarouselScope", {
root,
direction: props.direction,
type: props.type,
items,
loop: props.loop,
addItem,
removeItem,
setActiveItem,
});
return {
data,
props,
items,
arrowDisplay,
carouselClasses,
indicatorsClasses,
hasLabel,
handleMouseEnter,
handleMouseLeave,
handleIndicatorClick,
throttledArrowClick,
throttledIndicatorHover,
handleButtonEnter,
handleButtonLeave,
prev,
next,
setActiveItem,
root,
};
},
});
const _hoisted_1$17 = /* @__PURE__ */ vue.createElementVNode(
"i",
{ class: "el-icon-arrow-left" },
null,
-1
);
const _hoisted_2$R = [_hoisted_1$17];
const _hoisted_3$N = /* @__PURE__ */ vue.createElementVNode(
"i",
{ class: "el-icon-arrow-right" },
null,
-1
);
const _hoisted_4$v = [_hoisted_3$N];
const _hoisted_5$p = ["onMouseenter", "onClick"];
const _hoisted_6$k = { class: "el-carousel__button" };
const _hoisted_7$d = { key: 0 };
function render$1z(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
ref: "root",
class: vue.normalizeClass(_ctx.carouselClasses),
onMouseenter:
_cache[6] ||
(_cache[6] = vue.withModifiers(
(...args) =>
_ctx.handleMouseEnter && _ctx.handleMouseEnter(...args),
["stop"]
)),
onMouseleave:
_cache[7] ||
(_cache[7] = vue.withModifiers(
(...args) =>
_ctx.handleMouseLeave && _ctx.handleMouseLeave(...args),
["stop"]
)),
},
[
vue.createElementVNode(
"div",
{
class: "el-carousel__container",
style: vue.normalizeStyle({ height: _ctx.height }),
},
[
_ctx.arrowDisplay
? (vue.openBlock(),
vue.createBlock(
vue.Transition,
{
key: 0,
name: "carousel-arrow-left",
},
{
default: vue.withCtx(() => [
vue.withDirectives(
vue.createElementVNode(
"button",
{
type: "button",
class:
"el-carousel__arrow el-carousel__arrow--left",
onMouseenter:
_cache[0] ||
(_cache[0] = ($event) =>
_ctx.handleButtonEnter("left")),
onMouseleave:
_cache[1] ||
(_cache[1] = (...args) =>
_ctx.handleButtonLeave &&
_ctx.handleButtonLeave(...args)),
onClick:
_cache[2] ||
(_cache[2] = vue.withModifiers(
($event) =>
_ctx.throttledArrowClick(
_ctx.data.activeIndex - 1
),
["stop"]
)),
},
_hoisted_2$R,
544
),
[
[
vue.vShow,
(_ctx.arrow === "always" || _ctx.data.hover) &&
(_ctx.props.loop || _ctx.data.activeIndex > 0),
],
]
),
]),
_: 1,
}
))
: vue.createCommentVNode("v-if", true),
_ctx.arrowDisplay
? (vue.openBlock(),
vue.createBlock(
vue.Transition,
{
key: 1,
name: "carousel-arrow-right",
},
{
default: vue.withCtx(() => [
vue.withDirectives(
vue.createElementVNode(
"button",
{
type: "button",
class:
"el-carousel__arrow el-carousel__arrow--right",
onMouseenter:
_cache[3] ||
(_cache[3] = ($event) =>
_ctx.handleButtonEnter("right")),
onMouseleave:
_cache[4] ||
(_cache[4] = (...args) =>
_ctx.handleButtonLeave &&
_ctx.handleButtonLeave(...args)),
onClick:
_cache[5] ||
(_cache[5] = vue.withModifiers(
($event) =>
_ctx.throttledArrowClick(
_ctx.data.activeIndex + 1
),
["stop"]
)),
},
_hoisted_4$v,
544
),
[
[
vue.vShow,
(_ctx.arrow === "always" || _ctx.data.hover) &&
(_ctx.props.loop ||
_ctx.data.activeIndex <
_ctx.items.length - 1),
],
]
),
]),
_: 1,
}
))
: vue.createCommentVNode("v-if", true),
vue.renderSlot(_ctx.$slots, "default"),
],
4
),
_ctx.indicatorPosition !== "none"
? (vue.openBlock(),
vue.createElementBlock(
"ul",
{
key: 0,
class: vue.normalizeClass(_ctx.indicatorsClasses),
},
[
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.items, (item, index) => {
return (
vue.openBlock(),
vue.createElementBlock(
"li",
{
key: index,
class: vue.normalizeClass([
"el-carousel__indicator",
"el-carousel__indicator--" + _ctx.direction,
{ "is-active": index === _ctx.data.activeIndex },
]),
onMouseenter: ($event) =>
_ctx.throttledIndicatorHover(index),
onClick: vue.withModifiers(
($event) => _ctx.handleIndicatorClick(index),
["stop"]
),
},
[
vue.createElementVNode("button", _hoisted_6$k, [
_ctx.hasLabel
? (vue.openBlock(),
vue.createElementBlock(
"span",
_hoisted_7$d,
vue.toDisplayString(item.label),
1
))
: vue.createCommentVNode("v-if", true),
]),
],
42,
_hoisted_5$p
)
);
}),
128
)),
],
2
))
: vue.createCommentVNode("v-if", true),
],
34
)
);
}
script$1H.render = render$1z;
script$1H.__file = "packages/components/carousel/src/main.vue";
var __defProp$D = Object.defineProperty;
var __defProps$s = Object.defineProperties;
var __getOwnPropDescs$s = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$D = Object.getOwnPropertySymbols;
var __hasOwnProp$D = Object.prototype.hasOwnProperty;
var __propIsEnum$D = Object.prototype.propertyIsEnumerable;
var __defNormalProp$D = (obj, key, value) =>
key in obj
? __defProp$D(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$D = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$D.call(b, prop)) __defNormalProp$D(a, prop, b[prop]);
if (__getOwnPropSymbols$D)
for (var prop of __getOwnPropSymbols$D(b)) {
if (__propIsEnum$D.call(b, prop)) __defNormalProp$D(a, prop, b[prop]);
}
return a;
};
var __spreadProps$s = (a, b) => __defProps$s(a, __getOwnPropDescs$s(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
const CARD_SCALE = 0.83;
var script$1G = vue.defineComponent({
name: "ElCarouselItem",
props: {
name: { type: String, default: "" },
label: {
type: [String, Number],
default: "",
},
},
setup(props) {
const instance = vue.getCurrentInstance();
instance.uid;
const data = vue.reactive({
hover: false,
translate: 0,
scale: 1,
active: false,
ready: false,
inStage: false,
animating: false,
});
const injectCarouselScope = vue.inject("injectCarouselScope");
const parentDirection = vue.computed(() => {
return injectCarouselScope.direction;
});
const itemStyle = vue.computed(() => {
const translateType =
parentDirection.value === "vertical" ? "translateY" : "translateX";
const value = `${translateType}(${data.translate}px) scale(${data.scale})`;
const style = {
transform: value,
};
return autoprefixer(style);
});
function processIndex(index, activeIndex, length) {
if (activeIndex === 0 && index === length - 1) {
return -1;
} else if (activeIndex === length - 1 && index === 0) {
return length;
} else if (
index < activeIndex - 1 &&
activeIndex - index >= length / 2
) {
return length + 1;
} else if (
index > activeIndex + 1 &&
index - activeIndex >= length / 2
) {
return -2;
}
return index;
}
function calcCardTranslate(index, activeIndex) {
var _a;
const parentWidth =
((_a = injectCarouselScope.root.value) == null
? void 0
: _a.offsetWidth) || 0;
if (data.inStage) {
return (
(parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1)) / 4
);
} else if (index < activeIndex) {
return (-(1 + CARD_SCALE) * parentWidth) / 4;
} else {
return ((3 + CARD_SCALE) * parentWidth) / 4;
}
}
function calcTranslate(index, activeIndex, isVertical) {
var _a, _b;
const distance =
(isVertical
? (_a = injectCarouselScope.root.value) == null
? void 0
: _a.offsetHeight
: (_b = injectCarouselScope.root.value) == null
? void 0
: _b.offsetWidth) || 0;
return distance * (index - activeIndex);
}
const translateItem = (index, activeIndex, oldIndex) => {
const parentType = injectCarouselScope.type;
const length = injectCarouselScope.items.value.length;
if (parentType !== "card" && oldIndex !== void 0) {
data.animating = index === activeIndex || index === oldIndex;
}
if (index !== activeIndex && length > 2 && injectCarouselScope.loop) {
index = processIndex(index, activeIndex, length);
}
if (parentType === "card") {
if (parentDirection.value === "vertical");
data.inStage = Math.round(Math.abs(index - activeIndex)) <= 1;
data.active = index === activeIndex;
data.translate = calcCardTranslate(index, activeIndex);
data.scale = data.active ? 1 : CARD_SCALE;
} else {
data.active = index === activeIndex;
const isVertical = parentDirection.value === "vertical";
data.translate = calcTranslate(index, activeIndex, isVertical);
}
data.ready = true;
};
function handleItemClick() {
if (injectCarouselScope && injectCarouselScope.type === "card") {
const index = injectCarouselScope.items.value
.map((d) => d.uid)
.indexOf(instance.uid);
injectCarouselScope.setActiveItem(index);
}
}
vue.onMounted(() => {
if (injectCarouselScope.addItem) {
injectCarouselScope.addItem(
__spreadProps$s(
__spreadValues$D(
__spreadValues$D(
{
uid: instance.uid,
},
props
),
vue.toRefs(data)
),
{
translateItem,
}
)
);
}
});
vue.onUnmounted(() => {
if (injectCarouselScope.removeItem) {
injectCarouselScope.removeItem(instance.uid);
}
});
return {
data,
itemStyle,
translateItem,
type: injectCarouselScope.type,
handleItemClick,
};
},
});
const _hoisted_1$16 = {
key: 0,
class: "el-carousel__mask",
};
function render$1y(_ctx, _cache, $props, $setup, $data, $options) {
return vue.withDirectives(
(vue.openBlock(),
vue.createElementBlock(
"div",
{
class: vue.normalizeClass([
"el-carousel__item",
{
"is-active": _ctx.data.active,
"el-carousel__item--card": _ctx.type === "card",
"is-in-stage": _ctx.data.inStage,
"is-hover": _ctx.data.hover,
"is-animating": _ctx.data.animating,
},
]),
style: vue.normalizeStyle(_ctx.itemStyle),
onClick:
_cache[0] ||
(_cache[0] = (...args) =>
_ctx.handleItemClick && _ctx.handleItemClick(...args)),
},
[
_ctx.type === "card"
? vue.withDirectives(
(vue.openBlock(),
vue.createElementBlock("div", _hoisted_1$16, null, 512)),
[[vue.vShow, !_ctx.data.active]]
)
: vue.createCommentVNode("v-if", true),
vue.renderSlot(_ctx.$slots, "default"),
],
6
)),
[[vue.vShow, _ctx.data.ready]]
);
}
script$1G.render = render$1y;
script$1G.__file = "packages/components/carousel/src/item.vue";
const ElCarousel = withInstall(script$1H, {
CarouselItem: script$1G,
});
const ElCarouselItem = withNoopInstall(script$1G);
function scrollIntoView(container, selected) {
if (isServer) return;
if (!selected) {
container.scrollTop = 0;
return;
}
const offsetParents = [];
let pointer = selected.offsetParent;
while (
pointer !== null &&
container !== pointer &&
container.contains(pointer)
) {
offsetParents.push(pointer);
pointer = pointer.offsetParent;
}
const top =
selected.offsetTop +
offsetParents.reduce((prev, curr) => prev + curr.offsetTop, 0);
const bottom = top + selected.offsetHeight;
const viewRectTop = container.scrollTop;
const viewRectBottom = viewRectTop + container.clientHeight;
if (top < viewRectTop) {
container.scrollTop = top;
} else if (bottom > viewRectBottom) {
container.scrollTop = bottom - container.clientHeight;
}
}
const useCheckboxProps = {
modelValue: {
type: [Boolean, Number, String],
default: () => void 0,
},
label: {
type: [String, Boolean, Number, Object],
},
indeterminate: Boolean,
disabled: Boolean,
checked: Boolean,
name: {
type: String,
default: void 0,
},
trueLabel: {
type: [String, Number],
default: void 0,
},
falseLabel: {
type: [String, Number],
default: void 0,
},
size: String,
};
const useCheckboxGroup = () => {
const ELEMENT = useGlobalConfig();
const elForm = vue.inject(elFormKey, {});
const elFormItem = vue.inject(elFormItemKey, {});
const checkboxGroup = vue.inject("CheckboxGroup", {});
const isGroup = vue.computed(
() =>
checkboxGroup &&
(checkboxGroup == null ? void 0 : checkboxGroup.name) ===
"ElCheckboxGroup"
);
const elFormItemSize = vue.computed(() => {
return elFormItem.size;
});
return {
isGroup,
checkboxGroup,
elForm,
ELEMENT,
elFormItemSize,
elFormItem,
};
};
const useModel = (props) => {
const selfModel = vue.ref(false);
const { emit } = vue.getCurrentInstance();
const { isGroup, checkboxGroup } = useCheckboxGroup();
const isLimitExceeded = vue.ref(false);
const store = vue.computed(() => {
var _a;
return checkboxGroup
? (_a = checkboxGroup.modelValue) == null
? void 0
: _a.value
: props.modelValue;
});
const model = vue.computed({
get() {
var _a;
return isGroup.value
? store.value
: (_a = props.modelValue) != null
? _a
: selfModel.value;
},
set(val) {
var _a;
if (isGroup.value && Array.isArray(val)) {
isLimitExceeded.value = false;
if (
checkboxGroup.min !== void 0 &&
val.length < checkboxGroup.min.value
) {
isLimitExceeded.value = true;
}
if (
checkboxGroup.max !== void 0 &&
val.length > checkboxGroup.max.value
) {
isLimitExceeded.value = true;
}
isLimitExceeded.value === false &&
((_a =
checkboxGroup == null ? void 0 : checkboxGroup.changeEvent) ==
null
? void 0
: _a.call(checkboxGroup, val));
} else {
emit(UPDATE_MODEL_EVENT, val);
selfModel.value = val;
}
},
});
return {
model,
isLimitExceeded,
};
};
const useCheckboxStatus = (props, { model }) => {
const { isGroup, checkboxGroup, elFormItemSize, ELEMENT } =
useCheckboxGroup();
const focus = vue.ref(false);
const size = vue.computed(() => {
var _a;
return (
((_a =
checkboxGroup == null ? void 0 : checkboxGroup.checkboxGroupSize) ==
null
? void 0
: _a.value) ||
elFormItemSize.value ||
ELEMENT.size
);
});
const isChecked = vue.computed(() => {
const value = model.value;
if (toTypeString(value) === "[object Boolean]") {
return value;
} else if (Array.isArray(value)) {
return value.includes(props.label);
} else if (value !== null && value !== void 0) {
return value === props.trueLabel;
} else {
return !!value;
}
});
const checkboxSize = vue.computed(() => {
var _a;
const temCheckboxSize =
props.size || elFormItemSize.value || ELEMENT.size;
return isGroup.value
? ((_a =
checkboxGroup == null ? void 0 : checkboxGroup.checkboxGroupSize) ==
null
? void 0
: _a.value) || temCheckboxSize
: temCheckboxSize;
});
return {
isChecked,
focus,
size,
checkboxSize,
};
};
const useDisabled = (props, { model, isChecked }) => {
const { elForm, isGroup, checkboxGroup } = useCheckboxGroup();
const isLimitDisabled = vue.computed(() => {
var _a, _b;
const max = (_a = checkboxGroup.max) == null ? void 0 : _a.value;
const min = (_b = checkboxGroup.min) == null ? void 0 : _b.value;
return (
(!!(max || min) && model.value.length >= max && !isChecked.value) ||
(model.value.length <= min && isChecked.value)
);
});
const isDisabled = vue.computed(() => {
var _a;
const disabled = props.disabled || elForm.disabled;
return isGroup.value
? ((_a = checkboxGroup.disabled) == null ? void 0 : _a.value) ||
disabled ||
isLimitDisabled.value
: props.disabled || elForm.disabled;
});
return {
isDisabled,
isLimitDisabled,
};
};
const setStoreValue = (props, { model }) => {
function addToStore() {
if (Array.isArray(model.value) && !model.value.includes(props.label)) {
model.value.push(props.label);
} else {
model.value = props.trueLabel || true;
}
}
props.checked && addToStore();
};
const useEvent$1 = (props, { isLimitExceeded }) => {
const { elFormItem } = useCheckboxGroup();
const { emit } = vue.getCurrentInstance();
function handleChange(e) {
var _a, _b;
if (isLimitExceeded.value) return;
const target = e.target;
const value = target.checked
? (_a = props.trueLabel) != null
? _a
: true
: (_b = props.falseLabel) != null
? _b
: false;
emit("change", value, e);
}
vue.watch(
() => props.modelValue,
() => {
var _a;
(_a = elFormItem.validate) == null
? void 0
: _a.call(elFormItem, "change");
}
);
return {
handleChange,
};
};
const useCheckbox = (props) => {
const { model, isLimitExceeded } = useModel(props);
const { focus, size, isChecked, checkboxSize } = useCheckboxStatus(props, {
model,
});
const { isDisabled } = useDisabled(props, { model, isChecked });
const { handleChange } = useEvent$1(props, { isLimitExceeded });
setStoreValue(props, { model });
return {
isChecked,
isDisabled,
checkboxSize,
model,
handleChange,
focus,
size,
};
};
var script$1F = vue.defineComponent({
name: "ElCheckbox",
props: {
modelValue: {
type: [Boolean, Number, String],
default: () => void 0,
},
label: {
type: [String, Boolean, Number, Object],
},
indeterminate: Boolean,
disabled: Boolean,
checked: Boolean,
name: {
type: String,
default: void 0,
},
trueLabel: {
type: [String, Number],
default: void 0,
},
falseLabel: {
type: [String, Number],
default: void 0,
},
id: {
type: String,
default: void 0,
},
controls: {
type: String,
default: void 0,
},
border: Boolean,
size: {
type: String,
validator: isValidComponentSize,
},
},
emits: [UPDATE_MODEL_EVENT, "change"],
setup(props) {
return useCheckbox(props);
},
});
const _hoisted_1$15 = ["id", "aria-controls"];
const _hoisted_2$Q = ["tabindex", "role", "aria-checked"];
const _hoisted_3$M = /* @__PURE__ */ vue.createElementVNode(
"span",
{ class: "el-checkbox__inner" },
null,
-1
);
const _hoisted_4$u = [
"aria-hidden",
"name",
"disabled",
"true-value",
"false-value",
];
const _hoisted_5$o = ["aria-hidden", "disabled", "value", "name"];
const _hoisted_6$j = {
key: 0,
class: "el-checkbox__label",
};
function render$1x(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"label",
{
id: _ctx.id,
class: vue.normalizeClass([
"el-checkbox",
[
_ctx.checkboxSize ? "el-checkbox--" + _ctx.checkboxSize : "",
{ "is-disabled": _ctx.isDisabled },
{ "is-bordered": _ctx.border },
{ "is-checked": _ctx.isChecked },
],
]),
"aria-controls": _ctx.indeterminate ? _ctx.controls : null,
},
[
vue.createElementVNode(
"span",
{
class: vue.normalizeClass([
"el-checkbox__input",
{
"is-disabled": _ctx.isDisabled,
"is-checked": _ctx.isChecked,
"is-indeterminate": _ctx.indeterminate,
"is-focus": _ctx.focus,
},
]),
tabindex: _ctx.indeterminate ? 0 : void 0,
role: _ctx.indeterminate ? "checkbox" : void 0,
"aria-checked": _ctx.indeterminate ? "mixed" : false,
},
[
_hoisted_3$M,
_ctx.trueLabel || _ctx.falseLabel
? vue.withDirectives(
(vue.openBlock(),
vue.createElementBlock(
"input",
{
key: 0,
"onUpdate:modelValue":
_cache[0] ||
(_cache[0] = ($event) => (_ctx.model = $event)),
class: "el-checkbox__original",
type: "checkbox",
"aria-hidden": _ctx.indeterminate ? "true" : "false",
name: _ctx.name,
disabled: _ctx.isDisabled,
"true-value": _ctx.trueLabel,
"false-value": _ctx.falseLabel,
onChange:
_cache[1] ||
(_cache[1] = (...args) =>
_ctx.handleChange && _ctx.handleChange(...args)),
onFocus:
_cache[2] ||
(_cache[2] = ($event) => (_ctx.focus = true)),
onBlur:
_cache[3] ||
(_cache[3] = ($event) => (_ctx.focus = false)),
},
null,
40,
_hoisted_4$u
)),
[[vue.vModelCheckbox, _ctx.model]]
)
: vue.withDirectives(
(vue.openBlock(),
vue.createElementBlock(
"input",
{
key: 1,
"onUpdate:modelValue":
_cache[4] ||
(_cache[4] = ($event) => (_ctx.model = $event)),
class: "el-checkbox__original",
type: "checkbox",
"aria-hidden": _ctx.indeterminate ? "true" : "false",
disabled: _ctx.isDisabled,
value: _ctx.label,
name: _ctx.name,
onChange:
_cache[5] ||
(_cache[5] = (...args) =>
_ctx.handleChange && _ctx.handleChange(...args)),
onFocus:
_cache[6] ||
(_cache[6] = ($event) => (_ctx.focus = true)),
onBlur:
_cache[7] ||
(_cache[7] = ($event) => (_ctx.focus = false)),
},
null,
40,
_hoisted_5$o
)),
[[vue.vModelCheckbox, _ctx.model]]
),
],
10,
_hoisted_2$Q
),
_ctx.$slots.default || _ctx.label
? (vue.openBlock(),
vue.createElementBlock("span", _hoisted_6$j, [
vue.renderSlot(_ctx.$slots, "default"),
!_ctx.$slots.default
? (vue.openBlock(),
vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)],
2112
))
: vue.createCommentVNode("v-if", true),
]))
: vue.createCommentVNode("v-if", true),
],
10,
_hoisted_1$15
)
);
}
script$1F.render = render$1x;
script$1F.__file = "packages/components/checkbox/src/checkbox.vue";
var script$1E = vue.defineComponent({
name: "ElCheckboxButton",
props: useCheckboxProps,
emits: [UPDATE_MODEL_EVENT, "change"],
setup(props) {
const { focus, isChecked, isDisabled, size, model, handleChange } =
useCheckbox(props);
const { checkboxGroup } = useCheckboxGroup();
const activeStyle = vue.computed(() => {
var _a, _b, _c, _d;
const fillValue =
(_b =
(_a = checkboxGroup == null ? void 0 : checkboxGroup.fill) == null
? void 0
: _a.value) != null
? _b
: "";
return {
backgroundColor: fillValue,
borderColor: fillValue,
color:
(_d =
(_c = checkboxGroup == null ? void 0 : checkboxGroup.textColor) ==
null
? void 0
: _c.value) != null
? _d
: "",
boxShadow: fillValue ? `-1px 0 0 0 ${fillValue}` : null,
};
});
return {
focus,
isChecked,
isDisabled,
model,
handleChange,
activeStyle,
size,
};
},
});
const _hoisted_1$14 = ["aria-checked", "aria-disabled"];
const _hoisted_2$P = ["name", "disabled", "true-value", "false-value"];
const _hoisted_3$L = ["name", "disabled", "value"];
function render$1w(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"label",
{
class: vue.normalizeClass([
"el-checkbox-button",
[
_ctx.size ? "el-checkbox-button--" + _ctx.size : "",
{ "is-disabled": _ctx.isDisabled },
{ "is-checked": _ctx.isChecked },
{ "is-focus": _ctx.focus },
],
]),
role: "checkbox",
"aria-checked": _ctx.isChecked,
"aria-disabled": _ctx.isDisabled,
},
[
_ctx.trueLabel || _ctx.falseLabel
? vue.withDirectives(
(vue.openBlock(),
vue.createElementBlock(
"input",
{
key: 0,
"onUpdate:modelValue":
_cache[0] ||
(_cache[0] = ($event) => (_ctx.model = $event)),
class: "el-checkbox-button__original",
type: "checkbox",
name: _ctx.name,
disabled: _ctx.isDisabled,
"true-value": _ctx.trueLabel,
"false-value": _ctx.falseLabel,
onChange:
_cache[1] ||
(_cache[1] = (...args) =>
_ctx.handleChange && _ctx.handleChange(...args)),
onFocus:
_cache[2] ||
(_cache[2] = ($event) => (_ctx.focus = true)),
onBlur:
_cache[3] ||
(_cache[3] = ($event) => (_ctx.focus = false)),
},
null,
40,
_hoisted_2$P
)),
[[vue.vModelCheckbox, _ctx.model]]
)
: vue.withDirectives(
(vue.openBlock(),
vue.createElementBlock(
"input",
{
key: 1,
"onUpdate:modelValue":
_cache[4] ||
(_cache[4] = ($event) => (_ctx.model = $event)),
class: "el-checkbox-button__original",
type: "checkbox",
name: _ctx.name,
disabled: _ctx.isDisabled,
value: _ctx.label,
onChange:
_cache[5] ||
(_cache[5] = (...args) =>
_ctx.handleChange && _ctx.handleChange(...args)),
onFocus:
_cache[6] ||
(_cache[6] = ($event) => (_ctx.focus = true)),
onBlur:
_cache[7] ||
(_cache[7] = ($event) => (_ctx.focus = false)),
},
null,
40,
_hoisted_3$L
)),
[[vue.vModelCheckbox, _ctx.model]]
),
_ctx.$slots.default || _ctx.label
? (vue.openBlock(),
vue.createElementBlock(
"span",
{
key: 2,
class: "el-checkbox-button__inner",
style: vue.normalizeStyle(
_ctx.isChecked ? _ctx.activeStyle : null
),
},
[
vue.renderSlot(_ctx.$slots, "default", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.label), 1),
]),
],
4
))
: vue.createCommentVNode("v-if", true),
],
10,
_hoisted_1$14
)
);
}
script$1E.render = render$1w;
script$1E.__file = "packages/components/checkbox/src/checkbox-button.vue";
var __defProp$C = Object.defineProperty;
var __defProps$r = Object.defineProperties;
var __getOwnPropDescs$r = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$C = Object.getOwnPropertySymbols;
var __hasOwnProp$C = Object.prototype.hasOwnProperty;
var __propIsEnum$C = Object.prototype.propertyIsEnumerable;
var __defNormalProp$C = (obj, key, value) =>
key in obj
? __defProp$C(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$C = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$C.call(b, prop)) __defNormalProp$C(a, prop, b[prop]);
if (__getOwnPropSymbols$C)
for (var prop of __getOwnPropSymbols$C(b)) {
if (__propIsEnum$C.call(b, prop)) __defNormalProp$C(a, prop, b[prop]);
}
return a;
};
var __spreadProps$r = (a, b) => __defProps$r(a, __getOwnPropDescs$r(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
var script$1D = vue.defineComponent({
name: "ElCheckboxGroup",
props: {
modelValue: {
type: [Object, Boolean, Array],
default: () => void 0,
},
disabled: Boolean,
min: {
type: Number,
default: void 0,
},
max: {
type: Number,
default: void 0,
},
size: {
type: String,
validator: isValidComponentSize,
},
fill: {
type: String,
default: void 0,
},
textColor: {
type: String,
default: void 0,
},
},
emits: [UPDATE_MODEL_EVENT, "change"],
setup(props, ctx) {
const { elFormItem, elFormItemSize, ELEMENT } = useCheckboxGroup();
const checkboxGroupSize = vue.computed(
() => props.size || elFormItemSize.value || ELEMENT.size
);
const changeEvent = (value) => {
ctx.emit(UPDATE_MODEL_EVENT, value);
vue.nextTick(() => {
ctx.emit("change", value);
});
};
const modelValue = vue.computed({
get() {
return props.modelValue;
},
set(val) {
changeEvent(val);
},
});
vue.provide(
"CheckboxGroup",
__spreadProps$r(
__spreadValues$C(
{
name: "ElCheckboxGroup",
modelValue,
},
vue.toRefs(props)
),
{
checkboxGroupSize,
changeEvent,
}
)
);
vue.watch(
() => props.modelValue,
() => {
var _a;
(_a = elFormItem.validate) == null
? void 0
: _a.call(elFormItem, "change");
}
);
},
});
const _hoisted_1$13 = {
class: "el-checkbox-group",
role: "group",
"aria-label": "checkbox-group",
};
function render$1v(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock("div", _hoisted_1$13, [
vue.renderSlot(_ctx.$slots, "default"),
])
);
}
script$1D.render = render$1v;
script$1D.__file = "packages/components/checkbox/src/checkbox-group.vue";
const ElCheckbox = withInstall(script$1F, {
CheckboxButton: script$1E,
CheckboxGroup: script$1D,
});
const ElCheckboxButton = withNoopInstall(script$1E);
const ElCheckboxGroup$1 = withNoopInstall(script$1D);
const radioGroupKey = "RadioGroup";
const useRadio = () => {
const ELEMENT = useGlobalConfig();
const elForm = vue.inject(elFormKey, {});
const elFormItem = vue.inject(elFormItemKey, {});
const radioGroup = vue.inject(radioGroupKey, {});
const focus = vue.ref(false);
const isGroup = vue.computed(
() => (radioGroup == null ? void 0 : radioGroup.name) === "ElRadioGroup"
);
const elFormItemSize = vue.computed(() => elFormItem.size || ELEMENT.size);
return {
isGroup,
focus,
radioGroup,
elForm,
ELEMENT,
elFormItemSize,
};
};
const useRadioAttrs = (props, { isGroup, radioGroup, elForm, model }) => {
const isDisabled = vue.computed(() => {
return isGroup.value
? radioGroup.disabled || props.disabled || elForm.disabled
: props.disabled || elForm.disabled;
});
const tabIndex = vue.computed(() => {
return isDisabled.value || (isGroup.value && model.value !== props.label)
? -1
: 0;
});
return {
isDisabled,
tabIndex,
};
};
var script$1C = vue.defineComponent({
name: "ElRadio",
componentName: "ElRadio",
props: {
modelValue: {
type: [String, Number, Boolean],
default: "",
},
label: {
type: [String, Number, Boolean],
default: "",
},
disabled: Boolean,
name: {
type: String,
default: "",
},
border: Boolean,
size: {
type: String,
validator: isValidComponentSize,
},
},
emits: [UPDATE_MODEL_EVENT, "change"],
setup(props, ctx) {
const { isGroup, radioGroup, elFormItemSize, ELEMENT, focus, elForm } =
useRadio();
const radioRef = vue.ref();
const model = vue.computed({
get() {
return isGroup.value ? radioGroup.modelValue : props.modelValue;
},
set(val) {
if (isGroup.value) {
radioGroup.changeEvent(val);
} else {
ctx.emit(UPDATE_MODEL_EVENT, val);
}
radioRef.value.checked = props.modelValue === props.label;
},
});
const { tabIndex, isDisabled } = useRadioAttrs(props, {
isGroup,
radioGroup,
elForm,
model,
});
const radioSize = vue.computed(() => {
const temRadioSize = props.size || elFormItemSize.value || ELEMENT.size;
return isGroup.value
? radioGroup.radioGroupSize || temRadioSize
: temRadioSize;
});
function handleChange() {
vue.nextTick(() => {
ctx.emit("change", model.value);
});
}
return {
focus,
isGroup,
isDisabled,
model,
tabIndex,
radioSize,
handleChange,
radioRef,
};
},
});
const _hoisted_1$12 = ["aria-checked", "aria-disabled", "tabindex"];
const _hoisted_2$O = /* @__PURE__ */ vue.createElementVNode(
"span",
{ class: "el-radio__inner" },
null,
-1
);
const _hoisted_3$K = ["value", "name", "disabled"];
function render$1u(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"label",
{
class: vue.normalizeClass([
"el-radio",
{
[`el-radio--${_ctx.radioSize || ""}`]: _ctx.radioSize,
"is-disabled": _ctx.isDisabled,
"is-focus": _ctx.focus,
"is-bordered": _ctx.border,
"is-checked": _ctx.model === _ctx.label,
},
]),
role: "radio",
"aria-checked": _ctx.model === _ctx.label,
"aria-disabled": _ctx.isDisabled,
tabindex: _ctx.tabIndex,
onKeydown:
_cache[5] ||
(_cache[5] = vue.withKeys(
vue.withModifiers(
($event) =>
(_ctx.model = _ctx.isDisabled ? _ctx.model : _ctx.label),
["stop", "prevent"]
),
["space"]
)),
},
[
vue.createElementVNode(
"span",
{
class: vue.normalizeClass([
"el-radio__input",
{
"is-disabled": _ctx.isDisabled,
"is-checked": _ctx.model === _ctx.label,
},
]),
},
[
_hoisted_2$O,
vue.withDirectives(
vue.createElementVNode(
"input",
{
ref: "radioRef",
"onUpdate:modelValue":
_cache[0] ||
(_cache[0] = ($event) => (_ctx.model = $event)),
class: "el-radio__original",
value: _ctx.label,
type: "radio",
"aria-hidden": "true",
name: _ctx.name,
disabled: _ctx.isDisabled,
tabindex: "-1",
onFocus:
_cache[1] ||
(_cache[1] = ($event) => (_ctx.focus = true)),
onBlur:
_cache[2] ||
(_cache[2] = ($event) => (_ctx.focus = false)),
onChange:
_cache[3] ||
(_cache[3] = (...args) =>
_ctx.handleChange && _ctx.handleChange(...args)),
},
null,
40,
_hoisted_3$K
),
[[vue.vModelRadio, _ctx.model]]
),
],
2
),
vue.createElementVNode(
"span",
{
class: "el-radio__label",
onKeydown:
_cache[4] ||
(_cache[4] = vue.withModifiers(() => {}, ["stop"])),
},
[
vue.renderSlot(_ctx.$slots, "default", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.label), 1),
]),
],
32
),
],
42,
_hoisted_1$12
)
);
}
script$1C.render = render$1u;
script$1C.__file = "packages/components/radio/src/radio.vue";
var script$1B = vue.defineComponent({
name: "ElRadioButton",
props: {
label: {
type: [String, Number, Boolean],
default: "",
},
disabled: Boolean,
name: {
type: String,
default: "",
},
},
setup(props) {
const { isGroup, radioGroup, elFormItemSize, ELEMENT, focus, elForm } =
useRadio();
const size = vue.computed(() => {
return (
radioGroup.radioGroupSize || elFormItemSize.value || ELEMENT.size
);
});
const radioRef = vue.ref();
const value = vue.computed({
get() {
return radioGroup.modelValue;
},
set(value2) {
radioGroup.changeEvent(value2);
radioRef.value.checked = radioGroup.modelValue === props.label;
},
});
const { isDisabled, tabIndex } = useRadioAttrs(props, {
model: value,
elForm,
radioGroup,
isGroup,
});
const activeStyle = vue.computed(() => {
return {
backgroundColor: radioGroup.fill || "",
borderColor: radioGroup.fill || "",
boxShadow: radioGroup.fill ? `-1px 0 0 0 ${radioGroup.fill}` : "",
color: radioGroup.textColor || "",
};
});
return {
isGroup,
size,
isDisabled,
tabIndex,
value,
focus,
activeStyle,
radioRef,
};
},
});
const _hoisted_1$11 = ["aria-checked", "aria-disabled", "tabindex"];
const _hoisted_2$N = ["value", "name", "disabled"];
function render$1t(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"label",
{
class: vue.normalizeClass([
"el-radio-button",
[
_ctx.size ? "el-radio-button--" + _ctx.size : "",
{
"is-active": _ctx.value === _ctx.label,
"is-disabled": _ctx.isDisabled,
"is-focus": _ctx.focus,
},
],
]),
role: "radio",
"aria-checked": _ctx.value === _ctx.label,
"aria-disabled": _ctx.isDisabled,
tabindex: _ctx.tabIndex,
onKeydown:
_cache[4] ||
(_cache[4] = vue.withKeys(
vue.withModifiers(
($event) =>
(_ctx.value = _ctx.isDisabled ? _ctx.value : _ctx.label),
["stop", "prevent"]
),
["space"]
)),
},
[
vue.withDirectives(
vue.createElementVNode(
"input",
{
ref: "radioRef",
"onUpdate:modelValue":
_cache[0] || (_cache[0] = ($event) => (_ctx.value = $event)),
class: "el-radio-button__original-radio",
value: _ctx.label,
type: "radio",
name: _ctx.name,
disabled: _ctx.isDisabled,
tabindex: "-1",
onFocus:
_cache[1] || (_cache[1] = ($event) => (_ctx.focus = true)),
onBlur:
_cache[2] || (_cache[2] = ($event) => (_ctx.focus = false)),
},
null,
40,
_hoisted_2$N
),
[[vue.vModelRadio, _ctx.value]]
),
vue.createElementVNode(
"span",
{
class: "el-radio-button__inner",
style: vue.normalizeStyle(
_ctx.value === _ctx.label ? _ctx.activeStyle : null
),
onKeydown:
_cache[3] ||
(_cache[3] = vue.withModifiers(() => {}, ["stop"])),
},
[
vue.renderSlot(_ctx.$slots, "default", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.label), 1),
]),
],
36
),
],
42,
_hoisted_1$11
)
);
}
script$1B.render = render$1t;
script$1B.__file = "packages/components/radio/src/radio-button.vue";
var __defProp$B = Object.defineProperty;
var __defProps$q = Object.defineProperties;
var __getOwnPropDescs$q = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$B = Object.getOwnPropertySymbols;
var __hasOwnProp$B = Object.prototype.hasOwnProperty;
var __propIsEnum$B = Object.prototype.propertyIsEnumerable;
var __defNormalProp$B = (obj, key, value) =>
key in obj
? __defProp$B(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$B = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$B.call(b, prop)) __defNormalProp$B(a, prop, b[prop]);
if (__getOwnPropSymbols$B)
for (var prop of __getOwnPropSymbols$B(b)) {
if (__propIsEnum$B.call(b, prop)) __defNormalProp$B(a, prop, b[prop]);
}
return a;
};
var __spreadProps$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
var script$1A = vue.defineComponent({
name: "ElRadioGroup",
componentName: "ElRadioGroup",
props: {
modelValue: {
type: [String, Number, Boolean],
default: "",
},
size: {
type: String,
validator: isValidComponentSize,
},
fill: {
type: String,
default: "",
},
textColor: {
type: String,
default: "",
},
disabled: Boolean,
},
emits: [UPDATE_MODEL_EVENT, "change"],
setup(props, ctx) {
const radioGroup = vue.ref(null);
const elFormItem = vue.inject(elFormItemKey, {});
const radioGroupSize = vue.computed(() => {
return props.size || elFormItem.size;
});
const changeEvent = (value) => {
ctx.emit(UPDATE_MODEL_EVENT, value);
vue.nextTick(() => {
ctx.emit("change", value);
});
};
vue.provide(
radioGroupKey,
vue.reactive(
__spreadProps$q(
__spreadValues$B(
{
name: "ElRadioGroup",
},
vue.toRefs(props)
),
{
radioGroupSize,
changeEvent,
}
)
)
);
vue.watch(
() => props.modelValue,
() => {
var _a;
(_a = elFormItem.validate) == null
? void 0
: _a.call(elFormItem, "change");
}
);
const handleKeydown = (e) => {
const target = e.target;
const className =
target.nodeName === "INPUT" ? "[type=radio]" : "[role=radio]";
const radios = radioGroup.value.querySelectorAll(className);
const length = radios.length;
const index = Array.from(radios).indexOf(target);
const roleRadios = radioGroup.value.querySelectorAll("[role=radio]");
let nextIndex = null;
switch (e.code) {
case EVENT_CODE.left:
case EVENT_CODE.up:
e.stopPropagation();
e.preventDefault();
nextIndex = index === 0 ? length - 1 : index - 1;
break;
case EVENT_CODE.right:
case EVENT_CODE.down:
e.stopPropagation();
e.preventDefault();
nextIndex = index === length - 1 ? 0 : index + 1;
break;
}
if (nextIndex === null) return;
roleRadios[nextIndex].click();
roleRadios[nextIndex].focus();
};
vue.onMounted(() => {
const radios = radioGroup.value.querySelectorAll("[type=radio]");
const firstLabel = radios[0];
if (!Array.from(radios).some((radio) => radio.checked) && firstLabel) {
firstLabel.tabIndex = 0;
}
});
return {
handleKeydown,
radioGroupSize,
radioGroup,
};
},
});
function render$1s(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
ref: "radioGroup",
class: "el-radio-group",
role: "radiogroup",
onKeydown:
_cache[0] ||
(_cache[0] = (...args) =>
_ctx.handleKeydown && _ctx.handleKeydown(...args)),
},
[vue.renderSlot(_ctx.$slots, "default")],
544
)
);
}
script$1A.render = render$1s;
script$1A.__file = "packages/components/radio/src/radio-group.vue";
const ElRadio = withInstall(script$1C, {
RadioButton: script$1B,
RadioGroup: script$1A,
});
const ElRadioGroup = withNoopInstall(script$1A);
const ElRadioButton = withNoopInstall(script$1B);
var NodeContent = vue.defineComponent({
name: "NodeContent",
render() {
const { node, panel } = this.$parent;
const { data, label } = node;
const { renderLabelFn } = panel;
return vue.h(
"span",
{ class: "el-cascader-node__label" },
renderLabelFn ? renderLabelFn({ node, data }) : label
);
},
});
exports.ExpandTrigger = void 0;
(function (ExpandTrigger2) {
ExpandTrigger2["CLICK"] = "click";
ExpandTrigger2["HOVER"] = "hover";
})(exports.ExpandTrigger || (exports.ExpandTrigger = {}));
const CASCADER_PANEL_INJECTION_KEY = Symbol();
var script$1z = vue.defineComponent({
name: "ElCascaderNode",
components: {
ElCheckbox,
ElRadio,
NodeContent,
},
props: {
node: {
type: Object,
required: true,
},
menuId: String,
},
emits: ["expand"],
setup(props, { emit }) {
const panel = vue.inject(CASCADER_PANEL_INJECTION_KEY);
const isHoverMenu = vue.computed(() => panel.isHoverMenu);
const multiple = vue.computed(() => panel.config.multiple);
const checkStrictly = vue.computed(() => panel.config.checkStrictly);
const checkedNodeId = vue.computed(() => {
var _a;
return (_a = panel.checkedNodes[0]) == null ? void 0 : _a.uid;
});
const isDisabled = vue.computed(() => props.node.isDisabled);
const isLeaf = vue.computed(() => props.node.isLeaf);
const expandable = vue.computed(
() => (checkStrictly.value && !isLeaf.value) || !isDisabled.value
);
const inExpandingPath = vue.computed(() => isInPath(panel.expandingNode));
const inCheckedPath = vue.computed(
() => checkStrictly.value && panel.checkedNodes.some(isInPath)
);
const isInPath = (node) => {
var _a;
const { level, uid } = props.node;
return (
((_a = node == null ? void 0 : node.pathNodes[level - 1]) == null
? void 0
: _a.uid) === uid
);
};
const doExpand = () => {
if (inExpandingPath.value) return;
panel.expandNode(props.node);
};
const doCheck = (checked) => {
const { node } = props;
if (checked === node.checked) return;
panel.handleCheckChange(node, checked);
};
const doLoad = () => {
panel.lazyLoad(props.node, () => {
if (!isLeaf.value) doExpand();
});
};
const handleHoverExpand = (e) => {
if (!isHoverMenu.value) return;
handleExpand();
!isLeaf.value && emit("expand", e);
};
const handleExpand = () => {
const { node } = props;
if (!expandable.value || node.loading) return;
node.loaded ? doExpand() : doLoad();
};
const handleClick = () => {
if (isHoverMenu.value && !isLeaf.value) return;
if (
isLeaf.value &&
!isDisabled.value &&
!checkStrictly.value &&
!multiple.value
) {
handleCheck(true);
} else {
handleExpand();
}
};
const handleCheck = (checked) => {
if (!props.node.loaded) {
doLoad();
} else {
doCheck(checked);
!checkStrictly.value && doExpand();
}
};
return {
panel,
isHoverMenu,
multiple,
checkStrictly,
checkedNodeId,
isDisabled,
isLeaf,
expandable,
inExpandingPath,
inCheckedPath,
handleHoverExpand,
handleExpand,
handleClick,
handleCheck,
};
},
});
const _hoisted_1$10 = [
"id",
"aria-haspopup",
"aria-owns",
"aria-expanded",
"tabindex",
];
const _hoisted_2$M = /* @__PURE__ */ vue.createElementVNode(
"span",
null,
null,
-1
);
const _hoisted_3$J = {
key: 2,
class: "el-icon-check el-cascader-node__prefix",
};
const _hoisted_4$t = {
key: 0,
class: "el-icon-loading el-cascader-node__postfix",
};
const _hoisted_5$n = {
key: 1,
class: "el-icon-arrow-right el-cascader-node__postfix",
};
function render$1r(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_checkbox = vue.resolveComponent("el-checkbox");
const _component_el_radio = vue.resolveComponent("el-radio");
const _component_node_content = vue.resolveComponent("node-content");
return (
vue.openBlock(),
vue.createElementBlock(
"li",
{
id: `${_ctx.menuId}-${_ctx.node.uid}`,
role: "menuitem",
"aria-haspopup": !_ctx.isLeaf,
"aria-owns": _ctx.isLeaf ? null : _ctx.menuId,
"aria-expanded": _ctx.inExpandingPath,
tabindex: _ctx.expandable ? -1 : null,
class: vue.normalizeClass([
"el-cascader-node",
_ctx.checkStrictly && "is-selectable",
_ctx.inExpandingPath && "in-active-path",
_ctx.inCheckedPath && "in-checked-path",
_ctx.node.checked && "is-active",
!_ctx.expandable && "is-disabled",
]),
onMouseenter:
_cache[2] ||
(_cache[2] = (...args) =>
_ctx.handleHoverExpand && _ctx.handleHoverExpand(...args)),
onFocus:
_cache[3] ||
(_cache[3] = (...args) =>
_ctx.handleHoverExpand && _ctx.handleHoverExpand(...args)),
onClick:
_cache[4] ||
(_cache[4] = (...args) =>
_ctx.handleClick && _ctx.handleClick(...args)),
},
[
vue.createCommentVNode(" prefix "),
_ctx.multiple
? (vue.openBlock(),
vue.createBlock(
_component_el_checkbox,
{
key: 0,
"model-value": _ctx.node.checked,
indeterminate: _ctx.node.indeterminate,
disabled: _ctx.isDisabled,
onClick:
_cache[0] ||
(_cache[0] = vue.withModifiers(() => {}, ["stop"])),
"onUpdate:modelValue": _ctx.handleCheck,
},
null,
8,
[
"model-value",
"indeterminate",
"disabled",
"onUpdate:modelValue",
]
))
: _ctx.checkStrictly
? (vue.openBlock(),
vue.createBlock(
_component_el_radio,
{
key: 1,
"model-value": _ctx.checkedNodeId,
label: _ctx.node.uid,
disabled: _ctx.isDisabled,
"onUpdate:modelValue": _ctx.handleCheck,
onClick:
_cache[1] ||
(_cache[1] = vue.withModifiers(() => {}, ["stop"])),
},
{
default: vue.withCtx(() => [
vue.createCommentVNode(
"\n Add an empty element to avoid render label,\n do not use empty fragment here for https://github.com/vuejs/vue-next/pull/2485\n "
),
_hoisted_2$M,
]),
_: 1,
},
8,
["model-value", "label", "disabled", "onUpdate:modelValue"]
))
: _ctx.isLeaf && _ctx.node.checked
? (vue.openBlock(), vue.createElementBlock("i", _hoisted_3$J))
: vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" content "),
vue.createVNode(_component_node_content),
vue.createCommentVNode(" postfix "),
!_ctx.isLeaf
? (vue.openBlock(),
vue.createElementBlock(
vue.Fragment,
{ key: 3 },
[
_ctx.node.loading
? (vue.openBlock(),
vue.createElementBlock("i", _hoisted_4$t))
: (vue.openBlock(),
vue.createElementBlock("i", _hoisted_5$n)),
],
2112
))
: vue.createCommentVNode("v-if", true),
],
42,
_hoisted_1$10
)
);
}
script$1z.render = render$1r;
script$1z.__file = "packages/components/cascader-panel/src/node.vue";
var script$1y = vue.defineComponent({
name: "ElCascaderMenu",
components: {
ElScrollbar: _Scrollbar,
ElCascaderNode: script$1z,
},
props: {
nodes: {
type: Array,
required: true,
},
index: {
type: Number,
required: true,
},
},
setup(props) {
const instance = vue.getCurrentInstance();
const { t } = useLocaleInject();
const id = generateId();
let activeNode = null;
let hoverTimer = null;
const panel = vue.inject(CASCADER_PANEL_INJECTION_KEY);
const hoverZone = vue.ref(null);
const isEmpty = vue.computed(() => !props.nodes.length);
const menuId = vue.computed(() => `cascader-menu-${id}-${props.index}`);
const handleExpand = (e) => {
activeNode = e.target;
};
const handleMouseMove = (e) => {
if (!panel.isHoverMenu || !activeNode || !hoverZone.value) return;
if (activeNode.contains(e.target)) {
clearHoverTimer();
const el = instance.vnode.el;
const { left } = el.getBoundingClientRect();
const { offsetWidth, offsetHeight } = el;
const startX = e.clientX - left;
const top = activeNode.offsetTop;
const bottom = top + activeNode.offsetHeight;
hoverZone.value.innerHTML = `
<path style="pointer-events: auto;" fill="transparent" d="M${startX} ${top} L${offsetWidth} 0 V${top} Z" />
<path style="pointer-events: auto;" fill="transparent" d="M${startX} ${bottom} L${offsetWidth} ${offsetHeight} V${bottom} Z" />
`;
} else if (!hoverTimer) {
hoverTimer = window.setTimeout(
clearHoverZone,
panel.config.hoverThreshold
);
}
};
const clearHoverTimer = () => {
if (!hoverTimer) return;
clearTimeout(hoverTimer);
hoverTimer = null;
};
const clearHoverZone = () => {
if (!hoverZone.value) return;
hoverZone.value.innerHTML = "";
clearHoverTimer();
};
return {
panel,
hoverZone,
isEmpty,
menuId,
t,
handleExpand,
handleMouseMove,
clearHoverZone,
};
},
});
const _hoisted_1$$ = {
key: 0,
class: "el-cascader-menu__empty-text",
};
const _hoisted_2$L = {
key: 1,
ref: "hoverZone",
class: "el-cascader-menu__hover-zone",
};
function render$1q(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_cascader_node =
vue.resolveComponent("el-cascader-node");
const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
return (
vue.openBlock(),
vue.createBlock(
_component_el_scrollbar,
{
key: _ctx.menuId,
tag: "ul",
role: "menu",
class: "el-cascader-menu",
"wrap-class": "el-cascader-menu__wrap",
"view-class": ["el-cascader-menu__list", _ctx.isEmpty && "is-empty"],
onMousemove: _ctx.handleMouseMove,
onMouseleave: _ctx.clearHoverZone,
},
{
default: vue.withCtx(() => [
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.nodes, (node) => {
return (
vue.openBlock(),
vue.createBlock(
_component_el_cascader_node,
{
key: node.uid,
node,
"menu-id": _ctx.menuId,
onExpand: _ctx.handleExpand,
},
null,
8,
["node", "menu-id", "onExpand"]
)
);
}),
128
)),
_ctx.isEmpty
? (vue.openBlock(),
vue.createElementBlock(
"div",
_hoisted_1$$,
vue.toDisplayString(_ctx.t("el.cascader.noData")),
1
))
: _ctx.panel.isHoverMenu
? (vue.openBlock(),
vue.createElementBlock("svg", _hoisted_2$L, null, 512))
: vue.createCommentVNode("v-if", true),
]),
_: 1,
},
8,
["view-class", "onMousemove", "onMouseleave"]
)
);
}
script$1y.render = render$1q;
script$1y.__file = "packages/components/cascader-panel/src/menu.vue";
var ExpandTrigger;
(function (ExpandTrigger2) {
ExpandTrigger2["CLICK"] = "click";
ExpandTrigger2["HOVER"] = "hover";
})(ExpandTrigger || (ExpandTrigger = {}));
let uid = 0;
const calculatePathNodes = (node) => {
const nodes = [node];
let { parent } = node;
while (parent) {
nodes.unshift(parent);
parent = parent.parent;
}
return nodes;
};
class Node$2 {
constructor(data, config, parent, root = false) {
this.data = data;
this.config = config;
this.parent = parent;
this.root = root;
this.uid = uid++;
this.checked = false;
this.indeterminate = false;
this.loading = false;
const {
value: valueKey,
label: labelKey,
children: childrenKey,
} = config;
const childrenData = data[childrenKey];
const pathNodes = calculatePathNodes(this);
this.level = root ? 0 : parent ? parent.level + 1 : 1;
this.value = data[valueKey];
this.label = data[labelKey];
this.pathNodes = pathNodes;
this.pathValues = pathNodes.map((node) => node.value);
this.pathLabels = pathNodes.map((node) => node.label);
this.childrenData = childrenData;
this.children = (childrenData || []).map(
(child) => new Node$2(child, config, this)
);
this.loaded = !config.lazy || this.isLeaf || !isEmpty(childrenData);
}
get isDisabled() {
const { data, parent, config } = this;
const { disabled, checkStrictly } = config;
const isDisabled = isFunction$1(disabled)
? disabled(data, this)
: !!data[disabled];
return (
isDisabled ||
(!checkStrictly && (parent == null ? void 0 : parent.isDisabled))
);
}
get isLeaf() {
const { data, config, childrenData, loaded } = this;
const { lazy, leaf } = config;
const isLeaf = isFunction$1(leaf) ? leaf(data, this) : data[leaf];
return isUndefined(isLeaf)
? lazy && !loaded
? false
: !Array.isArray(childrenData)
: !!isLeaf;
}
get valueByOption() {
return this.config.emitPath ? this.pathValues : this.value;
}
appendChild(childData) {
const { childrenData, children } = this;
const node = new Node$2(childData, this.config, this);
if (Array.isArray(childrenData)) {
childrenData.push(childData);
} else {
this.childrenData = [childData];
}
children.push(node);
return node;
}
calcText(allLevels, separator) {
const text = allLevels ? this.pathLabels.join(separator) : this.label;
this.text = text;
return text;
}
broadcast(event, ...args) {
const handlerName = `onParent${capitalize(event)}`;
this.children.forEach((child) => {
if (child) {
child.broadcast(event, ...args);
child[handlerName] && child[handlerName](...args);
}
});
}
emit(event, ...args) {
const { parent } = this;
const handlerName = `onChild${capitalize(event)}`;
if (parent) {
parent[handlerName] && parent[handlerName](...args);
parent.emit(event, ...args);
}
}
onParentCheck(checked) {
if (!this.isDisabled) {
this.setCheckState(checked);
}
}
onChildCheck() {
const { children } = this;
const validChildren = children.filter((child) => !child.isDisabled);
const checked = validChildren.length
? validChildren.every((child) => child.checked)
: false;
this.setCheckState(checked);
}
setCheckState(checked) {
const totalNum = this.children.length;
const checkedNum = this.children.reduce((c, p) => {
const num = p.checked ? 1 : p.indeterminate ? 0.5 : 0;
return c + num;
}, 0);
this.checked =
this.loaded &&
this.children.every((child) => child.loaded && child.checked) &&
checked;
this.indeterminate =
this.loaded && checkedNum !== totalNum && checkedNum > 0;
}
doCheck(checked) {
if (this.checked === checked) return;
const { checkStrictly, multiple } = this.config;
if (checkStrictly || !multiple) {
this.checked = checked;
} else {
this.broadcast("check", checked);
this.setCheckState(checked);
this.emit("check");
}
}
}
const flatNodes = (nodes, leafOnly) => {
return nodes.reduce((res, node) => {
if (node.isLeaf) {
res.push(node);
} else {
!leafOnly && res.push(node);
res = res.concat(flatNodes(node.children, leafOnly));
}
return res;
}, []);
};
class Store {
constructor(data, config) {
this.config = config;
const nodes = (data || []).map(
(nodeData) => new Node$2(nodeData, this.config)
);
this.nodes = nodes;
this.allNodes = flatNodes(nodes, false);
this.leafNodes = flatNodes(nodes, true);
}
getNodes() {
return this.nodes;
}
getFlattedNodes(leafOnly) {
return leafOnly ? this.leafNodes : this.allNodes;
}
appendNode(nodeData, parentNode) {
const node = parentNode
? parentNode.appendChild(nodeData)
: new Node$2(nodeData, this.config);
if (!parentNode) this.nodes.push(node);
this.allNodes.push(node);
node.isLeaf && this.leafNodes.push(node);
}
appendNodes(nodeDataList, parentNode) {
nodeDataList.forEach((nodeData) => this.appendNode(nodeData, parentNode));
}
getNodeByValue(value, leafOnly = false) {
if (!value && value !== 0) return null;
const nodes = this.getFlattedNodes(leafOnly).filter(
(node) =>
isEqual$2(node.value, value) || isEqual$2(node.pathValues, value)
);
return nodes[0] || null;
}
getSameNode(node) {
if (!node) return null;
const nodes = this.getFlattedNodes(false).filter(
({ value, level }) =>
isEqual$2(node.value, value) && node.level === level
);
return nodes[0] || null;
}
}
var __defProp$A = Object.defineProperty;
var __getOwnPropSymbols$A = Object.getOwnPropertySymbols;
var __hasOwnProp$A = Object.prototype.hasOwnProperty;
var __propIsEnum$A = Object.prototype.propertyIsEnumerable;
var __defNormalProp$A = (obj, key, value) =>
key in obj
? __defProp$A(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$A = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$A.call(b, prop)) __defNormalProp$A(a, prop, b[prop]);
if (__getOwnPropSymbols$A)
for (var prop of __getOwnPropSymbols$A(b)) {
if (__propIsEnum$A.call(b, prop)) __defNormalProp$A(a, prop, b[prop]);
}
return a;
};
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
const CommonProps = {
modelValue: [Number, String, Array],
options: {
type: Array,
default: () => [],
},
props: {
type: Object,
default: () => ({}),
},
};
const DefaultProps = {
expandTrigger: ExpandTrigger.CLICK,
multiple: false,
checkStrictly: false,
emitPath: true,
lazy: false,
lazyLoad: NOOP,
value: "value",
label: "label",
children: "children",
leaf: "leaf",
disabled: "disabled",
hoverThreshold: 500,
};
const useCascaderConfig = (props) => {
return vue.computed(() =>
__spreadValues$A(__spreadValues$A({}, DefaultProps), props.props)
);
};
const isLeaf = (el) => !el.getAttribute("aria-owns");
const getSibling = (el, distance) => {
const { parentNode } = el;
if (!parentNode) return null;
const siblings = parentNode.querySelectorAll(
'.el-cascader-node[tabindex="-1"]'
);
const index = Array.prototype.indexOf.call(siblings, el);
return siblings[index + distance] || null;
};
const getMenuIndex = (el) => {
if (!el) return 0;
const pieces = el.id.split("-");
return Number(pieces[pieces.length - 2]);
};
const focusNode = (el) => {
if (!el) return;
el.focus();
!isLeaf(el) && el.click();
};
const checkNode = (el) => {
if (!el) return;
const input = el.querySelector("input");
if (input) {
input.click();
} else if (isLeaf(el)) {
el.click();
}
};
const sortByOriginalOrder = (oldNodes, newNodes) => {
const newNodesCopy = newNodes.slice(0);
const newIds = newNodesCopy.map((node) => node.uid);
const res = oldNodes.reduce((acc, item) => {
const index = newIds.indexOf(item.uid);
if (index > -1) {
acc.push(item);
newNodesCopy.splice(index, 1);
newIds.splice(index, 1);
}
return acc;
}, []);
res.push(...newNodesCopy);
return res;
};
var __defProp$z = Object.defineProperty;
var __defProps$p = Object.defineProperties;
var __getOwnPropDescs$p = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$z = Object.getOwnPropertySymbols;
var __hasOwnProp$z = Object.prototype.hasOwnProperty;
var __propIsEnum$z = Object.prototype.propertyIsEnumerable;
var __defNormalProp$z = (obj, key, value) =>
key in obj
? __defProp$z(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$z = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$z.call(b, prop)) __defNormalProp$z(a, prop, b[prop]);
if (__getOwnPropSymbols$z)
for (var prop of __getOwnPropSymbols$z(b)) {
if (__propIsEnum$z.call(b, prop)) __defNormalProp$z(a, prop, b[prop]);
}
return a;
};
var __spreadProps$p = (a, b) => __defProps$p(a, __getOwnPropDescs$p(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
var script$1x = vue.defineComponent({
name: "ElCascaderPanel",
components: {
ElCascaderMenu: script$1y,
},
props: __spreadProps$p(__spreadValues$z({}, CommonProps), {
border: {
type: Boolean,
default: true,
},
renderLabel: Function,
}),
emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT, "close", "expand-change"],
setup(props, { emit, slots }) {
let initialLoaded = true;
let manualChecked = false;
const config = useCascaderConfig(props);
const store = vue.ref(null);
const menuList = vue.ref([]);
const checkedValue = vue.ref(null);
const menus = vue.ref([]);
const expandingNode = vue.ref(null);
const checkedNodes = vue.ref([]);
const isHoverMenu = vue.computed(
() => config.value.expandTrigger === ExpandTrigger.HOVER
);
const renderLabelFn = vue.computed(
() => props.renderLabel || slots.default
);
let oldConfig;
let oldOptions;
const initStore = () => {
const { options } = props;
const cfg = config.value;
const configTemp = config;
if (
oldOptions === void 0 ||
oldOptions !== options ||
oldConfig === void 0 ||
configTemp !== oldConfig
) {
manualChecked = false;
store.value = new Store(options, cfg);
menus.value = [store.value.getNodes()];
if (cfg.lazy && isEmpty(props.options)) {
initialLoaded = false;
lazyLoad(null, () => {
initialLoaded = true;
syncCheckedValue(false, true);
});
} else {
syncCheckedValue(false, true);
}
}
oldConfig = configTemp;
oldOptions = options;
};
const lazyLoad = (node, cb) => {
const cfg = config.value;
node = node || new Node$2({}, cfg, null, true);
node.loading = true;
const resolve = (dataList) => {
const parent = node.root ? null : node;
dataList && store.value.appendNodes(dataList, parent);
node.loading = false;
node.loaded = true;
node.childrenData = node.childrenData || [];
cb && cb(dataList);
};
cfg.lazyLoad(node, resolve);
};
const expandNode = (node, silent) => {
var _a;
const { level } = node;
const newMenus = menus.value.slice(0, level);
let newExpandingNode;
if (node.isLeaf) {
newExpandingNode = node.pathNodes[level - 2];
} else {
newExpandingNode = node;
newMenus.push(node.children);
}
if (
((_a = expandingNode.value) == null ? void 0 : _a.uid) !==
(newExpandingNode == null ? void 0 : newExpandingNode.uid)
) {
expandingNode.value = node;
menus.value = newMenus;
!silent &&
emit(
"expand-change",
(node == null ? void 0 : node.pathValues) || []
);
}
};
const handleCheckChange = (node, checked, emitClose = true) => {
const { checkStrictly, multiple } = config.value;
const oldNode = checkedNodes.value[0];
manualChecked = true;
!multiple && (oldNode == null ? void 0 : oldNode.doCheck(false));
node.doCheck(checked);
calculateCheckedValue();
emitClose && !multiple && !checkStrictly && emit("close");
};
const getFlattedNodes = (leafOnly) => {
return store.value.getFlattedNodes(leafOnly);
};
const getCheckedNodes = (leafOnly) => {
return getFlattedNodes(leafOnly).filter(
(node) => node.checked !== false
);
};
const clearCheckedNodes = () => {
checkedNodes.value.forEach((node) => node.doCheck(false));
calculateCheckedValue();
};
const calculateCheckedValue = () => {
var _a;
const { checkStrictly, multiple } = config.value;
const oldNodes = checkedNodes.value;
const newNodes = getCheckedNodes(!checkStrictly);
const nodes = sortByOriginalOrder(oldNodes, newNodes);
const values = nodes.map((node) => node.valueByOption);
checkedNodes.value = nodes;
checkedValue.value = multiple
? values
: (_a = values[0]) != null
? _a
: null;
};
const syncCheckedValue = (loaded = false, forced = false) => {
const { modelValue } = props;
const { lazy, multiple, checkStrictly } = config.value;
const leafOnly = !checkStrictly;
if (
!initialLoaded ||
manualChecked ||
(!forced && isEqual$2(modelValue, checkedValue.value))
)
return;
if (lazy && !loaded) {
const values = deduplicate(
arrayFlat(coerceTruthyValueToArray(modelValue))
);
const nodes = values
.map((val) => store.value.getNodeByValue(val))
.filter((node) => !!node && !node.loaded && !node.loading);
if (nodes.length) {
nodes.forEach((node) => {
lazyLoad(node, () => syncCheckedValue(false, forced));
});
} else {
syncCheckedValue(true, forced);
}
} else {
const values = multiple
? coerceTruthyValueToArray(modelValue)
: [modelValue];
const nodes = deduplicate(
values.map((val) => store.value.getNodeByValue(val, leafOnly))
);
syncMenuState(nodes, false);
checkedValue.value = modelValue;
}
};
const syncMenuState = (newCheckedNodes, reserveExpandingState = true) => {
const { checkStrictly } = config.value;
const oldNodes = checkedNodes.value;
const newNodes = newCheckedNodes.filter(
(node) => !!node && (checkStrictly || node.isLeaf)
);
const oldExpandingNode = store.value.getSameNode(expandingNode.value);
const newExpandingNode =
(reserveExpandingState && oldExpandingNode) || newNodes[0];
if (newExpandingNode) {
newExpandingNode.pathNodes.forEach((node) => expandNode(node, true));
} else {
expandingNode.value = null;
}
oldNodes.forEach((node) => node.doCheck(false));
newNodes.forEach((node) => node.doCheck(true));
checkedNodes.value = newNodes;
vue.nextTick(scrollToExpandingNode);
};
const scrollToExpandingNode = () => {
if (isServer) return;
menuList.value.forEach((menu) => {
const menuElement = menu == null ? void 0 : menu.$el;
if (menuElement) {
const container = menuElement.querySelector(".el-scrollbar__wrap");
const activeNode =
menuElement.querySelector(".el-cascader-node.is-active") ||
menuElement.querySelector(".el-cascader-node.in-active-path");
scrollIntoView(container, activeNode);
}
});
};
const handleKeyDown = (e) => {
const target = e.target;
const { code } = e;
switch (code) {
case EVENT_CODE.up:
case EVENT_CODE.down: {
const distance = code === EVENT_CODE.up ? -1 : 1;
focusNode(getSibling(target, distance));
break;
}
case EVENT_CODE.left: {
const preMenu = menuList.value[getMenuIndex(target) - 1];
const expandedNode =
preMenu == null
? void 0
: preMenu.$el.querySelector(
'.el-cascader-node[aria-expanded="true"]'
);
focusNode(expandedNode);
break;
}
case EVENT_CODE.right: {
const nextMenu = menuList.value[getMenuIndex(target) + 1];
const firstNode =
nextMenu == null
? void 0
: nextMenu.$el.querySelector(
'.el-cascader-node[tabindex="-1"]'
);
focusNode(firstNode);
break;
}
case EVENT_CODE.enter:
checkNode(target);
break;
case EVENT_CODE.esc:
case EVENT_CODE.tab:
emit("close");
break;
}
};
vue.provide(
CASCADER_PANEL_INJECTION_KEY,
vue.reactive({
config,
expandingNode,
checkedNodes,
isHoverMenu,
renderLabelFn,
lazyLoad,
expandNode,
handleCheckChange,
})
);
vue.watch([config, () => props.options], () => initStore(), {
deep: true,
immediate: true,
});
vue.watch(
() => props.modelValue,
() => {
manualChecked = false;
syncCheckedValue();
}
);
vue.watch(checkedValue, (val) => {
if (!isEqual$2(val, props.modelValue)) {
emit(UPDATE_MODEL_EVENT, val);
emit(CHANGE_EVENT, val);
}
});
vue.onBeforeUpdate(() => (menuList.value = []));
vue.onMounted(() => !isEmpty(props.modelValue) && syncCheckedValue());
return {
menuList,
menus,
checkedNodes,
handleKeyDown,
handleCheckChange,
getFlattedNodes,
getCheckedNodes,
clearCheckedNodes,
calculateCheckedValue,
scrollToExpandingNode,
};
},
});
function render$1p(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_cascader_menu =
vue.resolveComponent("el-cascader-menu");
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
class: vue.normalizeClass([
"el-cascader-panel",
_ctx.border && "is-bordered",
]),
onKeydown:
_cache[0] ||
(_cache[0] = (...args) =>
_ctx.handleKeyDown && _ctx.handleKeyDown(...args)),
},
[
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.menus, (menu, index) => {
return (
vue.openBlock(),
vue.createBlock(
_component_el_cascader_menu,
{
key: index,
ref: (item) => (_ctx.menuList[index] = item),
index,
nodes: menu,
},
null,
8,
["index", "nodes"]
)
);
}),
128
)),
],
34
)
);
}
script$1x.render = render$1p;
script$1x.__file = "packages/components/cascader-panel/src/index.vue";
script$1x.install = (app) => {
app.component(script$1x.name, script$1x);
};
const _CascaderPanel = script$1x;
const ElCascaderPanel = _CascaderPanel;
const tagProps = {
closable: Boolean,
type: buildProp({
type: String,
values: ["success", "info", "warning", "danger", ""],
default: "",
}),
hit: Boolean,
disableTransitions: Boolean,
color: {
type: String,
default: "",
},
size: buildProp({
type: String,
values: ["medium", "small", "mini"],
}),
effect: buildProp({
type: String,
values: ["dark", "light", "plain"],
default: "light",
}),
};
const tagEmits = {
close: (evt) => evt instanceof MouseEvent,
click: (evt) => evt instanceof MouseEvent,
};
var script$1w = vue.defineComponent({
name: "ElTag",
props: tagProps,
emits: tagEmits,
setup(props, { emit }) {
const ELEMENT = useGlobalConfig();
const tagSize = vue.computed(() => props.size || ELEMENT.size);
const classes = vue.computed(() => {
const { type, hit, effect } = props;
return [
"el-tag",
type ? `el-tag--${type}` : "",
tagSize.value ? `el-tag--${tagSize.value}` : "",
effect ? `el-tag--${effect}` : "",
hit && "is-hit",
];
});
const handleClose = (event) => {
event.stopPropagation();
emit("close", event);
};
const handleClick = (event) => {
emit("click", event);
};
return {
classes,
handleClose,
handleClick,
};
},
});
function render$1o(_ctx, _cache, $props, $setup, $data, $options) {
return !_ctx.disableTransitions
? (vue.openBlock(),
vue.createElementBlock(
"span",
{
key: 0,
class: vue.normalizeClass(_ctx.classes),
style: vue.normalizeStyle({ backgroundColor: _ctx.color }),
onClick:
_cache[1] ||
(_cache[1] = (...args) =>
_ctx.handleClick && _ctx.handleClick(...args)),
},
[
vue.renderSlot(_ctx.$slots, "default"),
_ctx.closable
? (vue.openBlock(),
vue.createElementBlock("i", {
key: 0,
class: "el-tag__close el-icon-close",
onClick:
_cache[0] ||
(_cache[0] = (...args) =>
_ctx.handleClose && _ctx.handleClose(...args)),
}))
: vue.createCommentVNode("v-if", true),
],
6
))
: (vue.openBlock(),
vue.createBlock(
vue.Transition,
{
key: 1,
name: "el-zoom-in-center",
},
{
default: vue.withCtx(() => [
vue.createElementVNode(
"span",
{
class: vue.normalizeClass(_ctx.classes),
style: vue.normalizeStyle({ backgroundColor: _ctx.color }),
onClick:
_cache[3] ||
(_cache[3] = (...args) =>
_ctx.handleClick && _ctx.handleClick(...args)),
},
[
vue.renderSlot(_ctx.$slots, "default"),
_ctx.closable
? (vue.openBlock(),
vue.createElementBlock("i", {
key: 0,
class: "el-tag__close el-icon-close",
onClick:
_cache[2] ||
(_cache[2] = (...args) =>
_ctx.handleClose && _ctx.handleClose(...args)),
}))
: vue.createCommentVNode("v-if", true),
],
6
),
]),
_: 3,
}
));
}
script$1w.render = render$1o;
script$1w.__file = "packages/components/tag/src/tag.vue";
const ElTag = withInstall(script$1w);
var __defProp$y = Object.defineProperty;
var __defProps$o = Object.defineProperties;
var __getOwnPropDescs$o = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$y = Object.getOwnPropertySymbols;
var __hasOwnProp$y = Object.prototype.hasOwnProperty;
var __propIsEnum$y = Object.prototype.propertyIsEnumerable;
var __defNormalProp$y = (obj, key, value) =>
key in obj
? __defProp$y(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$y = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$y.call(b, prop)) __defNormalProp$y(a, prop, b[prop]);
if (__getOwnPropSymbols$y)
for (var prop of __getOwnPropSymbols$y(b)) {
if (__propIsEnum$y.call(b, prop)) __defNormalProp$y(a, prop, b[prop]);
}
return a;
};
var __spreadProps$o = (a, b) => __defProps$o(a, __getOwnPropDescs$o(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
const DEFAULT_INPUT_HEIGHT = 40;
const INPUT_HEIGHT_MAP = {
medium: 36,
small: 32,
mini: 28,
};
const popperOptions = {
modifiers: [
{
name: "arrowPosition",
enabled: true,
phase: "main",
fn: ({ state }) => {
const { modifiersData, placement } = state;
if (["right", "left"].includes(placement)) return;
modifiersData.arrow.x = 35;
},
requires: ["arrow"],
},
],
};
var script$1v = vue.defineComponent({
name: "ElCascader",
components: {
ElCascaderPanel: _CascaderPanel,
ElInput: _Input,
ElPopper: _Popper,
ElScrollbar: _Scrollbar,
ElTag,
},
directives: {
Clickoutside: ClickOutside,
},
props: __spreadProps$o(__spreadValues$y({}, CommonProps), {
size: {
type: String,
validator: isValidComponentSize,
},
placeholder: {
type: String,
},
disabled: Boolean,
clearable: Boolean,
filterable: Boolean,
filterMethod: {
type: Function,
default: (node, keyword) => node.text.includes(keyword),
},
separator: {
type: String,
default: " / ",
},
showAllLevels: {
type: Boolean,
default: true,
},
collapseTags: Boolean,
debounce: {
type: Number,
default: 300,
},
beforeFilter: {
type: Function,
default: () => true,
},
popperClass: {
type: String,
default: "",
},
popperAppendToBody: {
type: Boolean,
default: true,
},
}),
emits: [
UPDATE_MODEL_EVENT,
CHANGE_EVENT,
"focus",
"blur",
"visible-change",
"expand-change",
"remove-tag",
],
setup(props, { emit }) {
let inputInitialHeight = 0;
let pressDeleteCount = 0;
const { t } = useLocaleInject();
const $ELEMENT = useGlobalConfig();
const elForm = vue.inject(elFormKey, {});
const elFormItem = vue.inject(elFormItemKey, {});
const popper = vue.ref(null);
const input = vue.ref(null);
const tagWrapper = vue.ref(null);
const panel = vue.ref(null);
const suggestionPanel = vue.ref(null);
const popperVisible = vue.ref(false);
const inputHover = vue.ref(false);
const filtering = vue.ref(false);
const inputValue = vue.ref("");
const searchInputValue = vue.ref("");
const presentTags = vue.ref([]);
const suggestions = vue.ref([]);
const isDisabled = vue.computed(() => props.disabled || elForm.disabled);
const inputPlaceholder = vue.computed(
() => props.placeholder || t("el.cascader.placeholder")
);
const realSize = vue.computed(
() => props.size || elFormItem.size || $ELEMENT.size
);
const tagSize = vue.computed(() =>
["small", "mini"].includes(realSize.value) ? "mini" : "small"
);
const multiple = vue.computed(() => !!props.props.multiple);
const readonly = vue.computed(() => !props.filterable || multiple.value);
const searchKeyword = vue.computed(() =>
multiple.value ? searchInputValue.value : inputValue.value
);
const checkedNodes = vue.computed(() => {
var _a;
return ((_a = panel.value) == null ? void 0 : _a.checkedNodes) || [];
});
const clearBtnVisible = vue.computed(() => {
if (
!props.clearable ||
isDisabled.value ||
filtering.value ||
!inputHover.value
)
return false;
return !!checkedNodes.value.length;
});
const presentText = vue.computed(() => {
const { showAllLevels, separator } = props;
const nodes = checkedNodes.value;
return nodes.length
? multiple.value
? " "
: nodes[0].calcText(showAllLevels, separator)
: "";
});
const checkedValue = vue.computed({
get() {
return props.modelValue;
},
set(val) {
var _a;
emit(UPDATE_MODEL_EVENT, val);
emit(CHANGE_EVENT, val);
(_a = elFormItem.validate) == null
? void 0
: _a.call(elFormItem, "change");
},
});
const popperPaneRef = vue.computed(() => {
var _a;
return (_a = popper.value) == null ? void 0 : _a.popperRef;
});
const togglePopperVisible = (visible) => {
if (isDisabled.value) return;
visible = visible != null ? visible : !popperVisible.value;
if (visible !== popperVisible.value) {
popperVisible.value = visible;
input.value.input.setAttribute("aria-expanded", visible);
if (visible) {
updatePopperPosition();
vue.nextTick(panel.value.scrollToExpandingNode);
} else if (props.filterable) {
const { value } = presentText;
inputValue.value = value;
searchInputValue.value = value;
}
emit("visible-change", visible);
}
};
const updatePopperPosition = () => {
vue.nextTick(popper.value.update);
};
const hideSuggestionPanel = () => {
filtering.value = false;
};
const genTag = (node) => {
const { showAllLevels, separator } = props;
return {
node,
key: node.uid,
text: node.calcText(showAllLevels, separator),
hitState: false,
closable: !isDisabled.value && !node.isDisabled,
};
};
const deleteTag = (tag) => {
const { node } = tag;
node.doCheck(false);
panel.value.calculateCheckedValue();
emit("remove-tag", node.valueByOption);
};
const calculatePresentTags = () => {
if (!multiple.value) return;
const nodes = checkedNodes.value;
const tags = [];
if (nodes.length) {
const [first, ...rest] = nodes;
const restCount = rest.length;
tags.push(genTag(first));
if (restCount) {
if (props.collapseTags) {
tags.push({
key: -1,
text: `+ ${restCount}`,
closable: false,
});
} else {
rest.forEach((node) => tags.push(genTag(node)));
}
}
}
presentTags.value = tags;
};
const calculateSuggestions = () => {
const { filterMethod, showAllLevels, separator } = props;
const res = panel.value
.getFlattedNodes(!props.props.checkStrictly)
.filter((node) => {
if (node.isDisabled) return false;
node.calcText(showAllLevels, separator);
return filterMethod(node, searchKeyword.value);
});
if (multiple.value) {
presentTags.value.forEach((tag) => {
tag.hitState = false;
});
}
filtering.value = true;
suggestions.value = res;
updatePopperPosition();
};
const focusFirstNode = () => {
var _a;
let firstNode = null;
if (filtering.value && suggestionPanel.value) {
firstNode = suggestionPanel.value.$el.querySelector(
".el-cascader__suggestion-item"
);
} else {
firstNode =
(_a = panel.value) == null
? void 0
: _a.$el.querySelector('.el-cascader-node[tabindex="-1"]');
}
if (firstNode) {
firstNode.focus();
!filtering.value && firstNode.click();
}
};
const updateStyle = () => {
var _a;
const inputInner = input.value.input;
const tagWrapperEl = tagWrapper.value;
const suggestionPanelEl =
(_a = suggestionPanel.value) == null ? void 0 : _a.$el;
if (isServer || !inputInner) return;
if (suggestionPanelEl) {
const suggestionList = suggestionPanelEl.querySelector(
".el-cascader__suggestion-list"
);
suggestionList.style.minWidth = `${inputInner.offsetWidth}px`;
}
if (tagWrapperEl) {
const { offsetHeight } = tagWrapperEl;
const height =
presentTags.value.length > 0
? `${Math.max(offsetHeight + 6, inputInitialHeight)}px`
: `${inputInitialHeight}px`;
inputInner.style.height = height;
updatePopperPosition();
}
};
const getCheckedNodes = (leafOnly) => {
return panel.value.getCheckedNodes(leafOnly);
};
const handleExpandChange = (value) => {
updatePopperPosition();
emit("expand-change", value);
};
const handleKeyDown = (e) => {
switch (e.code) {
case EVENT_CODE.enter:
togglePopperVisible();
break;
case EVENT_CODE.down:
togglePopperVisible(true);
vue.nextTick(focusFirstNode);
e.preventDefault();
break;
case EVENT_CODE.esc:
case EVENT_CODE.tab:
togglePopperVisible(false);
break;
}
};
const handleClear = () => {
panel.value.clearCheckedNodes();
togglePopperVisible(false);
};
const handleSuggestionClick = (node) => {
const { checked } = node;
if (multiple.value) {
panel.value.handleCheckChange(node, !checked, false);
} else {
!checked && panel.value.handleCheckChange(node, true, false);
togglePopperVisible(false);
}
};
const handleDelete = () => {
const tags = presentTags.value;
const lastTag = tags[tags.length - 1];
pressDeleteCount = searchInputValue.value ? 0 : pressDeleteCount + 1;
if (!lastTag || !pressDeleteCount) return;
if (lastTag.hitState) {
deleteTag(lastTag);
} else {
lastTag.hitState = true;
}
};
const handleFilter = debounce_1(() => {
const { value } = searchKeyword;
if (!value) return;
const passed = props.beforeFilter(value);
if (isPromise(passed)) {
passed.then(calculateSuggestions).catch(() => {});
} else if (passed !== false) {
calculateSuggestions();
} else {
hideSuggestionPanel();
}
}, props.debounce);
const handleInput = (val, e) => {
!popperVisible.value && togglePopperVisible(true);
if (e == null ? void 0 : e.isComposing) return;
val ? handleFilter() : hideSuggestionPanel();
};
vue.watch(filtering, updatePopperPosition);
vue.watch([checkedNodes, isDisabled], calculatePresentTags);
vue.watch(presentTags, () => vue.nextTick(updateStyle));
vue.watch(presentText, (val) => (inputValue.value = val), {
immediate: true,
});
vue.onMounted(() => {
const inputEl = input.value.$el;
inputInitialHeight =
(inputEl == null ? void 0 : inputEl.offsetHeight) ||
INPUT_HEIGHT_MAP[realSize.value] ||
DEFAULT_INPUT_HEIGHT;
addResizeListener(inputEl, updateStyle);
});
vue.onBeforeUnmount(() => {
removeResizeListener(input.value.$el, updateStyle);
});
return {
Effect: exports.Effect,
popperOptions,
popper,
popperPaneRef,
input,
tagWrapper,
panel,
suggestionPanel,
popperVisible,
inputHover,
inputPlaceholder,
filtering,
presentText,
checkedValue,
inputValue,
searchInputValue,
presentTags,
suggestions,
isDisabled,
realSize,
tagSize,
multiple,
readonly,
clearBtnVisible,
t,
togglePopperVisible,
hideSuggestionPanel,
deleteTag,
focusFirstNode,
getCheckedNodes,
handleExpandChange,
handleKeyDown,
handleClear,
handleSuggestionClick,
handleDelete,
handleInput,
};
},
});
const _hoisted_1$_ = {
key: 0,
ref: "tagWrapper",
class: "el-cascader__tags",
};
const _hoisted_2$K = ["placeholder"];
const _hoisted_3$I = ["onClick"];
const _hoisted_4$s = {
key: 0,
class: "el-icon-check",
};
const _hoisted_5$m = { class: "el-cascader__empty-text" };
function render$1n(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_input = vue.resolveComponent("el-input");
const _component_el_tag = vue.resolveComponent("el-tag");
const _component_el_cascader_panel =
vue.resolveComponent("el-cascader-panel");
const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
const _component_el_popper = vue.resolveComponent("el-popper");
const _directive_clickoutside = vue.resolveDirective("clickoutside");
return (
vue.openBlock(),
vue.createBlock(
_component_el_popper,
{
ref: "popper",
visible: _ctx.popperVisible,
"onUpdate:visible":
_cache[15] ||
(_cache[15] = ($event) => (_ctx.popperVisible = $event)),
"manual-mode": "",
"append-to-body": _ctx.popperAppendToBody,
placement: "bottom-start",
"popper-class": `el-cascader__dropdown ${_ctx.popperClass}`,
"popper-options": _ctx.popperOptions,
"fallback-placements": ["bottom-start", "top-start", "right", "left"],
"stop-popper-mouse-event": false,
transition: "el-zoom-in-top",
"gpu-acceleration": false,
effect: _ctx.Effect.LIGHT,
pure: "",
onAfterLeave: _ctx.hideSuggestionPanel,
},
{
trigger: vue.withCtx(() => [
vue.withDirectives(
vue.createElementVNode(
"div",
{
class: vue.normalizeClass([
"el-cascader",
_ctx.realSize && `el-cascader--${_ctx.realSize}`,
{ "is-disabled": _ctx.isDisabled },
]),
onClick:
_cache[9] ||
(_cache[9] = () =>
_ctx.togglePopperVisible(_ctx.readonly ? void 0 : true)),
onKeydown:
_cache[10] ||
(_cache[10] = (...args) =>
_ctx.handleKeyDown && _ctx.handleKeyDown(...args)),
onMouseenter:
_cache[11] ||
(_cache[11] = ($event) => (_ctx.inputHover = true)),
onMouseleave:
_cache[12] ||
(_cache[12] = ($event) => (_ctx.inputHover = false)),
},
[
vue.createVNode(
_component_el_input,
{
ref: "input",
modelValue: _ctx.inputValue,
"onUpdate:modelValue":
_cache[2] ||
(_cache[2] = ($event) => (_ctx.inputValue = $event)),
modelModifiers: { trim: true },
placeholder: _ctx.inputPlaceholder,
readonly: _ctx.readonly,
disabled: _ctx.isDisabled,
"validate-event": false,
size: _ctx.realSize,
class: vue.normalizeClass({
"is-focus": _ctx.popperVisible,
}),
onFocus:
_cache[3] ||
(_cache[3] = (e) => _ctx.$emit("focus", e)),
onBlur:
_cache[4] || (_cache[4] = (e) => _ctx.$emit("blur", e)),
onInput: _ctx.handleInput,
},
{
suffix: vue.withCtx(() => [
_ctx.clearBtnVisible
? (vue.openBlock(),
vue.createElementBlock("i", {
key: "clear",
class: "el-input__icon el-icon-circle-close",
onClick:
_cache[0] ||
(_cache[0] = vue.withModifiers(
(...args) =>
_ctx.handleClear &&
_ctx.handleClear(...args),
["stop"]
)),
}))
: (vue.openBlock(),
vue.createElementBlock(
"i",
{
key: "arrow-down",
class: vue.normalizeClass([
"el-input__icon",
"el-icon-arrow-down",
_ctx.popperVisible && "is-reverse",
]),
onClick:
_cache[1] ||
(_cache[1] = vue.withModifiers(
($event) => _ctx.togglePopperVisible(),
["stop"]
)),
},
null,
2
)),
]),
_: 1,
},
8,
[
"modelValue",
"placeholder",
"readonly",
"disabled",
"size",
"class",
"onInput",
]
),
_ctx.multiple
? (vue.openBlock(),
vue.createElementBlock(
"div",
_hoisted_1$_,
[
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.presentTags, (tag) => {
return (
vue.openBlock(),
vue.createBlock(
_component_el_tag,
{
key: tag.key,
type: "info",
size: _ctx.tagSize,
hit: tag.hitState,
closable: tag.closable,
"disable-transitions": "",
onClose: ($event) => _ctx.deleteTag(tag),
},
{
default: vue.withCtx(() => [
vue.createElementVNode(
"span",
null,
vue.toDisplayString(tag.text),
1
),
]),
_: 2,
},
1032,
["size", "hit", "closable", "onClose"]
)
);
}),
128
)),
_ctx.filterable && !_ctx.isDisabled
? vue.withDirectives(
(vue.openBlock(),
vue.createElementBlock(
"input",
{
key: 0,
"onUpdate:modelValue":
_cache[5] ||
(_cache[5] = ($event) =>
(_ctx.searchInputValue = $event)),
type: "text",
class: "el-cascader__search-input",
placeholder: _ctx.presentText
? ""
: _ctx.inputPlaceholder,
onInput:
_cache[6] ||
(_cache[6] = (e) =>
_ctx.handleInput(
_ctx.searchInputValue,
e
)),
onClick:
_cache[7] ||
(_cache[7] = vue.withModifiers(
($event) =>
_ctx.togglePopperVisible(true),
["stop"]
)),
onKeydown:
_cache[8] ||
(_cache[8] = vue.withKeys(
(...args) =>
_ctx.handleDelete &&
_ctx.handleDelete(...args),
["delete"]
)),
},
null,
40,
_hoisted_2$K
)),
[
[
vue.vModelText,
_ctx.searchInputValue,
void 0,
{ trim: true },
],
]
)
: vue.createCommentVNode("v-if", true),
],
512
))
: vue.createCommentVNode("v-if", true),
],
34
),
[
[
_directive_clickoutside,
() => _ctx.togglePopperVisible(false),
_ctx.popperPaneRef,
],
]
),
]),
default: vue.withCtx(() => [
vue.withDirectives(
vue.createVNode(
_component_el_cascader_panel,
{
ref: "panel",
modelValue: _ctx.checkedValue,
"onUpdate:modelValue":
_cache[13] ||
(_cache[13] = ($event) => (_ctx.checkedValue = $event)),
options: _ctx.options,
props: _ctx.props,
border: false,
"render-label": _ctx.$slots.default,
onExpandChange: _ctx.handleExpandChange,
onClose:
_cache[14] ||
(_cache[14] = ($event) => _ctx.togglePopperVisible(false)),
},
null,
8,
[
"modelValue",
"options",
"props",
"render-label",
"onExpandChange",
]
),
[[vue.vShow, !_ctx.filtering]]
),
_ctx.filterable
? vue.withDirectives(
(vue.openBlock(),
vue.createBlock(
_component_el_scrollbar,
{
key: 0,
ref: "suggestionPanel",
tag: "ul",
class: "el-cascader__suggestion-panel",
"view-class": "el-cascader__suggestion-list",
},
{
default: vue.withCtx(() => [
_ctx.suggestions.length
? (vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
{ key: 0 },
vue.renderList(_ctx.suggestions, (item) => {
return (
vue.openBlock(),
vue.createElementBlock(
"li",
{
key: item.uid,
class: vue.normalizeClass([
"el-cascader__suggestion-item",
item.checked && "is-checked",
]),
tabindex: -1,
onClick: ($event) =>
_ctx.handleSuggestionClick(item),
},
[
vue.createElementVNode(
"span",
null,
vue.toDisplayString(item.text),
1
),
item.checked
? (vue.openBlock(),
vue.createElementBlock(
"i",
_hoisted_4$s
))
: vue.createCommentVNode("v-if", true),
],
10,
_hoisted_3$I
)
);
}),
128
))
: vue.renderSlot(
_ctx.$slots,
"empty",
{ key: 1 },
() => [
vue.createElementVNode(
"li",
_hoisted_5$m,
vue.toDisplayString(
_ctx.t("el.cascader.noMatch")
),
1
),
]
),
]),
_: 3,
},
512
)),
[[vue.vShow, _ctx.filtering]]
)
: vue.createCommentVNode("v-if", true),
]),
_: 3,
},
8,
[
"visible",
"append-to-body",
"popper-class",
"popper-options",
"effect",
"onAfterLeave",
]
)
);
}
script$1v.render = render$1n;
script$1v.__file = "packages/components/cascader/src/index.vue";
script$1v.install = (app) => {
app.component(script$1v.name, script$1v);
};
const _Cascader = script$1v;
const ElCascader = _Cascader;
const checkTagProps = {
checked: {
type: Boolean,
default: false,
},
};
var script$1u = vue.defineComponent({
name: "ElCheckTag",
props: checkTagProps,
emits: ["change", "update:checked"],
setup(props, { emit }) {
const onChange = () => {
const checked = !props.checked;
emit("change", checked);
emit("update:checked", checked);
};
return {
onChange,
};
},
});
function render$1m(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"span",
{
class: vue.normalizeClass({
"el-check-tag": true,
"is-checked": _ctx.checked,
}),
onClick:
_cache[0] ||
(_cache[0] = (...args) => _ctx.onChange && _ctx.onChange(...args)),
},
[vue.renderSlot(_ctx.$slots, "default")],
2
)
);
}
script$1u.render = render$1m;
script$1u.__file = "packages/components/check-tag/src/index.vue";
const ElCheckTag = withInstall(script$1u);
const ElCol$1 = vue.defineComponent({
name: "ElCol",
props: {
tag: {
type: String,
default: "div",
},
span: {
type: Number,
default: 24,
},
offset: {
type: Number,
default: 0,
},
pull: {
type: Number,
default: 0,
},
push: {
type: Number,
default: 0,
},
xs: {
type: [Number, Object],
default: () => ({}),
},
sm: {
type: [Number, Object],
default: () => ({}),
},
md: {
type: [Number, Object],
default: () => ({}),
},
lg: {
type: [Number, Object],
default: () => ({}),
},
xl: {
type: [Number, Object],
default: () => ({}),
},
},
setup(props, { slots }) {
const { gutter } = vue.inject("ElRow", { gutter: { value: 0 } });
const style = vue.computed(() => {
if (gutter.value) {
return {
paddingLeft: `${gutter.value / 2}px`,
paddingRight: `${gutter.value / 2}px`,
};
}
return {};
});
const classList = vue.computed(() => {
const ret = [];
const pos = ["span", "offset", "pull", "push"];
pos.forEach((prop) => {
const size = props[prop];
if (typeof size === "number") {
if (prop === "span") ret.push(`el-col-${props[prop]}`);
else if (size > 0) ret.push(`el-col-${prop}-${props[prop]}`);
}
});
const sizes = ["xs", "sm", "md", "lg", "xl"];
sizes.forEach((size) => {
if (typeof props[size] === "number") {
ret.push(`el-col-${size}-${props[size]}`);
} else if (typeof props[size] === "object") {
const sizeProps = props[size];
Object.keys(sizeProps).forEach((prop) => {
ret.push(
prop !== "span"
? `el-col-${size}-${prop}-${sizeProps[prop]}`
: `el-col-${size}-${sizeProps[prop]}`
);
});
}
});
if (gutter.value) {
ret.push("is-guttered");
}
return ret;
});
return () => {
var _a;
return vue.h(
props.tag,
{
class: ["el-col", classList.value],
style: style.value,
},
(_a = slots.default) == null ? void 0 : _a.call(slots)
);
};
},
});
const _Col = ElCol$1;
_Col.install = (app) => {
app.component(_Col.name, _Col);
};
const ElCol = _Col;
var script$1t = vue.defineComponent({
name: "ElCollapse",
props: {
accordion: Boolean,
modelValue: {
type: [Array, String, Number],
default: () => [],
},
},
emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT],
setup(props, { emit }) {
const activeNames = vue.ref([].concat(props.modelValue));
const setActiveNames = (_activeNames) => {
activeNames.value = [].concat(_activeNames);
const value = props.accordion
? activeNames.value[0]
: activeNames.value;
emit(UPDATE_MODEL_EVENT, value);
emit(CHANGE_EVENT, value);
};
const handleItemClick = (name) => {
if (props.accordion) {
setActiveNames(
(activeNames.value[0] || activeNames.value[0] === 0) &&
activeNames.value[0] === name
? ""
: name
);
} else {
const _activeNames = activeNames.value.slice(0);
const index = _activeNames.indexOf(name);
if (index > -1) {
_activeNames.splice(index, 1);
} else {
_activeNames.push(name);
}
setActiveNames(_activeNames);
}
};
vue.watch(
() => props.modelValue,
() => {
activeNames.value = [].concat(props.modelValue);
}
);
vue.provide("collapse", {
activeNames,
handleItemClick,
});
return {
activeNames,
setActiveNames,
handleItemClick,
};
},
});
const _hoisted_1$Z = {
class: "el-collapse",
role: "tablist",
"aria-multiselectable": "true",
};
function render$1l(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock("div", _hoisted_1$Z, [
vue.renderSlot(_ctx.$slots, "default"),
])
);
}
script$1t.render = render$1l;
script$1t.__file = "packages/components/collapse/src/collapse.vue";
var script$1s = vue.defineComponent({
name: "ElCollapseTransition",
setup() {
return {
on: {
beforeEnter(el) {
addClass(el, "collapse-transition");
if (!el.dataset) el.dataset = {};
el.dataset.oldPaddingTop = el.style.paddingTop;
el.dataset.oldPaddingBottom = el.style.paddingBottom;
el.style.height = "0";
el.style.paddingTop = 0;
el.style.paddingBottom = 0;
},
enter(el) {
el.dataset.oldOverflow = el.style.overflow;
if (el.scrollHeight !== 0) {
el.style.height = `${el.scrollHeight}px`;
el.style.paddingTop = el.dataset.oldPaddingTop;
el.style.paddingBottom = el.dataset.oldPaddingBottom;
} else {
el.style.height = "";
el.style.paddingTop = el.dataset.oldPaddingTop;
el.style.paddingBottom = el.dataset.oldPaddingBottom;
}
el.style.overflow = "hidden";
},
afterEnter(el) {
removeClass(el, "collapse-transition");
el.style.height = "";
el.style.overflow = el.dataset.oldOverflow;
},
beforeLeave(el) {
if (!el.dataset) el.dataset = {};
el.dataset.oldPaddingTop = el.style.paddingTop;
el.dataset.oldPaddingBottom = el.style.paddingBottom;
el.dataset.oldOverflow = el.style.overflow;
el.style.height = `${el.scrollHeight}px`;
el.style.overflow = "hidden";
},
leave(el) {
if (el.scrollHeight !== 0) {
addClass(el, "collapse-transition");
el.style.transitionProperty = "height";
el.style.height = 0;
el.style.paddingTop = 0;
el.style.paddingBottom = 0;
}
},
afterLeave(el) {
removeClass(el, "collapse-transition");
el.style.height = "";
el.style.overflow = el.dataset.oldOverflow;
el.style.paddingTop = el.dataset.oldPaddingTop;
el.style.paddingBottom = el.dataset.oldPaddingBottom;
},
},
};
},
});
function render$1k(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createBlock(
vue.Transition,
vue.toHandlers(_ctx.on),
{
default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
_: 3,
},
16
)
);
}
script$1s.render = render$1k;
script$1s.__file =
"packages/components/collapse-transition/src/collapse-transition.vue";
script$1s.install = (app) => {
app.component(script$1s.name, script$1s);
};
const _CollapseTransition = script$1s;
const ElCollapseTransition = _CollapseTransition;
var script$1r = vue.defineComponent({
name: "ElCollapseItem",
components: { ElCollapseTransition: _CollapseTransition },
props: {
title: {
type: String,
default: "",
},
name: {
type: [String, Number],
default: () => {
return generateId();
},
},
disabled: Boolean,
},
setup(props) {
const collapse = vue.inject("collapse");
const contentWrapStyle = vue.ref({
height: "auto",
display: "block",
});
const contentHeight = vue.ref(0);
const focusing = vue.ref(false);
const isClick = vue.ref(false);
const id = vue.ref(generateId());
const isActive = vue.computed(() => {
return (
(collapse == null
? void 0
: collapse.activeNames.value.indexOf(props.name)) > -1
);
});
const handleFocus = () => {
setTimeout(() => {
if (!isClick.value) {
focusing.value = true;
} else {
isClick.value = false;
}
}, 50);
};
const handleHeaderClick = () => {
if (props.disabled) return;
collapse == null ? void 0 : collapse.handleItemClick(props.name);
focusing.value = false;
isClick.value = true;
};
const handleEnterClick = () => {
collapse == null ? void 0 : collapse.handleItemClick(props.name);
};
return {
isActive,
contentWrapStyle,
contentHeight,
focusing,
isClick,
id,
handleFocus,
handleHeaderClick,
handleEnterClick,
collapse,
};
},
});
const _hoisted_1$Y = ["aria-expanded", "aria-controls", "aria-describedby"];
const _hoisted_2$J = ["id", "tabindex"];
const _hoisted_3$H = ["id", "aria-hidden", "aria-labelledby"];
const _hoisted_4$r = { class: "el-collapse-item__content" };
function render$1j(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_collapse_transition = vue.resolveComponent(
"el-collapse-transition"
);
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
class: vue.normalizeClass([
"el-collapse-item",
{ "is-active": _ctx.isActive, "is-disabled": _ctx.disabled },
]),
},
[
vue.createElementVNode(
"div",
{
role: "tab",
"aria-expanded": _ctx.isActive,
"aria-controls": `el-collapse-content-${_ctx.id}`,
"aria-describedby": `el-collapse-content-${_ctx.id}`,
},
[
vue.createElementVNode(
"div",
{
id: `el-collapse-head-${_ctx.id}`,
class: vue.normalizeClass([
"el-collapse-item__header",
{
focusing: _ctx.focusing,
"is-active": _ctx.isActive,
},
]),
role: "button",
tabindex: _ctx.disabled ? -1 : 0,
onClick:
_cache[0] ||
(_cache[0] = (...args) =>
_ctx.handleHeaderClick &&
_ctx.handleHeaderClick(...args)),
onKeyup:
_cache[1] ||
(_cache[1] = vue.withKeys(
vue.withModifiers(
(...args) =>
_ctx.handleEnterClick &&
_ctx.handleEnterClick(...args),
["stop"]
),
["space", "enter"]
)),
onFocus:
_cache[2] ||
(_cache[2] = (...args) =>
_ctx.handleFocus && _ctx.handleFocus(...args)),
onBlur:
_cache[3] ||
(_cache[3] = ($event) => (_ctx.focusing = false)),
},
[
vue.renderSlot(_ctx.$slots, "title", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.title), 1),
]),
vue.createElementVNode(
"i",
{
class: vue.normalizeClass([
"el-collapse-item__arrow el-icon-arrow-right",
{ "is-active": _ctx.isActive },
]),
},
null,
2
),
],
42,
_hoisted_2$J
),
],
8,
_hoisted_1$Y
),
vue.createVNode(_component_el_collapse_transition, null, {
default: vue.withCtx(() => [
vue.withDirectives(
vue.createElementVNode(
"div",
{
id: `el-collapse-content-${_ctx.id}`,
class: "el-collapse-item__wrap",
role: "tabpanel",
"aria-hidden": !_ctx.isActive,
"aria-labelledby": `el-collapse-head-${_ctx.id}`,
},
[
vue.createElementVNode("div", _hoisted_4$r, [
vue.renderSlot(_ctx.$slots, "default"),
]),
],
8,
_hoisted_3$H
),
[[vue.vShow, _ctx.isActive]]
),
]),
_: 3,
}),
],
2
)
);
}
script$1r.render = render$1j;
script$1r.__file = "packages/components/collapse/src/collapse-item.vue";
const ElCollapse = withInstall(script$1t, {
CollapseItem: script$1r,
});
const ElCollapseItem = withNoopInstall(script$1r);
let isDragging = false;
function draggable(element, options) {
if (isServer) return;
const moveFn = function (event) {
var _a;
(_a = options.drag) == null ? void 0 : _a.call(options, event);
};
const upFn = function (event) {
var _a;
off(document, "mousemove", moveFn);
off(document, "mouseup", upFn);
document.onselectstart = null;
document.ondragstart = null;
isDragging = false;
(_a = options.end) == null ? void 0 : _a.call(options, event);
};
on(element, "mousedown", function (event) {
var _a;
if (isDragging) return;
document.onselectstart = () => false;
document.ondragstart = () => false;
on(document, "mousemove", moveFn);
on(document, "mouseup", upFn);
isDragging = true;
(_a = options.start) == null ? void 0 : _a.call(options, event);
});
}
var script$1q = vue.defineComponent({
name: "ElColorAlphaSlider",
props: {
color: {
type: Object,
required: true,
},
vertical: {
type: Boolean,
default: false,
},
},
setup(props) {
const instance = vue.getCurrentInstance();
const thumb = vue.shallowRef(null);
const bar = vue.shallowRef(null);
const thumbLeft = vue.ref(0);
const thumbTop = vue.ref(0);
const background = vue.ref(null);
vue.watch(
() => props.color.get("alpha"),
() => {
update();
}
);
vue.watch(
() => props.color.value,
() => {
update();
}
);
function getThumbLeft() {
if (props.vertical) return 0;
const el = instance.vnode.el;
const alpha = props.color.get("alpha");
if (!el) return 0;
return Math.round(
(alpha * (el.offsetWidth - thumb.value.offsetWidth / 2)) / 100
);
}
function getThumbTop() {
const el = instance.vnode.el;
if (!props.vertical) return 0;
const alpha = props.color.get("alpha");
if (!el) return 0;
return Math.round(
(alpha * (el.offsetHeight - thumb.value.offsetHeight / 2)) / 100
);
}
function getBackground() {
if (props.color && props.color.value) {
const { r, g, b } = props.color.toRgb();
return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`;
}
return null;
}
function handleClick(event) {
const target = event.target;
if (target !== thumb.value) {
handleDrag(event);
}
}
function handleDrag(event) {
const el = instance.vnode.el;
const rect = el.getBoundingClientRect();
if (!props.vertical) {
let left = event.clientX - rect.left;
left = Math.max(thumb.value.offsetWidth / 2, left);
left = Math.min(left, rect.width - thumb.value.offsetWidth / 2);
props.color.set(
"alpha",
Math.round(
((left - thumb.value.offsetWidth / 2) /
(rect.width - thumb.value.offsetWidth)) *
100
)
);
} else {
let top = event.clientY - rect.top;
top = Math.max(thumb.value.offsetHeight / 2, top);
top = Math.min(top, rect.height - thumb.value.offsetHeight / 2);
props.color.set(
"alpha",
Math.round(
((top - thumb.value.offsetHeight / 2) /
(rect.height - thumb.value.offsetHeight)) *
100
)
);
}
}
function update() {
thumbLeft.value = getThumbLeft();
thumbTop.value = getThumbTop();
background.value = getBackground();
}
vue.onMounted(() => {
const dragConfig = {
drag: (event) => {
handleDrag(event);
},
end: (event) => {
handleDrag(event);
},
};
draggable(bar.value, dragConfig);
draggable(thumb.value, dragConfig);
update();
});
return {
thumb,
bar,
thumbLeft,
thumbTop,
background,
handleClick,
update,
};
},
});
function render$1i(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
class: vue.normalizeClass([
"el-color-alpha-slider",
{ "is-vertical": _ctx.vertical },
]),
},
[
vue.createElementVNode(
"div",
{
ref: "bar",
class: "el-color-alpha-slider__bar",
style: vue.normalizeStyle({
background: _ctx.background,
}),
onClick:
_cache[0] ||
(_cache[0] = (...args) =>
_ctx.handleClick && _ctx.handleClick(...args)),
},
null,
4
),
vue.createElementVNode(
"div",
{
ref: "thumb",
class: "el-color-alpha-slider__thumb",
style: vue.normalizeStyle({
left: _ctx.thumbLeft + "px",
top: _ctx.thumbTop + "px",
}),
},
null,
4
),
],
2
)
);
}
script$1q.render = render$1i;
script$1q.__file =
"packages/components/color-picker/src/components/alpha-slider.vue";
var script$1p = vue.defineComponent({
name: "ElColorHueSlider",
props: {
color: {
type: Object,
required: true,
},
vertical: Boolean,
},
setup(props) {
const instance = vue.getCurrentInstance();
const thumb = vue.ref(null);
const bar = vue.ref(null);
const thumbLeft = vue.ref(0);
const thumbTop = vue.ref(0);
const hueValue = vue.computed(() => {
return props.color.get("hue");
});
vue.watch(
() => hueValue.value,
() => {
update();
}
);
function handleClick(event) {
const target = event.target;
if (target !== thumb.value) {
handleDrag(event);
}
}
function handleDrag(event) {
const el = instance.vnode.el;
const rect = el.getBoundingClientRect();
let hue;
if (!props.vertical) {
let left = event.clientX - rect.left;
left = Math.min(left, rect.width - thumb.value.offsetWidth / 2);
left = Math.max(thumb.value.offsetWidth / 2, left);
hue = Math.round(
((left - thumb.value.offsetWidth / 2) /
(rect.width - thumb.value.offsetWidth)) *
360
);
} else {
let top = event.clientY - rect.top;
top = Math.min(top, rect.height - thumb.value.offsetHeight / 2);
top = Math.max(thumb.value.offsetHeight / 2, top);
hue = Math.round(
((top - thumb.value.offsetHeight / 2) /
(rect.height - thumb.value.offsetHeight)) *
360
);
}
props.color.set("hue", hue);
}
function getThumbLeft() {
const el = instance.vnode.el;
if (props.vertical) return 0;
const hue = props.color.get("hue");
if (!el) return 0;
return Math.round(
(hue * (el.offsetWidth - thumb.value.offsetWidth / 2)) / 360
);
}
function getThumbTop() {
const el = instance.vnode.el;
if (!props.vertical) return 0;
const hue = props.color.get("hue");
if (!el) return 0;
return Math.round(
(hue * (el.offsetHeight - thumb.value.offsetHeight / 2)) / 360
);
}
function update() {
thumbLeft.value = getThumbLeft();
thumbTop.value = getThumbTop();
}
vue.onMounted(() => {
const dragConfig = {
drag: (event) => {
handleDrag(event);
},
end: (event) => {
handleDrag(event);
},
};
draggable(bar.value, dragConfig);
draggable(thumb.value, dragConfig);
update();
});
return {
bar,
thumb,
thumbLeft,
thumbTop,
hueValue,
handleClick,
update,
};
},
});
function render$1h(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
class: vue.normalizeClass([
"el-color-hue-slider",
{ "is-vertical": _ctx.vertical },
]),
},
[
vue.createElementVNode(
"div",
{
ref: "bar",
class: "el-color-hue-slider__bar",
onClick:
_cache[0] ||
(_cache[0] = (...args) =>
_ctx.handleClick && _ctx.handleClick(...args)),
},
null,
512
),
vue.createElementVNode(
"div",
{
ref: "thumb",
class: "el-color-hue-slider__thumb",
style: vue.normalizeStyle({
left: _ctx.thumbLeft + "px",
top: _ctx.thumbTop + "px",
}),
},
null,
4
),
],
2
)
);
}
script$1p.render = render$1h;
script$1p.__file =
"packages/components/color-picker/src/components/hue-slider.vue";
const OPTIONS_KEY = Symbol();
const useOptions = () => {
return vue.inject(OPTIONS_KEY);
};
const hsv2hsl = function (hue, sat, val) {
return [
hue,
(sat * val) / ((hue = (2 - sat) * val) < 1 ? hue : 2 - hue) || 0,
hue / 2,
];
};
const isOnePointZero = function (n) {
return (
typeof n === "string" && n.indexOf(".") !== -1 && parseFloat(n) === 1
);
};
const isPercentage = function (n) {
return typeof n === "string" && n.indexOf("%") !== -1;
};
const bound01 = function (value, max) {
if (isOnePointZero(value)) value = "100%";
const processPercent = isPercentage(value);
value = Math.min(max, Math.max(0, parseFloat(`${value}`)));
if (processPercent) {
value = parseInt(`${value * max}`, 10) / 100;
}
if (Math.abs(value - max) < 1e-6) {
return 1;
}
return (value % max) / parseFloat(max);
};
const INT_HEX_MAP = { 10: "A", 11: "B", 12: "C", 13: "D", 14: "E", 15: "F" };
const toHex = function ({ r, g, b }) {
const hexOne = function (value) {
value = Math.min(Math.round(value), 255);
const high = Math.floor(value / 16);
const low = value % 16;
return `${INT_HEX_MAP[high] || high}${INT_HEX_MAP[low] || low}`;
};
if (isNaN(r) || isNaN(g) || isNaN(b)) return "";
return `#${hexOne(r)}${hexOne(g)}${hexOne(b)}`;
};
const HEX_INT_MAP = { A: 10, B: 11, C: 12, D: 13, E: 14, F: 15 };
const parseHexChannel = function (hex) {
if (hex.length === 2) {
return (
(HEX_INT_MAP[hex[0].toUpperCase()] || +hex[0]) * 16 +
(HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1])
);
}
return HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1];
};
const hsl2hsv = function (hue, sat, light) {
sat = sat / 100;
light = light / 100;
let smin = sat;
const lmin = Math.max(light, 0.01);
light *= 2;
sat *= light <= 1 ? light : 2 - light;
smin *= lmin <= 1 ? lmin : 2 - lmin;
const v = (light + sat) / 2;
const sv =
light === 0 ? (2 * smin) / (lmin + smin) : (2 * sat) / (light + sat);
return {
h: hue,
s: sv * 100,
v: v * 100,
};
};
const rgb2hsv = function (r, g, b) {
r = bound01(r, 255);
g = bound01(g, 255);
b = bound01(b, 255);
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
let h;
const v = max;
const d = max - min;
const s = max === 0 ? 0 : d / max;
if (max === min) {
h = 0;
} else {
switch (max) {
case r: {
h = (g - b) / d + (g < b ? 6 : 0);
break;
}
case g: {
h = (b - r) / d + 2;
break;
}
case b: {
h = (r - g) / d + 4;
break;
}
}
h /= 6;
}
return { h: h * 360, s: s * 100, v: v * 100 };
};
const hsv2rgb = function (h, s, v) {
h = bound01(h, 360) * 6;
s = bound01(s, 100);
v = bound01(v, 100);
const i = Math.floor(h);
const f = h - i;
const p = v * (1 - s);
const q = v * (1 - f * s);
const t = v * (1 - (1 - f) * s);
const mod = i % 6;
const r = [v, q, p, p, t, v][mod];
const g = [t, v, v, q, p, p][mod];
const b = [p, p, t, v, v, q][mod];
return {
r: Math.round(r * 255),
g: Math.round(g * 255),
b: Math.round(b * 255),
};
};
class Color {
constructor(options) {
this._hue = 0;
this._saturation = 100;
this._value = 100;
this._alpha = 100;
this.enableAlpha = false;
this.format = "hex";
this.value = "";
options = options || {};
for (const option in options) {
if (hasOwn(options, option)) {
this[option] = options[option];
}
}
this.doOnChange();
}
set(prop, value) {
if (arguments.length === 1 && typeof prop === "object") {
for (const p in prop) {
if (hasOwn(prop, p)) {
this.set(p, prop[p]);
}
}
return;
}
this[`_${prop}`] = value;
this.doOnChange();
}
get(prop) {
return this[`_${prop}`];
}
toRgb() {
return hsv2rgb(this._hue, this._saturation, this._value);
}
fromString(value) {
if (!value) {
this._hue = 0;
this._saturation = 100;
this._value = 100;
this.doOnChange();
return;
}
const fromHSV = (h, s, v) => {
this._hue = Math.max(0, Math.min(360, h));
this._saturation = Math.max(0, Math.min(100, s));
this._value = Math.max(0, Math.min(100, v));
this.doOnChange();
};
if (value.indexOf("hsl") !== -1) {
const parts = value
.replace(/hsla|hsl|\(|\)/gm, "")
.split(/\s|,/g)
.filter((val) => val !== "")
.map((val, index) =>
index > 2 ? parseFloat(val) : parseInt(val, 10)
);
if (parts.length === 4) {
this._alpha = Math.floor(parseFloat(parts[3]) * 100);
} else if (parts.length === 3) {
this._alpha = 100;
}
if (parts.length >= 3) {
const { h, s, v } = hsl2hsv(parts[0], parts[1], parts[2]);
fromHSV(h, s, v);
}
} else if (value.indexOf("hsv") !== -1) {
const parts = value
.replace(/hsva|hsv|\(|\)/gm, "")
.split(/\s|,/g)
.filter((val) => val !== "")
.map((val, index) =>
index > 2 ? parseFloat(val) : parseInt(val, 10)
);
if (parts.length === 4) {
this._alpha = Math.floor(parseFloat(parts[3]) * 100);
} else if (parts.length === 3) {
this._alpha = 100;
}
if (parts.length >= 3) {
fromHSV(parts[0], parts[1], parts[2]);
}
} else if (value.indexOf("rgb") !== -1) {
const parts = value
.replace(/rgba|rgb|\(|\)/gm, "")
.split(/\s|,/g)
.filter((val) => val !== "")
.map((val, index) =>
index > 2 ? parseFloat(val) : parseInt(val, 10)
);
if (parts.length === 4) {
this._alpha = Math.floor(parseFloat(parts[3]) * 100);
} else if (parts.length === 3) {
this._alpha = 100;
}
if (parts.length >= 3) {
const { h, s, v } = rgb2hsv(parts[0], parts[1], parts[2]);
fromHSV(h, s, v);
}
} else if (value.indexOf("#") !== -1) {
const hex = value.replace("#", "").trim();
if (!/^[0-9a-fA-F]{3}$|^[0-9a-fA-F]{6}$|^[0-9a-fA-F]{8}$/.test(hex))
return;
let r, g, b;
if (hex.length === 3) {
r = parseHexChannel(hex[0] + hex[0]);
g = parseHexChannel(hex[1] + hex[1]);
b = parseHexChannel(hex[2] + hex[2]);
} else if (hex.length === 6 || hex.length === 8) {
r = parseHexChannel(hex.substring(0, 2));
g = parseHexChannel(hex.substring(2, 4));
b = parseHexChannel(hex.substring(4, 6));
}
if (hex.length === 8) {
this._alpha = Math.floor(
(parseHexChannel(hex.substring(6)) / 255) * 100
);
} else if (hex.length === 3 || hex.length === 6) {
this._alpha = 100;
}
const { h, s, v } = rgb2hsv(r, g, b);
fromHSV(h, s, v);
}
}
compare(color) {
return (
Math.abs(color._hue - this._hue) < 2 &&
Math.abs(color._saturation - this._saturation) < 1 &&
Math.abs(color._value - this._value) < 1 &&
Math.abs(color._alpha - this._alpha) < 1
);
}
doOnChange() {
const { _hue, _saturation, _value, _alpha, format } = this;
if (this.enableAlpha) {
switch (format) {
case "hsl": {
const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);
this.value = `hsla(${_hue}, ${Math.round(
hsl[1] * 100
)}%, ${Math.round(hsl[2] * 100)}%, ${_alpha / 100})`;
break;
}
case "hsv": {
this.value = `hsva(${_hue}, ${Math.round(
_saturation
)}%, ${Math.round(_value)}%, ${_alpha / 100})`;
break;
}
default: {
const { r, g, b } = hsv2rgb(_hue, _saturation, _value);
this.value = `rgba(${r}, ${g}, ${b}, ${_alpha / 100})`;
}
}
} else {
switch (format) {
case "hsl": {
const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);
this.value = `hsl(${_hue}, ${Math.round(
hsl[1] * 100
)}%, ${Math.round(hsl[2] * 100)}%)`;
break;
}
case "hsv": {
this.value = `hsv(${_hue}, ${Math.round(
_saturation
)}%, ${Math.round(_value)}%)`;
break;
}
case "rgb": {
const { r, g, b } = hsv2rgb(_hue, _saturation, _value);
this.value = `rgb(${r}, ${g}, ${b})`;
break;
}
default: {
this.value = toHex(hsv2rgb(_hue, _saturation, _value));
}
}
}
}
}
var script$1o = vue.defineComponent({
props: {
colors: { type: Array, required: true },
color: {
type: Object,
required: true,
},
},
setup(props) {
const { currentColor } = useOptions();
const rgbaColors = vue.ref(parseColors(props.colors, props.color));
vue.watch(
() => currentColor.value,
(val) => {
const color = new Color();
color.fromString(val);
rgbaColors.value.forEach((item) => {
item.selected = color.compare(item);
});
}
);
vue.watchEffect(() => {
rgbaColors.value = parseColors(props.colors, props.color);
});
function handleSelect(index) {
props.color.fromString(props.colors[index]);
}
function parseColors(colors, color) {
return colors.map((value) => {
const c = new Color();
c.enableAlpha = true;
c.format = "rgba";
c.fromString(value);
c.selected = c.value === color.value;
return c;
});
}
return {
rgbaColors,
handleSelect,
};
},
});
const _hoisted_1$X = { class: "el-color-predefine" };
const _hoisted_2$I = { class: "el-color-predefine__colors" };
const _hoisted_3$G = ["onClick"];
function render$1g(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock("div", _hoisted_1$X, [
vue.createElementVNode("div", _hoisted_2$I, [
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.rgbaColors, (item, index) => {
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
key: _ctx.colors[index],
class: vue.normalizeClass([
"el-color-predefine__color-selector",
{
selected: item.selected,
"is-alpha": item._alpha < 100,
},
]),
onClick: ($event) => _ctx.handleSelect(index),
},
[
vue.createElementVNode(
"div",
{
style: vue.normalizeStyle({
backgroundColor: item.value,
}),
},
null,
4
),
],
10,
_hoisted_3$G
)
);
}),
128
)),
]),
])
);
}
script$1o.render = render$1g;
script$1o.__file =
"packages/components/color-picker/src/components/predefine.vue";
var script$1n = vue.defineComponent({
name: "ElSlPanel",
props: {
color: {
type: Object,
required: true,
},
},
setup(props) {
const instance = vue.getCurrentInstance();
const cursorTop = vue.ref(0);
const cursorLeft = vue.ref(0);
const background = vue.ref("hsl(0, 100%, 50%)");
const colorValue = vue.computed(() => {
const hue = props.color.get("hue");
const value = props.color.get("value");
return { hue, value };
});
function update() {
const saturation = props.color.get("saturation");
const value = props.color.get("value");
const el = instance.vnode.el;
const { clientWidth: width, clientHeight: height } = el;
cursorLeft.value = (saturation * width) / 100;
cursorTop.value = ((100 - value) * height) / 100;
background.value = `hsl(${props.color.get("hue")}, 100%, 50%)`;
}
function handleDrag(event) {
const el = instance.vnode.el;
const rect = el.getBoundingClientRect();
let left = event.clientX - rect.left;
let top = event.clientY - rect.top;
left = Math.max(0, left);
left = Math.min(left, rect.width);
top = Math.max(0, top);
top = Math.min(top, rect.height);
cursorLeft.value = left;
cursorTop.value = top;
props.color.set({
saturation: (left / rect.width) * 100,
value: 100 - (top / rect.height) * 100,
});
}
vue.watch(
() => colorValue.value,
() => {
update();
}
);
vue.onMounted(() => {
draggable(instance.vnode.el, {
drag: (event) => {
handleDrag(event);
},
end: (event) => {
handleDrag(event);
},
});
update();
});
return {
cursorTop,
cursorLeft,
background,
colorValue,
handleDrag,
update,
};
},
});
const _hoisted_1$W = /* @__PURE__ */ vue.createElementVNode(
"div",
{ class: "el-color-svpanel__white" },
null,
-1
);
const _hoisted_2$H = /* @__PURE__ */ vue.createElementVNode(
"div",
{ class: "el-color-svpanel__black" },
null,
-1
);
const _hoisted_3$F = /* @__PURE__ */ vue.createElementVNode(
"div",
null,
null,
-1
);
const _hoisted_4$q = [_hoisted_3$F];
function render$1f(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
class: "el-color-svpanel",
style: vue.normalizeStyle({
backgroundColor: _ctx.background,
}),
},
[
_hoisted_1$W,
_hoisted_2$H,
vue.createElementVNode(
"div",
{
class: "el-color-svpanel__cursor",
style: vue.normalizeStyle({
top: _ctx.cursorTop + "px",
left: _ctx.cursorLeft + "px",
}),
},
_hoisted_4$q,
4
),
],
4
)
);
}
script$1n.render = render$1f;
script$1n.__file =
"packages/components/color-picker/src/components/sv-panel.vue";
var script$1m = vue.defineComponent({
name: "ElColorPicker",
components: {
ElButton,
ElPopper: _Popper,
ElInput: _Input,
SvPanel: script$1n,
HueSlider: script$1p,
AlphaSlider: script$1q,
Predefine: script$1o,
},
directives: {
ClickOutside,
},
props: {
modelValue: String,
showAlpha: Boolean,
colorFormat: String,
disabled: Boolean,
size: {
type: String,
validator: isValidComponentSize,
},
popperClass: String,
predefine: Array,
},
emits: ["change", "active-change", UPDATE_MODEL_EVENT],
setup(props, { emit }) {
const ELEMENT = useGlobalConfig();
const { t } = useLocaleInject();
const elForm = vue.inject(elFormKey, {});
const elFormItem = vue.inject(elFormItemKey, {});
const hue = vue.ref(null);
const svPanel = vue.ref(null);
const alpha = vue.ref(null);
const popper = vue.ref(null);
const color = vue.reactive(
new Color({
enableAlpha: props.showAlpha,
format: props.colorFormat,
})
);
const showPicker = vue.ref(false);
const showPanelColor = vue.ref(false);
const customInput = vue.ref("");
const displayedColor = vue.computed(() => {
if (!props.modelValue && !showPanelColor.value) {
return "transparent";
}
return displayedRgb(color, props.showAlpha);
});
const colorSize = vue.computed(() => {
return props.size || elFormItem.size || ELEMENT.size;
});
const colorDisabled = vue.computed(() => {
return props.disabled || elForm.disabled;
});
const currentColor = vue.computed(() => {
return !props.modelValue && !showPanelColor.value ? "" : color.value;
});
vue.watch(
() => props.modelValue,
(newVal) => {
if (!newVal) {
showPanelColor.value = false;
} else if (newVal && newVal !== color.value) {
color.fromString(newVal);
}
}
);
vue.watch(
() => currentColor.value,
(val) => {
customInput.value = val;
emit("active-change", val);
}
);
vue.watch(
() => color.value,
() => {
if (!props.modelValue && !showPanelColor.value) {
showPanelColor.value = true;
}
}
);
function displayedRgb(color2, showAlpha) {
if (!(color2 instanceof Color)) {
throw Error("color should be instance of _color Class");
}
const { r, g, b } = color2.toRgb();
return showAlpha
? `rgba(${r}, ${g}, ${b}, ${color2.get("alpha") / 100})`
: `rgb(${r}, ${g}, ${b})`;
}
function setShowPicker(value) {
showPicker.value = value;
}
const debounceSetShowPicker = debounce_1(setShowPicker, 100);
function hide() {
debounceSetShowPicker(false);
resetColor();
}
function resetColor() {
vue.nextTick(() => {
if (props.modelValue) {
color.fromString(props.modelValue);
} else {
showPanelColor.value = false;
}
});
}
function handleTrigger() {
if (colorDisabled.value) return;
debounceSetShowPicker(!showPicker.value);
}
function handleConfirm() {
color.fromString(customInput.value);
}
function confirmValue() {
var _a;
const value = color.value;
emit(UPDATE_MODEL_EVENT, value);
emit("change", value);
(_a = elFormItem.validate) == null
? void 0
: _a.call(elFormItem, "change");
debounceSetShowPicker(false);
vue.nextTick(() => {
const newColor = new Color({
enableAlpha: props.showAlpha,
format: props.colorFormat,
});
newColor.fromString(props.modelValue);
if (!color.compare(newColor)) {
resetColor();
}
});
}
function clear() {
var _a;
debounceSetShowPicker(false);
emit(UPDATE_MODEL_EVENT, null);
emit("change", null);
if (props.modelValue !== null) {
(_a = elFormItem.validate) == null
? void 0
: _a.call(elFormItem, "change");
}
resetColor();
}
vue.onMounted(() => {
if (props.modelValue) {
color.fromString(props.modelValue);
customInput.value = currentColor.value;
}
});
vue.watch(
() => showPicker.value,
() => {
vue.nextTick(() => {
var _a, _b, _c;
(_a = hue.value) == null ? void 0 : _a.update();
(_b = svPanel.value) == null ? void 0 : _b.update();
(_c = alpha.value) == null ? void 0 : _c.update();
});
}
);
vue.provide(OPTIONS_KEY, {
currentColor,
});
return {
Effect: exports.Effect,
color,
colorDisabled,
colorSize,
displayedColor,
showPanelColor,
showPicker,
customInput,
handleConfirm,
hide,
handleTrigger,
clear,
confirmValue,
t,
hue,
svPanel,
alpha,
popper,
};
},
});
const _hoisted_1$V = { class: "el-color-dropdown__main-wrapper" };
const _hoisted_2$G = { class: "el-color-dropdown__btns" };
const _hoisted_3$E = { class: "el-color-dropdown__value" };
const _hoisted_4$p = {
key: 0,
class: "el-color-picker__mask",
};
const _hoisted_5$l = {
key: 0,
class: "el-color-picker__empty el-icon-close",
};
const _hoisted_6$i = { class: "el-color-picker__icon el-icon-arrow-down" };
function render$1e(_ctx, _cache, $props, $setup, $data, $options) {
const _component_hue_slider = vue.resolveComponent("hue-slider");
const _component_sv_panel = vue.resolveComponent("sv-panel");
const _component_alpha_slider = vue.resolveComponent("alpha-slider");
const _component_predefine = vue.resolveComponent("predefine");
const _component_el_input = vue.resolveComponent("el-input");
const _component_el_button = vue.resolveComponent("el-button");
const _component_el_popper = vue.resolveComponent("el-popper");
const _directive_click_outside = vue.resolveDirective("click-outside");
return (
vue.openBlock(),
vue.createBlock(
_component_el_popper,
{
ref: "popper",
visible: _ctx.showPicker,
"onUpdate:visible":
_cache[2] || (_cache[2] = ($event) => (_ctx.showPicker = $event)),
effect: _ctx.Effect.LIGHT,
"manual-mode": "",
trigger: "click",
"show-arrow": false,
"fallback-placements": ["bottom", "top", "right", "left"],
offset: 0,
transition: "el-zoom-in-top",
"gpu-acceleration": false,
"popper-class": `el-color-picker__panel el-color-dropdown ${_ctx.popperClass}`,
"stop-popper-mouse-event": false,
},
{
default: vue.withCtx(() => [
vue.withDirectives(
vue.createElementVNode(
"div",
null,
[
vue.createElementVNode("div", _hoisted_1$V, [
vue.createVNode(
_component_hue_slider,
{
ref: "hue",
class: "hue-slider",
color: _ctx.color,
vertical: "",
},
null,
8,
["color"]
),
vue.createVNode(
_component_sv_panel,
{
ref: "svPanel",
color: _ctx.color,
},
null,
8,
["color"]
),
]),
_ctx.showAlpha
? (vue.openBlock(),
vue.createBlock(
_component_alpha_slider,
{
key: 0,
ref: "alpha",
color: _ctx.color,
},
null,
8,
["color"]
))
: vue.createCommentVNode("v-if", true),
_ctx.predefine
? (vue.openBlock(),
vue.createBlock(
_component_predefine,
{
key: 1,
ref: "predefine",
color: _ctx.color,
colors: _ctx.predefine,
},
null,
8,
["color", "colors"]
))
: vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", _hoisted_2$G, [
vue.createElementVNode("span", _hoisted_3$E, [
vue.createVNode(
_component_el_input,
{
modelValue: _ctx.customInput,
"onUpdate:modelValue":
_cache[0] ||
(_cache[0] = ($event) =>
(_ctx.customInput = $event)),
"validate-event": false,
size: "mini",
onKeyup: vue.withKeys(_ctx.handleConfirm, ["enter"]),
onBlur: _ctx.handleConfirm,
},
null,
8,
["modelValue", "onKeyup", "onBlur"]
),
]),
vue.createVNode(
_component_el_button,
{
size: "mini",
type: "text",
class: "el-color-dropdown__link-btn",
onClick: _ctx.clear,
},
{
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(_ctx.t("el.colorpicker.clear")),
1
),
]),
_: 1,
},
8,
["onClick"]
),
vue.createVNode(
_component_el_button,
{
plain: "",
size: "mini",
class: "el-color-dropdown__btn",
onClick: _ctx.confirmValue,
},
{
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(
_ctx.t("el.colorpicker.confirm")
),
1
),
]),
_: 1,
},
8,
["onClick"]
),
]),
],
512
),
[[_directive_click_outside, _ctx.hide]]
),
]),
trigger: vue.withCtx(() => [
vue.createElementVNode(
"div",
{
class: vue.normalizeClass([
"el-color-picker",
_ctx.colorDisabled ? "is-disabled" : "",
_ctx.colorSize ? `el-color-picker--${_ctx.colorSize}` : "",
]),
},
[
_ctx.colorDisabled
? (vue.openBlock(),
vue.createElementBlock("div", _hoisted_4$p))
: vue.createCommentVNode("v-if", true),
vue.createElementVNode(
"div",
{
class: "el-color-picker__trigger",
onClick:
_cache[1] ||
(_cache[1] = (...args) =>
_ctx.handleTrigger && _ctx.handleTrigger(...args)),
},
[
vue.createElementVNode(
"span",
{
class: vue.normalizeClass([
"el-color-picker__color",
{ "is-alpha": _ctx.showAlpha },
]),
},
[
vue.createElementVNode(
"span",
{
class: "el-color-picker__color-inner",
style: vue.normalizeStyle({
backgroundColor: _ctx.displayedColor,
}),
},
null,
4
),
!_ctx.modelValue && !_ctx.showPanelColor
? (vue.openBlock(),
vue.createElementBlock("span", _hoisted_5$l))
: vue.createCommentVNode("v-if", true),
],
2
),
vue.withDirectives(
vue.createElementVNode("span", _hoisted_6$i, null, 512),
[[vue.vShow, _ctx.modelValue || _ctx.showPanelColor]]
),
]
),
],
2
),
]),
_: 1,
},
8,
["visible", "effect", "popper-class"]
)
);
}
script$1m.render = render$1e;
script$1m.__file = "packages/components/color-picker/src/index.vue";
script$1m.install = (app) => {
app.component(script$1m.name, script$1m);
};
const _ColorPicker = script$1m;
const ElColorPicker = _ColorPicker;
var __defProp$x = Object.defineProperty;
var __getOwnPropSymbols$x = Object.getOwnPropertySymbols;
var __hasOwnProp$x = Object.prototype.hasOwnProperty;
var __propIsEnum$x = Object.prototype.propertyIsEnumerable;
var __defNormalProp$x = (obj, key, value) =>
key in obj
? __defProp$x(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$x = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$x.call(b, prop)) __defNormalProp$x(a, prop, b[prop]);
if (__getOwnPropSymbols$x)
for (var prop of __getOwnPropSymbols$x(b)) {
if (__propIsEnum$x.call(b, prop)) __defNormalProp$x(a, prop, b[prop]);
}
return a;
};
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
const ConfigProvider = vue.defineComponent({
name: "ElConfigProvider",
props: __spreadValues$x({}, useLocaleProps),
setup(_, { slots }) {
useLocale();
return () => {
var _a;
return (_a = slots.default) == null ? void 0 : _a.call(slots);
};
},
});
const ElConfigProvider = withInstall(ConfigProvider);
var script$1l = vue.defineComponent({
name: "ElContainer",
props: {
direction: {
type: String,
default: "",
},
},
setup(props, { slots }) {
const isVertical = vue.computed(() => {
if (props.direction === "vertical") {
return true;
} else if (props.direction === "horizontal") {
return false;
}
if (slots && slots.default) {
const vNodes = slots.default();
return vNodes.some((vNode) => {
const tag = vNode.type.name;
return tag === "ElHeader" || tag === "ElFooter";
});
} else {
return false;
}
});
return {
isVertical,
};
},
});
function render$1d(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"section",
{
class: vue.normalizeClass([
"el-container",
{ "is-vertical": _ctx.isVertical },
]),
},
[vue.renderSlot(_ctx.$slots, "default")],
2
)
);
}
script$1l.render = render$1d;
script$1l.__file = "packages/components/container/src/container.vue";
var script$1k = vue.defineComponent({
name: "ElAside",
props: {
width: {
type: String,
default: null,
},
},
setup(props) {
return {
style: vue.computed(() => {
return props.width ? { "--el-aside-width": props.width } : {};
}),
};
},
});
function render$1c(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"aside",
{
class: "el-aside",
style: vue.normalizeStyle(_ctx.style),
},
[vue.renderSlot(_ctx.$slots, "default")],
4
)
);
}
script$1k.render = render$1c;
script$1k.__file = "packages/components/container/src/aside.vue";
var script$1j = vue.defineComponent({
name: "ElFooter",
props: {
height: {
type: String,
default: null,
},
},
setup(props) {
return {
style: vue.computed(() =>
props.height
? {
"--el-footer-height": props.height,
}
: {}
),
};
},
});
function render$1b(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"footer",
{
class: "el-footer",
style: vue.normalizeStyle(_ctx.style),
},
[vue.renderSlot(_ctx.$slots, "default")],
4
)
);
}
script$1j.render = render$1b;
script$1j.__file = "packages/components/container/src/footer.vue";
var script$1i = vue.defineComponent({
name: "ElHeader",
props: {
height: {
type: String,
default: null,
},
},
setup(props) {
return {
style: vue.computed(() =>
props.height
? {
"--el-header-height": props.height,
}
: {}
),
};
},
});
function render$1a(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"header",
{
class: "el-header",
style: vue.normalizeStyle(_ctx.style),
},
[vue.renderSlot(_ctx.$slots, "default")],
4
)
);
}
script$1i.render = render$1a;
script$1i.__file = "packages/components/container/src/header.vue";
var script$1h = vue.defineComponent({
name: "ElMain",
});
const _hoisted_1$U = { class: "el-main" };
function render$19(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock("main", _hoisted_1$U, [
vue.renderSlot(_ctx.$slots, "default"),
])
);
}
script$1h.render = render$19;
script$1h.__file = "packages/components/container/src/main.vue";
const ElContainer = withInstall(script$1l, {
Aside: script$1k,
Footer: script$1j,
Header: script$1i,
Main: script$1h,
});
const ElAside = withNoopInstall(script$1k);
const ElFooter = withNoopInstall(script$1j);
const ElHeader = withNoopInstall(script$1i);
const ElMain = withNoopInstall(script$1h);
var advancedFormat = createCommonjsModule(function (module, exports) {
!(function (e, t) {
module.exports = t();
})(commonjsGlobal, function () {
return function (e, t, r) {
var n = t.prototype,
s = n.format;
(r.en.ordinal = function (e) {
var t = ["th", "st", "nd", "rd"],
r = e % 100;
return "[" + e + (t[(r - 20) % 10] || t[r] || t[0]) + "]";
}),
(n.format = function (e) {
var t = this,
r = this.$locale();
if (!this.isValid()) return s.bind(this)(e);
var n = this.$utils(),
a = (e || "YYYY-MM-DDTHH:mm:ssZ").replace(
/\[([^\]]+)]|Q|wo|ww|w|WW|W|zzz|z|gggg|GGGG|Do|X|x|k{1,2}|S/g,
function (e) {
switch (e) {
case "Q":
return Math.ceil((t.$M + 1) / 3);
case "Do":
return r.ordinal(t.$D);
case "gggg":
return t.weekYear();
case "GGGG":
return t.isoWeekYear();
case "wo":
return r.ordinal(t.week(), "W");
case "w":
case "ww":
return n.s(t.week(), "w" === e ? 1 : 2, "0");
case "W":
case "WW":
return n.s(t.isoWeek(), "W" === e ? 1 : 2, "0");
case "k":
case "kk":
return n.s(
String(0 === t.$H ? 24 : t.$H),
"k" === e ? 1 : 2,
"0"
);
case "X":
return Math.floor(t.$d.getTime() / 1e3);
case "x":
return t.$d.getTime();
case "z":
return "[" + t.offsetName() + "]";
case "zzz":
return "[" + t.offsetName("long") + "]";
default:
return e;
}
}
);
return s.bind(this)(a);
});
};
});
});
var weekOfYear = createCommonjsModule(function (module, exports) {
!(function (e, t) {
module.exports = t();
})(commonjsGlobal, function () {
var e = "week",
t = "year";
return function (i, n, r) {
var f = n.prototype;
(f.week = function (i) {
if ((void 0 === i && (i = null), null !== i))
return this.add(7 * (i - this.week()), "day");
var n = this.$locale().yearStart || 1;
if (11 === this.month() && this.date() > 25) {
var f = r(this).startOf(t).add(1, t).date(n),
s = r(this).endOf(e);
if (f.isBefore(s)) return 1;
}
var a = r(this)
.startOf(t)
.date(n)
.startOf(e)
.subtract(1, "millisecond"),
o = this.diff(a, e, !0);
return o < 0 ? r(this).startOf("week").week() : Math.ceil(o);
}),
(f.weeks = function (e) {
return void 0 === e && (e = null), this.week(e);
});
};
});
});
var weekYear = createCommonjsModule(function (module, exports) {
!(function (e, t) {
module.exports = t();
})(commonjsGlobal, function () {
return function (e, t) {
t.prototype.weekYear = function () {
var e = this.month(),
t = this.week(),
n = this.year();
return 1 === t && 11 === e ? n + 1 : 0 === e && t >= 52 ? n - 1 : n;
};
};
});
});
var dayOfYear = createCommonjsModule(function (module, exports) {
!(function (e, t) {
module.exports = t();
})(commonjsGlobal, function () {
return function (e, t, n) {
t.prototype.dayOfYear = function (e) {
var t =
Math.round(
(n(this).startOf("day") - n(this).startOf("year")) / 864e5
) + 1;
return null == e ? t : this.add(e - t, "day");
};
};
});
});
var isSameOrAfter = createCommonjsModule(function (module, exports) {
!(function (e, t) {
module.exports = t();
})(commonjsGlobal, function () {
return function (e, t) {
t.prototype.isSameOrAfter = function (e, t) {
return this.isSame(e, t) || this.isAfter(e, t);
};
};
});
});
var isSameOrBefore = createCommonjsModule(function (module, exports) {
!(function (e, i) {
module.exports = i();
})(commonjsGlobal, function () {
return function (e, i) {
i.prototype.isSameOrBefore = function (e, i) {
return this.isSame(e, i) || this.isBefore(e, i);
};
};
});
});
var script$1g = vue.defineComponent({
props: {
date: {
type: Object,
},
minDate: {
type: Object,
},
maxDate: {
type: Object,
},
parsedValue: {
type: [Object, Array],
},
selectionMode: {
type: String,
default: "day",
},
showWeekNumber: {
type: Boolean,
default: false,
},
disabledDate: {
type: Function,
},
cellClassName: {
type: Function,
},
rangeState: {
type: Object,
default: () => ({
endDate: null,
selecting: false,
}),
},
},
emits: ["changerange", "pick", "select"],
setup(props, ctx) {
const { t, lang } = useLocaleInject();
const lastRow = vue.ref(null);
const lastColumn = vue.ref(null);
const tableRows = vue.ref([[], [], [], [], [], []]);
const firstDayOfWeek = props.date.$locale().weekStart || 7;
const WEEKS_CONSTANT = props.date
.locale("en")
.localeData()
.weekdaysShort()
.map((_) => _.toLowerCase());
const offsetDay = vue.computed(() => {
return firstDayOfWeek > 3 ? 7 - firstDayOfWeek : -firstDayOfWeek;
});
const startDate = vue.computed(() => {
const startDayOfMonth = props.date.startOf("month");
return startDayOfMonth.subtract(startDayOfMonth.day() || 7, "day");
});
const WEEKS = vue.computed(() => {
return WEEKS_CONSTANT.concat(WEEKS_CONSTANT).slice(
firstDayOfWeek,
firstDayOfWeek + 7
);
});
const rows = vue.computed(() => {
var _a;
const startOfMonth = props.date.startOf("month");
const startOfMonthDay = startOfMonth.day() || 7;
const dateCountOfMonth = startOfMonth.daysInMonth();
const dateCountOfLastMonth = startOfMonth
.subtract(1, "month")
.daysInMonth();
const offset = offsetDay.value;
const rows_ = tableRows.value;
let count = 1;
const selectedDate =
props.selectionMode === "dates"
? coerceTruthyValueToArray(props.parsedValue)
: [];
const calNow = dayjs_min().locale(lang.value).startOf("day");
for (let i = 0; i < 6; i++) {
const row = rows_[i];
if (props.showWeekNumber) {
if (!row[0]) {
row[0] = {
type: "week",
text: startDate.value.add(i * 7 + 1, "day").week(),
};
}
}
for (let j = 0; j < 7; j++) {
let cell = row[props.showWeekNumber ? j + 1 : j];
if (!cell) {
cell = {
row: i,
column: j,
type: "normal",
inRange: false,
start: false,
end: false,
};
}
const index = i * 7 + j;
const calTime = startDate.value.add(index - offset, "day");
cell.type = "normal";
const calEndDate =
props.rangeState.endDate ||
props.maxDate ||
(props.rangeState.selecting && props.minDate);
cell.inRange =
(props.minDate &&
calTime.isSameOrAfter(props.minDate, "day") &&
calEndDate &&
calTime.isSameOrBefore(calEndDate, "day")) ||
(props.minDate &&
calTime.isSameOrBefore(props.minDate, "day") &&
calEndDate &&
calTime.isSameOrAfter(calEndDate, "day"));
if (
(_a = props.minDate) == null
? void 0
: _a.isSameOrAfter(calEndDate)
) {
cell.start = calEndDate && calTime.isSame(calEndDate, "day");
cell.end = props.minDate && calTime.isSame(props.minDate, "day");
} else {
cell.start =
props.minDate && calTime.isSame(props.minDate, "day");
cell.end = calEndDate && calTime.isSame(calEndDate, "day");
}
const isToday = calTime.isSame(calNow, "day");
if (isToday) {
cell.type = "today";
}
if (i >= 0 && i <= 1) {
const numberOfDaysFromPreviousMonth =
startOfMonthDay + offset < 0
? 7 + startOfMonthDay + offset
: startOfMonthDay + offset;
if (j + i * 7 >= numberOfDaysFromPreviousMonth) {
cell.text = count++;
} else {
cell.text =
dateCountOfLastMonth -
(numberOfDaysFromPreviousMonth - (j % 7)) +
1 +
i * 7;
cell.type = "prev-month";
}
} else {
if (count <= dateCountOfMonth) {
cell.text = count++;
} else {
cell.text = count++ - dateCountOfMonth;
cell.type = "next-month";
}
}
const cellDate = calTime.toDate();
cell.selected = selectedDate.find(
(_) => _.valueOf() === calTime.valueOf()
);
cell.disabled = props.disabledDate && props.disabledDate(cellDate);
cell.customClass =
props.cellClassName && props.cellClassName(cellDate);
row[props.showWeekNumber ? j + 1 : j] = cell;
}
if (props.selectionMode === "week") {
const start = props.showWeekNumber ? 1 : 0;
const end = props.showWeekNumber ? 7 : 6;
const isActive = isWeekActive(row[start + 1]);
row[start].inRange = isActive;
row[start].start = isActive;
row[end].inRange = isActive;
row[end].end = isActive;
}
}
return rows_;
});
const cellMatchesDate = (cell, date) => {
if (!date) return false;
return dayjs_min(date)
.locale(lang.value)
.isSame(props.date.date(Number(cell.text)), "day");
};
const getCellClasses = (cell) => {
const classes = [];
if (
(cell.type === "normal" || cell.type === "today") &&
!cell.disabled
) {
classes.push("available");
if (cell.type === "today") {
classes.push("today");
}
} else {
classes.push(cell.type);
}
if (
props.selectionMode === "day" &&
(cell.type === "normal" || cell.type === "today") &&
cellMatchesDate(cell, props.parsedValue)
) {
classes.push("current");
}
if (
cell.inRange &&
(cell.type === "normal" ||
cell.type === "today" ||
props.selectionMode === "week")
) {
classes.push("in-range");
if (cell.start) {
classes.push("start-date");
}
if (cell.end) {
classes.push("end-date");
}
}
if (cell.disabled) {
classes.push("disabled");
}
if (cell.selected) {
classes.push("selected");
}
if (cell.customClass) {
classes.push(cell.customClass);
}
return classes.join(" ");
};
const getDateOfCell = (row, column) => {
const offsetFromStart =
row * 7 + (column - (props.showWeekNumber ? 1 : 0)) - offsetDay.value;
return startDate.value.add(offsetFromStart, "day");
};
const handleMouseMove = (event) => {
if (!props.rangeState.selecting) return;
let target = event.target;
if (target.tagName === "SPAN") {
target = target.parentNode.parentNode;
}
if (target.tagName === "DIV") {
target = target.parentNode;
}
if (target.tagName !== "TD") return;
const row = target.parentNode.rowIndex - 1;
const column = target.cellIndex;
if (rows.value[row][column].disabled) return;
if (row !== lastRow.value || column !== lastColumn.value) {
lastRow.value = row;
lastColumn.value = column;
ctx.emit("changerange", {
selecting: true,
endDate: getDateOfCell(row, column),
});
}
};
const handleClick = (event) => {
let target = event.target;
if (target.tagName === "SPAN") {
target = target.parentNode.parentNode;
}
if (target.tagName === "DIV") {
target = target.parentNode;
}
if (target.tagName !== "TD") return;
const row = target.parentNode.rowIndex - 1;
const column = target.cellIndex;
const cell = rows.value[row][column];
if (cell.disabled || cell.type === "week") return;
const newDate = getDateOfCell(row, column);
if (props.selectionMode === "range") {
if (!props.rangeState.selecting) {
ctx.emit("pick", { minDate: newDate, maxDate: null });
ctx.emit("select", true);
} else {
if (newDate >= props.minDate) {
ctx.emit("pick", { minDate: props.minDate, maxDate: newDate });
} else {
ctx.emit("pick", { minDate: newDate, maxDate: props.minDate });
}
ctx.emit("select", false);
}
} else if (props.selectionMode === "day") {
ctx.emit("pick", newDate);
} else if (props.selectionMode === "week") {
const weekNumber = newDate.week();
const value = `${newDate.year()}w${weekNumber}`;
ctx.emit("pick", {
year: newDate.year(),
week: weekNumber,
value,
date: newDate.startOf("week"),
});
} else if (props.selectionMode === "dates") {
const newValue = cell.selected
? coerceTruthyValueToArray(props.parsedValue).filter(
(_) => _.valueOf() !== newDate.valueOf()
)
: coerceTruthyValueToArray(props.parsedValue).concat([newDate]);
ctx.emit("pick", newValue);
}
};
const isWeekActive = (cell) => {
if (props.selectionMode !== "week") return false;
let newDate = props.date.startOf("day");
if (cell.type === "prev-month") {
newDate = newDate.subtract(1, "month");
}
if (cell.type === "next-month") {
newDate = newDate.add(1, "month");
}
newDate = newDate.date(parseInt(cell.text, 10));
if (props.parsedValue && !Array.isArray(props.parsedValue)) {
const dayOffset =
((props.parsedValue.day() - firstDayOfWeek + 7) % 7) - 1;
const weekDate = props.parsedValue.subtract(dayOffset, "day");
return weekDate.isSame(newDate, "day");
}
return false;
};
return {
handleMouseMove,
t,
rows,
isWeekActive,
getCellClasses,
WEEKS,
handleClick,
};
},
});
const _hoisted_1$T = { key: 0 };
function render$18(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"table",
{
cellspacing: "0",
cellpadding: "0",
class: vue.normalizeClass([
"el-date-table",
{ "is-week-mode": _ctx.selectionMode === "week" },
]),
onClick:
_cache[0] ||
(_cache[0] = (...args) =>
_ctx.handleClick && _ctx.handleClick(...args)),
onMousemove:
_cache[1] ||
(_cache[1] = (...args) =>
_ctx.handleMouseMove && _ctx.handleMouseMove(...args)),
},
[
vue.createElementVNode("tbody", null, [
vue.createElementVNode("tr", null, [
_ctx.showWeekNumber
? (vue.openBlock(),
vue.createElementBlock(
"th",
_hoisted_1$T,
vue.toDisplayString(_ctx.t("el.datepicker.week")),
1
))
: vue.createCommentVNode("v-if", true),
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.WEEKS, (week, key) => {
return (
vue.openBlock(),
vue.createElementBlock(
"th",
{ key },
vue.toDisplayString(
_ctx.t("el.datepicker.weeks." + week)
),
1
)
);
}),
128
)),
]),
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.rows, (row, key) => {
return (
vue.openBlock(),
vue.createElementBlock(
"tr",
{
key,
class: vue.normalizeClass([
"el-date-table__row",
{ current: _ctx.isWeekActive(row[1]) },
]),
},
[
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(row, (cell, key_) => {
return (
vue.openBlock(),
vue.createElementBlock(
"td",
{
key: key_,
class: vue.normalizeClass(
_ctx.getCellClasses(cell)
),
},
[
vue.createElementVNode("div", null, [
vue.createElementVNode(
"span",
null,
vue.toDisplayString(cell.text),
1
),
]),
],
2
)
);
}),
128
)),
],
2
)
);
}),
128
)),
]),
],
34
)
);
}
script$1g.render = render$18;
script$1g.__file =
"packages/components/date-picker/src/date-picker-com/basic-date-table.vue";
const datesInMonth = (year, month, lang) => {
const firstDay = dayjs_min()
.locale(lang)
.startOf("month")
.month(month)
.year(year);
const numOfDays = firstDay.daysInMonth();
return rangeArr(numOfDays).map((n) => firstDay.add(n, "day").toDate());
};
var script$1f = vue.defineComponent({
props: {
disabledDate: {
type: Function,
},
selectionMode: {
type: String,
default: "month",
},
minDate: {
type: Object,
},
maxDate: {
type: Object,
},
date: {
type: Object,
},
parsedValue: {
type: Object,
},
rangeState: {
type: Object,
default: () => ({
endDate: null,
selecting: false,
}),
},
},
emits: ["changerange", "pick", "select"],
setup(props, ctx) {
const { t, lang } = useLocaleInject();
const months = vue.ref(
props.date
.locale("en")
.localeData()
.monthsShort()
.map((_) => _.toLowerCase())
);
const tableRows = vue.ref([[], [], []]);
const lastRow = vue.ref(null);
const lastColumn = vue.ref(null);
const rows = vue.computed(() => {
var _a;
const rows2 = tableRows.value;
const now = dayjs_min().locale(lang.value).startOf("month");
for (let i = 0; i < 3; i++) {
const row = rows2[i];
for (let j = 0; j < 4; j++) {
let cell = row[j];
if (!cell) {
cell = {
row: i,
column: j,
type: "normal",
inRange: false,
start: false,
end: false,
};
}
cell.type = "normal";
const index = i * 4 + j;
const calTime = props.date.startOf("year").month(index);
const calEndDate =
props.rangeState.endDate ||
props.maxDate ||
(props.rangeState.selecting && props.minDate);
cell.inRange =
(props.minDate &&
calTime.isSameOrAfter(props.minDate, "month") &&
calEndDate &&
calTime.isSameOrBefore(calEndDate, "month")) ||
(props.minDate &&
calTime.isSameOrBefore(props.minDate, "month") &&
calEndDate &&
calTime.isSameOrAfter(calEndDate, "month"));
if (
(_a = props.minDate) == null
? void 0
: _a.isSameOrAfter(calEndDate)
) {
cell.start = calEndDate && calTime.isSame(calEndDate, "month");
cell.end =
props.minDate && calTime.isSame(props.minDate, "month");
} else {
cell.start =
props.minDate && calTime.isSame(props.minDate, "month");
cell.end = calEndDate && calTime.isSame(calEndDate, "month");
}
const isToday = now.isSame(calTime);
if (isToday) {
cell.type = "today";
}
cell.text = index;
const cellDate = calTime.toDate();
cell.disabled = props.disabledDate && props.disabledDate(cellDate);
row[j] = cell;
}
}
return rows2;
});
const getCellStyle = (cell) => {
const style = {};
const year = props.date.year();
const today = new Date();
const month = cell.text;
style.disabled = props.disabledDate
? datesInMonth(year, month, lang.value).every(props.disabledDate)
: false;
style.current =
coerceTruthyValueToArray(props.parsedValue).findIndex(
(date) => date.year() === year && date.month() === month
) >= 0;
style.today =
today.getFullYear() === year && today.getMonth() === month;
if (cell.inRange) {
style["in-range"] = true;
if (cell.start) {
style["start-date"] = true;
}
if (cell.end) {
style["end-date"] = true;
}
}
return style;
};
const handleMouseMove = (event) => {
if (!props.rangeState.selecting) return;
let target = event.target;
if (target.tagName === "A") {
target = target.parentNode.parentNode;
}
if (target.tagName === "DIV") {
target = target.parentNode;
}
if (target.tagName !== "TD") return;
const row = target.parentNode.rowIndex;
const column = target.cellIndex;
if (rows.value[row][column].disabled) return;
if (row !== lastRow.value || column !== lastColumn.value) {
lastRow.value = row;
lastColumn.value = column;
ctx.emit("changerange", {
selecting: true,
endDate: props.date.startOf("year").month(row * 4 + column),
});
}
};
const handleMonthTableClick = (event) => {
let target = event.target;
if (target.tagName === "A") {
target = target.parentNode.parentNode;
}
if (target.tagName === "DIV") {
target = target.parentNode;
}
if (target.tagName !== "TD") return;
if (hasClass(target, "disabled")) return;
const column = target.cellIndex;
const row = target.parentNode.rowIndex;
const month = row * 4 + column;
const newDate = props.date.startOf("year").month(month);
if (props.selectionMode === "range") {
if (!props.rangeState.selecting) {
ctx.emit("pick", { minDate: newDate, maxDate: null });
ctx.emit("select", true);
} else {
if (newDate >= props.minDate) {
ctx.emit("pick", { minDate: props.minDate, maxDate: newDate });
} else {
ctx.emit("pick", { minDate: newDate, maxDate: props.minDate });
}
ctx.emit("select", false);
}
} else {
ctx.emit("pick", month);
}
};
return {
handleMouseMove,
handleMonthTableClick,
rows,
getCellStyle,
t,
months,
};
},
});
const _hoisted_1$S = { class: "cell" };
function render$17(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"table",
{
class: "el-month-table",
onClick:
_cache[0] ||
(_cache[0] = (...args) =>
_ctx.handleMonthTableClick &&
_ctx.handleMonthTableClick(...args)),
onMousemove:
_cache[1] ||
(_cache[1] = (...args) =>
_ctx.handleMouseMove && _ctx.handleMouseMove(...args)),
},
[
vue.createElementVNode("tbody", null, [
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.rows, (row, key) => {
return (
vue.openBlock(),
vue.createElementBlock("tr", { key }, [
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(row, (cell, key_) => {
return (
vue.openBlock(),
vue.createElementBlock(
"td",
{
key: key_,
class: vue.normalizeClass(
_ctx.getCellStyle(cell)
),
},
[
vue.createElementVNode("div", null, [
vue.createElementVNode(
"a",
_hoisted_1$S,
vue.toDisplayString(
_ctx.t(
"el.datepicker.months." +
_ctx.months[cell.text]
)
),
1
),
]),
],
2
)
);
}),
128
)),
])
);
}),
128
)),
]),
],
32
)
);
}
script$1f.render = render$17;
script$1f.__file =
"packages/components/date-picker/src/date-picker-com/basic-month-table.vue";
const datesInYear = (year, lang) => {
const firstDay = dayjs_min(String(year)).locale(lang).startOf("year");
const lastDay = firstDay.endOf("year");
const numOfDays = lastDay.dayOfYear();
return rangeArr(numOfDays).map((n) => firstDay.add(n, "day").toDate());
};
var script$1e = vue.defineComponent({
props: {
disabledDate: {
type: Function,
},
parsedValue: {
type: Object,
},
date: {
type: Object,
},
},
emits: ["pick"],
setup(props, ctx) {
const { lang } = useLocaleInject();
const startYear = vue.computed(() => {
return Math.floor(props.date.year() / 10) * 10;
});
const getCellStyle = (year) => {
const style = {};
const today = dayjs_min().locale(lang.value);
style.disabled = props.disabledDate
? datesInYear(year, lang.value).every(props.disabledDate)
: false;
style.current =
coerceTruthyValueToArray(props.parsedValue).findIndex(
(_) => _.year() === year
) >= 0;
style.today = today.year() === year;
return style;
};
const handleYearTableClick = (event) => {
const target = event.target;
if (target.tagName === "A") {
if (hasClass(target.parentNode, "disabled")) return;
const year = target.textContent || target.innerText;
ctx.emit("pick", Number(year));
}
};
return {
startYear,
getCellStyle,
handleYearTableClick,
};
},
});
const _hoisted_1$R = { class: "cell" };
const _hoisted_2$F = { class: "cell" };
const _hoisted_3$D = { class: "cell" };
const _hoisted_4$o = { class: "cell" };
const _hoisted_5$k = { class: "cell" };
const _hoisted_6$h = { class: "cell" };
const _hoisted_7$c = { class: "cell" };
const _hoisted_8$9 = { class: "cell" };
const _hoisted_9$9 = { class: "cell" };
const _hoisted_10$9 = { class: "cell" };
const _hoisted_11$6 = /* @__PURE__ */ vue.createElementVNode(
"td",
null,
null,
-1
);
const _hoisted_12$6 = /* @__PURE__ */ vue.createElementVNode(
"td",
null,
null,
-1
);
function render$16(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"table",
{
class: "el-year-table",
onClick:
_cache[0] ||
(_cache[0] = (...args) =>
_ctx.handleYearTableClick && _ctx.handleYearTableClick(...args)),
},
[
vue.createElementVNode("tbody", null, [
vue.createElementVNode("tr", null, [
vue.createElementVNode(
"td",
{
class: vue.normalizeClass([
"available",
_ctx.getCellStyle(_ctx.startYear + 0),
]),
},
[
vue.createElementVNode(
"a",
_hoisted_1$R,
vue.toDisplayString(_ctx.startYear),
1
),
],
2
),
vue.createElementVNode(
"td",
{
class: vue.normalizeClass([
"available",
_ctx.getCellStyle(_ctx.startYear + 1),
]),
},
[
vue.createElementVNode(
"a",
_hoisted_2$F,
vue.toDisplayString(_ctx.startYear + 1),
1
),
],
2
),
vue.createElementVNode(
"td",
{
class: vue.normalizeClass([
"available",
_ctx.getCellStyle(_ctx.startYear + 2),
]),
},
[
vue.createElementVNode(
"a",
_hoisted_3$D,
vue.toDisplayString(_ctx.startYear + 2),
1
),
],
2
),
vue.createElementVNode(
"td",
{
class: vue.normalizeClass([
"available",
_ctx.getCellStyle(_ctx.startYear + 3),
]),
},
[
vue.createElementVNode(
"a",
_hoisted_4$o,
vue.toDisplayString(_ctx.startYear + 3),
1
),
],
2
),
]),
vue.createElementVNode("tr", null, [
vue.createElementVNode(
"td",
{
class: vue.normalizeClass([
"available",
_ctx.getCellStyle(_ctx.startYear + 4),
]),
},
[
vue.createElementVNode(
"a",
_hoisted_5$k,
vue.toDisplayString(_ctx.startYear + 4),
1
),
],
2
),
vue.createElementVNode(
"td",
{
class: vue.normalizeClass([
"available",
_ctx.getCellStyle(_ctx.startYear + 5),
]),
},
[
vue.createElementVNode(
"a",
_hoisted_6$h,
vue.toDisplayString(_ctx.startYear + 5),
1
),
],
2
),
vue.createElementVNode(
"td",
{
class: vue.normalizeClass([
"available",
_ctx.getCellStyle(_ctx.startYear + 6),
]),
},
[
vue.createElementVNode(
"a",
_hoisted_7$c,
vue.toDisplayString(_ctx.startYear + 6),
1
),
],
2
),
vue.createElementVNode(
"td",
{
class: vue.normalizeClass([
"available",
_ctx.getCellStyle(_ctx.startYear + 7),
]),
},
[
vue.createElementVNode(
"a",
_hoisted_8$9,
vue.toDisplayString(_ctx.startYear + 7),
1
),
],
2
),
]),
vue.createElementVNode("tr", null, [
vue.createElementVNode(
"td",
{
class: vue.normalizeClass([
"available",
_ctx.getCellStyle(_ctx.startYear + 8),
]),
},
[
vue.createElementVNode(
"a",
_hoisted_9$9,
vue.toDisplayString(_ctx.startYear + 8),
1
),
],
2
),
vue.createElementVNode(
"td",
{
class: vue.normalizeClass([
"available",
_ctx.getCellStyle(_ctx.startYear + 9),
]),
},
[
vue.createElementVNode(
"a",
_hoisted_10$9,
vue.toDisplayString(_ctx.startYear + 9),
1
),
],
2
),
_hoisted_11$6,
_hoisted_12$6,
]),
]),
]
)
);
}
script$1e.render = render$16;
script$1e.__file =
"packages/components/date-picker/src/date-picker-com/basic-year-table.vue";
const timeWithinRange = (_, __, ___) => true;
var script$1d = vue.defineComponent({
components: {
DateTable: script$1g,
ElInput: _Input,
ElButton,
TimePickPanel: script$1M,
MonthTable: script$1f,
YearTable: script$1e,
},
directives: { clickoutside: ClickOutside },
props: {
visible: {
type: Boolean,
default: false,
},
parsedValue: {
type: [Object, Array],
},
format: {
type: String,
default: "",
},
type: {
type: String,
required: true,
validator: isValidDatePickType,
},
},
emits: ["pick", "set-picker-option"],
setup(props, ctx) {
const { t, lang } = useLocaleInject();
const innerDate = vue.ref(dayjs_min().locale(lang.value));
const month = vue.computed(() => {
return innerDate.value.month();
});
const year = vue.computed(() => {
return innerDate.value.year();
});
const selectableRange = vue.ref([]);
const userInputDate = vue.ref(null);
const userInputTime = vue.ref(null);
const checkDateWithinRange = (date) => {
return selectableRange.value.length > 0
? timeWithinRange(
date,
selectableRange.value,
props.format || "HH:mm:ss"
)
: true;
};
const formatEmit = (emitDayjs) => {
if (defaultTime) {
const defaultTimeD = dayjs_min(defaultTime).locale(lang.value);
return defaultTimeD
.year(emitDayjs.year())
.month(emitDayjs.month())
.date(emitDayjs.date());
}
if (showTime.value) return emitDayjs.millisecond(0);
return emitDayjs.startOf("day");
};
const emit = (value, ...args) => {
if (!value) {
ctx.emit("pick", value, ...args);
} else if (Array.isArray(value)) {
const dates = value.map(formatEmit);
ctx.emit("pick", dates, ...args);
} else {
ctx.emit("pick", formatEmit(value), ...args);
}
userInputDate.value = null;
userInputTime.value = null;
};
const handleDatePick = (value) => {
if (selectionMode.value === "day") {
let newDate = props.parsedValue
? props.parsedValue
.year(value.year())
.month(value.month())
.date(value.date())
: value;
if (!checkDateWithinRange(newDate)) {
newDate = selectableRange.value[0][0]
.year(value.year())
.month(value.month())
.date(value.date());
}
innerDate.value = newDate;
emit(newDate, showTime.value);
} else if (selectionMode.value === "week") {
emit(value.date);
} else if (selectionMode.value === "dates") {
emit(value, true);
}
};
const prevMonth_ = () => {
innerDate.value = innerDate.value.subtract(1, "month");
};
const nextMonth_ = () => {
innerDate.value = innerDate.value.add(1, "month");
};
const prevYear_ = () => {
if (currentView.value === "year") {
innerDate.value = innerDate.value.subtract(10, "year");
} else {
innerDate.value = innerDate.value.subtract(1, "year");
}
};
const nextYear_ = () => {
if (currentView.value === "year") {
innerDate.value = innerDate.value.add(10, "year");
} else {
innerDate.value = innerDate.value.add(1, "year");
}
};
const currentView = vue.ref("date");
const yearLabel = vue.computed(() => {
const yearTranslation = t("el.datepicker.year");
if (currentView.value === "year") {
const startYear = Math.floor(year.value / 10) * 10;
if (yearTranslation) {
return `${startYear} ${yearTranslation} - ${
startYear + 9
} ${yearTranslation}`;
}
return `${startYear} - ${startYear + 9}`;
}
return `${year.value} ${yearTranslation}`;
});
const handleShortcutClick = (shortcut) => {
const shortcutValue =
typeof shortcut.value === "function"
? shortcut.value()
: shortcut.value;
if (shortcutValue) {
emit(dayjs_min(shortcutValue).locale(lang.value));
return;
}
if (shortcut.onClick) {
shortcut.onClick(ctx);
}
};
const selectionMode = vue.computed(() => {
if (["week", "month", "year", "dates"].includes(props.type)) {
return props.type;
}
return "day";
});
vue.watch(
() => selectionMode.value,
(val) => {
if (["month", "year"].includes(val)) {
currentView.value = val;
return;
}
currentView.value = "date";
},
{ immediate: true }
);
const hasShortcuts = vue.computed(() => !!shortcuts.length);
const handleMonthPick = (month2) => {
innerDate.value = innerDate.value.startOf("month").month(month2);
if (selectionMode.value === "month") {
emit(innerDate.value);
} else {
currentView.value = "date";
}
};
const handleYearPick = (year2) => {
if (selectionMode.value === "year") {
innerDate.value = innerDate.value.startOf("year").year(year2);
emit(innerDate.value);
} else {
innerDate.value = innerDate.value.year(year2);
currentView.value = "month";
}
};
const showMonthPicker = () => {
currentView.value = "month";
};
const showYearPicker = () => {
currentView.value = "year";
};
const showTime = vue.computed(
() => props.type === "datetime" || props.type === "datetimerange"
);
const footerVisible = vue.computed(() => {
return showTime.value || selectionMode.value === "dates";
});
const onConfirm = () => {
if (selectionMode.value === "dates") {
emit(props.parsedValue);
} else {
let result = props.parsedValue;
if (!result) {
const defaultTimeD = dayjs_min(defaultTime).locale(lang.value);
const defaultValueD = getDefaultValue();
result = defaultTimeD
.year(defaultValueD.year())
.month(defaultValueD.month())
.date(defaultValueD.date());
}
innerDate.value = result;
emit(result);
}
};
const changeToNow = () => {
const now = dayjs_min().locale(lang.value);
const nowDate = now.toDate();
if (
(!disabledDate || !disabledDate(nowDate)) &&
checkDateWithinRange(nowDate)
) {
innerDate.value = dayjs_min().locale(lang.value);
emit(innerDate.value);
}
};
const timeFormat = vue.computed(() => {
return extractTimeFormat(props.format);
});
const dateFormat = vue.computed(() => {
return extractDateFormat(props.format);
});
const visibleTime = vue.computed(() => {
if (userInputTime.value) return userInputTime.value;
if (!props.parsedValue && !defaultValue) return;
return (props.parsedValue || innerDate.value).format(timeFormat.value);
});
const visibleDate = vue.computed(() => {
if (userInputDate.value) return userInputDate.value;
if (!props.parsedValue && !defaultValue) return;
return (props.parsedValue || innerDate.value).format(dateFormat.value);
});
const timePickerVisible = vue.ref(false);
const onTimePickerInputFocus = () => {
timePickerVisible.value = true;
};
const handleTimePickClose = () => {
timePickerVisible.value = false;
};
const handleTimePick = (value, visible, first) => {
const newDate = props.parsedValue
? props.parsedValue
.hour(value.hour())
.minute(value.minute())
.second(value.second())
: value;
innerDate.value = newDate;
emit(innerDate.value, true);
if (!first) {
timePickerVisible.value = visible;
}
};
const handleVisibleTimeChange = (value) => {
const newDate = dayjs_min(value, timeFormat.value).locale(lang.value);
if (newDate.isValid() && checkDateWithinRange(newDate)) {
innerDate.value = newDate
.year(innerDate.value.year())
.month(innerDate.value.month())
.date(innerDate.value.date());
userInputTime.value = null;
timePickerVisible.value = false;
emit(innerDate.value, true);
}
};
const handleVisibleDateChange = (value) => {
const newDate = dayjs_min(value, dateFormat.value).locale(lang.value);
if (newDate.isValid()) {
if (disabledDate && disabledDate(newDate.toDate())) {
return;
}
innerDate.value = newDate
.hour(innerDate.value.hour())
.minute(innerDate.value.minute())
.second(innerDate.value.second());
userInputDate.value = null;
emit(innerDate.value, true);
}
};
const isValidValue = (date_) => {
return (
date_.isValid() &&
(disabledDate ? !disabledDate(date_.toDate()) : true)
);
};
const formatToString = (value) => {
if (selectionMode.value === "dates") {
return value.map((_) => _.format(props.format));
}
return value.format(props.format);
};
const parseUserInput = (value) => {
return dayjs_min(value, props.format).locale(lang.value);
};
const getDefaultValue = () => {
return dayjs_min(defaultValue).locale(lang.value);
};
const handleKeydown = (event) => {
const { code, keyCode } = event;
const list = [
EVENT_CODE.up,
EVENT_CODE.down,
EVENT_CODE.left,
EVENT_CODE.right,
];
if (props.visible && !timePickerVisible.value) {
if (list.includes(code)) {
handleKeyControl(keyCode);
event.stopPropagation();
event.preventDefault();
}
if (
code === EVENT_CODE.enter &&
userInputDate.value === null &&
userInputTime.value === null
) {
emit(innerDate, false);
}
}
};
const handleKeyControl = (keyCode) => {
const mapping = {
year: {
38: -4,
40: 4,
37: -1,
39: 1,
offset: (date, step) => date.setFullYear(date.getFullYear() + step),
},
month: {
38: -4,
40: 4,
37: -1,
39: 1,
offset: (date, step) => date.setMonth(date.getMonth() + step),
},
week: {
38: -1,
40: 1,
37: -1,
39: 1,
offset: (date, step) => date.setDate(date.getDate() + step * 7),
},
day: {
38: -7,
40: 7,
37: -1,
39: 1,
offset: (date, step) => date.setDate(date.getDate() + step),
},
};
const newDate = innerDate.value.toDate();
while (Math.abs(innerDate.value.diff(newDate, "year", true)) < 1) {
const map = mapping[selectionMode.value];
map.offset(newDate, map[keyCode]);
if (disabledDate && disabledDate(newDate)) {
continue;
}
const result = dayjs_min(newDate).locale(lang.value);
innerDate.value = result;
ctx.emit("pick", result, true);
break;
}
};
ctx.emit("set-picker-option", ["isValidValue", isValidValue]);
ctx.emit("set-picker-option", ["formatToString", formatToString]);
ctx.emit("set-picker-option", ["parseUserInput", parseUserInput]);
ctx.emit("set-picker-option", ["handleKeydown", handleKeydown]);
const pickerBase = vue.inject("EP_PICKER_BASE");
const {
shortcuts,
disabledDate,
cellClassName,
defaultTime,
defaultValue,
arrowControl,
} = pickerBase.props;
vue.watch(
() => props.parsedValue,
(val) => {
if (val) {
if (selectionMode.value === "dates") return;
if (Array.isArray(val)) return;
innerDate.value = val;
} else {
innerDate.value = getDefaultValue();
}
},
{ immediate: true }
);
return {
handleTimePick,
handleTimePickClose,
onTimePickerInputFocus,
timePickerVisible,
visibleTime,
visibleDate,
showTime,
changeToNow,
onConfirm,
footerVisible,
handleYearPick,
showMonthPicker,
showYearPicker,
handleMonthPick,
hasShortcuts,
shortcuts,
arrowControl,
disabledDate,
cellClassName,
selectionMode,
handleShortcutClick,
prevYear_,
nextYear_,
prevMonth_,
nextMonth_,
innerDate,
t,
yearLabel,
currentView,
month,
handleDatePick,
handleVisibleTimeChange,
handleVisibleDateChange,
timeFormat,
userInputTime,
userInputDate,
};
},
});
const _hoisted_1$Q = { class: "el-picker-panel__body-wrapper" };
const _hoisted_2$E = {
key: 0,
class: "el-picker-panel__sidebar",
};
const _hoisted_3$C = ["onClick"];
const _hoisted_4$n = { class: "el-picker-panel__body" };
const _hoisted_5$j = {
key: 0,
class: "el-date-picker__time-header",
};
const _hoisted_6$g = { class: "el-date-picker__editor-wrap" };
const _hoisted_7$b = { class: "el-date-picker__editor-wrap" };
const _hoisted_8$8 = ["aria-label"];
const _hoisted_9$8 = ["aria-label"];
const _hoisted_10$8 = ["aria-label"];
const _hoisted_11$5 = ["aria-label"];
const _hoisted_12$5 = { class: "el-picker-panel__content" };
const _hoisted_13$3 = { class: "el-picker-panel__footer" };
function render$15(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_input = vue.resolveComponent("el-input");
const _component_time_pick_panel = vue.resolveComponent("time-pick-panel");
const _component_date_table = vue.resolveComponent("date-table");
const _component_year_table = vue.resolveComponent("year-table");
const _component_month_table = vue.resolveComponent("month-table");
const _component_el_button = vue.resolveComponent("el-button");
const _directive_clickoutside = vue.resolveDirective("clickoutside");
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
class: vue.normalizeClass([
"el-picker-panel el-date-picker",
[
{
"has-sidebar": _ctx.$slots.sidebar || _ctx.hasShortcuts,
"has-time": _ctx.showTime,
},
],
]),
},
[
vue.createElementVNode("div", _hoisted_1$Q, [
vue.renderSlot(_ctx.$slots, "sidebar", {
class: "el-picker-panel__sidebar",
}),
_ctx.hasShortcuts
? (vue.openBlock(),
vue.createElementBlock("div", _hoisted_2$E, [
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.shortcuts, (shortcut, key) => {
return (
vue.openBlock(),
vue.createElementBlock(
"button",
{
key,
type: "button",
class: "el-picker-panel__shortcut",
onClick: ($event) =>
_ctx.handleShortcutClick(shortcut),
},
vue.toDisplayString(shortcut.text),
9,
_hoisted_3$C
)
);
}),
128
)),
]))
: vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", _hoisted_4$n, [
_ctx.showTime
? (vue.openBlock(),
vue.createElementBlock("div", _hoisted_5$j, [
vue.createElementVNode("span", _hoisted_6$g, [
vue.createVNode(
_component_el_input,
{
placeholder: _ctx.t("el.datepicker.selectDate"),
"model-value": _ctx.visibleDate,
size: "small",
onInput:
_cache[0] ||
(_cache[0] = (val) => (_ctx.userInputDate = val)),
onChange: _ctx.handleVisibleDateChange,
},
null,
8,
["placeholder", "model-value", "onChange"]
),
]),
vue.withDirectives(
vue.createElementVNode(
"span",
_hoisted_7$b,
[
vue.createVNode(
_component_el_input,
{
placeholder: _ctx.t("el.datepicker.selectTime"),
"model-value": _ctx.visibleTime,
size: "small",
onFocus: _ctx.onTimePickerInputFocus,
onInput:
_cache[1] ||
(_cache[1] = (val) =>
(_ctx.userInputTime = val)),
onChange: _ctx.handleVisibleTimeChange,
},
null,
8,
[
"placeholder",
"model-value",
"onFocus",
"onChange",
]
),
vue.createVNode(
_component_time_pick_panel,
{
visible: _ctx.timePickerVisible,
format: _ctx.timeFormat,
"time-arrow-control": _ctx.arrowControl,
"parsed-value": _ctx.innerDate,
onPick: _ctx.handleTimePick,
},
null,
8,
[
"visible",
"format",
"time-arrow-control",
"parsed-value",
"onPick",
]
),
],
512
),
[[_directive_clickoutside, _ctx.handleTimePickClose]]
),
]))
: vue.createCommentVNode("v-if", true),
vue.withDirectives(
vue.createElementVNode(
"div",
{
class: vue.normalizeClass([
"el-date-picker__header",
{
"el-date-picker__header--bordered":
_ctx.currentView === "year" ||
_ctx.currentView === "month",
},
]),
},
[
vue.createElementVNode(
"button",
{
type: "button",
"aria-label": _ctx.t(`el.datepicker.prevYear`),
class:
"\n el-picker-panel__icon-btn\n el-date-picker__prev-btn\n el-icon-d-arrow-left\n ",
onClick:
_cache[2] ||
(_cache[2] = (...args) =>
_ctx.prevYear_ && _ctx.prevYear_(...args)),
},
null,
8,
_hoisted_8$8
),
vue.withDirectives(
vue.createElementVNode(
"button",
{
type: "button",
"aria-label": _ctx.t(`el.datepicker.prevMonth`),
class:
"\n el-picker-panel__icon-btn\n el-date-picker__prev-btn\n el-icon-arrow-left\n ",
onClick:
_cache[3] ||
(_cache[3] = (...args) =>
_ctx.prevMonth_ && _ctx.prevMonth_(...args)),
},
null,
8,
_hoisted_9$8
),
[[vue.vShow, _ctx.currentView === "date"]]
),
vue.createElementVNode(
"span",
{
role: "button",
class: "el-date-picker__header-label",
onClick:
_cache[4] ||
(_cache[4] = (...args) =>
_ctx.showYearPicker &&
_ctx.showYearPicker(...args)),
},
vue.toDisplayString(_ctx.yearLabel),
1
),
vue.withDirectives(
vue.createElementVNode(
"span",
{
role: "button",
class: vue.normalizeClass([
"el-date-picker__header-label",
{ active: _ctx.currentView === "month" },
]),
onClick:
_cache[5] ||
(_cache[5] = (...args) =>
_ctx.showMonthPicker &&
_ctx.showMonthPicker(...args)),
},
vue.toDisplayString(
_ctx.t(`el.datepicker.month${_ctx.month + 1}`)
),
3
),
[[vue.vShow, _ctx.currentView === "date"]]
),
vue.createElementVNode(
"button",
{
type: "button",
"aria-label": _ctx.t(`el.datepicker.nextYear`),
class:
"\n el-picker-panel__icon-btn\n el-date-picker__next-btn\n el-icon-d-arrow-right\n ",
onClick:
_cache[6] ||
(_cache[6] = (...args) =>
_ctx.nextYear_ && _ctx.nextYear_(...args)),
},
null,
8,
_hoisted_10$8
),
vue.withDirectives(
vue.createElementVNode(
"button",
{
type: "button",
"aria-label": _ctx.t(`el.datepicker.nextMonth`),
class:
"\n el-picker-panel__icon-btn\n el-date-picker__next-btn\n el-icon-arrow-right\n ",
onClick:
_cache[7] ||
(_cache[7] = (...args) =>
_ctx.nextMonth_ && _ctx.nextMonth_(...args)),
},
null,
8,
_hoisted_11$5
),
[[vue.vShow, _ctx.currentView === "date"]]
),
],
2
),
[[vue.vShow, _ctx.currentView !== "time"]]
),
vue.createElementVNode("div", _hoisted_12$5, [
_ctx.currentView === "date"
? (vue.openBlock(),
vue.createBlock(
_component_date_table,
{
key: 0,
"selection-mode": _ctx.selectionMode,
date: _ctx.innerDate,
"parsed-value": _ctx.parsedValue,
"disabled-date": _ctx.disabledDate,
onPick: _ctx.handleDatePick,
},
null,
8,
[
"selection-mode",
"date",
"parsed-value",
"disabled-date",
"onPick",
]
))
: vue.createCommentVNode("v-if", true),
_ctx.currentView === "year"
? (vue.openBlock(),
vue.createBlock(
_component_year_table,
{
key: 1,
date: _ctx.innerDate,
"disabled-date": _ctx.disabledDate,
"parsed-value": _ctx.parsedValue,
onPick: _ctx.handleYearPick,
},
null,
8,
["date", "disabled-date", "parsed-value", "onPick"]
))
: vue.createCommentVNode("v-if", true),
_ctx.currentView === "month"
? (vue.openBlock(),
vue.createBlock(
_component_month_table,
{
key: 2,
date: _ctx.innerDate,
"parsed-value": _ctx.parsedValue,
"disabled-date": _ctx.disabledDate,
onPick: _ctx.handleMonthPick,
},
null,
8,
["date", "parsed-value", "disabled-date", "onPick"]
))
: vue.createCommentVNode("v-if", true),
]),
]),
]),
vue.withDirectives(
vue.createElementVNode(
"div",
_hoisted_13$3,
[
vue.withDirectives(
vue.createVNode(
_component_el_button,
{
size: "mini",
type: "text",
class: "el-picker-panel__link-btn",
onClick: _ctx.changeToNow,
},
{
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(_ctx.t("el.datepicker.now")),
1
),
]),
_: 1,
},
8,
["onClick"]
),
[[vue.vShow, _ctx.selectionMode !== "dates"]]
),
vue.createVNode(
_component_el_button,
{
plain: "",
size: "mini",
class: "el-picker-panel__link-btn",
onClick: _ctx.onConfirm,
},
{
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(_ctx.t("el.datepicker.confirm")),
1
),
]),
_: 1,
},
8,
["onClick"]
),
],
512
),
[[vue.vShow, _ctx.footerVisible && _ctx.currentView === "date"]]
),
],
2
)
);
}
script$1d.render = render$15;
script$1d.__file =
"packages/components/date-picker/src/date-picker-com/panel-date-pick.vue";
var script$1c = vue.defineComponent({
directives: { clickoutside: ClickOutside },
components: {
TimePickPanel: script$1M,
DateTable: script$1g,
ElInput: _Input,
ElButton,
},
props: {
unlinkPanels: Boolean,
parsedValue: {
type: Array,
},
type: {
type: String,
required: true,
validator: isValidDatePickType,
},
},
emits: ["pick", "set-picker-option", "calendar-change"],
setup(props, ctx) {
const { t, lang } = useLocaleInject();
const leftDate = vue.ref(dayjs_min().locale(lang.value));
const rightDate = vue.ref(dayjs_min().locale(lang.value).add(1, "month"));
const minDate = vue.ref(null);
const maxDate = vue.ref(null);
const dateUserInput = vue.ref({
min: null,
max: null,
});
const timeUserInput = vue.ref({
min: null,
max: null,
});
const leftLabel = vue.computed(() => {
return `${leftDate.value.year()} ${t("el.datepicker.year")} ${t(
`el.datepicker.month${leftDate.value.month() + 1}`
)}`;
});
const rightLabel = vue.computed(() => {
return `${rightDate.value.year()} ${t("el.datepicker.year")} ${t(
`el.datepicker.month${rightDate.value.month() + 1}`
)}`;
});
const leftYear = vue.computed(() => {
return leftDate.value.year();
});
const leftMonth = vue.computed(() => {
return leftDate.value.month();
});
const rightYear = vue.computed(() => {
return rightDate.value.year();
});
const rightMonth = vue.computed(() => {
return rightDate.value.month();
});
const hasShortcuts = vue.computed(() => !!shortcuts.length);
const minVisibleDate = vue.computed(() => {
if (dateUserInput.value.min !== null) return dateUserInput.value.min;
if (minDate.value) return minDate.value.format(dateFormat.value);
return "";
});
const maxVisibleDate = vue.computed(() => {
if (dateUserInput.value.max !== null) return dateUserInput.value.max;
if (maxDate.value || minDate.value)
return (maxDate.value || minDate.value).format(dateFormat.value);
return "";
});
const minVisibleTime = vue.computed(() => {
if (timeUserInput.value.min !== null) return timeUserInput.value.min;
if (minDate.value) return minDate.value.format(timeFormat.value);
return "";
});
const maxVisibleTime = vue.computed(() => {
if (timeUserInput.value.max !== null) return timeUserInput.value.max;
if (maxDate.value || minDate.value)
return (maxDate.value || minDate.value).format(timeFormat.value);
return "";
});
const timeFormat = vue.computed(() => {
return extractTimeFormat(format);
});
const dateFormat = vue.computed(() => {
return extractDateFormat(format);
});
const leftPrevYear = () => {
leftDate.value = leftDate.value.subtract(1, "year");
if (!props.unlinkPanels) {
rightDate.value = leftDate.value.add(1, "month");
}
};
const leftPrevMonth = () => {
leftDate.value = leftDate.value.subtract(1, "month");
if (!props.unlinkPanels) {
rightDate.value = leftDate.value.add(1, "month");
}
};
const rightNextYear = () => {
if (!props.unlinkPanels) {
leftDate.value = leftDate.value.add(1, "year");
rightDate.value = leftDate.value.add(1, "month");
} else {
rightDate.value = rightDate.value.add(1, "year");
}
};
const rightNextMonth = () => {
if (!props.unlinkPanels) {
leftDate.value = leftDate.value.add(1, "month");
rightDate.value = leftDate.value.add(1, "month");
} else {
rightDate.value = rightDate.value.add(1, "month");
}
};
const leftNextYear = () => {
leftDate.value = leftDate.value.add(1, "year");
};
const leftNextMonth = () => {
leftDate.value = leftDate.value.add(1, "month");
};
const rightPrevYear = () => {
rightDate.value = rightDate.value.subtract(1, "year");
};
const rightPrevMonth = () => {
rightDate.value = rightDate.value.subtract(1, "month");
};
const enableMonthArrow = vue.computed(() => {
const nextMonth = (leftMonth.value + 1) % 12;
const yearOffset = leftMonth.value + 1 >= 12 ? 1 : 0;
return (
props.unlinkPanels &&
new Date(leftYear.value + yearOffset, nextMonth) <
new Date(rightYear.value, rightMonth.value)
);
});
const enableYearArrow = vue.computed(() => {
return (
props.unlinkPanels &&
rightYear.value * 12 +
rightMonth.value -
(leftYear.value * 12 + leftMonth.value + 1) >=
12
);
});
const isValidValue = (value) => {
return (
Array.isArray(value) &&
value[0] &&
value[1] &&
value[0].valueOf() <= value[1].valueOf()
);
};
const rangeState = vue.ref({
endDate: null,
selecting: false,
});
const btnDisabled = vue.computed(() => {
return !(
minDate.value &&
maxDate.value &&
!rangeState.value.selecting &&
isValidValue([minDate.value, maxDate.value])
);
});
const handleChangeRange = (val) => {
rangeState.value = val;
};
const onSelect = (selecting) => {
rangeState.value.selecting = selecting;
if (!selecting) {
rangeState.value.endDate = null;
}
};
const showTime = vue.computed(
() => props.type === "datetime" || props.type === "datetimerange"
);
const handleConfirm = (visible = false) => {
if (isValidValue([minDate.value, maxDate.value])) {
ctx.emit("pick", [minDate.value, maxDate.value], visible);
}
};
const formatEmit = (emitDayjs, index) => {
if (!emitDayjs) return;
if (defaultTime) {
const defaultTimeD = dayjs_min(
defaultTime[index] || defaultTime
).locale(lang.value);
return defaultTimeD
.year(emitDayjs.year())
.month(emitDayjs.month())
.date(emitDayjs.date());
}
return emitDayjs;
};
const handleRangePick = (val, close = true) => {
const min_ = val.minDate;
const max_ = val.maxDate;
const minDate_ = formatEmit(min_, 0);
const maxDate_ = formatEmit(max_, 1);
if (maxDate.value === maxDate_ && minDate.value === minDate_) {
return;
}
ctx.emit("calendar-change", [min_.toDate(), max_ && max_.toDate()]);
maxDate.value = maxDate_;
minDate.value = minDate_;
if (!close || showTime.value) return;
handleConfirm();
};
const handleShortcutClick = (shortcut) => {
const shortcutValues =
typeof shortcut.value === "function"
? shortcut.value()
: shortcut.value;
if (shortcutValues) {
ctx.emit("pick", [
dayjs_min(shortcutValues[0]).locale(lang.value),
dayjs_min(shortcutValues[1]).locale(lang.value),
]);
return;
}
if (shortcut.onClick) {
shortcut.onClick(ctx);
}
};
const minTimePickerVisible = vue.ref(false);
const maxTimePickerVisible = vue.ref(false);
const handleMinTimeClose = () => {
minTimePickerVisible.value = false;
};
const handleMaxTimeClose = () => {
maxTimePickerVisible.value = false;
};
const handleDateInput = (value, type) => {
dateUserInput.value[type] = value;
const parsedValueD = dayjs_min(value, dateFormat.value).locale(
lang.value
);
if (parsedValueD.isValid()) {
if (disabledDate && disabledDate(parsedValueD.toDate())) {
return;
}
if (type === "min") {
leftDate.value = parsedValueD;
minDate.value = (minDate.value || leftDate.value)
.year(parsedValueD.year())
.month(parsedValueD.month())
.date(parsedValueD.date());
if (!props.unlinkPanels) {
rightDate.value = parsedValueD.add(1, "month");
maxDate.value = minDate.value.add(1, "month");
}
} else {
rightDate.value = parsedValueD;
maxDate.value = (maxDate.value || rightDate.value)
.year(parsedValueD.year())
.month(parsedValueD.month())
.date(parsedValueD.date());
if (!props.unlinkPanels) {
leftDate.value = parsedValueD.subtract(1, "month");
minDate.value = maxDate.value.subtract(1, "month");
}
}
}
};
const handleDateChange = (_, type) => {
dateUserInput.value[type] = null;
};
const handleTimeInput = (value, type) => {
timeUserInput.value[type] = value;
const parsedValueD = dayjs_min(value, timeFormat.value).locale(
lang.value
);
if (parsedValueD.isValid()) {
if (type === "min") {
minTimePickerVisible.value = true;
minDate.value = (minDate.value || leftDate.value)
.hour(parsedValueD.hour())
.minute(parsedValueD.minute())
.second(parsedValueD.second());
if (!maxDate.value || maxDate.value.isBefore(minDate.value)) {
maxDate.value = minDate.value;
}
} else {
maxTimePickerVisible.value = true;
maxDate.value = (maxDate.value || rightDate.value)
.hour(parsedValueD.hour())
.minute(parsedValueD.minute())
.second(parsedValueD.second());
rightDate.value = maxDate.value;
if (maxDate.value && maxDate.value.isBefore(minDate.value)) {
minDate.value = maxDate.value;
}
}
}
};
const handleTimeChange = (value, type) => {
timeUserInput.value[type] = null;
if (type === "min") {
leftDate.value = minDate.value;
minTimePickerVisible.value = false;
} else {
rightDate.value = maxDate.value;
maxTimePickerVisible.value = false;
}
};
const handleMinTimePick = (value, visible, first) => {
if (timeUserInput.value.min) return;
if (value) {
leftDate.value = value;
minDate.value = (minDate.value || leftDate.value)
.hour(value.hour())
.minute(value.minute())
.second(value.second());
}
if (!first) {
minTimePickerVisible.value = visible;
}
if (!maxDate.value || maxDate.value.isBefore(minDate.value)) {
maxDate.value = minDate.value;
rightDate.value = value;
}
};
const handleMaxTimePick = (value, visible, first) => {
if (timeUserInput.value.max) return;
if (value) {
rightDate.value = value;
maxDate.value = (maxDate.value || rightDate.value)
.hour(value.hour())
.minute(value.minute())
.second(value.second());
}
if (!first) {
maxTimePickerVisible.value = visible;
}
if (maxDate.value && maxDate.value.isBefore(minDate.value)) {
minDate.value = maxDate.value;
}
};
const handleClear = () => {
leftDate.value = getDefaultValue()[0];
rightDate.value = leftDate.value.add(1, "month");
ctx.emit("pick", null);
};
const formatToString = (value) => {
return Array.isArray(value)
? value.map((_) => _.format(format))
: value.format(format);
};
const parseUserInput = (value) => {
return Array.isArray(value)
? value.map((_) => dayjs_min(_, format).locale(lang.value))
: dayjs_min(value, format).locale(lang.value);
};
const getDefaultValue = () => {
let start;
if (Array.isArray(defaultValue)) {
const left = dayjs_min(defaultValue[0]);
let right = dayjs_min(defaultValue[1]);
if (!props.unlinkPanels) {
right = left.add(1, "month");
}
return [left, right];
} else if (defaultValue) {
start = dayjs_min(defaultValue);
} else {
start = dayjs_min();
}
start = start.locale(lang.value);
return [start, start.add(1, "month")];
};
ctx.emit("set-picker-option", ["isValidValue", isValidValue]);
ctx.emit("set-picker-option", ["parseUserInput", parseUserInput]);
ctx.emit("set-picker-option", ["formatToString", formatToString]);
ctx.emit("set-picker-option", ["handleClear", handleClear]);
const pickerBase = vue.inject("EP_PICKER_BASE");
const {
shortcuts,
disabledDate,
cellClassName,
format,
defaultTime,
defaultValue,
arrowControl,
clearable,
} = pickerBase.props;
vue.watch(
() => props.parsedValue,
(newVal) => {
if (newVal && newVal.length === 2) {
minDate.value = newVal[0];
maxDate.value = newVal[1];
leftDate.value = minDate.value;
if (props.unlinkPanels && maxDate.value) {
const minDateYear = minDate.value.year();
const minDateMonth = minDate.value.month();
const maxDateYear = maxDate.value.year();
const maxDateMonth = maxDate.value.month();
rightDate.value =
minDateYear === maxDateYear && minDateMonth === maxDateMonth
? maxDate.value.add(1, "month")
: maxDate.value;
} else {
rightDate.value = leftDate.value.add(1, "month");
if (maxDate.value) {
rightDate.value = rightDate.value
.hour(maxDate.value.hour())
.minute(maxDate.value.minute())
.second(maxDate.value.second());
}
}
} else {
const defaultArr = getDefaultValue();
minDate.value = null;
maxDate.value = null;
leftDate.value = defaultArr[0];
rightDate.value = defaultArr[1];
}
},
{ immediate: true }
);
return {
shortcuts,
disabledDate,
cellClassName,
minTimePickerVisible,
maxTimePickerVisible,
handleMinTimeClose,
handleMaxTimeClose,
handleShortcutClick,
rangeState,
minDate,
maxDate,
handleRangePick,
onSelect,
handleChangeRange,
btnDisabled,
enableYearArrow,
enableMonthArrow,
rightPrevMonth,
rightPrevYear,
rightNextMonth,
rightNextYear,
leftPrevMonth,
leftPrevYear,
leftNextMonth,
leftNextYear,
hasShortcuts,
leftLabel,
rightLabel,
leftDate,
rightDate,
showTime,
t,
minVisibleDate,
maxVisibleDate,
minVisibleTime,
maxVisibleTime,
arrowControl,
handleDateInput,
handleDateChange,
handleTimeInput,
handleTimeChange,
handleMinTimePick,
handleMaxTimePick,
handleClear,
handleConfirm,
timeFormat,
clearable,
};
},
});
const _hoisted_1$P = { class: "el-picker-panel__body-wrapper" };
const _hoisted_2$D = {
key: 0,
class: "el-picker-panel__sidebar",
};
const _hoisted_3$B = ["onClick"];
const _hoisted_4$m = { class: "el-picker-panel__body" };
const _hoisted_5$i = {
key: 0,
class: "el-date-range-picker__time-header",
};
const _hoisted_6$f = { class: "el-date-range-picker__editors-wrap" };
const _hoisted_7$a = { class: "el-date-range-picker__time-picker-wrap" };
const _hoisted_8$7 = { class: "el-date-range-picker__time-picker-wrap" };
const _hoisted_9$7 = /* @__PURE__ */ vue.createElementVNode(
"span",
{ class: "el-icon-arrow-right" },
null,
-1
);
const _hoisted_10$7 = {
class: "el-date-range-picker__editors-wrap is-right",
};
const _hoisted_11$4 = { class: "el-date-range-picker__time-picker-wrap" };
const _hoisted_12$4 = { class: "el-date-range-picker__time-picker-wrap" };
const _hoisted_13$2 = {
class: "el-picker-panel__content el-date-range-picker__content is-left",
};
const _hoisted_14$2 = { class: "el-date-range-picker__header" };
const _hoisted_15$1 = ["disabled"];
const _hoisted_16$1 = ["disabled"];
const _hoisted_17$1 = {
class:
"\n el-picker-panel__content\n el-date-range-picker__content\n is-right\n ",
};
const _hoisted_18$1 = { class: "el-date-range-picker__header" };
const _hoisted_19$1 = ["disabled"];
const _hoisted_20$1 = ["disabled"];
const _hoisted_21$1 = {
key: 0,
class: "el-picker-panel__footer",
};
function render$14(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_input = vue.resolveComponent("el-input");
const _component_time_pick_panel = vue.resolveComponent("time-pick-panel");
const _component_date_table = vue.resolveComponent("date-table");
const _component_el_button = vue.resolveComponent("el-button");
const _directive_clickoutside = vue.resolveDirective("clickoutside");
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
class: vue.normalizeClass([
"el-picker-panel el-date-range-picker",
[
{
"has-sidebar": _ctx.$slots.sidebar || _ctx.hasShortcuts,
"has-time": _ctx.showTime,
},
],
]),
},
[
vue.createElementVNode("div", _hoisted_1$P, [
vue.renderSlot(_ctx.$slots, "sidebar", {
class: "el-picker-panel__sidebar",
}),
_ctx.hasShortcuts
? (vue.openBlock(),
vue.createElementBlock("div", _hoisted_2$D, [
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.shortcuts, (shortcut, key) => {
return (
vue.openBlock(),
vue.createElementBlock(
"button",
{
key,
type: "button",
class: "el-picker-panel__shortcut",
onClick: ($event) =>
_ctx.handleShortcutClick(shortcut),
},
vue.toDisplayString(shortcut.text),
9,
_hoisted_3$B
)
);
}),
128
)),
]))
: vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", _hoisted_4$m, [
_ctx.showTime
? (vue.openBlock(),
vue.createElementBlock("div", _hoisted_5$i, [
vue.createElementVNode("span", _hoisted_6$f, [
vue.createElementVNode("span", _hoisted_7$a, [
vue.createVNode(
_component_el_input,
{
size: "small",
disabled: _ctx.rangeState.selecting,
placeholder: _ctx.t("el.datepicker.startDate"),
class: "el-date-range-picker__editor",
"model-value": _ctx.minVisibleDate,
onInput:
_cache[0] ||
(_cache[0] = (val) =>
_ctx.handleDateInput(val, "min")),
onChange:
_cache[1] ||
(_cache[1] = (val) =>
_ctx.handleDateChange(val, "min")),
},
null,
8,
["disabled", "placeholder", "model-value"]
),
]),
vue.withDirectives(
vue.createElementVNode(
"span",
_hoisted_8$7,
[
vue.createVNode(
_component_el_input,
{
size: "small",
class: "el-date-range-picker__editor",
disabled: _ctx.rangeState.selecting,
placeholder: _ctx.t("el.datepicker.startTime"),
"model-value": _ctx.minVisibleTime,
onFocus:
_cache[2] ||
(_cache[2] = ($event) =>
(_ctx.minTimePickerVisible = true)),
onInput:
_cache[3] ||
(_cache[3] = (val) =>
_ctx.handleTimeInput(val, "min")),
onChange:
_cache[4] ||
(_cache[4] = (val) =>
_ctx.handleTimeChange(val, "min")),
},
null,
8,
["disabled", "placeholder", "model-value"]
),
vue.createVNode(
_component_time_pick_panel,
{
visible: _ctx.minTimePickerVisible,
format: _ctx.timeFormat,
"datetime-role": "start",
"time-arrow-control": _ctx.arrowControl,
"parsed-value": _ctx.leftDate,
onPick: _ctx.handleMinTimePick,
},
null,
8,
[
"visible",
"format",
"time-arrow-control",
"parsed-value",
"onPick",
]
),
],
512
),
[[_directive_clickoutside, _ctx.handleMinTimeClose]]
),
]),
_hoisted_9$7,
vue.createElementVNode("span", _hoisted_10$7, [
vue.createElementVNode("span", _hoisted_11$4, [
vue.createVNode(
_component_el_input,
{
size: "small",
class: "el-date-range-picker__editor",
disabled: _ctx.rangeState.selecting,
placeholder: _ctx.t("el.datepicker.endDate"),
"model-value": _ctx.maxVisibleDate,
readonly: !_ctx.minDate,
onInput:
_cache[5] ||
(_cache[5] = (val) =>
_ctx.handleDateInput(val, "max")),
onChange:
_cache[6] ||
(_cache[6] = (val) =>
_ctx.handleDateChange(val, "max")),
},
null,
8,
["disabled", "placeholder", "model-value", "readonly"]
),
]),
vue.withDirectives(
vue.createElementVNode(
"span",
_hoisted_12$4,
[
vue.createVNode(
_component_el_input,
{
size: "small",
class: "el-date-range-picker__editor",
disabled: _ctx.rangeState.selecting,
placeholder: _ctx.t("el.datepicker.endTime"),
"model-value": _ctx.maxVisibleTime,
readonly: !_ctx.minDate,
onFocus:
_cache[7] ||
(_cache[7] = ($event) =>
_ctx.minDate &&
(_ctx.maxTimePickerVisible = true)),
onInput:
_cache[8] ||
(_cache[8] = (val) =>
_ctx.handleTimeInput(val, "max")),
onChange:
_cache[9] ||
(_cache[9] = (val) =>
_ctx.handleTimeChange(val, "max")),
},
null,
8,
[
"disabled",
"placeholder",
"model-value",
"readonly",
]
),
vue.createVNode(
_component_time_pick_panel,
{
"datetime-role": "end",
visible: _ctx.maxTimePickerVisible,
format: _ctx.timeFormat,
"time-arrow-control": _ctx.arrowControl,
"parsed-value": _ctx.rightDate,
onPick: _ctx.handleMaxTimePick,
},
null,
8,
[
"visible",
"format",
"time-arrow-control",
"parsed-value",
"onPick",
]
),
],
512
),
[[_directive_clickoutside, _ctx.handleMaxTimeClose]]
),
]),
]))
: vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", _hoisted_13$2, [
vue.createElementVNode("div", _hoisted_14$2, [
vue.createElementVNode("button", {
type: "button",
class: "el-picker-panel__icon-btn el-icon-d-arrow-left",
onClick:
_cache[10] ||
(_cache[10] = (...args) =>
_ctx.leftPrevYear && _ctx.leftPrevYear(...args)),
}),
vue.createElementVNode("button", {
type: "button",
class: "el-picker-panel__icon-btn el-icon-arrow-left",
onClick:
_cache[11] ||
(_cache[11] = (...args) =>
_ctx.leftPrevMonth && _ctx.leftPrevMonth(...args)),
}),
_ctx.unlinkPanels
? (vue.openBlock(),
vue.createElementBlock(
"button",
{
key: 0,
type: "button",
disabled: !_ctx.enableYearArrow,
class: vue.normalizeClass([
{ "is-disabled": !_ctx.enableYearArrow },
"el-picker-panel__icon-btn el-icon-d-arrow-right",
]),
onClick:
_cache[12] ||
(_cache[12] = (...args) =>
_ctx.leftNextYear && _ctx.leftNextYear(...args)),
},
null,
10,
_hoisted_15$1
))
: vue.createCommentVNode("v-if", true),
_ctx.unlinkPanels
? (vue.openBlock(),
vue.createElementBlock(
"button",
{
key: 1,
type: "button",
disabled: !_ctx.enableMonthArrow,
class: vue.normalizeClass([
{ "is-disabled": !_ctx.enableMonthArrow },
"el-picker-panel__icon-btn el-icon-arrow-right",
]),
onClick:
_cache[13] ||
(_cache[13] = (...args) =>
_ctx.leftNextMonth &&
_ctx.leftNextMonth(...args)),
},
null,
10,
_hoisted_16$1
))
: vue.createCommentVNode("v-if", true),
vue.createElementVNode(
"div",
null,
vue.toDisplayString(_ctx.leftLabel),
1
),
]),
vue.createVNode(
_component_date_table,
{
"selection-mode": "range",
date: _ctx.leftDate,
"min-date": _ctx.minDate,
"max-date": _ctx.maxDate,
"range-state": _ctx.rangeState,
"disabled-date": _ctx.disabledDate,
"cell-class-name": _ctx.cellClassName,
onChangerange: _ctx.handleChangeRange,
onPick: _ctx.handleRangePick,
onSelect: _ctx.onSelect,
},
null,
8,
[
"date",
"min-date",
"max-date",
"range-state",
"disabled-date",
"cell-class-name",
"onChangerange",
"onPick",
"onSelect",
]
),
]),
vue.createElementVNode("div", _hoisted_17$1, [
vue.createElementVNode("div", _hoisted_18$1, [
_ctx.unlinkPanels
? (vue.openBlock(),
vue.createElementBlock(
"button",
{
key: 0,
type: "button",
disabled: !_ctx.enableYearArrow,
class: vue.normalizeClass([
{ "is-disabled": !_ctx.enableYearArrow },
"el-picker-panel__icon-btn el-icon-d-arrow-left",
]),
onClick:
_cache[14] ||
(_cache[14] = (...args) =>
_ctx.rightPrevYear &&
_ctx.rightPrevYear(...args)),
},
null,
10,
_hoisted_19$1
))
: vue.createCommentVNode("v-if", true),
_ctx.unlinkPanels
? (vue.openBlock(),
vue.createElementBlock(
"button",
{
key: 1,
type: "button",
disabled: !_ctx.enableMonthArrow,
class: vue.normalizeClass([
{ "is-disabled": !_ctx.enableMonthArrow },
"el-picker-panel__icon-btn el-icon-arrow-left",
]),
onClick:
_cache[15] ||
(_cache[15] = (...args) =>
_ctx.rightPrevMonth &&
_ctx.rightPrevMonth(...args)),
},
null,
10,
_hoisted_20$1
))
: vue.createCommentVNode("v-if", true),
vue.createElementVNode("button", {
type: "button",
class: "el-picker-panel__icon-btn el-icon-d-arrow-right",
onClick:
_cache[16] ||
(_cache[16] = (...args) =>
_ctx.rightNextYear && _ctx.rightNextYear(...args)),
}),
vue.createElementVNode("button", {
type: "button",
class: "el-picker-panel__icon-btn el-icon-arrow-right",
onClick:
_cache[17] ||
(_cache[17] = (...args) =>
_ctx.rightNextMonth && _ctx.rightNextMonth(...args)),
}),
vue.createElementVNode(
"div",
null,
vue.toDisplayString(_ctx.rightLabel),
1
),
]),
vue.createVNode(
_component_date_table,
{
"selection-mode": "range",
date: _ctx.rightDate,
"min-date": _ctx.minDate,
"max-date": _ctx.maxDate,
"range-state": _ctx.rangeState,
"disabled-date": _ctx.disabledDate,
"cell-class-name": _ctx.cellClassName,
onChangerange: _ctx.handleChangeRange,
onPick: _ctx.handleRangePick,
onSelect: _ctx.onSelect,
},
null,
8,
[
"date",
"min-date",
"max-date",
"range-state",
"disabled-date",
"cell-class-name",
"onChangerange",
"onPick",
"onSelect",
]
),
]),
]),
]),
_ctx.showTime
? (vue.openBlock(),
vue.createElementBlock("div", _hoisted_21$1, [
_ctx.clearable
? (vue.openBlock(),
vue.createBlock(
_component_el_button,
{
key: 0,
size: "mini",
type: "text",
class: "el-picker-panel__link-btn",
onClick: _ctx.handleClear,
},
{
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(_ctx.t("el.datepicker.clear")),
1
),
]),
_: 1,
},
8,
["onClick"]
))
: vue.createCommentVNode("v-if", true),
vue.createVNode(
_component_el_button,
{
plain: "",
size: "mini",
class: "el-picker-panel__link-btn",
disabled: _ctx.btnDisabled,
onClick:
_cache[18] ||
(_cache[18] = ($event) => _ctx.handleConfirm(false)),
},
{
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(_ctx.t("el.datepicker.confirm")),
1
),
]),
_: 1,
},
8,
["disabled"]
),
]))
: vue.createCommentVNode("v-if", true),
],
2
)
);
}
script$1c.render = render$14;
script$1c.__file =
"packages/components/date-picker/src/date-picker-com/panel-date-range.vue";
var script$1b = vue.defineComponent({
components: { MonthTable: script$1f },
props: {
unlinkPanels: Boolean,
parsedValue: {
type: Array,
},
},
emits: ["pick", "set-picker-option"],
setup(props, ctx) {
const { t, lang } = useLocaleInject();
const leftDate = vue.ref(dayjs_min().locale(lang.value));
const rightDate = vue.ref(dayjs_min().locale(lang.value).add(1, "year"));
const hasShortcuts = vue.computed(() => !!shortcuts.length);
const handleShortcutClick = (shortcut) => {
const shortcutValues =
typeof shortcut.value === "function"
? shortcut.value()
: shortcut.value;
if (shortcutValues) {
ctx.emit("pick", [
dayjs_min(shortcutValues[0]).locale(lang.value),
dayjs_min(shortcutValues[1]).locale(lang.value),
]);
return;
}
if (shortcut.onClick) {
shortcut.onClick(ctx);
}
};
const leftPrevYear = () => {
leftDate.value = leftDate.value.subtract(1, "year");
if (!props.unlinkPanels) {
rightDate.value = rightDate.value.subtract(1, "year");
}
};
const rightNextYear = () => {
if (!props.unlinkPanels) {
leftDate.value = leftDate.value.add(1, "year");
}
rightDate.value = rightDate.value.add(1, "year");
};
const leftNextYear = () => {
leftDate.value = leftDate.value.add(1, "year");
};
const rightPrevYear = () => {
rightDate.value = rightDate.value.subtract(1, "year");
};
const leftLabel = vue.computed(() => {
return `${leftDate.value.year()} ${t("el.datepicker.year")}`;
});
const rightLabel = vue.computed(() => {
return `${rightDate.value.year()} ${t("el.datepicker.year")}`;
});
const leftYear = vue.computed(() => {
return leftDate.value.year();
});
const rightYear = vue.computed(() => {
return rightDate.value.year() === leftDate.value.year()
? leftDate.value.year() + 1
: rightDate.value.year();
});
const enableYearArrow = vue.computed(() => {
return props.unlinkPanels && rightYear.value > leftYear.value + 1;
});
const minDate = vue.ref(null);
const maxDate = vue.ref(null);
const rangeState = vue.ref({
endDate: null,
selecting: false,
});
const handleChangeRange = (val) => {
rangeState.value = val;
};
const handleRangePick = (val, close = true) => {
const minDate_ = val.minDate;
const maxDate_ = val.maxDate;
if (maxDate.value === maxDate_ && minDate.value === minDate_) {
return;
}
maxDate.value = maxDate_;
minDate.value = minDate_;
if (!close) return;
handleConfirm();
};
const isValidValue = (value) => {
return (
Array.isArray(value) &&
value &&
value[0] &&
value[1] &&
value[0].valueOf() <= value[1].valueOf()
);
};
const handleConfirm = (visible = false) => {
if (isValidValue([minDate.value, maxDate.value])) {
ctx.emit("pick", [minDate.value, maxDate.value], visible);
}
};
const onSelect = (selecting) => {
rangeState.value.selecting = selecting;
if (!selecting) {
rangeState.value.endDate = null;
}
};
const formatToString = (value) => {
return value.map((_) => _.format(format));
};
const getDefaultValue = () => {
let start;
if (Array.isArray(defaultValue)) {
const left = dayjs_min(defaultValue[0]);
let right = dayjs_min(defaultValue[1]);
if (!props.unlinkPanels) {
right = left.add(1, "year");
}
return [left, right];
} else if (defaultValue) {
start = dayjs_min(defaultValue);
} else {
start = dayjs_min();
}
start = start.locale(lang.value);
return [start, start.add(1, "year")];
};
ctx.emit("set-picker-option", ["formatToString", formatToString]);
const pickerBase = vue.inject("EP_PICKER_BASE");
const { shortcuts, disabledDate, format, defaultValue } =
pickerBase.props;
vue.watch(
() => props.parsedValue,
(newVal) => {
if (newVal && newVal.length === 2) {
minDate.value = newVal[0];
maxDate.value = newVal[1];
leftDate.value = minDate.value;
if (props.unlinkPanels && maxDate.value) {
const minDateYear = minDate.value.year();
const maxDateYear = maxDate.value.year();
rightDate.value =
minDateYear === maxDateYear
? maxDate.value.add(1, "year")
: maxDate.value;
} else {
rightDate.value = leftDate.value.add(1, "year");
}
} else {
const defaultArr = getDefaultValue();
leftDate.value = defaultArr[0];
rightDate.value = defaultArr[1];
}
},
{ immediate: true }
);
return {
shortcuts,
disabledDate,
onSelect,
handleRangePick,
rangeState,
handleChangeRange,
minDate,
maxDate,
enableYearArrow,
leftLabel,
rightLabel,
leftNextYear,
leftPrevYear,
rightNextYear,
rightPrevYear,
t,
leftDate,
rightDate,
hasShortcuts,
handleShortcutClick,
};
},
});
const _hoisted_1$O = { class: "el-picker-panel__body-wrapper" };
const _hoisted_2$C = {
key: 0,
class: "el-picker-panel__sidebar",
};
const _hoisted_3$A = ["onClick"];
const _hoisted_4$l = { class: "el-picker-panel__body" };
const _hoisted_5$h = {
class: "el-picker-panel__content el-date-range-picker__content is-left",
};
const _hoisted_6$e = { class: "el-date-range-picker__header" };
const _hoisted_7$9 = ["disabled"];
const _hoisted_8$6 = {
class:
"\n el-picker-panel__content\n el-date-range-picker__content\n is-right\n ",
};
const _hoisted_9$6 = { class: "el-date-range-picker__header" };
const _hoisted_10$6 = ["disabled"];
function render$13(_ctx, _cache, $props, $setup, $data, $options) {
const _component_month_table = vue.resolveComponent("month-table");
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
class: vue.normalizeClass([
"el-picker-panel el-date-range-picker",
[
{
"has-sidebar": _ctx.$slots.sidebar || _ctx.hasShortcuts,
},
],
]),
},
[
vue.createElementVNode("div", _hoisted_1$O, [
vue.renderSlot(_ctx.$slots, "sidebar", {
class: "el-picker-panel__sidebar",
}),
_ctx.hasShortcuts
? (vue.openBlock(),
vue.createElementBlock("div", _hoisted_2$C, [
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.shortcuts, (shortcut, key) => {
return (
vue.openBlock(),
vue.createElementBlock(
"button",
{
key,
type: "button",
class: "el-picker-panel__shortcut",
onClick: ($event) =>
_ctx.handleShortcutClick(shortcut),
},
vue.toDisplayString(shortcut.text),
9,
_hoisted_3$A
)
);
}),
128
)),
]))
: vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", _hoisted_4$l, [
vue.createElementVNode("div", _hoisted_5$h, [
vue.createElementVNode("div", _hoisted_6$e, [
vue.createElementVNode("button", {
type: "button",
class: "el-picker-panel__icon-btn el-icon-d-arrow-left",
onClick:
_cache[0] ||
(_cache[0] = (...args) =>
_ctx.leftPrevYear && _ctx.leftPrevYear(...args)),
}),
_ctx.unlinkPanels
? (vue.openBlock(),
vue.createElementBlock(
"button",
{
key: 0,
type: "button",
disabled: !_ctx.enableYearArrow,
class: vue.normalizeClass([
{ "is-disabled": !_ctx.enableYearArrow },
"el-picker-panel__icon-btn el-icon-d-arrow-right",
]),
onClick:
_cache[1] ||
(_cache[1] = (...args) =>
_ctx.leftNextYear && _ctx.leftNextYear(...args)),
},
null,
10,
_hoisted_7$9
))
: vue.createCommentVNode("v-if", true),
vue.createElementVNode(
"div",
null,
vue.toDisplayString(_ctx.leftLabel),
1
),
]),
vue.createVNode(
_component_month_table,
{
"selection-mode": "range",
date: _ctx.leftDate,
"min-date": _ctx.minDate,
"max-date": _ctx.maxDate,
"range-state": _ctx.rangeState,
"disabled-date": _ctx.disabledDate,
onChangerange: _ctx.handleChangeRange,
onPick: _ctx.handleRangePick,
onSelect: _ctx.onSelect,
},
null,
8,
[
"date",
"min-date",
"max-date",
"range-state",
"disabled-date",
"onChangerange",
"onPick",
"onSelect",
]
),
]),
vue.createElementVNode("div", _hoisted_8$6, [
vue.createElementVNode("div", _hoisted_9$6, [
_ctx.unlinkPanels
? (vue.openBlock(),
vue.createElementBlock(
"button",
{
key: 0,
type: "button",
disabled: !_ctx.enableYearArrow,
class: vue.normalizeClass([
{ "is-disabled": !_ctx.enableYearArrow },
"el-picker-panel__icon-btn el-icon-d-arrow-left",
]),
onClick:
_cache[2] ||
(_cache[2] = (...args) =>
_ctx.rightPrevYear &&
_ctx.rightPrevYear(...args)),
},
null,
10,
_hoisted_10$6
))
: vue.createCommentVNode("v-if", true),
vue.createElementVNode("button", {
type: "button",
class: "el-picker-panel__icon-btn el-icon-d-arrow-right",
onClick:
_cache[3] ||
(_cache[3] = (...args) =>
_ctx.rightNextYear && _ctx.rightNextYear(...args)),
}),
vue.createElementVNode(
"div",
null,
vue.toDisplayString(_ctx.rightLabel),
1
),
]),
vue.createVNode(
_component_month_table,
{
"selection-mode": "range",
date: _ctx.rightDate,
"min-date": _ctx.minDate,
"max-date": _ctx.maxDate,
"range-state": _ctx.rangeState,
"disabled-date": _ctx.disabledDate,
onChangerange: _ctx.handleChangeRange,
onPick: _ctx.handleRangePick,
onSelect: _ctx.onSelect,
},
null,
8,
[
"date",
"min-date",
"max-date",
"range-state",
"disabled-date",
"onChangerange",
"onPick",
"onSelect",
]
),
]),
]),
]),
],
2
)
);
}
script$1b.render = render$13;
script$1b.__file =
"packages/components/date-picker/src/date-picker-com/panel-month-range.vue";
var __defProp$w = Object.defineProperty;
var __defProps$n = Object.defineProperties;
var __getOwnPropDescs$n = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$w = Object.getOwnPropertySymbols;
var __hasOwnProp$w = Object.prototype.hasOwnProperty;
var __propIsEnum$w = Object.prototype.propertyIsEnumerable;
var __defNormalProp$w = (obj, key, value) =>
key in obj
? __defProp$w(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$w = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$w.call(b, prop)) __defNormalProp$w(a, prop, b[prop]);
if (__getOwnPropSymbols$w)
for (var prop of __getOwnPropSymbols$w(b)) {
if (__propIsEnum$w.call(b, prop)) __defNormalProp$w(a, prop, b[prop]);
}
return a;
};
var __spreadProps$n = (a, b) => __defProps$n(a, __getOwnPropDescs$n(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
dayjs_min.extend(localeData);
dayjs_min.extend(advancedFormat);
dayjs_min.extend(customParseFormat);
dayjs_min.extend(weekOfYear);
dayjs_min.extend(weekYear);
dayjs_min.extend(dayOfYear);
dayjs_min.extend(isSameOrAfter);
dayjs_min.extend(isSameOrBefore);
const getPanel = function (type) {
if (type === "daterange" || type === "datetimerange") {
return script$1c;
} else if (type === "monthrange") {
return script$1b;
}
return script$1d;
};
var DatePicker = vue.defineComponent({
name: "ElDatePicker",
install: null,
props: __spreadProps$n(__spreadValues$w({}, timePickerDefaultProps), {
type: {
type: String,
default: "date",
},
}),
emits: ["update:modelValue"],
setup(props, ctx) {
vue.provide("ElPopperOptions", props.popperOptions);
const commonPicker = vue.ref(null);
const refProps = __spreadProps$n(__spreadValues$w({}, props), {
focus: () => {
var _a;
(_a = commonPicker.value) == null ? void 0 : _a.handleFocus();
},
});
ctx.expose(refProps);
return () => {
var _a;
const format =
(_a = props.format) != null
? _a
: DEFAULT_FORMATS_DATEPICKER[props.type] || DEFAULT_FORMATS_DATE;
return vue.h(
script$1O,
__spreadProps$n(__spreadValues$w({}, props), {
format,
type: props.type,
ref: commonPicker,
"onUpdate:modelValue": (value) =>
ctx.emit("update:modelValue", value),
}),
{
default: (scopedProps) => vue.h(getPanel(props.type), scopedProps),
}
);
};
},
});
const _DatePicker = DatePicker;
_DatePicker.install = (app) => {
app.component(_DatePicker.name, _DatePicker);
};
const ElDatePicker = _DatePicker;
const elDescriptionsKey = "elDescriptions";
var DescriptionsCell = vue.defineComponent({
name: "ElDescriptionsCell",
props: {
cell: {
type: Object,
},
tag: {
type: String,
},
type: {
type: String,
},
},
setup() {
const descriptions = vue.inject(elDescriptionsKey, {});
return {
descriptions,
};
},
render() {
var _a, _b, _c, _d, _e, _f;
const item = getNormalizedProps(this.cell);
const label =
((_c =
(_b = (_a = this.cell) == null ? void 0 : _a.children) == null
? void 0
: _b.label) == null
? void 0
: _c.call(_b)) || item.label;
const content =
(_f =
(_e = (_d = this.cell) == null ? void 0 : _d.children) == null
? void 0
: _e.default) == null
? void 0
: _f.call(_e);
const span = item.span;
const align = item.align ? `is-${item.align}` : "";
const labelAlign = item.labelAlign ? `is-${item.labelAlign}` : align;
const className = item.className;
const labelClassName = item.labelClassName;
const style = {
width: addUnit(item.width),
minWidth: addUnit(item.minWidth),
};
switch (this.type) {
case "label":
return vue.h(
this.tag,
{
style,
class: [
"el-descriptions__cell",
"el-descriptions__label",
{ "is-bordered-label": this.descriptions.border },
labelAlign,
labelClassName,
],
colSpan: this.descriptions.direction === "vertical" ? span : 1,
},
label
);
case "content":
return vue.h(
this.tag,
{
style,
class: [
"el-descriptions__cell",
"el-descriptions__content",
align,
className,
],
colSpan:
this.descriptions.direction === "vertical"
? span
: span * 2 - 1,
},
content
);
default:
return vue.h(
"td",
{
style,
class: ["el-descriptions__cell", align],
colSpan: span,
},
[
vue.h(
"span",
{
class: ["el-descriptions__label", labelClassName],
},
label
),
vue.h(
"span",
{
class: ["el-descriptions__content", className],
},
content
),
]
);
}
},
});
var script$1a = vue.defineComponent({
name: "ElDescriptionsRow",
components: {
[DescriptionsCell.name]: DescriptionsCell,
},
props: {
row: {
type: Array,
},
},
setup() {
const descriptions = vue.inject(elDescriptionsKey, {});
return {
descriptions,
};
},
});
const _hoisted_1$N = { key: 1 };
function render$12(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_descriptions_cell = vue.resolveComponent(
"el-descriptions-cell"
);
return _ctx.descriptions.direction === "vertical"
? (vue.openBlock(),
vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
vue.createElementVNode("tr", null, [
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.row, (cell, index) => {
return (
vue.openBlock(),
vue.createBlock(
_component_el_descriptions_cell,
{
key: `tr1-${index}`,
cell,
tag: "th",
type: "label",
},
null,
8,
["cell"]
)
);
}),
128
)),
]),
vue.createElementVNode("tr", null, [
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.row, (cell, index) => {
return (
vue.openBlock(),
vue.createBlock(
_component_el_descriptions_cell,
{
key: `tr2-${index}`,
cell,
tag: "td",
type: "content",
},
null,
8,
["cell"]
)
);
}),
128
)),
]),
],
64
))
: (vue.openBlock(),
vue.createElementBlock("tr", _hoisted_1$N, [
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.row, (cell, index) => {
return (
vue.openBlock(),
vue.createElementBlock(
vue.Fragment,
{
key: `tr3-${index}`,
},
[
_ctx.descriptions.border
? (vue.openBlock(),
vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
vue.createVNode(
_component_el_descriptions_cell,
{
cell,
tag: "td",
type: "label",
},
null,
8,
["cell"]
),
vue.createVNode(
_component_el_descriptions_cell,
{
cell,
tag: "td",
type: "content",
},
null,
8,
["cell"]
),
],
64
))
: (vue.openBlock(),
vue.createBlock(
_component_el_descriptions_cell,
{
key: 1,
cell,
tag: "td",
type: "both",
},
null,
8,
["cell"]
)),
],
64
)
);
}),
128
)),
]));
}
script$1a.render = render$12;
script$1a.__file =
"packages/components/descriptions/src/descriptions-row.vue";
var script$19 = vue.defineComponent({
name: "ElDescriptions",
components: {
[script$1a.name]: script$1a,
},
props: {
border: {
type: Boolean,
default: false,
},
column: {
type: Number,
default: 3,
},
direction: {
type: String,
default: "horizontal",
},
size: {
type: String,
validator: isValidComponentSize,
},
title: {
type: String,
default: "",
},
extra: {
type: String,
default: "",
},
},
setup(props, { slots }) {
vue.provide(elDescriptionsKey, props);
const $ELEMENT = useGlobalConfig();
const descriptionsSize = vue.computed(() => {
return props.size || $ELEMENT.size;
});
const flattedChildren = (children) => {
const temp = Array.isArray(children) ? children : [children];
const res = [];
temp.forEach((child) => {
if (Array.isArray(child.children)) {
res.push(...flattedChildren(child.children));
} else {
res.push(child);
}
});
return res;
};
const filledNode = (node, span, count, isLast = false) => {
if (!node.props) {
node.props = {};
}
if (span > count) {
node.props.span = count;
}
if (isLast) {
node.props.span = span;
}
return node;
};
const getRows = () => {
var _a;
const children = flattedChildren(
(_a = slots.default) == null ? void 0 : _a.call(slots)
).filter((node) => {
var _a2;
return (
((_a2 = node == null ? void 0 : node.type) == null
? void 0
: _a2.name) === "ElDescriptionsItem"
);
});
const rows = [];
let temp = [];
let count = props.column;
let totalSpan = 0;
children.forEach((node, index) => {
var _a2;
const span = ((_a2 = node.props) == null ? void 0 : _a2.span) || 1;
if (index < children.length - 1) {
totalSpan += span > count ? count : span;
}
if (index === children.length - 1) {
const lastSpan = props.column - (totalSpan % props.column);
temp.push(filledNode(node, lastSpan, count, true));
rows.push(temp);
return;
}
if (span < count) {
count -= span;
temp.push(node);
} else {
temp.push(filledNode(node, span, count));
rows.push(temp);
count = props.column;
temp = [];
}
});
return rows;
};
return {
descriptionsSize,
getRows,
};
},
});
const _hoisted_1$M = { class: "el-descriptions" };
const _hoisted_2$B = {
key: 0,
class: "el-descriptions__header",
};
const _hoisted_3$z = { class: "el-descriptions__title" };
const _hoisted_4$k = { class: "el-descriptions__extra" };
const _hoisted_5$g = { class: "el-descriptions__body" };
function render$11(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_descriptions_row = vue.resolveComponent(
"el-descriptions-row"
);
return (
vue.openBlock(),
vue.createElementBlock("div", _hoisted_1$M, [
_ctx.title || _ctx.extra || _ctx.$slots.title || _ctx.$slots.extra
? (vue.openBlock(),
vue.createElementBlock("div", _hoisted_2$B, [
vue.createElementVNode("div", _hoisted_3$z, [
vue.renderSlot(_ctx.$slots, "title", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.title), 1),
]),
]),
vue.createElementVNode("div", _hoisted_4$k, [
vue.renderSlot(_ctx.$slots, "extra", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.extra), 1),
]),
]),
]))
: vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", _hoisted_5$g, [
vue.createElementVNode(
"table",
{
class: vue.normalizeClass([
"el-descriptions__table",
{ "is-bordered": _ctx.border },
_ctx.descriptionsSize
? `el-descriptions--${_ctx.descriptionsSize}`
: "",
]),
},
[
vue.createElementVNode("tbody", null, [
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.getRows(), (row, index) => {
return (
vue.openBlock(),
vue.createBlock(
_component_el_descriptions_row,
{
key: index,
row,
},
null,
8,
["row"]
)
);
}),
128
)),
]),
],
2
),
]),
])
);
}
script$19.render = render$11;
script$19.__file = "packages/components/descriptions/src/index.vue";
var DescriptionsItem = vue.defineComponent({
name: "ElDescriptionsItem",
props: {
label: {
type: String,
default: "",
},
span: {
type: Number,
default: 1,
},
width: {
type: [String, Number],
default: "",
},
minWidth: {
type: [String, Number],
default: "",
},
align: {
type: String,
default: "left",
},
labelAlign: {
type: String,
default: "",
},
className: {
type: String,
default: "",
},
labelClassName: {
type: String,
default: "",
},
},
});
const ElDescriptions = withInstall(script$19, {
DescriptionsItem,
});
const ElDescriptionsItem = withNoopInstall(DescriptionsItem);
const overlayProps = {
mask: {
type: Boolean,
default: true,
},
customMaskEvent: {
type: Boolean,
default: false,
},
overlayClass: buildProp({
type: definePropType([String, Array, Object]),
}),
zIndex: buildProp({
type: definePropType([String, Number]),
}),
};
const overlayEmits = {
click: (evt) => evt instanceof MouseEvent,
};
var Overlay = vue.defineComponent({
name: "ElOverlay",
props: overlayProps,
emits: overlayEmits,
setup(props, { slots, emit }) {
const onMaskClick = (e) => {
emit("click", e);
};
const { onClick, onMousedown, onMouseup } = useSameTarget(
props.customMaskEvent ? void 0 : onMaskClick
);
return () => {
return props.mask
? vue.createVNode(
"div",
{
class: ["el-overlay", props.overlayClass],
style: {
zIndex: props.zIndex,
},
onClick,
onMousedown,
onMouseup,
},
[vue.renderSlot(slots, "default")],
PatchFlags.STYLE | PatchFlags.CLASS | PatchFlags.PROPS,
["onClick", "onMouseup", "onMousedown"]
)
: vue.h(
"div",
{
class: props.overlayClass,
style: {
zIndex: props.zIndex,
position: "fixed",
top: "0px",
right: "0px",
bottom: "0px",
left: "0px",
},
},
[vue.renderSlot(slots, "default")]
);
};
},
});
const ElOverlay = Overlay;
const dialogProps = {
appendToBody: {
type: Boolean,
default: false,
},
beforeClose: buildProp({
type: definePropType(Function),
}),
destroyOnClose: {
type: Boolean,
default: false,
},
center: {
type: Boolean,
default: false,
},
customClass: {
type: String,
default: "",
},
closeOnClickModal: {
type: Boolean,
default: true,
},
closeOnPressEscape: {
type: Boolean,
default: true,
},
fullscreen: {
type: Boolean,
default: false,
},
lockScroll: {
type: Boolean,
default: true,
},
modal: {
type: Boolean,
default: true,
},
showClose: {
type: Boolean,
default: true,
},
title: {
type: String,
default: "",
},
openDelay: {
type: Number,
default: 0,
},
closeDelay: {
type: Number,
default: 0,
},
top: {
type: String,
},
modelValue: {
type: Boolean,
required: true,
},
modalClass: String,
width: buildProp({
type: [String, Number],
validator: isValidWidthUnit,
}),
zIndex: {
type: Number,
},
};
const dialogEmits = {
open: () => true,
opened: () => true,
close: () => true,
closed: () => true,
[UPDATE_MODEL_EVENT]: (value) => typeof value === "boolean",
};
const useDialog = (props, { emit }, targetRef) => {
const visible = vue.ref(false);
const closed = vue.ref(false);
const rendered = vue.ref(false);
const zIndex = vue.ref(props.zIndex || PopupManager.nextZIndex());
let openTimer = void 0;
let closeTimer = void 0;
const normalizeWidth = vue.computed(() =>
isNumber(props.width) ? `${props.width}px` : props.width
);
const style = vue.computed(() => {
const style2 = {};
const varPrefix = `--el-dialog`;
if (!props.fullscreen) {
if (props.top) {
style2[`${varPrefix}-margin-top`] = props.top;
}
if (props.width) {
style2[`${varPrefix}-width`] = normalizeWidth.value;
}
}
return style2;
});
function afterEnter() {
emit("opened");
}
function afterLeave() {
emit("closed");
emit(UPDATE_MODEL_EVENT, false);
if (props.destroyOnClose) {
rendered.value = false;
}
}
function beforeLeave() {
emit("close");
}
function open() {
closeTimer == null ? void 0 : closeTimer();
openTimer == null ? void 0 : openTimer();
if (props.openDelay && props.openDelay > 0) {
({ stop: openTimer } = useTimeoutFn(() => doOpen(), props.openDelay));
} else {
doOpen();
}
}
function close() {
openTimer == null ? void 0 : openTimer();
closeTimer == null ? void 0 : closeTimer();
if (props.closeDelay && props.closeDelay > 0) {
({ stop: closeTimer } = useTimeoutFn(
() => doClose(),
props.closeDelay
));
} else {
doClose();
}
}
function hide(shouldCancel) {
if (shouldCancel) return;
closed.value = true;
visible.value = false;
}
function handleClose() {
if (props.beforeClose) {
props.beforeClose(hide);
} else {
close();
}
}
function onModalClick() {
if (props.closeOnClickModal) {
handleClose();
}
}
function doOpen() {
if (isServer) {
return;
}
visible.value = true;
}
function doClose() {
visible.value = false;
}
if (props.lockScroll) {
useLockScreen(visible);
}
if (props.closeOnPressEscape) {
useModal(
{
handleClose,
},
visible
);
}
useRestoreActive(visible);
vue.watch(
() => props.modelValue,
(val) => {
if (val) {
closed.value = false;
open();
rendered.value = true;
emit("open");
zIndex.value = props.zIndex
? zIndex.value++
: PopupManager.nextZIndex();
vue.nextTick(() => {
if (targetRef.value) {
targetRef.value.scrollTop = 0;
}
});
} else {
if (visible.value) {
close();
}
}
}
);
vue.onMounted(() => {
if (props.modelValue) {
visible.value = true;
rendered.value = true;
open();
}
});
return {
afterEnter,
afterLeave,
beforeLeave,
handleClose,
onModalClick,
closed,
style,
rendered,
visible,
zIndex,
};
};
var __defProp$v = Object.defineProperty;
var __getOwnPropSymbols$v = Object.getOwnPropertySymbols;
var __hasOwnProp$v = Object.prototype.hasOwnProperty;
var __propIsEnum$v = Object.prototype.propertyIsEnumerable;
var __defNormalProp$v = (obj, key, value) =>
key in obj
? __defProp$v(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$v = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$v.call(b, prop)) __defNormalProp$v(a, prop, b[prop]);
if (__getOwnPropSymbols$v)
for (var prop of __getOwnPropSymbols$v(b)) {
if (__propIsEnum$v.call(b, prop)) __defNormalProp$v(a, prop, b[prop]);
}
return a;
};
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
var script$18 = vue.defineComponent({
name: "ElDialog",
components: {
ElOverlay,
},
directives: {
TrapFocus,
},
props: dialogProps,
emits: dialogEmits,
setup(props, ctx) {
const dialogRef = vue.ref();
const dialog = useDialog(props, ctx, dialogRef);
const overlayEvent = useSameTarget(dialog.onModalClick);
return __spreadValues$v(
{
dialogRef,
overlayEvent,
},
dialog
);
},
});
const _hoisted_1$L = ["aria-label"];
const _hoisted_2$A = { class: "el-dialog__header" };
const _hoisted_3$y = { class: "el-dialog__title" };
const _hoisted_4$j = /* @__PURE__ */ vue.createElementVNode(
"i",
{ class: "el-dialog__close el-icon el-icon-close" },
null,
-1
);
const _hoisted_5$f = [_hoisted_4$j];
const _hoisted_6$d = {
key: 0,
class: "el-dialog__body",
};
const _hoisted_7$8 = {
key: 1,
class: "el-dialog__footer",
};
function render$10(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_overlay = vue.resolveComponent("el-overlay");
const _directive_trap_focus = vue.resolveDirective("trap-focus");
return (
vue.openBlock(),
vue.createBlock(
vue.Teleport,
{
to: "body",
disabled: !_ctx.appendToBody,
},
[
vue.createVNode(
vue.Transition,
{
name: "dialog-fade",
onAfterEnter: _ctx.afterEnter,
onAfterLeave: _ctx.afterLeave,
onBeforeLeave: _ctx.beforeLeave,
},
{
default: vue.withCtx(() => [
vue.withDirectives(
vue.createVNode(
_component_el_overlay,
{
"custom-mask-event": "",
mask: _ctx.modal,
"overlay-class": _ctx.modalClass,
"z-index": _ctx.zIndex,
},
{
default: vue.withCtx(() => [
vue.createElementVNode(
"div",
{
class: "el-overlay-dialog",
onClick:
_cache[2] ||
(_cache[2] = (...args) =>
_ctx.overlayEvent.onClick &&
_ctx.overlayEvent.onClick(...args)),
onMousedown:
_cache[3] ||
(_cache[3] = (...args) =>
_ctx.overlayEvent.onMousedown &&
_ctx.overlayEvent.onMousedown(...args)),
onMouseup:
_cache[4] ||
(_cache[4] = (...args) =>
_ctx.overlayEvent.onMouseup &&
_ctx.overlayEvent.onMouseup(...args)),
},
[
vue.withDirectives(
vue.createElementVNode(
"div",
{
ref: "dialogRef",
class: vue.normalizeClass([
"el-dialog",
{
"is-fullscreen": _ctx.fullscreen,
"el-dialog--center": _ctx.center,
},
_ctx.customClass,
]),
"aria-modal": "true",
role: "dialog",
"aria-label": _ctx.title || "dialog",
style: vue.normalizeStyle(_ctx.style),
onClick:
_cache[1] ||
(_cache[1] = vue.withModifiers(() => {}, [
"stop",
])),
},
[
vue.createElementVNode("div", _hoisted_2$A, [
vue.renderSlot(
_ctx.$slots,
"title",
{},
() => [
vue.createElementVNode(
"span",
_hoisted_3$y,
vue.toDisplayString(_ctx.title),
1
),
]
),
_ctx.showClose
? (vue.openBlock(),
vue.createElementBlock(
"button",
{
key: 0,
"aria-label": "close",
class: "el-dialog__headerbtn",
type: "button",
onClick:
_cache[0] ||
(_cache[0] = (...args) =>
_ctx.handleClose &&
_ctx.handleClose(...args)),
},
_hoisted_5$f
))
: vue.createCommentVNode("v-if", true),
]),
_ctx.rendered
? (vue.openBlock(),
vue.createElementBlock(
"div",
_hoisted_6$d,
[vue.renderSlot(_ctx.$slots, "default")]
))
: vue.createCommentVNode("v-if", true),
_ctx.$slots.footer
? (vue.openBlock(),
vue.createElementBlock(
"div",
_hoisted_7$8,
[vue.renderSlot(_ctx.$slots, "footer")]
))
: vue.createCommentVNode("v-if", true),
],
14,
_hoisted_1$L
),
[[_directive_trap_focus]]
),
],
32
),
]),
_: 3,
},
8,
["mask", "overlay-class", "z-index"]
),
[[vue.vShow, _ctx.visible]]
),
]),
_: 3,
},
8,
["onAfterEnter", "onAfterLeave", "onBeforeLeave"]
),
],
8,
["disabled"]
)
);
}
script$18.render = render$10;
script$18.__file = "packages/components/dialog/src/dialog.vue";
const ElDialog = withInstall(script$18);
const dividerProps = {
direction: buildProp({
type: String,
values: ["horizontal", "vertical"],
default: "horizontal",
}),
contentPosition: buildProp({
type: String,
values: ["left", "center", "right"],
default: "center",
}),
};
var script$17 = vue.defineComponent({
name: "ElDivider",
props: dividerProps,
});
function render$$(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
class: vue.normalizeClass([
"el-divider",
`el-divider--${_ctx.direction}`,
]),
},
[
_ctx.$slots.default && _ctx.direction !== "vertical"
? (vue.openBlock(),
vue.createElementBlock(
"div",
{
key: 0,
class: vue.normalizeClass([
"el-divider__text",
`is-${_ctx.contentPosition}`,
]),
},
[vue.renderSlot(_ctx.$slots, "default")],
2
))
: vue.createCommentVNode("v-if", true),
],
2
)
);
}
script$17.render = render$$;
script$17.__file = "packages/components/divider/src/divider.vue";
const ElDivider = withInstall(script$17);
var __defProp$u = Object.defineProperty;
var __defProps$m = Object.defineProperties;
var __getOwnPropDescs$m = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$u = Object.getOwnPropertySymbols;
var __hasOwnProp$u = Object.prototype.hasOwnProperty;
var __propIsEnum$u = Object.prototype.propertyIsEnumerable;
var __defNormalProp$u = (obj, key, value) =>
key in obj
? __defProp$u(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$u = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$u.call(b, prop)) __defNormalProp$u(a, prop, b[prop]);
if (__getOwnPropSymbols$u)
for (var prop of __getOwnPropSymbols$u(b)) {
if (__propIsEnum$u.call(b, prop)) __defNormalProp$u(a, prop, b[prop]);
}
return a;
};
var __spreadProps$m = (a, b) => __defProps$m(a, __getOwnPropDescs$m(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
var script$16 = vue.defineComponent({
name: "ElDrawer",
components: {
ElOverlay,
},
directives: {
TrapFocus,
},
props: __spreadProps$m(__spreadValues$u({}, dialogProps), {
direction: {
type: String,
default: "rtl",
validator: (val) => {
return ["ltr", "rtl", "ttb", "btt"].indexOf(val) !== -1;
},
},
size: {
type: [String, Number],
default: "30%",
},
withHeader: {
type: Boolean,
default: true,
},
modalFade: {
type: Boolean,
default: true,
},
}),
emits: dialogEmits,
setup(props, ctx) {
const drawerRef = vue.ref(null);
return __spreadProps$m(
__spreadValues$u({}, useDialog(props, ctx, drawerRef)),
{
drawerRef,
isHorizontal: vue.computed(
() => props.direction === "rtl" || props.direction === "ltr"
),
drawerSize: vue.computed(() =>
typeof props.size === "number" ? `${props.size}px` : props.size
),
}
);
},
});
const _hoisted_1$K = ["aria-label"];
const _hoisted_2$z = {
key: 0,
id: "el-drawer__title",
class: "el-drawer__header",
};
const _hoisted_3$x = ["title"];
const _hoisted_4$i = ["aria-label"];
const _hoisted_5$e = /* @__PURE__ */ vue.createElementVNode(
"i",
{ class: "el-drawer__close el-icon el-icon-close" },
null,
-1
);
const _hoisted_6$c = [_hoisted_5$e];
const _hoisted_7$7 = {
key: 1,
class: "el-drawer__body",
};
function render$_(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_overlay = vue.resolveComponent("el-overlay");
const _directive_trap_focus = vue.resolveDirective("trap-focus");
return (
vue.openBlock(),
vue.createBlock(
vue.Teleport,
{
to: "body",
disabled: !_ctx.appendToBody,
},
[
vue.createVNode(
vue.Transition,
{
name: "el-drawer-fade",
onAfterEnter: _ctx.afterEnter,
onAfterLeave: _ctx.afterLeave,
onBeforeLeave: _ctx.beforeLeave,
},
{
default: vue.withCtx(() => [
vue.withDirectives(
vue.createVNode(
_component_el_overlay,
{
mask: _ctx.modal,
"overlay-class": _ctx.modalClass,
"z-index": _ctx.zIndex,
onClick: _ctx.onModalClick,
},
{
default: vue.withCtx(() => [
vue.withDirectives(
vue.createElementVNode(
"div",
{
ref: "drawerRef",
"aria-modal": "true",
"aria-labelledby": "el-drawer__title",
"aria-label": _ctx.title,
class: vue.normalizeClass([
"el-drawer",
_ctx.direction,
_ctx.visible && "open",
_ctx.customClass,
]),
style: vue.normalizeStyle(
_ctx.isHorizontal
? "width: " + _ctx.drawerSize
: "height: " + _ctx.drawerSize
),
role: "dialog",
onClick:
_cache[1] ||
(_cache[1] = vue.withModifiers(() => {}, [
"stop",
])),
},
[
_ctx.withHeader
? (vue.openBlock(),
vue.createElementBlock(
"header",
_hoisted_2$z,
[
vue.renderSlot(
_ctx.$slots,
"title",
{},
() => [
vue.createElementVNode(
"span",
{
role: "heading",
title: _ctx.title,
},
vue.toDisplayString(_ctx.title),
9,
_hoisted_3$x
),
]
),
_ctx.showClose
? (vue.openBlock(),
vue.createElementBlock(
"button",
{
key: 0,
"aria-label":
"close " +
(_ctx.title || "drawer"),
class: "el-drawer__close-btn",
type: "button",
onClick:
_cache[0] ||
(_cache[0] = (...args) =>
_ctx.handleClose &&
_ctx.handleClose(...args)),
},
_hoisted_6$c,
8,
_hoisted_4$i
))
: vue.createCommentVNode("v-if", true),
]
))
: vue.createCommentVNode("v-if", true),
_ctx.rendered
? (vue.openBlock(),
vue.createElementBlock(
"section",
_hoisted_7$7,
[vue.renderSlot(_ctx.$slots, "default")]
))
: vue.createCommentVNode("v-if", true),
],
14,
_hoisted_1$K
),
[[_directive_trap_focus]]
),
]),
_: 3,
},
8,
["mask", "overlay-class", "z-index", "onClick"]
),
[[vue.vShow, _ctx.visible]]
),
]),
_: 3,
},
8,
["onAfterEnter", "onAfterLeave", "onBeforeLeave"]
),
],
8,
["disabled"]
)
);
}
script$16.render = render$_;
script$16.__file = "packages/components/drawer/src/index.vue";
script$16.install = (app) => {
app.component(script$16.name, script$16);
};
const _Drawer = script$16;
const ElDrawer = _Drawer;
const useDropdown = () => {
const ELEMENT = useGlobalConfig();
const elDropdown = vue.inject("elDropdown", {});
const _elDropdownSize = vue.computed(() =>
elDropdown == null ? void 0 : elDropdown.dropdownSize
);
return {
ELEMENT,
elDropdown,
_elDropdownSize,
};
};
const initDropdownDomEvent = (dropdownChildren, triggerElm, _instance) => {
const menuItems = vue.ref(null);
const menuItemsArray = vue.ref(null);
const dropdownElm = vue.ref(null);
const listId = vue.ref(`dropdown-menu-${generateId()}`);
dropdownElm.value =
dropdownChildren == null ? void 0 : dropdownChildren.subTree.el;
function removeTabindex() {
var _a;
triggerElm.setAttribute("tabindex", "-1");
(_a = menuItemsArray.value) == null
? void 0
: _a.forEach((item) => {
item.setAttribute("tabindex", "-1");
});
}
function resetTabindex(ele) {
removeTabindex();
ele == null ? void 0 : ele.setAttribute("tabindex", "0");
}
function handleTriggerKeyDown(ev) {
const code = ev.code;
if ([EVENT_CODE.up, EVENT_CODE.down].includes(code)) {
removeTabindex();
resetTabindex(menuItems.value[0]);
menuItems.value[0].focus();
ev.preventDefault();
ev.stopPropagation();
} else if (code === EVENT_CODE.enter) {
_instance.handleClick();
} else if ([EVENT_CODE.tab, EVENT_CODE.esc].includes(code)) {
_instance.hide();
}
}
function handleItemKeyDown(ev) {
const code = ev.code;
const target = ev.target;
const currentIndex = menuItemsArray.value.indexOf(target);
const max = menuItemsArray.value.length - 1;
let nextIndex;
if ([EVENT_CODE.up, EVENT_CODE.down].includes(code)) {
if (code === EVENT_CODE.up) {
nextIndex = currentIndex !== 0 ? currentIndex - 1 : 0;
} else {
nextIndex = currentIndex < max ? currentIndex + 1 : max;
}
removeTabindex();
resetTabindex(menuItems.value[nextIndex]);
menuItems.value[nextIndex].focus();
ev.preventDefault();
ev.stopPropagation();
} else if (code === EVENT_CODE.enter) {
triggerElmFocus();
target.click();
if (_instance.props.hideOnClick) {
_instance.hide();
}
} else if ([EVENT_CODE.tab, EVENT_CODE.esc].includes(code)) {
_instance.hide();
triggerElmFocus();
}
}
function initAria() {
dropdownElm.value.setAttribute("id", listId.value);
triggerElm.setAttribute("aria-haspopup", "list");
triggerElm.setAttribute("aria-controls", listId.value);
if (!_instance.props.splitButton) {
triggerElm.setAttribute("role", "button");
triggerElm.setAttribute("tabindex", _instance.props.tabindex);
addClass(triggerElm, "el-dropdown-selfdefine");
}
}
function initEvent() {
on(triggerElm, "keydown", handleTriggerKeyDown);
on(dropdownElm.value, "keydown", handleItemKeyDown, true);
}
function initDomOperation() {
menuItems.value = dropdownElm.value.querySelectorAll("[tabindex='-1']");
menuItemsArray.value = [].slice.call(menuItems.value);
initEvent();
initAria();
}
function triggerElmFocus() {
triggerElm.focus();
}
initDomOperation();
};
const { ButtonGroup: ElButtonGroup } = ElButton;
var script$15 = vue.defineComponent({
name: "ElDropdown",
components: {
ElButton,
ElButtonGroup,
ElScrollbar: _Scrollbar,
ElPopper: _Popper,
},
props: {
trigger: {
type: String,
default: "hover",
},
type: String,
size: {
type: String,
default: "",
},
splitButton: Boolean,
hideOnClick: {
type: Boolean,
default: true,
},
placement: {
type: String,
default: "bottom",
},
showTimeout: {
type: Number,
default: 150,
},
hideTimeout: {
type: Number,
default: 150,
},
tabindex: {
type: [Number, String],
default: 0,
},
effect: {
type: String,
default: exports.Effect.LIGHT,
},
maxHeight: {
type: [Number, String],
default: "",
},
},
emits: ["visible-change", "click", "command"],
setup(props, { emit }) {
const _instance = vue.getCurrentInstance();
const { ELEMENT } = useDropdown();
const timeout = vue.ref(null);
const visible = vue.ref(false);
const scrollbar = vue.ref(null);
const wrapStyle = vue.computed(
() => `max-height: ${addUnit(props.maxHeight)}`
);
vue.watch(
() => visible.value,
(val) => {
if (val) triggerElmFocus();
if (!val) triggerElmBlur();
emit("visible-change", val);
}
);
const focusing = vue.ref(false);
vue.watch(
() => focusing.value,
(val) => {
const selfDefine = triggerElm.value;
if (selfDefine) {
if (val) {
addClass(selfDefine, "focusing");
} else {
removeClass(selfDefine, "focusing");
}
}
}
);
const triggerVnode = vue.ref(null);
const triggerElm = vue.computed(() => {
var _a, _b, _c;
const _ =
(_b =
(_a = triggerVnode.value) == null ? void 0 : _a.$refs.triggerRef) ==
null
? void 0
: _b.children[0];
return !props.splitButton
? _
: (_c = _ == null ? void 0 : _.children) == null
? void 0
: _c[1];
});
function handleClick() {
var _a;
if ((_a = triggerElm.value) == null ? void 0 : _a.disabled) return;
if (visible.value) {
hide();
} else {
show();
}
}
function show() {
var _a;
if ((_a = triggerElm.value) == null ? void 0 : _a.disabled) return;
timeout.value && clearTimeout(timeout.value);
timeout.value = window.setTimeout(
() => {
visible.value = true;
},
["click", "contextmenu"].includes(props.trigger)
? 0
: props.showTimeout
);
}
function hide() {
var _a;
if ((_a = triggerElm.value) == null ? void 0 : _a.disabled) return;
removeTabindex();
if (props.tabindex >= 0) {
resetTabindex(triggerElm.value);
}
clearTimeout(timeout.value);
timeout.value = window.setTimeout(
() => {
visible.value = false;
},
["click", "contextmenu"].includes(props.trigger)
? 0
: props.hideTimeout
);
}
function removeTabindex() {
var _a;
(_a = triggerElm.value) == null
? void 0
: _a.setAttribute("tabindex", "-1");
}
function resetTabindex(ele) {
removeTabindex();
ele == null ? void 0 : ele.setAttribute("tabindex", "0");
}
function triggerElmFocus() {
var _a, _b;
(_b = (_a = triggerElm.value) == null ? void 0 : _a.focus) == null
? void 0
: _b.call(_a);
}
function triggerElmBlur() {
var _a, _b;
(_b = (_a = triggerElm.value) == null ? void 0 : _a.blur) == null
? void 0
: _b.call(_a);
}
const dropdownSize = vue.computed(() => props.size || ELEMENT.size);
function commandHandler(...args) {
emit("command", ...args);
}
vue.provide("elDropdown", {
instance: _instance,
dropdownSize,
visible,
handleClick,
commandHandler,
show,
hide,
trigger: vue.computed(() => props.trigger),
hideOnClick: vue.computed(() => props.hideOnClick),
triggerElm,
});
vue.onMounted(() => {
if (!props.splitButton) {
on(triggerElm.value, "focus", () => {
focusing.value = true;
});
on(triggerElm.value, "blur", () => {
focusing.value = false;
});
on(triggerElm.value, "click", () => {
focusing.value = false;
});
}
if (props.trigger === "hover") {
on(triggerElm.value, "mouseenter", show);
on(triggerElm.value, "mouseleave", hide);
} else if (props.trigger === "click") {
on(triggerElm.value, "click", handleClick);
} else if (props.trigger === "contextmenu") {
on(triggerElm.value, "contextmenu", (e) => {
e.preventDefault();
handleClick();
});
}
Object.assign(_instance, {
handleClick,
hide,
resetTabindex,
});
});
const handlerMainButtonClick = (event) => {
emit("click", event);
hide();
};
return {
visible,
scrollbar,
wrapStyle,
dropdownSize,
handlerMainButtonClick,
triggerVnode,
};
},
});
const _hoisted_1$J = /* @__PURE__ */ vue.createElementVNode(
"i",
{ class: "el-dropdown__icon el-icon-arrow-down" },
null,
-1
);
function render$Z(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
const _component_el_button = vue.resolveComponent("el-button");
const _component_el_button_group = vue.resolveComponent("el-button-group");
const _component_el_popper = vue.resolveComponent("el-popper");
return (
vue.openBlock(),
vue.createBlock(
_component_el_popper,
{
ref: "triggerVnode",
visible: _ctx.visible,
"onUpdate:visible":
_cache[0] || (_cache[0] = ($event) => (_ctx.visible = $event)),
placement: _ctx.placement,
"fallback-placements": ["bottom", "top", "right", "left"],
effect: _ctx.effect,
pure: "",
"manual-mode": true,
trigger: [_ctx.trigger],
"popper-class": "el-dropdown__popper",
"append-to-body": "",
transition: "el-zoom-in-top",
"stop-popper-mouse-event": false,
"gpu-acceleration": false,
},
{
default: vue.withCtx(() => [
vue.createVNode(
_component_el_scrollbar,
{
ref: "scrollbar",
tag: "ul",
"wrap-style": _ctx.wrapStyle,
"view-class": "el-dropdown__list",
},
{
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "dropdown"),
]),
_: 3,
},
8,
["wrap-style"]
),
]),
trigger: vue.withCtx(() => [
vue.createElementVNode(
"div",
{
class: vue.normalizeClass([
"el-dropdown",
_ctx.dropdownSize ? "el-dropdown--" + _ctx.dropdownSize : "",
]),
},
[
!_ctx.splitButton
? vue.renderSlot(_ctx.$slots, "default", { key: 0 })
: (vue.openBlock(),
vue.createBlock(
_component_el_button_group,
{ key: 1 },
{
default: vue.withCtx(() => [
vue.createVNode(
_component_el_button,
{
size: _ctx.dropdownSize,
type: _ctx.type,
onClick: _ctx.handlerMainButtonClick,
},
{
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default"),
]),
_: 3,
},
8,
["size", "type", "onClick"]
),
vue.createVNode(
_component_el_button,
{
size: _ctx.dropdownSize,
type: _ctx.type,
class: "el-dropdown__caret-button",
},
{
default: vue.withCtx(() => [_hoisted_1$J]),
_: 1,
},
8,
["size", "type"]
),
]),
_: 3,
}
)),
],
2
),
]),
_: 3,
},
8,
["visible", "placement", "effect", "trigger"]
)
);
}
script$15.render = render$Z;
script$15.__file = "packages/components/dropdown/src/dropdown.vue";
var script$14 = vue.defineComponent({
name: "ElDropdownItem",
props: {
command: {
type: [Object, String, Number],
default: () => ({}),
},
disabled: Boolean,
divided: Boolean,
icon: String,
},
setup(props) {
const { elDropdown } = useDropdown();
const _instance = vue.getCurrentInstance();
function handleClick(e) {
var _a, _b;
if (props.disabled) {
e.stopImmediatePropagation();
return;
}
if (elDropdown.hideOnClick.value) {
(_a = elDropdown.handleClick) == null ? void 0 : _a.call(elDropdown);
}
(_b = elDropdown.commandHandler) == null
? void 0
: _b.call(elDropdown, props.command, _instance, e);
}
return {
handleClick,
};
},
});
const _hoisted_1$I = ["aria-disabled", "tabindex"];
function render$Y(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"li",
{
class: vue.normalizeClass([
"el-dropdown-menu__item",
{
"is-disabled": _ctx.disabled,
"el-dropdown-menu__item--divided": _ctx.divided,
},
]),
"aria-disabled": _ctx.disabled,
tabindex: _ctx.disabled ? null : -1,
onClick:
_cache[0] ||
(_cache[0] = (...args) =>
_ctx.handleClick && _ctx.handleClick(...args)),
},
[
_ctx.icon
? (vue.openBlock(),
vue.createElementBlock(
"i",
{
key: 0,
class: vue.normalizeClass(_ctx.icon),
},
null,
2
))
: vue.createCommentVNode("v-if", true),
vue.renderSlot(_ctx.$slots, "default"),
],
10,
_hoisted_1$I
)
);
}
script$14.render = render$Y;
script$14.__file = "packages/components/dropdown/src/dropdown-item.vue";
var script$13 = vue.defineComponent({
name: "ElDropdownMenu",
directives: {
ClickOutside,
},
setup() {
const { _elDropdownSize, elDropdown } = useDropdown();
const size = _elDropdownSize.value;
function show() {
var _a;
if (["click", "contextmenu"].includes(elDropdown.trigger.value)) return;
(_a = elDropdown.show) == null ? void 0 : _a.call(elDropdown);
}
function hide() {
if (["click", "contextmenu"].includes(elDropdown.trigger.value)) return;
_hide();
}
function _hide() {
var _a;
(_a = elDropdown.hide) == null ? void 0 : _a.call(elDropdown);
}
vue.onMounted(() => {
const dropdownMenu = vue.getCurrentInstance();
initDropdownDomEvent(
dropdownMenu,
elDropdown.triggerElm.value,
elDropdown.instance
);
});
return {
size,
show,
hide,
innerHide: _hide,
triggerElm: elDropdown.triggerElm,
};
},
});
function render$X(_ctx, _cache, $props, $setup, $data, $options) {
const _directive_clickOutside = vue.resolveDirective("clickOutside");
return vue.withDirectives(
(vue.openBlock(),
vue.createElementBlock(
"ul",
{
class: vue.normalizeClass([
[_ctx.size && `el-dropdown-menu--${_ctx.size}`],
"el-dropdown-menu",
]),
onMouseenter:
_cache[0] ||
(_cache[0] = vue.withModifiers(
(...args) => _ctx.show && _ctx.show(...args),
["stop"]
)),
onMouseleave:
_cache[1] ||
(_cache[1] = vue.withModifiers(
(...args) => _ctx.hide && _ctx.hide(...args),
["stop"]
)),
},
[vue.renderSlot(_ctx.$slots, "default")],
34
)),
[[_directive_clickOutside, _ctx.innerHide, _ctx.triggerElm]]
);
}
script$13.render = render$X;
script$13.__file = "packages/components/dropdown/src/dropdown-menu.vue";
const ElDropdown = withInstall(script$15, {
DropdownItem: script$14,
DropdownMenu: script$13,
});
const ElDropdownItem = withNoopInstall(script$14);
const ElDropdownMenu = withNoopInstall(script$13);
let id = 0;
var script$12 = vue.defineComponent({
name: "ImgEmpty",
setup() {
return {
id: ++id,
};
},
});
const _hoisted_1$H = {
viewBox: "0 0 79 86",
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
"xmlns:xlink": "http://www.w3.org/1999/xlink",
};
const _hoisted_2$y = ["id"];
const _hoisted_3$w = /* @__PURE__ */ vue.createElementVNode(
"stop",
{
"stop-color": "#FCFCFD",
offset: "0%",
},
null,
-1
);
const _hoisted_4$h = /* @__PURE__ */ vue.createElementVNode(
"stop",
{
"stop-color": "#EEEFF3",
offset: "100%",
},
null,
-1
);
const _hoisted_5$d = [_hoisted_3$w, _hoisted_4$h];
const _hoisted_6$b = ["id"];
const _hoisted_7$6 = /* @__PURE__ */ vue.createElementVNode(
"stop",
{
"stop-color": "#FCFCFD",
offset: "0%",
},
null,
-1
);
const _hoisted_8$5 = /* @__PURE__ */ vue.createElementVNode(
"stop",
{
"stop-color": "#E9EBEF",
offset: "100%",
},
null,
-1
);
const _hoisted_9$5 = [_hoisted_7$6, _hoisted_8$5];
const _hoisted_10$5 = ["id"];
const _hoisted_11$3 = {
id: "Illustrations",
stroke: "none",
"stroke-width": "1",
fill: "none",
"fill-rule": "evenodd",
};
const _hoisted_12$3 = {
id: "B-type",
transform: "translate(-1268.000000, -535.000000)",
};
const _hoisted_13$1 = {
id: "Group-2",
transform: "translate(1268.000000, 535.000000)",
};
const _hoisted_14$1 = /* @__PURE__ */ vue.createElementVNode(
"path",
{
id: "Oval-Copy-2",
d: "M39.5,86 C61.3152476,86 79,83.9106622 79,81.3333333 C79,78.7560045 57.3152476,78 35.5,78 C13.6847524,78 0,78.7560045 0,81.3333333 C0,83.9106622 17.6847524,86 39.5,86 Z",
fill: "#F7F8FC",
},
null,
-1
);
const _hoisted_15 = /* @__PURE__ */ vue.createElementVNode(
"polygon",
{
id: "Rectangle-Copy-14",
fill: "#E5E7E9",
transform:
"translate(27.500000, 51.500000) scale(1, -1) translate(-27.500000, -51.500000) ",
points: "13 58 53 58 42 45 2 45",
},
null,
-1
);
const _hoisted_16 = {
id: "Group-Copy",
transform:
"translate(34.500000, 31.500000) scale(-1, 1) rotate(-25.000000) translate(-34.500000, -31.500000) translate(7.000000, 10.000000)",
};
const _hoisted_17 = /* @__PURE__ */ vue.createElementVNode(
"polygon",
{
id: "Rectangle-Copy-10",
fill: "#E5E7E9",
transform:
"translate(11.500000, 5.000000) scale(1, -1) translate(-11.500000, -5.000000) ",
points: "2.84078316e-14 3 18 3 23 7 5 7",
},
null,
-1
);
const _hoisted_18 = /* @__PURE__ */ vue.createElementVNode(
"polygon",
{
id: "Rectangle-Copy-11",
fill: "#EDEEF2",
points: "-3.69149156e-15 7 38 7 38 43 -3.69149156e-15 43",
},
null,
-1
);
const _hoisted_19 = ["fill"];
const _hoisted_20 = /* @__PURE__ */ vue.createElementVNode(
"polygon",
{
id: "Rectangle-Copy-13",
fill: "#F8F9FB",
transform:
"translate(39.500000, 3.500000) scale(-1, 1) translate(-39.500000, -3.500000) ",
points: "24 7 41 7 55 -3.63806207e-12 38 -3.63806207e-12",
},
null,
-1
);
const _hoisted_21 = ["fill"];
const _hoisted_22 = {
id: "Rectangle-Copy-17",
transform: "translate(53.000000, 45.000000)",
};
const _hoisted_23 = ["id"];
const _hoisted_24 = ["xlink:href"];
const _hoisted_25 = ["xlink:href"];
const _hoisted_26 = ["mask"];
const _hoisted_27 = /* @__PURE__ */ vue.createElementVNode(
"polygon",
{
id: "Rectangle-Copy-18",
fill: "#F8F9FB",
transform:
"translate(66.000000, 51.500000) scale(-1, 1) translate(-66.000000, -51.500000) ",
points: "62 45 79 45 70 58 53 58",
},
null,
-1
);
function render$W(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock("svg", _hoisted_1$H, [
vue.createElementVNode("defs", null, [
vue.createElementVNode(
"linearGradient",
{
id: `linearGradient-1-${_ctx.id}`,
x1: "38.8503086%",
y1: "0%",
x2: "61.1496914%",
y2: "100%",
},
_hoisted_5$d,
8,
_hoisted_2$y
),
vue.createElementVNode(
"linearGradient",
{
id: `linearGradient-2-${_ctx.id}`,
x1: "0%",
y1: "9.5%",
x2: "100%",
y2: "90.5%",
},
_hoisted_9$5,
8,
_hoisted_6$b
),
vue.createElementVNode(
"rect",
{
id: `path-3-${_ctx.id}`,
x: "0",
y: "0",
width: "17",
height: "36",
},
null,
8,
_hoisted_10$5
),
]),
vue.createElementVNode("g", _hoisted_11$3, [
vue.createElementVNode("g", _hoisted_12$3, [
vue.createElementVNode("g", _hoisted_13$1, [
_hoisted_14$1,
_hoisted_15,
vue.createElementVNode("g", _hoisted_16, [
_hoisted_17,
_hoisted_18,
vue.createElementVNode(
"rect",
{
id: "Rectangle-Copy-12",
fill: `url(#linearGradient-1-${_ctx.id})`,
transform:
"translate(46.500000, 25.000000) scale(-1, 1) translate(-46.500000, -25.000000) ",
x: "38",
y: "7",
width: "17",
height: "36",
},
null,
8,
_hoisted_19
),
_hoisted_20,
]),
vue.createElementVNode(
"rect",
{
id: "Rectangle-Copy-15",
fill: `url(#linearGradient-2-${_ctx.id})`,
x: "13",
y: "45",
width: "40",
height: "36",
},
null,
8,
_hoisted_21
),
vue.createElementVNode("g", _hoisted_22, [
vue.createElementVNode(
"mask",
{
id: `mask-4-${_ctx.id}`,
fill: "white",
},
[
vue.createElementVNode(
"use",
{
"xlink:href": `#path-3-${_ctx.id}`,
},
null,
8,
_hoisted_24
),
],
8,
_hoisted_23
),
vue.createElementVNode(
"use",
{
id: "Mask",
fill: "#E0E3E9",
transform:
"translate(8.500000, 18.000000) scale(-1, 1) translate(-8.500000, -18.000000) ",
"xlink:href": `#path-3-${_ctx.id}`,
},
null,
8,
_hoisted_25
),
vue.createElementVNode(
"polygon",
{
id: "Rectangle-Copy",
fill: "#D5D7DE",
mask: `url(#mask-4-${_ctx.id})`,
transform:
"translate(12.000000, 9.000000) scale(-1, 1) translate(-12.000000, -9.000000) ",
points: "7 0 24 0 20 18 -1.70530257e-13 16",
},
null,
8,
_hoisted_26
),
]),
_hoisted_27,
]),
]),
]),
])
);
}
script$12.render = render$W;
script$12.__file = "packages/components/empty/src/img-empty.vue";
const emptyProps = {
image: {
type: String,
default: "",
},
imageSize: Number,
description: {
type: String,
default: "",
},
};
var script$11 = vue.defineComponent({
name: "ElEmpty",
components: {
ImgEmpty: script$12,
},
props: emptyProps,
setup(props) {
const { t } = useLocaleInject();
const emptyDescription = vue.computed(
() => props.description || t("el.table.emptyText")
);
const imageStyle = vue.computed(() => ({
width: props.imageSize ? `${props.imageSize}px` : "",
}));
return {
emptyDescription,
imageStyle,
};
},
});
const _hoisted_1$G = { class: "el-empty" };
const _hoisted_2$x = ["src"];
const _hoisted_3$v = { class: "el-empty__description" };
const _hoisted_4$g = { key: 1 };
const _hoisted_5$c = {
key: 0,
class: "el-empty__bottom",
};
function render$V(_ctx, _cache, $props, $setup, $data, $options) {
const _component_img_empty = vue.resolveComponent("img-empty");
return (
vue.openBlock(),
vue.createElementBlock("div", _hoisted_1$G, [
vue.createElementVNode(
"div",
{
class: "el-empty__image",
style: vue.normalizeStyle(_ctx.imageStyle),
},
[
_ctx.image
? (vue.openBlock(),
vue.createElementBlock(
"img",
{
key: 0,
src: _ctx.image,
ondragstart: "return false",
},
null,
8,
_hoisted_2$x
))
: vue.renderSlot(_ctx.$slots, "image", { key: 1 }, () => [
vue.createVNode(_component_img_empty),
]),
],
4
),
vue.createElementVNode("div", _hoisted_3$v, [
_ctx.$slots.description
? vue.renderSlot(_ctx.$slots, "description", { key: 0 })
: (vue.openBlock(),
vue.createElementBlock(
"p",
_hoisted_4$g,
vue.toDisplayString(_ctx.emptyDescription),
1
)),
]),
_ctx.$slots.default
? (vue.openBlock(),
vue.createElementBlock("div", _hoisted_5$c, [
vue.renderSlot(_ctx.$slots, "default"),
]))
: vue.createCommentVNode("v-if", true),
])
);
}
script$11.render = render$V;
script$11.__file = "packages/components/empty/src/empty.vue";
const ElEmpty = withInstall(script$11);
var __defProp$t = Object.defineProperty;
var __defProps$l = Object.defineProperties;
var __getOwnPropDescs$l = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$t = Object.getOwnPropertySymbols;
var __hasOwnProp$t = Object.prototype.hasOwnProperty;
var __propIsEnum$t = Object.prototype.propertyIsEnumerable;
var __defNormalProp$t = (obj, key, value) =>
key in obj
? __defProp$t(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$t = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$t.call(b, prop)) __defNormalProp$t(a, prop, b[prop]);
if (__getOwnPropSymbols$t)
for (var prop of __getOwnPropSymbols$t(b)) {
if (__propIsEnum$t.call(b, prop)) __defNormalProp$t(a, prop, b[prop]);
}
return a;
};
var __spreadProps$l = (a, b) => __defProps$l(a, __getOwnPropDescs$l(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
function useFormLabelWidth() {
const potentialLabelWidthArr = vue.ref([]);
const autoLabelWidth = vue.computed(() => {
if (!potentialLabelWidthArr.value.length) return "0";
const max = Math.max(...potentialLabelWidthArr.value);
return max ? `${max}px` : "";
});
function getLabelWidthIndex(width) {
const index = potentialLabelWidthArr.value.indexOf(width);
return index;
}
function registerLabelWidth(val, oldVal) {
if (val && oldVal) {
const index = getLabelWidthIndex(oldVal);
potentialLabelWidthArr.value.splice(index, 1, val);
} else if (val) {
potentialLabelWidthArr.value.push(val);
}
}
function deregisterLabelWidth(val) {
const index = getLabelWidthIndex(val);
index > -1 && potentialLabelWidthArr.value.splice(index, 1);
}
return {
autoLabelWidth,
registerLabelWidth,
deregisterLabelWidth,
};
}
var script$10 = vue.defineComponent({
name: "ElForm",
props: {
model: Object,
rules: Object,
labelPosition: String,
labelWidth: {
type: [String, Number],
default: "",
},
labelSuffix: {
type: String,
default: "",
},
inline: Boolean,
inlineMessage: Boolean,
statusIcon: Boolean,
showMessage: {
type: Boolean,
default: true,
},
size: String,
disabled: Boolean,
validateOnRuleChange: {
type: Boolean,
default: true,
},
hideRequiredAsterisk: {
type: Boolean,
default: false,
},
scrollToError: Boolean,
},
emits: ["validate"],
setup(props, { emit }) {
const fields = [];
vue.watch(
() => props.rules,
() => {
fields.forEach((field) => {
field.evaluateValidationEnabled();
});
if (props.validateOnRuleChange) {
validate(() => ({}));
}
}
);
const addField = (field) => {
if (field) {
fields.push(field);
}
};
const removeField = (field) => {
if (field.prop) {
fields.splice(fields.indexOf(field), 1);
}
};
const resetFields = () => {
if (!props.model) {
return;
}
fields.forEach((field) => {
field.resetField();
});
};
const clearValidate = (props2 = []) => {
const fds = props2.length
? typeof props2 === "string"
? fields.filter((field) => props2 === field.prop)
: fields.filter((field) => props2.indexOf(field.prop) > -1)
: fields;
fds.forEach((field) => {
field.clearValidate();
});
};
const validate = (callback) => {
if (!props.model) {
return;
}
let promise;
if (typeof callback !== "function") {
promise = new Promise((resolve, reject) => {
callback = function (valid2, invalidFields2) {
if (valid2) {
resolve(true);
} else {
reject(invalidFields2);
}
};
});
}
if (fields.length === 0) {
callback(true);
}
let valid = true;
let count = 0;
let invalidFields = {};
let firstInvalidFields;
for (const field of fields) {
field.validate("", (message, field2) => {
if (message) {
valid = false;
firstInvalidFields || (firstInvalidFields = field2);
}
invalidFields = __spreadValues$t(
__spreadValues$t({}, invalidFields),
field2
);
if (++count === fields.length) {
callback(valid, invalidFields);
}
});
}
if (!valid && props.scrollToError) {
scrollToField(Object.keys(firstInvalidFields)[0]);
}
return promise;
};
const validateField = (props2, cb) => {
props2 = [].concat(props2);
const fds = fields.filter((field) => props2.indexOf(field.prop) !== -1);
if (!fields.length) {
return;
}
fds.forEach((field) => {
field.validate("", cb);
});
};
const scrollToField = (prop) => {
fields.forEach((item) => {
if (item.prop === prop) {
item.$el.scrollIntoView();
}
});
};
const elForm = vue.reactive(
__spreadValues$t(
__spreadProps$l(__spreadValues$t({}, vue.toRefs(props)), {
resetFields,
clearValidate,
validateField,
emit,
addField,
removeField,
}),
useFormLabelWidth()
)
);
vue.provide(elFormKey, elForm);
return {
validate,
resetFields,
clearValidate,
validateField,
scrollToField,
};
},
});
function render$U(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"form",
{
class: vue.normalizeClass([
"el-form",
[
_ctx.labelPosition ? "el-form--label-" + _ctx.labelPosition : "",
{ "el-form--inline": _ctx.inline },
],
]),
},
[vue.renderSlot(_ctx.$slots, "default")],
2
)
);
}
script$10.render = render$U;
script$10.__file = "packages/components/form/src/form.vue";
function _extends() {
_extends =
Object.assign ||
function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
subClass.__proto__ = superClass;
}
function _getPrototypeOf(o) {
_getPrototypeOf = Object.setPrototypeOf
? Object.getPrototypeOf
: function _getPrototypeOf(o) {
return o.__proto__ || Object.getPrototypeOf(o);
};
return _getPrototypeOf(o);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf =
Object.setPrototypeOf ||
function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
}
function _isNativeReflectConstruct() {
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
if (Reflect.construct.sham) return false;
if (typeof Proxy === "function") return true;
try {
Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
return true;
} catch (e) {
return false;
}
}
function _construct(Parent, args, Class) {
if (_isNativeReflectConstruct()) {
_construct = Reflect.construct;
} else {
_construct = function _construct(Parent, args, Class) {
var a = [null];
a.push.apply(a, args);
var Constructor = Function.bind.apply(Parent, a);
var instance = new Constructor();
if (Class) _setPrototypeOf(instance, Class.prototype);
return instance;
};
}
return _construct.apply(null, arguments);
}
function _isNativeFunction(fn) {
return Function.toString.call(fn).indexOf("[native code]") !== -1;
}
function _wrapNativeSuper(Class) {
var _cache = typeof Map === "function" ? new Map() : undefined;
_wrapNativeSuper = function _wrapNativeSuper(Class) {
if (Class === null || !_isNativeFunction(Class)) return Class;
if (typeof Class !== "function") {
throw new TypeError(
"Super expression must either be null or a function"
);
}
if (typeof _cache !== "undefined") {
if (_cache.has(Class)) return _cache.get(Class);
_cache.set(Class, Wrapper);
}
function Wrapper() {
return _construct(Class, arguments, _getPrototypeOf(this).constructor);
}
Wrapper.prototype = Object.create(Class.prototype, {
constructor: {
value: Wrapper,
enumerable: false,
writable: true,
configurable: true,
},
});
return _setPrototypeOf(Wrapper, Class);
};
return _wrapNativeSuper(Class);
}
/* eslint no-console:0 */
var formatRegExp = /%[sdj%]/g;
var warning = function warning() {}; // don't print warning message when in production env or node runtime
if (
typeof process !== "undefined" &&
process.env &&
"production" !== "production" &&
typeof window !== "undefined" &&
typeof document !== "undefined"
) {
warning = function warning(type, errors) {
if (typeof console !== "undefined" && console.warn) {
if (
errors.every(function (e) {
return typeof e === "string";
})
) {
console.warn(type, errors);
}
}
};
}
function convertFieldsError(errors) {
if (!errors || !errors.length) return null;
var fields = {};
errors.forEach(function (error) {
var field = error.field;
fields[field] = fields[field] || [];
fields[field].push(error);
});
return fields;
}
function format() {
for (
var _len = arguments.length, args = new Array(_len), _key = 0;
_key < _len;
_key++
) {
args[_key] = arguments[_key];
}
var i = 1;
var f = args[0];
var len = args.length;
if (typeof f === "function") {
return f.apply(null, args.slice(1));
}
if (typeof f === "string") {
var str = String(f).replace(formatRegExp, function (x) {
if (x === "%%") {
return "%";
}
if (i >= len) {
return x;
}
switch (x) {
case "%s":
return String(args[i++]);
case "%d":
return Number(args[i++]);
case "%j":
try {
return JSON.stringify(args[i++]);
} catch (_) {
return "[Circular]";
}
break;
default:
return x;
}
});
return str;
}
return f;
}
function isNativeStringType(type) {
return (
type === "string" ||
type === "url" ||
type === "hex" ||
type === "email" ||
type === "date" ||
type === "pattern"
);
}
function isEmptyValue(value, type) {
if (value === undefined || value === null) {
return true;
}
if (type === "array" && Array.isArray(value) && !value.length) {
return true;
}
if (isNativeStringType(type) && typeof value === "string" && !value) {
return true;
}
return false;
}
function asyncParallelArray(arr, func, callback) {
var results = [];
var total = 0;
var arrLength = arr.length;
function count(errors) {
results.push.apply(results, errors);
total++;
if (total === arrLength) {
callback(results);
}
}
arr.forEach(function (a) {
func(a, count);
});
}
function asyncSerialArray(arr, func, callback) {
var index = 0;
var arrLength = arr.length;
function next(errors) {
if (errors && errors.length) {
callback(errors);
return;
}
var original = index;
index = index + 1;
if (original < arrLength) {
func(arr[original], next);
} else {
callback([]);
}
}
next([]);
}
function flattenObjArr(objArr) {
var ret = [];
Object.keys(objArr).forEach(function (k) {
ret.push.apply(ret, objArr[k]);
});
return ret;
}
var AsyncValidationError = /*#__PURE__*/ (function (_Error) {
_inheritsLoose(AsyncValidationError, _Error);
function AsyncValidationError(errors, fields) {
var _this;
_this = _Error.call(this, "Async Validation Error") || this;
_this.errors = errors;
_this.fields = fields;
return _this;
}
return AsyncValidationError;
})(/*#__PURE__*/ _wrapNativeSuper(Error));
function asyncMap(objArr, option, func, callback) {
if (option.first) {
var _pending = new Promise(function (resolve, reject) {
var next = function next(errors) {
callback(errors);
return errors.length
? reject(
new AsyncValidationError(errors, convertFieldsError(errors))
)
: resolve();
};
var flattenArr = flattenObjArr(objArr);
asyncSerialArray(flattenArr, func, next);
});
_pending["catch"](function (e) {
return e;
});
return _pending;
}
var firstFields = option.firstFields || [];
if (firstFields === true) {
firstFields = Object.keys(objArr);
}
var objArrKeys = Object.keys(objArr);
var objArrLength = objArrKeys.length;
var total = 0;
var results = [];
var pending = new Promise(function (resolve, reject) {
var next = function next(errors) {
results.push.apply(results, errors);
total++;
if (total === objArrLength) {
callback(results);
return results.length
? reject(
new AsyncValidationError(results, convertFieldsError(results))
)
: resolve();
}
};
if (!objArrKeys.length) {
callback(results);
resolve();
}
objArrKeys.forEach(function (key) {
var arr = objArr[key];
if (firstFields.indexOf(key) !== -1) {
asyncSerialArray(arr, func, next);
} else {
asyncParallelArray(arr, func, next);
}
});
});
pending["catch"](function (e) {
return e;
});
return pending;
}
function complementError(rule) {
return function (oe) {
if (oe && oe.message) {
oe.field = oe.field || rule.fullField;
return oe;
}
return {
message: typeof oe === "function" ? oe() : oe,
field: oe.field || rule.fullField,
};
};
}
function deepMerge(target, source) {
if (source) {
for (var s in source) {
if (source.hasOwnProperty(s)) {
var value = source[s];
if (typeof value === "object" && typeof target[s] === "object") {
target[s] = _extends(_extends({}, target[s]), value);
} else {
target[s] = value;
}
}
}
}
return target;
}
/**
* Rule for validating required fields.
*
* @param rule The validation rule.
* @param value The value of the field on the source object.
* @param source The source object being validated.
* @param errors An array of errors that this rule may add
* validation errors to.
* @param options The validation options.
* @param options.messages The validation messages.
*/
function required(rule, value, source, errors, options, type) {
if (
rule.required &&
(!source.hasOwnProperty(rule.field) ||
isEmptyValue(value, type || rule.type))
) {
errors.push(format(options.messages.required, rule.fullField));
}
}
/**
* Rule for validating whitespace.
*
* @param rule The validation rule.
* @param value The value of the field on the source object.
* @param source The source object being validated.
* @param errors An array of errors that this rule may add
* validation errors to.
* @param options The validation options.
* @param options.messages The validation messages.
*/
function whitespace(rule, value, source, errors, options) {
if (/^\s+$/.test(value) || value === "") {
errors.push(format(options.messages.whitespace, rule.fullField));
}
}
/* eslint max-len:0 */
var pattern = {
// http://emailregex.com/
email:
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
url: new RegExp(
"^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$",
"i"
),
hex: /^#?([a-f0-9]{6}|[a-f0-9]{3})$/i,
};
var types = {
integer: function integer(value) {
return types.number(value) && parseInt(value, 10) === value;
},
float: function float(value) {
return types.number(value) && !types.integer(value);
},
array: function array(value) {
return Array.isArray(value);
},
regexp: function regexp(value) {
if (value instanceof RegExp) {
return true;
}
try {
return !!new RegExp(value);
} catch (e) {
return false;
}
},
date: function date(value) {
return (
typeof value.getTime === "function" &&
typeof value.getMonth === "function" &&
typeof value.getYear === "function" &&
!isNaN(value.getTime())
);
},
number: function number(value) {
if (isNaN(value)) {
return false;
}
return typeof value === "number";
},
object: function object(value) {
return typeof value === "object" && !types.array(value);
},
method: function method(value) {
return typeof value === "function";
},
email: function email(value) {
return (
typeof value === "string" &&
!!value.match(pattern.email) &&
value.length < 255
);
},
url: function url(value) {
return typeof value === "string" && !!value.match(pattern.url);
},
hex: function hex(value) {
return typeof value === "string" && !!value.match(pattern.hex);
},
};
/**
* Rule for validating the type of a value.
*
* @param rule The validation rule.
* @param value The value of the field on the source object.
* @param source The source object being validated.
* @param errors An array of errors that this rule may add
* validation errors to.
* @param options The validation options.
* @param options.messages The validation messages.
*/
function type(rule, value, source, errors, options) {
if (rule.required && value === undefined) {
required(rule, value, source, errors, options);
return;
}
var custom = [
"integer",
"float",
"array",
"regexp",
"object",
"method",
"email",
"number",
"date",
"url",
"hex",
];
var ruleType = rule.type;
if (custom.indexOf(ruleType) > -1) {
if (!types[ruleType](value)) {
errors.push(
format(options.messages.types[ruleType], rule.fullField, rule.type)
);
} // straight typeof check
} else if (ruleType && typeof value !== rule.type) {
errors.push(
format(options.messages.types[ruleType], rule.fullField, rule.type)
);
}
}
/**
* Rule for validating minimum and maximum allowed values.
*
* @param rule The validation rule.
* @param value The value of the field on the source object.
* @param source The source object being validated.
* @param errors An array of errors that this rule may add
* validation errors to.
* @param options The validation options.
* @param options.messages The validation messages.
*/
function range(rule, value, source, errors, options) {
var len = typeof rule.len === "number";
var min = typeof rule.min === "number";
var max = typeof rule.max === "number"; // 正则匹配码点范围从U+010000一直到U+10FFFF的文字（补充平面Supplementary Plane）
var spRegexp = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
var val = value;
var key = null;
var num = typeof value === "number";
var str = typeof value === "string";
var arr = Array.isArray(value);
if (num) {
key = "number";
} else if (str) {
key = "string";
} else if (arr) {
key = "array";
} // if the value is not of a supported type for range validation
// the validation rule rule should use the
// type property to also test for a particular type
if (!key) {
return false;
}
if (arr) {
val = value.length;
}
if (str) {
// 处理码点大于U+010000的文字length属性不准确的bug，如"𠮷𠮷𠮷".lenght !== 3
val = value.replace(spRegexp, "_").length;
}
if (len) {
if (val !== rule.len) {
errors.push(
format(options.messages[key].len, rule.fullField, rule.len)
);
}
} else if (min && !max && val < rule.min) {
errors.push(format(options.messages[key].min, rule.fullField, rule.min));
} else if (max && !min && val > rule.max) {
errors.push(format(options.messages[key].max, rule.fullField, rule.max));
} else if (min && max && (val < rule.min || val > rule.max)) {
errors.push(
format(options.messages[key].range, rule.fullField, rule.min, rule.max)
);
}
}
var ENUM = "enum";
/**
* Rule for validating a value exists in an enumerable list.
*
* @param rule The validation rule.
* @param value The value of the field on the source object.
* @param source The source object being validated.
* @param errors An array of errors that this rule may add
* validation errors to.
* @param options The validation options.
* @param options.messages The validation messages.
*/
function enumerable(rule, value, source, errors, options) {
rule[ENUM] = Array.isArray(rule[ENUM]) ? rule[ENUM] : [];
if (rule[ENUM].indexOf(value) === -1) {
errors.push(
format(options.messages[ENUM], rule.fullField, rule[ENUM].join(", "))
);
}
}
/**
* Rule for validating a regular expression pattern.
*
* @param rule The validation rule.
* @param value The value of the field on the source object.
* @param source The source object being validated.
* @param errors An array of errors that this rule may add
* validation errors to.
* @param options The validation options.
* @param options.messages The validation messages.
*/
function pattern$1(rule, value, source, errors, options) {
if (rule.pattern) {
if (rule.pattern instanceof RegExp) {
// if a RegExp instance is passed, reset `lastIndex` in case its `global`
// flag is accidentally set to `true`, which in a validation scenario
// is not necessary and the result might be misleading
rule.pattern.lastIndex = 0;
if (!rule.pattern.test(value)) {
errors.push(
format(
options.messages.pattern.mismatch,
rule.fullField,
value,
rule.pattern
)
);
}
} else if (typeof rule.pattern === "string") {
var _pattern = new RegExp(rule.pattern);
if (!_pattern.test(value)) {
errors.push(
format(
options.messages.pattern.mismatch,
rule.fullField,
value,
rule.pattern
)
);
}
}
}
}
var rules = {
required: required,
whitespace: whitespace,
type: type,
range: range,
enum: enumerable,
pattern: pattern$1,
};
/**
* Performs validation for string types.
*
* @param rule The validation rule.
* @param value The value of the field on the source object.
* @param callback The callback function.
* @param source The source object being validated.
* @param options The validation options.
* @param options.messages The validation messages.
*/
function string(rule, value, callback, source, options) {
var errors = [];
var validate =
rule.required || (!rule.required && source.hasOwnProperty(rule.field));
if (validate) {
if (isEmptyValue(value, "string") && !rule.required) {
return callback();
}
rules.required(rule, value, source, errors, options, "string");
if (!isEmptyValue(value, "string")) {
rules.type(rule, value, source, errors, options);
rules.range(rule, value, source, errors, options);
rules.pattern(rule, value, source, errors, options);
if (rule.whitespace === true) {
rules.whitespace(rule, value, source, errors, options);
}
}
}
callback(errors);
}
/**
* Validates a function.
*
* @param rule The validation rule.
* @param value The value of the field on the source object.
* @param callback The callback function.
* @param source The source object being validated.
* @param options The validation options.
* @param options.messages The validation messages.
*/
function method(rule, value, callback, source, options) {
var errors = [];
var validate =
rule.required || (!rule.required && source.hasOwnProperty(rule.field));
if (validate) {
if (isEmptyValue(value) && !rule.required) {
return callback();
}
rules.required(rule, value, source, errors, options);
if (value !== undefined) {
rules.type(rule, value, source, errors, options);
}
}
callback(errors);
}
/**
* Validates a number.
*
* @param rule The validation rule.
* @param value The value of the field on the source object.
* @param callback The callback function.
* @param source The source object being validated.
* @param options The validation options.
* @param options.messages The validation messages.
*/
function number(rule, value, callback, source, options) {
var errors = [];
var validate =
rule.required || (!rule.required && source.hasOwnProperty(rule.field));
if (validate) {
if (value === "") {
value = undefined;
}
if (isEmptyValue(value) && !rule.required) {
return callback();
}
rules.required(rule, value, source, errors, options);
if (value !== undefined) {
rules.type(rule, value, source, errors, options);
rules.range(rule, value, source, errors, options);
}
}
callback(errors);
}
/**
* Validates a boolean.
*
* @param rule The validation rule.
* @param value The value of the field on the source object.
* @param callback The callback function.
* @param source The source object being validated.
* @param options The validation options.
* @param options.messages The validation messages.
*/
function _boolean(rule, value, callback, source, options) {
var errors = [];
var validate =
rule.required || (!rule.required && source.hasOwnProperty(rule.field));
if (validate) {
if (isEmptyValue(value) && !rule.required) {
return callback();
}
rules.required(rule, value, source, errors, options);
if (value !== undefined) {
rules.type(rule, value, source, errors, options);
}
}
callback(errors);
}
/**
* Validates the regular expression type.
*
* @param rule The validation rule.
* @param value The value of the field on the source object.
* @param callback The callback function.
* @param source The source object being validated.
* @param options The validation options.
* @param options.messages The validation messages.
*/
function regexp(rule, value, callback, source, options) {
var errors = [];
var validate =
rule.required || (!rule.required && source.hasOwnProperty(rule.field));
if (validate) {
if (isEmptyValue(value) && !rule.required) {
return callback();
}
rules.required(rule, value, source, errors, options);
if (!isEmptyValue(value)) {
rules.type(rule, value, source, errors, options);
}
}
callback(errors);
}
/**
* Validates a number is an integer.
*
* @param rule The validation rule.
* @param value The value of the field on the source object.
* @param callback The callback function.
* @param source The source object being validated.
* @param options The validation options.
* @param options.messages The validation messages.
*/
function integer(rule, value, callback, source, options) {
var errors = [];
var validate =
rule.required || (!rule.required && source.hasOwnProperty(rule.field));
if (validate) {
if (isEmptyValue(value) && !rule.required) {
return callback();
}
rules.required(rule, value, source, errors, options);
if (value !== undefined) {
rules.type(rule, value, source, errors, options);
rules.range(rule, value, source, errors, options);
}
}
callback(errors);
}
/**
* Validates a number is a floating point number.
*
* @param rule The validation rule.
* @param value The value of the field on the source object.
* @param callback The callback function.
* @param source The source object being validated.
* @param options The validation options.
* @param options.messages The validation messages.
*/
function floatFn(rule, value, callback, source, options) {
var errors = [];
var validate =
rule.required || (!rule.required && source.hasOwnProperty(rule.field));
if (validate) {
if (isEmptyValue(value) && !rule.required) {
return callback();
}
rules.required(rule, value, source, errors, options);
if (value !== undefined) {
rules.type(rule, value, source, errors, options);
rules.range(rule, value, source, errors, options);
}
}
callback(errors);
}
/**
* Validates an array.
*
* @param rule The validation rule.
* @param value The value of the field on the source object.
* @param callback The callback function.
* @param source The source object being validated.
* @param options The validation options.
* @param options.messages The validation messages.
*/
function array(rule, value, callback, source, options) {
var errors = [];
var validate =
rule.required || (!rule.required && source.hasOwnProperty(rule.field));
if (validate) {
if (isEmptyValue(value, "array") && !rule.required) {
return callback();
}
rules.required(rule, value, source, errors, options, "array");
if (!isEmptyValue(value, "array")) {
rules.type(rule, value, source, errors, options);
rules.range(rule, value, source, errors, options);
}
}
callback(errors);
}
/**
* Validates an object.
*
* @param rule The validation rule.
* @param value The value of the field on the source object.
* @param callback The callback function.
* @param source The source object being validated.
* @param options The validation options.
* @param options.messages The validation messages.
*/
function object(rule, value, callback, source, options) {
var errors = [];
var validate =
rule.required || (!rule.required && source.hasOwnProperty(rule.field));
if (validate) {
if (isEmptyValue(value) && !rule.required) {
return callback();
}
rules.required(rule, value, source, errors, options);
if (value !== undefined) {
rules.type(rule, value, source, errors, options);
}
}
callback(errors);
}
var ENUM$1 = "enum";
/**
* Validates an enumerable list.
*
* @param rule The validation rule.
* @param value The value of the field on the source object.
* @param callback The callback function.
* @param source The source object being validated.
* @param options The validation options.
* @param options.messages The validation messages.
*/
function enumerable$1(rule, value, callback, source, options) {
var errors = [];
var validate =
rule.required || (!rule.required && source.hasOwnProperty(rule.field));
if (validate) {
if (isEmptyValue(value) && !rule.required) {
return callback();
}
rules.required(rule, value, source, errors, options);
if (value !== undefined) {
rules[ENUM$1](rule, value, source, errors, options);
}
}
callback(errors);
}
/**
* Validates a regular expression pattern.
*
* Performs validation when a rule only contains
* a pattern property but is not declared as a string type.
*
* @param rule The validation rule.
* @param value The value of the field on the source object.
* @param callback The callback function.
* @param source The source object being validated.
* @param options The validation options.
* @param options.messages The validation messages.
*/
function pattern$2(rule, value, callback, source, options) {
var errors = [];
var validate =
rule.required || (!rule.required && source.hasOwnProperty(rule.field));
if (validate) {
if (isEmptyValue(value, "string") && !rule.required) {
return callback();
}
rules.required(rule, value, source, errors, options);
if (!isEmptyValue(value, "string")) {
rules.pattern(rule, value, source, errors, options);
}
}
callback(errors);
}
function date(rule, value, callback, source, options) {
// console.log('integer rule called %j', rule);
var errors = [];
var validate =
rule.required || (!rule.required && source.hasOwnProperty(rule.field)); // console.log('validate on %s value', value);
if (validate) {
if (isEmptyValue(value, "date") && !rule.required) {
return callback();
}
rules.required(rule, value, source, errors, options);
if (!isEmptyValue(value, "date")) {
var dateObject;
if (value instanceof Date) {
dateObject = value;
} else {
dateObject = new Date(value);
}
rules.type(rule, dateObject, source, errors, options);
if (dateObject) {
rules.range(rule, dateObject.getTime(), source, errors, options);
}
}
}
callback(errors);
}
function required$1(rule, value, callback, source, options) {
var errors = [];
var type = Array.isArray(value) ? "array" : typeof value;
rules.required(rule, value, source, errors, options, type);
callback(errors);
}
function type$1(rule, value, callback, source, options) {
var ruleType = rule.type;
var errors = [];
var validate =
rule.required || (!rule.required && source.hasOwnProperty(rule.field));
if (validate) {
if (isEmptyValue(value, ruleType) && !rule.required) {
return callback();
}
rules.required(rule, value, source, errors, options, ruleType);
if (!isEmptyValue(value, ruleType)) {
rules.type(rule, value, source, errors, options);
}
}
callback(errors);
}
/**
* Performs validation for any type.
*
* @param rule The validation rule.
* @param value The value of the field on the source object.
* @param callback The callback function.
* @param source The source object being validated.
* @param options The validation options.
* @param options.messages The validation messages.
*/
function any(rule, value, callback, source, options) {
var errors = [];
var validate =
rule.required || (!rule.required && source.hasOwnProperty(rule.field));
if (validate) {
if (isEmptyValue(value) && !rule.required) {
return callback();
}
rules.required(rule, value, source, errors, options);
}
callback(errors);
}
var validators = {
string: string,
method: method,
number: number,
boolean: _boolean,
regexp: regexp,
integer: integer,
float: floatFn,
array: array,
object: object,
enum: enumerable$1,
pattern: pattern$2,
date: date,
url: type$1,
hex: type$1,
email: type$1,
required: required$1,
any: any,
};
function newMessages() {
return {
default: "Validation error on field %s",
required: "%s is required",
enum: "%s must be one of %s",
whitespace: "%s cannot be empty",
date: {
format: "%s date %s is invalid for format %s",
parse: "%s date could not be parsed, %s is invalid ",
invalid: "%s date %s is invalid",
},
types: {
string: "%s is not a %s",
method: "%s is not a %s (function)",
array: "%s is not an %s",
object: "%s is not an %s",
number: "%s is not a %s",
date: "%s is not a %s",
boolean: "%s is not a %s",
integer: "%s is not an %s",
float: "%s is not a %s",
regexp: "%s is not a valid %s",
email: "%s is not a valid %s",
url: "%s is not a valid %s",
hex: "%s is not a valid %s",
},
string: {
len: "%s must be exactly %s characters",
min: "%s must be at least %s characters",
max: "%s cannot be longer than %s characters",
range: "%s must be between %s and %s characters",
},
number: {
len: "%s must equal %s",
min: "%s cannot be less than %s",
max: "%s cannot be greater than %s",
range: "%s must be between %s and %s",
},
array: {
len: "%s must be exactly %s in length",
min: "%s cannot be less than %s in length",
max: "%s cannot be greater than %s in length",
range: "%s must be between %s and %s in length",
},
pattern: {
mismatch: "%s value %s does not match pattern %s",
},
clone: function clone() {
var cloned = JSON.parse(JSON.stringify(this));
cloned.clone = this.clone;
return cloned;
},
};
}
var messages = newMessages();
/**
* Encapsulates a validation schema.
*
* @param descriptor An object declaring validation rules
* for this schema.
*/
function Schema(descriptor) {
this.rules = null;
this._messages = messages;
this.define(descriptor);
}
Schema.prototype = {
messages: function messages(_messages) {
if (_messages) {
this._messages = deepMerge(newMessages(), _messages);
}
return this._messages;
},
define: function define(rules) {
if (!rules) {
throw new Error("Cannot configure a schema with no rules");
}
if (typeof rules !== "object" || Array.isArray(rules)) {
throw new Error("Rules must be an object");
}
this.rules = {};
var z;
var item;
for (z in rules) {
if (rules.hasOwnProperty(z)) {
item = rules[z];
this.rules[z] = Array.isArray(item) ? item : [item];
}
}
},
validate: function validate(source_, o, oc) {
var _this = this;
if (o === void 0) {
o = {};
}
if (oc === void 0) {
oc = function oc() {};
}
var source = source_;
var options = o;
var callback = oc;
if (typeof options === "function") {
callback = options;
options = {};
}
if (!this.rules || Object.keys(this.rules).length === 0) {
if (callback) {
callback();
}
return Promise.resolve();
}
function complete(results) {
var i;
var errors = [];
var fields = {};
function add(e) {
if (Array.isArray(e)) {
var _errors;
errors = (_errors = errors).concat.apply(_errors, e);
} else {
errors.push(e);
}
}
for (i = 0; i < results.length; i++) {
add(results[i]);
}
if (!errors.length) {
errors = null;
fields = null;
} else {
fields = convertFieldsError(errors);
}
callback(errors, fields);
}
if (options.messages) {
var messages$1 = this.messages();
if (messages$1 === messages) {
messages$1 = newMessages();
}
deepMerge(messages$1, options.messages);
options.messages = messages$1;
} else {
options.messages = this.messages();
}
var arr;
var value;
var series = {};
var keys = options.keys || Object.keys(this.rules);
keys.forEach(function (z) {
arr = _this.rules[z];
value = source[z];
arr.forEach(function (r) {
var rule = r;
if (typeof rule.transform === "function") {
if (source === source_) {
source = _extends({}, source);
}
value = source[z] = rule.transform(value);
}
if (typeof rule === "function") {
rule = {
validator: rule,
};
} else {
rule = _extends({}, rule);
}
rule.validator = _this.getValidationMethod(rule);
rule.field = z;
rule.fullField = rule.fullField || z;
rule.type = _this.getType(rule);
if (!rule.validator) {
return;
}
series[z] = series[z] || [];
series[z].push({
rule: rule,
value: value,
source: source,
field: z,
});
});
});
var errorFields = {};
return asyncMap(
series,
options,
function (data, doIt) {
var rule = data.rule;
var deep =
(rule.type === "object" || rule.type === "array") &&
(typeof rule.fields === "object" ||
typeof rule.defaultField === "object");
deep = deep && (rule.required || (!rule.required && data.value));
rule.field = data.field;
function addFullfield(key, schema) {
return _extends(
_extends({}, schema),
{},
{
fullField: rule.fullField + "." + key,
}
);
}
function cb(e) {
if (e === void 0) {
e = [];
}
var errors = e;
if (!Array.isArray(errors)) {
errors = [errors];
}
if (!options.suppressWarning && errors.length) {
Schema.warning("async-validator:", errors);
}
if (errors.length && rule.message) {
errors = [].concat(rule.message);
}
errors = errors.map(complementError(rule));
if (options.first && errors.length) {
errorFields[rule.field] = 1;
return doIt(errors);
}
if (!deep) {
doIt(errors);
} else {
// if rule is required but the target object
// does not exist fail at the rule level and don't
// go deeper
if (rule.required && !data.value) {
if (rule.message) {
errors = [].concat(rule.message).map(complementError(rule));
} else if (options.error) {
errors = [
options.error(
rule,
format(options.messages.required, rule.field)
),
];
}
return doIt(errors);
}
var fieldsSchema = {};
if (rule.defaultField) {
for (var k in data.value) {
if (data.value.hasOwnProperty(k)) {
fieldsSchema[k] = rule.defaultField;
}
}
}
fieldsSchema = _extends(
_extends({}, fieldsSchema),
data.rule.fields
);
for (var f in fieldsSchema) {
if (fieldsSchema.hasOwnProperty(f)) {
var fieldSchema = Array.isArray(fieldsSchema[f])
? fieldsSchema[f]
: [fieldsSchema[f]];
fieldsSchema[f] = fieldSchema.map(addFullfield.bind(null, f));
}
}
var schema = new Schema(fieldsSchema);
schema.messages(options.messages);
if (data.rule.options) {
data.rule.options.messages = options.messages;
data.rule.options.error = options.error;
}
schema.validate(
data.value,
data.rule.options || options,
function (errs) {
var finalErrors = [];
if (errors && errors.length) {
finalErrors.push.apply(finalErrors, errors);
}
if (errs && errs.length) {
finalErrors.push.apply(finalErrors, errs);
}
doIt(finalErrors.length ? finalErrors : null);
}
);
}
}
var res;
if (rule.asyncValidator) {
res = rule.asyncValidator(
rule,
data.value,
cb,
data.source,
options
);
} else if (rule.validator) {
res = rule.validator(rule, data.value, cb, data.source, options);
if (res === true) {
cb();
} else if (res === false) {
cb(rule.message || rule.field + " fails");
} else if (res instanceof Array) {
cb(res);
} else if (res instanceof Error) {
cb(res.message);
}
}
if (res && res.then) {
res.then(
function () {
return cb();
},
function (e) {
return cb(e);
}
);
}
},
function (results) {
complete(results);
}
);
},
getType: function getType(rule) {
if (rule.type === undefined && rule.pattern instanceof RegExp) {
rule.type = "pattern";
}
if (
typeof rule.validator !== "function" &&
rule.type &&
!validators.hasOwnProperty(rule.type)
) {
throw new Error(format("Unknown rule type %s", rule.type));
}
return rule.type || "string";
},
getValidationMethod: function getValidationMethod(rule) {
if (typeof rule.validator === "function") {
return rule.validator;
}
var keys = Object.keys(rule);
var messageIndex = keys.indexOf("message");
if (messageIndex !== -1) {
keys.splice(messageIndex, 1);
}
if (keys.length === 1 && keys[0] === "required") {
return validators.required;
}
return validators[this.getType(rule)] || false;
},
};
Schema.register = function register(type, validator) {
if (typeof validator !== "function") {
throw new Error(
"Cannot register a validator by type, validator is not a function"
);
}
validators[type] = validator;
};
Schema.warning = warning;
Schema.messages = messages;
Schema.validators = validators;
var LabelWrap = vue.defineComponent({
name: "ElLabelWrap",
props: {
isAutoWidth: Boolean,
updateAll: Boolean,
},
setup(props, { slots }) {
const el = vue.ref(null);
const elForm = vue.inject(elFormKey);
const elFormItem = vue.inject(elFormItemKey);
const computedWidth = vue.ref(0);
vue.watch(computedWidth, (val, oldVal) => {
if (props.updateAll) {
elForm.registerLabelWidth(val, oldVal);
elFormItem.updateComputedLabelWidth(val);
}
});
const getLabelWidth = () => {
var _a;
if ((_a = el.value) == null ? void 0 : _a.firstElementChild) {
const width = window.getComputedStyle(
el.value.firstElementChild
).width;
return Math.ceil(parseFloat(width));
} else {
return 0;
}
};
const updateLabelWidth = (action = "update") => {
vue.nextTick(() => {
if (slots.default && props.isAutoWidth) {
if (action === "update") {
computedWidth.value = getLabelWidth();
} else if (action === "remove") {
elForm.deregisterLabelWidth(computedWidth.value);
}
}
});
};
const updateLabelWidthFn = () => updateLabelWidth("update");
vue.onMounted(() => {
addResizeListener(el.value.firstElementChild, updateLabelWidthFn);
updateLabelWidthFn();
});
vue.onUpdated(updateLabelWidthFn);
vue.onBeforeUnmount(() => {
var _a;
updateLabelWidth("remove");
removeResizeListener(
(_a = el.value) == null ? void 0 : _a.firstElementChild,
updateLabelWidthFn
);
});
function render() {
var _a, _b;
if (!slots) return null;
if (props.isAutoWidth) {
const autoLabelWidth = elForm.autoLabelWidth;
const style = {};
if (autoLabelWidth && autoLabelWidth !== "auto") {
const marginWidth = Math.max(
0,
parseInt(autoLabelWidth, 10) - computedWidth.value
);
const marginPosition =
elForm.labelPosition === "left" ? "marginRight" : "marginLeft";
if (marginWidth) {
style[marginPosition] = `${marginWidth}px`;
}
}
return vue.h(
"div",
{
ref: el,
class: ["el-form-item__label-wrap"],
style,
},
(_a = slots.default) == null ? void 0 : _a.call(slots)
);
} else {
return vue.h(
vue.Fragment,
{ ref: el },
(_b = slots.default) == null ? void 0 : _b.call(slots)
);
}
}
return render;
},
});
var __defProp$s = Object.defineProperty;
var __defProps$k = Object.defineProperties;
var __getOwnPropDescs$k = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$s = Object.getOwnPropertySymbols;
var __hasOwnProp$s = Object.prototype.hasOwnProperty;
var __propIsEnum$s = Object.prototype.propertyIsEnumerable;
var __defNormalProp$s = (obj, key, value) =>
key in obj
? __defProp$s(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$s = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$s.call(b, prop)) __defNormalProp$s(a, prop, b[prop]);
if (__getOwnPropSymbols$s)
for (var prop of __getOwnPropSymbols$s(b)) {
if (__propIsEnum$s.call(b, prop)) __defNormalProp$s(a, prop, b[prop]);
}
return a;
};
var __spreadProps$k = (a, b) => __defProps$k(a, __getOwnPropDescs$k(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
var script$$ = vue.defineComponent({
name: "ElFormItem",
componentName: "ElFormItem",
components: {
LabelWrap,
},
props: {
label: String,
labelWidth: {
type: [String, Number],
default: "",
},
prop: String,
required: {
type: Boolean,
default: void 0,
},
rules: [Object, Array],
error: String,
validateStatus: String,
for: String,
inlineMessage: {
type: [String, Boolean],
default: "",
},
showMessage: {
type: Boolean,
default: true,
},
size: {
type: String,
validator: isValidComponentSize,
},
},
setup(props, { slots }) {
const $ELEMENT = useGlobalConfig();
const elForm = vue.inject(elFormKey, {});
const validateState = vue.ref("");
const validateMessage = vue.ref("");
const isValidationEnabled = vue.ref(false);
const computedLabelWidth = vue.ref("");
const formItemRef = vue.ref();
const vm = vue.getCurrentInstance();
const isNested = vue.computed(() => {
let parent = vm.parent;
while (parent && parent.type.name !== "ElForm") {
if (parent.type.name === "ElFormItem") {
return true;
}
parent = parent.parent;
}
return false;
});
let initialValue = void 0;
vue.watch(
() => props.error,
(val) => {
validateMessage.value = val;
validateState.value = val ? "error" : "";
},
{
immediate: true,
}
);
vue.watch(
() => props.validateStatus,
(val) => {
validateState.value = val;
}
);
const labelFor = vue.computed(() => props.for || props.prop);
const labelStyle = vue.computed(() => {
const ret = {};
if (elForm.labelPosition === "top") return ret;
const labelWidth =
addUnit(props.labelWidth) || addUnit(elForm.labelWidth);
if (labelWidth) {
ret.width = labelWidth;
}
return ret;
});
const contentStyle = vue.computed(() => {
const ret = {};
if (elForm.labelPosition === "top" || elForm.inline) {
return ret;
}
if (!props.label && !props.labelWidth && isNested.value) {
return ret;
}
const labelWidth =
addUnit(props.labelWidth) || addUnit(elForm.labelWidth);
if (!props.label && !slots.label) {
ret.marginLeft = labelWidth;
}
return ret;
});
const fieldValue = vue.computed(() => {
const model = elForm.model;
if (!model || !props.prop) {
return;
}
let path = props.prop;
if (path.indexOf(":") !== -1) {
path = path.replace(/:/, ".");
}
return getPropByPath(model, path, true).v;
});
const isRequired = vue.computed(() => {
const rules = getRules();
let required = false;
if (rules && rules.length) {
rules.every((rule) => {
if (rule.required) {
required = true;
return false;
}
return true;
});
}
return required;
});
const elFormItemSize = vue.computed(() => props.size || elForm.size);
const sizeClass = vue.computed(() => {
return elFormItemSize.value || $ELEMENT.size;
});
const validate = (trigger, callback = NOOP) => {
if (!isValidationEnabled.value) {
callback();
return;
}
const rules = getFilteredRule(trigger);
if ((!rules || rules.length === 0) && props.required === void 0) {
callback();
return;
}
validateState.value = "validating";
const descriptor = {};
if (rules && rules.length > 0) {
rules.forEach((rule) => {
delete rule.trigger;
});
}
descriptor[props.prop] = rules;
const validator = new Schema(descriptor);
const model = {};
model[props.prop] = fieldValue.value;
validator.validate(
model,
{ firstFields: true },
(errors, invalidFields) => {
var _a;
validateState.value = !errors ? "success" : "error";
validateMessage.value = errors
? errors[0].message || `${props.prop} is required`
: "";
callback(validateMessage.value, invalidFields);
(_a = elForm.emit) == null
? void 0
: _a.call(
elForm,
"validate",
props.prop,
!errors,
validateMessage.value || null
);
}
);
};
const clearValidate = () => {
validateState.value = "";
validateMessage.value = "";
};
const resetField = () => {
validateState.value = "";
validateMessage.value = "";
const model = elForm.model;
const value = fieldValue.value;
let path = props.prop;
if (path.indexOf(":") !== -1) {
path = path.replace(/:/, ".");
}
const prop = getPropByPath(model, path, true);
if (Array.isArray(value)) {
prop.o[prop.k] = [].concat(initialValue);
} else {
prop.o[prop.k] = initialValue;
}
};
const getRules = () => {
const formRules = elForm.rules;
const selfRules = props.rules;
const requiredRule =
props.required !== void 0 ? { required: !!props.required } : [];
const prop = getPropByPath(formRules, props.prop || "", false);
const normalizedRule = formRules
? prop.o[props.prop || ""] || prop.v
: [];
return []
.concat(selfRules || normalizedRule || [])
.concat(requiredRule);
};
const getFilteredRule = (trigger) => {
const rules = getRules();
return rules
.filter((rule) => {
if (!rule.trigger || trigger === "") return true;
if (Array.isArray(rule.trigger)) {
return rule.trigger.indexOf(trigger) > -1;
} else {
return rule.trigger === trigger;
}
})
.map((rule) => __spreadValues$s({}, rule));
};
const evaluateValidationEnabled = () => {
var _a;
isValidationEnabled.value = !!((_a = getRules()) == null
? void 0
: _a.length);
};
const updateComputedLabelWidth = (width) => {
computedLabelWidth.value = width ? `${width}px` : "";
};
const elFormItem = vue.reactive(
__spreadProps$k(__spreadValues$s({}, vue.toRefs(props)), {
size: sizeClass,
validateState,
$el: formItemRef,
evaluateValidationEnabled,
resetField,
clearValidate,
validate,
updateComputedLabelWidth,
})
);
vue.onMounted(() => {
if (props.prop) {
elForm == null ? void 0 : elForm.addField(elFormItem);
const value = fieldValue.value;
initialValue = Array.isArray(value) ? [...value] : value;
evaluateValidationEnabled();
}
});
vue.onBeforeUnmount(() => {
elForm == null ? void 0 : elForm.removeField(elFormItem);
});
vue.provide(elFormItemKey, elFormItem);
const formItemClass = vue.computed(() => [
{
"el-form-item--feedback": elForm.statusIcon,
"is-error": validateState.value === "error",
"is-validating": validateState.value === "validating",
"is-success": validateState.value === "success",
"is-required": isRequired.value || props.required,
"is-no-asterisk": elForm.hideRequiredAsterisk,
},
sizeClass.value ? `el-form-item--${sizeClass.value}` : "",
]);
const shouldShowError = vue.computed(() => {
return (
validateState.value === "error" &&
props.showMessage &&
elForm.showMessage
);
});
return {
formItemRef,
formItemClass,
shouldShowError,
elForm,
labelStyle,
contentStyle,
validateMessage,
labelFor,
resetField,
clearValidate,
};
},
});
const _hoisted_1$F = ["for"];
function render$T(_ctx, _cache, $props, $setup, $data, $options) {
const _component_LabelWrap = vue.resolveComponent("LabelWrap");
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
ref: "formItemRef",
class: vue.normalizeClass(["el-form-item", _ctx.formItemClass]),
},
[
vue.createVNode(
_component_LabelWrap,
{
"is-auto-width": _ctx.labelStyle.width === "auto",
"update-all": _ctx.elForm.labelWidth === "auto",
},
{
default: vue.withCtx(() => [
_ctx.label || _ctx.$slots.label
? (vue.openBlock(),
vue.createElementBlock(
"label",
{
key: 0,
for: _ctx.labelFor,
class: "el-form-item__label",
style: vue.normalizeStyle(_ctx.labelStyle),
},
[
vue.renderSlot(
_ctx.$slots,
"label",
{
label: _ctx.label + _ctx.elForm.labelSuffix,
},
() => [
vue.createTextVNode(
vue.toDisplayString(
_ctx.label + _ctx.elForm.labelSuffix
),
1
),
]
),
],
12,
_hoisted_1$F
))
: vue.createCommentVNode("v-if", true),
]),
_: 3,
},
8,
["is-auto-width", "update-all"]
),
vue.createElementVNode(
"div",
{
class: "el-form-item__content",
style: vue.normalizeStyle(_ctx.contentStyle),
},
[
vue.renderSlot(_ctx.$slots, "default"),
vue.createVNode(
vue.Transition,
{ name: "el-zoom-in-top" },
{
default: vue.withCtx(() => [
_ctx.shouldShowError
? vue.renderSlot(
_ctx.$slots,
"error",
{
key: 0,
error: _ctx.validateMessage,
},
() => [
vue.createElementVNode(
"div",
{
class: vue.normalizeClass([
"el-form-item__error",
{
"el-form-item__error--inline":
typeof _ctx.inlineMessage === "boolean"
? _ctx.inlineMessage
: _ctx.elForm.inlineMessage || false,
},
]),
},
vue.toDisplayString(_ctx.validateMessage),
3
),
]
)
: vue.createCommentVNode("v-if", true),
]),
_: 3,
}
),
],
4
),
],
2
)
);
}
script$$.render = render$T;
script$$.__file = "packages/components/form/src/form-item.vue";
const ElForm = withInstall(script$10, {
FormItem: script$$,
});
const ElFormItem = withNoopInstall(script$$);
const iconProps = {
size: {
type: Number,
},
color: {
type: String,
},
};
var __defProp$r = Object.defineProperty;
var __getOwnPropSymbols$r = Object.getOwnPropertySymbols;
var __hasOwnProp$r = Object.prototype.hasOwnProperty;
var __propIsEnum$r = Object.prototype.propertyIsEnumerable;
var __defNormalProp$r = (obj, key, value) =>
key in obj
? __defProp$r(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$r = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$r.call(b, prop)) __defNormalProp$r(a, prop, b[prop]);
if (__getOwnPropSymbols$r)
for (var prop of __getOwnPropSymbols$r(b)) {
if (__propIsEnum$r.call(b, prop)) __defNormalProp$r(a, prop, b[prop]);
}
return a;
};
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
var script$_ = vue.defineComponent({
name: "ElIcon",
inheritAttrs: false,
props: iconProps,
setup(props) {
return {
style: vue.computed(() => {
if (!props.size && !props.color) {
return {};
}
return __spreadValues$r(
__spreadValues$r(
{},
props.size ? { "--font-size": `${props.size}px` } : {}
),
props.color ? { "--color": props.color } : {}
);
}),
};
},
});
function render$S(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"i",
vue.mergeProps(
{
class: "el-icon",
style: _ctx.style,
},
_ctx.$attrs
),
[vue.renderSlot(_ctx.$slots, "default")],
16
)
);
}
script$_.render = render$S;
script$_.__file = "packages/components/icon/src/icon.vue";
const ElIcon = withInstall(script$_);
var __defProp$q = Object.defineProperty;
var __defProps$j = Object.defineProperties;
var __getOwnPropDescs$j = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$q = Object.getOwnPropertySymbols;
var __hasOwnProp$q = Object.prototype.hasOwnProperty;
var __propIsEnum$q = Object.prototype.propertyIsEnumerable;
var __defNormalProp$q = (obj, key, value) =>
key in obj
? __defProp$q(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$q = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$q.call(b, prop)) __defNormalProp$q(a, prop, b[prop]);
if (__getOwnPropSymbols$q)
for (var prop of __getOwnPropSymbols$q(b)) {
if (__propIsEnum$q.call(b, prop)) __defNormalProp$q(a, prop, b[prop]);
}
return a;
};
var __spreadProps$j = (a, b) => __defProps$j(a, __getOwnPropDescs$j(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
const Mode = {
CONTAIN: {
name: "contain",
icon: "el-icon-full-screen",
},
ORIGINAL: {
name: "original",
icon: "el-icon-c-scale-to-original",
},
};
const mousewheelEventName = isFirefox$1() ? "DOMMouseScroll" : "mousewheel";
const CLOSE_EVENT = "close";
const SWITCH_EVENT = "switch";
var script$Z = vue.defineComponent({
name: "ElImageViewer",
props: {
urlList: {
type: Array,
default: () => [],
},
zIndex: {
type: Number,
default: 2e3,
},
initialIndex: {
type: Number,
default: 0,
},
infinite: {
type: Boolean,
default: true,
},
hideOnClickModal: {
type: Boolean,
default: false,
},
},
emits: [CLOSE_EVENT, SWITCH_EVENT],
setup(props, { emit }) {
const { t } = useLocaleInject();
let _keyDownHandler = null;
let _mouseWheelHandler = null;
let _dragHandler = null;
const loading = vue.ref(true);
const index = vue.ref(props.initialIndex);
const wrapper = vue.ref(null);
const img = vue.ref(null);
const mode = vue.ref(Mode.CONTAIN);
const transform = vue.ref({
scale: 1,
deg: 0,
offsetX: 0,
offsetY: 0,
enableTransition: false,
});
const isSingle = vue.computed(() => {
const { urlList } = props;
return urlList.length <= 1;
});
const isFirst = vue.computed(() => {
return index.value === 0;
});
const isLast = vue.computed(() => {
return index.value === props.urlList.length - 1;
});
const currentImg = vue.computed(() => {
return props.urlList[index.value];
});
const imgStyle = vue.computed(() => {
const { scale, deg, offsetX, offsetY, enableTransition } =
transform.value;
const style = {
transform: `scale(${scale}) rotate(${deg}deg)`,
transition: enableTransition ? "transform .3s" : "",
marginLeft: `${offsetX}px`,
marginTop: `${offsetY}px`,
};
if (mode.value.name === Mode.CONTAIN.name) {
style.maxWidth = style.maxHeight = "100%";
}
return style;
});
function hide() {
deviceSupportUninstall();
emit(CLOSE_EVENT);
}
function deviceSupportInstall() {
_keyDownHandler = rafThrottle((e) => {
switch (e.code) {
case EVENT_CODE.esc:
hide();
break;
case EVENT_CODE.space:
toggleMode();
break;
case EVENT_CODE.left:
prev();
break;
case EVENT_CODE.up:
handleActions("zoomIn");
break;
case EVENT_CODE.right:
next();
break;
case EVENT_CODE.down:
handleActions("zoomOut");
break;
}
});
_mouseWheelHandler = rafThrottle((e) => {
const delta = e.wheelDelta ? e.wheelDelta : -e.detail;
if (delta > 0) {
handleActions("zoomIn", {
zoomRate: 0.015,
enableTransition: false,
});
} else {
handleActions("zoomOut", {
zoomRate: 0.015,
enableTransition: false,
});
}
});
on(document, "keydown", _keyDownHandler);
on(document, mousewheelEventName, _mouseWheelHandler);
}
function deviceSupportUninstall() {
off(document, "keydown", _keyDownHandler);
off(document, mousewheelEventName, _mouseWheelHandler);
_keyDownHandler = null;
_mouseWheelHandler = null;
}
function handleImgLoad() {
loading.value = false;
}
function handleImgError(e) {
loading.value = false;
e.target.alt = t("el.image.error");
}
function handleMouseDown(e) {
if (loading.value || e.button !== 0) return;
const { offsetX, offsetY } = transform.value;
const startX = e.pageX;
const startY = e.pageY;
const divLeft = wrapper.value.clientLeft;
const divRight = wrapper.value.clientLeft + wrapper.value.clientWidth;
const divTop = wrapper.value.clientTop;
const divBottom = wrapper.value.clientTop + wrapper.value.clientHeight;
_dragHandler = rafThrottle((ev) => {
transform.value = __spreadProps$j(
__spreadValues$q({}, transform.value),
{
offsetX: offsetX + ev.pageX - startX,
offsetY: offsetY + ev.pageY - startY,
}
);
});
on(document, "mousemove", _dragHandler);
on(document, "mouseup", (e2) => {
const mouseX = e2.pageX;
const mouseY = e2.pageY;
if (
mouseX < divLeft ||
mouseX > divRight ||
mouseY < divTop ||
mouseY > divBottom
) {
reset();
}
off(document, "mousemove", _dragHandler);
});
e.preventDefault();
}
function reset() {
transform.value = {
scale: 1,
deg: 0,
offsetX: 0,
offsetY: 0,
enableTransition: false,
};
}
function toggleMode() {
if (loading.value) return;
const modeNames = Object.keys(Mode);
const modeValues = Object.values(Mode);
const currentMode = mode.value.name;
const index2 = modeValues.findIndex((i) => i.name === currentMode);
const nextIndex = (index2 + 1) % modeNames.length;
mode.value = Mode[modeNames[nextIndex]];
reset();
}
function prev() {
if (isFirst.value && !props.infinite) return;
const len = props.urlList.length;
index.value = (index.value - 1 + len) % len;
}
function next() {
if (isLast.value && !props.infinite) return;
const len = props.urlList.length;
index.value = (index.value + 1) % len;
}
function handleActions(action, options = {}) {
if (loading.value) return;
const { zoomRate, rotateDeg, enableTransition } = __spreadValues$q(
{
zoomRate: 0.2,
rotateDeg: 90,
enableTransition: true,
},
options
);
switch (action) {
case "zoomOut":
if (transform.value.scale > 0.2) {
transform.value.scale = parseFloat(
(transform.value.scale - zoomRate).toFixed(3)
);
}
break;
case "zoomIn":
transform.value.scale = parseFloat(
(transform.value.scale + zoomRate).toFixed(3)
);
break;
case "clocelise":
transform.value.deg += rotateDeg;
break;
case "anticlocelise":
transform.value.deg -= rotateDeg;
break;
}
transform.value.enableTransition = enableTransition;
}
vue.watch(currentImg, () => {
vue.nextTick(() => {
const $img = img.value;
if (!$img.complete) {
loading.value = true;
}
});
});
vue.watch(index, (val) => {
reset();
emit(SWITCH_EVENT, val);
});
vue.onMounted(() => {
var _a, _b;
deviceSupportInstall();
(_b = (_a = wrapper.value) == null ? void 0 : _a.focus) == null
? void 0
: _b.call(_a);
});
return {
index,
wrapper,
img,
isSingle,
isFirst,
isLast,
currentImg,
imgStyle,
mode,
handleActions,
prev,
next,
hide,
toggleMode,
handleImgLoad,
handleImgError,
handleMouseDown,
};
},
});
const _hoisted_1$E = /* @__PURE__ */ vue.createElementVNode(
"i",
{ class: "el-icon-close" },
null,
-1
);
const _hoisted_2$w = [_hoisted_1$E];
const _hoisted_3$u = /* @__PURE__ */ vue.createElementVNode(
"i",
{ class: "el-icon-arrow-left" },
null,
-1
);
const _hoisted_4$f = [_hoisted_3$u];
const _hoisted_5$b = /* @__PURE__ */ vue.createElementVNode(
"i",
{ class: "el-icon-arrow-right" },
null,
-1
);
const _hoisted_6$a = [_hoisted_5$b];
const _hoisted_7$5 = {
class: "el-image-viewer__btn el-image-viewer__actions",
};
const _hoisted_8$4 = { class: "el-image-viewer__actions__inner" };
const _hoisted_9$4 = /* @__PURE__ */ vue.createElementVNode(
"i",
{ class: "el-image-viewer__actions__divider" },
null,
-1
);
const _hoisted_10$4 = /* @__PURE__ */ vue.createElementVNode(
"i",
{ class: "el-image-viewer__actions__divider" },
null,
-1
);
const _hoisted_11$2 = { class: "el-image-viewer__canvas" };
const _hoisted_12$2 = ["src"];
function render$R(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createBlock(
vue.Transition,
{ name: "viewer-fade" },
{
default: vue.withCtx(() => [
vue.createElementVNode(
"div",
{
ref: "wrapper",
tabindex: -1,
class: "el-image-viewer__wrapper",
style: vue.normalizeStyle({ zIndex: _ctx.zIndex }),
},
[
vue.createElementVNode("div", {
class: "el-image-viewer__mask",
onClick:
_cache[0] ||
(_cache[0] = vue.withModifiers(
($event) => _ctx.hideOnClickModal && _ctx.hide(),
["self"]
)),
}),
vue.createCommentVNode(" CLOSE "),
vue.createElementVNode(
"span",
{
class: "el-image-viewer__btn el-image-viewer__close",
onClick:
_cache[1] ||
(_cache[1] = (...args) =>
_ctx.hide && _ctx.hide(...args)),
},
_hoisted_2$w
),
vue.createCommentVNode(" ARROW "),
!_ctx.isSingle
? (vue.openBlock(),
vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
vue.createElementVNode(
"span",
{
class: vue.normalizeClass([
"el-image-viewer__btn el-image-viewer__prev",
{ "is-disabled": !_ctx.infinite && _ctx.isFirst },
]),
onClick:
_cache[2] ||
(_cache[2] = (...args) =>
_ctx.prev && _ctx.prev(...args)),
},
_hoisted_4$f,
2
),
vue.createElementVNode(
"span",
{
class: vue.normalizeClass([
"el-image-viewer__btn el-image-viewer__next",
{ "is-disabled": !_ctx.infinite && _ctx.isLast },
]),
onClick:
_cache[3] ||
(_cache[3] = (...args) =>
_ctx.next && _ctx.next(...args)),
},
_hoisted_6$a,
2
),
],
64
))
: vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" ACTIONS "),
vue.createElementVNode("div", _hoisted_7$5, [
vue.createElementVNode("div", _hoisted_8$4, [
vue.createElementVNode("i", {
class: "el-icon-zoom-out",
onClick:
_cache[4] ||
(_cache[4] = ($event) => _ctx.handleActions("zoomOut")),
}),
vue.createElementVNode("i", {
class: "el-icon-zoom-in",
onClick:
_cache[5] ||
(_cache[5] = ($event) => _ctx.handleActions("zoomIn")),
}),
_hoisted_9$4,
vue.createElementVNode(
"i",
{
class: vue.normalizeClass(_ctx.mode.icon),
onClick:
_cache[6] ||
(_cache[6] = (...args) =>
_ctx.toggleMode && _ctx.toggleMode(...args)),
},
null,
2
),
_hoisted_10$4,
vue.createElementVNode("i", {
class: "el-icon-refresh-left",
onClick:
_cache[7] ||
(_cache[7] = ($event) =>
_ctx.handleActions("anticlocelise")),
}),
vue.createElementVNode("i", {
class: "el-icon-refresh-right",
onClick:
_cache[8] ||
(_cache[8] = ($event) =>
_ctx.handleActions("clocelise")),
}),
]),
]),
vue.createCommentVNode(" CANVAS "),
vue.createElementVNode("div", _hoisted_11$2, [
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.urlList, (url, i) => {
return vue.withDirectives(
(vue.openBlock(),
vue.createElementBlock(
"img",
{
ref: "img",
key: url,
src: url,
style: vue.normalizeStyle(_ctx.imgStyle),
class: "el-image-viewer__img",
onLoad:
_cache[9] ||
(_cache[9] = (...args) =>
_ctx.handleImgLoad &&
_ctx.handleImgLoad(...args)),
onError:
_cache[10] ||
(_cache[10] = (...args) =>
_ctx.handleImgError &&
_ctx.handleImgError(...args)),
onMousedown:
_cache[11] ||
(_cache[11] = (...args) =>
_ctx.handleMouseDown &&
_ctx.handleMouseDown(...args)),
},
null,
44,
_hoisted_12$2
)),
[[vue.vShow, i === _ctx.index]]
);
}),
128
)),
]),
vue.renderSlot(_ctx.$slots, "default"),
],
4
),
]),
_: 3,
}
)
);
}
script$Z.render = render$R;
script$Z.__file = "packages/components/image-viewer/src/index.vue";
script$Z.install = (app) => {
app.component(script$Z.name, script$Z);
};
const _ImageViewer = script$Z;
const ElImageViewer = _ImageViewer;
const isSupportObjectFit = () =>
document.documentElement.style.objectFit !== void 0;
const isHtmlEle = (e) => e && e.nodeType === 1;
const ObjectFit = {
NONE: "none",
CONTAIN: "contain",
COVER: "cover",
FILL: "fill",
SCALE_DOWN: "scale-down",
};
let prevOverflow = "";
var script$Y = vue.defineComponent({
name: "ElImage",
components: {
ImageViewer: _ImageViewer,
},
inheritAttrs: false,
props: {
appendToBody: {
type: Boolean,
default: false,
},
hideOnClickModal: {
type: Boolean,
default: false,
},
src: {
type: String,
default: "",
},
fit: {
type: String,
default: "",
},
lazy: {
type: Boolean,
default: false,
},
scrollContainer: {
type: [String, Object],
default: null,
},
previewSrcList: {
type: Array,
default: () => [],
},
zIndex: {
type: Number,
default: 2e3,
},
},
emits: ["error", "switch", "close"],
setup(props, { emit }) {
const { t } = useLocaleInject();
const attrs = useAttrs();
const hasLoadError = vue.ref(false);
const loading = vue.ref(true);
const imgWidth = vue.ref(0);
const imgHeight = vue.ref(0);
const showViewer = vue.ref(false);
const container = vue.ref(null);
let _scrollContainer = null;
let _lazyLoadHandler = null;
const imageStyle = vue.computed(() => {
const { fit } = props;
if (!isServer && fit) {
return isSupportObjectFit()
? { "object-fit": fit }
: getImageStyle(fit);
}
return {};
});
const alignCenter = vue.computed(() => {
const { fit } = props;
return !isServer && !isSupportObjectFit() && fit !== ObjectFit.FILL;
});
const preview = vue.computed(() => {
const { previewSrcList } = props;
return Array.isArray(previewSrcList) && previewSrcList.length > 0;
});
const imageIndex = vue.computed(() => {
const { src, previewSrcList } = props;
let previewIndex = 0;
const srcIndex = previewSrcList.indexOf(src);
if (srcIndex >= 0) {
previewIndex = srcIndex;
}
return previewIndex;
});
function getImageStyle(fit) {
const imageWidth = imgWidth.value;
const imageHeight = imgHeight.value;
if (!container.value) return {};
const { clientWidth: containerWidth, clientHeight: containerHeight } =
container.value;
if (!imageWidth || !imageHeight || !containerWidth || !containerHeight)
return {};
const imageAspectRatio = imageWidth / imageHeight;
const containerAspectRatio = containerWidth / containerHeight;
if (fit === ObjectFit.SCALE_DOWN) {
const isSmaller =
imageWidth < containerWidth && imageHeight < containerHeight;
fit = isSmaller ? ObjectFit.NONE : ObjectFit.CONTAIN;
}
switch (fit) {
case ObjectFit.NONE:
return { width: "auto", height: "auto" };
case ObjectFit.CONTAIN:
return imageAspectRatio < containerAspectRatio
? { width: "auto" }
: { height: "auto" };
case ObjectFit.COVER:
return imageAspectRatio < containerAspectRatio
? { height: "auto" }
: { width: "auto" };
default:
return {};
}
}
const loadImage = () => {
if (isServer) return;
const attributes = attrs.value;
loading.value = true;
hasLoadError.value = false;
const img = new Image();
img.onload = (e) => handleLoad(e, img);
img.onerror = handleError;
Object.keys(attributes).forEach((key) => {
if (key.toLowerCase() === "onload") return;
const value = attributes[key];
img.setAttribute(key, value);
});
img.src = props.src;
};
function handleLoad(e, img) {
imgWidth.value = img.width;
imgHeight.value = img.height;
loading.value = false;
hasLoadError.value = false;
}
function handleError(e) {
loading.value = false;
hasLoadError.value = true;
emit("error", e);
}
function handleLazyLoad() {
if (isInContainer(container.value, _scrollContainer)) {
loadImage();
removeLazyLoadListener();
}
}
function addLazyLoadListener() {
if (isServer) return;
const { scrollContainer } = props;
if (isHtmlEle(scrollContainer)) {
_scrollContainer = scrollContainer;
} else if (isString$1(scrollContainer) && scrollContainer !== "") {
_scrollContainer = document.querySelector(scrollContainer);
} else {
_scrollContainer = getScrollContainer(container.value);
}
if (_scrollContainer) {
_lazyLoadHandler = throttle_1(handleLazyLoad, 200);
on(_scrollContainer, "scroll", _lazyLoadHandler);
setTimeout(() => handleLazyLoad(), 100);
}
}
function removeLazyLoadListener() {
if (isServer || !_scrollContainer || !_lazyLoadHandler) return;
off(_scrollContainer, "scroll", _lazyLoadHandler);
_scrollContainer = null;
_lazyLoadHandler = null;
}
function _wheelHandler(e) {
if (e.ctrlKey) {
if (e.deltaY < 0) {
e.preventDefault();
return false;
}
if (e.deltaY > 0) {
e.preventDefault();
return false;
}
}
}
function clickHandler() {
if (!preview.value) {
return;
}
document.body.addEventListener("wheel", _wheelHandler, {
passive: false,
});
prevOverflow = document.body.style.overflow;
document.body.style.overflow = "hidden";
showViewer.value = true;
}
function closeViewer() {
document.body.removeEventListener("wheel", _wheelHandler, false);
document.body.style.overflow = prevOverflow;
showViewer.value = false;
emit("close");
}
function switchViewer(val) {
emit("switch", val);
}
vue.watch(
() => props.src,
() => {
if (props.lazy) {
loading.value = true;
hasLoadError.value = false;
removeLazyLoadListener();
vue.nextTick(addLazyLoadListener);
} else {
loadImage();
}
}
);
vue.onMounted(() => {
if (props.lazy) {
vue.nextTick(addLazyLoadListener);
} else {
loadImage();
}
});
vue.onBeforeUnmount(() => {
props.lazy && removeLazyLoadListener();
});
return {
attrs,
loading,
hasLoadError,
showViewer,
imgWidth,
imgHeight,
imageStyle,
alignCenter,
preview,
imageIndex,
clickHandler,
closeViewer,
switchViewer,
container,
handleError,
t,
};
},
});
const _hoisted_1$D = /* @__PURE__ */ vue.createElementVNode(
"div",
{ class: "el-image__placeholder" },
null,
-1
);
const _hoisted_2$v = { class: "el-image__error" };
const _hoisted_3$t = ["src"];
const _hoisted_4$e = { key: 0 };
function render$Q(_ctx, _cache, $props, $setup, $data, $options) {
const _component_image_viewer = vue.resolveComponent("image-viewer");
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
ref: "container",
class: vue.normalizeClass(["el-image", _ctx.$attrs.class]),
style: vue.normalizeStyle(_ctx.$attrs.style),
},
[
_ctx.loading
? vue.renderSlot(_ctx.$slots, "placeholder", { key: 0 }, () => [
_hoisted_1$D,
])
: _ctx.hasLoadError
? vue.renderSlot(_ctx.$slots, "error", { key: 1 }, () => [
vue.createElementVNode(
"div",
_hoisted_2$v,
vue.toDisplayString(_ctx.t("el.image.error")),
1
),
])
: (vue.openBlock(),
vue.createElementBlock(
"img",
vue.mergeProps(
{
key: 2,
class: "el-image__inner",
},
_ctx.attrs,
{
src: _ctx.src,
style: _ctx.imageStyle,
class: {
"el-image__inner--center": _ctx.alignCenter,
"el-image__preview": _ctx.preview,
},
onClick:
_cache[0] ||
(_cache[0] = (...args) =>
_ctx.clickHandler && _ctx.clickHandler(...args)),
}
),
null,
16,
_hoisted_3$t
)),
(vue.openBlock(),
vue.createBlock(
vue.Teleport,
{
to: "body",
disabled: !_ctx.appendToBody,
},
[
_ctx.preview
? (vue.openBlock(),
vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
_ctx.showViewer
? (vue.openBlock(),
vue.createBlock(
_component_image_viewer,
{
key: 0,
"z-index": _ctx.zIndex,
"initial-index": _ctx.imageIndex,
"url-list": _ctx.previewSrcList,
"hide-on-click-modal": _ctx.hideOnClickModal,
onClose: _ctx.closeViewer,
onSwitch: _ctx.switchViewer,
},
{
default: vue.withCtx(() => [
_ctx.$slots.viewer
? (vue.openBlock(),
vue.createElementBlock(
"div",
_hoisted_4$e,
[vue.renderSlot(_ctx.$slots, "viewer")]
))
: vue.createCommentVNode("v-if", true),
]),
_: 3,
},
8,
[
"z-index",
"initial-index",
"url-list",
"hide-on-click-modal",
"onClose",
"onSwitch",
]
))
: vue.createCommentVNode("v-if", true),
],
2112
))
: vue.createCommentVNode("v-if", true),
],
8,
["disabled"]
)),
],
6
)
);
}
script$Y.render = render$Q;
script$Y.__file = "packages/components/image/src/index.vue";
script$Y.install = (app) => {
app.component(script$Y.name, script$Y);
};
const _Image = script$Y;
const ElImage = _Image;
var script$X = vue.defineComponent({
name: "ElInputNumber",
components: {
ElInput: _Input,
},
directives: {
RepeatClick,
},
props: {
step: {
type: Number,
default: 1,
},
stepStrictly: {
type: Boolean,
default: false,
},
max: {
type: Number,
default: Infinity,
},
min: {
type: Number,
default: -Infinity,
},
modelValue: {
type: Number,
},
disabled: {
type: Boolean,
default: false,
},
size: {
type: String,
validator: isValidComponentSize,
},
controls: {
type: Boolean,
default: true,
},
controlsPosition: {
type: String,
default: "",
},
name: String,
label: String,
placeholder: String,
precision: {
type: Number,
validator: (val) => val >= 0 && val === parseInt(`${val}`, 10),
},
},
emits: ["update:modelValue", "change", "input", "blur", "focus"],
setup(props, { emit }) {
const ELEMENT = useGlobalConfig();
const elForm = vue.inject(elFormKey, {});
const elFormItem = vue.inject(elFormItemKey, {});
const input = vue.ref(null);
const data = vue.reactive({
currentValue: props.modelValue,
userInput: null,
});
const minDisabled = vue.computed(() => {
return _decrease(props.modelValue) < props.min;
});
const maxDisabled = vue.computed(() => {
return _increase(props.modelValue) > props.max;
});
const numPrecision = vue.computed(() => {
const stepPrecision = getPrecision(props.step);
if (props.precision !== void 0) {
if (stepPrecision > props.precision);
return props.precision;
} else {
return Math.max(getPrecision(props.modelValue), stepPrecision);
}
});
const controlsAtRight = vue.computed(() => {
return props.controls && props.controlsPosition === "right";
});
const inputNumberSize = vue.computed(() => {
return props.size || elFormItem.size || ELEMENT.size;
});
const inputNumberDisabled = vue.computed(() => {
return props.disabled || elForm.disabled;
});
const displayValue = vue.computed(() => {
if (data.userInput !== null) {
return data.userInput;
}
let currentValue = data.currentValue;
if (typeof currentValue === "number") {
if (props.precision !== void 0) {
currentValue = currentValue.toFixed(props.precision);
}
}
return currentValue;
});
const toPrecision = (num, pre) => {
if (pre === void 0) pre = numPrecision.value;
return parseFloat(
`${Math.round(num * Math.pow(10, pre)) / Math.pow(10, pre)}`
);
};
const getPrecision = (value) => {
if (value === void 0) return 0;
const valueString = value.toString();
const dotPosition = valueString.indexOf(".");
let precision = 0;
if (dotPosition !== -1) {
precision = valueString.length - dotPosition - 1;
}
return precision;
};
const _increase = (val) => {
if (typeof val !== "number" && val !== void 0) return data.currentValue;
const precisionFactor = Math.pow(10, numPrecision.value);
return toPrecision(
(precisionFactor * val + precisionFactor * props.step) /
precisionFactor
);
};
const _decrease = (val) => {
if (typeof val !== "number" && val !== void 0) return data.currentValue;
const precisionFactor = Math.pow(10, numPrecision.value);
return toPrecision(
(precisionFactor * val - precisionFactor * props.step) /
precisionFactor
);
};
const increase = () => {
if (inputNumberDisabled.value || maxDisabled.value) return;
const value = props.modelValue || 0;
const newVal = _increase(value);
setCurrentValue(newVal);
};
const decrease = () => {
if (inputNumberDisabled.value || minDisabled.value) return;
const value = props.modelValue || 0;
const newVal = _decrease(value);
setCurrentValue(newVal);
};
const setCurrentValue = (newVal) => {
const oldVal = data.currentValue;
if (typeof newVal === "number" && props.precision !== void 0) {
newVal = toPrecision(newVal, props.precision);
}
if (newVal !== void 0 && newVal >= props.max) newVal = props.max;
if (newVal !== void 0 && newVal <= props.min) newVal = props.min;
if (oldVal === newVal) return;
data.userInput = null;
emit("update:modelValue", newVal);
emit("input", newVal);
emit("change", newVal, oldVal);
data.currentValue = newVal;
};
const handleInput = (value) => {
return (data.userInput = value);
};
const handleInputChange = (value) => {
const newVal = value === "" ? void 0 : Number(value);
if (!isNaN(newVal) || value === "") {
setCurrentValue(newVal);
}
data.userInput = null;
};
const focus = () => {
var _a, _b;
(_b = (_a = input.value).focus) == null ? void 0 : _b.call(_a);
};
const blur = () => {
var _a, _b;
(_b = (_a = input.value).blur) == null ? void 0 : _b.call(_a);
};
vue.watch(
() => props.modelValue,
(value) => {
let newVal = value === void 0 ? value : Number(value);
if (newVal !== void 0) {
if (isNaN(newVal)) return;
if (props.stepStrictly) {
const stepPrecision = getPrecision(props.step);
const precisionFactor = Math.pow(10, stepPrecision);
newVal =
(Math.round(newVal / props.step) *
precisionFactor *
props.step) /
precisionFactor;
}
if (props.precision !== void 0) {
newVal = toPrecision(newVal, props.precision);
}
}
if (newVal !== void 0 && newVal >= props.max) {
newVal = props.max;
emit("update:modelValue", newVal);
}
if (newVal !== void 0 && newVal <= props.min) {
newVal = props.min;
emit("update:modelValue", newVal);
}
data.currentValue = newVal;
data.userInput = null;
},
{ immediate: true }
);
vue.onMounted(() => {
const innerInput = input.value.input;
innerInput.setAttribute("role", "spinbutton");
innerInput.setAttribute("aria-valuemax", props.max);
innerInput.setAttribute("aria-valuemin", props.min);
innerInput.setAttribute("aria-valuenow", data.currentValue);
innerInput.setAttribute("aria-disabled", inputNumberDisabled.value);
if (
toRawType(props.modelValue) !== "Number" &&
props.modelValue !== void 0
) {
emit("update:modelValue", void 0);
}
});
vue.onUpdated(() => {
const innerInput = input.value.input;
innerInput.setAttribute("aria-valuenow", data.currentValue);
});
return {
input,
displayValue,
handleInput,
handleInputChange,
controlsAtRight,
decrease,
increase,
inputNumberSize,
inputNumberDisabled,
maxDisabled,
minDisabled,
focus,
blur,
};
},
});
function render$P(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_input = vue.resolveComponent("el-input");
const _directive_repeat_click = vue.resolveDirective("repeat-click");
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
class: vue.normalizeClass([
"el-input-number",
_ctx.inputNumberSize
? "el-input-number--" + _ctx.inputNumberSize
: "",
{ "is-disabled": _ctx.inputNumberDisabled },
{ "is-without-controls": !_ctx.controls },
{ "is-controls-right": _ctx.controlsAtRight },
]),
onDragstart:
_cache[4] || (_cache[4] = vue.withModifiers(() => {}, ["prevent"])),
},
[
_ctx.controls
? vue.withDirectives(
(vue.openBlock(),
vue.createElementBlock(
"span",
{
key: 0,
class: vue.normalizeClass([
"el-input-number__decrease",
{ "is-disabled": _ctx.minDisabled },
]),
role: "button",
onKeydown:
_cache[0] ||
(_cache[0] = vue.withKeys(
(...args) => _ctx.decrease && _ctx.decrease(...args),
["enter"]
)),
},
[
vue.createElementVNode(
"i",
{
class: vue.normalizeClass(
`el-icon-${
_ctx.controlsAtRight ? "arrow-down" : "minus"
}`
),
},
null,
2
),
],
34
)),
[[_directive_repeat_click, _ctx.decrease]]
)
: vue.createCommentVNode("v-if", true),
_ctx.controls
? vue.withDirectives(
(vue.openBlock(),
vue.createElementBlock(
"span",
{
key: 1,
class: vue.normalizeClass([
"el-input-number__increase",
{ "is-disabled": _ctx.maxDisabled },
]),
role: "button",
onKeydown:
_cache[1] ||
(_cache[1] = vue.withKeys(
(...args) => _ctx.increase && _ctx.increase(...args),
["enter"]
)),
},
[
vue.createElementVNode(
"i",
{
class: vue.normalizeClass(
`el-icon-${
_ctx.controlsAtRight ? "arrow-up" : "plus"
}`
),
},
null,
2
),
],
34
)),
[[_directive_repeat_click, _ctx.increase]]
)
: vue.createCommentVNode("v-if", true),
vue.createVNode(
_component_el_input,
{
ref: "input",
"model-value": _ctx.displayValue,
placeholder: _ctx.placeholder,
disabled: _ctx.inputNumberDisabled,
size: _ctx.inputNumberSize,
max: _ctx.max,
min: _ctx.min,
name: _ctx.name,
label: _ctx.label,
onKeydown: [
vue.withKeys(vue.withModifiers(_ctx.increase, ["prevent"]), [
"up",
]),
vue.withKeys(vue.withModifiers(_ctx.decrease, ["prevent"]), [
"down",
]),
],
onBlur:
_cache[2] || (_cache[2] = (event) => _ctx.$emit("blur", event)),
onFocus:
_cache[3] ||
(_cache[3] = (event) => _ctx.$emit("focus", event)),
onInput: _ctx.handleInput,
onChange: _ctx.handleInputChange,
},
null,
8,
[
"model-value",
"placeholder",
"disabled",
"size",
"max",
"min",
"name",
"label",
"onKeydown",
"onInput",
"onChange",
]
),
],
34
)
);
}
script$X.render = render$P;
script$X.__file = "packages/components/input-number/src/index.vue";
script$X.install = (app) => {
app.component(script$X.name, script$X);
};
const _InputNumber = script$X;
const ElInputNumber = _InputNumber;
const linkProps = {
type: buildProp({
type: String,
values: ["primary", "success", "warning", "info", "danger", "default"],
default: "default",
}),
underline: {
type: Boolean,
default: true,
},
disabled: { type: Boolean, default: false },
href: { type: String, default: "" },
icon: { type: String, default: "" },
};
const linkEmits = {
click: (evt) => evt instanceof MouseEvent,
};
var script$W = vue.defineComponent({
name: "ElLink",
props: linkProps,
emits: linkEmits,
setup(props, { emit }) {
function handleClick(event) {
if (!props.disabled) emit("click", event);
}
return {
handleClick,
};
},
});
const _hoisted_1$C = ["href"];
const _hoisted_2$u = {
key: 1,
class: "el-link--inner",
};
function render$O(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"a",
{
class: vue.normalizeClass([
"el-link",
_ctx.type ? `el-link--${_ctx.type}` : "",
_ctx.disabled && "is-disabled",
_ctx.underline && !_ctx.disabled && "is-underline",
]),
href: _ctx.disabled || !_ctx.href ? void 0 : _ctx.href,
onClick:
_cache[0] ||
(_cache[0] = (...args) =>
_ctx.handleClick && _ctx.handleClick(...args)),
},
[
_ctx.icon
? (vue.openBlock(),
vue.createElementBlock(
"i",
{
key: 0,
class: vue.normalizeClass(_ctx.icon),
},
null,
2
))
: vue.createCommentVNode("v-if", true),
_ctx.$slots.default
? (vue.openBlock(),
vue.createElementBlock("span", _hoisted_2$u, [
vue.renderSlot(_ctx.$slots, "default"),
]))
: vue.createCommentVNode("v-if", true),
_ctx.$slots.icon
? vue.renderSlot(_ctx.$slots, "icon", { key: 2 })
: vue.createCommentVNode("v-if", true),
],
10,
_hoisted_1$C
)
);
}
script$W.render = render$O;
script$W.__file = "packages/components/link/src/link.vue";
const ElLink = withInstall(script$W);
class SubMenu {
constructor(parent, domNode) {
this.parent = parent;
this.domNode = domNode;
this.subIndex = 0;
this.subIndex = 0;
this.init();
}
init() {
this.subMenuItems = this.domNode.querySelectorAll("li");
this.addListeners();
}
gotoSubIndex(idx) {
if (idx === this.subMenuItems.length) {
idx = 0;
} else if (idx < 0) {
idx = this.subMenuItems.length - 1;
}
this.subMenuItems[idx].focus();
this.subIndex = idx;
}
addListeners() {
const parentNode = this.parent.domNode;
Array.prototype.forEach.call(this.subMenuItems, (el) => {
el.addEventListener("keydown", (event) => {
let prevDef = false;
switch (event.code) {
case EVENT_CODE.down: {
this.gotoSubIndex(this.subIndex + 1);
prevDef = true;
break;
}
case EVENT_CODE.up: {
this.gotoSubIndex(this.subIndex - 1);
prevDef = true;
break;
}
case EVENT_CODE.tab: {
triggerEvent(parentNode, "mouseleave");
break;
}
case EVENT_CODE.enter:
case EVENT_CODE.space: {
prevDef = true;
event.currentTarget.click();
break;
}
}
if (prevDef) {
event.preventDefault();
event.stopPropagation();
}
return false;
});
});
}
}
class MenuItem {
constructor(domNode) {
this.domNode = domNode;
this.submenu = null;
this.submenu = null;
this.init();
}
init() {
this.domNode.setAttribute("tabindex", "0");
const menuChild = this.domNode.querySelector(".el-menu");
if (menuChild) {
this.submenu = new SubMenu(this, menuChild);
}
this.addListeners();
}
addListeners() {
this.domNode.addEventListener("keydown", (event) => {
let prevDef = false;
switch (event.code) {
case EVENT_CODE.down: {
triggerEvent(event.currentTarget, "mouseenter");
this.submenu && this.submenu.gotoSubIndex(0);
prevDef = true;
break;
}
case EVENT_CODE.up: {
triggerEvent(event.currentTarget, "mouseenter");
this.submenu &&
this.submenu.gotoSubIndex(this.submenu.subMenuItems.length - 1);
prevDef = true;
break;
}
case EVENT_CODE.tab: {
triggerEvent(event.currentTarget, "mouseleave");
break;
}
case EVENT_CODE.enter:
case EVENT_CODE.space: {
prevDef = true;
event.currentTarget.click();
break;
}
}
if (prevDef) {
event.preventDefault();
}
});
}
}
class Menu$1 {
constructor(domNode) {
this.domNode = domNode;
this.init();
}
init() {
const menuChildren = this.domNode.childNodes;
Array.from(menuChildren, (child) => {
if (child.nodeType === 1) {
new MenuItem(child);
}
});
}
}
var script$V = vue.defineComponent({
name: "ElMenuCollapseTransition",
setup() {
return {
on: {
beforeEnter(el) {
el.style.opacity = "0.2";
},
enter(el, done) {
addClass(el, "el-opacity-transition");
el.style.opacity = "1";
done();
},
afterEnter(el) {
removeClass(el, "el-opacity-transition");
el.style.opacity = "";
},
beforeLeave(el) {
if (!el.dataset) {
el.dataset = {};
}
if (hasClass(el, "el-menu--collapse")) {
removeClass(el, "el-menu--collapse");
el.dataset.oldOverflow = el.style.overflow;
el.dataset.scrollWidth = el.clientWidth.toString();
addClass(el, "el-menu--collapse");
} else {
addClass(el, "el-menu--collapse");
el.dataset.oldOverflow = el.style.overflow;
el.dataset.scrollWidth = el.clientWidth.toString();
removeClass(el, "el-menu--collapse");
}
el.style.width = `${el.scrollWidth}px`;
el.style.overflow = "hidden";
},
leave(el) {
addClass(el, "horizontal-collapse-transition");
el.style.width = `${el.dataset.scrollWidth}px`;
},
},
};
},
});
function render$N(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createBlock(
vue.Transition,
vue.mergeProps({ mode: "out-in" }, vue.toHandlers(_ctx.on)),
{
default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
_: 3,
},
16
)
);
}
script$V.render = render$N;
script$V.__file = "packages/components/menu/src/menu-collapse-transition.vue";
function useMenu(instance, currentIndex) {
const rootMenu = vue.inject("rootMenu");
const indexPath = vue.computed(() => {
let parent = instance.parent;
const path = [currentIndex.value];
while (parent.type.name !== "ElMenu") {
if (parent.props.index) {
path.unshift(parent.props.index);
}
parent = parent.parent;
}
return path;
});
const parentMenu = vue.computed(() => {
let parent = instance.parent;
while (
parent &&
["ElMenu", "ElSubMenu"].indexOf(parent.type.name) === -1
) {
parent = parent.parent;
}
return parent;
});
const paddingStyle = vue.computed(() => {
let parent = instance.parent;
if (rootMenu.props.mode !== "vertical") return {};
let padding = 20;
if (rootMenu.props.collapse) {
padding = 20;
} else {
while (parent && parent.type.name !== "ElMenu") {
if (parent.type.name === "ElSubMenu") {
padding += 20;
}
parent = parent.parent;
}
}
return { paddingLeft: `${padding}px` };
});
return { parentMenu, paddingStyle, indexPath };
}
function useMenuColor(props) {
const menuBarColor = vue.computed(() => {
const color = props.backgroundColor;
if (!color) {
return "";
} else {
return mixColor(color);
}
});
function calcColorChannels(c) {
let rawColor = c.replace("#", "");
if (/^[0-9a-fA-F]{3}$/.test(rawColor)) {
const color = rawColor.split("");
for (let i = 2; i >= 0; i--) {
color.splice(i, 0, color[i]);
}
rawColor = color.join("");
}
if (/^[0-9a-fA-F]{6}$/.test(rawColor)) {
return {
red: parseInt(rawColor.slice(0, 2), 16),
green: parseInt(rawColor.slice(2, 4), 16),
blue: parseInt(rawColor.slice(4, 6), 16),
};
} else {
return {
red: 255,
green: 255,
blue: 255,
};
}
}
function mixColor(color, percent = 0.2) {
let { red, green, blue } = calcColorChannels(color);
if (percent > 0) {
red *= 1 - percent;
green *= 1 - percent;
blue *= 1 - percent;
} else {
red += (255 - red) * percent;
green += (255 - green) * percent;
blue += (255 - blue) * percent;
}
return `rgb(${Math.round(
red
)}, ${Math.round(green)}, ${Math.round(blue)})`;
}
return menuBarColor;
}
const useMenuCssVar = (props) => {
return vue.computed(() => {
return {
"--el-menu-text-color": props.textColor || "",
"--el-menu-hover-text-color": props.textColor || "",
"--el-menu-background-color": props.backgroundColor || "",
"--el-menu-hover-background-color": useMenuColor(props).value || "",
"--el-menu-active-color": props.activeTextColor || "",
};
});
};
var script$U = vue.defineComponent({
name: "ElSubMenu",
props: {
index: {
type: String,
required: true,
},
showTimeout: {
type: Number,
default: 300,
},
hideTimeout: {
type: Number,
default: 300,
},
popperClass: String,
disabled: Boolean,
popperAppendToBody: {
type: Boolean,
default: void 0,
},
},
setup(props) {
const data = vue.reactive({
popperJS: null,
timeout: null,
items: {},
submenus: {},
currentPlacement: "",
mouseInChild: false,
opened: false,
});
const verticalTitleRef = vue.ref(null);
const popperVnode = vue.ref(null);
const instance = vue.getCurrentInstance();
const { paddingStyle, indexPath, parentMenu } = useMenu(
instance,
vue.computed(() => props.index)
);
const {
openedMenus,
isMenuPopup,
methods: rootMethods,
props: rootProps,
methods: { closeMenu },
} = vue.inject("rootMenu");
const {
addSubMenu: parentAddSubMenu,
removeSubMenu: parentRemoveSubMenu,
handleMouseleave: parentHandleMouseleave,
} = vue.inject(`subMenu:${parentMenu.value.uid}`);
const submenuTitleIcon = vue.computed(() => {
return (mode.value === "horizontal" && isFirstLevel.value) ||
(mode.value === "vertical" && !rootProps.collapse)
? "el-icon-arrow-down"
: "el-icon-arrow-right";
});
const isFirstLevel = vue.computed(() => {
let isFirstLevel2 = true;
let parent = instance.parent;
while (parent && parent.type.name !== "ElMenu") {
if (["ElSubMenu", "ElMenuItemGroup"].includes(parent.type.name)) {
isFirstLevel2 = false;
break;
} else {
parent = parent.parent;
}
}
return isFirstLevel2;
});
const appendToBody = vue.computed(() => {
return props.popperAppendToBody === void 0
? isFirstLevel.value
: Boolean(props.popperAppendToBody);
});
const menuTransitionName = vue.computed(() => {
return rootProps.collapse ? "el-zoom-in-left" : "el-zoom-in-top";
});
const fallbackPlacements = vue.computed(() =>
mode.value === "horizontal" && isFirstLevel.value
? [
"bottom-start",
"bottom-end",
"top-start",
"top-end",
"right-start",
"left-start",
]
: [
"right-start",
"left-start",
"bottom-start",
"bottom-end",
"top-start",
"top-end",
]
);
const opened = vue.computed(() => {
return openedMenus.value.includes(props.index);
});
const active = vue.computed(() => {
let isActive = false;
const submenus = data.submenus;
const items = data.items;
Object.keys(items).forEach((index) => {
if (items[index].active) {
isActive = true;
}
});
Object.keys(submenus).forEach((index) => {
if (submenus[index].active) {
isActive = true;
}
});
return isActive;
});
const backgroundColor = vue.computed(() => {
return rootProps.backgroundColor || "";
});
const activeTextColor = vue.computed(() => {
return rootProps.activeTextColor || "";
});
const textColor = vue.computed(() => {
return rootProps.textColor || "";
});
const mode = vue.computed(() => {
return rootProps.mode;
});
const titleStyle = vue.computed(() => {
if (mode.value !== "horizontal") {
return {
color: textColor.value,
};
}
return {
borderBottomColor: active.value
? rootProps.activeTextColor
? activeTextColor.value
: ""
: "transparent",
color: active.value ? activeTextColor.value : textColor.value,
};
});
const doDestroy = () => {
var _a;
(_a = popperVnode.value) == null ? void 0 : _a.doDestroy();
};
const handleCollapseToggle = (value) => {
if (value) {
updatePlacement();
} else {
doDestroy();
}
};
const addItem = (item) => {
data.items[item.index] = item;
};
const removeItem = (item) => {
delete data.items[item.index];
};
const addSubMenu = (item) => {
data.submenus[item.index] = item;
};
const removeSubMenu = (item) => {
delete data.submenus[item.index];
};
const handleClick = () => {
const disabled = props.disabled;
if (
(rootProps.menuTrigger === "hover" &&
rootProps.mode === "horizontal") ||
(rootProps.collapse && rootProps.mode === "vertical") ||
disabled
) {
return;
}
rootMethods.handleSubMenuClick({ index: props.index, indexPath });
};
const handleMouseenter = (event, showTimeout = props.showTimeout) => {
if (
!("ActiveXObject" in window) &&
event.type === "focus" &&
!event.relatedTarget
) {
return;
}
const disabled = props.disabled;
if (
(rootProps.menuTrigger === "click" &&
rootProps.mode === "horizontal") ||
(!rootProps.collapse && rootProps.mode === "vertical") ||
disabled
) {
return;
}
data.mouseInChild = true;
clearTimeout(data.timeout);
data.timeout = setTimeout(() => {
rootMethods.openMenu(props.index, indexPath);
}, showTimeout);
if (appendToBody.value) {
parentMenu.value.vnode.el.dispatchEvent(new MouseEvent("mouseenter"));
}
};
const handleMouseleave = (deepDispatch = false) => {
if (
(rootProps.menuTrigger === "click" &&
rootProps.mode === "horizontal") ||
(!rootProps.collapse && rootProps.mode === "vertical")
) {
return;
}
data.mouseInChild = false;
clearTimeout(data.timeout);
data.timeout = setTimeout(() => {
!data.mouseInChild && closeMenu(props.index);
}, props.hideTimeout);
if (appendToBody.value && deepDispatch) {
if (instance.parent.type.name === "ElSubMenu") {
parentHandleMouseleave(true);
}
}
};
const updatePlacement = () => {
data.currentPlacement =
mode.value === "horizontal" && isFirstLevel.value
? "bottom-start"
: "right-start";
};
vue.watch(
() => rootProps.collapse,
(value) => {
handleCollapseToggle(Boolean(value));
}
);
vue.provide(`subMenu:${instance.uid}`, {
addSubMenu,
removeSubMenu,
handleMouseleave,
});
vue.onMounted(() => {
rootMethods.addSubMenu({
index: props.index,
indexPath,
active,
});
parentAddSubMenu({
index: props.index,
indexPath,
active,
});
updatePlacement();
});
vue.onBeforeUnmount(() => {
parentRemoveSubMenu({
index: props.index,
indexPath,
active,
});
rootMethods.removeSubMenu({
index: props.index,
indexPath,
active,
});
});
return {
data,
props,
mode,
active,
isMenuPopup,
opened,
paddingStyle,
titleStyle,
backgroundColor,
rootProps,
menuTransitionName,
fallbackPlacements,
submenuTitleIcon,
appendToBody,
handleClick,
handleMouseenter,
handleMouseleave,
addItem,
removeItem,
addSubMenu,
removeSubMenu,
popperVnode,
verticalTitleRef,
};
},
render() {
var _a, _b;
const titleTag = [
(_b = (_a = this.$slots).title) == null ? void 0 : _b.call(_a),
vue.h(
"i",
{
class: ["el-sub-menu__icon-arrow", this.submenuTitleIcon],
},
null
),
];
const ulStyle = useMenuCssVar(this.rootProps);
const child = this.isMenuPopup
? vue.h(
_Popper,
{
ref: "popperVNode",
manualMode: true,
visible: this.opened,
"onUpdate:visible": (val) => (this.opened = val),
effect: "light",
pure: true,
offset: 6,
showArrow: false,
popperClass: this.popperClass,
placement: this.data.currentPlacement,
appendToBody: this.appendToBody,
fallbackPlacements: this.fallbackPlacements,
transition: this.menuTransitionName,
gpuAcceleration: false,
},
{
default: () => {
var _a2, _b2;
return vue.h(
"div",
{
ref: "menu",
class: [`el-menu--${this.mode}`, this.popperClass],
onMouseenter: ($event) =>
this.handleMouseenter($event, 100),
onMouseleave: () => this.handleMouseleave(true),
onFocus: ($event) => this.handleMouseenter($event, 100),
},
[
vue.h(
"ul",
{
class: [
"el-menu el-menu--popup",
`el-menu--popup-${this.data.currentPlacement}`,
],
style: ulStyle,
},
[
(_b2 = (_a2 = this.$slots).default) == null
? void 0
: _b2.call(_a2),
]
),
]
);
},
trigger: () =>
vue.h(
"div",
{
class: "el-sub-menu__title",
style: [
this.paddingStyle,
this.titleStyle,
{ backgroundColor: this.backgroundColor },
],
onClick: this.handleClick,
},
titleTag
),
}
)
: vue.h(vue.Fragment, {}, [
vue.h(
"div",
{
class: "el-sub-menu__title",
style: [
this.paddingStyle,
this.titleStyle,
{ backgroundColor: this.backgroundColor },
],
ref: "verticalTitleRef",
onClick: this.handleClick,
},
titleTag
),
vue.h(
_CollapseTransition,
{},
{
default: () => {
var _a2, _b2;
return vue.withDirectives(
vue.h(
"ul",
{
role: "menu",
class: "el-menu el-menu--inline",
style: ulStyle.value,
},
[
(_b2 = (_a2 = this.$slots).default) == null
? void 0
: _b2.call(_a2),
]
),
[[vue.vShow, this.opened]]
);
},
}
),
]);
return vue.h(
"li",
{
class: [
"el-sub-menu",
{
"is-active": this.active,
"is-opened": this.opened,
"is-disabled": this.disabled,
},
],
role: "menuitem",
ariaHaspopup: true,
ariaExpanded: this.opened,
onMouseenter: this.handleMouseenter,
onMouseleave: () => this.handleMouseleave(true),
onFocus: this.handleMouseenter,
},
[child]
);
},
});
script$U.__file = "packages/components/menu/src/submenu.vue";
var Menu = vue.defineComponent({
name: "ElMenu",
props: {
mode: {
type: String,
default: "vertical",
},
defaultActive: {
type: String,
default: "",
},
defaultOpeneds: Array,
uniqueOpened: Boolean,
router: Boolean,
menuTrigger: {
type: String,
default: "hover",
},
collapse: Boolean,
backgroundColor: { type: String },
textColor: { type: String },
activeTextColor: { type: String },
collapseTransition: {
type: Boolean,
default: true,
},
},
emits: ["close", "open", "select"],
setup(props, { emit, slots, expose }) {
const openedMenus = vue.ref(
props.defaultOpeneds && !props.collapse
? props.defaultOpeneds.slice(0)
: []
);
const instance = vue.getCurrentInstance();
const activeIndex = vue.ref(props.defaultActive);
const items = vue.ref({});
const submenus = vue.ref({});
const alteredCollapse = vue.ref(false);
const router = instance.appContext.config.globalProperties.$router;
const menu = vue.ref(null);
const isMenuPopup = vue.computed(() => {
return (
props.mode === "horizontal" ||
(props.mode === "vertical" && props.collapse)
);
});
const initializeMenu = () => {
const index = activeIndex.value;
const activeItem = items.value[index];
if (!activeItem || props.mode === "horizontal" || props.collapse)
return;
const indexPath = activeItem.indexPath;
indexPath.forEach((index2) => {
const submenu = submenus.value[index2];
submenu &&
openMenu(index2, submenu == null ? void 0 : submenu.indexPath);
});
};
const addSubMenu = (item) => {
submenus.value[item.index] = item;
};
const removeSubMenu = (item) => {
delete submenus.value[item.index];
};
const addMenuItem = (item) => {
items.value[item.index] = item;
};
const removeMenuItem = (item) => {
delete items.value[item.index];
};
const openMenu = (index, indexPath) => {
if (openedMenus.value.includes(index)) return;
if (props.uniqueOpened) {
openedMenus.value = openedMenus.value.filter((index2) => {
return (
(vue.isRef(indexPath) ? indexPath.value : indexPath).indexOf(
index2
) !== -1
);
});
}
openedMenus.value.push(index);
};
const closeMenu = (index) => {
const i = openedMenus.value.indexOf(index);
if (i !== -1) {
openedMenus.value.splice(i, 1);
}
};
const open = (index) => {
const { indexPath } = submenus.value[index.toString()];
indexPath.forEach((i) => openMenu(i, indexPath));
};
const close = (index) => {
closeMenu(index);
};
const handleSubMenuClick = (submenu) => {
const { index, indexPath } = submenu;
const isOpened = openedMenus.value.includes(index);
if (isOpened) {
closeMenu(index);
emit("close", index, indexPath.value);
} else {
openMenu(index, indexPath);
emit("open", index, indexPath.value);
}
};
const handleMenuItemClick = (item) => {
const { index, indexPath } = item;
const hasIndex = item.index !== null;
const emitParams = [index, indexPath.value, item];
if (props.mode === "horizontal" || props.collapse) {
openedMenus.value = [];
}
if (!hasIndex) {
return;
}
if (props.router && router) {
const route = item.route || item.index;
const routerResult = router.push(route).then((navigationResult) => {
if (!navigationResult) {
activeIndex.value = item.index;
}
return navigationResult;
});
emit("select", ...emitParams.concat(routerResult));
} else {
activeIndex.value = item.index;
emit("select", ...emitParams);
}
};
const updateActiveIndex = (val) => {
const itemsInData = items.value;
const item =
itemsInData[val] ||
itemsInData[activeIndex.value] ||
itemsInData[props.defaultActive];
if (item) {
activeIndex.value = item.index;
initializeMenu();
} else {
if (!alteredCollapse.value) {
activeIndex.value = null;
} else {
alteredCollapse.value = false;
}
}
};
const handleResize = () => instance.proxy.$forceUpdate();
vue.watch(
() => props.defaultActive,
(currentActive) => {
if (!items.value[currentActive]) {
activeIndex.value = "";
}
updateActiveIndex(currentActive);
}
);
vue.watch(items.value, () => {
initializeMenu();
});
vue.watch(
() => props.collapse,
(value, prev) => {
if (value !== prev) {
alteredCollapse.value = true;
}
if (value) openedMenus.value = [];
}
);
vue.provide("rootMenu", {
props,
openedMenus,
items,
submenus,
activeIndex,
isMenuPopup,
methods: {
addMenuItem,
removeMenuItem,
addSubMenu,
removeSubMenu,
openMenu,
closeMenu,
handleMenuItemClick,
handleSubMenuClick,
},
});
vue.provide(`subMenu:${instance.uid}`, {
addSubMenu,
removeSubMenu,
});
vue.onMounted(() => {
initializeMenu();
if (props.mode === "horizontal") {
new Menu$1(instance.vnode.el);
}
});
expose({
open,
close,
});
const flattedChildren = (children) => {
const temp = Array.isArray(children) ? children : [children];
const res = [];
temp.forEach((child) => {
if (Array.isArray(child.children)) {
res.push(...flattedChildren(child.children));
} else {
res.push(child);
}
});
return res;
};
const useVNodeResize = (vnode) =>
props.mode === "horizontal"
? vue.withDirectives(vnode, [[Resize, handleResize]])
: vnode;
return () => {
var _a, _b, _c, _d;
let slot =
(_b = (_a = slots.default) == null ? void 0 : _a.call(slots)) != null
? _b
: [];
const showMore = [];
if (props.mode === "horizontal" && menu.value) {
const items2 = Array.from(
(_d = (_c = menu.value) == null ? void 0 : _c.childNodes) != null
? _d
: []
).filter((item) => item.nodeName !== "#text" || item.nodeValue);
const originalSlot = flattedChildren(slot);
const moreItemWidth = 64;
const paddingLeft = parseInt(
getComputedStyle(menu.value).paddingLeft,
10
);
const paddingRight = parseInt(
getComputedStyle(menu.value).paddingRight,
10
);
const menuWidth = menu.value.clientWidth - paddingLeft - paddingRight;
let calcWidth = 0;
let sliceIndex = 0;
items2.forEach((item, index) => {
calcWidth += item.offsetWidth || 0;
if (calcWidth <= menuWidth - moreItemWidth) {
sliceIndex = index + 1;
}
});
const defaultSlot = originalSlot.slice(0, sliceIndex);
const moreSlot = originalSlot.slice(sliceIndex);
if (moreSlot == null ? void 0 : moreSlot.length) {
slot = defaultSlot;
showMore.push(
vue.h(
script$U,
{
index: "sub-menu-more",
class: "el-sub-menu__hide-arrow",
},
{
title: () =>
vue.h("i", {
class: ["el-icon-more", "el-sub-menu__icon-more"],
}),
default: () => moreSlot,
}
)
);
}
}
const ulStyle = useMenuCssVar(props);
const vnodeMenu = useVNodeResize(
vue.h(
"ul",
{
key: String(props.collapse),
role: "menubar",
ref: menu,
style: ulStyle.value,
class: {
"el-menu": true,
"el-menu--horizontal": props.mode === "horizontal",
"el-menu--collapse": props.collapse,
},
},
[...slot.map((vnode) => useVNodeResize(vnode)), ...showMore]
)
);
if (props.collapseTransition && props.mode === "vertical") {
return vue.h(script$V, () => vnodeMenu);
}
return vnodeMenu;
};
},
});
var __defProp$p = Object.defineProperty;
var __defProps$i = Object.defineProperties;
var __getOwnPropDescs$i = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$p = Object.getOwnPropertySymbols;
var __hasOwnProp$p = Object.prototype.hasOwnProperty;
var __propIsEnum$p = Object.prototype.propertyIsEnumerable;
var __defNormalProp$p = (obj, key, value) =>
key in obj
? __defProp$p(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$p = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$p.call(b, prop)) __defNormalProp$p(a, prop, b[prop]);
if (__getOwnPropSymbols$p)
for (var prop of __getOwnPropSymbols$p(b)) {
if (__propIsEnum$p.call(b, prop)) __defNormalProp$p(a, prop, b[prop]);
}
return a;
};
var __spreadProps$i = (a, b) => __defProps$i(a, __getOwnPropDescs$i(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
var Tooltip = vue.defineComponent({
name: "ElTooltip",
components: {
ElPopper: _Popper,
},
props: __spreadProps$i(__spreadValues$p({}, popperDefaultProps), {
manual: {
type: Boolean,
default: false,
},
modelValue: {
type: Boolean,
validator: (val) => {
return typeof val === "boolean";
},
default: void 0,
},
openDelay: {
type: Number,
default: 0,
},
visibleArrow: {
type: Boolean,
default: true,
},
tabindex: {
type: [String, Number],
default: "0",
},
}),
emits: [UPDATE_MODEL_EVENT],
setup(props, ctx) {
if (props.manual && typeof props.modelValue === "undefined") {
throwError(
"[ElTooltip]",
"You need to pass a v-model to el-tooltip when `manual` is true"
);
}
const popper = vue.ref(null);
const onUpdateVisible = (val) => {
ctx.emit(UPDATE_MODEL_EVENT, val);
};
const updatePopper = () => {
return popper.value.update();
};
return {
popper,
onUpdateVisible,
updatePopper,
};
},
render() {
const {
$slots,
content,
manual,
openDelay,
onUpdateVisible,
showAfter,
visibleArrow,
modelValue,
tabindex,
} = this;
const throwErrorTip = () => {
throwError("[ElTooltip]", "you need to provide a valid default slot.");
};
const popper = vue.h(
_Popper,
__spreadProps$i(
__spreadValues$p(
{},
Object.keys(popperDefaultProps).reduce((result, key) => {
return __spreadProps$i(__spreadValues$p({}, result), {
[key]: this[key],
});
}, {})
),
{
ref: "popper",
manualMode: manual,
showAfter: openDelay || showAfter,
showArrow: visibleArrow,
visible: modelValue,
"onUpdate:visible": onUpdateVisible,
}
),
{
default: () => ($slots.content ? $slots.content() : content),
trigger: () => {
if ($slots.default) {
const firstVnode = getFirstValidNode($slots.default(), 1);
if (!firstVnode) throwErrorTip();
return vue.cloneVNode(firstVnode, { tabindex }, true);
}
throwErrorTip();
},
}
);
return popper;
},
});
Tooltip.install = (app) => {
app.component(Tooltip.name, Tooltip);
};
const _Tooltip = Tooltip;
const ElTooltip = _Tooltip;
var script$T = vue.defineComponent({
name: "ElMenuItem",
components: { ElTooltip: _Tooltip },
props: {
index: {
type: String,
default: null,
},
route: [String, Object],
disabled: Boolean,
},
emits: ["click"],
setup(props, { emit, slots }) {
const instance = vue.getCurrentInstance();
const rootMenu = vue.inject("rootMenu");
const { parentMenu, paddingStyle, indexPath } = useMenu(
instance,
vue.computed(() => props.index)
);
const { addSubMenu, removeSubMenu } = vue.inject(
`subMenu:${parentMenu.value.uid}`
);
const active = vue.computed(() => {
return props.index === rootMenu.activeIndex.value;
});
const handleClick = () => {
if (!props.disabled) {
rootMenu.methods.handleMenuItemClick({
index: props.index,
indexPath,
route: props.route,
});
emit("click", {
index: props.index,
indexPath: indexPath.value,
});
}
};
vue.onMounted(() => {
addSubMenu({ index: props.index, indexPath, active });
rootMenu.methods.addMenuItem({ index: props.index, indexPath, active });
});
vue.onBeforeUnmount(() => {
removeSubMenu({ index: props.index, indexPath, active });
rootMenu.methods.removeMenuItem({
index: props.index,
indexPath,
active,
});
});
return {
Effect: exports.Effect,
parentMenu,
rootMenu,
slots,
paddingStyle,
active,
handleClick,
};
},
});
const _hoisted_1$B = {
style: {
position: "absolute",
left: "0",
top: "0",
height: "100%",
width: "100%",
display: "inline-block",
"box-sizing": "border-box",
padding: "0 20px",
},
};
function render$M(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_tooltip = vue.resolveComponent("el-tooltip");
return (
vue.openBlock(),
vue.createElementBlock(
"li",
{
class: vue.normalizeClass([
"el-menu-item",
{
"is-active": _ctx.active,
"is-disabled": _ctx.disabled,
},
]),
role: "menuitem",
tabindex: "-1",
style: vue.normalizeStyle(_ctx.paddingStyle),
onClick:
_cache[0] ||
(_cache[0] = (...args) =>
_ctx.handleClick && _ctx.handleClick(...args)),
},
[
_ctx.parentMenu.type.name === "ElMenu" &&
_ctx.rootMenu.props.collapse &&
_ctx.slots.title
? (vue.openBlock(),
vue.createBlock(
_component_el_tooltip,
{
key: 0,
effect: _ctx.Effect.DARK,
placement: "right",
},
{
content: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "title"),
]),
default: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_1$B, [
vue.renderSlot(_ctx.$slots, "default"),
]),
]),
_: 3,
},
8,
["effect"]
))
: (vue.openBlock(),
vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
vue.renderSlot(_ctx.$slots, "default"),
vue.renderSlot(_ctx.$slots, "title"),
],
64
)),
],
6
)
);
}
script$T.render = render$M;
script$T.__file = "packages/components/menu/src/menuItem.vue";
var script$S = vue.defineComponent({
name: "ElMenuItemGroup",
componentName: "ElMenuItemGroup",
props: {
title: {
type: String,
},
},
setup(props, { slots }) {
const data = vue.reactive({
paddingLeft: 20,
});
const instance = vue.getCurrentInstance();
const levelPadding = vue.computed(() => {
let padding = 20;
let parent = instance.parent;
if (rootProps.collapse) return 20;
while (parent && parent.type.name !== "ElMenu") {
if (parent.type.name === "ElSubMenu") {
padding += 20;
}
parent = parent.parent;
}
return padding;
});
const { props: rootProps } = vue.inject("rootMenu");
return {
data,
levelPadding,
props,
slots,
};
},
});
const _hoisted_1$A = { class: "el-menu-item-group" };
function render$L(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock("li", _hoisted_1$A, [
vue.createElementVNode(
"div",
{
class: "el-menu-item-group__title",
style: vue.normalizeStyle({
paddingLeft: _ctx.levelPadding + "px",
}),
},
[
!_ctx.slots.title
? (vue.openBlock(),
vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)],
2112
))
: vue.renderSlot(_ctx.$slots, "title", { key: 1 }),
],
4
),
vue.createElementVNode("ul", null, [
vue.renderSlot(_ctx.$slots, "default"),
]),
])
);
}
script$S.render = render$L;
script$S.__file = "packages/components/menu/src/menuItemGroup.vue";
const ElMenu = withInstall(Menu, {
MenuItem: script$T,
MenuItemGroup: script$S,
SubMenu: script$U,
});
const ElMenuItem = withNoopInstall(script$T);
const ElMenuItemGroup = withNoopInstall(script$S);
const ElSubMenu = withNoopInstall(script$U);
const pageHeaderProps = {
icon: {
type: String,
default: "el-icon-back",
},
title: String,
content: {
type: String,
default: "",
},
};
const pageHeaderEmits = {
back: () => true,
};
var script$R = vue.defineComponent({
name: "ElPageHeader",
props: pageHeaderProps,
emits: pageHeaderEmits,
setup(_, { emit }) {
const { t } = useLocaleInject();
function handleClick() {
emit("back");
}
return {
handleClick,
t,
};
},
});
const _hoisted_1$z = { class: "el-page-header" };
const _hoisted_2$t = {
key: 0,
class: "el-page-header__icon",
};
const _hoisted_3$s = { class: "el-page-header__title" };
const _hoisted_4$d = { class: "el-page-header__content" };
function render$K(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock("div", _hoisted_1$z, [
vue.createElementVNode(
"div",
{
class: "el-page-header__left",
onClick:
_cache[0] ||
(_cache[0] = (...args) =>
_ctx.handleClick && _ctx.handleClick(...args)),
},
[
_ctx.icon || _ctx.$slots.icon
? (vue.openBlock(),
vue.createElementBlock("div", _hoisted_2$t, [
vue.renderSlot(_ctx.$slots, "icon", {}, () => [
vue.createElementVNode(
"i",
{
class: vue.normalizeClass(_ctx.icon),
},
null,
2
),
]),
]))
: vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", _hoisted_3$s, [
vue.renderSlot(_ctx.$slots, "title", {}, () => [
vue.createTextVNode(
vue.toDisplayString(
_ctx.title || _ctx.t("el.pageHeader.title")
),
1
),
]),
]),
]
),
vue.createElementVNode("div", _hoisted_4$d, [
vue.renderSlot(_ctx.$slots, "content", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.content), 1),
]),
]),
])
);
}
script$R.render = render$K;
script$R.__file = "packages/components/page-header/src/page-header.vue";
const ElPageHeader = withInstall(script$R);
const paginationPrevProps = {
disabled: Boolean,
currentPage: {
type: Number,
default: 1,
},
prevText: {
type: String,
default: "",
},
};
var script$Q = vue.defineComponent({
name: "ElPaginationPrev",
props: paginationPrevProps,
emits: ["click"],
setup(props) {
const internalDisabled = vue.computed(
() => props.disabled || props.currentPage <= 1
);
return {
internalDisabled,
};
},
});
const _hoisted_1$y = ["disabled", "aria-disabled"];
const _hoisted_2$s = { key: 0 };
const _hoisted_3$r = {
key: 1,
class: "el-icon el-icon-arrow-left",
};
function render$J(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"button",
{
type: "button",
class: "btn-prev",
disabled: _ctx.internalDisabled,
"aria-disabled": _ctx.internalDisabled,
onClick:
_cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event)),
},
[
_ctx.prevText
? (vue.openBlock(),
vue.createElementBlock(
"span",
_hoisted_2$s,
vue.toDisplayString(_ctx.prevText),
1
))
: (vue.openBlock(), vue.createElementBlock("i", _hoisted_3$r)),
],
8,
_hoisted_1$y
)
);
}
script$Q.render = render$J;
script$Q.__file = "packages/components/pagination/src/components/prev.vue";
const paginationNextProps = {
disabled: Boolean,
currentPage: {
type: Number,
default: 1,
},
pageCount: {
type: Number,
default: 50,
},
nextText: {
type: String,
default: "",
},
};
var script$P = vue.defineComponent({
name: "ElPaginationNext",
props: paginationNextProps,
emits: ["click"],
setup(props) {
const internalDisabled = vue.computed(
() =>
props.disabled ||
props.currentPage === props.pageCount ||
props.pageCount === 0
);
return {
internalDisabled,
};
},
});
const _hoisted_1$x = ["disabled", "aria-disabled"];
const _hoisted_2$r = { key: 0 };
const _hoisted_3$q = {
key: 1,
class: "el-icon el-icon-arrow-right",
};
function render$I(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"button",
{
type: "button",
class: "btn-next",
disabled: _ctx.internalDisabled,
"aria-disabled": _ctx.internalDisabled,
onClick:
_cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event)),
},
[
_ctx.nextText
? (vue.openBlock(),
vue.createElementBlock(
"span",
_hoisted_2$r,
vue.toDisplayString(_ctx.nextText),
1
))
: (vue.openBlock(), vue.createElementBlock("i", _hoisted_3$q)),
],
8,
_hoisted_1$x
)
);
}
script$P.render = render$I;
script$P.__file = "packages/components/pagination/src/components/next.vue";
const selectGroupKey = "ElSelectGroup";
const selectKey = "ElSelect";
function useOption$1(props, states) {
const select = vue.inject(selectKey);
const selectGroup = vue.inject(selectGroupKey, { disabled: false });
const isObject = vue.computed(() => {
return (
Object.prototype.toString.call(props.value).toLowerCase() ===
"[object object]"
);
});
const itemSelected = vue.computed(() => {
if (!select.props.multiple) {
return isEqual(props.value, select.props.modelValue);
} else {
return contains(select.props.modelValue, props.value);
}
});
const limitReached = vue.computed(() => {
if (select.props.multiple) {
const modelValue = select.props.modelValue || [];
return (
!itemSelected.value &&
modelValue.length >= select.props.multipleLimit &&
select.props.multipleLimit > 0
);
} else {
return false;
}
});
const currentLabel = vue.computed(() => {
return props.label || (isObject.value ? "" : props.value);
});
const currentValue = vue.computed(() => {
return props.value || props.label || "";
});
const isDisabled = vue.computed(() => {
return props.disabled || states.groupDisabled || limitReached.value;
});
const instance = vue.getCurrentInstance();
const contains = (arr = [], target) => {
if (!isObject.value) {
return arr && arr.indexOf(target) > -1;
} else {
const valueKey = select.props.valueKey;
return (
arr &&
arr.some((item) => {
return (
getValueByPath(item, valueKey) ===
getValueByPath(target, valueKey)
);
})
);
}
};
const isEqual = (a, b) => {
if (!isObject.value) {
return a === b;
} else {
const { valueKey } = select.props;
return getValueByPath(a, valueKey) === getValueByPath(b, valueKey);
}
};
const hoverItem = () => {
if (!props.disabled && !selectGroup.disabled) {
select.hoverIndex = select.optionsArray.indexOf(instance);
}
};
vue.watch(
() => currentLabel.value,
() => {
if (!props.created && !select.props.remote) select.setSelected();
}
);
vue.watch(
() => props.value,
(val, oldVal) => {
const { remote, valueKey } = select.props;
if (!props.created && !remote) {
if (
valueKey &&
typeof val === "object" &&
typeof oldVal === "object" &&
val[valueKey] === oldVal[valueKey]
) {
return;
}
select.setSelected();
}
}
);
vue.watch(
() => selectGroup.disabled,
() => {
states.groupDisabled = selectGroup.disabled;
},
{ immediate: true }
);
const { queryChange } = vue.toRaw(select);
vue.watch(queryChange, (changes) => {
const { query } = vue.unref(changes);
const regexp = new RegExp(escapeRegexpString(query), "i");
states.visible = regexp.test(currentLabel.value) || props.created;
if (!states.visible) {
select.filteredOptionsCount--;
}
});
return {
select,
currentLabel,
currentValue,
itemSelected,
isDisabled,
hoverItem,
};
}
var script$O = vue.defineComponent({
name: "ElOption",
componentName: "ElOption",
props: {
value: {
required: true,
type: [String, Number, Boolean, Object],
},
label: [String, Number],
created: Boolean,
disabled: {
type: Boolean,
default: false,
},
},
setup(props) {
const states = vue.reactive({
index: -1,
groupDisabled: false,
visible: true,
hitState: false,
hover: false,
});
const { currentLabel, itemSelected, isDisabled, select, hoverItem } =
useOption$1(props, states);
const { visible, hover } = vue.toRefs(states);
const vm = vue.getCurrentInstance().proxy;
const key = vm.value;
select.onOptionCreate(vm);
vue.onBeforeUnmount(() => {
const { selected } = select;
const selectedOptions = select.props.multiple ? selected : [selected];
const doesExist = select.cachedOptions.has(key);
const doesSelected = selectedOptions.some((item) => {
return item.value === vm.value;
});
if (doesExist && !doesSelected) {
select.cachedOptions.delete(key);
}
select.onOptionDestroy(key);
});
function selectOptionClick() {
if (props.disabled !== true && states.groupDisabled !== true) {
select.handleOptionSelect(vm, true);
}
}
return {
currentLabel,
itemSelected,
isDisabled,
select,
hoverItem,
visible,
hover,
selectOptionClick,
};
},
});
function render$H(_ctx, _cache, $props, $setup, $data, $options) {
return vue.withDirectives(
(vue.openBlock(),
vue.createElementBlock(
"li",
{
class: vue.normalizeClass([
"el-select-dropdown__item",
{
selected: _ctx.itemSelected,
"is-disabled": _ctx.isDisabled,
hover: _ctx.hover,
},
]),
onMouseenter:
_cache[0] ||
(_cache[0] = (...args) =>
_ctx.hoverItem && _ctx.hoverItem(...args)),
onClick:
_cache[1] ||
(_cache[1] = vue.withModifiers(
(...args) =>
_ctx.selectOptionClick && _ctx.selectOptionClick(...args),
["stop"]
)),
},
[
vue.renderSlot(_ctx.$slots, "default", {}, () => [
vue.createElementVNode(
"span",
null,
vue.toDisplayString(_ctx.currentLabel),
1
),
]),
],
34
)),
[[vue.vShow, _ctx.visible]]
);
}
script$O.render = render$H;
script$O.__file = "packages/components/select/src/option.vue";
var script$N = vue.defineComponent({
name: "ElSelectDropdown",
componentName: "ElSelectDropdown",
setup() {
const select = vue.inject(selectKey);
const popperClass = vue.computed(() => select.props.popperClass);
const isMultiple = vue.computed(() => select.props.multiple);
const minWidth = vue.ref("");
function updateMinWidth() {
var _a;
minWidth.value = `${
(_a = select.selectWrapper) == null
? void 0
: _a.getBoundingClientRect().width
}px`;
}
vue.onMounted(() => {
addResizeListener(select.selectWrapper, updateMinWidth);
});
vue.onBeforeUnmount(() => {
removeResizeListener(select.selectWrapper, updateMinWidth);
});
return {
minWidth,
popperClass,
isMultiple,
};
},
});
function render$G(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
class: vue.normalizeClass([
"el-select-dropdown",
[{ "is-multiple": _ctx.isMultiple }, _ctx.popperClass],
]),
style: vue.normalizeStyle({ minWidth: _ctx.minWidth }),
},
[vue.renderSlot(_ctx.$slots, "default")],
6
)
);
}
script$N.render = render$G;
script$N.__file = "packages/components/select/src/select-dropdown.vue";
function useSelectStates(props) {
const { t } = useLocaleInject();
return vue.reactive({
options: new Map(),
cachedOptions: new Map(),
createdLabel: null,
createdSelected: false,
selected: props.multiple ? [] : {},
inputLength: 20,
inputWidth: 0,
initialInputHeight: 0,
optionsCount: 0,
filteredOptionsCount: 0,
visible: false,
softFocus: false,
selectedLabel: "",
hoverIndex: -1,
query: "",
previousQuery: null,
inputHovering: false,
cachedPlaceHolder: "",
currentPlaceholder: t("el.select.placeholder"),
menuVisibleOnFocus: false,
isOnComposition: false,
isSilentBlur: false,
prefixWidth: null,
tagInMultiLine: false,
});
}
const useSelect$2 = (props, states, ctx) => {
const ELEMENT = useGlobalConfig();
const { t } = useLocaleInject();
const reference = vue.ref(null);
const input = vue.ref(null);
const popper = vue.ref(null);
const tags = vue.ref(null);
const selectWrapper = vue.ref(null);
const scrollbar = vue.ref(null);
const hoverOption = vue.ref(-1);
const queryChange = vue.shallowRef({ query: "" });
const groupQueryChange = vue.shallowRef("");
const elForm = vue.inject(elFormKey, {});
const elFormItem = vue.inject(elFormItemKey, {});
const readonly = vue.computed(
() => !props.filterable || props.multiple || !states.visible
);
const selectDisabled = vue.computed(
() => props.disabled || elForm.disabled
);
const showClose = vue.computed(() => {
const hasValue = props.multiple
? Array.isArray(props.modelValue) && props.modelValue.length > 0
: props.modelValue !== void 0 &&
props.modelValue !== null &&
props.modelValue !== "";
const criteria =
props.clearable &&
!selectDisabled.value &&
states.inputHovering &&
hasValue;
return criteria;
});
const iconClass = vue.computed(() =>
props.remote && props.filterable
? ""
: states.visible
? "arrow-up is-reverse"
: "arrow-up"
);
const debounce = vue.computed(() => (props.remote ? 300 : 0));
const emptyText = vue.computed(() => {
if (props.loading) {
return props.loadingText || t("el.select.loading");
} else {
if (props.remote && states.query === "" && states.options.size === 0)
return false;
if (
props.filterable &&
states.query &&
states.options.size > 0 &&
states.filteredOptionsCount === 0
) {
return props.noMatchText || t("el.select.noMatch");
}
if (states.options.size === 0) {
return props.noDataText || t("el.select.noData");
}
}
return null;
});
const optionsArray = vue.computed(() =>
Array.from(states.options.values())
);
const cachedOptionsArray = vue.computed(() =>
Array.from(states.cachedOptions.values())
);
const showNewOption = vue.computed(() => {
const hasExistingOption = optionsArray.value
.filter((option) => {
return !option.created;
})
.some((option) => {
return option.currentLabel === states.query;
});
return (
props.filterable &&
props.allowCreate &&
states.query !== "" &&
!hasExistingOption
);
});
const selectSize = vue.computed(
() => props.size || elFormItem.size || ELEMENT.size
);
const collapseTagSize = vue.computed(() =>
["small", "mini"].indexOf(selectSize.value) > -1 ? "mini" : "small"
);
const dropMenuVisible = vue.computed(
() => states.visible && emptyText.value !== false
);
vue.watch(
() => selectDisabled.value,
() => {
vue.nextTick(() => {
resetInputHeight();
});
}
);
vue.watch(
() => props.placeholder,
(val) => {
states.cachedPlaceHolder = states.currentPlaceholder = val;
}
);
vue.watch(
() => props.modelValue,
(val, oldVal) => {
var _a;
if (props.multiple) {
resetInputHeight();
if ((val && val.length > 0) || (input.value && states.query !== "")) {
states.currentPlaceholder = "";
} else {
states.currentPlaceholder = states.cachedPlaceHolder;
}
if (props.filterable && !props.reserveKeyword) {
states.query = "";
handleQueryChange(states.query);
}
}
setSelected();
if (props.filterable && !props.multiple) {
states.inputLength = 20;
}
if (!isEqual$2(val, oldVal)) {
(_a = elFormItem.validate) == null
? void 0
: _a.call(elFormItem, "change");
}
},
{
flush: "post",
deep: true,
}
);
vue.watch(
() => states.visible,
(val) => {
var _a, _b;
if (!val) {
input.value && input.value.blur();
states.query = "";
states.previousQuery = null;
states.selectedLabel = "";
states.inputLength = 20;
states.menuVisibleOnFocus = false;
resetHoverIndex();
vue.nextTick(() => {
if (
input.value &&
input.value.value === "" &&
states.selected.length === 0
) {
states.currentPlaceholder = states.cachedPlaceHolder;
}
});
if (!props.multiple) {
if (states.selected) {
if (
props.filterable &&
props.allowCreate &&
states.createdSelected &&
states.createdLabel
) {
states.selectedLabel = states.createdLabel;
} else {
states.selectedLabel = states.selected.currentLabel;
}
if (props.filterable) states.query = states.selectedLabel;
}
if (props.filterable) {
states.currentPlaceholder = states.cachedPlaceHolder;
}
}
} else {
(_b = (_a = popper.value) == null ? void 0 : _a.update) == null
? void 0
: _b.call(_a);
if (props.filterable) {
states.filteredOptionsCount = states.optionsCount;
states.query = props.remote ? "" : states.selectedLabel;
if (props.multiple) {
input.value.focus();
} else {
if (states.selectedLabel) {
states.currentPlaceholder = states.selectedLabel;
states.selectedLabel = "";
}
}
handleQueryChange(states.query);
if (!props.multiple && !props.remote) {
queryChange.value.query = "";
vue.triggerRef(queryChange);
vue.triggerRef(groupQueryChange);
}
}
}
ctx.emit("visible-change", val);
}
);
vue.watch(
() => states.options.entries(),
() => {
var _a, _b, _c;
if (isServer) return;
(_b = (_a = popper.value) == null ? void 0 : _a.update) == null
? void 0
: _b.call(_a);
if (props.multiple) {
resetInputHeight();
}
const inputs =
((_c = selectWrapper.value) == null
? void 0
: _c.querySelectorAll("input")) || [];
if ([].indexOf.call(inputs, document.activeElement) === -1) {
setSelected();
}
if (
props.defaultFirstOption &&
(props.filterable || props.remote) &&
states.filteredOptionsCount
) {
checkDefaultFirstOption();
}
},
{
flush: "post",
}
);
vue.watch(
() => states.hoverIndex,
(val) => {
if (typeof val === "number" && val > -1) {
hoverOption.value = optionsArray.value[val] || {};
}
optionsArray.value.forEach((option) => {
option.hover = hoverOption.value === option;
});
}
);
const resetInputHeight = () => {
if (props.collapseTags && !props.filterable) return;
vue.nextTick(() => {
var _a, _b;
if (!reference.value) return;
const inputChildNodes = reference.value.$el.childNodes;
const input2 = [].filter.call(
inputChildNodes,
(item) => item.tagName === "INPUT"
)[0];
const _tags = tags.value;
const sizeInMap = states.initialInputHeight || 40;
input2.style.height =
states.selected.length === 0
? `${sizeInMap}px`
: `${Math.max(
_tags
? _tags.clientHeight +
(_tags.clientHeight > sizeInMap ? 6 : 0)
: 0,
sizeInMap
)}px`;
states.tagInMultiLine = parseFloat(input2.style.height) > sizeInMap;
if (states.visible && emptyText.value !== false) {
(_b = (_a = popper.value) == null ? void 0 : _a.update) == null
? void 0
: _b.call(_a);
}
});
};
const handleQueryChange = (val) => {
if (states.previousQuery === val || states.isOnComposition) return;
if (
states.previousQuery === null &&
(typeof props.filterMethod === "function" ||
typeof props.remoteMethod === "function")
) {
states.previousQuery = val;
return;
}
states.previousQuery = val;
vue.nextTick(() => {
var _a, _b;
if (states.visible)
(_b = (_a = popper.value) == null ? void 0 : _a.update) == null
? void 0
: _b.call(_a);
});
states.hoverIndex = -1;
if (props.multiple && props.filterable) {
vue.nextTick(() => {
const length = input.value.length * 15 + 20;
states.inputLength = props.collapseTags
? Math.min(50, length)
: length;
managePlaceholder();
resetInputHeight();
});
}
if (props.remote && typeof props.remoteMethod === "function") {
states.hoverIndex = -1;
props.remoteMethod(val);
} else if (typeof props.filterMethod === "function") {
props.filterMethod(val);
vue.triggerRef(groupQueryChange);
} else {
states.filteredOptionsCount = states.optionsCount;
queryChange.value.query = val;
vue.triggerRef(queryChange);
vue.triggerRef(groupQueryChange);
}
if (
props.defaultFirstOption &&
(props.filterable || props.remote) &&
states.filteredOptionsCount
) {
checkDefaultFirstOption();
}
};
const managePlaceholder = () => {
if (states.currentPlaceholder !== "") {
states.currentPlaceholder = input.value.value
? ""
: states.cachedPlaceHolder;
}
};
const checkDefaultFirstOption = () => {
const optionsInDropdown = optionsArray.value.filter(
(n) => n.visible && !n.disabled && !n.groupDisabled
);
const userCreatedOption = optionsInDropdown.filter((n) => n.created)[0];
const firstOriginOption = optionsInDropdown[0];
states.hoverIndex = getValueIndex(
optionsArray.value,
userCreatedOption || firstOriginOption
);
};
const setSelected = () => {
var _a;
if (!props.multiple) {
const option = getOption(props.modelValue);
if ((_a = option.props) == null ? void 0 : _a.created) {
states.createdLabel = option.props.value;
states.createdSelected = true;
} else {
states.createdSelected = false;
}
states.selectedLabel = option.currentLabel;
states.selected = option;
if (props.filterable) states.query = states.selectedLabel;
return;
}
const result = [];
if (Array.isArray(props.modelValue)) {
props.modelValue.forEach((value) => {
result.push(getOption(value));
});
}
states.selected = result;
vue.nextTick(() => {
resetInputHeight();
});
};
const getOption = (value) => {
let option;
const isObjectValue = toRawType(value).toLowerCase() === "object";
const isNull = toRawType(value).toLowerCase() === "null";
const isUndefined = toRawType(value).toLowerCase() === "undefined";
for (let i = states.cachedOptions.size - 1; i >= 0; i--) {
const cachedOption = cachedOptionsArray.value[i];
const isEqualValue = isObjectValue
? getValueByPath(cachedOption.value, props.valueKey) ===
getValueByPath(value, props.valueKey)
: cachedOption.value === value;
if (isEqualValue) {
option = {
value,
currentLabel: cachedOption.currentLabel,
isDisabled: cachedOption.isDisabled,
};
break;
}
}
if (option) return option;
const label = !isObjectValue && !isNull && !isUndefined ? value : "";
const newOption = {
value,
currentLabel: label,
};
if (props.multiple) {
newOption.hitState = false;
}
return newOption;
};
const resetHoverIndex = () => {
setTimeout(() => {
const valueKey = props.valueKey;
if (!props.multiple) {
states.hoverIndex = optionsArray.value.findIndex((item) => {
return (
getValueByPath(item, valueKey) ===
getValueByPath(states.selected, valueKey)
);
});
} else {
if (states.selected.length > 0) {
states.hoverIndex = Math.min.apply(
null,
states.selected.map((selected) => {
return optionsArray.value.findIndex((item) => {
return (
getValueByPath(item, valueKey) ===
getValueByPath(selected, valueKey)
);
});
})
);
} else {
states.hoverIndex = -1;
}
}
}, 300);
};
const handleResize = () => {
var _a, _b;
resetInputWidth();
(_b = (_a = popper.value) == null ? void 0 : _a.update) == null
? void 0
: _b.call(_a);
if (props.multiple) resetInputHeight();
};
const resetInputWidth = () => {
var _a;
states.inputWidth =
(_a = reference.value) == null
? void 0
: _a.$el.getBoundingClientRect().width;
};
const onInputChange = () => {
if (props.filterable && states.query !== states.selectedLabel) {
states.query = states.selectedLabel;
handleQueryChange(states.query);
}
};
const debouncedOnInputChange = debounce_1(() => {
onInputChange();
}, debounce.value);
const debouncedQueryChange = debounce_1((e) => {
handleQueryChange(e.target.value);
}, debounce.value);
const emitChange = (val) => {
if (!isEqual$2(props.modelValue, val)) {
ctx.emit(CHANGE_EVENT, val);
}
};
const deletePrevTag = (e) => {
if (e.target.value.length <= 0 && !toggleLastOptionHitState()) {
const value = props.modelValue.slice();
value.pop();
ctx.emit(UPDATE_MODEL_EVENT, value);
emitChange(value);
}
if (e.target.value.length === 1 && props.modelValue.length === 0) {
states.currentPlaceholder = states.cachedPlaceHolder;
}
};
const deleteTag = (event, tag) => {
const index = states.selected.indexOf(tag);
if (index > -1 && !selectDisabled.value) {
const value = props.modelValue.slice();
value.splice(index, 1);
ctx.emit(UPDATE_MODEL_EVENT, value);
emitChange(value);
ctx.emit("remove-tag", tag.value);
}
event.stopPropagation();
};
const deleteSelected = (event) => {
event.stopPropagation();
const value = props.multiple ? [] : "";
if (typeof value !== "string") {
for (const item of states.selected) {
if (item.isDisabled) value.push(item.value);
}
}
ctx.emit(UPDATE_MODEL_EVENT, value);
emitChange(value);
states.visible = false;
ctx.emit("clear");
};
const handleOptionSelect = (option, byClick) => {
if (props.multiple) {
const value = (props.modelValue || []).slice();
const optionIndex = getValueIndex(value, option.value);
if (optionIndex > -1) {
value.splice(optionIndex, 1);
} else if (
props.multipleLimit <= 0 ||
value.length < props.multipleLimit
) {
value.push(option.value);
}
ctx.emit(UPDATE_MODEL_EVENT, value);
emitChange(value);
if (option.created) {
states.query = "";
handleQueryChange("");
states.inputLength = 20;
}
if (props.filterable) input.value.focus();
} else {
ctx.emit(UPDATE_MODEL_EVENT, option.value);
emitChange(option.value);
states.visible = false;
}
states.isSilentBlur = byClick;
setSoftFocus();
if (states.visible) return;
vue.nextTick(() => {
scrollToOption(option);
});
};
const getValueIndex = (arr = [], value) => {
if (!isObject$2(value)) return arr.indexOf(value);
const valueKey = props.valueKey;
let index = -1;
arr.some((item, i) => {
if (
getValueByPath(item, valueKey) === getValueByPath(value, valueKey)
) {
index = i;
return true;
}
return false;
});
return index;
};
const setSoftFocus = () => {
states.softFocus = true;
const _input = input.value || reference.value;
if (_input) {
_input.focus();
}
};
const scrollToOption = (option) => {
var _a, _b, _c, _d;
const targetOption = Array.isArray(option) ? option[0] : option;
let target = null;
if (targetOption == null ? void 0 : targetOption.value) {
const options = optionsArray.value.filter(
(item) => item.value === targetOption.value
);
if (options.length > 0) {
target = options[0].$el;
}
}
if (popper.value && target) {
const menu =
(_c =
(_b = (_a = popper.value) == null ? void 0 : _a.popperRef) == null
? void 0
: _b.querySelector) == null
? void 0
: _c.call(_b, ".el-select-dropdown__wrap");
if (menu) {
scrollIntoView(menu, target);
}
}
(_d = scrollbar.value) == null ? void 0 : _d.handleScroll();
};
const onOptionCreate = (vm) => {
states.optionsCount++;
states.filteredOptionsCount++;
states.options.set(vm.value, vm);
states.cachedOptions.set(vm.value, vm);
};
const onOptionDestroy = (key) => {
states.optionsCount--;
states.filteredOptionsCount--;
states.options.delete(key);
};
const resetInputState = (e) => {
if (e.code !== EVENT_CODE.backspace) toggleLastOptionHitState(false);
states.inputLength = input.value.length * 15 + 20;
resetInputHeight();
};
const toggleLastOptionHitState = (hit) => {
if (!Array.isArray(states.selected)) return;
const option = states.selected[states.selected.length - 1];
if (!option) return;
if (hit === true || hit === false) {
option.hitState = hit;
return hit;
}
option.hitState = !option.hitState;
return option.hitState;
};
const handleComposition = (event) => {
const text = event.target.value;
if (event.type === "compositionend") {
states.isOnComposition = false;
vue.nextTick(() => handleQueryChange(text));
} else {
const lastCharacter = text[text.length - 1] || "";
states.isOnComposition = !isKorean(lastCharacter);
}
};
const handleMenuEnter = () => {
vue.nextTick(() => scrollToOption(states.selected));
};
const handleFocus = (event) => {
if (!states.softFocus) {
if (props.automaticDropdown || props.filterable) {
states.visible = true;
if (props.filterable) {
states.menuVisibleOnFocus = true;
}
}
ctx.emit("focus", event);
} else {
states.softFocus = false;
}
};
const blur = () => {
states.visible = false;
reference.value.blur();
};
const handleBlur = (event) => {
vue.nextTick(() => {
if (states.isSilentBlur) {
states.isSilentBlur = false;
} else {
ctx.emit("blur", event);
}
});
states.softFocus = false;
};
const handleClearClick = (event) => {
deleteSelected(event);
};
const handleClose = () => {
states.visible = false;
};
const toggleMenu = () => {
if (props.automaticDropdown) return;
if (!selectDisabled.value) {
if (states.menuVisibleOnFocus) {
states.menuVisibleOnFocus = false;
} else {
states.visible = !states.visible;
}
if (states.visible) {
(input.value || reference.value).focus();
}
}
};
const selectOption = () => {
if (!states.visible) {
toggleMenu();
} else {
if (optionsArray.value[states.hoverIndex]) {
handleOptionSelect(optionsArray.value[states.hoverIndex], void 0);
}
}
};
const getValueKey = (item) => {
return isObject$2(item.value)
? getValueByPath(item.value, props.valueKey)
: item.value;
};
const optionsAllDisabled = vue.computed(() =>
optionsArray.value
.filter((option) => option.visible)
.every((option) => option.disabled)
);
const navigateOptions = (direction) => {
if (!states.visible) {
states.visible = true;
return;
}
if (states.options.size === 0 || states.filteredOptionsCount === 0)
return;
if (states.isOnComposition) return;
if (!optionsAllDisabled.value) {
if (direction === "next") {
states.hoverIndex++;
if (states.hoverIndex === states.options.size) {
states.hoverIndex = 0;
}
} else if (direction === "prev") {
states.hoverIndex--;
if (states.hoverIndex < 0) {
states.hoverIndex = states.options.size - 1;
}
}
const option = optionsArray.value[states.hoverIndex];
if (
option.disabled === true ||
option.groupDisabled === true ||
!option.visible
) {
navigateOptions(direction);
}
vue.nextTick(() => scrollToOption(hoverOption.value));
}
};
return {
optionsArray,
selectSize,
handleResize,
debouncedOnInputChange,
debouncedQueryChange,
deletePrevTag,
deleteTag,
deleteSelected,
handleOptionSelect,
scrollToOption,
readonly,
resetInputHeight,
showClose,
iconClass,
showNewOption,
collapseTagSize,
setSelected,
managePlaceholder,
selectDisabled,
emptyText,
toggleLastOptionHitState,
resetInputState,
handleComposition,
onOptionCreate,
onOptionDestroy,
handleMenuEnter,
handleFocus,
blur,
handleBlur,
handleClearClick,
handleClose,
toggleMenu,
selectOption,
getValueKey,
navigateOptions,
dropMenuVisible,
queryChange,
groupQueryChange,
reference,
input,
popper,
tags,
selectWrapper,
scrollbar,
};
};
var script$M = vue.defineComponent({
name: "ElSelect",
componentName: "ElSelect",
components: {
ElInput: _Input,
ElSelectMenu: script$N,
ElOption: script$O,
ElTag,
ElScrollbar: _Scrollbar,
ElPopper: _Popper,
},
directives: { ClickOutside },
props: {
name: String,
id: String,
modelValue: [Array, String, Number, Boolean, Object],
autocomplete: {
type: String,
default: "off",
},
automaticDropdown: Boolean,
size: {
type: String,
validator: isValidComponentSize,
},
disabled: Boolean,
clearable: Boolean,
filterable: Boolean,
allowCreate: Boolean,
loading: Boolean,
popperClass: {
type: String,
default: "",
},
remote: Boolean,
loadingText: String,
noMatchText: String,
noDataText: String,
remoteMethod: Function,
filterMethod: Function,
multiple: Boolean,
multipleLimit: {
type: Number,
default: 0,
},
placeholder: {
type: String,
},
defaultFirstOption: Boolean,
reserveKeyword: Boolean,
valueKey: {
type: String,
default: "value",
},
collapseTags: Boolean,
popperAppendToBody: {
type: Boolean,
default: true,
},
clearIcon: {
type: String,
default: "el-icon-circle-close",
},
},
emits: [
UPDATE_MODEL_EVENT,
CHANGE_EVENT,
"remove-tag",
"clear",
"visible-change",
"focus",
"blur",
],
setup(props, ctx) {
const { t } = useLocaleInject();
const states = useSelectStates(props);
const {
optionsArray,
selectSize,
readonly,
handleResize,
collapseTagSize,
debouncedOnInputChange,
debouncedQueryChange,
deletePrevTag,
deleteTag,
deleteSelected,
handleOptionSelect,
scrollToOption,
setSelected,
resetInputHeight,
managePlaceholder,
showClose,
selectDisabled,
iconClass,
showNewOption,
emptyText,
toggleLastOptionHitState,
resetInputState,
handleComposition,
onOptionCreate,
onOptionDestroy,
handleMenuEnter,
handleFocus,
blur,
handleBlur,
handleClearClick,
handleClose,
toggleMenu,
selectOption,
getValueKey,
navigateOptions,
dropMenuVisible,
reference,
input,
popper,
tags,
selectWrapper,
scrollbar,
queryChange,
groupQueryChange,
} = useSelect$2(props, states, ctx);
const { focus } = useFocus(reference);
const {
inputWidth,
selected,
inputLength,
filteredOptionsCount,
visible,
softFocus,
selectedLabel,
hoverIndex,
query,
inputHovering,
currentPlaceholder,
menuVisibleOnFocus,
isOnComposition,
isSilentBlur,
options,
cachedOptions,
optionsCount,
prefixWidth,
tagInMultiLine,
} = vue.toRefs(states);
vue.provide(
selectKey,
vue.reactive({
props,
options,
optionsArray,
cachedOptions,
optionsCount,
filteredOptionsCount,
hoverIndex,
handleOptionSelect,
onOptionCreate,
onOptionDestroy,
selectWrapper,
selected,
setSelected,
queryChange,
groupQueryChange,
})
);
vue.onMounted(() => {
states.cachedPlaceHolder = currentPlaceholder.value =
props.placeholder || t("el.select.placeholder");
if (
props.multiple &&
Array.isArray(props.modelValue) &&
props.modelValue.length > 0
) {
currentPlaceholder.value = "";
}
addResizeListener(selectWrapper.value, handleResize);
if (reference.value && reference.value.$el) {
const sizeMap = {
medium: 36,
small: 32,
mini: 28,
};
const input2 = reference.value.input;
states.initialInputHeight =
input2.getBoundingClientRect().height || sizeMap[selectSize.value];
}
if (props.remote && props.multiple) {
resetInputHeight();
}
vue.nextTick(() => {
if (reference.value.$el) {
inputWidth.value =
reference.value.$el.getBoundingClientRect().width;
}
if (ctx.slots.prefix) {
const inputChildNodes = reference.value.$el.childNodes;
const input2 = [].filter.call(
inputChildNodes,
(item) => item.tagName === "INPUT"
)[0];
const prefix =
reference.value.$el.querySelector(".el-input__prefix");
prefixWidth.value = Math.max(
prefix.getBoundingClientRect().width + 5,
30
);
if (states.prefixWidth) {
input2.style.paddingLeft = `${Math.max(
states.prefixWidth,
30
)}px`;
}
}
});
setSelected();
});
vue.onBeforeUnmount(() => {
removeResizeListener(selectWrapper.value, handleResize);
});
if (props.multiple && !Array.isArray(props.modelValue)) {
ctx.emit(UPDATE_MODEL_EVENT, []);
}
if (!props.multiple && Array.isArray(props.modelValue)) {
ctx.emit(UPDATE_MODEL_EVENT, "");
}
const popperPaneRef = vue.computed(() => {
var _a;
return (_a = popper.value) == null ? void 0 : _a.popperRef;
});
return {
Effect: exports.Effect,
tagInMultiLine,
prefixWidth,
selectSize,
readonly,
handleResize,
collapseTagSize,
debouncedOnInputChange,
debouncedQueryChange,
deletePrevTag,
deleteTag,
deleteSelected,
handleOptionSelect,
scrollToOption,
inputWidth,
selected,
inputLength,
filteredOptionsCount,
visible,
softFocus,
selectedLabel,
hoverIndex,
query,
inputHovering,
currentPlaceholder,
menuVisibleOnFocus,
isOnComposition,
isSilentBlur,
options,
resetInputHeight,
managePlaceholder,
showClose,
selectDisabled,
iconClass,
showNewOption,
emptyText,
toggleLastOptionHitState,
resetInputState,
handleComposition,
handleMenuEnter,
handleFocus,
blur,
handleBlur,
handleClearClick,
handleClose,
toggleMenu,
selectOption,
getValueKey,
navigateOptions,
dropMenuVisible,
focus,
reference,
input,
popper,
popperPaneRef,
tags,
selectWrapper,
scrollbar,
};
},
});
const _hoisted_1$w = { class: "select-trigger" };
const _hoisted_2$q = { key: 0 };
const _hoisted_3$p = { class: "el-select__tags-text" };
const _hoisted_4$c = ["disabled", "autocomplete"];
const _hoisted_5$a = {
style: {
height: "100%",
display: "flex",
"justify-content": "center",
"align-items": "center",
},
};
const _hoisted_6$9 = {
key: 1,
class: "el-select-dropdown__empty",
};
function render$F(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_tag = vue.resolveComponent("el-tag");
const _component_el_input = vue.resolveComponent("el-input");
const _component_el_option = vue.resolveComponent("el-option");
const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
const _component_el_select_menu = vue.resolveComponent("el-select-menu");
const _component_el_popper = vue.resolveComponent("el-popper");
const _directive_click_outside = vue.resolveDirective("click-outside");
return vue.withDirectives(
(vue.openBlock(),
vue.createElementBlock(
"div",
{
ref: "selectWrapper",
class: vue.normalizeClass([
"el-select",
[_ctx.selectSize ? "el-select--" + _ctx.selectSize : ""],
]),
onClick:
_cache[25] ||
(_cache[25] = vue.withModifiers(
(...args) => _ctx.toggleMenu && _ctx.toggleMenu(...args),
["stop"]
)),
},
[
vue.createVNode(
_component_el_popper,
{
ref: "popper",
visible: _ctx.dropMenuVisible,
"onUpdate:visible":
_cache[24] ||
(_cache[24] = ($event) => (_ctx.dropMenuVisible = $event)),
placement: "bottom-start",
"append-to-body": _ctx.popperAppendToBody,
"popper-class": `el-select__popper ${_ctx.popperClass}`,
"fallback-placements": [
"bottom-start",
"top-start",
"right",
"left",
],
"manual-mode": "",
effect: _ctx.Effect.LIGHT,
pure: "",
trigger: "click",
transition: "el-zoom-in-top",
"stop-popper-mouse-event": false,
"gpu-acceleration": false,
onBeforeEnter: _ctx.handleMenuEnter,
},
{
trigger: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_1$w, [
_ctx.multiple
? (vue.openBlock(),
vue.createElementBlock(
"div",
{
key: 0,
ref: "tags",
class: "el-select__tags",
style: vue.normalizeStyle({
maxWidth: _ctx.inputWidth - 32 + "px",
width: "100%",
}),
},
[
_ctx.collapseTags && _ctx.selected.length
? (vue.openBlock(),
vue.createElementBlock("span", _hoisted_2$q, [
vue.createVNode(
_component_el_tag,
{
closable:
!_ctx.selectDisabled &&
!_ctx.selected[0].isDisabled,
size: _ctx.collapseTagSize,
hit: _ctx.selected[0].hitState,
type: "info",
"disable-transitions": "",
onClose:
_cache[0] ||
(_cache[0] = ($event) =>
_ctx.deleteTag(
$event,
_ctx.selected[0]
)),
},
{
default: vue.withCtx(() => [
vue.createElementVNode(
"span",
{
class: "el-select__tags-text",
style: vue.normalizeStyle({
maxWidth:
_ctx.inputWidth - 123 + "px",
}),
},
vue.toDisplayString(
_ctx.selected[0].currentLabel
),
5
),
]),
_: 1,
},
8,
["closable", "size", "hit"]
),
_ctx.selected.length > 1
? (vue.openBlock(),
vue.createBlock(
_component_el_tag,
{
key: 0,
closable: false,
size: _ctx.collapseTagSize,
type: "info",
"disable-transitions": "",
},
{
default: vue.withCtx(() => [
vue.createElementVNode(
"span",
_hoisted_3$p,
"+ " +
vue.toDisplayString(
_ctx.selected.length - 1
),
1
),
]),
_: 1,
},
8,
["size"]
))
: vue.createCommentVNode("v-if", true),
]))
: vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" <div> "),
!_ctx.collapseTags
? (vue.openBlock(),
vue.createBlock(
vue.Transition,
{
key: 1,
onAfterLeave: _ctx.resetInputHeight,
},
{
default: vue.withCtx(() => [
vue.createElementVNode(
"span",
{
style: vue.normalizeStyle({
marginLeft:
_ctx.prefixWidth &&
_ctx.selected.length
? `${_ctx.prefixWidth}px`
: null,
}),
},
[
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(
_ctx.selected,
(item) => {
return (
vue.openBlock(),
vue.createBlock(
_component_el_tag,
{
key: _ctx.getValueKey(item),
closable:
!_ctx.selectDisabled &&
!item.isDisabled,
size: _ctx.collapseTagSize,
hit: item.hitState,
type: "info",
"disable-transitions": "",
onClose: ($event) =>
_ctx.deleteTag(
$event,
item
),
},
{
default: vue.withCtx(() => [
vue.createElementVNode(
"span",
{
class:
"el-select__tags-text",
style:
vue.normalizeStyle({
maxWidth:
_ctx.inputWidth -
75 +
"px",
}),
},
vue.toDisplayString(
item.currentLabel
),
5
),
]),
_: 2,
},
1032,
[
"closable",
"size",
"hit",
"onClose",
]
)
);
}
),
128
)),
],
4
),
]),
_: 1,
},
8,
["onAfterLeave"]
))
: vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" </div> "),
_ctx.filterable
? vue.withDirectives(
(vue.openBlock(),
vue.createElementBlock(
"input",
{
key: 2,
ref: "input",
"onUpdate:modelValue":
_cache[1] ||
(_cache[1] = ($event) =>
(_ctx.query = $event)),
type: "text",
class: vue.normalizeClass([
"el-select__input",
[
_ctx.selectSize
? `is-${_ctx.selectSize}`
: "",
],
]),
disabled: _ctx.selectDisabled,
autocomplete: _ctx.autocomplete,
style: vue.normalizeStyle({
marginLeft:
(_ctx.prefixWidth &&
!_ctx.selected.length) ||
_ctx.tagInMultiLine
? `${_ctx.prefixWidth}px`
: null,
flexGrow: "1",
width: `${
_ctx.inputLength /
(_ctx.inputWidth - 32)
}%`,
maxWidth: `${_ctx.inputWidth - 42}px`,
}),
onFocus:
_cache[2] ||
(_cache[2] = (...args) =>
_ctx.handleFocus &&
_ctx.handleFocus(...args)),
onBlur:
_cache[3] ||
(_cache[3] = (...args) =>
_ctx.handleBlur &&
_ctx.handleBlur(...args)),
onKeyup:
_cache[4] ||
(_cache[4] = (...args) =>
_ctx.managePlaceholder &&
_ctx.managePlaceholder(...args)),
onKeydown: [
_cache[5] ||
(_cache[5] = (...args) =>
_ctx.resetInputState &&
_ctx.resetInputState(...args)),
_cache[6] ||
(_cache[6] = vue.withKeys(
vue.withModifiers(
($event) =>
_ctx.navigateOptions("next"),
["prevent"]
),
["down"]
)),
_cache[7] ||
(_cache[7] = vue.withKeys(
vue.withModifiers(
($event) =>
_ctx.navigateOptions("prev"),
["prevent"]
),
["up"]
)),
_cache[8] ||
(_cache[8] = vue.withKeys(
vue.withModifiers(
($event) => (_ctx.visible = false),
["stop", "prevent"]
),
["esc"]
)),
_cache[9] ||
(_cache[9] = vue.withKeys(
vue.withModifiers(
(...args) =>
_ctx.selectOption &&
_ctx.selectOption(...args),
["stop", "prevent"]
),
["enter"]
)),
_cache[10] ||
(_cache[10] = vue.withKeys(
(...args) =>
_ctx.deletePrevTag &&
_ctx.deletePrevTag(...args),
["delete"]
)),
_cache[11] ||
(_cache[11] = vue.withKeys(
($event) => (_ctx.visible = false),
["tab"]
)),
],
onCompositionstart:
_cache[12] ||
(_cache[12] = (...args) =>
_ctx.handleComposition &&
_ctx.handleComposition(...args)),
onCompositionupdate:
_cache[13] ||
(_cache[13] = (...args) =>
_ctx.handleComposition &&
_ctx.handleComposition(...args)),
onCompositionend:
_cache[14] ||
(_cache[14] = (...args) =>
_ctx.handleComposition &&
_ctx.handleComposition(...args)),
onInput:
_cache[15] ||
(_cache[15] = (...args) =>
_ctx.debouncedQueryChange &&
_ctx.debouncedQueryChange(...args)),
},
null,
46,
_hoisted_4$c
)),
[[vue.vModelText, _ctx.query]]
)
: vue.createCommentVNode("v-if", true),
],
4
))
: vue.createCommentVNode("v-if", true),
vue.createVNode(
_component_el_input,
{
id: _ctx.id,
ref: "reference",
modelValue: _ctx.selectedLabel,
"onUpdate:modelValue":
_cache[17] ||
(_cache[17] = ($event) =>
(_ctx.selectedLabel = $event)),
type: "text",
placeholder: _ctx.currentPlaceholder,
name: _ctx.name,
autocomplete: _ctx.autocomplete,
size: _ctx.selectSize,
disabled: _ctx.selectDisabled,
readonly: _ctx.readonly,
"validate-event": false,
class: vue.normalizeClass({ "is-focus": _ctx.visible }),
tabindex: _ctx.multiple && _ctx.filterable ? "-1" : null,
onFocus: _ctx.handleFocus,
onBlur: _ctx.handleBlur,
onInput: _ctx.debouncedOnInputChange,
onPaste: _ctx.debouncedOnInputChange,
onCompositionstart: _ctx.handleComposition,
onCompositionupdate: _ctx.handleComposition,
onCompositionend: _ctx.handleComposition,
onKeydown: [
_cache[18] ||
(_cache[18] = vue.withKeys(
vue.withModifiers(
($event) => _ctx.navigateOptions("next"),
["stop", "prevent"]
),
["down"]
)),
_cache[19] ||
(_cache[19] = vue.withKeys(
vue.withModifiers(
($event) => _ctx.navigateOptions("prev"),
["stop", "prevent"]
),
["up"]
)),
vue.withKeys(
vue.withModifiers(_ctx.selectOption, [
"stop",
"prevent",
]),
["enter"]
),
_cache[20] ||
(_cache[20] = vue.withKeys(
vue.withModifiers(
($event) => (_ctx.visible = false),
["stop", "prevent"]
),
["esc"]
)),
_cache[21] ||
(_cache[21] = vue.withKeys(
($event) => (_ctx.visible = false),
["tab"]
)),
],
onMouseenter:
_cache[22] ||
(_cache[22] = ($event) => (_ctx.inputHovering = true)),
onMouseleave:
_cache[23] ||
(_cache[23] = ($event) => (_ctx.inputHovering = false)),
},
vue.createSlots(
{
suffix: vue.withCtx(() => [
vue.withDirectives(
vue.createElementVNode(
"i",
{
class: vue.normalizeClass([
"el-select__caret",
"el-input__icon",
"el-icon-" + _ctx.iconClass,
]),
},
null,
2
),
[[vue.vShow, !_ctx.showClose]]
),
_ctx.showClose
? (vue.openBlock(),
vue.createElementBlock(
"i",
{
key: 0,
class: vue.normalizeClass(
`el-select__caret el-input__icon ${_ctx.clearIcon}`
),
onClick:
_cache[16] ||
(_cache[16] = (...args) =>
_ctx.handleClearClick &&
_ctx.handleClearClick(...args)),
},
null,
2
))
: vue.createCommentVNode("v-if", true),
]),
_: 2,
},
[
_ctx.$slots.prefix
? {
name: "prefix",
fn: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_5$a, [
vue.renderSlot(_ctx.$slots, "prefix"),
]),
]),
}
: void 0,
]
),
1032,
[
"id",
"modelValue",
"placeholder",
"name",
"autocomplete",
"size",
"disabled",
"readonly",
"class",
"tabindex",
"onFocus",
"onBlur",
"onInput",
"onPaste",
"onCompositionstart",
"onCompositionupdate",
"onCompositionend",
"onKeydown",
]
),
]),
]),
default: vue.withCtx(() => [
vue.createVNode(_component_el_select_menu, null, {
default: vue.withCtx(() => [
vue.withDirectives(
vue.createVNode(
_component_el_scrollbar,
{
ref: "scrollbar",
tag: "ul",
"wrap-class": "el-select-dropdown__wrap",
"view-class": "el-select-dropdown__list",
class: vue.normalizeClass({
"is-empty":
!_ctx.allowCreate &&
_ctx.query &&
_ctx.filteredOptionsCount === 0,
}),
},
{
default: vue.withCtx(() => [
_ctx.showNewOption
? (vue.openBlock(),
vue.createBlock(
_component_el_option,
{
key: 0,
value: _ctx.query,
created: true,
},
null,
8,
["value"]
))
: vue.createCommentVNode("v-if", true),
vue.renderSlot(_ctx.$slots, "default"),
]),
_: 3,
},
8,
["class"]
),
[[vue.vShow, _ctx.options.size > 0 && !_ctx.loading]]
),
_ctx.emptyText &&
(!_ctx.allowCreate ||
_ctx.loading ||
(_ctx.allowCreate && _ctx.options.size === 0))
? (vue.openBlock(),
vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
_ctx.$slots.empty
? vue.renderSlot(_ctx.$slots, "empty", { key: 0 })
: (vue.openBlock(),
vue.createElementBlock(
"p",
_hoisted_6$9,
vue.toDisplayString(_ctx.emptyText),
1
)),
],
2112
))
: vue.createCommentVNode("v-if", true),
]),
_: 3,
}),
]),
_: 3,
},
8,
[
"visible",
"append-to-body",
"popper-class",
"effect",
"onBeforeEnter",
]
),
],
2
)),
[[_directive_click_outside, _ctx.handleClose, _ctx.popperPaneRef]]
);
}
script$M.render = render$F;
script$M.__file = "packages/components/select/src/select.vue";
var __defProp$o = Object.defineProperty;
var __getOwnPropSymbols$o = Object.getOwnPropertySymbols;
var __hasOwnProp$o = Object.prototype.hasOwnProperty;
var __propIsEnum$o = Object.prototype.propertyIsEnumerable;
var __defNormalProp$o = (obj, key, value) =>
key in obj
? __defProp$o(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$o = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$o.call(b, prop)) __defNormalProp$o(a, prop, b[prop]);
if (__getOwnPropSymbols$o)
for (var prop of __getOwnPropSymbols$o(b)) {
if (__propIsEnum$o.call(b, prop)) __defNormalProp$o(a, prop, b[prop]);
}
return a;
};
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
var script$L = vue.defineComponent({
name: "ElOptionGroup",
componentName: "ElOptionGroup",
props: {
label: String,
disabled: {
type: Boolean,
default: false,
},
},
setup(props) {
const visible = vue.ref(true);
const instance = vue.getCurrentInstance();
const children = vue.ref([]);
vue.provide(
selectGroupKey,
vue.reactive(__spreadValues$o({}, vue.toRefs(props)))
);
const select = vue.inject(selectKey);
vue.onMounted(() => {
children.value = flattedChildren(instance.subTree);
});
const flattedChildren = (node) => {
const children2 = [];
if (Array.isArray(node.children)) {
node.children.forEach((child) => {
var _a;
if (
child.type &&
child.type.name === "ElOption" &&
child.component &&
child.component.proxy
) {
children2.push(child.component.proxy);
} else if ((_a = child.children) == null ? void 0 : _a.length) {
children2.push(...flattedChildren(child));
}
});
}
return children2;
};
const { groupQueryChange } = vue.toRaw(select);
vue.watch(groupQueryChange, () => {
visible.value = children.value.some(
(option) => option.visible === true
);
});
return {
visible,
};
},
});
const _hoisted_1$v = { class: "el-select-group__wrap" };
const _hoisted_2$p = { class: "el-select-group__title" };
const _hoisted_3$o = { class: "el-select-group" };
function render$E(_ctx, _cache, $props, $setup, $data, $options) {
return vue.withDirectives(
(vue.openBlock(),
vue.createElementBlock(
"ul",
_hoisted_1$v,
[
vue.createElementVNode(
"li",
_hoisted_2$p,
vue.toDisplayString(_ctx.label),
1
),
vue.createElementVNode("li", null, [
vue.createElementVNode("ul", _hoisted_3$o, [
vue.renderSlot(_ctx.$slots, "default"),
]),
]),
],
512
)),
[[vue.vShow, _ctx.visible]]
);
}
script$L.render = render$E;
script$L.__file = "packages/components/select/src/option-group.vue";
const ElSelect = withInstall(script$M, {
Option: script$O,
OptionGroup: script$L,
});
const ElOption$1 = withNoopInstall(script$O);
const ElOptionGroup = withNoopInstall(script$L);
const usePagination = () => vue.inject(elPaginationKey, {});
const paginationSizesProps = {
pageSize: {
type: Number,
required: true,
},
pageSizes: buildProp({
type: definePropType(Array),
default: () => mutable([10, 20, 30, 40, 50, 100]),
}),
popperClass: {
type: String,
default: "",
},
disabled: Boolean,
};
var script$K = vue.defineComponent({
name: "ElPaginationSizes",
components: {
ElSelect,
ElOption: ElOption$1,
},
props: paginationSizesProps,
emits: ["page-size-change"],
setup(props, { emit }) {
const { t } = useLocaleInject();
const pagination = usePagination();
const innerPageSize = vue.ref(props.pageSize);
vue.watch(
() => props.pageSizes,
(newVal, oldVal) => {
if (isEqual$2(newVal, oldVal)) return;
if (Array.isArray(newVal)) {
const pageSize =
newVal.indexOf(props.pageSize) > -1
? props.pageSize
: props.pageSizes[0];
emit("page-size-change", pageSize);
}
}
);
vue.watch(
() => props.pageSize,
(newVal) => {
innerPageSize.value = newVal;
}
);
const innerPagesizes = vue.computed(() => props.pageSizes);
function handleChange(val) {
var _a;
if (val !== innerPageSize.value) {
innerPageSize.value = val;
(_a = pagination.handleSizeChange) == null
? void 0
: _a.call(pagination, Number(val));
}
}
return {
innerPagesizes,
innerPageSize,
t,
handleChange,
};
},
});
const _hoisted_1$u = { class: "el-pagination__sizes" };
function render$D(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_option = vue.resolveComponent("el-option");
const _component_el_select = vue.resolveComponent("el-select");
return (
vue.openBlock(),
vue.createElementBlock("span", _hoisted_1$u, [
vue.createVNode(
_component_el_select,
{
"model-value": _ctx.innerPageSize,
disabled: _ctx.disabled,
"popper-class": _ctx.popperClass,
size: "mini",
onChange: _ctx.handleChange,
},
{
default: vue.withCtx(() => [
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.innerPagesizes, (item) => {
return (
vue.openBlock(),
vue.createBlock(
_component_el_option,
{
key: item,
value: item,
label: item + _ctx.t("el.pagination.pagesize"),
},
null,
8,
["value", "label"]
)
);
}),
128
)),
]),
_: 1,
},
8,
["model-value", "disabled", "popper-class", "onChange"]
),
])
);
}
script$K.render = render$D;
script$K.__file = "packages/components/pagination/src/components/sizes.vue";
var script$J = vue.defineComponent({
name: "ElPaginationJumper",
components: {
ElInput: _Input,
},
setup() {
const { t } = useLocaleInject();
const { pageCount, disabled, currentPage, changeEvent } = usePagination();
const userInput = vue.ref();
const innerValue = vue.computed(() => {
var _a;
return (_a = userInput.value) != null
? _a
: currentPage == null
? void 0
: currentPage.value;
});
function handleInput(val) {
userInput.value = +val;
}
function handleChange(val) {
changeEvent == null ? void 0 : changeEvent(+val);
userInput.value = void 0;
}
return {
pageCount,
disabled,
innerValue,
t,
handleInput,
handleChange,
};
},
});
const _hoisted_1$t = { class: "el-pagination__jump" };
function render$C(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_input = vue.resolveComponent("el-input");
return (
vue.openBlock(),
vue.createElementBlock("span", _hoisted_1$t, [
vue.createTextVNode(
vue.toDisplayString(_ctx.t("el.pagination.goto")) + " ",
1
),
vue.createVNode(
_component_el_input,
{
size: "mini",
class: "el-pagination__editor is-in-pagination",
min: 1,
max: _ctx.pageCount,
disabled: _ctx.disabled,
"model-value": _ctx.innerValue,
type: "number",
"onUpdate:modelValue": _ctx.handleInput,
onChange: _ctx.handleChange,
},
null,
8,
["max", "disabled", "model-value", "onUpdate:modelValue", "onChange"]
),
vue.createTextVNode(
" " + vue.toDisplayString(_ctx.t("el.pagination.pageClassifier")),
1
),
])
);
}
script$J.render = render$C;
script$J.__file = "packages/components/pagination/src/components/jumper.vue";
const paginationTotalProps = {
total: {
type: Number,
default: 1e3,
},
};
var script$I = vue.defineComponent({
name: "ElPaginationTotal",
props: paginationTotalProps,
setup() {
const { t } = useLocaleInject();
return {
t,
};
},
});
const _hoisted_1$s = { class: "el-pagination__total" };
function render$B(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"span",
_hoisted_1$s,
vue.toDisplayString(
_ctx.t("el.pagination.total", {
total: _ctx.total,
})
),
1
)
);
}
script$I.render = render$B;
script$I.__file = "packages/components/pagination/src/components/total.vue";
const paginationPagerProps = {
currentPage: {
type: Number,
default: 1,
},
pageCount: {
type: Number,
required: true,
},
pagerCount: {
type: Number,
default: 7,
},
disabled: Boolean,
};
var script$H = vue.defineComponent({
name: "ElPaginationPager",
props: paginationPagerProps,
emits: ["change"],
setup(props, { emit }) {
const showPrevMore = vue.ref(false);
const showNextMore = vue.ref(false);
const quicknextIconClass = vue.ref("el-icon-more");
const quickprevIconClass = vue.ref("el-icon-more");
const pagers = vue.computed(() => {
const pagerCount = props.pagerCount;
const halfPagerCount = (pagerCount - 1) / 2;
const currentPage = Number(props.currentPage);
const pageCount = Number(props.pageCount);
let showPrevMore2 = false;
let showNextMore2 = false;
if (pageCount > pagerCount) {
if (currentPage > pagerCount - halfPagerCount) {
showPrevMore2 = true;
}
if (currentPage < pageCount - halfPagerCount) {
showNextMore2 = true;
}
}
const array = [];
if (showPrevMore2 && !showNextMore2) {
const startPage = pageCount - (pagerCount - 2);
for (let i = startPage; i < pageCount; i++) {
array.push(i);
}
} else if (!showPrevMore2 && showNextMore2) {
for (let i = 2; i < pagerCount; i++) {
array.push(i);
}
} else if (showPrevMore2 && showNextMore2) {
const offset = Math.floor(pagerCount / 2) - 1;
for (let i = currentPage - offset; i <= currentPage + offset; i++) {
array.push(i);
}
} else {
for (let i = 2; i < pageCount; i++) {
array.push(i);
}
}
return array;
});
vue.watchEffect(() => {
const halfPagerCount = (props.pagerCount - 1) / 2;
showPrevMore.value = false;
showNextMore.value = false;
if (props.pageCount > props.pagerCount) {
if (props.currentPage > props.pagerCount - halfPagerCount) {
showPrevMore.value = true;
}
if (props.currentPage < props.pageCount - halfPagerCount) {
showNextMore.value = true;
}
}
});
vue.watchEffect(() => {
if (!showPrevMore.value) quickprevIconClass.value = "el-icon-more";
});
vue.watchEffect(() => {
if (!showNextMore.value) quicknextIconClass.value = "el-icon-more";
});
function onMouseenter(direction) {
if (props.disabled) return;
if (direction === "left") {
quickprevIconClass.value = "el-icon-d-arrow-left";
} else {
quicknextIconClass.value = "el-icon-d-arrow-right";
}
}
function onEnter(e) {
const target = e.target;
if (
target.tagName.toLowerCase() === "li" &&
Array.from(target.classList).includes("number")
) {
const newPage = Number(target.textContent);
if (newPage !== props.currentPage) {
emit("change", newPage);
}
}
}
function onPagerClick(event) {
const target = event.target;
if (target.tagName.toLowerCase() === "ul" || props.disabled) {
return;
}
let newPage = Number(target.textContent);
const pageCount = props.pageCount;
const currentPage = props.currentPage;
const pagerCountOffset = props.pagerCount - 2;
if (target.className.includes("more")) {
if (target.className.includes("quickprev")) {
newPage = currentPage - pagerCountOffset;
} else if (target.className.includes("quicknext")) {
newPage = currentPage + pagerCountOffset;
}
}
if (!isNaN(newPage)) {
if (newPage < 1) {
newPage = 1;
}
if (newPage > pageCount) {
newPage = pageCount;
}
}
if (newPage !== currentPage) {
emit("change", newPage);
}
}
return {
showPrevMore,
showNextMore,
quicknextIconClass,
quickprevIconClass,
pagers,
onMouseenter,
onPagerClick,
onEnter,
};
},
});
const _hoisted_1$r = ["aria-current"];
const _hoisted_2$o = ["aria-current"];
const _hoisted_3$n = ["aria-current"];
function render$A(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"ul",
{
class: "el-pager",
onClick:
_cache[4] ||
(_cache[4] = (...args) =>
_ctx.onPagerClick && _ctx.onPagerClick(...args)),
onKeyup:
_cache[5] ||
(_cache[5] = vue.withKeys(
(...args) => _ctx.onEnter && _ctx.onEnter(...args),
["enter"]
)),
},
[
_ctx.pageCount > 0
? (vue.openBlock(),
vue.createElementBlock(
"li",
{
key: 0,
class: vue.normalizeClass([
{ active: _ctx.currentPage === 1, disabled: _ctx.disabled },
"number",
]),
"aria-current": _ctx.currentPage === 1,
tabindex: "0",
},
" 1 ",
10,
_hoisted_1$r
))
: vue.createCommentVNode("v-if", true),
_ctx.showPrevMore
? (vue.openBlock(),
vue.createElementBlock(
"li",
{
key: 1,
class: vue.normalizeClass([
"el-icon more btn-quickprev",
[_ctx.quickprevIconClass, { disabled: _ctx.disabled }],
]),
onMouseenter:
_cache[0] ||
(_cache[0] = ($event) => _ctx.onMouseenter("left")),
onMouseleave:
_cache[1] ||
(_cache[1] = ($event) =>
(_ctx.quickprevIconClass = "el-icon-more")),
},
null,
34
))
: vue.createCommentVNode("v-if", true),
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.pagers, (pager) => {
return (
vue.openBlock(),
vue.createElementBlock(
"li",
{
key: pager,
class: vue.normalizeClass([
{
active: _ctx.currentPage === pager,
disabled: _ctx.disabled,
},
"number",
]),
"aria-current": _ctx.currentPage === pager,
tabindex: "0",
},
vue.toDisplayString(pager),
11,
_hoisted_2$o
)
);
}),
128
)),
_ctx.showNextMore
? (vue.openBlock(),
vue.createElementBlock(
"li",
{
key: 2,
class: vue.normalizeClass([
"el-icon more btn-quicknext",
[_ctx.quicknextIconClass, { disabled: _ctx.disabled }],
]),
onMouseenter:
_cache[2] ||
(_cache[2] = ($event) => _ctx.onMouseenter("right")),
onMouseleave:
_cache[3] ||
(_cache[3] = ($event) =>
(_ctx.quicknextIconClass = "el-icon-more")),
},
null,
34
))
: vue.createCommentVNode("v-if", true),
_ctx.pageCount > 1
? (vue.openBlock(),
vue.createElementBlock(
"li",
{
key: 3,
class: vue.normalizeClass([
{
active: _ctx.currentPage === _ctx.pageCount,
disabled: _ctx.disabled,
},
"number",
]),
"aria-current": _ctx.currentPage === _ctx.pageCount,
tabindex: "0",
},
vue.toDisplayString(_ctx.pageCount),
11,
_hoisted_3$n
))
: vue.createCommentVNode("v-if", true),
],
32
)
);
}
script$H.render = render$A;
script$H.__file = "packages/components/pagination/src/components/pager.vue";
const isAbsent = (v) => typeof v !== "number";
const paginationProps = {
total: Number,
pageSize: Number,
defaultPageSize: Number,
currentPage: Number,
defaultCurrentPage: Number,
pageCount: Number,
pagerCount: {
type: Number,
validator: (value) => {
return (
typeof value === "number" &&
(value | 0) === value &&
value > 4 &&
value < 22 &&
value % 2 === 1
);
},
default: 7,
},
layout: {
type: String,
default: ["prev", "pager", "next", "jumper", "->", "total"].join(", "),
},
pageSizes: buildProp({
type: definePropType(Array),
default: () => mutable([10, 20, 30, 40, 50, 100]),
}),
popperClass: {
type: String,
default: "",
},
prevText: {
type: String,
default: "",
},
nextText: {
type: String,
default: "",
},
small: Boolean,
background: Boolean,
disabled: Boolean,
hideOnSinglePage: Boolean,
};
const paginationEmits = {
"update:current-page": (val) => typeof val === "number",
"update:page-size": (val) => typeof val === "number",
"size-change": (val) => typeof val === "number",
"current-change": (val) => typeof val === "number",
"prev-click": (val) => typeof val === "number",
"next-click": (val) => typeof val === "number",
};
const componentName = "ElPagination";
var Pagination = vue.defineComponent({
name: componentName,
props: paginationProps,
emits: paginationEmits,
setup(props, { emit, slots }) {
const { t } = useLocaleInject();
const vnodeProps = vue.getCurrentInstance().vnode.props || {};
const hasCurrentPageListener =
"onUpdate:currentPage" in vnodeProps ||
"onUpdate:current-page" in vnodeProps ||
"onCurrentChange" in vnodeProps;
const hasPageSizeListener =
"onUpdate:pageSize" in vnodeProps ||
"onUpdate:page-size" in vnodeProps ||
"onSizeChange" in vnodeProps;
const assertValidUsage = vue.computed(() => {
if (isAbsent(props.total) && isAbsent(props.pageCount)) return false;
if (!isAbsent(props.currentPage) && !hasCurrentPageListener)
return false;
if (props.layout.includes("sizes")) {
if (!isAbsent(props.pageCount)) {
if (!hasPageSizeListener) return false;
} else if (!isAbsent(props.total)) {
if (!isAbsent(props.pageSize)) {
if (!hasPageSizeListener) {
return false;
}
}
}
}
return true;
});
const innerPageSize = vue.ref(
isAbsent(props.defaultPageSize) ? 10 : props.defaultPageSize
);
const innerCurrentPage = vue.ref(
isAbsent(props.defaultCurrentPage) ? 1 : props.defaultCurrentPage
);
const pageSizeBridge = vue.computed({
get() {
return isAbsent(props.pageSize)
? innerPageSize.value
: props.pageSize;
},
set(v) {
if (isAbsent(props.pageSize)) {
innerPageSize.value = v;
}
if (hasPageSizeListener) {
emit("update:page-size", v);
emit("size-change", v);
}
},
});
const pageCountBridge = vue.computed(() => {
let pageCount = 0;
if (!isAbsent(props.pageCount)) {
pageCount = props.pageCount;
} else if (!isAbsent(props.total)) {
pageCount = Math.max(
1,
Math.ceil(props.total / pageSizeBridge.value)
);
}
return pageCount;
});
const currentPageBridge = vue.computed({
get() {
return isAbsent(props.currentPage)
? innerCurrentPage.value
: props.currentPage;
},
set(v) {
let newCurrentPage = v;
if (v < 1) {
newCurrentPage = 1;
} else if (v > pageCountBridge.value) {
newCurrentPage = pageCountBridge.value;
}
if (isAbsent(props.currentPage)) {
innerCurrentPage.value = newCurrentPage;
}
if (hasCurrentPageListener) {
emit("update:current-page", newCurrentPage);
emit("current-change", newCurrentPage);
}
},
});
vue.watch(pageCountBridge, (val) => {
if (currentPageBridge.value > val) currentPageBridge.value = val;
});
function handleCurrentChange(val) {
currentPageBridge.value = val;
}
function handleSizeChange(val) {
pageSizeBridge.value = val;
const newPageCount = pageCountBridge.value;
if (currentPageBridge.value > newPageCount) {
currentPageBridge.value = newPageCount;
}
}
function prev() {
if (props.disabled) return;
currentPageBridge.value -= 1;
emit("prev-click", currentPageBridge.value);
}
function next() {
if (props.disabled) return;
currentPageBridge.value += 1;
emit("next-click", currentPageBridge.value);
}
vue.provide(elPaginationKey, {
pageCount: pageCountBridge,
disabled: vue.computed(() => props.disabled),
currentPage: currentPageBridge,
changeEvent: handleCurrentChange,
handleSizeChange,
});
return () => {
var _a, _b;
if (!assertValidUsage.value) {
debugWarn(componentName, t("el.pagination.deprecationWarning"));
return null;
}
if (!props.layout) return null;
if (props.hideOnSinglePage && pageCountBridge.value <= 1) return null;
const rootChildren = [];
const rightWrapperChildren = [];
const rightWrapperRoot = vue.h(
"div",
{ class: "el-pagination__rightwrapper" },
rightWrapperChildren
);
const TEMPLATE_MAP = {
prev: vue.h(script$Q, {
disabled: props.disabled,
currentPage: currentPageBridge.value,
prevText: props.prevText,
onClick: prev,
}),
jumper: vue.h(script$J),
pager: vue.h(script$H, {
currentPage: currentPageBridge.value,
pageCount: pageCountBridge.value,
pagerCount: props.pagerCount,
onChange: handleCurrentChange,
disabled: props.disabled,
}),
next: vue.h(script$P, {
disabled: props.disabled,
currentPage: currentPageBridge.value,
pageCount: pageCountBridge.value,
nextText: props.nextText,
onClick: next,
}),
sizes: vue.h(script$K, {
pageSize: pageSizeBridge.value,
pageSizes: props.pageSizes,
popperClass: props.popperClass,
disabled: props.disabled,
}),
slot:
(_b =
(_a = slots == null ? void 0 : slots.default) == null
? void 0
: _a.call(slots)) != null
? _b
: null,
total: vue.h(script$I, {
total: isAbsent(props.total) ? 0 : props.total,
}),
};
const components = props.layout.split(",").map((item) => item.trim());
let haveRightWrapper = false;
components.forEach((c) => {
if (c === "->") {
haveRightWrapper = true;
return;
}
if (!haveRightWrapper) {
rootChildren.push(TEMPLATE_MAP[c]);
} else {
rightWrapperChildren.push(TEMPLATE_MAP[c]);
}
});
if (haveRightWrapper && rightWrapperChildren.length > 0) {
rootChildren.unshift(rightWrapperRoot);
}
return vue.h(
"div",
{
role: "pagination",
"aria-label": "pagination",
class: [
"el-pagination",
{
"is-background": props.background,
"el-pagination--small": props.small,
},
],
},
rootChildren
);
};
},
});
const ElPagination = withInstall(Pagination);
var __defProp$n = Object.defineProperty;
var __defProps$h = Object.defineProperties;
var __getOwnPropDescs$h = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$n = Object.getOwnPropertySymbols;
var __hasOwnProp$n = Object.prototype.hasOwnProperty;
var __propIsEnum$n = Object.prototype.propertyIsEnumerable;
var __defNormalProp$n = (obj, key, value) =>
key in obj
? __defProp$n(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$n = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$n.call(b, prop)) __defNormalProp$n(a, prop, b[prop]);
if (__getOwnPropSymbols$n)
for (var prop of __getOwnPropSymbols$n(b)) {
if (__propIsEnum$n.call(b, prop)) __defNormalProp$n(a, prop, b[prop]);
}
return a;
};
var __spreadProps$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
const popconfirmProps = {
title: {
type: String,
},
confirmButtonText: {
type: String,
},
cancelButtonText: {
type: String,
},
confirmButtonType: __spreadProps$h(__spreadValues$n({}, buttonProps.type), {
default: "primary",
}),
cancelButtonType: __spreadProps$h(__spreadValues$n({}, buttonProps.type), {
default: "text",
}),
icon: {
type: String,
default: "el-icon-question",
},
iconColor: {
type: String,
default: "#f90",
},
hideIcon: {
type: Boolean,
default: false,
},
};
const popconfirmEmits = {
confirm: () => true,
cancel: () => true,
};
var script$G = vue.defineComponent({
name: "ElPopconfirm",
components: {
ElButton,
ElPopper: _Popper,
},
props: popconfirmProps,
emits: popconfirmEmits,
setup(props, { emit }) {
const { t } = useLocaleInject();
const visible = vue.ref(false);
const confirm = () => {
visible.value = false;
emit("confirm");
};
const cancel = () => {
visible.value = false;
emit("cancel");
};
const finalConfirmButtonText = vue.computed(
() => props.confirmButtonText || t("el.popconfirm.confirmButtonText")
);
const finalCancelButtonText = vue.computed(
() => props.cancelButtonText || t("el.popconfirm.cancelButtonText")
);
return {
Effect: exports.Effect,
visible,
finalConfirmButtonText,
finalCancelButtonText,
confirm,
cancel,
};
},
});
const _hoisted_1$q = { class: "el-popconfirm" };
const _hoisted_2$n = { class: "el-popconfirm__main" };
const _hoisted_3$m = { class: "el-popconfirm__action" };
function render$z(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_button = vue.resolveComponent("el-button");
const _component_el_popper = vue.resolveComponent("el-popper");
return (
vue.openBlock(),
vue.createBlock(
_component_el_popper,
{
visible: _ctx.visible,
"onUpdate:visible":
_cache[0] || (_cache[0] = ($event) => (_ctx.visible = $event)),
trigger: "click",
effect: _ctx.Effect.LIGHT,
"popper-class": "el-popover",
"append-to-body": "",
"fallback-placements": ["bottom", "top", "right", "left"],
},
{
trigger: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "reference"),
]),
default: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_1$q, [
vue.createElementVNode("p", _hoisted_2$n, [
!_ctx.hideIcon
? (vue.openBlock(),
vue.createElementBlock(
"i",
{
key: 0,
class: vue.normalizeClass([
_ctx.icon,
"el-popconfirm__icon",
]),
style: vue.normalizeStyle({ color: _ctx.iconColor }),
},
null,
6
))
: vue.createCommentVNode("v-if", true),
vue.createTextVNode(" " + vue.toDisplayString(_ctx.title), 1),
]),
vue.createElementVNode("div", _hoisted_3$m, [
vue.createVNode(
_component_el_button,
{
size: "mini",
type: _ctx.cancelButtonType,
onClick: _ctx.cancel,
},
{
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(_ctx.finalCancelButtonText),
1
),
]),
_: 1,
},
8,
["type", "onClick"]
),
vue.createVNode(
_component_el_button,
{
size: "mini",
type: _ctx.confirmButtonType,
onClick: _ctx.confirm,
},
{
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(_ctx.finalConfirmButtonText),
1
),
]),
_: 1,
},
8,
["type", "onClick"]
),
]),
]),
]),
_: 3,
},
8,
["visible", "effect"]
)
);
}
script$G.render = render$z;
script$G.__file = "packages/components/popconfirm/src/popconfirm.vue";
const ElPopconfirm = withInstall(script$G);
var __defProp$m = Object.defineProperty;
var __defProps$g = Object.defineProperties;
var __getOwnPropDescs$g = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$m = Object.getOwnPropertySymbols;
var __hasOwnProp$m = Object.prototype.hasOwnProperty;
var __propIsEnum$m = Object.prototype.propertyIsEnumerable;
var __defNormalProp$m = (obj, key, value) =>
key in obj
? __defProp$m(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$m = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$m.call(b, prop)) __defNormalProp$m(a, prop, b[prop]);
if (__getOwnPropSymbols$m)
for (var prop of __getOwnPropSymbols$m(b)) {
if (__propIsEnum$m.call(b, prop)) __defNormalProp$m(a, prop, b[prop]);
}
return a;
};
var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
const SHOW_EVENT = "show";
const HIDE_EVENT = "hide";
function usePopover(props, ctx) {
const zIndex = vue.ref(PopupManager.nextZIndex());
const width = vue.computed(() => {
if (isString$1(props.width)) {
return props.width;
}
return `${props.width}px`;
});
const popperStyle = vue.computed(() => {
return {
width: width.value,
zIndex: zIndex.value,
};
});
const popperProps = usePopper(props, ctx);
vue.watch(popperProps.visibility, (val) => {
if (val) {
zIndex.value = PopupManager.nextZIndex();
}
ctx.emit(val ? SHOW_EVENT : HIDE_EVENT);
});
return __spreadProps$g(__spreadValues$m({}, popperProps), {
popperStyle,
});
}
var __defProp$l = Object.defineProperty;
var __defProps$f = Object.defineProperties;
var __getOwnPropDescs$f = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
var __hasOwnProp$l = Object.prototype.hasOwnProperty;
var __propIsEnum$l = Object.prototype.propertyIsEnumerable;
var __defNormalProp$l = (obj, key, value) =>
key in obj
? __defProp$l(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$l = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$l.call(b, prop)) __defNormalProp$l(a, prop, b[prop]);
if (__getOwnPropSymbols$l)
for (var prop of __getOwnPropSymbols$l(b)) {
if (__propIsEnum$l.call(b, prop)) __defNormalProp$l(a, prop, b[prop]);
}
return a;
};
var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
const emits = [
"update:visible",
"after-enter",
"after-leave",
SHOW_EVENT,
HIDE_EVENT,
];
const NAME = "ElPopover";
const _hoist = { key: 0, class: "el-popover__title", role: "title" };
var script$F = vue.defineComponent({
name: NAME,
components: {
ElPopper: _Popper,
},
props: __spreadProps$f(__spreadValues$l({}, popperDefaultProps), {
content: {
type: String,
},
trigger: {
type: String,
default: "click",
},
title: {
type: String,
},
transition: {
type: String,
default: "fade-in-linear",
},
width: {
type: [String, Number],
default: 150,
},
appendToBody: {
type: Boolean,
default: true,
},
tabindex: [String, Number],
}),
emits,
setup(props, ctx) {
if (props.visible && !ctx.slots.reference) {
debugWarn(NAME);
}
const states = usePopover(props, ctx);
return states;
},
render() {
const { $slots } = this;
const trigger = $slots.reference ? $slots.reference() : null;
const title = renderIf(
!!this.title,
"div",
_hoist,
vue.toDisplayString(this.title),
PatchFlags.TEXT
);
const content = vue.renderSlot($slots, "default", {}, () => [
vue.createTextVNode(vue.toDisplayString(this.content), PatchFlags.TEXT),
]);
const {
events,
onAfterEnter,
onAfterLeave,
onPopperMouseEnter,
onPopperMouseLeave,
popperStyle,
popperId,
popperClass,
showArrow,
transition,
visibility,
tabindex,
} = this;
const kls = [
this.content ? "el-popover--plain" : "",
"el-popover",
popperClass,
].join(" ");
const popover = renderPopper(
{
effect: exports.Effect.LIGHT,
name: transition,
popperClass: kls,
popperStyle,
popperId,
visibility,
onMouseenter: onPopperMouseEnter,
onMouseleave: onPopperMouseLeave,
onAfterEnter,
onAfterLeave,
stopPopperMouseEvent: false,
},
[title, content, renderArrow(showArrow)]
);
const _trigger = trigger
? renderTrigger(
trigger,
__spreadValues$l(
{
ariaDescribedby: popperId,
ref: "triggerRef",
tabindex,
},
events
)
)
: vue.createCommentVNode("v-if", true);
return vue.h(vue.Fragment, null, [
this.trigger === "click"
? vue.withDirectives(_trigger, [[ClickOutside, this.hide]])
: _trigger,
vue.h(
vue.Teleport,
{
disabled: !this.appendToBody,
to: "body",
},
[popover]
),
]);
},
});
script$F.__file = "packages/components/popover/src/index.vue";
const attachEvents = (el, binding, vnode) => {
const _ref = binding.arg || binding.value;
const popover = vnode.dirs[0].instance.$refs[_ref];
if (popover) {
popover.triggerRef = el;
el.setAttribute("tabindex", popover.tabindex);
Object.entries(popover.events).forEach(([eventName, e]) => {
on(el, eventName.toLowerCase().slice(2), e);
});
}
};
var PopoverDirective = {
mounted(el, binding, vnode) {
attachEvents(el, binding, vnode);
},
updated(el, binding, vnode) {
attachEvents(el, binding, vnode);
},
};
const VPopover = "popover";
script$F.install = (app) => {
app.component(script$F.name, script$F);
};
PopoverDirective.install = (app) => {
app.directive(VPopover, PopoverDirective);
};
const _PopoverDirective = PopoverDirective;
script$F.directive = _PopoverDirective;
const _Popover = script$F;
const ElPopover = _Popover;
const ElPopoverDirective = _PopoverDirective;
var script$E = vue.defineComponent({
name: "ElProgress",
props: {
type: {
type: String,
default: "line",
validator: (val) => ["line", "circle", "dashboard"].indexOf(val) > -1,
},
percentage: {
type: Number,
default: 0,
required: true,
validator: (val) => val >= 0 && val <= 100,
},
status: {
type: String,
default: "",
validator: (val) =>
["", "success", "exception", "warning"].indexOf(val) > -1,
},
indeterminate: {
type: Boolean,
default: false,
},
duration: {
type: Number,
default: 3,
},
strokeWidth: {
type: Number,
default: 6,
},
strokeLinecap: {
type: String,
default: "round",
},
textInside: {
type: Boolean,
default: false,
},
width: {
type: Number,
default: 126,
},
showText: {
type: Boolean,
default: true,
},
color: {
type: [String, Array, Function],
default: "",
},
format: {
type: Function,
default: (percentage) => `${percentage}%`,
},
},
setup(props) {
const barStyle = vue.computed(() => {
return {
width: `${props.percentage}%`,
animationDuration: `${props.duration}s`,
backgroundColor: getCurrentColor(props.percentage),
};
});
const relativeStrokeWidth = vue.computed(() => {
return ((props.strokeWidth / props.width) * 100).toFixed(1);
});
const radius = vue.computed(() => {
if (props.type === "circle" || props.type === "dashboard") {
return parseInt(
`${50 - parseFloat(relativeStrokeWidth.value) / 2}`,
10
);
} else {
return 0;
}
});
const trackPath = vue.computed(() => {
const r = radius.value;
const isDashboard = props.type === "dashboard";
return `
M 50 50
m 0 ${isDashboard ? "" : "-"}${r}
a ${r} ${r} 0 1 1 0 ${isDashboard ? "-" : ""}${r * 2}
a ${r} ${r} 0 1 1 0 ${isDashboard ? "" : "-"}${r * 2}
`;
});
const perimeter = vue.computed(() => {
return 2 * Math.PI * radius.value;
});
const rate = vue.computed(() => {
return props.type === "dashboard" ? 0.75 : 1;
});
const strokeDashoffset = vue.computed(() => {
const offset = (-1 * perimeter.value * (1 - rate.value)) / 2;
return `${offset}px`;
});
const trailPathStyle = vue.computed(() => {
return {
strokeDasharray: `${perimeter.value * rate.value}px, ${
perimeter.value
}px`,
strokeDashoffset: strokeDashoffset.value,
};
});
const circlePathStyle = vue.computed(() => {
return {
strokeDasharray: `${
perimeter.value * rate.value * (props.percentage / 100)
}px, ${perimeter.value}px`,
strokeDashoffset: strokeDashoffset.value,
transition: "stroke-dasharray 0.6s ease 0s, stroke 0.6s ease",
};
});
const stroke = vue.computed(() => {
let ret;
if (props.color) {
ret = getCurrentColor(props.percentage);
} else {
switch (props.status) {
case "success":
ret = "#13ce66";
break;
case "exception":
ret = "#ff4949";
break;
case "warning":
ret = "#e6a23c";
break;
default:
ret = "#20a0ff";
}
}
return ret;
});
const iconClass = vue.computed(() => {
if (props.status === "warning") {
return "el-icon-warning";
}
if (props.type === "line") {
return props.status === "success"
? "el-icon-circle-check"
: "el-icon-circle-close";
} else {
return props.status === "success" ? "el-icon-check" : "el-icon-close";
}
});
const progressTextSize = vue.computed(() => {
return props.type === "line"
? 12 + props.strokeWidth * 0.4
: props.width * 0.111111 + 2;
});
const content = vue.computed(() => {
return props.format(props.percentage);
});
const getCurrentColor = (percentage) => {
var _a;
const { color } = props;
if (typeof color === "function") {
return color(percentage);
} else if (typeof color === "string") {
return color;
} else {
const span = 100 / color.length;
const seriesColors = color.map((seriesColor, index) => {
if (typeof seriesColor === "string") {
return {
color: seriesColor,
percentage: (index + 1) * span,
};
}
return seriesColor;
});
const colorArray = seriesColors.sort(
(a, b) => a.percentage - b.percentage
);
for (let i = 0; i < colorArray.length; i++) {
if (colorArray[i].percentage > percentage) {
return colorArray[i].color;
}
}
return (_a = colorArray[colorArray.length - 1]) == null
? void 0
: _a.color;
}
};
const slotData = vue.computed(() => {
return {
percentage: props.percentage,
};
});
return {
barStyle,
relativeStrokeWidth,
radius,
trackPath,
perimeter,
rate,
strokeDashoffset,
trailPathStyle,
circlePathStyle,
stroke,
iconClass,
progressTextSize,
content,
getCurrentColor,
slotData,
};
},
});
const _hoisted_1$p = ["aria-valuenow"];
const _hoisted_2$m = {
key: 0,
class: "el-progress-bar",
};
const _hoisted_3$l = {
key: 0,
class: "el-progress-bar__innerText",
};
const _hoisted_4$b = { viewBox: "0 0 100 100" };
const _hoisted_5$9 = ["d", "stroke-width"];
const _hoisted_6$8 = ["d", "stroke", "stroke-linecap", "stroke-width"];
const _hoisted_7$4 = { key: 0 };
function render$y(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
class: vue.normalizeClass([
"el-progress",
[
`el-progress--${_ctx.type}`,
_ctx.status ? `is-${_ctx.status}` : "",
{
"el-progress--without-text": !_ctx.showText,
"el-progress--text-inside": _ctx.textInside,
},
],
]),
role: "progressbar",
"aria-valuenow": _ctx.percentage,
"aria-valuemin": "0",
"aria-valuemax": "100",
},
[
_ctx.type === "line"
? (vue.openBlock(),
vue.createElementBlock("div", _hoisted_2$m, [
vue.createElementVNode(
"div",
{
class: "el-progress-bar__outer",
style: vue.normalizeStyle({
height: `${_ctx.strokeWidth}px`,
}),
},
[
vue.createElementVNode(
"div",
{
class: vue.normalizeClass([
"el-progress-bar__inner",
{
"el-progress-bar__inner--indeterminate":
_ctx.indeterminate,
},
]),
style: vue.normalizeStyle(_ctx.barStyle),
},
[
(_ctx.showText || _ctx.$slots.default) &&
_ctx.textInside
? (vue.openBlock(),
vue.createElementBlock("div", _hoisted_3$l, [
vue.renderSlot(
_ctx.$slots,
"default",
vue.normalizeProps(
vue.guardReactiveProps(_ctx.slotData)
),
() => [
vue.createElementVNode(
"span",
null,
vue.toDisplayString(_ctx.content),
1
),
]
),
]))
: vue.createCommentVNode("v-if", true),
],
6
),
],
4
),
]))
: (vue.openBlock(),
vue.createElementBlock(
"div",
{
key: 1,
class: "el-progress-circle",
style: vue.normalizeStyle({
height: `${_ctx.width}px`,
width: `${_ctx.width}px`,
}),
},
[
(vue.openBlock(),
vue.createElementBlock("svg", _hoisted_4$b, [
vue.createElementVNode(
"path",
{
class: "el-progress-circle__track",
d: _ctx.trackPath,
stroke: "#e5e9f2",
"stroke-width": _ctx.relativeStrokeWidth,
fill: "none",
style: vue.normalizeStyle(_ctx.trailPathStyle),
},
null,
12,
_hoisted_5$9
),
vue.createElementVNode(
"path",
{
class: "el-progress-circle__path",
d: _ctx.trackPath,
stroke: _ctx.stroke,
fill: "none",
"stroke-linecap": _ctx.strokeLinecap,
"stroke-width": _ctx.percentage
? _ctx.relativeStrokeWidth
: 0,
style: vue.normalizeStyle(_ctx.circlePathStyle),
},
null,
12,
_hoisted_6$8
),
])),
],
4
)),
(_ctx.showText || _ctx.$slots.default) && !_ctx.textInside
? (vue.openBlock(),
vue.createElementBlock(
"div",
{
key: 2,
class: "el-progress__text",
style: vue.normalizeStyle({
fontSize: `${_ctx.progressTextSize}px`,
}),
},
[
vue.renderSlot(
_ctx.$slots,
"default",
vue.normalizeProps(vue.guardReactiveProps(_ctx.slotData)),
() => [
!_ctx.status
? (vue.openBlock(),
vue.createElementBlock(
"span",
_hoisted_7$4,
vue.toDisplayString(_ctx.content),
1
))
: (vue.openBlock(),
vue.createElementBlock(
"i",
{
key: 1,
class: vue.normalizeClass(_ctx.iconClass),
},
null,
2
)),
]
),
],
4
))
: vue.createCommentVNode("v-if", true),
],
10,
_hoisted_1$p
)
);
}
script$E.render = render$y;
script$E.__file = "packages/components/progress/src/index.vue";
script$E.install = (app) => {
app.component(script$E.name, script$E);
};
const _Progress = script$E;
const ElProgress = _Progress;
var script$D = vue.defineComponent({
name: "ElRate",
props: {
modelValue: {
type: Number,
default: 0,
},
lowThreshold: {
type: Number,
default: 2,
},
highThreshold: {
type: Number,
default: 4,
},
max: {
type: Number,
default: 5,
},
colors: {
type: [Array, Object],
default: () => ["#F7BA2A", "#F7BA2A", "#F7BA2A"],
},
voidColor: {
type: String,
default: "#C6D1DE",
},
disabledVoidColor: {
type: String,
default: "#EFF2F7",
},
iconClasses: {
type: [Array, Object],
default: () => [
"el-icon-star-on",
"el-icon-star-on",
"el-icon-star-on",
],
},
voidIconClass: {
type: String,
default: "el-icon-star-off",
},
disabledVoidIconClass: {
type: String,
default: "el-icon-star-on",
},
disabled: {
type: Boolean,
default: false,
},
allowHalf: {
type: Boolean,
default: false,
},
showText: {
type: Boolean,
default: false,
},
showScore: {
type: Boolean,
default: false,
},
textColor: {
type: String,
default: "#1f2d3d",
},
texts: {
type: Array,
default: () => [
"Extremely bad",
"Disappointed",
"Fair",
"Satisfied",
"Surprise",
],
},
scoreTemplate: {
type: String,
default: "{value}",
},
},
emits: [UPDATE_MODEL_EVENT, "change"],
setup(props, { emit }) {
const elForm = vue.inject(elFormKey, {});
const currentValue = vue.ref(props.modelValue);
const rateDisabled = vue.computed(
() => props.disabled || elForm.disabled
);
const text = vue.computed(() => {
let result = "";
if (props.showScore) {
result = props.scoreTemplate.replace(
/\{\s*value\s*\}/,
rateDisabled.value ? `${props.modelValue}` : `${currentValue.value}`
);
} else if (props.showText) {
result = props.texts[Math.ceil(currentValue.value) - 1];
}
return result;
});
function getValueFromMap(value, map) {
const matchedKeys = Object.keys(map)
.filter((key) => {
const val = map[key];
const excluded = isObject$2(val) ? val.excluded : false;
return excluded ? value < key : value <= key;
})
.sort((a, b) => a - b);
const matchedValue = map[matchedKeys[0]];
return isObject$2(matchedValue)
? matchedValue.value
: matchedValue || "";
}
const valueDecimal = vue.computed(
() => props.modelValue * 100 - Math.floor(props.modelValue) * 100
);
const colorMap = vue.computed(() =>
isArray$1(props.colors)
? {
[props.lowThreshold]: props.colors[0],
[props.highThreshold]: { value: props.colors[1], excluded: true },
[props.max]: props.colors[2],
}
: props.colors
);
const activeColor = vue.computed(() =>
getValueFromMap(currentValue.value, colorMap.value)
);
const decimalStyle = vue.computed(() => {
let width = "";
if (rateDisabled.value) {
width = `${valueDecimal.value}%`;
} else if (props.allowHalf) {
width = "50%";
}
return {
color: activeColor.value,
width,
};
});
const classMap = vue.computed(() =>
isArray$1(props.iconClasses)
? {
[props.lowThreshold]: props.iconClasses[0],
[props.highThreshold]: {
value: props.iconClasses[1],
excluded: true,
},
[props.max]: props.iconClasses[2],
}
: props.iconClasses
);
const decimalIconClass = vue.computed(() =>
getValueFromMap(props.modelValue, classMap.value)
);
const voidClass = vue.computed(() =>
rateDisabled.value ? props.disabledVoidIconClass : props.voidIconClass
);
const activeClass = vue.computed(() =>
getValueFromMap(currentValue.value, classMap.value)
);
const classes = vue.computed(() => {
const result = Array(props.max);
const threshold = currentValue.value;
result.fill(activeClass.value, 0, threshold);
result.fill(voidClass.value, threshold, props.max);
return result;
});
const pointerAtLeftHalf = vue.ref(true);
vue.watch(
() => props.modelValue,
(val) => {
currentValue.value = val;
pointerAtLeftHalf.value =
props.modelValue !== Math.floor(props.modelValue);
}
);
function showDecimalIcon(item) {
const showWhenDisabled =
rateDisabled.value &&
valueDecimal.value > 0 &&
item - 1 < props.modelValue &&
item > props.modelValue;
const showWhenAllowHalf =
props.allowHalf &&
pointerAtLeftHalf.value &&
item - 0.5 <= currentValue.value &&
item > currentValue.value;
return showWhenDisabled || showWhenAllowHalf;
}
function getIconStyle(item) {
const voidColor = rateDisabled.value
? props.disabledVoidColor
: props.voidColor;
return {
color: item <= currentValue.value ? activeColor.value : voidColor,
};
}
function selectValue(value) {
if (rateDisabled.value) {
return;
}
if (props.allowHalf && pointerAtLeftHalf.value) {
emit(UPDATE_MODEL_EVENT, currentValue.value);
if (props.modelValue !== currentValue.value) {
emit("change", currentValue.value);
}
} else {
emit(UPDATE_MODEL_EVENT, value);
if (props.modelValue !== value) {
emit("change", value);
}
}
}
function handleKey(e) {
if (rateDisabled.value) {
return;
}
let _currentValue = currentValue.value;
const code = e.code;
if (code === EVENT_CODE.up || code === EVENT_CODE.right) {
if (props.allowHalf) {
_currentValue += 0.5;
} else {
_currentValue += 1;
}
e.stopPropagation();
e.preventDefault();
} else if (code === EVENT_CODE.left || code === EVENT_CODE.down) {
if (props.allowHalf) {
_currentValue -= 0.5;
} else {
_currentValue -= 1;
}
e.stopPropagation();
e.preventDefault();
}
_currentValue = _currentValue < 0 ? 0 : _currentValue;
_currentValue = _currentValue > props.max ? props.max : _currentValue;
emit(UPDATE_MODEL_EVENT, _currentValue);
emit("change", _currentValue);
return _currentValue;
}
const hoverIndex = vue.ref(-1);
function setCurrentValue(value, event) {
if (rateDisabled.value) {
return;
}
if (props.allowHalf) {
let target = event.target;
if (hasClass(target, "el-rate__item")) {
target = target.querySelector(".el-rate__icon");
}
if (hasClass(target, "el-rate__decimal")) {
target = target.parentNode;
}
pointerAtLeftHalf.value = event.offsetX * 2 <= target.clientWidth;
currentValue.value = pointerAtLeftHalf.value ? value - 0.5 : value;
} else {
currentValue.value = value;
}
hoverIndex.value = value;
}
function resetCurrentValue() {
if (rateDisabled.value) {
return;
}
if (props.allowHalf) {
pointerAtLeftHalf.value =
props.modelValue !== Math.floor(props.modelValue);
}
currentValue.value = props.modelValue;
hoverIndex.value = -1;
}
if (!props.modelValue) {
emit(UPDATE_MODEL_EVENT, 0);
}
return {
hoverIndex,
currentValue,
rateDisabled,
text,
decimalStyle,
decimalIconClass,
classes,
showDecimalIcon,
getIconStyle,
selectValue,
handleKey,
setCurrentValue,
resetCurrentValue,
};
},
});
const _hoisted_1$o = ["aria-valuenow", "aria-valuetext", "aria-valuemax"];
const _hoisted_2$l = ["onMousemove", "onClick"];
function render$x(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
class: "el-rate",
role: "slider",
"aria-valuenow": _ctx.currentValue,
"aria-valuetext": _ctx.text,
"aria-valuemin": "0",
"aria-valuemax": _ctx.max,
tabindex: "0",
onKeydown:
_cache[1] ||
(_cache[1] = (...args) =>
_ctx.handleKey && _ctx.handleKey(...args)),
},
[
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.max, (item, key) => {
return (
vue.openBlock(),
vue.createElementBlock(
"span",
{
key,
class: "el-rate__item",
style: vue.normalizeStyle({
cursor: _ctx.rateDisabled ? "auto" : "pointer",
}),
onMousemove: ($event) => _ctx.setCurrentValue(item, $event),
onMouseleave:
_cache[0] ||
(_cache[0] = (...args) =>
_ctx.resetCurrentValue &&
_ctx.resetCurrentValue(...args)),
onClick: ($event) => _ctx.selectValue(item),
},
[
vue.createElementVNode(
"i",
{
class: vue.normalizeClass([
[
_ctx.classes[item - 1],
{ hover: _ctx.hoverIndex === item },
],
"el-rate__icon",
]),
style: vue.normalizeStyle(_ctx.getIconStyle(item)),
},
[
_ctx.showDecimalIcon(item)
? (vue.openBlock(),
vue.createElementBlock(
"i",
{
key: 0,
class: vue.normalizeClass([
_ctx.decimalIconClass,
"el-rate__decimal",
]),
style: vue.normalizeStyle(_ctx.decimalStyle),
},
null,
6
))
: vue.createCommentVNode("v-if", true),
],
6
),
],
44,
_hoisted_2$l
)
);
}),
128
)),
_ctx.showText || _ctx.showScore
? (vue.openBlock(),
vue.createElementBlock(
"span",
{
key: 0,
class: "el-rate__text",
style: vue.normalizeStyle({ color: _ctx.textColor }),
},
vue.toDisplayString(_ctx.text),
5
))
: vue.createCommentVNode("v-if", true),
],
40,
_hoisted_1$o
)
);
}
script$D.render = render$x;
script$D.__file = "packages/components/rate/src/index.vue";
script$D.install = (app) => {
app.component(script$D.name, script$D);
};
const _Rate = script$D;
const ElRate = _Rate;
var script$C = vue.defineComponent({
name: "IconSuccess",
});
const _hoisted_1$n = {
viewBox: "0 0 48 48",
xmlns: "http://www.w3.org/2000/svg",
};
const _hoisted_2$k = /* @__PURE__ */ vue.createElementVNode(
"path",
{
d: "M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M34.5548098,16.4485711 C33.9612228,15.8504763 32.9988282,15.8504763 32.4052412,16.4485711 L32.4052412,16.4485711 L21.413757,27.5805811 L21.413757,27.5805811 L21.4034642,27.590855 C21.0097542,27.9781674 20.3766105,27.9729811 19.9892981,27.5792711 L19.9892981,27.5792711 L15.5947588,23.1121428 C15.0011718,22.514048 14.0387772,22.514048 13.4451902,23.1121428 C12.8516033,23.7102376 12.8516033,24.6799409 13.4451902,25.2780357 L13.4451902,25.2780357 L19.6260786,31.5514289 C20.2196656,32.1495237 21.1820602,32.1495237 21.7756472,31.5514289 L21.7756472,31.5514289 L34.5548098,18.614464 C35.1483967,18.0163692 35.1483967,17.0466659 34.5548098,16.4485711 Z",
},
null,
-1
);
const _hoisted_3$k = [_hoisted_2$k];
function render$w(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$n, _hoisted_3$k)
);
}
script$C.render = render$w;
script$C.__file = "packages/components/result/src/icon-success.vue";
var script$B = vue.defineComponent({
name: "IconError",
});
const _hoisted_1$m = {
viewBox: "0 0 48 48",
xmlns: "http://www.w3.org/2000/svg",
};
const _hoisted_2$j = /* @__PURE__ */ vue.createElementVNode(
"path",
{
d: "M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.57818,15.42182 C32.0157534,14.8593933 31.1038797,14.8593933 30.541453,15.42182 L30.541453,15.42182 L24.0006789,21.9625941 L17.458547,15.42182 C16.8961203,14.8593933 15.9842466,14.8593933 15.42182,15.42182 C14.8593933,15.9842466 14.8593933,16.8961203 15.42182,17.458547 L15.42182,17.458547 L21.9639519,23.9993211 L15.42182,30.541453 C14.8593933,31.1038797 14.8593933,32.0157534 15.42182,32.57818 C15.9842466,33.1406067 16.8961203,33.1406067 17.458547,32.57818 L17.458547,32.57818 L24.0006789,26.0360481 L30.541453,32.57818 C31.1038797,33.1406067 32.0157534,33.1406067 32.57818,32.57818 C33.1406067,32.0157534 33.1406067,31.1038797 32.57818,30.541453 L32.57818,30.541453 L26.0374059,23.9993211 L32.57818,17.458547 C33.1406067,16.8961203 33.1406067,15.9842466 32.57818,15.42182 Z",
},
null,
-1
);
const _hoisted_3$j = [_hoisted_2$j];
function render$v(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$m, _hoisted_3$j)
);
}
script$B.render = render$v;
script$B.__file = "packages/components/result/src/icon-error.vue";
var script$A = vue.defineComponent({
name: "IconWarning",
});
const _hoisted_1$l = {
viewBox: "0 0 48 48",
xmlns: "http://www.w3.org/2000/svg",
};
const _hoisted_2$i = /* @__PURE__ */ vue.createElementVNode(
"path",
{
d: "M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M24,31 C22.8954305,31 22,31.8954305 22,33 C22,34.1045695 22.8954305,35 24,35 C25.1045695,35 26,34.1045695 26,33 C26,31.8954305 25.1045695,31 24,31 Z M24,14 C23.1715729,14 22.5,14.6715729 22.5,15.5 L22.5,15.5 L22.5,27.5 C22.5,28.3284271 23.1715729,29 24,29 C24.8284271,29 25.5,28.3284271 25.5,27.5 L25.5,27.5 L25.5,15.5 C25.5,14.6715729 24.8284271,14 24,14 Z",
},
null,
-1
);
const _hoisted_3$i = [_hoisted_2$i];
function render$u(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$l, _hoisted_3$i)
);
}
script$A.render = render$u;
script$A.__file = "packages/components/result/src/icon-warning.vue";
var script$z = vue.defineComponent({
name: "IconInfo",
});
const _hoisted_1$k = {
viewBox: "0 0 48 48",
xmlns: "http://www.w3.org/2000/svg",
};
const _hoisted_2$h = /* @__PURE__ */ vue.createElementVNode(
"path",
{
d: "M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M24,19 L21,19 C20.1715729,19 19.5,19.6715729 19.5,20.5 C19.5,21.3284271 20.1715729,22 21,22 L21,22 L22.5,22 L22.5,31 L21,31 C20.1715729,31 19.5,31.6715729 19.5,32.5 C19.5,33.3284271 20.1715729,34 21,34 L21,34 L27,34 C27.8284271,34 28.5,33.3284271 28.5,32.5 C28.5,31.6715729 27.8284271,31 27,31 L27,31 L25.5,31 L25.5,20.5 C25.5,19.6715729 24.8284271,19 24,19 L24,19 Z M24,13 C22.8954305,13 22,13.8954305 22,15 C22,16.1045695 22.8954305,17 24,17 C25.1045695,17 26,16.1045695 26,15 C26,13.8954305 25.1045695,13 24,13 Z",
},
null,
-1
);
const _hoisted_3$h = [_hoisted_2$h];
function render$t(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$k, _hoisted_3$h)
);
}
script$z.render = render$t;
script$z.__file = "packages/components/result/src/icon-info.vue";
const IconMap = {
success: "icon-success",
warning: "icon-warning",
error: "icon-error",
info: "icon-info",
};
var script$y = vue.defineComponent({
name: "ElResult",
components: {
[script$C.name]: script$C,
[script$B.name]: script$B,
[script$A.name]: script$A,
[script$z.name]: script$z,
},
props: {
title: {
type: String,
default: "",
},
subTitle: {
type: String,
default: "",
},
icon: {
type: String,
default: "info",
},
},
setup(props) {
const iconElement = vue.computed(() => {
const icon = props.icon;
return icon && IconMap[icon] ? IconMap[icon] : "icon-info";
});
return {
iconElement,
};
},
});
const _hoisted_1$j = { class: "el-result" };
const _hoisted_2$g = { class: "el-result__icon" };
const _hoisted_3$g = {
key: 0,
class: "el-result__title",
};
const _hoisted_4$a = {
key: 1,
class: "el-result__subtitle",
};
const _hoisted_5$8 = {
key: 2,
class: "el-result__extra",
};
function render$s(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock("div", _hoisted_1$j, [
vue.createElementVNode("div", _hoisted_2$g, [
vue.renderSlot(_ctx.$slots, "icon", {}, () => [
(vue.openBlock(),
vue.createBlock(
vue.resolveDynamicComponent(_ctx.iconElement),
{
class: vue.normalizeClass(_ctx.iconElement),
},
null,
8,
["class"]
)),
]),
]),
_ctx.title || _ctx.$slots.title
? (vue.openBlock(),
vue.createElementBlock("div", _hoisted_3$g, [
vue.renderSlot(_ctx.$slots, "title", {}, () => [
vue.createElementVNode(
"p",
null,
vue.toDisplayString(_ctx.title),
1
),
]),
]))
: vue.createCommentVNode("v-if", true),
_ctx.subTitle || _ctx.$slots.subTitle
? (vue.openBlock(),
vue.createElementBlock("div", _hoisted_4$a, [
vue.renderSlot(_ctx.$slots, "subTitle", {}, () => [
vue.createElementVNode(
"p",
null,
vue.toDisplayString(_ctx.subTitle),
1
),
]),
]))
: vue.createCommentVNode("v-if", true),
_ctx.$slots.extra
? (vue.openBlock(),
vue.createElementBlock("div", _hoisted_5$8, [
vue.renderSlot(_ctx.$slots, "extra"),
]))
: vue.createCommentVNode("v-if", true),
])
);
}
script$y.render = render$s;
script$y.__file = "packages/components/result/src/index.vue";
script$y.install = (app) => {
app.component(script$y.name, script$y);
};
const _Result = script$y;
const ElResult = _Result;
var Row = vue.defineComponent({
name: "ElRow",
props: {
tag: {
type: String,
default: "div",
},
gutter: {
type: Number,
default: 0,
},
justify: {
type: String,
default: "start",
},
align: {
type: String,
default: "top",
},
},
setup(props, { slots }) {
const gutter = vue.computed(() => props.gutter);
vue.provide("ElRow", {
gutter,
});
const style = vue.computed(() => {
const ret = {
marginLeft: "",
marginRight: "",
};
if (props.gutter) {
ret.marginLeft = `-${props.gutter / 2}px`;
ret.marginRight = ret.marginLeft;
}
return ret;
});
return () => {
var _a;
return vue.h(
props.tag,
{
class: [
"el-row",
props.justify !== "start" ? `is-justify-${props.justify}` : "",
props.align !== "top" ? `is-align-${props.align}` : "",
],
style: style.value,
},
(_a = slots.default) == null ? void 0 : _a.call(slots)
);
};
},
});
const _Row = Row;
_Row.install = (app) => {
app.component(_Row.name, _Row);
};
const ElRow = _Row;
/** Error message constants. */
var FUNC_ERROR_TEXT = "Expected a function";
/**
* Creates a function that memoizes the result of `func`. If `resolver` is
* provided, it determines the cache key for storing the result based on the
* arguments provided to the memoized function. By default, the first argument
* provided to the memoized function is used as the map cache key. The `func`
* is invoked with the `this` binding of the memoized function.
*
* **Note:** The cache is exposed as the `cache` property on the memoized
* function. Its creation may be customized by replacing the `_.memoize.Cache`
* constructor with one whose instances implement the
* [`Map`](http://ecma-international.org/ecma-262/7.0/#sec-properties-of-the-map-prototype-object)
* method interface of `clear`, `delete`, `get`, `has`, and `set`.
*
* @static
* @memberOf _
* @since 0.1.0
* @category Function
* @param {Function} func The function to have its output memoized.
* @param {Function} [resolver] The function to resolve the cache key.
* @returns {Function} Returns the new memoized function.
* @example
*
* var object = { 'a': 1, 'b': 2 };
* var other = { 'c': 3, 'd': 4 };
*
* var values = _.memoize(_.values);
* values(object);
* // => [1, 2]
*
* values(other);
* // => [3, 4]
*
* object.a = 2;
* values(object);
* // => [1, 2]
*
* // Modify the result cache.
* values.cache.set(object, ['a', 'b']);
* values(object);
* // => ['a', 'b']
*
* // Replace `_.memoize.Cache`.
* _.memoize.Cache = WeakMap;
*/
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;
}
// Expose `MapCache`.
memoize.Cache = _MapCache;
var memoize_1 = memoize;
var safeIsNaN =
Number.isNaN ||
function ponyfill(value) {
return typeof value === "number" && value !== value;
};
function isEqual(first, second) {
if (first === second) {
return true;
}
if (safeIsNaN(first) && safeIsNaN(second)) {
return true;
}
return false;
}
function areInputsEqual(newInputs, lastInputs) {
if (newInputs.length !== lastInputs.length) {
return false;
}
for (var i = 0; i < newInputs.length; i++) {
if (!isEqual(newInputs[i], lastInputs[i])) {
return false;
}
}
return true;
}
function memoizeOne(resultFn, isEqual) {
if (isEqual === void 0) {
isEqual = areInputsEqual;
}
var lastThis;
var lastArgs = [];
var lastResult;
var calledOnce = false;
function memoized() {
var newArgs = [];
for (var _i = 0; _i < arguments.length; _i++) {
newArgs[_i] = arguments[_i];
}
if (calledOnce && lastThis === this && isEqual(newArgs, lastArgs)) {
return lastResult;
}
lastResult = resultFn.apply(this, newArgs);
calledOnce = true;
lastThis = this;
lastArgs = newArgs;
return lastResult;
}
return memoized;
}
const useCache = () => {
const vm = vue.getCurrentInstance();
const props = vm.proxy.$props;
return vue.computed(() => {
const _getItemStyleCache = (_, __, ___) => ({});
return props.perfMode
? memoize_1(_getItemStyleCache)
: memoizeOne(_getItemStyleCache);
});
};
let rAF = (fn) => setTimeout(fn, 16);
let cAF = (handle) => clearTimeout(handle);
if (!isServer) {
rAF = (fn) => window.requestAnimationFrame(fn);
cAF = (handle) => window.cancelAnimationFrame(handle);
}
const DEFAULT_DYNAMIC_LIST_ITEM_SIZE = 50;
const ITEM_RENDER_EVT = "item-rendered";
const SCROLL_EVT = "scroll";
const FORWARD = "forward";
const BACKWARD = "backward";
const AUTO_ALIGNMENT = "auto";
const SMART_ALIGNMENT = "smart";
const START_ALIGNMENT = "start";
const CENTERED_ALIGNMENT = "center";
const END_ALIGNMENT = "end";
const HORIZONTAL = "horizontal";
const VERTICAL = "vertical";
const LTR = "ltr";
const RTL = "rtl";
const RTL_OFFSET_NAG = "negative";
const RTL_OFFSET_POS_ASC = "positive-ascending";
const RTL_OFFSET_POS_DESC = "positive-descending";
const ScrollbarDirKey = {
[HORIZONTAL]: "left",
[VERTICAL]: "top",
};
const SCROLLBAR_MIN_SIZE = 20;
const getScrollDir = (prev, cur) => (prev < cur ? FORWARD : BACKWARD);
const isHorizontal = (dir) =>
dir === LTR || dir === RTL || dir === HORIZONTAL;
const isRTL = (dir) => dir === RTL;
let cachedRTLResult = null;
function getRTLOffsetType(recalculate = false) {
if (cachedRTLResult === null || recalculate) {
const outerDiv = document.createElement("div");
const outerStyle = outerDiv.style;
outerStyle.width = "50px";
outerStyle.height = "50px";
outerStyle.overflow = "scroll";
outerStyle.direction = "rtl";
const innerDiv = document.createElement("div");
const innerStyle = innerDiv.style;
innerStyle.width = "100px";
innerStyle.height = "100px";
outerDiv.appendChild(innerDiv);
document.body.appendChild(outerDiv);
if (outerDiv.scrollLeft > 0) {
cachedRTLResult = RTL_OFFSET_POS_DESC;
} else {
outerDiv.scrollLeft = 1;
if (outerDiv.scrollLeft === 0) {
cachedRTLResult = RTL_OFFSET_NAG;
} else {
cachedRTLResult = RTL_OFFSET_POS_ASC;
}
}
document.body.removeChild(outerDiv);
return cachedRTLResult;
}
return cachedRTLResult;
}
function renderThumbStyle({ move, size, bar }, layout) {
const style = {};
const translate = `translate${bar.axis}(${move}px)`;
style[bar.size] = size;
style.transform = translate;
style.msTransform = translate;
style.webkitTransform = translate;
if (layout === "horizontal") {
style.height = "100%";
} else {
style.width = "100%";
}
return style;
}
const isFF =
typeof navigator !== "undefined" &&
isObject$2(navigator) &&
/Firefox/i.test(navigator.userAgent);
const LayoutKeys = {
[HORIZONTAL]: "deltaX",
[VERTICAL]: "deltaY",
};
const useWheel = ({ atEndEdge, atStartEdge, layout }, onWheelDelta) => {
let frameHandle = null;
let offset = 0;
const hasReachedEdge = (offset2) => {
const edgeReached =
(offset2 < 0 && atStartEdge.value) || (offset2 > 0 && atEndEdge.value);
return edgeReached;
};
const onWheel = (e) => {
cAF(frameHandle);
const newOffset = e[LayoutKeys[layout.value]];
if (hasReachedEdge(offset) && hasReachedEdge(offset + newOffset)) return;
offset += newOffset;
if (!isFF) {
e.preventDefault();
}
frameHandle = rAF(() => {
onWheelDelta(offset);
offset = 0;
});
};
return {
hasReachedEdge,
onWheel,
};
};
var __defProp$k = Object.defineProperty;
var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
var __hasOwnProp$k = Object.prototype.hasOwnProperty;
var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
var __defNormalProp$k = (obj, key, value) =>
key in obj
? __defProp$k(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$k = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$k.call(b, prop)) __defNormalProp$k(a, prop, b[prop]);
if (__getOwnPropSymbols$k)
for (var prop of __getOwnPropSymbols$k(b)) {
if (__propIsEnum$k.call(b, prop)) __defNormalProp$k(a, prop, b[prop]);
}
return a;
};
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
const itemSize = {
type: [Number, Function],
required: true,
};
const estimatedItemSize = {
type: [Number],
};
const cache = {
type: Number,
default: 2,
};
const direction = {
type: String,
default: "ltr",
validator: (val) => {
return val === LTR || val === RTL;
},
};
const initScrollOffset = {
type: Number,
default: 0,
};
const total = {
type: Number,
required: true,
};
const layout = {
type: String,
default: VERTICAL,
};
const virtualizedProps = {
className: {
type: String,
default: "",
},
containerElement: {
type: [String, Object],
default: "div",
},
data: {
type: [Array],
default: () => [],
},
direction,
height: {
type: [String, Number],
required: true,
validator: isNumber,
},
innerElement: {
type: [String, Object],
default: "div",
},
style: {
type: [Object, String, Array],
},
useIsScrolling: {
type: Boolean,
default: false,
},
width: {
type: [Number, String],
required: true,
validator: isNumber,
},
perfMode: {
type: Boolean,
default: true,
},
};
const virtualizedListProps = __spreadValues$k(
{
cache,
estimatedItemSize,
layout,
initScrollOffset,
total,
itemSize,
},
virtualizedProps
);
const virtualizedGridProps = __spreadValues$k(
{
columnCache: cache,
columnWidth: itemSize,
estimatedColumnWidth: estimatedItemSize,
estimatedRowHeight: estimatedItemSize,
initScrollLeft: initScrollOffset,
initScrollTop: initScrollOffset,
rowCache: cache,
rowHeight: itemSize,
totalColumn: total,
totalRow: total,
},
virtualizedProps
);
const virtualizedScrollbarProps = {
layout,
total,
ratio: {
type: Number,
required: true,
},
clientSize: {
type: Number,
required: true,
},
scrollFrom: {
type: Number,
required: true,
},
visible: Boolean,
};
var __defProp$j = Object.defineProperty;
var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
var __hasOwnProp$j = Object.prototype.hasOwnProperty;
var __propIsEnum$j = Object.prototype.propertyIsEnumerable;
var __defNormalProp$j = (obj, key, value) =>
key in obj
? __defProp$j(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$j = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$j.call(b, prop)) __defNormalProp$j(a, prop, b[prop]);
if (__getOwnPropSymbols$j)
for (var prop of __getOwnPropSymbols$j(b)) {
if (__propIsEnum$j.call(b, prop)) __defNormalProp$j(a, prop, b[prop]);
}
return a;
};
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
const ScrollBar = vue.defineComponent({
name: "ElVirtualScrollBar",
props: virtualizedScrollbarProps,
emits: ["scroll", "start-move", "stop-move"],
setup(props, { emit }) {
const GAP = 4;
const trackRef = vue.ref();
const thumbRef = vue.ref();
let frameHandle = null;
let onselectstartStore = null;
const state = vue.reactive({
isDragging: false,
traveled: 0,
});
const bar = vue.computed(() => BAR_MAP[props.layout]);
const trackSize = vue.computed(() => props.clientSize - GAP);
const trackStyle = vue.computed(() =>
__spreadValues$j(
{
position: "absolute",
width: HORIZONTAL === props.layout ? `${trackSize.value}px` : "6px",
height:
HORIZONTAL === props.layout ? "6px" : `${trackSize.value}px`,
[ScrollbarDirKey[props.layout]]: "2px",
right: "2px",
bottom: "2px",
borderRadius: "4px",
},
props.visible ? {} : { display: "none" }
)
);
const thumbSize = vue.computed(() => {
const ratio = props.ratio;
const clientSize = props.clientSize;
if (ratio >= 100) {
return Number.POSITIVE_INFINITY;
}
if (ratio >= 50) {
return (ratio * clientSize) / 100;
}
const SCROLLBAR_MAX_SIZE = clientSize / 3;
return Math.floor(
Math.min(
Math.max(ratio * clientSize, SCROLLBAR_MIN_SIZE),
SCROLLBAR_MAX_SIZE
)
);
});
const thumbStyle = vue.computed(() => {
if (!Number.isFinite(thumbSize.value)) {
return {
display: "none",
};
}
const thumb = `${thumbSize.value}px`;
const style = renderThumbStyle(
{
bar: bar.value,
size: thumb,
move: state.traveled,
},
props.layout
);
return style;
});
const totalSteps = vue.computed(() =>
Math.floor(props.clientSize - thumbSize.value - GAP)
);
const attachEvents = () => {
on(window, "mousemove", onMouseMove);
on(window, "mouseup", onMouseUp);
const thumbEl = vue.unref(thumbRef);
if (!thumbEl) return;
onselectstartStore = document.onselectstart;
document.onselectstart = () => false;
on(thumbEl, "touchmove", onMouseMove);
on(thumbEl, "touchend", onMouseUp);
};
const detachEvents = () => {
off(window, "mousemove", onMouseMove);
off(window, "mouseup", onMouseUp);
document.onselectstart = onselectstartStore;
onselectstartStore = null;
const thumbEl = vue.unref(thumbRef);
if (!thumbEl) return;
off(thumbEl, "touchmove", onMouseMove);
off(thumbEl, "touchend", onMouseUp);
};
const onThumbMouseDown = (e) => {
e.stopImmediatePropagation();
if (e.ctrlKey || [1, 2].includes(e.button)) {
return;
}
state.isDragging = true;
state[bar.value.axis] =
e.currentTarget[bar.value.offset] -
(e[bar.value.client] -
e.currentTarget.getBoundingClientRect()[bar.value.direction]);
emit("start-move");
attachEvents();
};
const onMouseUp = () => {
state.isDragging = false;
state[bar.value.axis] = 0;
emit("stop-move");
detachEvents();
};
const onMouseMove = (e) => {
const { isDragging } = state;
if (!isDragging) return;
if (!thumbRef.value || !trackRef.value) return;
const prevPage = state[bar.value.axis];
if (!prevPage) return;
cAF(frameHandle);
const offset =
(trackRef.value.getBoundingClientRect()[bar.value.direction] -
e[bar.value.client]) *
-1;
const thumbClickPosition = thumbRef.value[bar.value.offset] - prevPage;
const distance = offset - thumbClickPosition;
frameHandle = rAF(() => {
state.traveled = Math.max(0, Math.min(distance, totalSteps.value));
emit("scroll", distance, totalSteps.value);
});
};
const clickTrackHandler = (e) => {
const offset = Math.abs(
e.target.getBoundingClientRect()[bar.value.direction] -
e[bar.value.client]
);
const thumbHalf = thumbRef.value[bar.value.offset] / 2;
const distance = offset - thumbHalf;
state.traveled = Math.max(0, Math.min(distance, totalSteps.value));
emit("scroll", distance, totalSteps.value);
};
const onScrollbarTouchStart = (e) => e.preventDefault();
vue.watch(
() => props.scrollFrom,
(v) => {
if (state.isDragging) return;
state.traveled = Math.ceil(v * totalSteps.value);
}
);
vue.onMounted(() => {
if (isServer) return;
on(trackRef.value, "touchstart", onScrollbarTouchStart);
on(thumbRef.value, "touchstart", onThumbMouseDown);
});
vue.onBeforeUnmount(() => {
off(trackRef.value, "touchstart", onScrollbarTouchStart);
detachEvents();
});
return () => {
return vue.h(
"div",
{
role: "presentation",
ref: trackRef,
class: "el-virtual-scrollbar",
style: trackStyle.value,
onMousedown: vue.withModifiers(clickTrackHandler, [
"stop",
"prevent",
]),
},
vue.h(
"div",
{
ref: thumbRef,
class: "el-scrollbar__thumb",
style: thumbStyle.value,
onMousedown: onThumbMouseDown,
},
[]
)
);
};
},
});
var __defProp$i = Object.defineProperty;
var __defProps$e = Object.defineProperties;
var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
var __hasOwnProp$i = Object.prototype.hasOwnProperty;
var __propIsEnum$i = Object.prototype.propertyIsEnumerable;
var __defNormalProp$i = (obj, key, value) =>
key in obj
? __defProp$i(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$i = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$i.call(b, prop)) __defNormalProp$i(a, prop, b[prop]);
if (__getOwnPropSymbols$i)
for (var prop of __getOwnPropSymbols$i(b)) {
if (__propIsEnum$i.call(b, prop)) __defNormalProp$i(a, prop, b[prop]);
}
return a;
};
var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
const createList = ({
name,
getOffset,
getItemSize,
getItemOffset,
getEstimatedTotalSize,
getStartIndexForOffset,
getStopIndexForStartIndex,
initCache,
clearCache,
validateProps,
}) => {
return vue.defineComponent({
name: name != null ? name : "ElVirtualList",
props: virtualizedListProps,
emits: [ITEM_RENDER_EVT, SCROLL_EVT],
setup(props, { emit, expose }) {
validateProps(props);
const instance = vue.getCurrentInstance();
const dynamicSizeCache = vue.ref(initCache(props, instance));
const getItemStyleCache = useCache();
const windowRef = vue.ref();
const innerRef = vue.ref();
const scrollbarRef = vue.ref(null);
const states = vue.ref({
isScrolling: false,
scrollDir: "forward",
scrollOffset: isNumber(props.initScrollOffset)
? props.initScrollOffset
: 0,
updateRequested: false,
isScrollbarDragging: false,
});
const itemsToRender = vue.computed(() => {
const { total, cache } = props;
const { isScrolling, scrollDir, scrollOffset } = vue.unref(states);
if (total === 0) {
return [0, 0, 0, 0];
}
const startIndex = getStartIndexForOffset(
props,
scrollOffset,
vue.unref(dynamicSizeCache)
);
const stopIndex = getStopIndexForStartIndex(
props,
startIndex,
scrollOffset,
vue.unref(dynamicSizeCache)
);
const cacheBackward =
!isScrolling || scrollDir === BACKWARD ? Math.max(1, cache) : 1;
const cacheForward =
!isScrolling || scrollDir === FORWARD ? Math.max(1, cache) : 1;
return [
Math.max(0, startIndex - cacheBackward),
Math.max(0, Math.min(total - 1, stopIndex + cacheForward)),
startIndex,
stopIndex,
];
});
const estimatedTotalSize = vue.computed(() =>
getEstimatedTotalSize(props, vue.unref(dynamicSizeCache))
);
const _isHorizontal = vue.computed(() => isHorizontal(props.layout));
const windowStyle = vue.computed(() => [
{
position: "relative",
overflow: "hidden",
WebkitOverflowScrolling: "touch",
willChange: "transform",
},
{
direction: props.direction,
height: isNumber(props.height) ? `${props.height}px` : props.height,
width: isNumber(props.width) ? `${props.width}px` : props.width,
},
props.style,
]);
const innerStyle = vue.computed(() => {
const size = vue.unref(estimatedTotalSize);
const horizontal = vue.unref(_isHorizontal);
return {
height: horizontal ? "100%" : `${size}px`,
pointerEvents: vue.unref(states).isScrolling ? "none" : void 0,
width: horizontal ? `${size}px` : "100%",
};
});
const clientSize = vue.computed(() =>
_isHorizontal.value ? props.width : props.height
);
const { onWheel } = useWheel(
{
atStartEdge: vue.computed(() => states.value.scrollOffset <= 0),
atEndEdge: vue.computed(
() => states.value.scrollOffset >= estimatedTotalSize.value
),
layout: vue.computed(() => props.layout),
},
(offset) => {
var _a, _b;
(_b = (_a = scrollbarRef.value).onMouseUp) == null
? void 0
: _b.call(_a);
scrollTo(
Math.min(
states.value.scrollOffset + offset,
estimatedTotalSize.value - clientSize.value
)
);
}
);
const emitEvents = () => {
const { total } = props;
if (total > 0) {
const [cacheStart, cacheEnd, visibleStart, visibleEnd] =
vue.unref(itemsToRender);
emit(
ITEM_RENDER_EVT,
cacheStart,
cacheEnd,
visibleStart,
visibleEnd
);
}
const { scrollDir, scrollOffset, updateRequested } =
vue.unref(states);
emit(SCROLL_EVT, scrollDir, scrollOffset, updateRequested);
};
const scrollVertically = (e) => {
const { clientHeight, scrollHeight, scrollTop } = e.currentTarget;
const _states = vue.unref(states);
if (_states.scrollOffset === scrollTop) {
return;
}
const scrollOffset = Math.max(
0,
Math.min(scrollTop, scrollHeight - clientHeight)
);
states.value = __spreadProps$e(__spreadValues$i({}, _states), {
isScrolling: true,
scrollDir: getScrollDir(_states.scrollOffset, scrollOffset),
scrollOffset,
updateRequested: false,
});
vue.nextTick(resetIsScrolling);
};
const scrollHorizontally = (e) => {
const { clientWidth, scrollLeft, scrollWidth } = e.currentTarget;
const _states = vue.unref(states);
if (_states.scrollOffset === scrollLeft) {
return;
}
const { direction } = props;
let scrollOffset = scrollLeft;
if (direction === RTL) {
switch (getRTLOffsetType()) {
case RTL_OFFSET_NAG: {
scrollOffset = -scrollLeft;
break;
}
case RTL_OFFSET_POS_DESC: {
scrollOffset = scrollWidth - clientWidth - scrollLeft;
break;
}
}
}
scrollOffset = Math.max(
0,
Math.min(scrollOffset, scrollWidth - clientWidth)
);
states.value = __spreadProps$e(__spreadValues$i({}, _states), {
isScrolling: true,
scrollDir: getScrollDir(_states.scrollOffset, scrollOffset),
scrollOffset,
updateRequested: false,
});
vue.nextTick(resetIsScrolling);
};
const onScroll = (e) => {
vue.unref(_isHorizontal)
? scrollHorizontally(e)
: scrollVertically(e);
emitEvents();
};
const onScrollbarScroll = (distanceToGo, totalSteps) => {
const offset =
((estimatedTotalSize.value - clientSize.value) / totalSteps) *
distanceToGo;
scrollTo(
Math.min(estimatedTotalSize.value - clientSize.value, offset)
);
};
const scrollTo = (offset) => {
offset = Math.max(offset, 0);
if (offset === vue.unref(states).scrollOffset) {
return;
}
states.value = __spreadProps$e(
__spreadValues$i({}, vue.unref(states)),
{
scrollOffset: offset,
scrollDir: getScrollDir(vue.unref(states).scrollOffset, offset),
updateRequested: true,
}
);
vue.nextTick(resetIsScrolling);
};
const scrollToItem = (idx, alignment = AUTO_ALIGNMENT) => {
const { scrollOffset } = vue.unref(states);
idx = Math.max(0, Math.min(idx, props.total - 1));
scrollTo(
getOffset(
props,
idx,
alignment,
scrollOffset,
vue.unref(dynamicSizeCache)
)
);
};
const getItemStyle = (idx) => {
const { direction, itemSize, layout } = props;
const itemStyleCache = getItemStyleCache.value(
clearCache && itemSize,
clearCache && layout,
clearCache && direction
);
let style;
if (hasOwn(itemStyleCache, String(idx))) {
style = itemStyleCache[idx];
} else {
const offset = getItemOffset(
props,
idx,
vue.unref(dynamicSizeCache)
);
const size = getItemSize(props, idx, vue.unref(dynamicSizeCache));
const horizontal = vue.unref(_isHorizontal);
const isRtl = direction === RTL;
const offsetHorizontal = horizontal ? offset : 0;
itemStyleCache[idx] = style = {
position: "absolute",
left: isRtl ? void 0 : `${offsetHorizontal}px`,
right: isRtl ? `${offsetHorizontal}px` : void 0,
top: !horizontal ? `${offset}px` : 0,
height: !horizontal ? `${size}px` : "100%",
width: horizontal ? `${size}px` : "100%",
};
}
return style;
};
const resetIsScrolling = () => {
states.value.isScrolling = false;
vue.nextTick(() => {
getItemStyleCache.value(-1, null, null);
});
};
const resetScrollTop = () => {
const window = windowRef.value;
if (window) {
window.scrollTop = 0;
}
};
vue.onMounted(() => {
if (isServer) return;
const { initScrollOffset } = props;
const windowElement = vue.unref(windowRef);
if (isNumber(initScrollOffset) && windowElement) {
if (vue.unref(_isHorizontal)) {
windowElement.scrollLeft = initScrollOffset;
} else {
windowElement.scrollTop = initScrollOffset;
}
}
emitEvents();
});
vue.onUpdated(() => {
const { direction, layout } = props;
const { scrollOffset, updateRequested } = vue.unref(states);
const windowElement = vue.unref(windowRef);
if (updateRequested && windowElement) {
if (layout === HORIZONTAL) {
if (direction === RTL) {
switch (getRTLOffsetType()) {
case "negative": {
windowElement.scrollLeft = -scrollOffset;
break;
}
case "positive-ascending": {
windowElement.scrollLeft = scrollOffset;
break;
}
default: {
const { clientWidth, scrollWidth } = windowElement;
windowElement.scrollLeft =
scrollWidth - clientWidth - scrollOffset;
break;
}
}
} else {
windowElement.scrollLeft = scrollOffset;
}
} else {
windowElement.scrollTop = scrollOffset;
}
}
});
const api = {
clientSize,
estimatedTotalSize,
windowStyle,
windowRef,
innerRef,
innerStyle,
itemsToRender,
scrollbarRef,
states,
getItemStyle,
onScroll,
onScrollbarScroll,
onWheel,
scrollTo,
scrollToItem,
resetScrollTop,
};
expose({
windowRef,
innerRef,
getItemStyleCache,
scrollTo,
scrollToItem,
resetScrollTop,
states,
});
return api;
},
render(ctx) {
var _a;
const {
$slots,
className,
clientSize,
containerElement,
data,
getItemStyle,
innerElement,
itemsToRender,
innerStyle,
layout,
total,
onScroll,
onScrollbarScroll,
onWheel,
states,
useIsScrolling,
windowStyle,
} = ctx;
const [start, end] = itemsToRender;
const Container = vue.resolveDynamicComponent(containerElement);
const Inner = vue.resolveDynamicComponent(innerElement);
const children = [];
if (total > 0) {
for (let i = start; i <= end; i++) {
children.push(
(_a = $slots.default) == null
? void 0
: _a.call($slots, {
data,
key: i,
index: i,
isScrolling: useIsScrolling ? states.isScrolling : void 0,
style: getItemStyle(i),
})
);
}
}
const InnerNode = [
vue.h(
Inner,
{
style: innerStyle,
ref: "innerRef",
},
!isString$1(Inner)
? {
default: () => children,
}
: children
),
];
const scrollbar = vue.h(ScrollBar, {
ref: "scrollbarRef",
clientSize,
layout,
onScroll: onScrollbarScroll,
ratio: (clientSize * 100) / this.estimatedTotalSize,
scrollFrom:
states.scrollOffset / (this.estimatedTotalSize - clientSize),
total,
visible: true,
});
const listContainer = vue.h(
Container,
{
class: className,
style: windowStyle,
onScroll,
onWheel,
ref: "windowRef",
key: 0,
},
!isString$1(Container) ? { default: () => [InnerNode] } : [InnerNode]
);
return vue.h(
"div",
{
key: 0,
class: "el-vl__wrapper",
},
[listContainer, scrollbar]
);
},
});
};
var createList$1 = createList;
const FixedSizeList = createList$1({
name: "ElFixedSizeList",
getItemOffset: ({ itemSize }, index) => index * itemSize,
getItemSize: ({ itemSize }) => itemSize,
getEstimatedTotalSize: ({ total, itemSize }) => itemSize * total,
getOffset: (
{ height, total, itemSize, layout, width },
index,
alignment,
scrollOffset
) => {
const size = isHorizontal(layout) ? width : height;
const lastItemOffset = Math.max(0, total * itemSize - size);
const maxOffset = Math.min(lastItemOffset, index * itemSize);
const minOffset = Math.max(0, (index + 1) * itemSize - size);
if (alignment === SMART_ALIGNMENT) {
if (
scrollOffset >= minOffset - size &&
scrollOffset <= maxOffset + size
) {
alignment = AUTO_ALIGNMENT;
} else {
alignment = CENTERED_ALIGNMENT;
}
}
switch (alignment) {
case START_ALIGNMENT: {
return maxOffset;
}
case END_ALIGNMENT: {
return minOffset;
}
case CENTERED_ALIGNMENT: {
const middleOffset = Math.round(
minOffset + (maxOffset - minOffset) / 2
);
if (middleOffset < Math.ceil(size / 2)) {
return 0;
} else if (middleOffset > lastItemOffset + Math.floor(size / 2)) {
return lastItemOffset;
} else {
return middleOffset;
}
}
case AUTO_ALIGNMENT:
default: {
if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
return scrollOffset;
} else if (scrollOffset < minOffset) {
return minOffset;
} else {
return maxOffset;
}
}
}
},
getStartIndexForOffset: ({ total, itemSize }, offset) =>
Math.max(0, Math.min(total - 1, Math.floor(offset / itemSize))),
getStopIndexForStartIndex: (
{ height, total, itemSize, layout, width },
startIndex,
scrollOffset
) => {
const offset = startIndex * itemSize;
const size = isHorizontal(layout) ? width : height;
const numVisibleItems = Math.ceil(
(size + scrollOffset - offset) / itemSize
);
return Math.max(0, Math.min(total - 1, startIndex + numVisibleItems - 1));
},
initCache() {
return void 0;
},
clearCache: true,
validateProps() {},
});
var FixedSizeList$1 = FixedSizeList;
const getItemFromCache$1 = (props, index, listCache) => {
const { itemSize } = props;
const { items, lastVisitedIndex } = listCache;
if (index > lastVisitedIndex) {
let offset = 0;
if (lastVisitedIndex >= 0) {
const item = items[lastVisitedIndex];
offset = item.offset + item.size;
}
for (let i = lastVisitedIndex + 1; i <= index; i++) {
const size = itemSize(i);
items[i] = {
offset,
size,
};
offset += size;
}
listCache.lastVisitedIndex = index;
}
return items[index];
};
const findItem$1 = (props, listCache, offset) => {
const { items, lastVisitedIndex } = listCache;
const lastVisitedOffset =
lastVisitedIndex > 0 ? items[lastVisitedIndex].offset : 0;
if (lastVisitedOffset >= offset) {
return bs$1(props, listCache, 0, lastVisitedIndex, offset);
}
return es$1(props, listCache, Math.max(0, lastVisitedIndex), offset);
};
const bs$1 = (props, listCache, low, high, offset) => {
while (low <= high) {
const mid = low + Math.floor((high - low) / 2);
const currentOffset = getItemFromCache$1(props, mid, listCache).offset;
if (currentOffset === offset) {
return mid;
} else if (currentOffset < offset) {
low = mid + 1;
} else if (currentOffset > offset) {
high = mid - 1;
}
}
return Math.max(0, low - 1);
};
const es$1 = (props, listCache, index, offset) => {
const { total } = props;
let exponent = 1;
while (
index < total &&
getItemFromCache$1(props, index, listCache).offset < offset
) {
index += exponent;
exponent *= 2;
}
return bs$1(
props,
listCache,
Math.floor(index / 2),
Math.min(index, total - 1),
offset
);
};
const getEstimatedTotalSize = (
{ total },
{ items, estimatedItemSize, lastVisitedIndex }
) => {
let totalSizeOfMeasuredItems = 0;
if (lastVisitedIndex >= total) {
lastVisitedIndex = total - 1;
}
if (lastVisitedIndex >= 0) {
const item = items[lastVisitedIndex];
totalSizeOfMeasuredItems = item.offset + item.size;
}
const numUnmeasuredItems = total - lastVisitedIndex - 1;
const totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedItemSize;
return totalSizeOfMeasuredItems + totalSizeOfUnmeasuredItems;
};
const DynamicSizeList = createList$1({
name: "ElDynamicSizeList",
getItemOffset: (props, index, listCache) =>
getItemFromCache$1(props, index, listCache).offset,
getItemSize: (_, index, { items }) => items[index].size,
getEstimatedTotalSize,
getOffset: (props, index, alignment, scrollOffset, listCache) => {
const { height, layout, width } = props;
const size = isHorizontal(layout) ? width : height;
const item = getItemFromCache$1(props, index, listCache);
const estimatedTotalSize = getEstimatedTotalSize(props, listCache);
const maxOffset = Math.max(
0,
Math.min(estimatedTotalSize - size, item.offset)
);
const minOffset = Math.max(0, item.offset - size + item.size);
if (alignment === SMART_ALIGNMENT) {
if (
scrollOffset >= minOffset - size &&
scrollOffset <= maxOffset + size
) {
alignment = AUTO_ALIGNMENT;
} else {
alignment = CENTERED_ALIGNMENT;
}
}
switch (alignment) {
case START_ALIGNMENT: {
return maxOffset;
}
case END_ALIGNMENT: {
return minOffset;
}
case CENTERED_ALIGNMENT: {
return Math.round(minOffset + (maxOffset - minOffset) / 2);
}
case AUTO_ALIGNMENT:
default: {
if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
return scrollOffset;
} else if (scrollOffset < minOffset) {
return minOffset;
} else {
return maxOffset;
}
}
}
},
getStartIndexForOffset: (props, offset, listCache) =>
findItem$1(props, listCache, offset),
getStopIndexForStartIndex: (props, startIndex, scrollOffset, listCache) => {
const { height, total, layout, width } = props;
const size = isHorizontal(layout) ? width : height;
const item = getItemFromCache$1(props, startIndex, listCache);
const maxOffset = scrollOffset + size;
let offset = item.offset + item.size;
let stopIndex = startIndex;
while (stopIndex < total - 1 && offset < maxOffset) {
stopIndex++;
offset += getItemFromCache$1(props, stopIndex, listCache).size;
}
return stopIndex;
},
initCache(
{ estimatedItemSize = DEFAULT_DYNAMIC_LIST_ITEM_SIZE },
instance
) {
const cache = {
items: {},
estimatedItemSize,
lastVisitedIndex: -1,
};
cache.clearCacheAfterIndex = (index, forceUpdate = true) => {
cache.lastVisitedIndex = Math.min(cache.lastVisitedIndex, index - 1);
instance.exposed.getItemStyleCache(-1);
if (forceUpdate) {
instance.proxy.$forceUpdate();
}
};
return cache;
},
clearCache: false,
validateProps: ({ itemSize }) => {},
});
var DynamicSizeList$1 = DynamicSizeList;
var __defProp$h = Object.defineProperty;
var __defProps$d = Object.defineProperties;
var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$h = Object.getOwnPropertySymbols;
var __hasOwnProp$h = Object.prototype.hasOwnProperty;
var __propIsEnum$h = Object.prototype.propertyIsEnumerable;
var __defNormalProp$h = (obj, key, value) =>
key in obj
? __defProp$h(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$h = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$h.call(b, prop)) __defNormalProp$h(a, prop, b[prop]);
if (__getOwnPropSymbols$h)
for (var prop of __getOwnPropSymbols$h(b)) {
if (__propIsEnum$h.call(b, prop)) __defNormalProp$h(a, prop, b[prop]);
}
return a;
};
var __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
const createGrid = ({
name,
clearCache,
getColumnPosition,
getColumnStartIndexForOffset,
getColumnStopIndexForStartIndex,
getEstimatedTotalHeight,
getEstimatedTotalWidth,
getColumnOffset,
getRowOffset,
getRowPosition,
getRowStartIndexForOffset,
getRowStopIndexForStartIndex,
initCache,
validateProps,
}) => {
return vue.defineComponent({
name: name != null ? name : "ElVirtualList",
props: virtualizedGridProps,
emits: [ITEM_RENDER_EVT, SCROLL_EVT],
setup(props, { emit, expose }) {
validateProps(props);
const instance = vue.getCurrentInstance();
const cache = vue.ref(initCache(props, instance));
const windowRef = vue.ref();
const innerRef = vue.ref(null);
const states = vue.ref({
isScrolling: false,
scrollLeft: isNumber(props.initScrollLeft) ? props.initScrollLeft : 0,
scrollTop: isNumber(props.initScrollTop) ? props.initScrollTop : 0,
updateRequested: false,
xAxisScrollDir: FORWARD,
yAxisScrollDir: FORWARD,
});
const getItemStyleCache = useCache();
const columnsToRender = vue.computed(() => {
const { totalColumn, totalRow, columnCache } = props;
const { isScrolling, xAxisScrollDir, scrollLeft } = vue.unref(states);
if (totalColumn === 0 || totalRow === 0) {
return [0, 0, 0, 0];
}
const startIndex = getColumnStartIndexForOffset(
props,
scrollLeft,
vue.unref(cache)
);
const stopIndex = getColumnStopIndexForStartIndex(
props,
startIndex,
scrollLeft,
vue.unref(cache)
);
const cacheBackward =
!isScrolling || xAxisScrollDir === BACKWARD
? Math.max(1, columnCache)
: 1;
const cacheForward =
!isScrolling || xAxisScrollDir === FORWARD
? Math.max(1, columnCache)
: 1;
return [
Math.max(0, startIndex - cacheBackward),
Math.max(0, Math.min(totalColumn - 1, stopIndex + cacheForward)),
startIndex,
stopIndex,
];
});
const rowsToRender = vue.computed(() => {
const { totalColumn, totalRow, rowCache } = props;
const { isScrolling, yAxisScrollDir, scrollTop } = vue.unref(states);
if (totalColumn === 0 || totalRow === 0) {
return [0, 0, 0, 0];
}
const startIndex = getRowStartIndexForOffset(
props,
scrollTop,
vue.unref(cache)
);
const stopIndex = getRowStopIndexForStartIndex(
props,
startIndex,
scrollTop,
vue.unref(cache)
);
const cacheBackward =
!isScrolling || yAxisScrollDir === BACKWARD
? Math.max(1, rowCache)
: 1;
const cacheForward =
!isScrolling || yAxisScrollDir === FORWARD
? Math.max(1, rowCache)
: 1;
return [
Math.max(0, startIndex - cacheBackward),
Math.max(0, Math.min(totalRow - 1, stopIndex + cacheForward)),
startIndex,
stopIndex,
];
});
const estimatedTotalHeight = vue.computed(() =>
getEstimatedTotalHeight(props, vue.unref(cache))
);
const estimatedTotalWidth = vue.computed(() =>
getEstimatedTotalWidth(props, vue.unref(cache))
);
const windowStyle = vue.computed(() => [
{
position: "relative",
overflow: "auto",
WebkitOverflowScrolling: "touch",
willChange: "transform",
},
{
direction: props.direction,
height: isNumber(props.height) ? `${props.height}px` : props.height,
width: isNumber(props.width) ? `${props.width}px` : props.width,
},
props.style,
]);
const innerStyle = vue.computed(() => {
const width = `${vue.unref(estimatedTotalWidth)}px`;
const height = `${vue.unref(estimatedTotalHeight)}px`;
return {
height,
pointerEvents: vue.unref(states).isScrolling ? "none" : void 0,
width,
};
});
const emitEvents = () => {
const { totalColumn, totalRow } = props;
if (totalColumn > 0 && totalRow > 0) {
const [
columnCacheStart,
columnCacheEnd,
columnVisibleStart,
columnVisibleEnd,
] = vue.unref(columnsToRender);
const [rowCacheStart, rowCacheEnd, rowVisibleStart, rowVisibleEnd] =
vue.unref(rowsToRender);
emit(
ITEM_RENDER_EVT,
columnCacheStart,
columnCacheEnd,
rowCacheStart,
rowCacheEnd,
columnVisibleStart,
columnVisibleEnd,
rowVisibleStart,
rowVisibleEnd
);
}
const {
scrollLeft,
scrollTop,
updateRequested,
xAxisScrollDir,
yAxisScrollDir,
} = vue.unref(states);
emit(
SCROLL_EVT,
xAxisScrollDir,
scrollLeft,
yAxisScrollDir,
scrollTop,
updateRequested
);
};
const onScroll = (e) => {
const {
clientHeight,
clientWidth,
scrollHeight,
scrollLeft,
scrollTop,
scrollWidth,
} = e.currentTarget;
const _states = vue.unref(states);
if (
_states.scrollTop === scrollTop &&
_states.scrollLeft === scrollLeft
) {
return;
}
let _scrollLeft = scrollLeft;
if (isRTL(props.direction)) {
switch (getRTLOffsetType()) {
case RTL_OFFSET_NAG:
_scrollLeft = -scrollLeft;
break;
case RTL_OFFSET_POS_DESC:
_scrollLeft = scrollWidth - clientWidth - scrollLeft;
break;
}
}
states.value = __spreadProps$d(__spreadValues$h({}, _states), {
isScrolling: true,
scrollLeft: _scrollLeft,
scrollTop: Math.max(
0,
Math.min(scrollTop, scrollHeight - clientHeight)
),
updateRequested: false,
xAxisScrollDir: getScrollDir(_states.scrollLeft, _scrollLeft),
yAxisScrollDir: getScrollDir(_states.scrollTop, scrollTop),
});
vue.nextTick(resetIsScrolling);
emitEvents();
};
const scrollTo = ({ scrollLeft, scrollTop }) => {
scrollLeft = Math.max(scrollLeft, 0);
scrollTop = Math.max(scrollTop, 0);
const _states = vue.unref(states);
if (
scrollTop === _states.scrollTop &&
scrollLeft === _states.scrollLeft
) {
return;
}
states.value = __spreadProps$d(__spreadValues$h({}, _states), {
xAxisScrollDir: getScrollDir(_states.scrollLeft, scrollLeft),
yAxisScrollDir: getScrollDir(_states.scrollTop, scrollTop),
scrollLeft,
scrollTop,
updateRequested: true,
});
vue.nextTick(resetIsScrolling);
};
const scrollToItem = (
rowIndex = 0,
columnIdx = 0,
alignment = AUTO_ALIGNMENT
) => {
const _states = vue.unref(states);
columnIdx = Math.max(0, Math.min(columnIdx, props.totalColumn - 1));
rowIndex = Math.max(0, Math.min(rowIndex, props.totalRow - 1));
const scrollBarWidth = scrollbarWidth();
const _cache = vue.unref(cache);
const estimatedHeight = getEstimatedTotalHeight(props, _cache);
const estimatedWidth = getEstimatedTotalWidth(props, _cache);
scrollTo({
scrollLeft: getColumnOffset(
props,
columnIdx,
alignment,
_states.scrollLeft,
_cache,
estimatedWidth > props.width ? scrollBarWidth : 0
),
scrollTop: getRowOffset(
props,
rowIndex,
alignment,
_states.scrollTop,
_cache,
estimatedHeight > props.height ? scrollBarWidth : 0
),
});
};
const getItemStyle = (rowIndex, columnIndex) => {
const { columnWidth, direction, rowHeight } = props;
const itemStyleCache = getItemStyleCache.value(
clearCache && columnWidth,
clearCache && rowHeight,
clearCache && direction
);
const key = `${rowIndex},${columnIndex}`;
if (hasOwn(itemStyleCache, key)) {
return itemStyleCache[key];
} else {
const [, left] = getColumnPosition(
props,
columnIndex,
vue.unref(cache)
);
const _cache = vue.unref(cache);
const rtl = isRTL(direction);
const [height, top] = getRowPosition(props, rowIndex, _cache);
const [width] = getColumnPosition(props, columnIndex, _cache);
itemStyleCache[key] = {
position: "absolute",
left: rtl ? void 0 : `${left}px`,
right: rtl ? `${left}px` : void 0,
top: `${top}px`,
height: `${height}px`,
width: `${width}px`,
};
return itemStyleCache[key];
}
};
const resetIsScrolling = () => {
states.value.isScrolling = false;
vue.nextTick(() => {
getItemStyleCache.value(-1, null, null);
});
};
vue.onMounted(() => {
if (isServer) return;
const { initScrollLeft, initScrollTop } = props;
const windowElement = vue.unref(windowRef);
if (windowElement) {
if (isNumber(initScrollLeft)) {
windowElement.scrollLeft = initScrollLeft;
}
if (isNumber(initScrollTop)) {
windowElement.scrollTop = initScrollTop;
}
}
emitEvents();
});
vue.onUpdated(() => {
const { direction } = props;
const { scrollLeft, scrollTop, updateRequested } = vue.unref(states);
const windowElement = vue.unref(windowRef);
if (updateRequested && windowElement) {
if (direction === RTL) {
switch (getRTLOffsetType()) {
case RTL_OFFSET_NAG: {
windowElement.scrollLeft = -scrollLeft;
break;
}
case RTL_OFFSET_POS_ASC: {
windowElement.scrollLeft = scrollLeft;
break;
}
default: {
const { clientWidth, scrollWidth } = windowElement;
windowElement.scrollLeft =
scrollWidth - clientWidth - scrollLeft;
break;
}
}
} else {
windowElement.scrollLeft = Math.max(0, scrollLeft);
}
windowElement.scrollTop = Math.max(0, scrollTop);
}
});
const api = {
windowStyle,
windowRef,
columnsToRender,
innerRef,
innerStyle,
states,
rowsToRender,
getItemStyle,
onScroll,
scrollTo,
scrollToItem,
};
expose({
windowRef,
innerRef,
getItemStyleCache,
scrollTo,
scrollToItem,
states,
});
return api;
},
render(ctx) {
var _a;
const {
$slots,
className,
containerElement,
columnsToRender,
data,
getItemStyle,
innerElement,
innerStyle,
rowsToRender,
onScroll,
states,
useIsScrolling,
windowStyle,
totalColumn,
totalRow,
} = ctx;
const [columnStart, columnEnd] = columnsToRender;
const [rowStart, rowEnd] = rowsToRender;
const Container = vue.resolveDynamicComponent(containerElement);
const Inner = vue.resolveDynamicComponent(innerElement);
const children = [];
if (totalRow > 0 && totalColumn > 0) {
for (let row = rowStart; row <= rowEnd; row++) {
for (let column = columnStart; column <= columnEnd; column++) {
children.push(
(_a = $slots.default) == null
? void 0
: _a.call($slots, {
columnIndex: column,
data,
key: column,
isScrolling: useIsScrolling ? states.isScrolling : void 0,
style: getItemStyle(row, column),
rowIndex: row,
})
);
}
}
}
const InnerNode = [
vue.h(
Inner,
{
style: innerStyle,
ref: "innerRef",
},
!isString$1(Inner)
? {
default: () => children,
}
: children
),
];
return vue.h(
Container,
{
class: className,
style: windowStyle,
onScroll,
ref: "windowRef",
},
!isString$1(Container) ? { default: () => InnerNode } : InnerNode
);
},
});
};
var createGrid$1 = createGrid;
const FixedSizeGrid$2 = createGrid$1({
name: "ElFixedSizeGrid",
getColumnPosition: ({ columnWidth }, index) => [
columnWidth,
index * columnWidth,
],
getRowPosition: ({ rowHeight }, index) => [rowHeight, index * rowHeight],
getEstimatedTotalHeight: ({ totalRow, rowHeight }) => rowHeight * totalRow,
getEstimatedTotalWidth: ({ totalColumn, columnWidth }) =>
columnWidth * totalColumn,
getColumnOffset: (
{ totalColumn, columnWidth, width },
columnIndex,
alignment,
scrollLeft,
_,
scrollBarWidth
) => {
width = Number(width);
const lastColumnOffset = Math.max(0, totalColumn * columnWidth - width);
const maxOffset = Math.min(lastColumnOffset, columnIndex * columnWidth);
const minOffset = Math.max(
0,
columnIndex * columnWidth - width + scrollBarWidth + columnWidth
);
if (alignment === "smart") {
if (
scrollLeft >= minOffset - width &&
scrollLeft <= maxOffset + width
) {
alignment = AUTO_ALIGNMENT;
} else {
alignment = CENTERED_ALIGNMENT;
}
}
switch (alignment) {
case START_ALIGNMENT:
return maxOffset;
case END_ALIGNMENT:
return minOffset;
case CENTERED_ALIGNMENT: {
const middleOffset = Math.round(
minOffset + (maxOffset - minOffset) / 2
);
if (middleOffset < Math.ceil(width / 2)) {
return 0;
} else if (middleOffset > lastColumnOffset + Math.floor(width / 2)) {
return lastColumnOffset;
} else {
return middleOffset;
}
}
case AUTO_ALIGNMENT:
default:
if (scrollLeft >= minOffset && scrollLeft <= maxOffset) {
return scrollLeft;
} else if (minOffset > maxOffset) {
return minOffset;
} else if (scrollLeft < minOffset) {
return minOffset;
} else {
return maxOffset;
}
}
},
getRowOffset: (
{ rowHeight, height, totalRow },
rowIndex,
align,
scrollTop,
_,
scrollBarWidth
) => {
height = Number(height);
const lastRowOffset = Math.max(0, totalRow * rowHeight - height);
const maxOffset = Math.min(lastRowOffset, rowIndex * rowHeight);
const minOffset = Math.max(
0,
rowIndex * rowHeight - height + scrollBarWidth + rowHeight
);
if (align === SMART_ALIGNMENT) {
if (
scrollTop >= minOffset - height &&
scrollTop <= maxOffset + height
) {
align = AUTO_ALIGNMENT;
} else {
align = CENTERED_ALIGNMENT;
}
}
switch (align) {
case START_ALIGNMENT:
return maxOffset;
case END_ALIGNMENT:
return minOffset;
case CENTERED_ALIGNMENT: {
const middleOffset = Math.round(
minOffset + (maxOffset - minOffset) / 2
);
if (middleOffset < Math.ceil(height / 2)) {
return 0;
} else if (middleOffset > lastRowOffset + Math.floor(height / 2)) {
return lastRowOffset;
} else {
return middleOffset;
}
}
case AUTO_ALIGNMENT:
default:
if (scrollTop >= minOffset && scrollTop <= maxOffset) {
return scrollTop;
} else if (minOffset > maxOffset) {
return minOffset;
} else if (scrollTop < minOffset) {
return minOffset;
} else {
return maxOffset;
}
}
},
getColumnStartIndexForOffset: ({ columnWidth, totalColumn }, scrollLeft) =>
Math.max(
0,
Math.min(totalColumn - 1, Math.floor(scrollLeft / columnWidth))
),
getColumnStopIndexForStartIndex: (
{ columnWidth, totalColumn, width },
startIndex,
scrollLeft
) => {
const left = startIndex * columnWidth;
const visibleColumnsCount = Math.ceil(
(width + scrollLeft - left) / columnWidth
);
return Math.max(
0,
Math.min(totalColumn - 1, startIndex + visibleColumnsCount - 1)
);
},
getRowStartIndexForOffset: ({ rowHeight, totalRow }, scrollTop) =>
Math.max(0, Math.min(totalRow - 1, Math.floor(scrollTop / rowHeight))),
getRowStopIndexForStartIndex: (
{ rowHeight, totalRow, height },
startIndex,
scrollTop
) => {
const top = startIndex * rowHeight;
const numVisibleRows = Math.ceil((height + scrollTop - top) / rowHeight);
return Math.max(
0,
Math.min(totalRow - 1, startIndex + numVisibleRows - 1)
);
},
initCache: () => void 0,
clearCache: true,
validateProps: ({ columnWidth, rowHeight }) => {},
});
var FixedSizeGrid$3 = FixedSizeGrid$2;
const { max, min, floor } = Math;
const ACCESS_SIZER_KEY_MAP = {
column: "columnWidth",
row: "rowHeight",
};
const ACCESS_LAST_VISITED_KEY_MAP = {
column: "lastVisitedColumnIndex",
row: "lastVisitedRowIndex",
};
const getItemFromCache = (props, index, gridCache, type) => {
const [cachedItems, sizer, lastVisited] = [
gridCache[type],
props[ACCESS_SIZER_KEY_MAP[type]],
gridCache[ACCESS_LAST_VISITED_KEY_MAP[type]],
];
if (index > lastVisited) {
let offset = 0;
if (lastVisited >= 0) {
const item = cachedItems[lastVisited];
offset = item.offset + item.size;
}
for (let i = lastVisited + 1; i <= index; i++) {
const size = sizer(i);
cachedItems[i] = {
offset,
size,
};
offset += size;
}
gridCache[ACCESS_LAST_VISITED_KEY_MAP[type]] = index;
}
return cachedItems[index];
};
const bs = (props, gridCache, low, high, offset, type) => {
while (low <= high) {
const mid = low + floor((high - low) / 2);
const currentOffset = getItemFromCache(
props,
mid,
gridCache,
type
).offset;
if (currentOffset === offset) {
return mid;
} else if (currentOffset < offset) {
low = mid + 1;
} else {
high = mid - 1;
}
}
return max(0, low - 1);
};
const es = (props, gridCache, idx, offset, type) => {
const total = type === "column" ? props.totalColumn : props.totalRow;
let exponent = 1;
while (
idx < total &&
getItemFromCache(props, idx, gridCache, type).offset < offset
) {
idx += exponent;
exponent *= 2;
}
return bs(
props,
gridCache,
floor(idx / 2),
min(idx, total - 1),
offset,
type
);
};
const findItem = (props, gridCache, offset, type) => {
const [cache, lastVisitedIndex] = [
gridCache[type],
gridCache[ACCESS_LAST_VISITED_KEY_MAP[type]],
];
const lastVisitedItemOffset =
lastVisitedIndex > 0 ? cache[lastVisitedIndex].offset : 0;
if (lastVisitedItemOffset >= offset) {
return bs(props, gridCache, 0, lastVisitedIndex, offset, type);
}
return es(props, gridCache, max(0, lastVisitedIndex), offset, type);
};
const getEstimatedTotalHeight = (
{ totalRow },
{ estimatedRowHeight, lastVisitedRowIndex, row }
) => {
let sizeOfVisitedRows = 0;
if (lastVisitedRowIndex >= totalRow) {
lastVisitedRowIndex = totalRow - 1;
}
if (lastVisitedRowIndex >= 0) {
const item = row[lastVisitedRowIndex];
sizeOfVisitedRows = item.offset + item.size;
}
const unvisitedItems = totalRow - lastVisitedRowIndex - 1;
const sizeOfUnvisitedItems = unvisitedItems * estimatedRowHeight;
return sizeOfVisitedRows + sizeOfUnvisitedItems;
};
const getEstimatedTotalWidth = (
{ totalColumn },
{ column, estimatedColumnWidth, lastVisitedColumnIndex }
) => {
let sizeOfVisitedColumns = 0;
if (lastVisitedColumnIndex > totalColumn) {
lastVisitedColumnIndex = totalColumn - 1;
}
if (lastVisitedColumnIndex >= 0) {
const item = column[lastVisitedColumnIndex];
sizeOfVisitedColumns = item.offset + item.size;
}
const unvisitedItems = totalColumn - lastVisitedColumnIndex - 1;
const sizeOfUnvisitedItems = unvisitedItems * estimatedColumnWidth;
return sizeOfVisitedColumns + sizeOfUnvisitedItems;
};
const ACCESS_ESTIMATED_SIZE_KEY_MAP = {
column: getEstimatedTotalWidth,
row: getEstimatedTotalHeight,
};
const getOffset = (
props,
index,
alignment,
scrollOffset,
cache,
type,
scrollBarWidth
) => {
const [size, estimatedSizeAssociates] = [
type === "row" ? props.height : props.width,
ACCESS_ESTIMATED_SIZE_KEY_MAP[type],
];
const item = getItemFromCache(props, index, cache, type);
const estimatedSize = estimatedSizeAssociates(props, cache);
const maxOffset = max(0, min(estimatedSize - size, item.offset));
const minOffset = max(0, item.offset - size + scrollBarWidth + item.size);
if (alignment === SMART_ALIGNMENT) {
if (
scrollOffset >= minOffset - size &&
scrollOffset <= maxOffset + size
) {
alignment = AUTO_ALIGNMENT;
} else {
alignment = CENTERED_ALIGNMENT;
}
}
switch (alignment) {
case START_ALIGNMENT: {
return maxOffset;
}
case END_ALIGNMENT: {
return minOffset;
}
case CENTERED_ALIGNMENT: {
return Math.round(minOffset + (maxOffset - minOffset) / 2);
}
case AUTO_ALIGNMENT:
default: {
if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
return scrollOffset;
} else if (minOffset > maxOffset) {
return minOffset;
} else if (scrollOffset < minOffset) {
return minOffset;
} else {
return maxOffset;
}
}
}
};
const FixedSizeGrid = createGrid$1({
name: "ElDynamicSizeGrid",
getColumnPosition: (props, idx, cache) => {
const item = getItemFromCache(props, idx, cache, "column");
return [item.size, item.offset];
},
getRowPosition: (props, idx, cache) => {
const item = getItemFromCache(props, idx, cache, "row");
return [item.size, item.offset];
},
getColumnOffset: (
props,
columnIndex,
alignment,
scrollLeft,
cache,
scrollBarWidth
) =>
getOffset(
props,
columnIndex,
alignment,
scrollLeft,
cache,
"column",
scrollBarWidth
),
getRowOffset: (
props,
rowIndex,
alignment,
scrollTop,
cache,
scrollBarWidth
) =>
getOffset(
props,
rowIndex,
alignment,
scrollTop,
cache,
"row",
scrollBarWidth
),
getColumnStartIndexForOffset: (props, scrollLeft, cache) =>
findItem(props, cache, scrollLeft, "column"),
getColumnStopIndexForStartIndex: (props, startIndex, scrollLeft, cache) => {
const item = getItemFromCache(props, startIndex, cache, "column");
const maxOffset = scrollLeft + props.width;
let offset = item.offset + item.size;
let stopIndex = startIndex;
while (stopIndex < props.totalColumn - 1 && offset < maxOffset) {
stopIndex++;
offset += getItemFromCache(props, startIndex, cache, "column").size;
}
return stopIndex;
},
getEstimatedTotalHeight,
getEstimatedTotalWidth,
getRowStartIndexForOffset: (props, scrollTop, cache) =>
findItem(props, cache, scrollTop, "row"),
getRowStopIndexForStartIndex: (props, startIndex, scrollTop, cache) => {
const { totalRow, height } = props;
const item = getItemFromCache(props, startIndex, cache, "row");
const maxOffset = scrollTop + height;
let offset = item.size + item.offset;
let stopIndex = startIndex;
while (stopIndex < totalRow - 1 && offset < maxOffset) {
stopIndex++;
offset += getItemFromCache(props, stopIndex, cache, "row").size;
}
return stopIndex;
},
initCache: ({
estimatedColumnWidth = DEFAULT_DYNAMIC_LIST_ITEM_SIZE,
estimatedRowHeight = DEFAULT_DYNAMIC_LIST_ITEM_SIZE,
}) => {
const cache = {
column: {},
estimatedColumnWidth,
estimatedRowHeight,
lastVisitedColumnIndex: -1,
lastVisitedRowIndex: -1,
row: {},
};
return cache;
},
clearCache: true,
validateProps: ({ columnWidth, rowHeight }) => {},
});
var FixedSizeGrid$1 = FixedSizeGrid;
var script$x = vue.defineComponent({
props: {
item: {
type: Object,
required: true,
},
style: Object,
height: Number,
},
});
function render$r(_ctx, _cache, $props, $setup, $data, $options) {
return _ctx.item.isTitle
? (vue.openBlock(),
vue.createElementBlock(
"div",
{
key: 0,
class: "el-select-group__title",
style: vue.normalizeStyle([
_ctx.style,
{ lineHeight: `${_ctx.height}px` },
]),
},
vue.toDisplayString(_ctx.item.label),
5
))
: (vue.openBlock(),
vue.createElementBlock(
"div",
{
key: 1,
class: "el-select-group__split",
style: vue.normalizeStyle(_ctx.style),
},
[
vue.createElementVNode(
"span",
{
class: "el-select-group__split-dash",
style: vue.normalizeStyle({ top: `${_ctx.height / 2}px` }),
},
null,
4
),
],
4
));
}
script$x.render = render$r;
script$x.__file = "packages/components/select-v2/src/group-item.vue";
function useOption(props, { emit }) {
return {
hoverItem: () => {
if (!props.disabled) {
emit("hover", props.index);
}
},
selectOptionClick: () => {
if (!props.disabled) {
emit("select", props.item, props.index);
}
},
};
}
const SelectProps = {
allowCreate: Boolean,
autocomplete: {
type: String,
default: "none",
},
automaticDropdown: Boolean,
clearable: Boolean,
clearIcon: {
type: String,
default: "el-icon-circle-close",
},
collapseTags: Boolean,
defaultFirstOption: Boolean,
disabled: Boolean,
estimatedOptionHeight: {
type: Number,
default: void 0,
},
filterable: Boolean,
filterMethod: Function,
height: {
type: Number,
default: 170,
},
itemHeight: {
type: Number,
default: 34,
},
id: String,
loading: Boolean,
loadingText: String,
label: String,
modelValue: [Array, String, Number, Boolean, Object],
multiple: Boolean,
multipleLimit: {
type: Number,
default: 0,
},
name: String,
noDataText: String,
noMatchText: String,
remoteMethod: Function,
reserveKeyword: Boolean,
options: {
type: Array,
required: true,
},
placeholder: {
type: String,
},
popperAppendToBody: {
type: Boolean,
default: true,
},
popperClass: {
type: String,
default: "",
},
popperOptions: {
type: Object,
default: () => ({}),
},
remote: Boolean,
size: {
type: String,
validator: isValidComponentSize,
},
valueKey: {
type: String,
default: "value",
},
};
const OptionProps = {
data: Array,
disabled: Boolean,
hovering: Boolean,
item: Object,
index: Number,
style: Object,
selected: Boolean,
created: Boolean,
};
var script$w = vue.defineComponent({
props: OptionProps,
emits: ["select", "hover"],
setup(props, { emit }) {
const { hoverItem, selectOptionClick } = useOption(props, { emit });
return {
hoverItem,
selectOptionClick,
};
},
});
const _hoisted_1$i = ["aria-selected"];
function render$q(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"li",
{
"aria-selected": _ctx.selected,
style: vue.normalizeStyle(_ctx.style),
class: vue.normalizeClass({
"el-select-dropdown__option-item": true,
"is-selected": _ctx.selected,
"is-disabled": _ctx.disabled,
"is-created": _ctx.created,
hover: _ctx.hovering,
}),
onMouseenter:
_cache[0] ||
(_cache[0] = (...args) =>
_ctx.hoverItem && _ctx.hoverItem(...args)),
onClick:
_cache[1] ||
(_cache[1] = vue.withModifiers(
(...args) =>
_ctx.selectOptionClick && _ctx.selectOptionClick(...args),
["stop"]
)),
},
[
vue.renderSlot(
_ctx.$slots,
"default",
{
item: _ctx.item,
index: _ctx.index,
disabled: _ctx.disabled,
},
() => [
vue.createElementVNode(
"span",
null,
vue.toDisplayString(_ctx.item.label),
1
),
]
),
],
46,
_hoisted_1$i
)
);
}
script$w.render = render$q;
script$w.__file = "packages/components/select-v2/src/option-item.vue";
const selectV2InjectionKey = "ElSelectV2Injection";
var __defProp$g = Object.defineProperty;
var __defProps$c = Object.defineProperties;
var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
var __hasOwnProp$g = Object.prototype.hasOwnProperty;
var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
var __defNormalProp$g = (obj, key, value) =>
key in obj
? __defProp$g(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$g = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$g.call(b, prop)) __defNormalProp$g(a, prop, b[prop]);
if (__getOwnPropSymbols$g)
for (var prop of __getOwnPropSymbols$g(b)) {
if (__propIsEnum$g.call(b, prop)) __defNormalProp$g(a, prop, b[prop]);
}
return a;
};
var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
var script$v = vue.defineComponent({
name: "ElSelectDropdown",
props: {
data: Array,
hoveringIndex: Number,
width: Number,
},
setup(props) {
const select = vue.inject(selectV2InjectionKey);
const cachedHeights = vue.ref([]);
const listRef = vue.ref(null);
const isSized = vue.computed(() =>
isUndefined(select.props.estimatedOptionHeight)
);
const listProps = vue.computed(() => {
if (isSized.value) {
return {
itemSize: select.props.itemHeight,
};
}
return {
estimatedSize: select.props.estimatedOptionHeight,
itemSize: (idx) => cachedHeights.value[idx],
};
});
const contains = (arr = [], target) => {
const {
props: { valueKey },
} = select;
if (!isObject$2(target)) {
return arr.includes(target);
}
return (
arr &&
arr.some((item) => {
return (
getValueByPath(item, valueKey) ===
getValueByPath(target, valueKey)
);
})
);
};
const isEqual = (selected, target) => {
if (!isObject$2(target)) {
return selected === target;
} else {
const { valueKey } = select.props;
return (
getValueByPath(selected, valueKey) ===
getValueByPath(target, valueKey)
);
}
};
const isItemSelected = (modelValue, target) => {
if (select.props.multiple) {
return contains(modelValue, target.value);
}
return isEqual(modelValue, target.value);
};
const isItemDisabled = (modelValue, selected) => {
const { disabled, multiple, multipleLimit } = select.props;
return (
disabled ||
(!selected &&
(multiple
? multipleLimit > 0 && modelValue.length >= multipleLimit
: false))
);
};
const isItemHovering = (target) => props.hoveringIndex === target;
const scrollToItem = (index) => {
const list = listRef.value;
if (list) {
list.scrollToItem(index);
}
};
const resetScrollTop = () => {
const list = listRef.value;
if (list) {
list.resetScrollTop();
}
};
return {
select,
listProps,
listRef,
isSized,
isItemDisabled,
isItemHovering,
isItemSelected,
scrollToItem,
resetScrollTop,
};
},
render(_ctx, _cache) {
var _a;
const {
$slots,
data,
listProps,
select,
isSized,
width,
isItemDisabled,
isItemHovering,
isItemSelected,
} = _ctx;
const Comp = isSized ? FixedSizeList$1 : DynamicSizeList$1;
const {
props: selectProps,
onSelect,
onHover,
onKeyboardNavigate,
onKeyboardSelect,
} = select;
const { height, modelValue, multiple } = selectProps;
if (data.length === 0) {
return vue.h(
"div",
{
class: "el-select-dropdown",
style: {
width: `${width}px`,
},
},
(_a = $slots.empty) == null ? void 0 : _a.call($slots)
);
}
const ListItem = vue.withCtx((scoped) => {
const { index, data: data2 } = scoped;
const item = data2[index];
if (data2[index].type === "Group") {
return vue.h(script$x, {
item,
style: scoped.style,
height: isSized ? listProps.itemSize : listProps.estimatedSize,
});
}
const selected = isItemSelected(modelValue, item);
const itemDisabled = isItemDisabled(modelValue, selected);
return vue.h(
script$w,
__spreadProps$c(__spreadValues$g({}, scoped), {
selected,
disabled: item.disabled || itemDisabled,
created: !!item.created,
hovering: isItemHovering(index),
item,
onSelect,
onHover,
}),
{
default: vue.withCtx((props) => {
return vue.renderSlot($slots, "default", props, () => [
vue.h("span", item.label),
]);
}),
}
);
});
const List = vue.h(
Comp,
__spreadValues$g(
{
ref: "listRef",
className: "el-select-dropdown__list",
data,
height,
width,
total: data.length,
onKeydown: [
_cache[1] ||
(_cache[1] = vue.withKeys(
vue.withModifiers(
() => onKeyboardNavigate("forward"),
["stop", "prevent"]
),
["down"]
)),
_cache[2] ||
(_cache[2] = vue.withKeys(
vue.withModifiers(
() => onKeyboardNavigate("backward"),
["stop", "prevent"]
),
["up"]
)),
_cache[3] ||
(_cache[3] = vue.withKeys(
vue.withModifiers(onKeyboardSelect, ["stop", "prevent"]),
["enter"]
)),
_cache[4] ||
(_cache[4] = vue.withKeys(
vue.withModifiers(
() => (select.expanded = false),
["stop", "prevent"]
),
["esc"]
)),
_cache[5] ||
(_cache[5] = vue.withKeys(
() => (select.expanded = false),
["tab"]
)),
],
},
listProps
),
{
default: ListItem,
}
);
return vue.h(
"div",
{
class: {
"is-multiple": multiple,
"el-select-dropdown": true,
},
},
[List]
);
},
});
script$v.__file = "packages/components/select-v2/src/select-dropdown.vue";
function useAllowCreate(props, states) {
const createOptionCount = vue.ref(0);
const cachedSelectedOption = vue.ref(null);
const enableAllowCreateMode = vue.computed(() => {
return props.allowCreate && props.filterable;
});
function hasExistingOption(query) {
const hasValue = (option) => option.value === query;
return (
(props.options && props.options.some(hasValue)) ||
states.createdOptions.some(hasValue)
);
}
function selectNewOption(option) {
if (!enableAllowCreateMode.value) {
return;
}
if (props.multiple && option.created) {
createOptionCount.value++;
} else {
cachedSelectedOption.value = option;
}
}
function createNewOption(query) {
if (enableAllowCreateMode.value) {
if (query && query.length > 0 && !hasExistingOption(query)) {
const newOption = {
value: query,
label: query,
created: true,
disabled: false,
};
if (states.createdOptions.length >= createOptionCount.value) {
states.createdOptions[createOptionCount.value] = newOption;
} else {
states.createdOptions.push(newOption);
}
} else {
if (props.multiple) {
states.createdOptions.length = createOptionCount.value;
} else {
const selectedOption = cachedSelectedOption.value;
states.createdOptions.length = 0;
if (selectedOption && selectedOption.created) {
states.createdOptions.push(selectedOption);
}
}
}
}
}
function removeNewOption(option) {
if (!enableAllowCreateMode.value || !option || !option.created) {
return;
}
const idx = states.createdOptions.findIndex(
(it) => it.value === option.value
);
if (~idx) {
states.createdOptions.splice(idx, 1);
createOptionCount.value--;
}
}
function clearAllNewOption() {
if (enableAllowCreateMode.value) {
states.createdOptions.length = 0;
createOptionCount.value = 0;
}
}
return {
createNewOption,
removeNewOption,
selectNewOption,
clearAllNewOption,
};
}
const flattenOptions = (options) => {
const flattened = [];
options.map((option) => {
if (isArray$1(option.options)) {
flattened.push({
label: option.label,
isTitle: true,
type: "Group",
});
option.options.forEach((o) => {
flattened.push(o);
});
flattened.push({
type: "Group",
});
} else {
flattened.push(option);
}
});
return flattened;
};
function useInput(handleInput) {
const isComposing = vue.ref(false);
const handleCompositionStart = () => {
isComposing.value = true;
};
const handleCompositionUpdate = (event) => {
const text = event.target.value;
const lastCharacter = text[text.length - 1] || "";
isComposing.value = !isKorean(lastCharacter);
};
const handleCompositionEnd = (event) => {
if (isComposing.value) {
isComposing.value = false;
if (isFunction$1(handleInput)) {
handleInput(event);
}
}
};
return {
handleCompositionStart,
handleCompositionUpdate,
handleCompositionEnd,
};
}
var __defProp$f = Object.defineProperty;
var __defProps$b = Object.defineProperties;
var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
var __hasOwnProp$f = Object.prototype.hasOwnProperty;
var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
var __defNormalProp$f = (obj, key, value) =>
key in obj
? __defProp$f(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$f = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$f.call(b, prop)) __defNormalProp$f(a, prop, b[prop]);
if (__getOwnPropSymbols$f)
for (var prop of __getOwnPropSymbols$f(b)) {
if (__propIsEnum$f.call(b, prop)) __defNormalProp$f(a, prop, b[prop]);
}
return a;
};
var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
const DEFAULT_INPUT_PLACEHOLDER = "";
const MINIMUM_INPUT_WIDTH = 11;
const TAG_BASE_WIDTH = {
small: 42,
mini: 33,
};
const useSelect = (props, emit) => {
const { t } = useLocaleInject();
const elForm = vue.inject(elFormKey, {});
const elFormItem = vue.inject(elFormItemKey, {});
const $ELEMENT = useGlobalConfig();
const states = vue.reactive({
inputValue: DEFAULT_INPUT_PLACEHOLDER,
displayInputValue: DEFAULT_INPUT_PLACEHOLDER,
calculatedWidth: 0,
cachedPlaceholder: "",
cachedOptions: [],
createdOptions: [],
createdLabel: "",
createdSelected: false,
currentPlaceholder: "",
hoveringIndex: -1,
comboBoxHovering: false,
isOnComposition: false,
isSilentBlur: false,
isComposing: false,
inputLength: 20,
selectWidth: 200,
initialInputHeight: 0,
previousQuery: null,
previousValue: "",
query: "",
selectedLabel: "",
softFocus: false,
tagInMultiLine: false,
});
const selectedIndex = vue.ref(-1);
const popperSize = vue.ref(-1);
const controlRef = vue.ref(null);
const inputRef = vue.ref(null);
const menuRef = vue.ref(null);
const popper = vue.ref(null);
const selectRef = vue.ref(null);
const selectionRef = vue.ref(null);
const calculatorRef = vue.ref(null);
const expanded = vue.ref(false);
const selectDisabled = vue.computed(
() => props.disabled || elForm.disabled
);
const popupHeight = vue.computed(() => {
const totalHeight = filteredOptions.value.length * 34;
return totalHeight > props.height ? props.height : totalHeight;
});
const showClearBtn = vue.computed(() => {
const hasValue = props.multiple
? Array.isArray(props.modelValue) && props.modelValue.length > 0
: props.modelValue !== void 0 &&
props.modelValue !== null &&
props.modelValue !== "";
const criteria =
props.clearable &&
!selectDisabled.value &&
states.comboBoxHovering &&
hasValue;
return criteria;
});
const iconClass = vue.computed(() =>
props.remote && props.filterable
? ""
: expanded.value
? "arrow-up is-reverse"
: "arrow-up"
);
const debounce = vue.computed(() => (props.remote ? 300 : 0));
const emptyText = vue.computed(() => {
const options = filteredOptions.value;
if (props.loading) {
return props.loadingText || t("el.select.loading");
} else {
if (props.remote && states.inputValue === "" && options.length === 0)
return false;
if (props.filterable && states.inputValue && options.length > 0) {
return props.noMatchText || t("el.select.noMatch");
}
if (options.length === 0) {
return props.noDataText || t("el.select.noData");
}
}
return null;
});
const filteredOptions = vue.computed(() => {
const isValidOption = (o) => {
const query = states.inputValue;
const containsQueryString = query ? o.label.includes(query) : true;
return containsQueryString;
};
if (props.loading) {
return [];
}
return flattenOptions(
props.options
.concat(states.createdOptions)
.map((v) => {
if (isArray$1(v.options)) {
const filtered = v.options.filter(isValidOption);
if (filtered.length > 0) {
return __spreadProps$b(__spreadValues$f({}, v), {
options: filtered,
});
}
} else {
if (props.remote || isValidOption(v)) {
return v;
}
}
return null;
})
.filter((v) => v !== null)
);
});
const optionsAllDisabled = vue.computed(() =>
filteredOptions.value.every((option) => option.disabled)
);
const selectSize = vue.computed(
() => props.size || elFormItem.size || $ELEMENT.size
);
const collapseTagSize = vue.computed(() =>
["small", "mini"].indexOf(selectSize.value) > -1 ? "mini" : "small"
);
const tagMaxWidth = vue.computed(() => {
const select = selectionRef.value;
const size = collapseTagSize.value;
const paddingLeft = select
? parseInt(getComputedStyle(select).paddingLeft)
: 0;
const paddingRight = select
? parseInt(getComputedStyle(select).paddingRight)
: 0;
return (
states.selectWidth - paddingRight - paddingLeft - TAG_BASE_WIDTH[size]
);
});
const calculatePopperSize = () => {
var _a, _b, _c;
popperSize.value =
((_c =
(_b =
(_a = selectRef.value) == null
? void 0
: _a.getBoundingClientRect) == null
? void 0
: _b.call(_a)) == null
? void 0
: _c.width) || 200;
};
const inputWrapperStyle = vue.computed(() => {
return {
width: `${
states.calculatedWidth === 0
? MINIMUM_INPUT_WIDTH
: Math.ceil(states.calculatedWidth) + MINIMUM_INPUT_WIDTH
}px`,
};
});
const shouldShowPlaceholder = vue.computed(() => {
if (isArray$1(props.modelValue)) {
return props.modelValue.length === 0 && !states.displayInputValue;
}
return props.filterable ? states.displayInputValue.length === 0 : true;
});
const currentPlaceholder = vue.computed(() => {
const _placeholder = props.placeholder || t("el.select.placeholder");
return props.multiple
? _placeholder
: states.selectedLabel || _placeholder;
});
const popperRef = vue.computed(() => {
var _a;
return (_a = popper.value) == null ? void 0 : _a.popperRef;
});
const indexRef = vue.computed(() => {
if (props.multiple) {
const len = props.modelValue.length;
if (props.modelValue.length > 0) {
return filteredOptions.value.findIndex(
(o) => o.value === props.modelValue[len - 1]
);
}
} else {
if (props.modelValue) {
return filteredOptions.value.findIndex(
(o) => o.value === props.modelValue
);
}
}
return -1;
});
const dropdownMenuVisible = vue.computed(() => {
return expanded.value && emptyText.value !== false;
});
const {
createNewOption,
removeNewOption,
selectNewOption,
clearAllNewOption,
} = useAllowCreate(props, states);
const {
handleCompositionStart,
handleCompositionUpdate,
handleCompositionEnd,
} = useInput((e) => onInput(e));
const focusAndUpdatePopup = () => {
var _a, _b, _c, _d;
(_b = (_a = inputRef.value).focus) == null ? void 0 : _b.call(_a);
(_d = (_c = popper.value).update) == null ? void 0 : _d.call(_c);
};
const toggleMenu = () => {
if (props.automaticDropdown) return;
if (!selectDisabled.value) {
if (states.isComposing) states.softFocus = true;
return vue.nextTick(() => {
var _a, _b;
expanded.value = !expanded.value;
(_b = (_a = inputRef.value) == null ? void 0 : _a.focus) == null
? void 0
: _b.call(_a);
});
}
};
const onInputChange = () => {
if (props.filterable && states.inputValue !== states.selectedLabel) {
states.query = states.selectedLabel;
}
handleQueryChange(states.inputValue);
return vue.nextTick(() => {
createNewOption(states.inputValue);
});
};
const debouncedOnInputChange = debounce_1(onInputChange, debounce.value);
const handleQueryChange = (val) => {
if (states.previousQuery === val) {
return;
}
states.previousQuery = val;
if (props.filterable && isFunction$1(props.filterMethod)) {
props.filterMethod(val);
} else if (
props.filterable &&
props.remote &&
isFunction$1(props.remoteMethod)
) {
props.remoteMethod(val);
}
};
const emitChange = (val) => {
if (!isEqual$2(props.modelValue, val)) {
emit(CHANGE_EVENT, val);
}
};
const update = (val) => {
emit(UPDATE_MODEL_EVENT, val);
emitChange(val);
states.previousValue = val.toString();
};
const getValueIndex = (arr = [], value) => {
if (!isObject$2(value)) {
return arr.indexOf(value);
}
const valueKey = props.valueKey;
let index = -1;
arr.some((item, i) => {
if (
getValueByPath(item, valueKey) === getValueByPath(value, valueKey)
) {
index = i;
return true;
}
return false;
});
return index;
};
const getValueKey = (item) => {
return isObject$2(item) ? getValueByPath(item, props.valueKey) : item;
};
const getLabel = (item) => {
return isObject$2(item) ? item.label : item;
};
const resetInputHeight = () => {
if (props.collapseTags && !props.filterable) {
return;
}
return vue.nextTick(() => {
var _a, _b;
if (!inputRef.value) return;
const selection = selectionRef.value;
selectRef.value.height = selection.offsetHeight;
if (expanded.value && emptyText.value !== false) {
(_b = (_a = popper.value) == null ? void 0 : _a.update) == null
? void 0
: _b.call(_a);
}
});
};
const handleResize = () => {
var _a, _b;
resetInputWidth();
calculatePopperSize();
(_b = (_a = popper.value) == null ? void 0 : _a.update) == null
? void 0
: _b.call(_a);
if (props.multiple) {
return resetInputHeight();
}
};
const resetInputWidth = () => {
const select = selectionRef.value;
if (select) {
states.selectWidth = select.getBoundingClientRect().width;
}
};
const onSelect = (option, idx, byClick = true) => {
var _a, _b;
if (props.multiple) {
let selectedOptions = props.modelValue.slice();
const index = getValueIndex(selectedOptions, option.value);
if (index > -1) {
selectedOptions = [
...selectedOptions.slice(0, index),
...selectedOptions.slice(index + 1),
];
states.cachedOptions.splice(index, 1);
removeNewOption(option);
} else if (
props.multipleLimit <= 0 ||
selectedOptions.length < props.multipleLimit
) {
selectedOptions = [...selectedOptions, option.value];
states.cachedOptions.push(option);
selectNewOption(option);
updateHoveringIndex(idx);
}
update(selectedOptions);
if (option.created) {
states.query = "";
handleQueryChange("");
states.inputLength = 20;
}
if (props.filterable) {
(_b = (_a = inputRef.value).focus) == null ? void 0 : _b.call(_a);
onUpdateInputValue("");
}
if (props.filterable) {
states.calculatedWidth =
calculatorRef.value.getBoundingClientRect().width;
}
resetInputHeight();
setSoftFocus();
} else {
selectedIndex.value = idx;
states.selectedLabel = option.label;
update(option.value);
expanded.value = false;
states.isComposing = false;
states.isSilentBlur = byClick;
selectNewOption(option);
if (!option.created) {
clearAllNewOption();
}
updateHoveringIndex(idx);
}
};
const deleteTag = (event, tag) => {
const index = props.modelValue.indexOf(tag.value);
if (index > -1 && !selectDisabled.value) {
const value = [
...props.modelValue.slice(0, index),
...props.modelValue.slice(index + 1),
];
states.cachedOptions.splice(index, 1);
update(value);
emit("remove-tag", tag.value);
states.softFocus = true;
removeNewOption(tag);
return vue.nextTick(focusAndUpdatePopup);
}
event.stopPropagation();
};
const handleFocus = (event) => {
const focused = states.isComposing;
states.isComposing = true;
if (!states.softFocus) {
if (!focused) emit("focus", event);
} else {
states.softFocus = false;
}
};
const handleBlur = () => {
states.softFocus = false;
return vue.nextTick(() => {
var _a, _b;
(_b = (_a = inputRef.value) == null ? void 0 : _a.blur) == null
? void 0
: _b.call(_a);
if (calculatorRef.value) {
states.calculatedWidth =
calculatorRef.value.getBoundingClientRect().width;
}
if (states.isSilentBlur) {
states.isSilentBlur = false;
} else {
if (states.isComposing) {
emit("blur");
}
}
states.isComposing = false;
});
};
const handleEsc = () => {
if (states.displayInputValue.length > 0) {
onUpdateInputValue("");
} else {
expanded.value = false;
}
};
const handleDel = (e) => {
if (states.displayInputValue.length === 0) {
e.preventDefault();
const selected = props.modelValue.slice();
selected.pop();
removeNewOption(states.cachedOptions.pop());
update(selected);
}
};
const handleClear = () => {
let emptyValue;
if (isArray$1(props.modelValue)) {
emptyValue = [];
} else {
emptyValue = "";
}
states.softFocus = true;
if (props.multiple) {
states.cachedOptions = [];
} else {
states.selectedLabel = "";
}
expanded.value = false;
update(emptyValue);
emit("clear");
clearAllNewOption();
return vue.nextTick(focusAndUpdatePopup);
};
const onUpdateInputValue = (val) => {
states.displayInputValue = val;
states.inputValue = val;
};
const onKeyboardNavigate = (direction, hoveringIndex = void 0) => {
const options = filteredOptions.value;
if (
!["forward", "backward"].includes(direction) ||
selectDisabled.value ||
options.length <= 0 ||
optionsAllDisabled.value
) {
return;
}
if (!expanded.value) {
return toggleMenu();
}
if (hoveringIndex === void 0) {
hoveringIndex = states.hoveringIndex;
}
let newIndex = -1;
if (direction === "forward") {
newIndex = hoveringIndex + 1;
if (newIndex >= options.length) {
newIndex = 0;
}
} else if (direction === "backward") {
newIndex = hoveringIndex - 1;
if (newIndex < 0) {
newIndex = options.length - 1;
}
}
const option = options[newIndex];
if (option.disabled || option.type === "Group") {
return onKeyboardNavigate(direction, newIndex);
} else {
updateHoveringIndex(newIndex);
scrollToItem(newIndex);
}
};
const onKeyboardSelect = () => {
if (!expanded.value) {
return toggleMenu();
} else if (~states.hoveringIndex) {
onSelect(
filteredOptions.value[states.hoveringIndex],
states.hoveringIndex,
false
);
}
};
const updateHoveringIndex = (idx) => {
states.hoveringIndex = idx;
};
const resetHoveringIndex = () => {
states.hoveringIndex = -1;
};
const setSoftFocus = () => {
var _a;
const _input = inputRef.value;
if (_input) {
(_a = _input.focus) == null ? void 0 : _a.call(_input);
}
};
const onInput = (event) => {
const value = event.target.value;
onUpdateInputValue(value);
if (states.displayInputValue.length > 0 && !expanded.value) {
expanded.value = true;
}
states.calculatedWidth =
calculatorRef.value.getBoundingClientRect().width;
if (props.multiple) {
resetInputHeight();
}
if (props.remote) {
debouncedOnInputChange();
} else {
return onInputChange();
}
};
const handleClickOutside = () => {
expanded.value = false;
return handleBlur();
};
const handleMenuEnter = () => {
states.inputValue = states.displayInputValue;
return vue.nextTick(() => {
if (~indexRef.value) {
updateHoveringIndex(indexRef.value);
scrollToItem(states.hoveringIndex);
}
});
};
const scrollToItem = (index) => {
menuRef.value.scrollToItem(index);
};
const initStates = () => {
resetHoveringIndex();
if (props.multiple) {
if (props.modelValue.length > 0) {
let initHovering = false;
states.cachedOptions.length = 0;
props.modelValue.map((selected) => {
const itemIndex = filteredOptions.value.findIndex(
(option) => option.value === selected
);
if (~itemIndex) {
states.cachedOptions.push(filteredOptions.value[itemIndex]);
if (!initHovering) {
updateHoveringIndex(itemIndex);
}
initHovering = true;
}
});
}
} else {
if (props.modelValue) {
const options = filteredOptions.value;
const selectedItemIndex = options.findIndex(
(o) => o.value === props.modelValue
);
if (~selectedItemIndex) {
states.selectedLabel = options[selectedItemIndex].label;
updateHoveringIndex(selectedItemIndex);
} else {
states.selectedLabel = `${props.modelValue}`;
}
} else {
states.selectedLabel = "";
}
}
calculatePopperSize();
};
vue.watch(expanded, (val) => {
var _a, _b;
emit("visible-change", val);
if (val) {
(_b = (_a = popper.value).update) == null ? void 0 : _b.call(_a);
} else {
states.displayInputValue = "";
createNewOption("");
}
});
vue.watch(
() => props.modelValue,
(val) => {
if (!val || val.toString() !== states.previousValue) {
initStates();
}
},
{
deep: true,
}
);
vue.watch(
() => props.options,
() => {
const input = inputRef.value;
if (!input || (input && document.activeElement !== input)) {
initStates();
}
},
{
deep: true,
}
);
vue.watch(filteredOptions, () => {
return vue.nextTick(menuRef.value.resetScrollTop);
});
vue.onMounted(() => {
initStates();
addResizeListener(selectRef.value, handleResize);
});
vue.onBeforeMount(() => {
removeResizeListener(selectRef.value, handleResize);
});
return {
collapseTagSize,
currentPlaceholder,
expanded,
emptyText,
popupHeight,
debounce,
filteredOptions,
iconClass,
inputWrapperStyle,
popperSize,
dropdownMenuVisible,
shouldShowPlaceholder,
selectDisabled,
selectSize,
showClearBtn,
states,
tagMaxWidth,
calculatorRef,
controlRef,
inputRef,
menuRef,
popper,
selectRef,
selectionRef,
popperRef,
Effect: exports.Effect,
debouncedOnInputChange,
deleteTag,
getLabel,
getValueKey,
handleBlur,
handleClear,
handleClickOutside,
handleDel,
handleEsc,
handleFocus,
handleMenuEnter,
handleResize,
toggleMenu,
scrollTo: scrollToItem,
onInput,
onKeyboardNavigate,
onKeyboardSelect,
onSelect,
onHover: updateHoveringIndex,
onUpdateInputValue,
handleCompositionStart,
handleCompositionEnd,
handleCompositionUpdate,
};
};
var useSelect$1 = useSelect;
var __defProp$e = Object.defineProperty;
var __defProps$a = Object.defineProperties;
var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
var __hasOwnProp$e = Object.prototype.hasOwnProperty;
var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
var __defNormalProp$e = (obj, key, value) =>
key in obj
? __defProp$e(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$e = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$e.call(b, prop)) __defNormalProp$e(a, prop, b[prop]);
if (__getOwnPropSymbols$e)
for (var prop of __getOwnPropSymbols$e(b)) {
if (__propIsEnum$e.call(b, prop)) __defNormalProp$e(a, prop, b[prop]);
}
return a;
};
var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
var script$u = vue.defineComponent({
name: "ElSelectV2",
components: {
ElSelectMenu: script$v,
ElTag,
ElPopper: _Popper,
},
directives: { ClickOutside, ModelText: vue.vModelText },
props: SelectProps,
emits: [
UPDATE_MODEL_EVENT,
CHANGE_EVENT,
"remove-tag",
"clear",
"visible-change",
"focus",
"blur",
],
setup(props, { emit }) {
const API = useSelect$1(props, emit);
vue.provide(selectV2InjectionKey, {
props: vue.reactive(
__spreadProps$a(__spreadValues$e({}, vue.toRefs(props)), {
height: API.popupHeight,
})
),
onSelect: API.onSelect,
onHover: API.onHover,
onKeyboardNavigate: API.onKeyboardNavigate,
onKeyboardSelect: API.onKeyboardSelect,
});
return API;
},
});
const _hoisted_1$h = { key: 0 };
const _hoisted_2$f = {
key: 1,
class: "el-select-v2__selection",
};
const _hoisted_3$f = {
key: 0,
class: "el-select-v2__selected-item",
};
const _hoisted_4$9 = [
"id",
"autocomplete",
"aria-expanded",
"aria-labelledby",
"disabled",
"readonly",
"name",
"unselectable",
];
const _hoisted_5$7 = ["textContent"];
const _hoisted_6$7 = {
class: "el-select-v2__selected-item el-select-v2__input-wrapper",
};
const _hoisted_7$3 = [
"id",
"aria-labelledby",
"aria-expanded",
"autocomplete",
"disabled",
"name",
"readonly",
"unselectable",
];
const _hoisted_8$3 = ["textContent"];
const _hoisted_9$3 = { class: "el-select-v2__suffix" };
const _hoisted_10$3 = { class: "el-select-v2__empty" };
function render$p(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_tag = vue.resolveComponent("el-tag");
const _component_el_select_menu = vue.resolveComponent("el-select-menu");
const _component_el_popper = vue.resolveComponent("el-popper");
const _directive_model_text = vue.resolveDirective("model-text");
const _directive_click_outside = vue.resolveDirective("click-outside");
return vue.withDirectives(
(vue.openBlock(),
vue.createElementBlock(
"div",
{
ref: "selectRef",
class: vue.normalizeClass([
[_ctx.selectSize ? "el-select-v2--" + _ctx.selectSize : ""],
"el-select-v2",
]),
onClick:
_cache[25] ||
(_cache[25] = vue.withModifiers(
(...args) => _ctx.toggleMenu && _ctx.toggleMenu(...args),
["stop"]
)),
onMouseenter:
_cache[26] ||
(_cache[26] = ($event) => (_ctx.states.comboBoxHovering = true)),
onMouseleave:
_cache[27] ||
(_cache[27] = ($event) => (_ctx.states.comboBoxHovering = false)),
},
[
vue.createVNode(
_component_el_popper,
{
ref: "popper",
visible: _ctx.dropdownMenuVisible,
"onUpdate:visible":
_cache[23] ||
(_cache[23] = ($event) => (_ctx.dropdownMenuVisible = $event)),
"append-to-body": _ctx.popperAppendToBody,
"popper-class": `el-select-v2__popper ${_ctx.popperClass}`,
"gpu-acceleration": false,
"stop-popper-mouse-event": false,
"popper-options": _ctx.popperOptions,
"fallback-placements": [
"bottom-start",
"top-start",
"right",
"left",
],
effect: _ctx.Effect.LIGHT,
"manual-mode": "",
placement: "bottom-start",
pure: "",
transition: "el-zoom-in-top",
trigger: "click",
onBeforeEnter: _ctx.handleMenuEnter,
onAfterLeave:
_cache[24] ||
(_cache[24] = ($event) =>
(_ctx.states.inputValue = _ctx.states.displayInputValue)),
},
{
trigger: vue.withCtx(() => [
vue.createElementVNode(
"div",
{
ref: "selectionRef",
class: vue.normalizeClass([
"el-select-v2__wrapper",
{
"is-focused": _ctx.states.isComposing,
"is-hovering": _ctx.states.comboBoxHovering,
"is-filterable": _ctx.filterable,
"is-disabled": _ctx.disabled,
},
]),
},
[
_ctx.$slots.prefix
? (vue.openBlock(),
vue.createElementBlock("div", _hoisted_1$h, [
vue.renderSlot(_ctx.$slots, "prefix"),
]))
: vue.createCommentVNode("v-if", true),
_ctx.multiple
? (vue.openBlock(),
vue.createElementBlock("div", _hoisted_2$f, [
_ctx.collapseTags && _ctx.modelValue.length > 0
? (vue.openBlock(),
vue.createElementBlock("div", _hoisted_3$f, [
vue.createVNode(
_component_el_tag,
{
closable:
!_ctx.selectDisabled &&
!_ctx.states.cachedOptions[0].disable,
size: _ctx.collapseTagSize,
type: "info",
"disable-transitions": "",
onClose:
_cache[0] ||
(_cache[0] = ($event) =>
_ctx.deleteTag(
$event,
_ctx.states.cachedOptions[0]
)),
},
{
default: vue.withCtx(() => [
vue.createElementVNode(
"span",
{
class: "el-select-v2__tags-text",
style: vue.normalizeStyle({
maxWidth: `${_ctx.tagMaxWidth}px`,
}),
},
vue.toDisplayString(
_ctx.states.cachedOptions[0].label
),
5
),
]),
_: 1,
},
8,
["closable", "size"]
),
_ctx.modelValue.length > 1
? (vue.openBlock(),
vue.createBlock(
_component_el_tag,
{
key: 0,
closable: false,
size: _ctx.collapseTagSize,
type: "info",
"disable-transitions": "",
},
{
default: vue.withCtx(() => [
vue.createElementVNode(
"span",
{
class: "el-select-v2__tags-text",
style: vue.normalizeStyle({
maxWidth: `${_ctx.tagMaxWidth}px`,
}),
},
"+ " +
vue.toDisplayString(
_ctx.modelValue.length - 1
),
5
),
]),
_: 1,
},
8,
["size"]
))
: vue.createCommentVNode("v-if", true),
]))
: (vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
{ key: 1 },
vue.renderList(
_ctx.states.cachedOptions,
(selected, idx) => {
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
key: idx,
class: "el-select-v2__selected-item",
},
[
vue.createVNode(
_component_el_tag,
{
key: _ctx.getValueKey(selected),
closable:
!_ctx.selectDisabled &&
!selected.disabled,
size: _ctx.collapseTagSize,
type: "info",
"disable-transitions": "",
onClose: ($event) =>
_ctx.deleteTag(
$event,
selected
),
},
{
default: vue.withCtx(() => [
vue.createElementVNode(
"span",
{
class:
"el-select-v2__tags-text",
style: vue.normalizeStyle({
maxWidth: `${_ctx.tagMaxWidth}px`,
}),
},
vue.toDisplayString(
_ctx.getLabel(selected)
),
5
),
]),
_: 2,
},
1032,
["closable", "size", "onClose"]
),
]
)
);
}
),
128
)),
vue.createElementVNode(
"div",
{
class:
"el-select-v2__selected-item el-select-v2__input-wrapper",
style: vue.normalizeStyle(_ctx.inputWrapperStyle),
},
[
vue.withDirectives(
vue.createElementVNode(
"input",
{
id: _ctx.id,
ref: "inputRef",
autocomplete: _ctx.autocomplete,
"aria-autocomplete": "list",
"aria-haspopup": "listbox",
autocapitalize: "off",
"aria-expanded": _ctx.expanded,
"aria-labelledby": _ctx.label,
class: vue.normalizeClass([
"el-select-v2__combobox-input",
[
_ctx.selectSize
? `is-${_ctx.selectSize}`
: "",
],
]),
disabled: _ctx.disabled,
role: "combobox",
readonly: !_ctx.filterable,
spellcheck: "false",
type: "text",
name: _ctx.name,
unselectable: _ctx.expanded ? "on" : void 0,
"onUpdate:modelValue":
_cache[1] ||
(_cache[1] = (...args) =>
_ctx.onUpdateInputValue &&
_ctx.onUpdateInputValue(...args)),
onFocus:
_cache[2] ||
(_cache[2] = (...args) =>
_ctx.handleFocus &&
_ctx.handleFocus(...args)),
onInput:
_cache[3] ||
(_cache[3] = (...args) =>
_ctx.onInput && _ctx.onInput(...args)),
onCompositionstart:
_cache[4] ||
(_cache[4] = (...args) =>
_ctx.handleCompositionStart &&
_ctx.handleCompositionStart(...args)),
onCompositionupdate:
_cache[5] ||
(_cache[5] = (...args) =>
_ctx.handleCompositionUpdate &&
_ctx.handleCompositionUpdate(...args)),
onCompositionend:
_cache[6] ||
(_cache[6] = (...args) =>
_ctx.handleCompositionEnd &&
_ctx.handleCompositionEnd(...args)),
onKeydown: [
_cache[7] ||
(_cache[7] = vue.withKeys(
vue.withModifiers(
($event) =>
_ctx.onKeyboardNavigate(
"backward"
),
["stop", "prevent"]
),
["up"]
)),
_cache[8] ||
(_cache[8] = vue.withKeys(
vue.withModifiers(
($event) =>
_ctx.onKeyboardNavigate(
"forward"
),
["stop", "prevent"]
),
["down"]
)),
_cache[9] ||
(_cache[9] = vue.withKeys(
vue.withModifiers(
(...args) =>
_ctx.onKeyboardSelect &&
_ctx.onKeyboardSelect(...args),
["stop", "prevent"]
),
["enter"]
)),
_cache[10] ||
(_cache[10] = vue.withKeys(
vue.withModifiers(
(...args) =>
_ctx.handleEsc &&
_ctx.handleEsc(...args),
["stop", "prevent"]
),
["esc"]
)),
_cache[11] ||
(_cache[11] = vue.withKeys(
vue.withModifiers(
(...args) =>
_ctx.handleDel &&
_ctx.handleDel(...args),
["stop"]
),
["delete"]
)),
],
},
null,
42,
_hoisted_4$9
),
[
[
_directive_model_text,
_ctx.states.displayInputValue,
],
]
),
_ctx.filterable
? (vue.openBlock(),
vue.createElementBlock(
"span",
{
key: 0,
ref: "calculatorRef",
"aria-hidden": "true",
class: "el-select-v2__input-calculator",
textContent: vue.toDisplayString(
_ctx.states.displayInputValue
),
},
null,
8,
_hoisted_5$7
))
: vue.createCommentVNode("v-if", true),
],
4
),
]))
: (vue.openBlock(),
vue.createElementBlock(
vue.Fragment,
{ key: 2 },
[
vue.createElementVNode("div", _hoisted_6$7, [
vue.withDirectives(
vue.createElementVNode(
"input",
{
id: _ctx.id,
ref: "inputRef",
"aria-autocomplete": "list",
"aria-haspopup": "listbox",
"aria-labelledby": _ctx.label,
"aria-expanded": _ctx.expanded,
autocapitalize: "off",
autocomplete: _ctx.autocomplete,
class: "el-select-v2__combobox-input",
disabled: _ctx.disabled,
name: _ctx.name,
role: "combobox",
readonly: !_ctx.filterable,
spellcheck: "false",
type: "text",
unselectable: _ctx.expanded ? "on" : void 0,
onCompositionstart:
_cache[12] ||
(_cache[12] = (...args) =>
_ctx.handleCompositionStart &&
_ctx.handleCompositionStart(...args)),
onCompositionupdate:
_cache[13] ||
(_cache[13] = (...args) =>
_ctx.handleCompositionUpdate &&
_ctx.handleCompositionUpdate(...args)),
onCompositionend:
_cache[14] ||
(_cache[14] = (...args) =>
_ctx.handleCompositionEnd &&
_ctx.handleCompositionEnd(...args)),
onFocus:
_cache[15] ||
(_cache[15] = (...args) =>
_ctx.handleFocus &&
_ctx.handleFocus(...args)),
onInput:
_cache[16] ||
(_cache[16] = (...args) =>
_ctx.onInput && _ctx.onInput(...args)),
onKeydown: [
_cache[17] ||
(_cache[17] = vue.withKeys(
vue.withModifiers(
($event) =>
_ctx.onKeyboardNavigate(
"backward"
),
["stop", "prevent"]
),
["up"]
)),
_cache[18] ||
(_cache[18] = vue.withKeys(
vue.withModifiers(
($event) =>
_ctx.onKeyboardNavigate(
"forward"
),
["stop", "prevent"]
),
["down"]
)),
_cache[19] ||
(_cache[19] = vue.withKeys(
vue.withModifiers(
(...args) =>
_ctx.onKeyboardSelect &&
_ctx.onKeyboardSelect(...args),
["stop", "prevent"]
),
["enter"]
)),
_cache[20] ||
(_cache[20] = vue.withKeys(
vue.withModifiers(
(...args) =>
_ctx.handleEsc &&
_ctx.handleEsc(...args),
["stop", "prevent"]
),
["esc"]
)),
],
"onUpdate:modelValue":
_cache[21] ||
(_cache[21] = (...args) =>
_ctx.onUpdateInputValue &&
_ctx.onUpdateInputValue(...args)),
},
null,
40,
_hoisted_7$3
),
[
[
_directive_model_text,
_ctx.states.displayInputValue,
],
]
),
]),
_ctx.filterable
? (vue.openBlock(),
vue.createElementBlock(
"span",
{
key: 0,
ref: "calculatorRef",
"aria-hidden": "true",
class:
"el-select-v2__selected-item el-select-v2__input-calculator",
textContent: vue.toDisplayString(
_ctx.states.displayInputValue
),
},
null,
8,
_hoisted_8$3
))
: vue.createCommentVNode("v-if", true),
],
64
)),
_ctx.shouldShowPlaceholder
? (vue.openBlock(),
vue.createElementBlock(
"span",
{
key: 3,
class: vue.normalizeClass({
"el-select-v2__placeholder": true,
"is-transparent":
_ctx.states.isComposing ||
(_ctx.placeholder && _ctx.multiple
? _ctx.modelValue.length === 0
: !_ctx.modelValue),
}),
},
vue.toDisplayString(_ctx.currentPlaceholder),
3
))
: vue.createCommentVNode("v-if", true),
vue.createElementVNode("span", _hoisted_9$3, [
vue.withDirectives(
vue.createElementVNode(
"i",
{
class: vue.normalizeClass([
"el-select-v2__caret",
"el-input__icon",
"el-icon-" + _ctx.iconClass,
]),
},
null,
2
),
[[vue.vShow, !_ctx.showClearBtn]]
),
_ctx.showClearBtn
? (vue.openBlock(),
vue.createElementBlock(
"i",
{
key: 0,
class: vue.normalizeClass(
`el-select-v2__caret el-input__icon ${_ctx.clearIcon}`
),
onClick:
_cache[22] ||
(_cache[22] = vue.withModifiers(
(...args) =>
_ctx.handleClear &&
_ctx.handleClear(...args),
["prevent", "stop"]
)),
},
null,
2
))
: vue.createCommentVNode("v-if", true),
]),
],
2
),
]),
default: vue.withCtx(() => [
vue.createVNode(
_component_el_select_menu,
{
ref: "menuRef",
data: _ctx.filteredOptions,
width: _ctx.popperSize,
"hovering-index": _ctx.states.hoveringIndex,
},
{
default: vue.withCtx((scope) => [
vue.renderSlot(
_ctx.$slots,
"default",
vue.normalizeProps(vue.guardReactiveProps(scope))
),
]),
empty: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "empty", {}, () => [
vue.createElementVNode(
"p",
_hoisted_10$3,
vue.toDisplayString(
_ctx.emptyText ? _ctx.emptyText : ""
),
1
),
]),
]),
_: 3,
},
8,
["data", "width", "hovering-index"]
),
]),
_: 3,
},
8,
[
"visible",
"append-to-body",
"popper-class",
"popper-options",
"effect",
"onBeforeEnter",
]
),
],
34
)),
[[_directive_click_outside, _ctx.handleClickOutside, _ctx.popperRef]]
);
}
script$u.render = render$p;
script$u.__file = "packages/components/select-v2/src/select.vue";
script$u.install = (app) => {
app.component(script$u.name, script$u);
};
const _Select = script$u;
const ElSelectV2 = _Select;
var script$t = vue.defineComponent({
name: "ImgPlaceholder",
});
const _hoisted_1$g = {
viewBox: "0 0 1024 1024",
xmlns: "http://www.w3.org/2000/svg",
};
const _hoisted_2$e = /* @__PURE__ */ vue.createElementVNode(
"path",
{
d: "M64 896V128h896v768H64z m64-128l192-192 116.352 116.352L640 448l256 307.2V192H128v576z m224-480a96 96 0 1 1-0.064 192.064A96 96 0 0 1 352 288z",
},
null,
-1
);
const _hoisted_3$e = [_hoisted_2$e];
function render$o(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$g, _hoisted_3$e)
);
}
script$t.render = render$o;
script$t.__file = "packages/components/skeleton/src/image-placeholder.vue";
var script$s = vue.defineComponent({
name: "ElSkeletonItem",
components: {
[script$t.name]: script$t,
},
props: {
variant: {
type: String,
default: "text",
},
},
});
function render$n(_ctx, _cache, $props, $setup, $data, $options) {
const _component_img_placeholder = vue.resolveComponent("img-placeholder");
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
class: vue.normalizeClass([
"el-skeleton__item",
`el-skeleton__${_ctx.variant}`,
]),
},
[
_ctx.variant === "image"
? (vue.openBlock(),
vue.createBlock(_component_img_placeholder, { key: 0 }))
: vue.createCommentVNode("v-if", true),
],
2
)
);
}
script$s.render = render$n;
script$s.__file = "packages/components/skeleton/src/item.vue";
var script$r = vue.defineComponent({
name: "ElSkeleton",
components: {
[script$s.name]: script$s,
},
props: {
animated: {
type: Boolean,
default: false,
},
count: {
type: Number,
default: 1,
},
rows: {
type: Number,
default: 3,
},
loading: {
type: Boolean,
default: true,
},
throttle: {
type: Number,
},
},
setup(props) {
const innerLoading = vue.computed(() => {
return props.loading;
});
const uiLoading = useThrottleRender(innerLoading, props.throttle);
return {
uiLoading,
};
},
});
function render$m(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_skeleton_item =
vue.resolveComponent("el-skeleton-item");
return _ctx.uiLoading
? (vue.openBlock(),
vue.createElementBlock(
"div",
vue.mergeProps(
{
key: 0,
class: ["el-skeleton", _ctx.animated ? "is-animated" : ""],
},
_ctx.$attrs
),
[
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.count, (i) => {
return (
vue.openBlock(),
vue.createElementBlock(
vue.Fragment,
{ key: i },
[
_ctx.loading
? vue.renderSlot(
_ctx.$slots,
"template",
{ key: i },
() => [
vue.createVNode(_component_el_skeleton_item, {
class: "is-first",
variant: "p",
}),
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.rows, (item) => {
return (
vue.openBlock(),
vue.createBlock(
_component_el_skeleton_item,
{
key: item,
class: vue.normalizeClass({
"el-skeleton__paragraph": true,
"is-last":
item === _ctx.rows && _ctx.rows > 1,
}),
variant: "p",
},
null,
8,
["class"]
)
);
}),
128
)),
]
)
: vue.createCommentVNode("v-if", true),
],
64
)
);
}),
128
)),
],
16
))
: vue.renderSlot(
_ctx.$slots,
"default",
vue.normalizeProps(vue.mergeProps({ key: 1 }, _ctx.$attrs))
);
}
script$r.render = render$m;
script$r.__file = "packages/components/skeleton/src/index.vue";
const ElSkeleton = withInstall(script$r, {
SkeletonItem: script$s,
});
const ElSkeletonItem = withNoopInstall(script$s);
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
var __async$6 = (__this, __arguments, generator) => {
return new Promise((resolve, reject) => {
var fulfilled = (value) => {
try {
step(generator.next(value));
} catch (e) {
reject(e);
}
};
var rejected = (value) => {
try {
step(generator.throw(value));
} catch (e) {
reject(e);
}
};
var step = (x) =>
x.done
? resolve(x.value)
: Promise.resolve(x.value).then(fulfilled, rejected);
step((generator = generator.apply(__this, __arguments)).next());
});
};
const useTooltip = (props, formatTooltip, showTooltip) => {
const tooltip = vue.ref(null);
const tooltipVisible = vue.ref(false);
const enableFormat = vue.computed(() => {
return formatTooltip.value instanceof Function;
});
const formatValue = vue.computed(() => {
return (
(enableFormat.value && formatTooltip.value(props.modelValue)) ||
props.modelValue
);
});
const displayTooltip = debounce_1(() => {
showTooltip.value && (tooltipVisible.value = true);
}, 50);
const hideTooltip = debounce_1(() => {
showTooltip.value && (tooltipVisible.value = false);
}, 50);
return {
tooltip,
tooltipVisible,
formatValue,
displayTooltip,
hideTooltip,
};
};
const useSliderButton = (props, initData, emit) => {
const {
disabled,
min,
max,
step,
showTooltip,
precision,
sliderSize,
formatTooltip,
emitChange,
resetSize,
updateDragging,
} = vue.inject("SliderProvider");
const {
tooltip,
tooltipVisible,
formatValue,
displayTooltip,
hideTooltip,
} = useTooltip(props, formatTooltip, showTooltip);
const currentPosition = vue.computed(() => {
return `${
((props.modelValue - min.value) / (max.value - min.value)) * 100
}%`;
});
const wrapperStyle = vue.computed(() => {
return props.vertical
? { bottom: currentPosition.value }
: { left: currentPosition.value };
});
const handleMouseEnter = () => {
initData.hovering = true;
displayTooltip();
};
const handleMouseLeave = () => {
initData.hovering = false;
if (!initData.dragging) {
hideTooltip();
}
};
const onButtonDown = (event) => {
if (disabled.value) return;
event.preventDefault();
onDragStart(event);
on(window, "mousemove", onDragging);
on(window, "touchmove", onDragging);
on(window, "mouseup", onDragEnd);
on(window, "touchend", onDragEnd);
on(window, "contextmenu", onDragEnd);
};
const onLeftKeyDown = () => {
if (disabled.value) return;
initData.newPosition =
parseFloat(currentPosition.value) -
(step.value / (max.value - min.value)) * 100;
setPosition(initData.newPosition);
emitChange();
};
const onRightKeyDown = () => {
if (disabled.value) return;
initData.newPosition =
parseFloat(currentPosition.value) +
(step.value / (max.value - min.value)) * 100;
setPosition(initData.newPosition);
emitChange();
};
const getClientXY = (event) => {
let clientX;
let clientY;
if (event.type.startsWith("touch")) {
clientY = event.touches[0].clientY;
clientX = event.touches[0].clientX;
} else {
clientY = event.clientY;
clientX = event.clientX;
}
return {
clientX,
clientY,
};
};
const onDragStart = (event) => {
initData.dragging = true;
initData.isClick = true;
const { clientX, clientY } = getClientXY(event);
if (props.vertical) {
initData.startY = clientY;
} else {
initData.startX = clientX;
}
initData.startPosition = parseFloat(currentPosition.value);
initData.newPosition = initData.startPosition;
};
const onDragging = (event) => {
if (initData.dragging) {
initData.isClick = false;
displayTooltip();
resetSize();
let diff;
const { clientX, clientY } = getClientXY(event);
if (props.vertical) {
initData.currentY = clientY;
diff =
((initData.startY - initData.currentY) / sliderSize.value) * 100;
} else {
initData.currentX = clientX;
diff =
((initData.currentX - initData.startX) / sliderSize.value) * 100;
}
initData.newPosition = initData.startPosition + diff;
setPosition(initData.newPosition);
}
};
const onDragEnd = () => {
if (initData.dragging) {
setTimeout(() => {
initData.dragging = false;
if (!initData.hovering) {
hideTooltip();
}
if (!initData.isClick) {
setPosition(initData.newPosition);
emitChange();
}
}, 0);
off(window, "mousemove", onDragging);
off(window, "touchmove", onDragging);
off(window, "mouseup", onDragEnd);
off(window, "touchend", onDragEnd);
off(window, "contextmenu", onDragEnd);
}
};
const setPosition = (newPosition) =>
__async$6(undefined, null, function* () {
if (newPosition === null || isNaN(newPosition)) return;
if (newPosition < 0) {
newPosition = 0;
} else if (newPosition > 100) {
newPosition = 100;
}
const lengthPerStep = 100 / ((max.value - min.value) / step.value);
const steps = Math.round(newPosition / lengthPerStep);
let value =
steps * lengthPerStep * (max.value - min.value) * 0.01 + min.value;
value = parseFloat(value.toFixed(precision.value));
emit(UPDATE_MODEL_EVENT, value);
if (!initData.dragging && props.modelValue !== initData.oldValue) {
initData.oldValue = props.modelValue;
}
yield vue.nextTick();
initData.dragging && displayTooltip();
tooltip.value.updatePopper();
});
vue.watch(
() => initData.dragging,
(val) => {
updateDragging(val);
}
);
return {
tooltip,
tooltipVisible,
showTooltip,
wrapperStyle,
formatValue,
handleMouseEnter,
handleMouseLeave,
onButtonDown,
onLeftKeyDown,
onRightKeyDown,
setPosition,
};
};
var script$q = vue.defineComponent({
name: "ElSliderButton",
components: {
ElTooltip: _Tooltip,
},
props: {
modelValue: {
type: Number,
default: 0,
},
vertical: {
type: Boolean,
default: false,
},
tooltipClass: {
type: String,
default: "",
},
},
emits: [UPDATE_MODEL_EVENT],
setup(props, { emit }) {
const initData = vue.reactive({
hovering: false,
dragging: false,
isClick: false,
startX: 0,
currentX: 0,
startY: 0,
currentY: 0,
startPosition: 0,
newPosition: 0,
oldValue: props.modelValue,
});
const {
tooltip,
showTooltip,
tooltipVisible,
wrapperStyle,
formatValue,
handleMouseEnter,
handleMouseLeave,
onButtonDown,
onLeftKeyDown,
onRightKeyDown,
setPosition,
} = useSliderButton(props, initData, emit);
const { hovering, dragging } = vue.toRefs(initData);
return {
tooltip,
tooltipVisible,
showTooltip,
wrapperStyle,
formatValue,
handleMouseEnter,
handleMouseLeave,
onButtonDown,
onLeftKeyDown,
onRightKeyDown,
setPosition,
hovering,
dragging,
};
},
});
function render$l(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_tooltip = vue.resolveComponent("el-tooltip");
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
ref: "button",
class: vue.normalizeClass([
"el-slider__button-wrapper",
{ hover: _ctx.hovering, dragging: _ctx.dragging },
]),
style: vue.normalizeStyle(_ctx.wrapperStyle),
tabindex: "0",
onMouseenter:
_cache[1] ||
(_cache[1] = (...args) =>
_ctx.handleMouseEnter && _ctx.handleMouseEnter(...args)),
onMouseleave:
_cache[2] ||
(_cache[2] = (...args) =>
_ctx.handleMouseLeave && _ctx.handleMouseLeave(...args)),
onMousedown:
_cache[3] ||
(_cache[3] = (...args) =>
_ctx.onButtonDown && _ctx.onButtonDown(...args)),
onTouchstart:
_cache[4] ||
(_cache[4] = (...args) =>
_ctx.onButtonDown && _ctx.onButtonDown(...args)),
onFocus:
_cache[5] ||
(_cache[5] = (...args) =>
_ctx.handleMouseEnter && _ctx.handleMouseEnter(...args)),
onBlur:
_cache[6] ||
(_cache[6] = (...args) =>
_ctx.handleMouseLeave && _ctx.handleMouseLeave(...args)),
onKeydown: [
_cache[7] ||
(_cache[7] = vue.withKeys(
(...args) => _ctx.onLeftKeyDown && _ctx.onLeftKeyDown(...args),
["left"]
)),
_cache[8] ||
(_cache[8] = vue.withKeys(
(...args) =>
_ctx.onRightKeyDown && _ctx.onRightKeyDown(...args),
["right"]
)),
_cache[9] ||
(_cache[9] = vue.withKeys(
vue.withModifiers(
(...args) =>
_ctx.onLeftKeyDown && _ctx.onLeftKeyDown(...args),
["prevent"]
),
["down"]
)),
_cache[10] ||
(_cache[10] = vue.withKeys(
vue.withModifiers(
(...args) =>
_ctx.onRightKeyDown && _ctx.onRightKeyDown(...args),
["prevent"]
),
["up"]
)),
],
},
[
vue.createVNode(
_component_el_tooltip,
{
ref: "tooltip",
modelValue: _ctx.tooltipVisible,
"onUpdate:modelValue":
_cache[0] ||
(_cache[0] = ($event) => (_ctx.tooltipVisible = $event)),
placement: "top",
"stop-popper-mouse-event": false,
"popper-class": _ctx.tooltipClass,
disabled: !_ctx.showTooltip,
manual: "",
},
{
content: vue.withCtx(() => [
vue.createElementVNode(
"span",
null,
vue.toDisplayString(_ctx.formatValue),
1
),
]),
default: vue.withCtx(() => [
vue.createElementVNode(
"div",
{
class: vue.normalizeClass([
"el-slider__button",
{ hover: _ctx.hovering, dragging: _ctx.dragging },
]),
},
null,
2
),
]),
_: 1,
},
8,
["modelValue", "popper-class", "disabled"]
),
],
38
)
);
}
script$q.render = render$l;
script$q.__file = "packages/components/slider/src/button.vue";
var script$p = vue.defineComponent({
name: "ElMarker",
props: {
mark: {
type: [String, Object],
default: () => void 0,
},
},
setup(props) {
const label = vue.computed(() => {
return typeof props.mark === "string" ? props.mark : props.mark.label;
});
return {
label,
};
},
render() {
var _a;
return vue.h(
"div",
{
class: "el-slider__marks-text",
style: (_a = this.mark) == null ? void 0 : _a.style,
},
this.label
);
},
});
script$p.__file = "packages/components/slider/src/marker.vue";
const useMarks = (props) => {
return vue.computed(() => {
if (!props.marks) {
return [];
}
const marksKeys = Object.keys(props.marks);
return marksKeys
.map(parseFloat)
.sort((a, b) => a - b)
.filter((point) => point <= props.max && point >= props.min)
.map((point) => ({
point,
position: ((point - props.min) * 100) / (props.max - props.min),
mark: props.marks[point],
}));
});
};
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
var __async$5 = (__this, __arguments, generator) => {
return new Promise((resolve, reject) => {
var fulfilled = (value) => {
try {
step(generator.next(value));
} catch (e) {
reject(e);
}
};
var rejected = (value) => {
try {
step(generator.throw(value));
} catch (e) {
reject(e);
}
};
var step = (x) =>
x.done
? resolve(x.value)
: Promise.resolve(x.value).then(fulfilled, rejected);
step((generator = generator.apply(__this, __arguments)).next());
});
};
const useSlide = (props, initData, emit) => {
const elForm = vue.inject(elFormKey, {});
const elFormItem = vue.inject(elFormItemKey, {});
const slider = vue.shallowRef(null);
const firstButton = vue.ref(null);
const secondButton = vue.ref(null);
const buttonRefs = {
firstButton,
secondButton,
};
const sliderDisabled = vue.computed(() => {
return props.disabled || elForm.disabled || false;
});
const minValue = vue.computed(() => {
return Math.min(initData.firstValue, initData.secondValue);
});
const maxValue = vue.computed(() => {
return Math.max(initData.firstValue, initData.secondValue);
});
const barSize = vue.computed(() => {
return props.range
? `${
(100 * (maxValue.value - minValue.value)) / (props.max - props.min)
}%`
: `${
(100 * (initData.firstValue - props.min)) / (props.max - props.min)
}%`;
});
const barStart = vue.computed(() => {
return props.range
? `${(100 * (minValue.value - props.min)) / (props.max - props.min)}%`
: "0%";
});
const runwayStyle = vue.computed(() => {
return props.vertical ? { height: props.height } : {};
});
const barStyle = vue.computed(() => {
return props.vertical
? {
height: barSize.value,
bottom: barStart.value,
}
: {
width: barSize.value,
left: barStart.value,
};
});
const resetSize = () => {
if (slider.value) {
initData.sliderSize =
slider.value[`client${props.vertical ? "Height" : "Width"}`];
}
};
const setPosition = (percent) => {
const targetValue = props.min + (percent * (props.max - props.min)) / 100;
if (!props.range) {
firstButton.value.setPosition(percent);
return;
}
let buttonRefName;
if (
Math.abs(minValue.value - targetValue) <
Math.abs(maxValue.value - targetValue)
) {
buttonRefName =
initData.firstValue < initData.secondValue
? "firstButton"
: "secondButton";
} else {
buttonRefName =
initData.firstValue > initData.secondValue
? "firstButton"
: "secondButton";
}
buttonRefs[buttonRefName].value.setPosition(percent);
};
const emitChange = () =>
__async$5(undefined, null, function* () {
yield vue.nextTick();
emit(
CHANGE_EVENT,
props.range ? [minValue.value, maxValue.value] : props.modelValue
);
});
const onSliderClick = (event) => {
if (sliderDisabled.value || initData.dragging) return;
resetSize();
if (props.vertical) {
const sliderOffsetBottom = slider.value.getBoundingClientRect().bottom;
setPosition(
((sliderOffsetBottom - event.clientY) / initData.sliderSize) * 100
);
} else {
const sliderOffsetLeft = slider.value.getBoundingClientRect().left;
setPosition(
((event.clientX - sliderOffsetLeft) / initData.sliderSize) * 100
);
}
emitChange();
};
return {
elFormItem,
slider,
firstButton,
secondButton,
sliderDisabled,
minValue,
maxValue,
runwayStyle,
barStyle,
resetSize,
setPosition,
emitChange,
onSliderClick,
};
};
const useStops = (props, initData, minValue, maxValue) => {
const stops = vue.computed(() => {
if (!props.showStops || props.min > props.max) return [];
if (props.step === 0) {
return [];
}
const stopCount = (props.max - props.min) / props.step;
const stepWidth = (100 * props.step) / (props.max - props.min);
const result = Array.from({ length: stopCount - 1 }).map(
(_, index) => (index + 1) * stepWidth
);
if (props.range) {
return result.filter((step) => {
return (
step <
(100 * (minValue.value - props.min)) / (props.max - props.min) ||
step >
(100 * (maxValue.value - props.min)) / (props.max - props.min)
);
});
} else {
return result.filter(
(step) =>
step >
(100 * (initData.firstValue - props.min)) / (props.max - props.min)
);
}
});
const getStopStyle = (position) => {
return props.vertical
? { bottom: `${position}%` }
: { left: `${position}%` };
};
return {
stops,
getStopStyle,
};
};
var __defProp$d = Object.defineProperty;
var __defProps$9 = Object.defineProperties;
var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
var __hasOwnProp$d = Object.prototype.hasOwnProperty;
var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
var __defNormalProp$d = (obj, key, value) =>
key in obj
? __defProp$d(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$d = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$d.call(b, prop)) __defNormalProp$d(a, prop, b[prop]);
if (__getOwnPropSymbols$d)
for (var prop of __getOwnPropSymbols$d(b)) {
if (__propIsEnum$d.call(b, prop)) __defNormalProp$d(a, prop, b[prop]);
}
return a;
};
var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
var __async$4 = (__this, __arguments, generator) => {
return new Promise((resolve, reject) => {
var fulfilled = (value) => {
try {
step(generator.next(value));
} catch (e) {
reject(e);
}
};
var rejected = (value) => {
try {
step(generator.throw(value));
} catch (e) {
reject(e);
}
};
var step = (x) =>
x.done
? resolve(x.value)
: Promise.resolve(x.value).then(fulfilled, rejected);
step((generator = generator.apply(__this, __arguments)).next());
});
};
var script$o = vue.defineComponent({
name: "ElSlider",
components: {
ElInputNumber: _InputNumber,
SliderButton: script$q,
SliderMarker: script$p,
},
props: {
modelValue: {
type: [Number, Array],
default: 0,
},
min: {
type: Number,
default: 0,
},
max: {
type: Number,
default: 100,
},
step: {
type: Number,
default: 1,
},
showInput: {
type: Boolean,
default: false,
},
showInputControls: {
type: Boolean,
default: true,
},
inputSize: {
type: String,
default: "small",
},
showStops: {
type: Boolean,
default: false,
},
showTooltip: {
type: Boolean,
default: true,
},
formatTooltip: {
type: Function,
default: void 0,
},
disabled: {
type: Boolean,
default: false,
},
range: {
type: Boolean,
default: false,
},
vertical: {
type: Boolean,
default: false,
},
height: {
type: String,
default: "",
},
debounce: {
type: Number,
default: 300,
},
label: {
type: String,
default: void 0,
},
tooltipClass: {
type: String,
default: void 0,
},
marks: Object,
},
emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT, INPUT_EVENT],
setup(props, { emit }) {
const initData = vue.reactive({
firstValue: 0,
secondValue: 0,
oldValue: 0,
dragging: false,
sliderSize: 1,
});
const {
elFormItem,
slider,
firstButton,
secondButton,
sliderDisabled,
minValue,
maxValue,
runwayStyle,
barStyle,
resetSize,
emitChange,
onSliderClick,
} = useSlide(props, initData, emit);
const { stops, getStopStyle } = useStops(
props,
initData,
minValue,
maxValue
);
const markList = useMarks(props);
useWatch(props, initData, minValue, maxValue, emit, elFormItem);
const precision = vue.computed(() => {
const precisions = [props.min, props.max, props.step].map((item) => {
const decimal = `${item}`.split(".")[1];
return decimal ? decimal.length : 0;
});
return Math.max.apply(null, precisions);
});
const { sliderWrapper } = useLifecycle(props, initData, resetSize);
const { firstValue, secondValue, oldValue, dragging, sliderSize } =
vue.toRefs(initData);
const updateDragging = (val) => {
initData.dragging = val;
};
vue.provide(
"SliderProvider",
__spreadProps$9(__spreadValues$d({}, vue.toRefs(props)), {
sliderSize,
disabled: sliderDisabled,
precision,
emitChange,
resetSize,
updateDragging,
})
);
return {
firstValue,
secondValue,
oldValue,
dragging,
sliderSize,
slider,
firstButton,
secondButton,
sliderDisabled,
runwayStyle,
barStyle,
emitChange,
onSliderClick,
getStopStyle,
stops,
markList,
sliderWrapper,
};
},
});
const useWatch = (props, initData, minValue, maxValue, emit, elFormItem) => {
const _emit = (val) => {
emit(UPDATE_MODEL_EVENT, val);
emit(INPUT_EVENT, val);
};
const valueChanged = () => {
if (props.range) {
return ![minValue.value, maxValue.value].every(
(item, index) => item === initData.oldValue[index]
);
} else {
return props.modelValue !== initData.oldValue;
}
};
const setValues = () => {
var _a, _b;
if (props.min > props.max) {
throwError("Slider", "min should not be greater than max.");
return;
}
const val = props.modelValue;
if (props.range && Array.isArray(val)) {
if (val[1] < props.min) {
_emit([props.min, props.min]);
} else if (val[0] > props.max) {
_emit([props.max, props.max]);
} else if (val[0] < props.min) {
_emit([props.min, val[1]]);
} else if (val[1] > props.max) {
_emit([val[0], props.max]);
} else {
initData.firstValue = val[0];
initData.secondValue = val[1];
if (valueChanged()) {
(_a = elFormItem.validate) == null
? void 0
: _a.call(elFormItem, "change");
initData.oldValue = val.slice();
}
}
} else if (!props.range && typeof val === "number" && !isNaN(val)) {
if (val < props.min) {
_emit(props.min);
} else if (val > props.max) {
_emit(props.max);
} else {
initData.firstValue = val;
if (valueChanged()) {
(_b = elFormItem.validate) == null
? void 0
: _b.call(elFormItem, "change");
initData.oldValue = val;
}
}
}
};
setValues();
vue.watch(
() => initData.dragging,
(val) => {
if (!val) {
setValues();
}
}
);
vue.watch(
() => initData.firstValue,
(val) => {
if (props.range) {
_emit([minValue.value, maxValue.value]);
} else {
_emit(val);
}
}
);
vue.watch(
() => initData.secondValue,
() => {
if (props.range) {
_emit([minValue.value, maxValue.value]);
}
}
);
vue.watch(
() => props.modelValue,
(val, oldVal) => {
if (
initData.dragging ||
(Array.isArray(val) &&
Array.isArray(oldVal) &&
val.every((item, index) => item === oldVal[index]))
) {
return;
}
setValues();
}
);
vue.watch(
() => [props.min, props.max],
() => {
setValues();
}
);
};
const useLifecycle = (props, initData, resetSize) => {
const sliderWrapper = vue.ref(null);
vue.onMounted(() =>
__async$4(undefined, null, function* () {
let valuetext;
if (props.range) {
if (Array.isArray(props.modelValue)) {
initData.firstValue = Math.max(props.min, props.modelValue[0]);
initData.secondValue = Math.min(props.max, props.modelValue[1]);
} else {
initData.firstValue = props.min;
initData.secondValue = props.max;
}
initData.oldValue = [initData.firstValue, initData.secondValue];
valuetext = `${initData.firstValue}-${initData.secondValue}`;
} else {
if (typeof props.modelValue !== "number" || isNaN(props.modelValue)) {
initData.firstValue = props.min;
} else {
initData.firstValue = Math.min(
props.max,
Math.max(props.min, props.modelValue)
);
}
initData.oldValue = initData.firstValue;
valuetext = initData.firstValue;
}
sliderWrapper.value.setAttribute("aria-valuetext", valuetext);
sliderWrapper.value.setAttribute(
"aria-label",
props.label
? props.label
: `slider between ${props.min} and ${props.max}`
);
on(window, "resize", resetSize);
yield vue.nextTick();
resetSize();
})
);
vue.onBeforeUnmount(() => {
off(window, "resize", resetSize);
});
return {
sliderWrapper,
};
};
const _hoisted_1$f = [
"aria-valuemin",
"aria-valuemax",
"aria-orientation",
"aria-disabled",
];
const _hoisted_2$d = { key: 1 };
const _hoisted_3$d = { class: "el-slider__marks" };
function render$k(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_input_number = vue.resolveComponent("el-input-number");
const _component_slider_button = vue.resolveComponent("slider-button");
const _component_slider_marker = vue.resolveComponent("slider-marker");
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
ref: "sliderWrapper",
class: vue.normalizeClass([
"el-slider",
{
"is-vertical": _ctx.vertical,
"el-slider--with-input": _ctx.showInput,
},
]),
role: "slider",
"aria-valuemin": _ctx.min,
"aria-valuemax": _ctx.max,
"aria-orientation": _ctx.vertical ? "vertical" : "horizontal",
"aria-disabled": _ctx.sliderDisabled,
},
[
_ctx.showInput && !_ctx.range
? (vue.openBlock(),
vue.createBlock(
_component_el_input_number,
{
key: 0,
ref: "input",
modelValue: _ctx.firstValue,
"onUpdate:modelValue":
_cache[0] ||
(_cache[0] = ($event) => (_ctx.firstValue = $event)),
class: "el-slider__input",
step: _ctx.step,
disabled: _ctx.sliderDisabled,
controls: _ctx.showInputControls,
min: _ctx.min,
max: _ctx.max,
debounce: _ctx.debounce,
size: _ctx.inputSize,
onChange: _ctx.emitChange,
},
null,
8,
[
"modelValue",
"step",
"disabled",
"controls",
"min",
"max",
"debounce",
"size",
"onChange",
]
))
: vue.createCommentVNode("v-if", true),
vue.createElementVNode(
"div",
{
ref: "slider",
class: vue.normalizeClass([
"el-slider__runway",
{
"show-input": _ctx.showInput && !_ctx.range,
disabled: _ctx.sliderDisabled,
},
]),
style: vue.normalizeStyle(_ctx.runwayStyle),
onClick:
_cache[3] ||
(_cache[3] = (...args) =>
_ctx.onSliderClick && _ctx.onSliderClick(...args)),
},
[
vue.createElementVNode(
"div",
{
class: "el-slider__bar",
style: vue.normalizeStyle(_ctx.barStyle),
},
null,
4
),
vue.createVNode(
_component_slider_button,
{
ref: "firstButton",
modelValue: _ctx.firstValue,
"onUpdate:modelValue":
_cache[1] ||
(_cache[1] = ($event) => (_ctx.firstValue = $event)),
vertical: _ctx.vertical,
"tooltip-class": _ctx.tooltipClass,
},
null,
8,
["modelValue", "vertical", "tooltip-class"]
),
_ctx.range
? (vue.openBlock(),
vue.createBlock(
_component_slider_button,
{
key: 0,
ref: "secondButton",
modelValue: _ctx.secondValue,
"onUpdate:modelValue":
_cache[2] ||
(_cache[2] = ($event) => (_ctx.secondValue = $event)),
vertical: _ctx.vertical,
"tooltip-class": _ctx.tooltipClass,
},
null,
8,
["modelValue", "vertical", "tooltip-class"]
))
: vue.createCommentVNode("v-if", true),
_ctx.showStops
? (vue.openBlock(),
vue.createElementBlock("div", _hoisted_2$d, [
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.stops, (item, key) => {
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
key,
class: "el-slider__stop",
style: vue.normalizeStyle(
_ctx.getStopStyle(item)
),
},
null,
4
)
);
}),
128
)),
]))
: vue.createCommentVNode("v-if", true),
_ctx.markList.length > 0
? (vue.openBlock(),
vue.createElementBlock(
vue.Fragment,
{ key: 2 },
[
vue.createElementVNode("div", null, [
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.markList, (item, key) => {
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
key,
style: vue.normalizeStyle(
_ctx.getStopStyle(item.position)
),
class:
"el-slider__stop el-slider__marks-stop",
},
null,
4
)
);
}),
128
)),
]),
vue.createElementVNode("div", _hoisted_3$d, [
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.markList, (item, key) => {
return (
vue.openBlock(),
vue.createBlock(
_component_slider_marker,
{
key,
mark: item.mark,
style: vue.normalizeStyle(
_ctx.getStopStyle(item.position)
),
},
null,
8,
["mark", "style"]
)
);
}),
128
)),
]),
],
64
))
: vue.createCommentVNode("v-if", true),
],
6
),
],
10,
_hoisted_1$f
)
);
}
script$o.render = render$k;
script$o.__file = "packages/components/slider/src/index.vue";
script$o.install = (app) => {
app.component(script$o.name, script$o);
};
const _Slider = script$o;
const ElSlider = _Slider;
var script$n = vue.defineComponent({
props: {
prefixCls: {
type: String,
default: "el-space",
},
},
setup(props) {
return {
classes: vue.computed(() => `${props.prefixCls}__item`),
};
},
});
function render$j(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
class: vue.normalizeClass(_ctx.classes),
},
[vue.renderSlot(_ctx.$slots, "default")],
2
)
);
}
script$n.render = render$j;
script$n.__file = "packages/components/space/src/item.vue";
const SizeMap = {
mini: 4,
small: 8,
medium: 12,
large: 16,
};
const defaultProps$4 = {
direction: {
type: String,
default: "horizontal",
},
class: {
type: [String, Object, Array],
default: "",
},
style: {
type: [String, Array, Object],
},
alignment: {
type: String,
default: "center",
},
prefixCls: {
type: String,
},
spacer: {
type: [Object, String, Number],
default: null,
validator: (val) => {
return vue.isVNode(val) || isNumber(val) || isString$1(val);
},
},
wrap: {
type: Boolean,
default: false,
},
fill: {
type: Boolean,
default: false,
},
fillRatio: {
type: Number,
default: 100,
},
size: {
type: [String, Array, Number],
validator: (val) => {
return isValidComponentSize(val) || isNumber(val) || isArray$1(val);
},
},
};
function useSpace(props) {
const classes = vue.computed(() => [
"el-space",
`el-space--${props.direction}`,
props.class,
]);
const horizontalSize = vue.ref(0);
const verticalSize = vue.ref(0);
vue.watch(
() => [props.size, props.wrap, props.direction, props.fill],
([size = "small", wrap, dir, fill]) => {
if (isArray$1(size)) {
const [h = 0, v = 0] = size;
horizontalSize.value = h;
verticalSize.value = v;
} else {
let val;
if (isNumber(size)) {
val = size;
} else {
val = SizeMap[size] || SizeMap.small;
}
if ((wrap || fill) && dir === "horizontal") {
horizontalSize.value = verticalSize.value = val;
} else {
if (dir === "horizontal") {
horizontalSize.value = val;
verticalSize.value = 0;
} else {
verticalSize.value = val;
horizontalSize.value = 0;
}
}
}
},
{ immediate: true }
);
const containerStyle = vue.computed(() => {
const wrapKls =
props.wrap || props.fill
? { flexWrap: "wrap", marginBottom: `-${verticalSize.value}px` }
: null;
const alignment = {
alignItems: props.alignment,
};
return [wrapKls, alignment, props.style];
});
const itemStyle = vue.computed(() => {
const itemBaseStyle = {
paddingBottom: `${verticalSize.value}px`,
marginRight: `${horizontalSize.value}px`,
};
const fillStyle = props.fill
? { flexGrow: 1, minWidth: `${props.fillRatio}%` }
: null;
return [itemBaseStyle, fillStyle];
});
return {
classes,
containerStyle,
itemStyle,
};
}
var Space = vue.defineComponent({
name: "ElSpace",
props: defaultProps$4,
setup(props) {
return useSpace(props);
},
render(ctx) {
const {
classes,
$slots,
containerStyle,
itemStyle,
spacer,
prefixCls,
direction,
} = ctx;
const children = vue.renderSlot($slots, "default", { key: 0 }, () => []);
if (children.children.length === 0) return null;
if (isArray$1(children.children)) {
let extractedChildren = [];
children.children.forEach((child, loopKey) => {
if (isFragment(child)) {
if (isArray$1(child.children)) {
child.children.forEach((nested, key) => {
extractedChildren.push(
vue.createVNode(
script$n,
{
style: itemStyle,
prefixCls,
key: `nested-${key}`,
},
{
default: () => [nested],
},
PatchFlags.PROPS | PatchFlags.STYLE,
["style", "prefixCls"]
)
);
});
}
} else if (isValidElementNode(child)) {
extractedChildren.push(
vue.createVNode(
script$n,
{
style: itemStyle,
prefixCls,
key: `LoopKey${loopKey}`,
},
{
default: () => [child],
},
PatchFlags.PROPS | PatchFlags.STYLE,
["style", "prefixCls"]
)
);
}
});
if (spacer) {
const len = extractedChildren.length - 1;
extractedChildren = extractedChildren.reduce((acc, child, idx) => {
return idx === len
? [...acc, child]
: [
...acc,
child,
vue.createVNode(
"span",
{
style: [
itemStyle,
direction === "vertical" ? "width: 100%" : null,
],
key: idx,
},
[
vue.isVNode(spacer)
? spacer
: vue.createTextVNode(spacer, PatchFlags.TEXT),
],
PatchFlags.STYLE
),
];
}, []);
}
return vue.createVNode(
"div",
{
class: classes,
style: containerStyle,
},
extractedChildren,
PatchFlags.STYLE | PatchFlags.CLASS
);
}
return children.children;
},
});
const _Space = Space;
_Space.install = (app) => {
app.component(_Space.name, _Space);
};
const ElSpace = _Space;
var script$m = vue.defineComponent({
name: "ElSteps",
props: {
space: {
type: [Number, String],
default: "",
},
active: {
type: Number,
default: 0,
},
direction: {
type: String,
default: "horizontal",
validator: (val) => ["horizontal", "vertical"].includes(val),
},
alignCenter: {
type: Boolean,
default: false,
},
simple: {
type: Boolean,
default: false,
},
finishStatus: {
type: String,
default: "finish",
validator: (val) =>
["wait", "process", "finish", "error", "success"].includes(val),
},
processStatus: {
type: String,
default: "process",
validator: (val) =>
["wait", "process", "finish", "error", "success"].includes(val),
},
},
emits: [CHANGE_EVENT],
setup(props, { emit }) {
const steps = vue.ref([]);
vue.watch(steps, () => {
steps.value.forEach((instance, index) => {
instance.setIndex(index);
});
});
vue.provide("ElSteps", { props, steps });
vue.watch(
() => props.active,
(newVal, oldVal) => {
emit(CHANGE_EVENT, newVal, oldVal);
}
);
return {
steps,
};
},
});
function render$i(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
class: vue.normalizeClass([
"el-steps",
_ctx.simple ? "el-steps--simple" : `el-steps--${_ctx.direction}`,
]),
},
[vue.renderSlot(_ctx.$slots, "default")],
2
)
);
}
script$m.render = render$i;
script$m.__file = "packages/components/steps/src/index.vue";
var script$l = vue.defineComponent({
name: "ElStep",
props: {
title: {
type: String,
default: "",
},
icon: {
type: String,
default: "",
},
description: {
type: String,
default: "",
},
status: {
type: String,
default: "",
validator: (val) =>
["", "wait", "process", "finish", "error", "success"].includes(val),
},
},
setup(props) {
const index = vue.ref(-1);
const lineStyle = vue.ref({});
const internalStatus = vue.ref("");
const parent = vue.inject("ElSteps");
const currentInstance = vue.getCurrentInstance();
vue.onMounted(() => {
vue.watch(
[
() => parent.props.active,
() => parent.props.processStatus,
() => parent.props.finishStatus,
],
([active]) => {
updateStatus(active);
},
{ immediate: true }
);
});
vue.onBeforeUnmount(() => {
parent.steps.value = parent.steps.value.filter(
(instance) => instance.uid !== currentInstance.uid
);
});
const currentStatus = vue.computed(() => {
return props.status || internalStatus.value;
});
const prevStatus = vue.computed(() => {
const prevStep = parent.steps.value[index.value - 1];
return prevStep ? prevStep.currentStatus : "wait";
});
const isCenter = vue.computed(() => {
return parent.props.alignCenter;
});
const isVertical = vue.computed(() => {
return parent.props.direction === "vertical";
});
const isSimple = vue.computed(() => {
return parent.props.simple;
});
const stepsCount = vue.computed(() => {
return parent.steps.value.length;
});
const isLast = vue.computed(() => {
var _a;
return (
((_a = parent.steps.value[stepsCount.value - 1]) == null
? void 0
: _a.uid) === currentInstance.uid
);
});
const space = vue.computed(() => {
return isSimple.value ? "" : parent.props.space;
});
const style = vue.computed(() => {
const style2 = {
flexBasis:
typeof space.value === "number"
? `${space.value}px`
: space.value
? space.value
: `${100 / (stepsCount.value - (isCenter.value ? 0 : 1))}%`,
};
if (isVertical.value) return style2;
if (isLast.value) {
style2.maxWidth = `${100 / stepsCount.value}%`;
}
return style2;
});
const setIndex = (val) => {
index.value = val;
};
const calcProgress = (status) => {
let step = 100;
const style2 = {};
style2.transitionDelay = `${150 * index.value}ms`;
if (status === parent.props.processStatus) {
step = 0;
} else if (status === "wait") {
step = 0;
style2.transitionDelay = `${-150 * index.value}ms`;
}
style2.borderWidth = step && !isSimple.value ? "1px" : 0;
style2[
parent.props.direction === "vertical" ? "height" : "width"
] = `${step}%`;
lineStyle.value = style2;
};
const updateStatus = (activeIndex) => {
if (activeIndex > index.value) {
internalStatus.value = parent.props.finishStatus;
} else if (
activeIndex === index.value &&
prevStatus.value !== "error"
) {
internalStatus.value = parent.props.processStatus;
} else {
internalStatus.value = "wait";
}
const prevChild = parent.steps.value[stepsCount.value - 1];
if (prevChild) prevChild.calcProgress(internalStatus.value);
};
const stepItemState = vue.reactive({
uid: vue.computed(() => currentInstance.uid),
currentStatus,
setIndex,
calcProgress,
});
parent.steps.value = [...parent.steps.value, stepItemState];
return {
index,
lineStyle,
currentStatus,
isCenter,
isVertical,
isSimple,
isLast,
space,
style,
parent,
setIndex,
calcProgress,
updateStatus,
};
},
});
const _hoisted_1$e = { class: "el-step__line" };
const _hoisted_2$c = {
key: 1,
class: "el-step__icon-inner",
};
const _hoisted_3$c = { class: "el-step__main" };
const _hoisted_4$8 = {
key: 0,
class: "el-step__arrow",
};
function render$h(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
style: vue.normalizeStyle(_ctx.style),
class: vue.normalizeClass([
"el-step",
_ctx.isSimple ? "is-simple" : `is-${_ctx.parent.props.direction}`,
_ctx.isLast && !_ctx.space && !_ctx.isCenter && "is-flex",
_ctx.isCenter && !_ctx.isVertical && !_ctx.isSimple && "is-center",
]),
},
[
vue.createCommentVNode(" icon & line "),
vue.createElementVNode(
"div",
{
class: vue.normalizeClass([
"el-step__head",
`is-${_ctx.currentStatus}`,
]),
},
[
vue.createElementVNode("div", _hoisted_1$e, [
vue.createElementVNode(
"i",
{
class: "el-step__line-inner",
style: vue.normalizeStyle(_ctx.lineStyle),
},
null,
4
),
]),
vue.createElementVNode(
"div",
{
class: vue.normalizeClass([
"el-step__icon",
`is-${_ctx.icon ? "icon" : "text"}`,
]),
},
[
_ctx.currentStatus !== "success" &&
_ctx.currentStatus !== "error"
? vue.renderSlot(_ctx.$slots, "icon", { key: 0 }, () => [
_ctx.icon
? (vue.openBlock(),
vue.createElementBlock(
"i",
{
key: 0,
class: vue.normalizeClass([
"el-step__icon-inner",
_ctx.icon,
]),
},
null,
2
))
: vue.createCommentVNode("v-if", true),
!_ctx.icon && !_ctx.isSimple
? (vue.openBlock(),
vue.createElementBlock(
"div",
_hoisted_2$c,
vue.toDisplayString(_ctx.index + 1),
1
))
: vue.createCommentVNode("v-if", true),
])
: (vue.openBlock(),
vue.createElementBlock(
"i",
{
key: 1,
class: vue.normalizeClass([
"el-step__icon-inner",
"is-status",
`el-icon-${
_ctx.currentStatus === "success"
? "check"
: "close"
}`,
]),
},
null,
2
)),
],
2
),
],
2
),
vue.createCommentVNode(" title & description "),
vue.createElementVNode("div", _hoisted_3$c, [
vue.createElementVNode(
"div",
{
class: vue.normalizeClass([
"el-step__title",
`is-${_ctx.currentStatus}`,
]),
},
[
vue.renderSlot(_ctx.$slots, "title", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.title), 1),
]),
],
2
),
_ctx.isSimple
? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$8))
: (vue.openBlock(),
vue.createElementBlock(
"div",
{
key: 1,
class: vue.normalizeClass([
"el-step__description",
`is-${_ctx.currentStatus}`,
]),
},
[
vue.renderSlot(_ctx.$slots, "description", {}, () => [
vue.createTextVNode(
vue.toDisplayString(_ctx.description),
1
),
]),
],
2
)),
]),
],
6
)
);
}
script$l.render = render$h;
script$l.__file = "packages/components/steps/src/item.vue";
const ElSteps = withInstall(script$m, {
Step: script$l,
});
const ElStep = withNoopInstall(script$l);
var script$k = vue.defineComponent({
name: "ElSwitch",
props: {
modelValue: {
type: [Boolean, String, Number],
default: false,
},
value: {
type: [Boolean, String, Number],
default: false,
},
disabled: {
type: Boolean,
default: false,
},
width: {
type: Number,
default: 40,
},
activeIconClass: {
type: String,
default: "",
},
inactiveIconClass: {
type: String,
default: "",
},
activeText: {
type: String,
default: "",
},
inactiveText: {
type: String,
default: "",
},
activeColor: {
type: String,
default: "",
},
inactiveColor: {
type: String,
default: "",
},
borderColor: {
type: String,
default: "",
},
activeValue: {
type: [Boolean, String, Number],
default: true,
},
inactiveValue: {
type: [Boolean, String, Number],
default: false,
},
name: {
type: String,
default: "",
},
validateEvent: {
type: Boolean,
default: true,
},
id: String,
loading: {
type: Boolean,
default: false,
},
beforeChange: Function,
},
emits: ["update:modelValue", "change", "input"],
setup(props, ctx) {
const elForm = vue.inject(elFormKey, {});
const elFormItem = vue.inject(elFormItemKey, {});
const isModelValue = vue.ref(props.modelValue !== false);
const input = vue.ref(null);
const core = vue.ref(null);
const scope = "ElSwitch";
vue.watch(
() => props.modelValue,
() => {
isModelValue.value = true;
}
);
vue.watch(
() => props.value,
() => {
isModelValue.value = false;
}
);
const actualValue = vue.computed(() => {
return isModelValue.value ? props.modelValue : props.value;
});
const checked = vue.computed(() => {
return actualValue.value === props.activeValue;
});
if (
!~[props.activeValue, props.inactiveValue].indexOf(actualValue.value)
) {
ctx.emit("update:modelValue", props.inactiveValue);
ctx.emit("change", props.inactiveValue);
ctx.emit("input", props.inactiveValue);
}
vue.watch(checked, () => {
var _a;
input.value.checked = checked.value;
if (props.activeColor || props.inactiveColor) {
setBackgroundColor();
}
if (props.validateEvent) {
(_a = elFormItem.validate) == null
? void 0
: _a.call(elFormItem, "change");
}
});
const switchDisabled = vue.computed(() => {
return props.disabled || props.loading || (elForm || {}).disabled;
});
const handleChange = () => {
const val = checked.value ? props.inactiveValue : props.activeValue;
ctx.emit("update:modelValue", val);
ctx.emit("change", val);
ctx.emit("input", val);
vue.nextTick(() => {
input.value.checked = checked.value;
});
};
const switchValue = () => {
if (switchDisabled.value) return;
const { beforeChange } = props;
if (!beforeChange) {
handleChange();
return;
}
const shouldChange = beforeChange();
const isExpectType = [
isPromise(shouldChange),
isBool(shouldChange),
].some((i) => i);
if (!isExpectType) {
throwError(
scope,
"beforeChange must return type `Promise<boolean>` or `boolean`"
);
}
if (isPromise(shouldChange)) {
shouldChange
.then((result) => {
if (result) {
handleChange();
}
})
.catch((e) => {});
} else if (shouldChange) {
handleChange();
}
};
const setBackgroundColor = () => {
const newColor = checked.value
? props.activeColor
: props.inactiveColor;
const coreEl = core.value;
if (props.borderColor) coreEl.style.borderColor = props.borderColor;
else if (!props.borderColor) coreEl.style.borderColor = newColor;
coreEl.style.backgroundColor = newColor;
coreEl.children[0].style.color = newColor;
};
const focus = () => {
var _a, _b;
(_b = (_a = input.value) == null ? void 0 : _a.focus) == null
? void 0
: _b.call(_a);
};
vue.onMounted(() => {
if (props.activeColor || props.inactiveColor || props.borderColor) {
setBackgroundColor();
}
input.value.checked = checked.value;
});
return {
input,
core,
switchDisabled,
checked,
handleChange,
switchValue,
focus,
};
},
});
const _hoisted_1$d = ["aria-checked", "aria-disabled"];
const _hoisted_2$b = ["id", "name", "true-value", "false-value", "disabled"];
const _hoisted_3$b = ["aria-hidden"];
const _hoisted_4$7 = { class: "el-switch__action" };
const _hoisted_5$6 = {
key: 0,
class: "el-icon-loading",
};
const _hoisted_6$6 = ["aria-hidden"];
function render$g(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
class: vue.normalizeClass([
"el-switch",
{ "is-disabled": _ctx.switchDisabled, "is-checked": _ctx.checked },
]),
role: "switch",
"aria-checked": _ctx.checked,
"aria-disabled": _ctx.switchDisabled,
onClick:
_cache[2] ||
(_cache[2] = vue.withModifiers(
(...args) => _ctx.switchValue && _ctx.switchValue(...args),
["prevent"]
)),
},
[
vue.createElementVNode(
"input",
{
id: _ctx.id,
ref: "input",
class: "el-switch__input",
type: "checkbox",
name: _ctx.name,
"true-value": _ctx.activeValue,
"false-value": _ctx.inactiveValue,
disabled: _ctx.switchDisabled,
onChange:
_cache[0] ||
(_cache[0] = (...args) =>
_ctx.handleChange && _ctx.handleChange(...args)),
onKeydown:
_cache[1] ||
(_cache[1] = vue.withKeys(
(...args) => _ctx.switchValue && _ctx.switchValue(...args),
["enter"]
)),
},
null,
40,
_hoisted_2$b
),
_ctx.inactiveIconClass || _ctx.inactiveText
? (vue.openBlock(),
vue.createElementBlock(
"span",
{
key: 0,
class: vue.normalizeClass([
"el-switch__label",
"el-switch__label--left",
!_ctx.checked ? "is-active" : "",
]),
},
[
_ctx.inactiveIconClass
? (vue.openBlock(),
vue.createElementBlock(
"i",
{
key: 0,
class: vue.normalizeClass([_ctx.inactiveIconClass]),
},
null,
2
))
: vue.createCommentVNode("v-if", true),
!_ctx.inactiveIconClass && _ctx.inactiveText
? (vue.openBlock(),
vue.createElementBlock(
"span",
{
key: 1,
"aria-hidden": _ctx.checked,
},
vue.toDisplayString(_ctx.inactiveText),
9,
_hoisted_3$b
))
: vue.createCommentVNode("v-if", true),
],
2
))
: vue.createCommentVNode("v-if", true),
vue.createElementVNode(
"span",
{
ref: "core",
class: "el-switch__core",
style: vue.normalizeStyle({ width: (_ctx.width || 40) + "px" }),
},
[
vue.createElementVNode("div", _hoisted_4$7, [
_ctx.loading
? (vue.openBlock(), vue.createElementBlock("i", _hoisted_5$6))
: vue.createCommentVNode("v-if", true),
]),
],
4
),
_ctx.activeIconClass || _ctx.activeText
? (vue.openBlock(),
vue.createElementBlock(
"span",
{
key: 1,
class: vue.normalizeClass([
"el-switch__label",
"el-switch__label--right",
_ctx.checked ? "is-active" : "",
]),
},
[
_ctx.activeIconClass
? (vue.openBlock(),
vue.createElementBlock(
"i",
{
key: 0,
class: vue.normalizeClass([_ctx.activeIconClass]),
},
null,
2
))
: vue.createCommentVNode("v-if", true),
!_ctx.activeIconClass && _ctx.activeText
? (vue.openBlock(),
vue.createElementBlock(
"span",
{
key: 1,
"aria-hidden": !_ctx.checked,
},
vue.toDisplayString(_ctx.activeText),
9,
_hoisted_6$6
))
: vue.createCommentVNode("v-if", true),
],
2
))
: vue.createCommentVNode("v-if", true),
],
10,
_hoisted_1$d
)
);
}
script$k.render = render$g;
script$k.__file = "packages/components/switch/src/index.vue";
script$k.install = (app) => {
app.component(script$k.name, script$k);
};
const _Switch = script$k;
const ElSwitch = _Switch;
var __defProp$c = Object.defineProperty;
var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
var __hasOwnProp$c = Object.prototype.hasOwnProperty;
var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
var __defNormalProp$c = (obj, key, value) =>
key in obj
? __defProp$c(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$c = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$c.call(b, prop)) __defNormalProp$c(a, prop, b[prop]);
if (__getOwnPropSymbols$c)
for (var prop of __getOwnPropSymbols$c(b)) {
if (__propIsEnum$c.call(b, prop)) __defNormalProp$c(a, prop, b[prop]);
}
return a;
};
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
const getCell = function (event) {
let cell = event.target;
while (cell && cell.tagName.toUpperCase() !== "HTML") {
if (cell.tagName.toUpperCase() === "TD") {
return cell;
}
cell = cell.parentNode;
}
return null;
};
const isObject = function (obj) {
return obj !== null && typeof obj === "object";
};
const orderBy = function (array, sortKey, reverse, sortMethod, sortBy) {
if (
!sortKey &&
!sortMethod &&
(!sortBy || (Array.isArray(sortBy) && !sortBy.length))
) {
return array;
}
if (typeof reverse === "string") {
reverse = reverse === "descending" ? -1 : 1;
} else {
reverse = reverse && reverse < 0 ? -1 : 1;
}
const getKey = sortMethod
? null
: function (value, index) {
if (sortBy) {
if (!Array.isArray(sortBy)) {
sortBy = [sortBy];
}
return sortBy.map(function (by) {
if (typeof by === "string") {
return getValueByPath(value, by);
} else {
return by(value, index, array);
}
});
}
if (sortKey !== "$key") {
if (isObject(value) && "$value" in value) value = value.$value;
}
return [isObject(value) ? getValueByPath(value, sortKey) : value];
};
const compare = function (a, b) {
if (sortMethod) {
return sortMethod(a.value, b.value);
}
for (let i = 0, len = a.key.length; i < len; i++) {
if (a.key[i] < b.key[i]) {
return -1;
}
if (a.key[i] > b.key[i]) {
return 1;
}
}
return 0;
};
return array
.map(function (value, index) {
return {
value,
index,
key: getKey ? getKey(value, index) : null,
};
})
.sort(function (a, b) {
let order = compare(a, b);
if (!order) {
order = a.index - b.index;
}
return order * +reverse;
})
.map((item) => item.value);
};
const getColumnById = function (table, columnId) {
let column = null;
table.columns.forEach(function (item) {
if (item.id === columnId) {
column = item;
}
});
return column;
};
const getColumnByKey = function (table, columnKey) {
let column = null;
for (let i = 0; i < table.columns.length; i++) {
const item = table.columns[i];
if (item.columnKey === columnKey) {
column = item;
break;
}
}
return column;
};
const getColumnByCell = function (table, cell) {
const matches = (cell.className || "").match(/el-table_[^\s]+/gm);
if (matches) {
return getColumnById(table, matches[0]);
}
return null;
};
const getRowIdentity = (row, rowKey) => {
if (!row) throw new Error("row is required when get row identity");
if (typeof rowKey === "string") {
if (rowKey.indexOf(".") < 0) {
return `${row[rowKey]}`;
}
const key = rowKey.split(".");
let current = row;
for (let i = 0; i < key.length; i++) {
current = current[key[i]];
}
return `${current}`;
} else if (typeof rowKey === "function") {
return rowKey.call(null, row);
}
};
const getKeysMap = function (array, rowKey) {
const arrayMap = {};
(array || []).forEach((row, index) => {
arrayMap[getRowIdentity(row, rowKey)] = { row, index };
});
return arrayMap;
};
function mergeOptions(defaults, config) {
const options = {};
let key;
for (key in defaults) {
options[key] = defaults[key];
}
for (key in config) {
if (hasOwn(config, key)) {
const value = config[key];
if (typeof value !== "undefined") {
options[key] = value;
}
}
}
return options;
}
function parseWidth(width) {
if (width !== void 0) {
width = parseInt(width, 10);
if (isNaN(width)) {
width = null;
}
}
return +width;
}
function parseMinWidth(minWidth) {
if (typeof minWidth !== "undefined") {
minWidth = parseWidth(minWidth);
if (isNaN(minWidth)) {
minWidth = 80;
}
}
return minWidth;
}
function parseHeight(height) {
if (typeof height === "number") {
return height;
}
if (typeof height === "string") {
if (/^\d+(?:px)?$/.test(height)) {
return parseInt(height, 10);
} else {
return height;
}
}
return null;
}
function compose(...funcs) {
if (funcs.length === 0) {
return (arg) => arg;
}
if (funcs.length === 1) {
return funcs[0];
}
return funcs.reduce(
(a, b) =>
(...args) =>
a(b(...args))
);
}
function toggleRowStatus(statusArr, row, newVal) {
let changed = false;
const index = statusArr.indexOf(row);
const included = index !== -1;
const addRow = () => {
statusArr.push(row);
changed = true;
};
const removeRow = () => {
statusArr.splice(index, 1);
changed = true;
};
if (typeof newVal === "boolean") {
if (newVal && !included) {
addRow();
} else if (!newVal && included) {
removeRow();
}
} else {
if (included) {
removeRow();
} else {
addRow();
}
}
return changed;
}
function walkTreeNode(
root,
cb,
childrenKey = "children",
lazyKey = "hasChildren"
) {
const isNil = (array) => !(Array.isArray(array) && array.length);
function _walker(parent, children, level) {
cb(parent, children, level);
children.forEach((item) => {
if (item[lazyKey]) {
cb(item, null, level + 1);
return;
}
const children2 = item[childrenKey];
if (!isNil(children2)) {
_walker(item, children2, level + 1);
}
});
}
root.forEach((item) => {
if (item[lazyKey]) {
cb(item, null, 0);
return;
}
const children = item[childrenKey];
if (!isNil(children)) {
_walker(item, children, 0);
}
});
}
let removePopper;
function createTablePopper(
trigger,
popperContent,
popperOptions,
tooltipEffect
) {
function renderContent() {
const isLight = tooltipEffect === "light";
const content2 = document.createElement("div");
content2.className = `el-popper ${isLight ? "is-light" : "is-dark"}`;
content2.innerHTML = popperContent;
content2.style.zIndex = String(PopupManager.nextZIndex());
document.body.appendChild(content2);
return content2;
}
function renderArrow() {
const arrow2 = document.createElement("div");
arrow2.className = "el-popper__arrow";
arrow2.style.bottom = "-4px";
return arrow2;
}
function showPopper() {
popperInstance && popperInstance.update();
}
removePopper = function removePopper2() {
try {
popperInstance && popperInstance.destroy();
content && document.body.removeChild(content);
off(trigger, "mouseenter", showPopper);
off(trigger, "mouseleave", removePopper2);
} catch (e) {}
};
let popperInstance = null;
const content = renderContent();
const arrow = renderArrow();
content.appendChild(arrow);
popperInstance = createPopper(
trigger,
content,
__spreadValues$c(
{
modifiers: [
{
name: "offset",
options: {
offset: [0, 8],
},
},
{
name: "arrow",
options: {
element: arrow,
padding: 10,
},
},
],
},
popperOptions
)
);
on(trigger, "mouseenter", showPopper);
on(trigger, "mouseleave", removePopper);
return popperInstance;
}
function useExpand(watcherData) {
const instance = vue.getCurrentInstance();
const defaultExpandAll = vue.ref(false);
const expandRows = vue.ref([]);
const updateExpandRows = () => {
const data = watcherData.data.value || [];
const rowKey = watcherData.rowKey.value;
if (defaultExpandAll.value) {
expandRows.value = data.slice();
} else if (rowKey) {
const expandRowsMap = getKeysMap(expandRows.value, rowKey);
expandRows.value = data.reduce((prev, row) => {
const rowId = getRowIdentity(row, rowKey);
const rowInfo = expandRowsMap[rowId];
if (rowInfo) {
prev.push(row);
}
return prev;
}, []);
} else {
expandRows.value = [];
}
};
const toggleRowExpansion = (row, expanded) => {
const changed = toggleRowStatus(expandRows.value, row, expanded);
if (changed) {
instance.emit("expand-change", row, expandRows.value.slice());
instance.store.scheduleLayout();
}
};
const setExpandRowKeys = (rowKeys) => {
instance.store.assertRowKey();
const data = watcherData.data.value || [];
const rowKey = watcherData.rowKey.value;
const keysMap = getKeysMap(data, rowKey);
expandRows.value = rowKeys.reduce((prev, cur) => {
const info = keysMap[cur];
if (info) {
prev.push(info.row);
}
return prev;
}, []);
};
const isRowExpanded = (row) => {
const rowKey = watcherData.rowKey.value;
if (rowKey) {
const expandMap = getKeysMap(expandRows.value, rowKey);
return !!expandMap[getRowIdentity(row, rowKey)];
}
return expandRows.value.indexOf(row) !== -1;
};
return {
updateExpandRows,
toggleRowExpansion,
setExpandRowKeys,
isRowExpanded,
states: {
expandRows,
defaultExpandAll,
},
};
}
function useCurrent(watcherData) {
const instance = vue.getCurrentInstance();
const _currentRowKey = vue.ref(null);
const currentRow = vue.ref(null);
const setCurrentRowKey = (key) => {
instance.store.assertRowKey();
_currentRowKey.value = key;
setCurrentRowByKey(key);
};
const restoreCurrentRowKey = () => {
_currentRowKey.value = null;
};
const setCurrentRowByKey = (key) => {
const { data, rowKey } = watcherData;
let _currentRow = null;
if (rowKey.value) {
_currentRow = (vue.unref(data) || []).find(
(item) => getRowIdentity(item, rowKey.value) === key
);
}
currentRow.value = _currentRow;
};
const updateCurrentRow = (_currentRow) => {
const oldCurrentRow = currentRow.value;
if (_currentRow && _currentRow !== oldCurrentRow) {
currentRow.value = _currentRow;
instance.emit("current-change", currentRow.value, oldCurrentRow);
return;
}
if (!_currentRow && oldCurrentRow) {
currentRow.value = null;
instance.emit("current-change", null, oldCurrentRow);
}
};
const updateCurrentRowData = () => {
const rowKey = watcherData.rowKey.value;
const data = watcherData.data.value || [];
const oldCurrentRow = currentRow.value;
if (data.indexOf(oldCurrentRow) === -1 && oldCurrentRow) {
if (rowKey) {
const currentRowKey = getRowIdentity(oldCurrentRow, rowKey);
setCurrentRowByKey(currentRowKey);
} else {
currentRow.value = null;
}
if (currentRow.value === null) {
instance.emit("current-change", null, oldCurrentRow);
}
} else if (_currentRowKey.value) {
setCurrentRowByKey(_currentRowKey.value);
restoreCurrentRowKey();
}
};
return {
setCurrentRowKey,
restoreCurrentRowKey,
setCurrentRowByKey,
updateCurrentRow,
updateCurrentRowData,
states: {
_currentRowKey,
currentRow,
},
};
}
var __defProp$b = Object.defineProperty;
var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
var __hasOwnProp$b = Object.prototype.hasOwnProperty;
var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
var __defNormalProp$b = (obj, key, value) =>
key in obj
? __defProp$b(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$b = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$b.call(b, prop)) __defNormalProp$b(a, prop, b[prop]);
if (__getOwnPropSymbols$b)
for (var prop of __getOwnPropSymbols$b(b)) {
if (__propIsEnum$b.call(b, prop)) __defNormalProp$b(a, prop, b[prop]);
}
return a;
};
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
function useTree(watcherData) {
const expandRowKeys = vue.ref([]);
const treeData = vue.ref({});
const indent = vue.ref(16);
const lazy = vue.ref(false);
const lazyTreeNodeMap = vue.ref({});
const lazyColumnIdentifier = vue.ref("hasChildren");
const childrenColumnName = vue.ref("children");
const instance = vue.getCurrentInstance();
const normalizedData = vue.computed(() => {
if (!watcherData.rowKey.value) return {};
const data = watcherData.data.value || [];
return normalize(data);
});
const normalizedLazyNode = vue.computed(() => {
const rowKey = watcherData.rowKey.value;
const keys = Object.keys(lazyTreeNodeMap.value);
const res = {};
if (!keys.length) return res;
keys.forEach((key) => {
if (lazyTreeNodeMap.value[key].length) {
const item = { children: [] };
lazyTreeNodeMap.value[key].forEach((row) => {
const currentRowKey = getRowIdentity(row, rowKey);
item.children.push(currentRowKey);
if (row[lazyColumnIdentifier.value] && !res[currentRowKey]) {
res[currentRowKey] = { children: [] };
}
});
res[key] = item;
}
});
return res;
});
const normalize = (data) => {
const rowKey = watcherData.rowKey.value;
const res = {};
walkTreeNode(
data,
(parent, children, level) => {
const parentId = getRowIdentity(parent, rowKey);
if (Array.isArray(children)) {
res[parentId] = {
children: children.map((row) => getRowIdentity(row, rowKey)),
level,
};
} else if (lazy.value) {
res[parentId] = {
children: [],
lazy: true,
level,
};
}
},
childrenColumnName.value,
lazyColumnIdentifier.value
);
return res;
};
const updateTreeData = (
ifExpandAll = ((_a) =>
(_a = instance.store) == null
? void 0
: _a.states.defaultExpandAll.value)()
) => {
var _a2;
const nested = normalizedData.value;
const normalizedLazyNode_ = normalizedLazyNode.value;
const keys = Object.keys(nested);
const newTreeData = {};
if (keys.length) {
const oldTreeData = vue.unref(treeData);
const rootLazyRowKeys = [];
const getExpanded = (oldValue, key) => {
const included =
ifExpandAll ||
(expandRowKeys.value && expandRowKeys.value.indexOf(key) !== -1);
return !!((oldValue && oldValue.expanded) || included);
};
keys.forEach((key) => {
const oldValue = oldTreeData[key];
const newValue = __spreadValues$b({}, nested[key]);
newValue.expanded = getExpanded(oldValue, key);
if (newValue.lazy) {
const { loaded = false, loading = false } = oldValue || {};
newValue.loaded = !!loaded;
newValue.loading = !!loading;
rootLazyRowKeys.push(key);
}
newTreeData[key] = newValue;
});
const lazyKeys = Object.keys(normalizedLazyNode_);
if (lazy.value && lazyKeys.length && rootLazyRowKeys.length) {
lazyKeys.forEach((key) => {
const oldValue = oldTreeData[key];
const lazyNodeChildren = normalizedLazyNode_[key].children;
if (rootLazyRowKeys.indexOf(key) !== -1) {
if (newTreeData[key].children.length !== 0) {
throw new Error("[ElTable]children must be an empty array.");
}
newTreeData[key].children = lazyNodeChildren;
} else {
const { loaded = false, loading = false } = oldValue || {};
newTreeData[key] = {
lazy: true,
loaded: !!loaded,
loading: !!loading,
expanded: getExpanded(oldValue, key),
children: lazyNodeChildren,
level: "",
};
}
});
}
}
treeData.value = newTreeData;
(_a2 = instance.store) == null ? void 0 : _a2.updateTableScrollY();
};
vue.watch(
() => normalizedData.value,
() => {
updateTreeData();
}
);
vue.watch(
() => normalizedLazyNode.value,
() => {
updateTreeData();
}
);
const updateTreeExpandKeys = (value) => {
expandRowKeys.value = value;
updateTreeData();
};
const toggleTreeExpansion = (row, expanded) => {
instance.store.assertRowKey();
const rowKey = watcherData.rowKey.value;
const id = getRowIdentity(row, rowKey);
const data = id && treeData.value[id];
if (id && data && "expanded" in data) {
const oldExpanded = data.expanded;
expanded = typeof expanded === "undefined" ? !data.expanded : expanded;
treeData.value[id].expanded = expanded;
if (oldExpanded !== expanded) {
instance.emit("expand-change", row, expanded);
}
instance.store.updateTableScrollY();
}
};
const loadOrToggle = (row) => {
instance.store.assertRowKey();
const rowKey = watcherData.rowKey.value;
const id = getRowIdentity(row, rowKey);
const data = treeData.value[id];
if (lazy.value && data && "loaded" in data && !data.loaded) {
loadData(row, id, data);
} else {
toggleTreeExpansion(row, void 0);
}
};
const loadData = (row, key, treeNode) => {
const { load } = instance.props;
if (load && !treeData.value[key].loaded) {
treeData.value[key].loading = true;
load(row, treeNode, (data) => {
if (!Array.isArray(data)) {
throw new Error("[ElTable] data must be an array");
}
treeData.value[key].loading = false;
treeData.value[key].loaded = true;
treeData.value[key].expanded = true;
if (data.length) {
lazyTreeNodeMap.value[key] = data;
}
instance.emit("expand-change", row, true);
});
}
};
return {
loadData,
loadOrToggle,
toggleTreeExpansion,
updateTreeExpandKeys,
updateTreeData,
normalize,
states: {
expandRowKeys,
treeData,
indent,
lazy,
lazyTreeNodeMap,
lazyColumnIdentifier,
childrenColumnName,
},
};
}
var __defProp$a = Object.defineProperty;
var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
var __hasOwnProp$a = Object.prototype.hasOwnProperty;
var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
var __defNormalProp$a = (obj, key, value) =>
key in obj
? __defProp$a(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$a = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$a.call(b, prop)) __defNormalProp$a(a, prop, b[prop]);
if (__getOwnPropSymbols$a)
for (var prop of __getOwnPropSymbols$a(b)) {
if (__propIsEnum$a.call(b, prop)) __defNormalProp$a(a, prop, b[prop]);
}
return a;
};
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
const sortData = (data, states) => {
const sortingColumn = states.sortingColumn;
if (!sortingColumn || typeof sortingColumn.sortable === "string") {
return data;
}
return orderBy(
data,
states.sortProp,
states.sortOrder,
sortingColumn.sortMethod,
sortingColumn.sortBy
);
};
const doFlattenColumns = (columns) => {
const result = [];
columns.forEach((column) => {
if (column.children) {
result.push.apply(result, doFlattenColumns(column.children));
} else {
result.push(column);
}
});
return result;
};
function useWatcher$1() {
const instance = vue.getCurrentInstance();
const rowKey = vue.ref(null);
const data = vue.ref([]);
const _data = vue.ref([]);
const isComplex = vue.ref(false);
const _columns = vue.ref([]);
const originColumns = vue.ref([]);
const columns = vue.ref([]);
const fixedColumns = vue.ref([]);
const rightFixedColumns = vue.ref([]);
const leafColumns = vue.ref([]);
const fixedLeafColumns = vue.ref([]);
const rightFixedLeafColumns = vue.ref([]);
const leafColumnsLength = vue.ref(0);
const fixedLeafColumnsLength = vue.ref(0);
const rightFixedLeafColumnsLength = vue.ref(0);
const isAllSelected = vue.ref(false);
const selection = vue.ref([]);
const reserveSelection = vue.ref(false);
const selectOnIndeterminate = vue.ref(false);
const selectable = vue.ref(null);
const filters = vue.ref({});
const filteredData = vue.ref(null);
const sortingColumn = vue.ref(null);
const sortProp = vue.ref(null);
const sortOrder = vue.ref(null);
const hoverRow = vue.ref(null);
vue.watch(data, () => instance.state && scheduleLayout(false), {
deep: true,
});
const assertRowKey = () => {
if (!rowKey.value) throw new Error("[ElTable] prop row-key is required");
};
const updateColumns = () => {
fixedColumns.value = _columns.value.filter(
(column) => column.fixed === true || column.fixed === "left"
);
rightFixedColumns.value = _columns.value.filter(
(column) => column.fixed === "right"
);
if (
fixedColumns.value.length > 0 &&
_columns.value[0] &&
_columns.value[0].type === "selection" &&
!_columns.value[0].fixed
) {
_columns.value[0].fixed = true;
fixedColumns.value.unshift(_columns.value[0]);
}
const notFixedColumns = _columns.value.filter((column) => !column.fixed);
originColumns.value = []
.concat(fixedColumns.value)
.concat(notFixedColumns)
.concat(rightFixedColumns.value);
const leafColumns2 = doFlattenColumns(notFixedColumns);
const fixedLeafColumns2 = doFlattenColumns(fixedColumns.value);
const rightFixedLeafColumns2 = doFlattenColumns(rightFixedColumns.value);
leafColumnsLength.value = leafColumns2.length;
fixedLeafColumnsLength.value = fixedLeafColumns2.length;
rightFixedLeafColumnsLength.value = rightFixedLeafColumns2.length;
columns.value = []
.concat(fixedLeafColumns2)
.concat(leafColumns2)
.concat(rightFixedLeafColumns2);
isComplex.value =
fixedColumns.value.length > 0 || rightFixedColumns.value.length > 0;
};
const scheduleLayout = (needUpdateColumns, immediate = false) => {
if (needUpdateColumns) {
updateColumns();
}
if (immediate) {
instance.state.doLayout();
} else {
instance.state.debouncedUpdateLayout();
}
};
const isSelected = (row) => {
return selection.value.indexOf(row) > -1;
};
const clearSelection = () => {
isAllSelected.value = false;
const oldSelection = selection.value;
if (oldSelection.length) {
selection.value = [];
instance.emit("selection-change", []);
}
};
const cleanSelection = () => {
let deleted;
if (rowKey.value) {
deleted = [];
const selectedMap = getKeysMap(selection.value, rowKey.value);
const dataMap = getKeysMap(data.value, rowKey.value);
for (const key in selectedMap) {
if (hasOwn(selectedMap, key) && !dataMap[key]) {
deleted.push(selectedMap[key].row);
}
}
} else {
deleted = selection.value.filter(
(item) => data.value.indexOf(item) === -1
);
}
if (deleted.length) {
const newSelection = selection.value.filter(
(item) => deleted.indexOf(item) === -1
);
selection.value = newSelection;
instance.emit("selection-change", newSelection.slice());
}
};
const toggleRowSelection = (row, selected = void 0, emitChange = true) => {
const changed = toggleRowStatus(selection.value, row, selected);
if (changed) {
const newSelection = (selection.value || []).slice();
if (emitChange) {
instance.emit("select", newSelection, row);
}
instance.emit("selection-change", newSelection);
}
};
const _toggleAllSelection = () => {
var _a, _b;
const value = selectOnIndeterminate.value
? !isAllSelected.value
: !(isAllSelected.value || selection.value.length);
isAllSelected.value = value;
let selectionChanged = false;
let childrenCount = 0;
const rowKey2 =
(_b =
(_a = instance == null ? void 0 : instance.store) == null
? void 0
: _a.states) == null
? void 0
: _b.rowKey.value;
data.value.forEach((row, index) => {
const rowIndex = index + childrenCount;
if (selectable.value) {
if (
selectable.value.call(null, row, rowIndex) &&
toggleRowStatus(selection.value, row, value)
) {
selectionChanged = true;
}
} else {
if (toggleRowStatus(selection.value, row, value)) {
selectionChanged = true;
}
}
childrenCount += getChildrenCount(getRowIdentity(row, rowKey2));
});
if (selectionChanged) {
instance.emit(
"selection-change",
selection.value ? selection.value.slice() : []
);
}
instance.emit("select-all", selection.value);
};
const updateSelectionByRowKey = () => {
const selectedMap = getKeysMap(selection.value, rowKey.value);
data.value.forEach((row) => {
const rowId = getRowIdentity(row, rowKey.value);
const rowInfo = selectedMap[rowId];
if (rowInfo) {
selection.value[rowInfo.index] = row;
}
});
};
const updateAllSelected = () => {
var _a, _b, _c;
if (((_a = data.value) == null ? void 0 : _a.length) === 0) {
isAllSelected.value = false;
return;
}
let selectedMap;
if (rowKey.value) {
selectedMap = getKeysMap(selection.value, rowKey.value);
}
const isSelected2 = function (row) {
if (selectedMap) {
return !!selectedMap[getRowIdentity(row, rowKey.value)];
} else {
return selection.value.indexOf(row) !== -1;
}
};
let isAllSelected_ = true;
let selectedCount = 0;
let childrenCount = 0;
for (let i = 0, j = (data.value || []).length; i < j; i++) {
const keyProp =
(_c =
(_b = instance == null ? void 0 : instance.store) == null
? void 0
: _b.states) == null
? void 0
: _c.rowKey.value;
const rowIndex = i + childrenCount;
const item = data.value[i];
const isRowSelectable =
selectable.value && selectable.value.call(null, item, rowIndex);
if (!isSelected2(item)) {
if (!selectable.value || isRowSelectable) {
isAllSelected_ = false;
break;
}
} else {
selectedCount++;
}
childrenCount += getChildrenCount(getRowIdentity(item, keyProp));
}
if (selectedCount === 0) isAllSelected_ = false;
isAllSelected.value = isAllSelected_;
};
const getChildrenCount = (rowKey2) => {
var _a;
if (!instance || !instance.store) return 0;
const { treeData } = instance.store.states;
let count = 0;
const children =
(_a = treeData.value[rowKey2]) == null ? void 0 : _a.children;
if (children) {
count += children.length;
children.forEach((childKey) => {
count += getChildrenCount(childKey);
});
}
return count;
};
const updateFilters = (columns2, values) => {
if (!Array.isArray(columns2)) {
columns2 = [columns2];
}
const filters_ = {};
columns2.forEach((col) => {
filters.value[col.id] = values;
filters_[col.columnKey || col.id] = values;
});
return filters_;
};
const updateSort = (column, prop, order) => {
if (sortingColumn.value && sortingColumn.value !== column) {
sortingColumn.value.order = null;
}
sortingColumn.value = column;
sortProp.value = prop;
sortOrder.value = order;
};
const execFilter = () => {
let sourceData = vue.unref(_data);
Object.keys(filters.value).forEach((columnId) => {
const values = filters.value[columnId];
if (!values || values.length === 0) return;
const column = getColumnById(
{
columns: columns.value,
},
columnId
);
if (column && column.filterMethod) {
sourceData = sourceData.filter((row) => {
return values.some((value) =>
column.filterMethod.call(null, value, row, column)
);
});
}
});
filteredData.value = sourceData;
};
const execSort = () => {
data.value = sortData(filteredData.value, {
sortingColumn: sortingColumn.value,
sortProp: sortProp.value,
sortOrder: sortOrder.value,
});
};
const execQuery = (ignore = void 0) => {
if (!(ignore && ignore.filter)) {
execFilter();
}
execSort();
};
const clearFilter = (columnKeys) => {
const { tableHeader, fixedTableHeader, rightFixedTableHeader } =
instance.refs;
let panels = {};
if (tableHeader) panels = Object.assign(panels, tableHeader.filterPanels);
if (fixedTableHeader)
panels = Object.assign(panels, fixedTableHeader.filterPanels);
if (rightFixedTableHeader)
panels = Object.assign(panels, rightFixedTableHeader.filterPanels);
const keys = Object.keys(panels);
if (!keys.length) return;
if (typeof columnKeys === "string") {
columnKeys = [columnKeys];
}
if (Array.isArray(columnKeys)) {
const columns_ = columnKeys.map((key) =>
getColumnByKey(
{
columns: columns.value,
},
key
)
);
keys.forEach((key) => {
const column = columns_.find((col) => col.id === key);
if (column) {
column.filteredValue = [];
}
});
instance.store.commit("filterChange", {
column: columns_,
values: [],
silent: true,
multi: true,
});
} else {
keys.forEach((key) => {
const column = columns.value.find((col) => col.id === key);
if (column) {
column.filteredValue = [];
}
});
filters.value = {};
instance.store.commit("filterChange", {
column: {},
values: [],
silent: true,
});
}
};
const clearSort = () => {
if (!sortingColumn.value) return;
updateSort(null, null, null);
instance.store.commit("changeSortCondition", {
silent: true,
});
};
const {
setExpandRowKeys,
toggleRowExpansion,
updateExpandRows,
states: expandStates,
isRowExpanded,
} = useExpand({
data,
rowKey,
});
const {
updateTreeExpandKeys,
toggleTreeExpansion,
updateTreeData,
loadOrToggle,
states: treeStates,
} = useTree({
data,
rowKey,
});
const {
updateCurrentRowData,
updateCurrentRow,
setCurrentRowKey,
states: currentData,
} = useCurrent({
data,
rowKey,
});
const setExpandRowKeysAdapter = (val) => {
setExpandRowKeys(val);
updateTreeExpandKeys(val);
};
const toggleRowExpansionAdapter = (row, expanded) => {
const hasExpandColumn = columns.value.some(
({ type }) => type === "expand"
);
if (hasExpandColumn) {
toggleRowExpansion(row, expanded);
} else {
toggleTreeExpansion(row, expanded);
}
};
return {
assertRowKey,
updateColumns,
scheduleLayout,
isSelected,
clearSelection,
cleanSelection,
toggleRowSelection,
_toggleAllSelection,
toggleAllSelection: null,
updateSelectionByRowKey,
updateAllSelected,
updateFilters,
updateCurrentRow,
updateSort,
execFilter,
execSort,
execQuery,
clearFilter,
clearSort,
toggleRowExpansion,
setExpandRowKeysAdapter,
setCurrentRowKey,
toggleRowExpansionAdapter,
isRowExpanded,
updateExpandRows,
updateCurrentRowData,
loadOrToggle,
updateTreeData,
states: __spreadValues$a(
__spreadValues$a(
__spreadValues$a(
{
rowKey,
data,
_data,
isComplex,
_columns,
originColumns,
columns,
fixedColumns,
rightFixedColumns,
leafColumns,
fixedLeafColumns,
rightFixedLeafColumns,
leafColumnsLength,
fixedLeafColumnsLength,
rightFixedLeafColumnsLength,
isAllSelected,
selection,
reserveSelection,
selectOnIndeterminate,
selectable,
filters,
filteredData,
sortingColumn,
sortProp,
sortOrder,
hoverRow,
},
expandStates
),
treeStates
),
currentData
),
};
}
var __defProp$9 = Object.defineProperty;
var __defProps$8 = Object.defineProperties;
var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
var __defNormalProp$9 = (obj, key, value) =>
key in obj
? __defProp$9(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$9 = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$9.call(b, prop)) __defNormalProp$9(a, prop, b[prop]);
if (__getOwnPropSymbols$9)
for (var prop of __getOwnPropSymbols$9(b)) {
if (__propIsEnum$9.call(b, prop)) __defNormalProp$9(a, prop, b[prop]);
}
return a;
};
var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
function replaceColumn(array, column) {
return array.map((item) => {
var _a;
if (item.id === column.id) {
return column;
} else if ((_a = item.children) == null ? void 0 : _a.length) {
item.children = replaceColumn(item.children, column);
}
return item;
});
}
function sortColumn(array) {
array.forEach((item) => {
var _a, _b;
item.no = (_a = item.getColumnIndex) == null ? void 0 : _a.call(item);
if ((_b = item.children) == null ? void 0 : _b.length) {
sortColumn(item.children);
}
});
array.sort((cur, pre) => cur.no - pre.no);
}
function useStore() {
const instance = vue.getCurrentInstance();
const watcher = useWatcher$1();
const mutations = {
setData(states, data) {
const dataInstanceChanged = vue.unref(states.data) !== data;
states.data.value = data;
states._data.value = data;
instance.store.execQuery();
instance.store.updateCurrentRowData();
instance.store.updateExpandRows();
instance.store.updateTreeData(
instance.store.states.defaultExpandAll.value
);
if (vue.unref(states.reserveSelection)) {
instance.store.assertRowKey();
instance.store.updateSelectionByRowKey();
} else {
if (dataInstanceChanged) {
instance.store.clearSelection();
} else {
instance.store.cleanSelection();
}
}
instance.store.updateAllSelected();
if (instance.$ready) {
instance.store.scheduleLayout();
}
},
insertColumn(states, column, parent) {
const array = vue.unref(states._columns);
let newColumns = [];
if (!parent) {
array.push(column);
newColumns = array;
} else {
if (parent && !parent.children) {
parent.children = [];
}
parent.children.push(column);
newColumns = replaceColumn(array, parent);
}
sortColumn(newColumns);
states._columns.value = newColumns;
if (column.type === "selection") {
states.selectable.value = column.selectable;
states.reserveSelection.value = column.reserveSelection;
}
if (instance.$ready) {
instance.store.updateColumns();
instance.store.scheduleLayout();
}
},
removeColumn(states, column, parent) {
const array = vue.unref(states._columns) || [];
if (parent) {
parent.children.splice(
parent.children.findIndex((item) => item.id === column.id),
1
);
if (parent.children.length === 0) {
delete parent.children;
}
states._columns.value = replaceColumn(array, parent);
} else {
const index = array.indexOf(column);
if (index > -1) {
array.splice(index, 1);
states._columns.value = array;
}
}
if (instance.$ready) {
instance.store.updateColumns();
instance.store.scheduleLayout();
}
},
sort(states, options) {
const { prop, order, init } = options;
if (prop) {
const column = vue
.unref(states.columns)
.find((column2) => column2.property === prop);
if (column) {
column.order = order;
instance.store.updateSort(column, prop, order);
instance.store.commit("changeSortCondition", { init });
}
}
},
changeSortCondition(states, options) {
const {
sortingColumn: column,
sortProp: prop,
sortOrder: order,
} = states;
if (vue.unref(order) === null) {
states.sortingColumn.value = null;
states.sortProp.value = null;
}
const ingore = { filter: true };
instance.store.execQuery(ingore);
if (!options || !(options.silent || options.init)) {
instance.emit("sort-change", {
column: vue.unref(column),
prop: vue.unref(prop),
order: vue.unref(order),
});
}
instance.store.updateTableScrollY();
},
filterChange(_states, options) {
const { column, values, silent } = options;
const newFilters = instance.store.updateFilters(column, values);
instance.store.execQuery();
if (!silent) {
instance.emit("filter-change", newFilters);
}
instance.store.updateTableScrollY();
},
toggleAllSelection() {
instance.store.toggleAllSelection();
},
rowSelectedChanged(_states, row) {
instance.store.toggleRowSelection(row);
instance.store.updateAllSelected();
},
setHoverRow(states, row) {
states.hoverRow.value = row;
},
setCurrentRow(_states, row) {
instance.store.updateCurrentRow(row);
},
};
const commit = function (name, ...args) {
const mutations2 = instance.store.mutations;
if (mutations2[name]) {
mutations2[name].apply(instance, [instance.store.states].concat(args));
} else {
throw new Error(`Action not found: ${name}`);
}
};
const updateTableScrollY = function () {
vue.nextTick(() => instance.layout.updateScrollY.apply(instance.layout));
};
return __spreadProps$8(__spreadValues$9({}, watcher), {
mutations,
commit,
updateTableScrollY,
});
}
const InitialStateMap = {
rowKey: "rowKey",
defaultExpandAll: "defaultExpandAll",
selectOnIndeterminate: "selectOnIndeterminate",
indent: "indent",
lazy: "lazy",
data: "data",
["treeProps.hasChildren"]: {
key: "lazyColumnIdentifier",
default: "hasChildren",
},
["treeProps.children"]: {
key: "childrenColumnName",
default: "children",
},
};
function createStore(table, props) {
if (!table) {
throw new Error("Table is required.");
}
const store = useStore();
store.toggleAllSelection = debounce_1(store._toggleAllSelection, 10);
Object.keys(InitialStateMap).forEach((key) => {
handleValue(getArrKeysValue(props, key), key, store);
});
proxyTableProps(store, props);
return store;
}
function proxyTableProps(store, props) {
Object.keys(InitialStateMap).forEach((key) => {
vue.watch(
() => getArrKeysValue(props, key),
(value) => {
handleValue(value, key, store);
}
);
});
}
function handleValue(value, propsKey, store) {
let newVal = value;
let storeKey = InitialStateMap[propsKey];
if (typeof InitialStateMap[propsKey] === "object") {
storeKey = storeKey.key;
newVal = newVal || InitialStateMap[propsKey].default;
}
store.states[storeKey].value = newVal;
}
function getArrKeysValue(props, keys) {
if (keys.includes(".")) {
const keyList = keys.split(".");
let value = props;
keyList.forEach((key) => {
value = value[key];
});
return value;
} else {
return props[keys];
}
}
class TableLayout {
constructor(options) {
this.observers = [];
this.table = null;
this.store = null;
this.columns = [];
this.fit = true;
this.showHeader = true;
this.height = vue.ref(null);
this.scrollX = vue.ref(false);
this.scrollY = vue.ref(false);
this.bodyWidth = vue.ref(null);
this.fixedWidth = vue.ref(null);
this.rightFixedWidth = vue.ref(null);
this.tableHeight = vue.ref(null);
this.headerHeight = vue.ref(44);
this.appendHeight = vue.ref(0);
this.footerHeight = vue.ref(44);
this.viewportHeight = vue.ref(null);
this.bodyHeight = vue.ref(null);
this.fixedBodyHeight = vue.ref(null);
this.gutterWidth = scrollbarWidth();
for (const name in options) {
if (hasOwn(options, name)) {
if (vue.isRef(this[name])) {
this[name].value = options[name];
} else {
this[name] = options[name];
}
}
}
if (!this.table) {
throw new Error("table is required for Table Layout");
}
if (!this.store) {
throw new Error("store is required for Table Layout");
}
}
updateScrollY() {
const height = this.height.value;
if (height === null) return false;
const bodyWrapper = this.table.refs.bodyWrapper;
if (this.table.vnode.el && bodyWrapper) {
let scrollY = true;
const prevScrollY = this.scrollY.value;
if (this.bodyHeight.value === null) {
scrollY = false;
} else {
const body = bodyWrapper.querySelector(".el-table__body");
scrollY = body.offsetHeight > this.bodyHeight.value;
}
this.scrollY.value = scrollY;
return prevScrollY !== scrollY;
}
return false;
}
setHeight(value, prop = "height") {
if (isServer) return;
const el = this.table.vnode.el;
value = parseHeight(value);
this.height.value = Number(value);
if (!el && (value || value === 0))
return vue.nextTick(() => this.setHeight(value, prop));
if (typeof value === "number") {
el.style[prop] = `${value}px`;
this.updateElsHeight();
} else if (typeof value === "string") {
el.style[prop] = value;
this.updateElsHeight();
}
}
setMaxHeight(value) {
this.setHeight(value, "max-height");
}
getFlattenColumns() {
const flattenColumns = [];
const columns = this.table.store.states.columns.value;
columns.forEach((column) => {
if (column.isColumnGroup) {
flattenColumns.push.apply(flattenColumns, column.columns);
} else {
flattenColumns.push(column);
}
});
return flattenColumns;
}
updateElsHeight() {
if (!this.table.$ready) return vue.nextTick(() => this.updateElsHeight());
const { headerWrapper, appendWrapper, footerWrapper } = this.table.refs;
this.appendHeight.value = appendWrapper ? appendWrapper.offsetHeight : 0;
if (this.showHeader && !headerWrapper) return;
const headerTrElm = headerWrapper
? headerWrapper.querySelector(".el-table__header tr")
: null;
const noneHeader = this.headerDisplayNone(headerTrElm);
const headerHeight = (this.headerHeight.value = !this.showHeader
? 0
: headerWrapper.offsetHeight);
if (
this.showHeader &&
!noneHeader &&
headerWrapper.offsetWidth > 0 &&
(this.table.store.states.columns.value || []).length > 0 &&
headerHeight < 2
) {
return vue.nextTick(() => this.updateElsHeight());
}
const tableHeight = (this.tableHeight.value =
this.table.vnode.el.clientHeight);
const footerHeight = (this.footerHeight.value = footerWrapper
? footerWrapper.offsetHeight
: 0);
if (this.height.value !== null) {
this.bodyHeight.value =
tableHeight - headerHeight - footerHeight + (footerWrapper ? 1 : 0);
}
this.fixedBodyHeight.value = this.scrollX.value
? this.bodyHeight.value - this.gutterWidth
: this.bodyHeight.value;
this.viewportHeight.value = this.scrollX.value
? tableHeight - this.gutterWidth
: tableHeight;
this.updateScrollY();
this.notifyObservers("scrollable");
}
headerDisplayNone(elm) {
if (!elm) return true;
let headerChild = elm;
while (headerChild.tagName !== "DIV") {
if (getComputedStyle(headerChild).display === "none") {
return true;
}
headerChild = headerChild.parentElement;
}
return false;
}
updateColumnsWidth() {
if (isServer) return;
const fit = this.fit;
const bodyWidth = this.table.vnode.el.clientWidth;
let bodyMinWidth = 0;
const flattenColumns = this.getFlattenColumns();
const flexColumns = flattenColumns.filter(
(column) => typeof column.width !== "number"
);
flattenColumns.forEach((column) => {
if (typeof column.width === "number" && column.realWidth)
column.realWidth = null;
});
if (flexColumns.length > 0 && fit) {
flattenColumns.forEach((column) => {
bodyMinWidth += Number(column.width || column.minWidth || 80);
});
const scrollYWidth = this.scrollY.value ? this.gutterWidth : 0;
if (bodyMinWidth <= bodyWidth - scrollYWidth) {
this.scrollX.value = false;
const totalFlexWidth = bodyWidth - scrollYWidth - bodyMinWidth;
if (flexColumns.length === 1) {
flexColumns[0].realWidth =
Number(flexColumns[0].minWidth || 80) + totalFlexWidth;
} else {
const allColumnsWidth = flexColumns.reduce(
(prev, column) => prev + Number(column.minWidth || 80),
0
);
const flexWidthPerPixel = totalFlexWidth / allColumnsWidth;
let noneFirstWidth = 0;
flexColumns.forEach((column, index) => {
if (index === 0) return;
const flexWidth = Math.floor(
Number(column.minWidth || 80) * flexWidthPerPixel
);
noneFirstWidth += flexWidth;
column.realWidth = Number(column.minWidth || 80) + flexWidth;
});
flexColumns[0].realWidth =
Number(flexColumns[0].minWidth || 80) +
totalFlexWidth -
noneFirstWidth;
}
} else {
this.scrollX.value = true;
flexColumns.forEach(function (column) {
column.realWidth = Number(column.minWidth);
});
}
this.bodyWidth.value = Math.max(bodyMinWidth, bodyWidth);
this.table.state.resizeState.value.width = this.bodyWidth.value;
} else {
flattenColumns.forEach((column) => {
if (!column.width && !column.minWidth) {
column.realWidth = 80;
} else {
column.realWidth = Number(column.width || column.minWidth);
}
bodyMinWidth += column.realWidth;
});
this.scrollX.value = bodyMinWidth > bodyWidth;
this.bodyWidth.value = bodyMinWidth;
}
const fixedColumns = this.store.states.fixedColumns.value;
if (fixedColumns.length > 0) {
let fixedWidth = 0;
fixedColumns.forEach(function (column) {
fixedWidth += Number(column.realWidth || column.width);
});
this.fixedWidth.value = fixedWidth;
}
const rightFixedColumns = this.store.states.rightFixedColumns.value;
if (rightFixedColumns.length > 0) {
let rightFixedWidth = 0;
rightFixedColumns.forEach(function (column) {
rightFixedWidth += Number(column.realWidth || column.width);
});
this.rightFixedWidth.value = rightFixedWidth;
}
this.notifyObservers("columns");
}
addObserver(observer) {
this.observers.push(observer);
}
removeObserver(observer) {
const index = this.observers.indexOf(observer);
if (index !== -1) {
this.observers.splice(index, 1);
}
}
notifyObservers(event) {
const observers = this.observers;
observers.forEach((observer) => {
var _a, _b;
switch (event) {
case "columns":
(_a = observer.state) == null ? void 0 : _a.onColumnsChange(this);
break;
case "scrollable":
(_b = observer.state) == null
? void 0
: _b.onScrollableChange(this);
break;
default:
throw new Error(`Table Layout don't have event ${event}.`);
}
});
}
}
var TableLayout$1 = TableLayout;
const { CheckboxGroup: ElCheckboxGroup } = ElCheckbox;
var script$j = vue.defineComponent({
name: "ElTableFilterPanel",
components: {
ElCheckbox,
ElCheckboxGroup,
ElScrollbar: _Scrollbar,
ElPopper: _Popper,
},
directives: { ClickOutside },
props: {
placement: {
type: String,
default: "bottom-start",
},
store: {
type: Object,
},
column: {
type: Object,
},
upDataColumn: {
type: Function,
},
},
setup(props) {
const instance = vue.getCurrentInstance();
const { t } = useLocaleInject();
const parent = instance.parent;
if (!parent.filterPanels.value[props.column.id]) {
parent.filterPanels.value[props.column.id] = instance;
}
const tooltipVisible = vue.ref(false);
const tooltip = vue.ref(null);
const filters = vue.computed(() => {
return props.column && props.column.filters;
});
const filterValue = vue.computed({
get: () => (props.column.filteredValue || [])[0],
set: (value) => {
if (filteredValue.value) {
if (typeof value !== "undefined" && value !== null) {
filteredValue.value.splice(0, 1, value);
} else {
filteredValue.value.splice(0, 1);
}
}
},
});
const filteredValue = vue.computed({
get() {
if (props.column) {
return props.column.filteredValue || [];
}
return [];
},
set(value) {
if (props.column) {
props.upDataColumn("filteredValue", value);
}
},
});
const multiple = vue.computed(() => {
if (props.column) {
return props.column.filterMultiple;
}
return true;
});
const isActive = (filter) => {
return filter.value === filterValue.value;
};
const hidden = () => {
tooltipVisible.value = false;
};
const showFilterPanel = (e) => {
e.stopPropagation();
tooltipVisible.value = !tooltipVisible.value;
};
const hideFilterPanel = () => {
tooltipVisible.value = false;
};
const handleConfirm = () => {
confirmFilter(filteredValue.value);
hidden();
};
const handleReset = () => {
filteredValue.value = [];
confirmFilter(filteredValue.value);
hidden();
};
const handleSelect = (_filterValue) => {
filterValue.value = _filterValue;
if (typeof _filterValue !== "undefined" && _filterValue !== null) {
confirmFilter(filteredValue.value);
} else {
confirmFilter([]);
}
hidden();
};
const confirmFilter = (filteredValue2) => {
props.store.commit("filterChange", {
column: props.column,
values: filteredValue2,
});
props.store.updateAllSelected();
};
vue.watch(
tooltipVisible,
(value) => {
if (props.column) {
props.upDataColumn("filterOpened", value);
}
},
{
immediate: true,
}
);
const popperPaneRef = vue.computed(() => {
var _a;
return (_a = tooltip.value) == null ? void 0 : _a.popperRef;
});
return {
tooltipVisible,
multiple,
filteredValue,
filterValue,
filters,
handleConfirm,
handleReset,
handleSelect,
isActive,
t,
showFilterPanel,
hideFilterPanel,
popperPaneRef,
tooltip,
Effect: exports.Effect,
};
},
});
const _hoisted_1$c = { key: 0 };
const _hoisted_2$a = { class: "el-table-filter__content" };
const _hoisted_3$a = { class: "el-table-filter__bottom" };
const _hoisted_4$6 = ["disabled"];
const _hoisted_5$5 = {
key: 1,
class: "el-table-filter__list",
};
const _hoisted_6$5 = ["label", "onClick"];
function render$f(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_checkbox = vue.resolveComponent("el-checkbox");
const _component_el_checkbox_group =
vue.resolveComponent("el-checkbox-group");
const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
const _component_el_popper = vue.resolveComponent("el-popper");
const _directive_click_outside = vue.resolveDirective("click-outside");
return (
vue.openBlock(),
vue.createBlock(
_component_el_popper,
{
ref: "tooltip",
visible: _ctx.tooltipVisible,
"onUpdate:visible":
_cache[5] ||
(_cache[5] = ($event) => (_ctx.tooltipVisible = $event)),
offset: 0,
placement: _ctx.placement,
"show-arrow": false,
"stop-popper-mouse-event": false,
effect: _ctx.Effect.LIGHT,
pure: "",
"manual-mode": "",
"popper-class": "el-table-filter",
"append-to-body": "",
},
{
default: vue.withCtx(() => [
_ctx.multiple
? (vue.openBlock(),
vue.createElementBlock("div", _hoisted_1$c, [
vue.createElementVNode("div", _hoisted_2$a, [
vue.createVNode(
_component_el_scrollbar,
{ "wrap-class": "el-table-filter__wrap" },
{
default: vue.withCtx(() => [
vue.createVNode(
_component_el_checkbox_group,
{
modelValue: _ctx.filteredValue,
"onUpdate:modelValue":
_cache[0] ||
(_cache[0] = ($event) =>
(_ctx.filteredValue = $event)),
class: "el-table-filter__checkbox-group",
},
{
default: vue.withCtx(() => [
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.filters, (filter) => {
return (
vue.openBlock(),
vue.createBlock(
_component_el_checkbox,
{
key: filter.value,
label: filter.value,
},
{
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(filter.text),
1
),
]),
_: 2,
},
1032,
["label"]
)
);
}),
128
)),
]),
_: 1,
},
8,
["modelValue"]
),
]),
_: 1,
}
),
]),
vue.createElementVNode("div", _hoisted_3$a, [
vue.createElementVNode(
"button",
{
class: vue.normalizeClass({
"is-disabled": _ctx.filteredValue.length === 0,
}),
disabled: _ctx.filteredValue.length === 0,
type: "button",
onClick:
_cache[1] ||
(_cache[1] = (...args) =>
_ctx.handleConfirm && _ctx.handleConfirm(...args)),
},
vue.toDisplayString(_ctx.t("el.table.confirmFilter")),
11,
_hoisted_4$6
),
vue.createElementVNode(
"button",
{
type: "button",
onClick:
_cache[2] ||
(_cache[2] = (...args) =>
_ctx.handleReset && _ctx.handleReset(...args)),
},
vue.toDisplayString(_ctx.t("el.table.resetFilter")),
1
),
]),
]))
: (vue.openBlock(),
vue.createElementBlock("ul", _hoisted_5$5, [
vue.createElementVNode(
"li",
{
class: vue.normalizeClass([
{
"is-active":
_ctx.filterValue === void 0 ||
_ctx.filterValue === null,
},
"el-table-filter__list-item",
]),
onClick:
_cache[3] ||
(_cache[3] = ($event) => _ctx.handleSelect(null)),
},
vue.toDisplayString(_ctx.t("el.table.clearFilter")),
3
),
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.filters, (filter) => {
return (
vue.openBlock(),
vue.createElementBlock(
"li",
{
key: filter.value,
class: vue.normalizeClass([
{ "is-active": _ctx.isActive(filter) },
"el-table-filter__list-item",
]),
label: filter.value,
onClick: ($event) =>
_ctx.handleSelect(filter.value),
},
vue.toDisplayString(filter.text),
11,
_hoisted_6$5
)
);
}),
128
)),
])),
]),
trigger: vue.withCtx(() => [
vue.withDirectives(
vue.createElementVNode(
"span",
{
class: "el-table__column-filter-trigger el-none-outline",
onClick:
_cache[4] ||
(_cache[4] = (...args) =>
_ctx.showFilterPanel && _ctx.showFilterPanel(...args)),
},
[
vue.createElementVNode(
"i",
{
class: vue.normalizeClass([
"el-icon-arrow-down",
_ctx.column.filterOpened ? "el-icon-arrow-up" : "",
]),
},
null,
2
),
],
512
),
[
[
_directive_click_outside,
_ctx.hideFilterPanel,
_ctx.popperPaneRef,
],
]
),
]),
_: 1,
},
8,
["visible", "placement", "effect"]
)
);
}
script$j.render = render$f;
script$j.__file = "packages/components/table/src/filter-panel.vue";
function useLayoutObserver(root) {
const instance = vue.getCurrentInstance();
vue.onBeforeMount(() => {
tableLayout.value.addObserver(instance);
});
vue.onMounted(() => {
onColumnsChange(tableLayout.value);
onScrollableChange(tableLayout.value);
});
vue.onUpdated(() => {
onColumnsChange(tableLayout.value);
onScrollableChange(tableLayout.value);
});
vue.onUnmounted(() => {
tableLayout.value.removeObserver(instance);
});
const tableLayout = vue.computed(() => {
const layout = root.layout;
if (!layout) {
throw new Error("Can not find table layout.");
}
return layout;
});
const onColumnsChange = (layout) => {
var _a;
const cols =
((_a = root.vnode.el) == null
? void 0
: _a.querySelectorAll("colgroup > col")) || [];
if (!cols.length) return;
const flattenColumns = layout.getFlattenColumns();
const columnsMap = {};
flattenColumns.forEach((column) => {
columnsMap[column.id] = column;
});
for (let i = 0, j = cols.length; i < j; i++) {
const col = cols[i];
const name = col.getAttribute("name");
const column = columnsMap[name];
if (column) {
col.setAttribute("width", column.realWidth || column.width);
}
}
};
const onScrollableChange = (layout) => {
const cols = root.vnode.el.querySelectorAll(
"colgroup > col[name=gutter]"
);
for (let i = 0, j = cols.length; i < j; i++) {
const col = cols[i];
col.setAttribute(
"width",
layout.scrollY.value ? layout.gutterWidth : "0"
);
}
const ths = root.vnode.el.querySelectorAll("th.gutter");
for (let i = 0, j = ths.length; i < j; i++) {
const th = ths[i];
th.style.width = layout.scrollY.value ? `${layout.gutterWidth}px` : "0";
th.style.display = layout.scrollY.value ? "" : "none";
}
};
return {
tableLayout: tableLayout.value,
onColumnsChange,
onScrollableChange,
};
}
function hGutter() {
return vue.h("col", {
name: "gutter",
});
}
function hColgroup(columns, hasGutter = false) {
return vue.h("colgroup", {}, [
...columns.map((column) =>
vue.h("col", {
name: column.id,
key: column.id,
})
),
hasGutter && hGutter(),
]);
}
function useEvent(props, emit) {
const instance = vue.getCurrentInstance();
const parent = instance.parent;
const handleFilterClick = (event) => {
event.stopPropagation();
return;
};
const handleHeaderClick = (event, column) => {
if (!column.filters && column.sortable) {
handleSortClick(event, column, false);
} else if (column.filterable && !column.sortable) {
handleFilterClick(event);
}
parent.emit("header-click", column, event);
};
const handleHeaderContextMenu = (event, column) => {
parent.emit("header-contextmenu", column, event);
};
const draggingColumn = vue.ref(null);
const dragging = vue.ref(false);
const dragState = vue.ref({});
const handleMouseDown = (event, column) => {
if (isServer) return;
if (column.children && column.children.length > 0) return;
if (draggingColumn.value && props.border) {
dragging.value = true;
const table = parent;
emit("set-drag-visible", true);
const tableEl = table.vnode.el;
const tableLeft = tableEl.getBoundingClientRect().left;
const columnEl = instance.vnode.el.querySelector(`th.${column.id}`);
const columnRect = columnEl.getBoundingClientRect();
const minLeft = columnRect.left - tableLeft + 30;
addClass(columnEl, "noclick");
dragState.value = {
startMouseLeft: event.clientX,
startLeft: columnRect.right - tableLeft,
startColumnLeft: columnRect.left - tableLeft,
tableLeft,
};
const resizeProxy = table.refs.resizeProxy;
resizeProxy.style.left = `${dragState.value.startLeft}px`;
document.onselectstart = function () {
return false;
};
document.ondragstart = function () {
return false;
};
const handleMouseMove2 = (event2) => {
const deltaLeft = event2.clientX - dragState.value.startMouseLeft;
const proxyLeft = dragState.value.startLeft + deltaLeft;
resizeProxy.style.left = `${Math.max(minLeft, proxyLeft)}px`;
};
const handleMouseUp = () => {
if (dragging.value) {
const { startColumnLeft, startLeft } = dragState.value;
const finalLeft = parseInt(resizeProxy.style.left, 10);
const columnWidth = finalLeft - startColumnLeft;
column.width = column.realWidth = columnWidth;
table.emit(
"header-dragend",
column.width,
startLeft - startColumnLeft,
column,
event
);
props.store.scheduleLayout(false, true);
document.body.style.cursor = "";
dragging.value = false;
draggingColumn.value = null;
dragState.value = {};
emit("set-drag-visible", false);
}
document.removeEventListener("mousemove", handleMouseMove2);
document.removeEventListener("mouseup", handleMouseUp);
document.onselectstart = null;
document.ondragstart = null;
setTimeout(function () {
removeClass(columnEl, "noclick");
}, 0);
};
document.addEventListener("mousemove", handleMouseMove2);
document.addEventListener("mouseup", handleMouseUp);
}
};
const handleMouseMove = (event, column) => {
if (column.children && column.children.length > 0) return;
let target = event.target;
while (target && target.tagName !== "TH") {
target = target.parentNode;
}
if (!column || !column.resizable) return;
if (!dragging.value && props.border) {
const rect = target.getBoundingClientRect();
const bodyStyle = document.body.style;
if (rect.width > 12 && rect.right - event.pageX < 8) {
bodyStyle.cursor = "col-resize";
if (hasClass(target, "is-sortable")) {
target.style.cursor = "col-resize";
}
draggingColumn.value = column;
} else if (!dragging.value) {
bodyStyle.cursor = "";
if (hasClass(target, "is-sortable")) {
target.style.cursor = "pointer";
}
draggingColumn.value = null;
}
}
};
const handleMouseOut = () => {
if (isServer) return;
document.body.style.cursor = "";
};
const toggleOrder = ({ order, sortOrders }) => {
if (order === "") return sortOrders[0];
const index = sortOrders.indexOf(order || null);
return sortOrders[index > sortOrders.length - 2 ? 0 : index + 1];
};
const handleSortClick = (event, column, givenOrder) => {
event.stopPropagation();
const order =
column.order === givenOrder ? null : givenOrder || toggleOrder(column);
let target = event.target;
while (target && target.tagName !== "TH") {
target = target.parentNode;
}
if (target && target.tagName === "TH") {
if (hasClass(target, "noclick")) {
removeClass(target, "noclick");
return;
}
}
if (!column.sortable) return;
const states = props.store.states;
let sortProp = states.sortProp.value;
let sortOrder;
const sortingColumn = states.sortingColumn.value;
if (
sortingColumn !== column ||
(sortingColumn === column && sortingColumn.order === null)
) {
if (sortingColumn) {
sortingColumn.order = null;
}
states.sortingColumn.value = column;
sortProp = column.property;
}
if (!order) {
sortOrder = column.order = null;
} else {
sortOrder = column.order = order;
}
states.sortProp.value = sortProp;
states.sortOrder.value = sortOrder;
parent.store.commit("changeSortCondition");
};
return {
handleHeaderClick,
handleHeaderContextMenu,
handleMouseDown,
handleMouseMove,
handleMouseOut,
handleSortClick,
handleFilterClick,
};
}
function useStyle$2(props) {
const instance = vue.getCurrentInstance();
const parent = instance.parent;
const storeData = parent.store.states;
const isCellHidden = (index, columns) => {
let start = 0;
for (let i = 0; i < index; i++) {
start += columns[i].colSpan;
}
const after = start + columns[index].colSpan - 1;
if (props.fixed === "left") {
return after >= storeData.fixedLeafColumnsLength.value;
} else if (props.fixed === "right") {
return (
start <
storeData.columns.value.length -
storeData.rightFixedLeafColumnsLength.value
);
} else {
return (
after < storeData.fixedLeafColumnsLength.value ||
start >=
storeData.columns.value.length -
storeData.rightFixedLeafColumnsLength.value
);
}
};
const getHeaderRowStyle = (rowIndex) => {
const headerRowStyle = parent.props.headerRowStyle;
if (typeof headerRowStyle === "function") {
return headerRowStyle.call(null, { rowIndex });
}
return headerRowStyle;
};
const getHeaderRowClass = (rowIndex) => {
const classes = [];
const headerRowClassName = parent.props.headerRowClassName;
if (typeof headerRowClassName === "string") {
classes.push(headerRowClassName);
} else if (typeof headerRowClassName === "function") {
classes.push(headerRowClassName.call(null, { rowIndex }));
}
return classes.join(" ");
};
const getHeaderCellStyle = (rowIndex, columnIndex, row, column) => {
const headerCellStyle = parent.props.headerCellStyle;
if (typeof headerCellStyle === "function") {
return headerCellStyle.call(null, {
rowIndex,
columnIndex,
row,
column,
});
}
return headerCellStyle;
};
const getHeaderCellClass = (rowIndex, columnIndex, row, column) => {
const classes = [
column.id,
column.order,
column.headerAlign,
column.className,
column.labelClassName,
];
if (rowIndex === 0 && isCellHidden(columnIndex, row)) {
classes.push("is-hidden");
}
if (!column.children) {
classes.push("is-leaf");
}
if (column.sortable) {
classes.push("is-sortable");
}
const headerCellClassName = parent.props.headerCellClassName;
if (typeof headerCellClassName === "string") {
classes.push(headerCellClassName);
} else if (typeof headerCellClassName === "function") {
classes.push(
headerCellClassName.call(null, {
rowIndex,
columnIndex,
row,
column,
})
);
}
classes.push("el-table__cell");
return classes.join(" ");
};
return {
getHeaderRowStyle,
getHeaderRowClass,
getHeaderCellStyle,
getHeaderCellClass,
};
}
const getAllColumns = (columns) => {
const result = [];
columns.forEach((column) => {
if (column.children) {
result.push(column);
result.push.apply(result, getAllColumns(column.children));
} else {
result.push(column);
}
});
return result;
};
const convertToRows = (originColumns) => {
let maxLevel = 1;
const traverse = (column, parent) => {
if (parent) {
column.level = parent.level + 1;
if (maxLevel < column.level) {
maxLevel = column.level;
}
}
if (column.children) {
let colSpan = 0;
column.children.forEach((subColumn) => {
traverse(subColumn, column);
colSpan += subColumn.colSpan;
});
column.colSpan = colSpan;
} else {
column.colSpan = 1;
}
};
originColumns.forEach((column) => {
column.level = 1;
traverse(column, void 0);
});
const rows = [];
for (let i = 0; i < maxLevel; i++) {
rows.push([]);
}
const allColumns = getAllColumns(originColumns);
allColumns.forEach((column) => {
if (!column.children) {
column.rowSpan = maxLevel - column.level + 1;
} else {
column.rowSpan = 1;
}
rows[column.level - 1].push(column);
});
return rows;
};
function useUtils$1(props) {
const instance = vue.getCurrentInstance();
const parent = instance.parent;
const columnRows = vue.computed(() => {
return convertToRows(props.store.states.originColumns.value);
});
const isGroup = vue.computed(() => {
const result = columnRows.value.length > 1;
if (result) parent.state.isGroup.value = true;
return result;
});
const toggleAllSelection = (event) => {
event.stopPropagation();
parent.store.commit("toggleAllSelection");
};
return {
isGroup,
toggleAllSelection,
columnRows,
};
}
var TableHeader = vue.defineComponent({
name: "ElTableHeader",
components: {
ElCheckbox,
},
props: {
fixed: {
type: String,
default: "",
},
store: {
required: true,
type: Object,
},
border: Boolean,
defaultSort: {
type: Object,
default: () => {
return {
prop: "",
order: "",
};
},
},
},
setup(props, { emit }) {
const instance = vue.getCurrentInstance();
const parent = instance.parent;
const storeData = parent.store.states;
const filterPanels = vue.ref({});
const { tableLayout, onColumnsChange, onScrollableChange } =
useLayoutObserver(parent);
const hasGutter = vue.computed(() => {
return !props.fixed && tableLayout.gutterWidth;
});
vue.onMounted(() => {
vue.nextTick(() => {
const { prop, order } = props.defaultSort;
const init = true;
parent.store.commit("sort", { prop, order, init });
});
});
const {
handleHeaderClick,
handleHeaderContextMenu,
handleMouseDown,
handleMouseMove,
handleMouseOut,
handleSortClick,
handleFilterClick,
} = useEvent(props, emit);
const {
getHeaderRowStyle,
getHeaderRowClass,
getHeaderCellStyle,
getHeaderCellClass,
} = useStyle$2(props);
const { isGroup, toggleAllSelection, columnRows } = useUtils$1(props);
instance.state = {
onColumnsChange,
onScrollableChange,
};
instance.filterPanels = filterPanels;
return {
columns: storeData.columns,
filterPanels,
hasGutter,
onColumnsChange,
onScrollableChange,
columnRows,
getHeaderRowClass,
getHeaderRowStyle,
getHeaderCellClass,
getHeaderCellStyle,
handleHeaderClick,
handleHeaderContextMenu,
handleMouseDown,
handleMouseMove,
handleMouseOut,
handleSortClick,
handleFilterClick,
isGroup,
toggleAllSelection,
};
},
render() {
return vue.h(
"table",
{
border: "0",
cellpadding: "0",
cellspacing: "0",
class: "el-table__header",
},
[
hColgroup(this.columns, this.hasGutter),
vue.h(
"thead",
{
class: { "is-group": this.isGroup, "has-gutter": this.hasGutter },
},
this.columnRows.map((subColumns, rowIndex) =>
vue.h(
"tr",
{
class: this.getHeaderRowClass(rowIndex),
key: rowIndex,
style: this.getHeaderRowStyle(rowIndex),
},
subColumns.map((column, cellIndex) =>
vue.h(
"th",
{
class: this.getHeaderCellClass(
rowIndex,
cellIndex,
subColumns,
column
),
colspan: column.colSpan,
key: `${column.id}-thead`,
rowSpan: column.rowSpan,
style: this.getHeaderCellStyle(
rowIndex,
cellIndex,
subColumns,
column
),
onClick: ($event) =>
this.handleHeaderClick($event, column),
onContextmenu: ($event) =>
this.handleHeaderContextMenu($event, column),
onMousedown: ($event) =>
this.handleMouseDown($event, column),
onMousemove: ($event) =>
this.handleMouseMove($event, column),
onMouseout: this.handleMouseOut,
},
[
vue.h(
"div",
{
class: [
"cell",
column.filteredValue &&
column.filteredValue.length > 0
? "highlight"
: "",
column.labelClassName,
],
},
[
column.renderHeader
? column.renderHeader({
column,
$index: cellIndex,
store: this.store,
_self: this.$parent,
})
: column.label,
column.sortable &&
vue.h(
"span",
{
onClick: ($event) =>
this.handleSortClick($event, column),
class: "caret-wrapper",
},
[
vue.h("i", {
onClick: ($event) =>
this.handleSortClick(
$event,
column,
"ascending"
),
class: "sort-caret ascending",
}),
vue.h("i", {
onClick: ($event) =>
this.handleSortClick(
$event,
column,
"descending"
),
class: "sort-caret descending",
}),
]
),
column.filterable &&
vue.h(script$j, {
store: this.$parent.store,
placement:
column.filterPlacement || "bottom-start",
column,
upDataColumn: (key, value) => {
column[key] = value;
},
}),
]
),
]
)
)
)
)
),
]
);
},
});
function useEvents(props) {
const instance = vue.getCurrentInstance();
const parent = instance.parent;
const tooltipContent = vue.ref("");
const tooltipTrigger = vue.ref(vue.h("div"));
const handleEvent = (event, row, name) => {
const table = parent;
const cell = getCell(event);
let column;
if (cell) {
column = getColumnByCell(
{
columns: props.store.states.columns.value,
},
cell
);
if (column) {
table.emit(`cell-${name}`, row, column, cell, event);
}
}
table.emit(`row-${name}`, row, column, event);
};
const handleDoubleClick = (event, row) => {
handleEvent(event, row, "dblclick");
};
const handleClick = (event, row) => {
props.store.commit("setCurrentRow", row);
handleEvent(event, row, "click");
};
const handleContextMenu = (event, row) => {
handleEvent(event, row, "contextmenu");
};
const handleMouseEnter = debounce_1(function (index) {
props.store.commit("setHoverRow", index);
}, 30);
const handleMouseLeave = debounce_1(function () {
props.store.commit("setHoverRow", null);
}, 30);
const handleCellMouseEnter = (event, row) => {
const table = parent;
const cell = getCell(event);
if (cell) {
const column = getColumnByCell(
{
columns: props.store.states.columns.value,
},
cell
);
const hoverState = (table.hoverState = { cell, column, row });
table.emit(
"cell-mouse-enter",
hoverState.row,
hoverState.column,
hoverState.cell,
event
);
}
const cellChild = event.target.querySelector(".cell");
if (!(hasClass(cellChild, "el-tooltip") && cellChild.childNodes.length)) {
return;
}
const range = document.createRange();
range.setStart(cellChild, 0);
range.setEnd(cellChild, cellChild.childNodes.length);
const rangeWidth = range.getBoundingClientRect().width;
const padding =
(parseInt(getStyle(cellChild, "paddingLeft"), 10) || 0) +
(parseInt(getStyle(cellChild, "paddingRight"), 10) || 0);
if (
rangeWidth + padding > cellChild.offsetWidth ||
cellChild.scrollWidth > cellChild.offsetWidth
) {
createTablePopper(
cell,
cell.innerText || cell.textContent,
{
placement: "top",
strategy: "fixed",
},
row.tooltipEffect
);
}
};
const handleCellMouseLeave = (event) => {
const cell = getCell(event);
if (!cell) return;
const oldHoverState = parent.hoverState;
parent.emit(
"cell-mouse-leave",
oldHoverState == null ? void 0 : oldHoverState.row,
oldHoverState == null ? void 0 : oldHoverState.column,
oldHoverState == null ? void 0 : oldHoverState.cell,
event
);
};
return {
handleDoubleClick,
handleClick,
handleContextMenu,
handleMouseEnter,
handleMouseLeave,
handleCellMouseEnter,
handleCellMouseLeave,
tooltipContent,
tooltipTrigger,
};
}
function useStyles(props) {
const instance = vue.getCurrentInstance();
const parent = instance.parent;
const isColumnHidden = (index) => {
if (props.fixed === "left") {
return index >= props.store.states.fixedLeafColumnsLength.value;
} else if (props.fixed === "right") {
return (
index <
props.store.states.columns.value.length -
props.store.states.rightFixedLeafColumnsLength.value
);
} else {
return (
index < props.store.states.fixedLeafColumnsLength.value ||
index >=
props.store.states.columns.value.length -
props.store.states.rightFixedLeafColumnsLength.value
);
}
};
const getRowStyle = (row, rowIndex) => {
const rowStyle = parent.props.rowStyle;
if (typeof rowStyle === "function") {
return rowStyle.call(null, {
row,
rowIndex,
});
}
return rowStyle || null;
};
const getRowClass = (row, rowIndex) => {
const classes = ["el-table__row"];
if (
parent.props.highlightCurrentRow &&
row === props.store.states.currentRow.value
) {
classes.push("current-row");
}
if (props.stripe && rowIndex % 2 === 1) {
classes.push("el-table__row--striped");
}
const rowClassName = parent.props.rowClassName;
if (typeof rowClassName === "string") {
classes.push(rowClassName);
} else if (typeof rowClassName === "function") {
classes.push(
rowClassName.call(null, {
row,
rowIndex,
})
);
}
if (props.store.states.expandRows.value.indexOf(row) > -1) {
classes.push("expanded");
}
return classes;
};
const getCellStyle = (rowIndex, columnIndex, row, column) => {
const cellStyle = parent.props.cellStyle;
if (typeof cellStyle === "function") {
return cellStyle.call(null, {
rowIndex,
columnIndex,
row,
column,
});
}
return cellStyle;
};
const getCellClass = (rowIndex, columnIndex, row, column) => {
const classes = [column.id, column.align, column.className];
if (isColumnHidden(columnIndex)) {
classes.push("is-hidden");
}
const cellClassName = parent.props.cellClassName;
if (typeof cellClassName === "string") {
classes.push(cellClassName);
} else if (typeof cellClassName === "function") {
classes.push(
cellClassName.call(null, {
rowIndex,
columnIndex,
row,
column,
})
);
}
classes.push("el-table__cell");
return classes.join(" ");
};
const getSpan = (row, column, rowIndex, columnIndex) => {
let rowspan = 1;
let colspan = 1;
const fn = parent.props.spanMethod;
if (typeof fn === "function") {
const result = fn({
row,
column,
rowIndex,
columnIndex,
});
if (Array.isArray(result)) {
rowspan = result[0];
colspan = result[1];
} else if (typeof result === "object") {
rowspan = result.rowspan;
colspan = result.colspan;
}
}
return { rowspan, colspan };
};
const getColspanRealWidth = (columns, colspan, index) => {
if (colspan < 1) {
return columns[index].realWidth;
}
const widthArr = columns
.map(({ realWidth, width }) => realWidth || width)
.slice(index, index + colspan);
return Number(
widthArr.reduce((acc, width) => Number(acc) + Number(width), -1)
);
};
return {
getRowStyle,
getRowClass,
getCellStyle,
getCellClass,
getSpan,
getColspanRealWidth,
isColumnHidden,
};
}
var __defProp$8 = Object.defineProperty;
var __defProps$7 = Object.defineProperties;
var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
var __defNormalProp$8 = (obj, key, value) =>
key in obj
? __defProp$8(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$8 = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$8.call(b, prop)) __defNormalProp$8(a, prop, b[prop]);
if (__getOwnPropSymbols$8)
for (var prop of __getOwnPropSymbols$8(b)) {
if (__propIsEnum$8.call(b, prop)) __defNormalProp$8(a, prop, b[prop]);
}
return a;
};
var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
function useRender$1(props) {
const instance = vue.getCurrentInstance();
const parent = instance.parent;
const {
handleDoubleClick,
handleClick,
handleContextMenu,
handleMouseEnter,
handleMouseLeave,
handleCellMouseEnter,
handleCellMouseLeave,
tooltipContent,
tooltipTrigger,
} = useEvents(props);
const {
getRowStyle,
getRowClass,
getCellStyle,
getCellClass,
getSpan,
getColspanRealWidth,
} = useStyles(props);
const firstDefaultColumnIndex = vue.computed(() => {
return props.store.states.columns.value.findIndex(
({ type }) => type === "default"
);
});
const getKeyOfRow = (row, index) => {
const rowKey = parent.props.rowKey;
if (rowKey) {
return getRowIdentity(row, rowKey);
}
return index;
};
const rowRender = (row, $index, treeRowData) => {
const { tooltipEffect, store } = props;
const { indent, columns } = store.states;
const rowClasses = getRowClass(row, $index);
let display = true;
if (treeRowData) {
rowClasses.push(`el-table__row--level-${treeRowData.level}`);
display = treeRowData.display;
}
const displayStyle = display
? null
: {
display: "none",
};
return vue.h(
"tr",
{
style: [displayStyle, getRowStyle(row, $index)],
class: rowClasses,
key: getKeyOfRow(row, $index),
onDblclick: ($event) => handleDoubleClick($event, row),
onClick: ($event) => handleClick($event, row),
onContextmenu: ($event) => handleContextMenu($event, row),
onMouseenter: () => handleMouseEnter($index),
onMouseleave: handleMouseLeave,
},
columns.value.map((column, cellIndex) => {
const { rowspan, colspan } = getSpan(row, column, $index, cellIndex);
if (!rowspan || !colspan) {
return null;
}
const columnData = __spreadValues$8({}, column);
columnData.realWidth = getColspanRealWidth(
columns.value,
colspan,
cellIndex
);
const data = {
store: props.store,
_self: props.context || parent,
column: columnData,
row,
$index,
};
if (cellIndex === firstDefaultColumnIndex.value && treeRowData) {
data.treeNode = {
indent: treeRowData.level * indent.value,
level: treeRowData.level,
};
if (typeof treeRowData.expanded === "boolean") {
data.treeNode.expanded = treeRowData.expanded;
if ("loading" in treeRowData) {
data.treeNode.loading = treeRowData.loading;
}
if ("noLazyChildren" in treeRowData) {
data.treeNode.noLazyChildren = treeRowData.noLazyChildren;
}
}
}
const baseKey = `${$index},${cellIndex}`;
const patchKey =
columnData.columnKey || columnData.rawColumnKey || "";
return vue.h(
"td",
{
style: getCellStyle($index, cellIndex, row, column),
class: getCellClass($index, cellIndex, row, column),
key: `${patchKey}${baseKey}`,
rowspan,
colspan,
onMouseenter: ($event) =>
handleCellMouseEnter(
$event,
__spreadProps$7(__spreadValues$8({}, row), { tooltipEffect })
),
onMouseleave: handleCellMouseLeave,
},
[column.renderCell(data)]
);
})
);
};
const wrappedRowRender = (row, $index) => {
const store = props.store;
const { isRowExpanded, assertRowKey } = store;
const { treeData, lazyTreeNodeMap, childrenColumnName, rowKey } =
store.states;
const hasExpandColumn = store.states.columns.value.some(
({ type }) => type === "expand"
);
if (hasExpandColumn && isRowExpanded(row)) {
const renderExpanded = parent.renderExpanded;
const tr = rowRender(row, $index, void 0);
if (!renderExpanded) {
console.error("[Element Error]renderExpanded is required.");
return tr;
}
return [
[
tr,
vue.h(
"tr",
{
key: `expanded-row__${tr.key}`,
},
[
vue.h(
"td",
{
colspan: store.states.columns.value.length,
class: "el-table__cell el-table__expanded-cell",
},
[renderExpanded({ row, $index, store })]
),
]
),
],
];
} else if (Object.keys(treeData.value).length) {
assertRowKey();
const key = getRowIdentity(row, rowKey.value);
let cur = treeData.value[key];
let treeRowData = null;
if (cur) {
treeRowData = {
expanded: cur.expanded,
level: cur.level,
display: true,
};
if (typeof cur.lazy === "boolean") {
if (typeof cur.loaded === "boolean" && cur.loaded) {
treeRowData.noLazyChildren = !(
cur.children && cur.children.length
);
}
treeRowData.loading = cur.loading;
}
}
const tmp = [rowRender(row, $index, treeRowData)];
if (cur) {
let i = 0;
const traverse = (children, parent2) => {
if (!(children && children.length && parent2)) return;
children.forEach((node) => {
const innerTreeRowData = {
display: parent2.display && parent2.expanded,
level: parent2.level + 1,
expanded: false,
noLazyChildren: false,
loading: false,
};
const childKey = getRowIdentity(node, rowKey.value);
if (childKey === void 0 || childKey === null) {
throw new Error("for nested data item, row-key is required.");
}
cur = __spreadValues$8({}, treeData.value[childKey]);
if (cur) {
innerTreeRowData.expanded = cur.expanded;
cur.level = cur.level || innerTreeRowData.level;
cur.display = !!(cur.expanded && innerTreeRowData.display);
if (typeof cur.lazy === "boolean") {
if (typeof cur.loaded === "boolean" && cur.loaded) {
innerTreeRowData.noLazyChildren = !(
cur.children && cur.children.length
);
}
innerTreeRowData.loading = cur.loading;
}
}
i++;
tmp.push(rowRender(node, $index + i, innerTreeRowData));
if (cur) {
const nodes2 =
lazyTreeNodeMap.value[childKey] ||
node[childrenColumnName.value];
traverse(nodes2, cur);
}
});
};
cur.display = true;
const nodes =
lazyTreeNodeMap.value[key] || row[childrenColumnName.value];
traverse(nodes, cur);
}
return tmp;
} else {
return rowRender(row, $index, void 0);
}
};
return {
wrappedRowRender,
tooltipContent,
tooltipTrigger,
};
}
const defaultProps$2 = {
store: {
required: true,
type: Object,
},
stripe: Boolean,
tooltipEffect: String,
context: {
default: () => ({}),
type: Object,
},
rowClassName: [String, Function],
rowStyle: [Object, Function],
fixed: {
type: String,
default: "",
},
highlight: Boolean,
};
var defaultProps$3 = defaultProps$2;
var TableBody = vue.defineComponent({
name: "ElTableBody",
props: defaultProps$3,
setup(props) {
const instance = vue.getCurrentInstance();
const parent = instance.parent;
const { wrappedRowRender, tooltipContent, tooltipTrigger } =
useRender$1(props);
const { onColumnsChange, onScrollableChange } = useLayoutObserver(parent);
vue.watch(props.store.states.hoverRow, (newVal, oldVal) => {
if (!props.store.states.isComplex.value || isServer) return;
let raf = window.requestAnimationFrame;
if (!raf) {
raf = (fn) => window.setTimeout(fn, 16);
}
raf(() => {
const rows = instance.vnode.el.querySelectorAll(".el-table__row");
const oldRow = rows[oldVal];
const newRow = rows[newVal];
if (oldRow) {
removeClass(oldRow, "hover-row");
}
if (newRow) {
addClass(newRow, "hover-row");
}
});
});
vue.onUnmounted(() => {
var _a;
(_a = removePopper) == null ? void 0 : _a();
});
vue.onUpdated(() => {
var _a;
(_a = removePopper) == null ? void 0 : _a();
});
return {
onColumnsChange,
onScrollableChange,
wrappedRowRender,
tooltipContent,
tooltipTrigger,
};
},
render() {
const data = this.store.states.data.value || [];
return vue.h(
"table",
{
class: "el-table__body",
cellspacing: "0",
cellpadding: "0",
border: "0",
},
[
hColgroup(this.store.states.columns.value),
vue.h("tbody", {}, [
data.reduce((acc, row) => {
return acc.concat(this.wrappedRowRender(row, acc.length));
}, []),
]),
]
);
},
});
function useMapState() {
const instance = vue.getCurrentInstance();
const table = instance.parent;
const store = table.store;
const leftFixedLeafCount = vue.computed(() => {
return store.states.fixedLeafColumnsLength.value;
});
const rightFixedLeafCount = vue.computed(() => {
return store.states.rightFixedColumns.value.length;
});
const columnsCount = vue.computed(() => {
return store.states.columns.value.length;
});
const leftFixedCount = vue.computed(() => {
return store.states.fixedColumns.value.length;
});
const rightFixedCount = vue.computed(() => {
return store.states.rightFixedColumns.value.length;
});
return {
leftFixedLeafCount,
rightFixedLeafCount,
columnsCount,
leftFixedCount,
rightFixedCount,
columns: store.states.columns,
};
}
function useStyle$1(props) {
const instance = vue.getCurrentInstance();
const table = instance.parent;
const store = table.store;
const {
leftFixedLeafCount,
rightFixedLeafCount,
columnsCount,
leftFixedCount,
rightFixedCount,
columns,
} = useMapState();
const hasGutter = vue.computed(() => {
return !props.fixed && !table.layout.gutterWidth;
});
const isCellHidden = (index, columns2, column) => {
if (props.fixed || props.fixed === "left") {
return index >= leftFixedLeafCount.value;
} else if (props.fixed === "right") {
let before = 0;
for (let i = 0; i < index; i++) {
before += columns2[i].colSpan;
}
return before < columnsCount.value - rightFixedLeafCount.value;
} else if (!props.fixed && column.fixed) {
return true;
} else {
return (
index < leftFixedCount.value ||
index >= columnsCount.value - rightFixedCount.value
);
}
};
const getRowClasses = (column, cellIndex) => {
const classes = [column.id, column.align, column.labelClassName];
if (column.className) {
classes.push(column.className);
}
if (isCellHidden(cellIndex, store.states.columns.value, column)) {
classes.push("is-hidden");
}
if (!column.children) {
classes.push("is-leaf");
}
return classes;
};
return {
hasGutter,
getRowClasses,
columns,
};
}
var TableFooter = vue.defineComponent({
name: "ElTableFooter",
props: {
fixed: {
type: String,
default: "",
},
store: {
required: true,
type: Object,
},
summaryMethod: Function,
sumText: String,
border: Boolean,
defaultSort: {
type: Object,
default: () => {
return {
prop: "",
order: "",
};
},
},
},
setup(props) {
const { hasGutter, getRowClasses, columns } = useStyle$1(props);
return {
getRowClasses,
hasGutter,
columns,
};
},
render() {
let sums = [];
if (this.summaryMethod) {
sums = this.summaryMethod({
columns: this.columns,
data: this.store.states.data.value,
});
} else {
this.columns.forEach((column, index) => {
if (index === 0) {
sums[index] = this.sumText;
return;
}
const values = this.store.states.data.value.map((item) =>
Number(item[column.property])
);
const precisions = [];
let notNumber = true;
values.forEach((value) => {
if (!isNaN(value)) {
notNumber = false;
const decimal = `${value}`.split(".")[1];
precisions.push(decimal ? decimal.length : 0);
}
});
const precision = Math.max.apply(null, precisions);
if (!notNumber) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return parseFloat(
(prev + curr).toFixed(Math.min(precision, 20))
);
} else {
return prev;
}
}, 0);
} else {
sums[index] = "";
}
});
}
return vue.h(
"table",
{
class: "el-table__footer",
cellspacing: "0",
cellpadding: "0",
border: "0",
},
[
hColgroup(this.columns, this.hasGutter),
vue.h(
"tbody",
{
class: [{ "has-gutter": this.hasGutter }],
},
[
vue.h("tr", {}, [
...this.columns.map((column, cellIndex) =>
vue.h(
"td",
{
key: cellIndex,
colspan: column.colSpan,
rowspan: column.rowSpan,
class: [
...this.getRowClasses(column, cellIndex),
"el-table__cell",
],
},
[
vue.h(
"div",
{
class: ["cell", column.labelClassName],
},
[sums[cellIndex]]
),
]
)
),
this.hasGutter && hGutter(),
]),
]
),
]
);
},
});
function useUtils(store) {
const setCurrentRow = (row) => {
store.commit("setCurrentRow", row);
};
const toggleRowSelection = (row, selected) => {
store.toggleRowSelection(row, selected, false);
store.updateAllSelected();
};
const clearSelection = () => {
store.clearSelection();
};
const clearFilter = (columnKeys) => {
store.clearFilter(columnKeys);
};
const toggleAllSelection = () => {
store.commit("toggleAllSelection");
};
const toggleRowExpansion = (row, expanded) => {
store.toggleRowExpansionAdapter(row, expanded);
};
const clearSort = () => {
store.clearSort();
};
const sort = (prop, order) => {
store.commit("sort", { prop, order });
};
return {
setCurrentRow,
toggleRowSelection,
clearSelection,
clearFilter,
toggleAllSelection,
toggleRowExpansion,
clearSort,
sort,
};
}
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
var __async$3 = (__this, __arguments, generator) => {
return new Promise((resolve, reject) => {
var fulfilled = (value) => {
try {
step(generator.next(value));
} catch (e) {
reject(e);
}
};
var rejected = (value) => {
try {
step(generator.throw(value));
} catch (e) {
reject(e);
}
};
var step = (x) =>
x.done
? resolve(x.value)
: Promise.resolve(x.value).then(fulfilled, rejected);
step((generator = generator.apply(__this, __arguments)).next());
});
};
function useStyle(props, layout, store, table) {
const $ELEMENT = useGlobalConfig();
const isHidden = vue.ref(false);
const renderExpanded = vue.ref(null);
const resizeProxyVisible = vue.ref(false);
const setDragVisible = (visible) => {
resizeProxyVisible.value = visible;
};
const resizeState = vue.ref({
width: null,
height: null,
});
const isGroup = vue.ref(false);
vue.watchEffect(() => {
layout.setHeight(props.height);
});
vue.watchEffect(() => {
layout.setMaxHeight(props.maxHeight);
});
vue.watch(
() => [props.currentRowKey, store.states.rowKey],
([currentRowKey, rowKey]) => {
if (!vue.unref(rowKey)) return;
store.setCurrentRowKey(`${currentRowKey}`);
},
{
immediate: true,
}
);
vue.watch(
() => props.data,
(data) => {
table.store.commit("setData", data);
},
{
immediate: true,
deep: true,
}
);
vue.watchEffect(() => {
if (props.expandRowKeys) {
store.setExpandRowKeysAdapter(props.expandRowKeys);
}
});
const handleMouseLeave = () => {
table.store.commit("setHoverRow", null);
if (table.hoverState) table.hoverState = null;
};
const handleHeaderFooterMousewheel = (event, data) => {
const { pixelX, pixelY } = data;
if (Math.abs(pixelX) >= Math.abs(pixelY)) {
table.refs.bodyWrapper.scrollLeft += data.pixelX / 5;
}
};
const shouldUpdateHeight = vue.computed(() => {
return (
props.height ||
props.maxHeight ||
store.states.fixedColumns.value.length > 0 ||
store.states.rightFixedColumns.value.length > 0
);
});
const doLayout = () => {
if (shouldUpdateHeight.value) {
layout.updateElsHeight();
}
layout.updateColumnsWidth();
syncPostion();
};
vue.onMounted(() =>
__async$3(this, null, function* () {
setScrollClass("is-scrolling-left");
store.updateColumns();
yield vue.nextTick();
bindEvents();
doLayout();
resizeState.value = {
width: table.vnode.el.offsetWidth,
height: table.vnode.el.offsetHeight,
};
store.states.columns.value.forEach((column) => {
if (column.filteredValue && column.filteredValue.length) {
table.store.commit("filterChange", {
column,
values: column.filteredValue,
silent: true,
});
}
});
table.$ready = true;
})
);
const setScrollClassByEl = (el, className) => {
if (!el) return;
const classList = Array.from(el.classList).filter(
(item) => !item.startsWith("is-scrolling-")
);
classList.push(layout.scrollX.value ? className : "is-scrolling-none");
el.className = classList.join(" ");
};
const setScrollClass = (className) => {
const { bodyWrapper } = table.refs;
setScrollClassByEl(bodyWrapper, className);
};
const syncPostion = throttle_1(function () {
if (!table.refs.bodyWrapper) return;
const { scrollLeft, scrollTop, offsetWidth, scrollWidth } =
table.refs.bodyWrapper;
const {
headerWrapper,
footerWrapper,
fixedBodyWrapper,
rightFixedBodyWrapper,
} = table.refs;
if (headerWrapper) headerWrapper.scrollLeft = scrollLeft;
if (footerWrapper) footerWrapper.scrollLeft = scrollLeft;
if (fixedBodyWrapper) fixedBodyWrapper.scrollTop = scrollTop;
if (rightFixedBodyWrapper) rightFixedBodyWrapper.scrollTop = scrollTop;
const maxScrollLeftPosition = scrollWidth - offsetWidth - 1;
if (scrollLeft >= maxScrollLeftPosition) {
setScrollClass("is-scrolling-right");
} else if (scrollLeft === 0) {
setScrollClass("is-scrolling-left");
} else {
setScrollClass("is-scrolling-middle");
}
}, 10);
const bindEvents = () => {
table.refs.bodyWrapper.addEventListener("scroll", syncPostion, {
passive: true,
});
if (props.fit) {
addResizeListener(table.vnode.el, resizeListener);
} else {
on(window, "resize", doLayout);
}
};
vue.onUnmounted(() => {
unbindEvents();
});
const unbindEvents = () => {
var _a;
(_a = table.refs.bodyWrapper) == null
? void 0
: _a.removeEventListener("scroll", syncPostion, true);
if (props.fit) {
removeResizeListener(table.vnode.el, resizeListener);
} else {
off(window, "resize", doLayout);
}
};
const resizeListener = () => {
if (!table.$ready) return;
let shouldUpdateLayout = false;
const el = table.vnode.el;
const { width: oldWidth, height: oldHeight } = resizeState.value;
const width = el.offsetWidth;
if (oldWidth !== width) {
shouldUpdateLayout = true;
}
const height = el.offsetHeight;
if ((props.height || shouldUpdateHeight.value) && oldHeight !== height) {
shouldUpdateLayout = true;
}
if (shouldUpdateLayout) {
resizeState.value = {
width,
height,
};
doLayout();
}
};
const tableSize = vue.computed(() => {
return props.size || $ELEMENT.size;
});
const bodyWidth = vue.computed(() => {
const { bodyWidth: bodyWidth_, scrollY, gutterWidth } = layout;
return bodyWidth_.value
? `${bodyWidth_.value - (scrollY.value ? gutterWidth : 0)}px`
: "";
});
const bodyHeight = vue.computed(() => {
const headerHeight = layout.headerHeight.value || 0;
const bodyHeight2 = layout.bodyHeight.value;
const footerHeight = layout.footerHeight.value || 0;
if (props.height) {
return {
height: bodyHeight2 ? `${bodyHeight2}px` : "",
};
} else if (props.maxHeight) {
const maxHeight = parseHeight(props.maxHeight);
if (typeof maxHeight === "number") {
return {
"max-height": `${
maxHeight - footerHeight - (props.showHeader ? headerHeight : 0)
}px`,
};
}
}
return {};
});
const emptyBlockStyle = vue.computed(() => {
if (props.data && props.data.length) return null;
let height = "100%";
if (layout.appendHeight.value) {
height = `calc(100% - ${layout.appendHeight.value}px)`;
}
return {
width: bodyWidth.value,
height,
};
});
const handleFixedMousewheel = (event, data) => {
const bodyWrapper = table.refs.bodyWrapper;
if (Math.abs(data.spinY) > 0) {
const currentScrollTop = bodyWrapper.scrollTop;
if (data.pixelY < 0 && currentScrollTop !== 0) {
event.preventDefault();
}
if (
data.pixelY > 0 &&
bodyWrapper.scrollHeight - bodyWrapper.clientHeight > currentScrollTop
) {
event.preventDefault();
}
bodyWrapper.scrollTop += Math.ceil(data.pixelY / 5);
} else {
bodyWrapper.scrollLeft += Math.ceil(data.pixelX / 5);
}
};
const fixedHeight = vue.computed(() => {
if (props.maxHeight) {
if (props.showSummary) {
return {
bottom: 0,
};
}
return {
bottom:
layout.scrollX.value && props.data.length
? `${layout.gutterWidth}px`
: "",
};
} else {
if (props.showSummary) {
return {
height: layout.tableHeight.value
? `${layout.tableHeight.value}px`
: "",
};
}
return {
height: layout.viewportHeight.value
? `${layout.viewportHeight.value}px`
: "",
};
}
});
const fixedBodyHeight = vue.computed(() => {
if (props.height) {
return {
height: layout.fixedBodyHeight.value
? `${layout.fixedBodyHeight.value}px`
: "",
};
} else if (props.maxHeight) {
let maxHeight = parseHeight(props.maxHeight);
if (typeof maxHeight === "number") {
maxHeight = layout.scrollX.value
? maxHeight - layout.gutterWidth
: maxHeight;
if (props.showHeader) {
maxHeight -= layout.headerHeight.value;
}
maxHeight -= layout.footerHeight.value;
return {
"max-height": `${maxHeight}px`,
};
}
}
return {};
});
return {
isHidden,
renderExpanded,
setDragVisible,
isGroup,
handleMouseLeave,
handleHeaderFooterMousewheel,
tableSize,
bodyHeight,
emptyBlockStyle,
handleFixedMousewheel,
fixedHeight,
fixedBodyHeight,
resizeProxyVisible,
bodyWidth,
resizeState,
doLayout,
};
}
var defaultProps$1 = {
data: {
type: Array,
default: () => {
return [];
},
},
size: String,
width: [String, Number],
height: [String, Number],
maxHeight: [String, Number],
fit: {
type: Boolean,
default: true,
},
stripe: Boolean,
border: Boolean,
rowKey: [String, Function],
showHeader: {
type: Boolean,
default: true,
},
showSummary: Boolean,
sumText: String,
summaryMethod: Function,
rowClassName: [String, Function],
rowStyle: [Object, Function],
cellClassName: [String, Function],
cellStyle: [Object, Function],
headerRowClassName: [String, Function],
headerRowStyle: [Object, Function],
headerCellClassName: [String, Function],
headerCellStyle: [Object, Function],
highlightCurrentRow: Boolean,
currentRowKey: [String, Number],
emptyText: String,
expandRowKeys: Array,
defaultExpandAll: Boolean,
defaultSort: Object,
tooltipEffect: String,
spanMethod: Function,
selectOnIndeterminate: {
type: Boolean,
default: true,
},
indent: {
type: Number,
default: 16,
},
treeProps: {
type: Object,
default: () => {
return {
hasChildren: "hasChildren",
children: "children",
};
},
},
lazy: Boolean,
load: Function,
style: {
type: Object,
default: () => ({}),
},
className: {
type: String,
default: "",
},
};
let tableIdSeed = 1;
var script$i = vue.defineComponent({
name: "ElTable",
directives: {
Mousewheel,
},
components: {
TableHeader,
TableBody,
TableFooter,
},
props: defaultProps$1,
emits: [
"select",
"select-all",
"selection-change",
"cell-mouse-enter",
"cell-mouse-leave",
"cell-contextmenu",
"cell-click",
"cell-dblclick",
"row-click",
"row-contextmenu",
"row-dblclick",
"header-click",
"header-contextmenu",
"sort-change",
"filter-change",
"current-change",
"header-dragend",
"expand-change",
],
setup(props) {
const { t } = useLocaleInject();
const table = vue.getCurrentInstance();
const store = createStore(table, props);
table.store = store;
const layout = new TableLayout$1({
store: table.store,
table,
fit: props.fit,
showHeader: props.showHeader,
});
table.layout = layout;
const isEmpty = vue.computed(
() => (store.states.data.value || []).length === 0
);
const {
setCurrentRow,
toggleRowSelection,
clearSelection,
clearFilter,
toggleAllSelection,
toggleRowExpansion,
clearSort,
sort,
} = useUtils(store);
const {
isHidden,
renderExpanded,
setDragVisible,
isGroup,
handleMouseLeave,
handleHeaderFooterMousewheel,
tableSize,
bodyHeight,
emptyBlockStyle,
handleFixedMousewheel,
fixedHeight,
fixedBodyHeight,
resizeProxyVisible,
bodyWidth,
resizeState,
doLayout,
} = useStyle(props, layout, store, table);
const debouncedUpdateLayout = debounce_1(doLayout, 50);
const tableId = `el-table_${tableIdSeed++}`;
table.tableId = tableId;
table.state = {
isGroup,
resizeState,
doLayout,
debouncedUpdateLayout,
};
return {
layout,
store,
handleHeaderFooterMousewheel,
handleMouseLeave,
tableId,
tableSize,
isHidden,
isEmpty,
renderExpanded,
resizeProxyVisible,
resizeState,
isGroup,
bodyWidth,
bodyHeight,
emptyBlockStyle,
debouncedUpdateLayout,
handleFixedMousewheel,
fixedHeight,
fixedBodyHeight,
setCurrentRow,
toggleRowSelection,
clearSelection,
clearFilter,
toggleAllSelection,
toggleRowExpansion,
clearSort,
doLayout,
sort,
t,
setDragVisible,
context: table,
};
},
});
const _hoisted_1$b = {
ref: "hiddenColumns",
class: "hidden-columns",
};
const _hoisted_2$9 = {
key: 0,
ref: "headerWrapper",
class: "el-table__header-wrapper",
};
const _hoisted_3$9 = { class: "el-table__empty-text" };
const _hoisted_4$5 = {
key: 1,
ref: "appendWrapper",
class: "el-table__append-wrapper",
};
const _hoisted_5$4 = {
key: 1,
ref: "footerWrapper",
class: "el-table__footer-wrapper",
};
const _hoisted_6$4 = {
key: 0,
ref: "fixedHeaderWrapper",
class: "el-table__fixed-header-wrapper",
};
const _hoisted_7$2 = {
key: 1,
ref: "fixedFooterWrapper",
class: "el-table__fixed-footer-wrapper",
};
const _hoisted_8$2 = {
key: 0,
ref: "rightFixedHeaderWrapper",
class: "el-table__fixed-header-wrapper",
};
const _hoisted_9$2 = {
key: 1,
ref: "rightFixedFooterWrapper",
class: "el-table__fixed-footer-wrapper",
};
const _hoisted_10$2 = {
ref: "resizeProxy",
class: "el-table__column-resize-proxy",
};
function render$e(_ctx, _cache, $props, $setup, $data, $options) {
const _component_table_header = vue.resolveComponent("table-header");
const _component_table_body = vue.resolveComponent("table-body");
const _component_table_footer = vue.resolveComponent("table-footer");
const _directive_mousewheel = vue.resolveDirective("mousewheel");
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
class: vue.normalizeClass([
{
"el-table--fit": _ctx.fit,
"el-table--striped": _ctx.stripe,
"el-table--border": _ctx.border || _ctx.isGroup,
"el-table--hidden": _ctx.isHidden,
"el-table--group": _ctx.isGroup,
"el-table--fluid-height": _ctx.maxHeight,
"el-table--scrollable-x": _ctx.layout.scrollX.value,
"el-table--scrollable-y": _ctx.layout.scrollY.value,
"el-table--enable-row-hover": !_ctx.store.states.isComplex.value,
"el-table--enable-row-transition":
(_ctx.store.states.data.value || []).length !== 0 &&
(_ctx.store.states.data.value || []).length < 100,
},
_ctx.tableSize ? `el-table--${_ctx.tableSize}` : "",
_ctx.className,
"el-table",
]),
style: vue.normalizeStyle(_ctx.style),
onMouseleave:
_cache[0] || (_cache[0] = ($event) => _ctx.handleMouseLeave()),
},
[
vue.createElementVNode(
"div",
_hoisted_1$b,
[vue.renderSlot(_ctx.$slots, "default")],
512
),
_ctx.showHeader
? vue.withDirectives(
(vue.openBlock(),
vue.createElementBlock(
"div",
_hoisted_2$9,
[
vue.createVNode(
_component_table_header,
{
ref: "tableHeader",
border: _ctx.border,
"default-sort": _ctx.defaultSort,
store: _ctx.store,
style: vue.normalizeStyle({
width: _ctx.layout.bodyWidth.value
? _ctx.layout.bodyWidth.value + "px"
: "",
}),
onSetDragVisible: _ctx.setDragVisible,
},
null,
8,
[
"border",
"default-sort",
"store",
"style",
"onSetDragVisible",
]
),
],
512
)),
[[_directive_mousewheel, _ctx.handleHeaderFooterMousewheel]]
)
: vue.createCommentVNode("v-if", true),
vue.createElementVNode(
"div",
{
ref: "bodyWrapper",
style: vue.normalizeStyle([_ctx.bodyHeight]),
class: "el-table__body-wrapper",
},
[
vue.createVNode(
_component_table_body,
{
context: _ctx.context,
highlight: _ctx.highlightCurrentRow,
"row-class-name": _ctx.rowClassName,
"tooltip-effect": _ctx.tooltipEffect,
"row-style": _ctx.rowStyle,
store: _ctx.store,
stripe: _ctx.stripe,
style: vue.normalizeStyle({
width: _ctx.bodyWidth,
}),
},
null,
8,
[
"context",
"highlight",
"row-class-name",
"tooltip-effect",
"row-style",
"store",
"stripe",
"style",
]
),
_ctx.isEmpty
? (vue.openBlock(),
vue.createElementBlock(
"div",
{
key: 0,
ref: "emptyBlock",
style: vue.normalizeStyle(_ctx.emptyBlockStyle),
class: "el-table__empty-block",
},
[
vue.createElementVNode("span", _hoisted_3$9, [
vue.renderSlot(_ctx.$slots, "empty", {}, () => [
vue.createTextVNode(
vue.toDisplayString(
_ctx.emptyText || _ctx.t("el.table.emptyText")
),
1
),
]),
]),
],
4
))
: vue.createCommentVNode("v-if", true),
_ctx.$slots.append
? (vue.openBlock(),
vue.createElementBlock(
"div",
_hoisted_4$5,
[vue.renderSlot(_ctx.$slots, "append")],
512
))
: vue.createCommentVNode("v-if", true),
],
4
),
_ctx.showSummary
? vue.withDirectives(
(vue.openBlock(),
vue.createElementBlock(
"div",
_hoisted_5$4,
[
vue.createVNode(
_component_table_footer,
{
border: _ctx.border,
"default-sort": _ctx.defaultSort,
store: _ctx.store,
style: vue.normalizeStyle({
width: _ctx.layout.bodyWidth.value
? _ctx.layout.bodyWidth.value + "px"
: "",
}),
"sum-text": _ctx.sumText || _ctx.t("el.table.sumText"),
"summary-method": _ctx.summaryMethod,
},
null,
8,
[
"border",
"default-sort",
"store",
"style",
"sum-text",
"summary-method",
]
),
],
512
)),
[
[vue.vShow, !_ctx.isEmpty],
[_directive_mousewheel, _ctx.handleHeaderFooterMousewheel],
]
)
: vue.createCommentVNode("v-if", true),
_ctx.store.states.fixedColumns.value.length > 0
? vue.withDirectives(
(vue.openBlock(),
vue.createElementBlock(
"div",
{
key: 2,
ref: "fixedWrapper",
style: vue.normalizeStyle([
{
width: _ctx.layout.fixedWidth.value
? _ctx.layout.fixedWidth.value + "px"
: "",
},
_ctx.fixedHeight,
]),
class: "el-table__fixed",
},
[
_ctx.showHeader
? (vue.openBlock(),
vue.createElementBlock(
"div",
_hoisted_6$4,
[
vue.createVNode(
_component_table_header,
{
ref: "fixedTableHeader",
border: _ctx.border,
store: _ctx.store,
style: vue.normalizeStyle({
width: _ctx.bodyWidth,
}),
fixed: "left",
onSetDragVisible: _ctx.setDragVisible,
},
null,
8,
["border", "store", "style", "onSetDragVisible"]
),
],
512
))
: vue.createCommentVNode("v-if", true),
vue.createElementVNode(
"div",
{
ref: "fixedBodyWrapper",
style: vue.normalizeStyle([
{
top: _ctx.layout.headerHeight.value + "px",
},
_ctx.fixedBodyHeight,
]),
class: "el-table__fixed-body-wrapper",
},
[
vue.createVNode(
_component_table_body,
{
highlight: _ctx.highlightCurrentRow,
"row-class-name": _ctx.rowClassName,
"tooltip-effect": _ctx.tooltipEffect,
"row-style": _ctx.rowStyle,
store: _ctx.store,
stripe: _ctx.stripe,
style: vue.normalizeStyle({
width: _ctx.bodyWidth,
}),
fixed: "left",
},
null,
8,
[
"highlight",
"row-class-name",
"tooltip-effect",
"row-style",
"store",
"stripe",
"style",
]
),
_ctx.$slots.append
? (vue.openBlock(),
vue.createElementBlock(
"div",
{
key: 0,
style: vue.normalizeStyle({
height: _ctx.layout.appendHeight.value + "px",
}),
class: "el-table__append-gutter",
},
null,
4
))
: vue.createCommentVNode("v-if", true),
],
4
),
_ctx.showSummary
? vue.withDirectives(
(vue.openBlock(),
vue.createElementBlock(
"div",
_hoisted_7$2,
[
vue.createVNode(
_component_table_footer,
{
border: _ctx.border,
store: _ctx.store,
style: vue.normalizeStyle({
width: _ctx.bodyWidth,
}),
"sum-text":
_ctx.sumText || _ctx.t("el.table.sumText"),
"summary-method": _ctx.summaryMethod,
fixed: "left",
},
null,
8,
[
"border",
"store",
"style",
"sum-text",
"summary-method",
]
),
],
512
)),
[[vue.vShow, !_ctx.isEmpty]]
)
: vue.createCommentVNode("v-if", true),
],
4
)),
[[_directive_mousewheel, _ctx.handleFixedMousewheel]]
)
: vue.createCommentVNode("v-if", true),
_ctx.store.states.rightFixedColumns.value.length > 0
? vue.withDirectives(
(vue.openBlock(),
vue.createElementBlock(
"div",
{
key: 3,
ref: "rightFixedWrapper",
style: vue.normalizeStyle([
{
width: _ctx.layout.rightFixedWidth.value
? _ctx.layout.rightFixedWidth.value + "px"
: "",
right: _ctx.layout.scrollY.value
? (_ctx.border
? _ctx.layout.gutterWidth
: _ctx.layout.gutterWidth || 0) + "px"
: "",
},
_ctx.fixedHeight,
]),
class: "el-table__fixed-right",
},
[
_ctx.showHeader
? (vue.openBlock(),
vue.createElementBlock(
"div",
_hoisted_8$2,
[
vue.createVNode(
_component_table_header,
{
ref: "rightFixedTableHeader",
border: _ctx.border,
store: _ctx.store,
style: vue.normalizeStyle({
width: _ctx.bodyWidth,
}),
fixed: "right",
onSetDragVisible: _ctx.setDragVisible,
},
null,
8,
["border", "store", "style", "onSetDragVisible"]
),
],
512
))
: vue.createCommentVNode("v-if", true),
vue.createElementVNode(
"div",
{
ref: "rightFixedBodyWrapper",
style: vue.normalizeStyle([
{ top: _ctx.layout.headerHeight.value + "px" },
_ctx.fixedBodyHeight,
]),
class: "el-table__fixed-body-wrapper",
},
[
vue.createVNode(
_component_table_body,
{
highlight: _ctx.highlightCurrentRow,
"row-class-name": _ctx.rowClassName,
"tooltip-effect": _ctx.tooltipEffect,
"row-style": _ctx.rowStyle,
store: _ctx.store,
stripe: _ctx.stripe,
style: vue.normalizeStyle({
width: _ctx.bodyWidth,
}),
fixed: "right",
},
null,
8,
[
"highlight",
"row-class-name",
"tooltip-effect",
"row-style",
"store",
"stripe",
"style",
]
),
_ctx.$slots.append
? (vue.openBlock(),
vue.createElementBlock(
"div",
{
key: 0,
style: vue.normalizeStyle({
height: _ctx.layout.appendHeight.value + "px",
}),
class: "el-table__append-gutter",
},
null,
4
))
: vue.createCommentVNode("v-if", true),
],
4
),
_ctx.showSummary
? vue.withDirectives(
(vue.openBlock(),
vue.createElementBlock(
"div",
_hoisted_9$2,
[
vue.createVNode(
_component_table_footer,
{
border: _ctx.border,
store: _ctx.store,
style: vue.normalizeStyle({
width: _ctx.bodyWidth,
}),
"sum-text":
_ctx.sumText || _ctx.t("el.table.sumText"),
"summary-method": _ctx.summaryMethod,
fixed: "right",
},
null,
8,
[
"border",
"store",
"style",
"sum-text",
"summary-method",
]
),
],
512
)),
[[vue.vShow, !_ctx.isEmpty]]
)
: vue.createCommentVNode("v-if", true),
],
4
)),
[[_directive_mousewheel, _ctx.handleFixedMousewheel]]
)
: vue.createCommentVNode("v-if", true),
_ctx.store.states.rightFixedColumns.value.length > 0
? (vue.openBlock(),
vue.createElementBlock(
"div",
{
key: 4,
ref: "rightFixedPatch",
style: vue.normalizeStyle({
width: _ctx.layout.scrollY.value
? _ctx.layout.gutterWidth + "px"
: "0",
height: _ctx.layout.headerHeight.value + "px",
}),
class: "el-table__fixed-right-patch",
},
null,
4
))
: vue.createCommentVNode("v-if", true),
vue.withDirectives(
vue.createElementVNode("div", _hoisted_10$2, null, 512),
[[vue.vShow, _ctx.resizeProxyVisible]]
),
],
38
)
);
}
script$i.render = render$e;
script$i.__file = "packages/components/table/src/table.vue";
const cellStarts = {
default: {
order: "",
},
selection: {
width: 48,
minWidth: 48,
realWidth: 48,
order: "",
className: "el-table-column--selection",
},
expand: {
width: 48,
minWidth: 48,
realWidth: 48,
order: "",
},
index: {
width: 48,
minWidth: 48,
realWidth: 48,
order: "",
},
};
const cellForced = {
selection: {
renderHeader({ store }) {
function isDisabled() {
return (
store.states.data.value && store.states.data.value.length === 0
);
}
return vue.h(ElCheckbox, {
disabled: isDisabled(),
indeterminate:
store.states.selection.value.length > 0 &&
!store.states.isAllSelected.value,
"onUpdate:modelValue": store.toggleAllSelection,
modelValue: store.states.isAllSelected.value,
});
},
renderCell({ row, column, store, $index }) {
return vue.h(ElCheckbox, {
disabled: column.selectable
? !column.selectable.call(null, row, $index)
: false,
onChange: () => {
store.commit("rowSelectedChanged", row);
},
onClick: (event) => event.stopPropagation(),
modelValue: store.isSelected(row),
});
},
sortable: false,
resizable: false,
},
index: {
renderHeader({ column }) {
return column.label || "#";
},
renderCell({ column, $index }) {
let i = $index + 1;
const index = column.index;
if (typeof index === "number") {
i = $index + index;
} else if (typeof index === "function") {
i = index($index);
}
return vue.h("div", {}, [i]);
},
sortable: false,
},
expand: {
renderHeader({ column }) {
return column.label || "";
},
renderCell({ row, store }) {
const classes = ["el-table__expand-icon"];
if (store.states.expandRows.value.indexOf(row) > -1) {
classes.push("el-table__expand-icon--expanded");
}
const callback = function (e) {
e.stopPropagation();
store.toggleRowExpansion(row);
};
return vue.h(
"div",
{
class: classes,
onClick: callback,
},
[
vue.h("i", {
class: "el-icon el-icon-arrow-right",
}),
]
);
},
sortable: false,
resizable: false,
className: "el-table__expand-column",
},
};
function defaultRenderCell({ row, column, $index }) {
var _a;
const property = column.property;
const value = property && getPropByPath(row, property, false).v;
if (column && column.formatter) {
return column.formatter(row, column, value, $index);
}
return (
((_a = value == null ? void 0 : value.toString) == null
? void 0
: _a.call(value)) || ""
);
}
function treeCellPrefix({ row, treeNode, store }) {
if (!treeNode) return null;
const ele = [];
const callback = function (e) {
e.stopPropagation();
store.loadOrToggle(row);
};
if (treeNode.indent) {
ele.push(
vue.h("span", {
class: "el-table__indent",
style: { "padding-left": `${treeNode.indent}px` },
})
);
}
if (typeof treeNode.expanded === "boolean" && !treeNode.noLazyChildren) {
const expandClasses = [
"el-table__expand-icon",
treeNode.expanded ? "el-table__expand-icon--expanded" : "",
];
let iconClasses = ["el-icon-arrow-right"];
if (treeNode.loading) {
iconClasses = ["el-icon-loading"];
}
ele.push(
vue.h(
"div",
{
class: expandClasses,
onClick: callback,
},
[
vue.h("i", {
class: iconClasses,
}),
]
)
);
} else {
ele.push(
vue.h("span", {
class: "el-table__placeholder",
})
);
}
return ele;
}
function useWatcher(owner, props_) {
const instance = vue.getCurrentInstance();
const registerComplexWatchers = () => {
const props = ["fixed"];
const aliases = {
realWidth: "width",
realMinWidth: "minWidth",
};
const allAliases = props.reduce((prev, cur) => {
prev[cur] = cur;
return prev;
}, aliases);
Object.keys(allAliases).forEach((key) => {
const columnKey = aliases[key];
if (hasOwn(props_, columnKey)) {
vue.watch(
() => props_[columnKey],
(newVal) => {
let value = newVal;
if (columnKey === "width" && key === "realWidth") {
value = parseWidth(newVal);
}
if (columnKey === "minWidth" && key === "realMinWidth") {
value = parseMinWidth(newVal);
}
instance.columnConfig.value[columnKey] = value;
instance.columnConfig.value[key] = value;
const updateColumns = columnKey === "fixed";
owner.value.store.scheduleLayout(updateColumns);
}
);
}
});
};
const registerNormalWatchers = () => {
const props = [
"label",
"filters",
"filterMultiple",
"sortable",
"index",
"formatter",
"className",
"labelClassName",
"showOverflowTooltip",
];
const aliases = {
property: "prop",
align: "realAlign",
headerAlign: "realHeaderAlign",
};
const allAliases = props.reduce((prev, cur) => {
prev[cur] = cur;
return prev;
}, aliases);
Object.keys(allAliases).forEach((key) => {
const columnKey = aliases[key];
if (hasOwn(props_, columnKey)) {
vue.watch(
() => props_[columnKey],
(newVal) => {
instance.columnConfig.value[key] = newVal;
}
);
}
});
};
return {
registerComplexWatchers,
registerNormalWatchers,
};
}
function useRender(props, slots, owner) {
const instance = vue.getCurrentInstance();
const columnId = vue.ref("");
const isSubColumn = vue.ref(false);
const realAlign = vue.ref();
const realHeaderAlign = vue.ref();
vue.watchEffect(() => {
realAlign.value = props.align ? `is-${props.align}` : null;
realAlign.value;
});
vue.watchEffect(() => {
realHeaderAlign.value = props.headerAlign
? `is-${props.headerAlign}`
: realAlign.value;
realHeaderAlign.value;
});
const columnOrTableParent = vue.computed(() => {
let parent = instance.vnode.vParent || instance.parent;
while (parent && !parent.tableId && !parent.columnId) {
parent = parent.vnode.vParent || parent.parent;
}
return parent;
});
const realWidth = vue.ref(parseWidth(props.width));
const realMinWidth = vue.ref(parseMinWidth(props.minWidth));
const setColumnWidth = (column) => {
if (realWidth.value) column.width = realWidth.value;
if (realMinWidth.value) {
column.minWidth = realMinWidth.value;
}
if (!column.minWidth) {
column.minWidth = 80;
}
column.realWidth = Number(
column.width === void 0 ? column.minWidth : column.width
);
return column;
};
const setColumnForcedProps = (column) => {
const type = column.type;
const source = cellForced[type] || {};
Object.keys(source).forEach((prop) => {
const value = source[prop];
if (value !== void 0) {
column[prop] =
prop === "className" ? `${column[prop]} ${value}` : value;
}
});
return column;
};
const checkSubColumn = (children) => {
if (children instanceof Array) {
children.forEach((child) => check(child));
} else {
check(children);
}
function check(item) {
var _a;
if (
((_a = item == null ? void 0 : item.type) == null
? void 0
: _a.name) === "ElTableColumn"
) {
item.vParent = instance;
}
}
};
const setColumnRenders = (column) => {
if (props.renderHeader);
else if (column.type !== "selection") {
column.renderHeader = (scope) => {
instance.columnConfig.value["label"];
const renderHeader = slots.header;
return renderHeader ? renderHeader(scope) : column.label;
};
}
let originRenderCell = column.renderCell;
if (column.type === "expand") {
column.renderCell = (data) =>
vue.h(
"div",
{
class: "cell",
},
[originRenderCell(data)]
);
owner.value.renderExpanded = (data) => {
return slots.default ? slots.default(data) : slots.default;
};
} else {
originRenderCell = originRenderCell || defaultRenderCell;
column.renderCell = (data) => {
let children = null;
if (slots.default) {
children = slots.default(data);
} else {
children = originRenderCell(data);
}
const prefix = treeCellPrefix(data);
const props2 = {
class: "cell",
style: {},
};
if (column.showOverflowTooltip) {
props2.class += " el-tooltip";
props2.style = {
width: `${
(data.column.realWidth || Number(data.column.width)) - 1
}px`,
};
}
checkSubColumn(children);
return vue.h("div", props2, [prefix, children]);
};
}
return column;
};
const getPropsData = (...propsKey) => {
return propsKey.reduce((prev, cur) => {
if (Array.isArray(cur)) {
cur.forEach((key) => {
prev[key] = props[key];
});
}
return prev;
}, {});
};
const getColumnElIndex = (children, child) => {
return [].indexOf.call(children, child);
};
return {
columnId,
realAlign,
isSubColumn,
realHeaderAlign,
columnOrTableParent,
setColumnWidth,
setColumnForcedProps,
setColumnRenders,
getPropsData,
getColumnElIndex,
};
}
var defaultProps = {
type: {
type: String,
default: "default",
},
label: String,
className: String,
labelClassName: String,
property: String,
prop: String,
width: {
type: [String, Number],
default: "",
},
minWidth: {
type: [String, Number],
default: "",
},
renderHeader: Function,
sortable: {
type: [Boolean, String],
default: false,
},
sortMethod: Function,
sortBy: [String, Function, Array],
resizable: {
type: Boolean,
default: true,
},
columnKey: String,
align: String,
headerAlign: String,
showTooltipWhenOverflow: Boolean,
showOverflowTooltip: Boolean,
fixed: [Boolean, String],
formatter: Function,
selectable: Function,
reserveSelection: Boolean,
filterMethod: Function,
filteredValue: Array,
filters: Array,
filterPlacement: String,
filterMultiple: {
type: Boolean,
default: true,
},
index: [Number, Function],
sortOrders: {
type: Array,
default: () => {
return ["ascending", "descending", null];
},
validator: (val) => {
return val.every(
(order) => ["ascending", "descending", null].indexOf(order) > -1
);
},
},
};
var __defProp$7 = Object.defineProperty;
var __defProps$6 = Object.defineProperties;
var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
var __defNormalProp$7 = (obj, key, value) =>
key in obj
? __defProp$7(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$7 = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$7.call(b, prop)) __defNormalProp$7(a, prop, b[prop]);
if (__getOwnPropSymbols$7)
for (var prop of __getOwnPropSymbols$7(b)) {
if (__propIsEnum$7.call(b, prop)) __defNormalProp$7(a, prop, b[prop]);
}
return a;
};
var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
let columnIdSeed = 1;
var ElTableColumn$1 = vue.defineComponent({
name: "ElTableColumn",
components: {
ElCheckbox,
},
props: defaultProps,
setup(props, { slots }) {
const instance = vue.getCurrentInstance();
const columnConfig = vue.ref({});
const owner = vue.computed(() => {
let parent2 = instance.parent;
while (parent2 && !parent2.tableId) {
parent2 = parent2.parent;
}
return parent2;
});
const { registerNormalWatchers, registerComplexWatchers } = useWatcher(
owner,
props
);
const {
columnId,
isSubColumn,
realHeaderAlign,
columnOrTableParent,
setColumnWidth,
setColumnForcedProps,
setColumnRenders,
getPropsData,
getColumnElIndex,
realAlign,
} = useRender(props, slots, owner);
const parent = columnOrTableParent.value;
columnId.value = `${
parent.tableId || parent.columnId
}_column_${columnIdSeed++}`;
vue.onBeforeMount(() => {
isSubColumn.value = owner.value !== parent;
const type = props.type || "default";
const sortable = props.sortable === "" ? true : props.sortable;
const defaults = __spreadProps$6(
__spreadValues$7({}, cellStarts[type]),
{
id: columnId.value,
type,
property: props.prop || props.property,
align: realAlign,
headerAlign: realHeaderAlign,
showOverflowTooltip:
props.showOverflowTooltip || props.showTooltipWhenOverflow,
filterable: props.filters || props.filterMethod,
filteredValue: [],
filterPlacement: "",
isColumnGroup: false,
filterOpened: false,
sortable,
index: props.index,
rawColumnKey: instance.vnode.key,
}
);
const basicProps = [
"columnKey",
"label",
"className",
"labelClassName",
"type",
"renderHeader",
"formatter",
"fixed",
"resizable",
];
const sortProps = ["sortMethod", "sortBy", "sortOrders"];
const selectProps = ["selectable", "reserveSelection"];
const filterProps = [
"filterMethod",
"filters",
"filterMultiple",
"filterOpened",
"filteredValue",
"filterPlacement",
];
let column = getPropsData(
basicProps,
sortProps,
selectProps,
filterProps
);
column = mergeOptions(defaults, column);
const chains = compose(
setColumnRenders,
setColumnWidth,
setColumnForcedProps
);
column = chains(column);
columnConfig.value = column;
registerNormalWatchers();
registerComplexWatchers();
});
vue.onMounted(() => {
var _a;
const parent2 = columnOrTableParent.value;
const children = isSubColumn.value
? parent2.vnode.el.children
: (_a = parent2.refs.hiddenColumns) == null
? void 0
: _a.children;
const getColumnIndex = () =>
getColumnElIndex(children || [], instance.vnode.el);
columnConfig.value.getColumnIndex = getColumnIndex;
const columnIndex = getColumnIndex();
columnIndex > -1 &&
owner.value.store.commit(
"insertColumn",
columnConfig.value,
isSubColumn.value ? parent2.columnConfig.value : null
);
});
vue.onBeforeUnmount(() => {
owner.value.store.commit(
"removeColumn",
columnConfig.value,
isSubColumn.value ? parent.columnConfig.value : null
);
});
instance.columnId = columnId.value;
instance.columnConfig = columnConfig;
return;
},
render() {
var _a, _b, _c;
let children = [];
try {
const renderDefault =
(_b = (_a = this.$slots).default) == null
? void 0
: _b.call(_a, {
row: {},
column: {},
$index: -1,
});
if (renderDefault instanceof Array) {
for (const childNode of renderDefault) {
if (
((_c = childNode.type) == null ? void 0 : _c.name) ===
"ElTableColumn"
) {
children.push(childNode);
} else if (
childNode.type === vue.Fragment &&
childNode.children instanceof Array
) {
children.push(...childNode.children);
}
}
}
} catch (e) {
children = [];
}
return vue.h("div", children);
},
});
const ElTable = withInstall(script$i, {
TableColumn: ElTableColumn$1,
});
const ElTableColumn = withNoopInstall(ElTableColumn$1);
var script$h = vue.defineComponent({
name: "ElTabBar",
directives: {
Resize,
},
props: {
tabs: {
type: Array,
default: () => [],
},
},
setup(props) {
const rootTabs = vue.inject("rootTabs");
if (!rootTabs) {
throw new Error(`ElTabBar must use with ElTabs`);
}
const instance = vue.getCurrentInstance();
const getBarStyle = () => {
const style = {};
let offset = 0;
let tabSize = 0;
const sizeName = ["top", "bottom"].includes(rootTabs.props.tabPosition)
? "width"
: "height";
const sizeDir = sizeName === "width" ? "x" : "y";
props.tabs.every((tab) => {
var _a;
const $el =
(_a = instance.parent.refs) == null
? void 0
: _a[`tab-${tab.paneName}`];
if (!$el) {
return false;
}
if (!tab.active) {
return true;
} else {
tabSize = $el[`client${capitalize(sizeName)}`];
const position = sizeDir === "x" ? "left" : "top";
offset =
$el.getBoundingClientRect()[position] -
$el.parentElement.getBoundingClientRect()[position];
const tabStyles = window.getComputedStyle($el);
if (sizeName === "width") {
if (props.tabs.length > 1) {
tabSize -=
parseFloat(tabStyles.paddingLeft) +
parseFloat(tabStyles.paddingRight);
}
offset += parseFloat(tabStyles.paddingLeft);
}
return false;
}
});
const transform = `translate${capitalize(sizeDir)}(${offset}px)`;
style[sizeName] = `${tabSize}px`;
style.transform = transform;
style.msTransform = transform;
style.webkitTransform = transform;
return style;
};
const barStyle = vue.ref(getBarStyle());
const update = () => {
barStyle.value = getBarStyle();
};
vue.watch(
() => props.tabs,
() => {
vue.nextTick(() => {
update();
});
}
);
return {
rootTabs,
barStyle,
update,
};
},
});
function render$d(_ctx, _cache, $props, $setup, $data, $options) {
const _directive_resize = vue.resolveDirective("resize");
return vue.withDirectives(
(vue.openBlock(),
vue.createElementBlock(
"div",
{
class: vue.normalizeClass([
"el-tabs__active-bar",
`is-${_ctx.rootTabs.props.tabPosition}`,
]),
style: vue.normalizeStyle(_ctx.barStyle),
},
null,
6
)),
[[_directive_resize, _ctx.update]]
);
}
script$h.render = render$d;
script$h.__file = "packages/components/tabs/src/tab-bar.vue";
var script$g = vue.defineComponent({
name: "ElTabNav",
components: {
TabBar: script$h,
},
props: {
panes: {
type: Array,
default: () => [],
},
currentName: {
type: String,
default: "",
},
editable: Boolean,
onTabClick: {
type: Function,
default: NOOP,
},
onTabRemove: {
type: Function,
default: NOOP,
},
type: {
type: String,
default: "",
},
stretch: Boolean,
},
setup() {
const rootTabs = vue.inject("rootTabs");
if (!rootTabs) {
throwError("[ElTabNav]", `ElTabNav must be nested inside ElTabs`);
}
const scrollable = vue.ref(false);
const navOffset = vue.ref(0);
const isFocus = vue.ref(false);
const focusable = vue.ref(true);
const navScroll$ = vue.ref(null);
const nav$ = vue.ref(null);
const el$ = vue.ref(null);
const sizeName = vue.computed(() => {
return ["top", "bottom"].includes(rootTabs.props.tabPosition)
? "width"
: "height";
});
const navStyle = vue.computed(() => {
const dir = sizeName.value === "width" ? "X" : "Y";
return {
transform: `translate${dir}(-${navOffset.value}px)`,
};
});
const scrollPrev = () => {
const containerSize =
navScroll$.value[`offset${capitalize(sizeName.value)}`];
const currentOffset = navOffset.value;
if (!currentOffset) return;
const newOffset =
currentOffset > containerSize ? currentOffset - containerSize : 0;
navOffset.value = newOffset;
};
const scrollNext = () => {
const navSize = nav$.value[`offset${capitalize(sizeName.value)}`];
const containerSize =
navScroll$.value[`offset${capitalize(sizeName.value)}`];
const currentOffset = navOffset.value;
if (navSize - currentOffset <= containerSize) return;
const newOffset =
navSize - currentOffset > containerSize * 2
? currentOffset + containerSize
: navSize - containerSize;
navOffset.value = newOffset;
};
const scrollToActiveTab = () => {
if (!scrollable.value) return;
const nav = nav$.value;
const activeTab = el$.value.querySelector(".is-active");
if (!activeTab) return;
const navScroll = navScroll$.value;
const isHorizontal = ["top", "bottom"].includes(
rootTabs.props.tabPosition
);
const activeTabBounding = activeTab.getBoundingClientRect();
const navScrollBounding = navScroll.getBoundingClientRect();
const maxOffset = isHorizontal
? nav.offsetWidth - navScrollBounding.width
: nav.offsetHeight - navScrollBounding.height;
const currentOffset = navOffset.value;
let newOffset = currentOffset;
if (isHorizontal) {
if (activeTabBounding.left < navScrollBounding.left) {
newOffset =
currentOffset - (navScrollBounding.left - activeTabBounding.left);
}
if (activeTabBounding.right > navScrollBounding.right) {
newOffset =
currentOffset + activeTabBounding.right - navScrollBounding.right;
}
} else {
if (activeTabBounding.top < navScrollBounding.top) {
newOffset =
currentOffset - (navScrollBounding.top - activeTabBounding.top);
}
if (activeTabBounding.bottom > navScrollBounding.bottom) {
newOffset =
currentOffset +
(activeTabBounding.bottom - navScrollBounding.bottom);
}
}
newOffset = Math.max(newOffset, 0);
navOffset.value = Math.min(newOffset, maxOffset);
};
const update = () => {
if (!nav$.value) return;
const navSize = nav$.value[`offset${capitalize(sizeName.value)}`];
const containerSize =
navScroll$.value[`offset${capitalize(sizeName.value)}`];
const currentOffset = navOffset.value;
if (containerSize < navSize) {
const currentOffset2 = navOffset.value;
scrollable.value = scrollable.value || {};
scrollable.value.prev = currentOffset2;
scrollable.value.next = currentOffset2 + containerSize < navSize;
if (navSize - currentOffset2 < containerSize) {
navOffset.value = navSize - containerSize;
}
} else {
scrollable.value = false;
if (currentOffset > 0) {
navOffset.value = 0;
}
}
};
const changeTab = (e) => {
const code = e.code;
let nextIndex;
let currentIndex, tabList;
const { up, down, left, right } = EVENT_CODE;
if ([up, down, left, right].indexOf(code) !== -1) {
tabList = e.currentTarget.querySelectorAll("[role=tab]");
currentIndex = Array.prototype.indexOf.call(tabList, e.target);
} else {
return;
}
if (code === left || code === up) {
if (currentIndex === 0) {
nextIndex = tabList.length - 1;
} else {
nextIndex = currentIndex - 1;
}
} else {
if (currentIndex < tabList.length - 1) {
nextIndex = currentIndex + 1;
} else {
nextIndex = 0;
}
}
tabList[nextIndex].focus();
tabList[nextIndex].click();
setFocus();
};
const setFocus = () => {
if (focusable.value) {
isFocus.value = true;
}
};
const removeFocus = () => {
isFocus.value = false;
};
const visibilityChangeHandler = () => {
const visibility = document.visibilityState;
if (visibility === "hidden") {
focusable.value = false;
} else if (visibility === "visible") {
setTimeout(() => {
focusable.value = true;
}, 50);
}
};
const windowBlurHandler = () => {
focusable.value = false;
};
const windowFocusHandler = () => {
setTimeout(() => {
focusable.value = true;
}, 50);
};
vue.onUpdated(() => {
update();
});
vue.onMounted(() => {
addResizeListener(el$.value, update);
on(document, "visibilitychange", visibilityChangeHandler);
on(window, "blur", windowBlurHandler);
on(window, "focus", windowFocusHandler);
setTimeout(() => {
scrollToActiveTab();
}, 0);
});
vue.onBeforeUnmount(() => {
if (el$.value) {
removeResizeListener(el$.value, update);
}
off(document, "visibilitychange", visibilityChangeHandler);
off(window, "blur", windowBlurHandler);
off(window, "focus", windowFocusHandler);
});
return {
rootTabs,
scrollable,
navOffset,
isFocus,
focusable,
navScroll$,
nav$,
el$,
sizeName,
navStyle,
scrollPrev,
scrollNext,
scrollToActiveTab,
update,
changeTab,
setFocus,
removeFocus,
visibilityChangeHandler,
windowBlurHandler,
windowFocusHandler,
};
},
render() {
const {
type,
panes,
editable,
stretch,
onTabClick,
onTabRemove,
navStyle,
scrollable,
scrollNext,
scrollPrev,
changeTab,
setFocus,
removeFocus,
rootTabs,
isFocus,
} = this;
const scrollBtn = scrollable
? [
vue.h(
"span",
{
class: [
"el-tabs__nav-prev",
scrollable.prev ? "" : "is-disabled",
],
onClick: scrollPrev,
},
[vue.h("i", { class: "el-icon-arrow-left" })]
),
vue.h(
"span",
{
class: [
"el-tabs__nav-next",
scrollable.next ? "" : "is-disabled",
],
onClick: scrollNext,
},
[vue.h("i", { class: "el-icon-arrow-right" })]
),
]
: null;
const tabs = panes.map((pane, index) => {
var _a, _b;
const tabName = pane.props.name || pane.index || `${index}`;
const closable = pane.isClosable || editable;
pane.index = `${index}`;
const btnClose = closable
? vue.h("span", {
class: "el-icon-close",
onClick: (ev) => {
onTabRemove(pane, ev);
},
})
: null;
const tabLabelContent =
((_b = (_a = pane.instance.slots).label) == null
? void 0
: _b.call(_a)) || pane.props.label;
const tabindex = pane.active ? 0 : -1;
return vue.h(
"div",
{
class: {
"el-tabs__item": true,
[`is-${rootTabs.props.tabPosition}`]: true,
"is-active": pane.active,
"is-disabled": pane.props.disabled,
"is-closable": closable,
"is-focus": isFocus,
},
id: `tab-${tabName}`,
key: `tab-${tabName}`,
"aria-controls": `pane-${tabName}`,
role: "tab",
"aria-selected": pane.active,
ref: `tab-${tabName}`,
tabindex,
onFocus: () => {
setFocus();
},
onBlur: () => {
removeFocus();
},
onClick: (ev) => {
removeFocus();
onTabClick(pane, tabName, ev);
},
onKeydown: (ev) => {
if (
closable &&
(ev.code === EVENT_CODE.delete ||
ev.code === EVENT_CODE.backspace)
) {
onTabRemove(pane, ev);
}
},
},
[tabLabelContent, btnClose]
);
});
return vue.h(
"div",
{
ref: "el$",
class: [
"el-tabs__nav-wrap",
scrollable ? "is-scrollable" : "",
`is-${rootTabs.props.tabPosition}`,
],
},
[
scrollBtn,
vue.h(
"div",
{
class: "el-tabs__nav-scroll",
ref: "navScroll$",
},
[
vue.h(
"div",
{
class: [
"el-tabs__nav",
`is-${rootTabs.props.tabPosition}`,
stretch &&
["top", "bottom"].includes(rootTabs.props.tabPosition)
? "is-stretch"
: "",
],
ref: "nav$",
style: navStyle,
role: "tablist",
onKeydown: changeTab,
},
[
!type
? vue.h(script$h, {
tabs: [...panes],
})
: null,
tabs,
]
),
]
),
]
);
},
});
script$g.__file = "packages/components/tabs/src/tab-nav.vue";
var Tabs = vue.defineComponent({
name: "ElTabs",
components: { TabNav: script$g },
props: {
type: {
type: String,
default: "",
},
activeName: {
type: String,
default: "",
},
closable: Boolean,
addable: Boolean,
modelValue: {
type: String,
default: "",
},
editable: Boolean,
tabPosition: {
type: String,
default: "top",
},
beforeLeave: {
type: Function,
default: null,
},
stretch: Boolean,
},
emits: [
"tab-click",
"edit",
"tab-remove",
"tab-add",
"input",
"update:modelValue",
],
setup(props, ctx) {
const nav$ = vue.ref(null);
const currentName = vue.ref(props.modelValue || props.activeName || "0");
const panes = vue.ref([]);
const instance = vue.getCurrentInstance();
const paneStatesMap = {};
vue.provide("rootTabs", {
props,
currentName,
});
vue.provide("updatePaneState", (pane) => {
paneStatesMap[pane.uid] = pane;
});
vue.watch(
() => props.activeName,
(modelValue) => {
setCurrentName(modelValue);
}
);
vue.watch(
() => props.modelValue,
(modelValue) => {
setCurrentName(modelValue);
}
);
vue.watch(currentName, () => {
vue.nextTick(() => {
nav$.value &&
nav$.value.$nextTick(() => {
nav$.value && nav$.value.scrollToActiveTab();
});
});
setPaneInstances(true);
});
const getPaneInstanceFromSlot = (vnode, paneInstanceList = []) => {
Array.from(vnode.children || []).forEach((node) => {
let type = node.type;
type = type.name || type;
if (type === "ElTabPane" && node.component) {
paneInstanceList.push(node.component);
} else if (type === vue.Fragment || type === "template") {
getPaneInstanceFromSlot(node, paneInstanceList);
}
});
return paneInstanceList;
};
const setPaneInstances = (isForceUpdate = false) => {
if (ctx.slots.default) {
const children = instance.subTree.children;
const content = Array.from(children).find(({ props: props2 }) => {
return props2.class === "el-tabs__content";
});
if (!content) return;
const paneInstanceList = getPaneInstanceFromSlot(content).map(
(paneComponent) => {
return paneStatesMap[paneComponent.uid];
}
);
const panesChanged = !(
paneInstanceList.length === panes.value.length &&
paneInstanceList.every(
(pane, index) => pane.uid === panes.value[index].uid
)
);
if (isForceUpdate || panesChanged) {
panes.value = paneInstanceList;
}
} else if (panes.value.length !== 0) {
panes.value = [];
}
};
const changeCurrentName = (value) => {
currentName.value = value;
ctx.emit("input", value);
ctx.emit("update:modelValue", value);
};
const setCurrentName = (value) => {
if (currentName.value === value) return;
const beforeLeave = props.beforeLeave;
const before = beforeLeave && beforeLeave(value, currentName.value);
if (before && isPromise(before)) {
before.then(
() => {
var _a, _b;
changeCurrentName(value);
(_b = (_a = nav$.value).removeFocus) == null
? void 0
: _b.call(_a);
},
() => {}
);
} else if (before !== false) {
changeCurrentName(value);
}
};
const handleTabClick = (tab, tabName, event) => {
if (tab.props.disabled) return;
setCurrentName(tabName);
ctx.emit("tab-click", tab, event);
};
const handleTabRemove = (pane, ev) => {
if (pane.props.disabled) return;
ev.stopPropagation();
ctx.emit("edit", pane.props.name, "remove");
ctx.emit("tab-remove", pane.props.name);
};
const handleTabAdd = () => {
ctx.emit("edit", null, "add");
ctx.emit("tab-add");
};
vue.onUpdated(() => {
setPaneInstances();
});
vue.onMounted(() => {
setPaneInstances();
});
return {
nav$,
handleTabClick,
handleTabRemove,
handleTabAdd,
currentName,
panes,
};
},
render() {
var _a;
const {
type,
handleTabClick,
handleTabRemove,
handleTabAdd,
currentName,
panes,
editable,
addable,
tabPosition,
stretch,
} = this;
const newButton =
editable || addable
? vue.h(
"span",
{
class: "el-tabs__new-tab",
tabindex: "0",
onClick: handleTabAdd,
onKeydown: (ev) => {
if (ev.code === EVENT_CODE.enter) {
handleTabAdd();
}
},
},
[vue.h("i", { class: "el-icon-plus" })]
)
: null;
const header = vue.h(
"div",
{
class: ["el-tabs__header", `is-${tabPosition}`],
},
[
newButton,
vue.h(script$g, {
currentName,
editable,
type,
panes,
stretch,
ref: "nav$",
onTabClick: handleTabClick,
onTabRemove: handleTabRemove,
}),
]
);
const panels = vue.h(
"div",
{
class: "el-tabs__content",
},
(_a = this.$slots) == null ? void 0 : _a.default()
);
return vue.h(
"div",
{
class: {
"el-tabs": true,
"el-tabs--card": type === "card",
[`el-tabs--${tabPosition}`]: true,
"el-tabs--border-card": type === "border-card",
},
},
tabPosition !== "bottom" ? [header, panels] : [panels, header]
);
},
});
var script$f = vue.defineComponent({
name: "ElTabPane",
props: {
label: {
type: String,
default: "",
},
name: {
type: String,
default: "",
},
closable: Boolean,
disabled: Boolean,
lazy: Boolean,
},
setup(props) {
const index = vue.ref(null);
const loaded = vue.ref(false);
const rootTabs = vue.inject("rootTabs");
const updatePaneState = vue.inject("updatePaneState");
if (!rootTabs || !updatePaneState) {
throw new Error(`ElTabPane must use with ElTabs`);
}
const isClosable = vue.computed(() => {
return props.closable || rootTabs.props.closable;
});
const active = vue.computed(() => {
return rootTabs.currentName.value === (props.name || index.value);
});
const paneName = vue.computed(() => {
return props.name || index.value;
});
const shouldBeRender = vue.computed(() => {
return !props.lazy || loaded.value || active.value;
});
vue.watch(active, (val) => {
if (val) loaded.value = true;
});
const instance = vue.getCurrentInstance();
updatePaneState({
uid: instance.uid,
instance,
props,
paneName,
active,
index,
isClosable,
});
return {
index,
loaded,
isClosable,
active,
paneName,
shouldBeRender,
};
},
});
const _hoisted_1$a = ["id", "aria-hidden", "aria-labelledby"];
function render$c(_ctx, _cache, $props, $setup, $data, $options) {
return _ctx.shouldBeRender
? vue.withDirectives(
(vue.openBlock(),
vue.createElementBlock(
"div",
{
key: 0,
id: `pane-${_ctx.paneName}`,
class: "el-tab-pane",
role: "tabpanel",
"aria-hidden": !_ctx.active,
"aria-labelledby": `tab-${_ctx.paneName}`,
},
[vue.renderSlot(_ctx.$slots, "default")],
8,
_hoisted_1$a
)),
[[vue.vShow, _ctx.active]]
)
: vue.createCommentVNode("v-if", true);
}
script$f.render = render$c;
script$f.__file = "packages/components/tabs/src/tab-pane.vue";
const ElTabs = withInstall(Tabs, {
TabPane: script$f,
});
const ElTabPane = withNoopInstall(script$f);
const { Option: ElOption } = ElSelect;
const parseTime = (time) => {
const values = (time || "").split(":");
if (values.length >= 2) {
const hours = parseInt(values[0], 10);
const minutes = parseInt(values[1], 10);
return {
hours,
minutes,
};
}
return null;
};
const compareTime = (time1, time2) => {
const value1 = parseTime(time1);
const value2 = parseTime(time2);
const minutes1 = value1.minutes + value1.hours * 60;
const minutes2 = value2.minutes + value2.hours * 60;
if (minutes1 === minutes2) {
return 0;
}
return minutes1 > minutes2 ? 1 : -1;
};
const formatTime = (time) => {
return `${time.hours < 10 ? `0${time.hours}` : time.hours}:${
time.minutes < 10 ? `0${time.minutes}` : time.minutes
}`;
};
const nextTime = (time, step) => {
const timeValue = parseTime(time);
const stepValue = parseTime(step);
const next = {
hours: timeValue.hours,
minutes: timeValue.minutes,
};
next.minutes += stepValue.minutes;
next.hours += stepValue.hours;
next.hours += Math.floor(next.minutes / 60);
next.minutes = next.minutes % 60;
return formatTime(next);
};
var script$e = vue.defineComponent({
name: "ElTimeSelect",
components: { ElSelect, ElOption },
model: {
prop: "value",
event: "change",
},
props: {
modelValue: String,
disabled: {
type: Boolean,
default: false,
},
editable: {
type: Boolean,
default: true,
},
clearable: {
type: Boolean,
default: true,
},
size: {
type: String,
default: "",
validator: (value) =>
!value || ["medium", "small", "mini"].indexOf(value) !== -1,
},
placeholder: {
type: String,
default: "",
},
start: {
type: String,
default: "09:00",
},
end: {
type: String,
default: "18:00",
},
step: {
type: String,
default: "00:30",
},
minTime: {
type: String,
default: "",
},
maxTime: {
type: String,
default: "",
},
name: {
type: String,
default: "",
},
prefixIcon: {
type: String,
default: "el-icon-time",
},
clearIcon: {
type: String,
default: "el-icon-circle-close",
},
},
emits: ["change", "blur", "focus", "update:modelValue"],
setup(props) {
const select = vue.ref(null);
const value = vue.computed(() => props.modelValue);
const items = vue.computed(() => {
const result = [];
if (props.start && props.end && props.step) {
let current = props.start;
while (compareTime(current, props.end) <= 0) {
result.push({
value: current,
disabled:
compareTime(current, props.minTime || "-1:-1") <= 0 ||
compareTime(current, props.maxTime || "100:100") >= 0,
});
current = nextTime(current, props.step);
}
}
return result;
});
const blur = () => {
var _a, _b;
(_b = (_a = select.value) == null ? void 0 : _a.blur) == null
? void 0
: _b.call(_a);
};
const focus = () => {
var _a, _b;
(_b = (_a = select.value) == null ? void 0 : _a.focus) == null
? void 0
: _b.call(_a);
};
return {
select,
value,
items,
blur,
focus,
};
},
});
function render$b(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_option = vue.resolveComponent("el-option");
const _component_el_select = vue.resolveComponent("el-select");
return (
vue.openBlock(),
vue.createBlock(
_component_el_select,
{
ref: "select",
"model-value": _ctx.value,
disabled: _ctx.disabled,
clearable: _ctx.clearable,
"clear-icon": _ctx.clearIcon,
size: _ctx.size,
placeholder: _ctx.placeholder,
"default-first-option": "",
filterable: _ctx.editable,
"onUpdate:modelValue":
_cache[0] ||
(_cache[0] = (event) => _ctx.$emit("update:modelValue", event)),
onChange:
_cache[1] || (_cache[1] = (event) => _ctx.$emit("change", event)),
onBlur:
_cache[2] || (_cache[2] = (event) => _ctx.$emit("blur", event)),
onFocus:
_cache[3] || (_cache[3] = (event) => _ctx.$emit("focus", event)),
},
{
prefix: vue.withCtx(() => [
vue.createElementVNode(
"i",
{
class: vue.normalizeClass(`el-input__icon ${_ctx.prefixIcon}`),
},
null,
2
),
]),
default: vue.withCtx(() => [
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.items, (item) => {
return (
vue.openBlock(),
vue.createBlock(
_component_el_option,
{
key: item.value,
label: item.value,
value: item.value,
disabled: item.disabled,
},
null,
8,
["label", "value", "disabled"]
)
);
}),
128
)),
]),
_: 1,
},
8,
[
"model-value",
"disabled",
"clearable",
"clear-icon",
"size",
"placeholder",
"filterable",
]
)
);
}
script$e.render = render$b;
script$e.__file = "packages/components/time-select/src/time-select.vue";
script$e.install = (app) => {
app.component(script$e.name, script$e);
};
const _TimeSelect = script$e;
const ElTimeSelect = _TimeSelect;
var script$d = vue.defineComponent({
name: "ElTimeline",
setup(_, ctx) {
vue.provide("timeline", ctx);
return () => {
var _a, _b;
return vue.h(
"ul",
{
class: { "el-timeline": true },
},
(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)
);
};
},
});
script$d.__file = "packages/components/timeline/src/index.vue";
var script$c = vue.defineComponent({
name: "ElTimelineItem",
props: {
timestamp: {
type: String,
default: "",
},
hideTimestamp: {
type: Boolean,
default: false,
},
center: {
type: Boolean,
default: false,
},
placement: {
type: String,
default: "bottom",
},
type: {
type: String,
default: "",
},
color: {
type: String,
default: "",
},
size: {
type: String,
default: "normal",
},
icon: {
type: String,
default: "",
},
hollow: {
type: Boolean,
default: false,
},
},
setup() {
vue.inject("timeline");
},
});
const _hoisted_1$9 = /* @__PURE__ */ vue.createElementVNode(
"div",
{ class: "el-timeline-item__tail" },
null,
-1
);
const _hoisted_2$8 = {
key: 1,
class: "el-timeline-item__dot",
};
const _hoisted_3$8 = { class: "el-timeline-item__wrapper" };
const _hoisted_4$4 = {
key: 0,
class: "el-timeline-item__timestamp is-top",
};
const _hoisted_5$3 = { class: "el-timeline-item__content" };
const _hoisted_6$3 = {
key: 1,
class: "el-timeline-item__timestamp is-bottom",
};
function render$a(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"li",
{
class: vue.normalizeClass([
"el-timeline-item",
{ "el-timeline-item__center": _ctx.center },
]),
},
[
_hoisted_1$9,
!_ctx.$slots.dot
? (vue.openBlock(),
vue.createElementBlock(
"div",
{
key: 0,
class: vue.normalizeClass([
"el-timeline-item__node",
[
`el-timeline-item__node--${_ctx.size || ""}`,
`el-timeline-item__node--${_ctx.type || ""}`,
_ctx.hollow ? "is-hollow" : "",
],
]),
style: vue.normalizeStyle({
backgroundColor: _ctx.color,
}),
},
[
_ctx.icon
? (vue.openBlock(),
vue.createElementBlock(
"i",
{
key: 0,
class: vue.normalizeClass([
"el-timeline-item__icon",
_ctx.icon,
]),
},
null,
2
))
: vue.createCommentVNode("v-if", true),
],
6
))
: vue.createCommentVNode("v-if", true),
_ctx.$slots.dot
? (vue.openBlock(),
vue.createElementBlock("div", _hoisted_2$8, [
vue.renderSlot(_ctx.$slots, "dot"),
]))
: vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", _hoisted_3$8, [
!_ctx.hideTimestamp && _ctx.placement === "top"
? (vue.openBlock(),
vue.createElementBlock(
"div",
_hoisted_4$4,
vue.toDisplayString(_ctx.timestamp),
1
))
: vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", _hoisted_5$3, [
vue.renderSlot(_ctx.$slots, "default"),
]),
!_ctx.hideTimestamp && _ctx.placement === "bottom"
? (vue.openBlock(),
vue.createElementBlock(
"div",
_hoisted_6$3,
vue.toDisplayString(_ctx.timestamp),
1
))
: vue.createCommentVNode("v-if", true),
]),
],
2
)
);
}
script$c.render = render$a;
script$c.__file = "packages/components/timeline/src/item.vue";
const ElTimeline = withInstall(script$d, {
TimelineItem: script$c,
});
const ElTimelineItem = withNoopInstall(script$c);
const CHECKED_CHANGE_EVENT = "checked-change";
const useCheckProps = {
data: {
type: Array,
default() {
return [];
},
},
optionRender: Function,
placeholder: String,
title: String,
filterable: Boolean,
format: Object,
filterMethod: Function,
defaultChecked: Array,
props: Object,
};
const useCheck = (props, panelState) => {
const { emit } = vue.getCurrentInstance();
const labelProp = vue.computed(() => props.props.label || "label");
const keyProp = vue.computed(() => props.props.key || "key");
const disabledProp = vue.computed(() => props.props.disabled || "disabled");
const filteredData = vue.computed(() => {
return props.data.filter((item) => {
if (typeof props.filterMethod === "function") {
return props.filterMethod(panelState.query, item);
} else {
const label = item[labelProp.value] || item[keyProp.value].toString();
return label.toLowerCase().includes(panelState.query.toLowerCase());
}
});
});
const checkableData = vue.computed(() => {
return filteredData.value.filter((item) => !item[disabledProp.value]);
});
const checkedSummary = vue.computed(() => {
const checkedLength = panelState.checked.length;
const dataLength = props.data.length;
const { noChecked, hasChecked } = props.format;
if (noChecked && hasChecked) {
return checkedLength > 0
? hasChecked
.replace(/\${checked}/g, checkedLength.toString())
.replace(/\${total}/g, dataLength.toString())
: noChecked.replace(/\${total}/g, dataLength.toString());
} else {
return `${checkedLength}/${dataLength}`;
}
});
const isIndeterminate = vue.computed(() => {
const checkedLength = panelState.checked.length;
return checkedLength > 0 && checkedLength < checkableData.value.length;
});
const updateAllChecked = () => {
const checkableDataKeys = checkableData.value.map(
(item) => item[keyProp.value]
);
panelState.allChecked =
checkableDataKeys.length > 0 &&
checkableDataKeys.every((item) => panelState.checked.includes(item));
};
const handleAllCheckedChange = (value) => {
panelState.checked = value
? checkableData.value.map((item) => item[keyProp.value])
: [];
};
vue.watch(
() => panelState.checked,
(val, oldVal) => {
updateAllChecked();
if (panelState.checkChangeByUser) {
const movedKeys = val
.concat(oldVal)
.filter((v) => !val.includes(v) || !oldVal.includes(v));
emit(CHECKED_CHANGE_EVENT, val, movedKeys);
} else {
emit(CHECKED_CHANGE_EVENT, val);
panelState.checkChangeByUser = true;
}
}
);
vue.watch(checkableData, () => {
updateAllChecked();
});
vue.watch(
() => props.data,
() => {
const checked = [];
const filteredDataKeys = filteredData.value.map(
(item) => item[keyProp.value]
);
panelState.checked.forEach((item) => {
if (filteredDataKeys.includes(item)) {
checked.push(item);
}
});
panelState.checkChangeByUser = false;
panelState.checked = checked;
}
);
vue.watch(
() => props.defaultChecked,
(val, oldVal) => {
if (
oldVal &&
val.length === oldVal.length &&
val.every((item) => oldVal.includes(item))
)
return;
const checked = [];
const checkableDataKeys = checkableData.value.map(
(item) => item[keyProp.value]
);
val.forEach((item) => {
if (checkableDataKeys.includes(item)) {
checked.push(item);
}
});
panelState.checkChangeByUser = false;
panelState.checked = checked;
},
{
immediate: true,
}
);
return {
labelProp,
keyProp,
disabledProp,
filteredData,
checkableData,
checkedSummary,
isIndeterminate,
updateAllChecked,
handleAllCheckedChange,
};
};
var script$b = vue.defineComponent({
name: "ElTransferPanel",
components: {
ElCheckboxGroup: ElCheckboxGroup$1,
ElCheckbox,
ElInput: _Input,
OptionContent: ({ option }) => option,
},
props: useCheckProps,
emits: [CHECKED_CHANGE_EVENT],
setup(props, { slots }) {
const { t } = useLocaleInject();
const panelState = vue.reactive({
checked: [],
allChecked: false,
query: "",
inputHover: false,
checkChangeByUser: true,
});
const {
labelProp,
keyProp,
disabledProp,
filteredData,
checkedSummary,
isIndeterminate,
handleAllCheckedChange,
} = useCheck(props, panelState);
const hasNoMatch = vue.computed(() => {
return panelState.query.length > 0 && filteredData.value.length === 0;
});
const inputIcon = vue.computed(() => {
return panelState.query.length > 0 && panelState.inputHover
? "circle-close"
: "search";
});
const hasFooter = vue.computed(
() => !!slots.default()[0].children.length
);
const clearQuery = () => {
if (inputIcon.value === "circle-close") {
panelState.query = "";
}
};
const { checked, allChecked, query, inputHover, checkChangeByUser } =
vue.toRefs(panelState);
return {
labelProp,
keyProp,
disabledProp,
filteredData,
checkedSummary,
isIndeterminate,
handleAllCheckedChange,
checked,
allChecked,
query,
inputHover,
checkChangeByUser,
hasNoMatch,
inputIcon,
hasFooter,
clearQuery,
t,
};
},
});
const _hoisted_1$8 = { class: "el-transfer-panel" };
const _hoisted_2$7 = { class: "el-transfer-panel__header" };
const _hoisted_3$7 = {
key: 0,
class: "el-transfer-panel__footer",
};
function render$9(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_checkbox = vue.resolveComponent("el-checkbox");
const _component_el_input = vue.resolveComponent("el-input");
const _component_option_content = vue.resolveComponent("option-content");
const _component_el_checkbox_group =
vue.resolveComponent("el-checkbox-group");
return (
vue.openBlock(),
vue.createElementBlock("div", _hoisted_1$8, [
vue.createElementVNode("p", _hoisted_2$7, [
vue.createVNode(
_component_el_checkbox,
{
modelValue: _ctx.allChecked,
"onUpdate:modelValue":
_cache[0] ||
(_cache[0] = ($event) => (_ctx.allChecked = $event)),
indeterminate: _ctx.isIndeterminate,
onChange: _ctx.handleAllCheckedChange,
},
{
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.title) + " ", 1),
vue.createElementVNode(
"span",
null,
vue.toDisplayString(_ctx.checkedSummary),
1
),
]),
_: 1,
},
8,
["modelValue", "indeterminate", "onChange"]
),
]),
vue.createElementVNode(
"div",
{
class: vue.normalizeClass([
"el-transfer-panel__body",
_ctx.hasFooter ? "is-with-footer" : "",
]),
},
[
_ctx.filterable
? (vue.openBlock(),
vue.createBlock(
_component_el_input,
{
key: 0,
modelValue: _ctx.query,
"onUpdate:modelValue":
_cache[2] ||
(_cache[2] = ($event) => (_ctx.query = $event)),
class: "el-transfer-panel__filter",
size: "small",
placeholder: _ctx.placeholder,
onMouseenter:
_cache[3] ||
(_cache[3] = ($event) => (_ctx.inputHover = true)),
onMouseleave:
_cache[4] ||
(_cache[4] = ($event) => (_ctx.inputHover = false)),
},
{
prefix: vue.withCtx(() => [
vue.createElementVNode(
"i",
{
class: vue.normalizeClass([
"el-input__icon",
"el-icon-" + _ctx.inputIcon,
]),
onClick:
_cache[1] ||
(_cache[1] = (...args) =>
_ctx.clearQuery && _ctx.clearQuery(...args)),
},
null,
2
),
]),
_: 1,
},
8,
["modelValue", "placeholder"]
))
: vue.createCommentVNode("v-if", true),
vue.withDirectives(
vue.createVNode(
_component_el_checkbox_group,
{
modelValue: _ctx.checked,
"onUpdate:modelValue":
_cache[5] ||
(_cache[5] = ($event) => (_ctx.checked = $event)),
class: vue.normalizeClass([
{ "is-filterable": _ctx.filterable },
"el-transfer-panel__list",
]),
},
{
default: vue.withCtx(() => [
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.filteredData, (item) => {
return (
vue.openBlock(),
vue.createBlock(
_component_el_checkbox,
{
key: item[_ctx.keyProp],
class: "el-transfer-panel__item",
label: item[_ctx.keyProp],
disabled: item[_ctx.disabledProp],
},
{
default: vue.withCtx(() => [
vue.createVNode(
_component_option_content,
{
option: _ctx.optionRender(item),
},
null,
8,
["option"]
),
]),
_: 2,
},
1032,
["label", "disabled"]
)
);
}),
128
)),
]),
_: 1,
},
8,
["modelValue", "class"]
),
[[vue.vShow, !_ctx.hasNoMatch && _ctx.data.length > 0]]
),
vue.withDirectives(
vue.createElementVNode(
"p",
{ class: "el-transfer-panel__empty" },
vue.toDisplayString(
_ctx.hasNoMatch
? _ctx.t("el.transfer.noMatch")
: _ctx.t("el.transfer.noData")
),
513
),
[[vue.vShow, _ctx.hasNoMatch || _ctx.data.length === 0]]
),
],
2
),
_ctx.hasFooter
? (vue.openBlock(),
vue.createElementBlock("p", _hoisted_3$7, [
vue.renderSlot(_ctx.$slots, "default"),
]))
: vue.createCommentVNode("v-if", true),
])
);
}
script$b.render = render$9;
script$b.__file = "packages/components/transfer/src/transfer-panel.vue";
const useComputedData = (props) => {
const propsKey = vue.computed(() => props.props.key);
const dataObj = vue.computed(() => {
return props.data.reduce(
(o, cur) => (o[cur[propsKey.value]] = cur) && o,
{}
);
});
const sourceData = vue.computed(() => {
return props.data.filter(
(item) => !props.modelValue.includes(item[propsKey.value])
);
});
const targetData = vue.computed(() => {
if (props.targetOrder === "original") {
return props.data.filter((item) =>
props.modelValue.includes(item[propsKey.value])
);
} else {
return props.modelValue.reduce((arr, cur) => {
const val = dataObj.value[cur];
if (val) {
arr.push(val);
}
return arr;
}, []);
}
});
return {
propsKey,
sourceData,
targetData,
};
};
const LEFT_CHECK_CHANGE_EVENT = "left-check-change";
const RIGHT_CHECK_CHANGE_EVENT = "right-check-change";
const useCheckedChange = (checkedState, emit) => {
const onSourceCheckedChange = (val, movedKeys) => {
checkedState.leftChecked = val;
if (movedKeys === void 0) return;
emit(LEFT_CHECK_CHANGE_EVENT, val, movedKeys);
};
const onTargetCheckedChange = (val, movedKeys) => {
checkedState.rightChecked = val;
if (movedKeys === void 0) return;
emit(RIGHT_CHECK_CHANGE_EVENT, val, movedKeys);
};
return {
onSourceCheckedChange,
onTargetCheckedChange,
};
};
const useMove = (props, checkedState, propsKey, emit) => {
const _emit = (value, type, checked) => {
emit(UPDATE_MODEL_EVENT, value);
emit(CHANGE_EVENT, value, type, checked);
};
const addToLeft = () => {
const currentValue = props.modelValue.slice();
checkedState.rightChecked.forEach((item) => {
const index = currentValue.indexOf(item);
if (index > -1) {
currentValue.splice(index, 1);
}
});
_emit(currentValue, "left", checkedState.rightChecked);
};
const addToRight = () => {
let currentValue = props.modelValue.slice();
const itemsToBeMoved = props.data
.filter((item) => {
const itemKey = item[propsKey.value];
return (
checkedState.leftChecked.includes(itemKey) &&
!props.modelValue.includes(itemKey)
);
})
.map((item) => item[propsKey.value]);
currentValue =
props.targetOrder === "unshift"
? itemsToBeMoved.concat(currentValue)
: currentValue.concat(itemsToBeMoved);
_emit(currentValue, "right", checkedState.leftChecked);
};
return {
addToLeft,
addToRight,
};
};
var __defProp$6 = Object.defineProperty;
var __defProps$5 = Object.defineProperties;
var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
var __defNormalProp$6 = (obj, key, value) =>
key in obj
? __defProp$6(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$6 = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$6.call(b, prop)) __defNormalProp$6(a, prop, b[prop]);
if (__getOwnPropSymbols$6)
for (var prop of __getOwnPropSymbols$6(b)) {
if (__propIsEnum$6.call(b, prop)) __defNormalProp$6(a, prop, b[prop]);
}
return a;
};
var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
var script$a = vue.defineComponent({
name: "ElTransfer",
components: {
TransferPanel: script$b,
ElButton,
},
props: {
data: {
type: Array,
default: () => [],
},
titles: {
type: Array,
default: () => [],
},
buttonTexts: {
type: Array,
default: () => [],
},
filterPlaceholder: {
type: String,
default: "",
},
filterMethod: Function,
leftDefaultChecked: {
type: Array,
default: () => [],
},
rightDefaultChecked: {
type: Array,
default: () => [],
},
renderContent: Function,
modelValue: {
type: Array,
default: () => [],
},
format: {
type: Object,
default: () => ({}),
},
filterable: {
type: Boolean,
default: false,
},
props: {
type: Object,
default: () => ({
label: "label",
key: "key",
disabled: "disabled",
}),
},
targetOrder: {
type: String,
default: "original",
validator: (val) => {
return ["original", "push", "unshift"].includes(val);
},
},
},
emits: [
UPDATE_MODEL_EVENT,
CHANGE_EVENT,
LEFT_CHECK_CHANGE_EVENT,
RIGHT_CHECK_CHANGE_EVENT,
],
setup(props, { emit, slots }) {
const { t } = useLocaleInject();
const elFormItem = vue.inject(elFormItemKey, {});
const checkedState = vue.reactive({
leftChecked: [],
rightChecked: [],
});
const { propsKey, sourceData, targetData } = useComputedData(props);
const { onSourceCheckedChange, onTargetCheckedChange } = useCheckedChange(
checkedState,
emit
);
const { addToLeft, addToRight } = useMove(
props,
checkedState,
propsKey,
emit
);
const leftPanel = vue.ref(null);
const rightPanel = vue.ref(null);
const clearQuery = (which) => {
if (which === "left") {
leftPanel.value.query = "";
} else if (which === "right") {
rightPanel.value.query = "";
}
};
const hasButtonTexts = vue.computed(() => props.buttonTexts.length === 2);
const leftPanelTitle = vue.computed(
() => props.titles[0] || t("el.transfer.titles.0")
);
const rightPanelTitle = vue.computed(
() => props.titles[1] || t("el.transfer.titles.1")
);
const panelFilterPlaceholder = vue.computed(
() => props.filterPlaceholder || t("el.transfer.filterPlaceholder")
);
vue.watch(
() => props.modelValue,
() => {
var _a;
(_a = elFormItem.validate) == null
? void 0
: _a.call(elFormItem, "change");
}
);
const optionRender = vue.computed(() => (option) => {
if (props.renderContent) return props.renderContent(vue.h, option);
if (slots.default) return slots.default({ option });
return vue.h(
"span",
option[props.props.label] || option[props.props.key]
);
});
return __spreadProps$5(
__spreadValues$6(
{
sourceData,
targetData,
onSourceCheckedChange,
onTargetCheckedChange,
addToLeft,
addToRight,
},
vue.toRefs(checkedState)
),
{
hasButtonTexts,
leftPanelTitle,
rightPanelTitle,
panelFilterPlaceholder,
clearQuery,
optionRender,
}
);
},
});
const _hoisted_1$7 = { class: "el-transfer" };
const _hoisted_2$6 = { class: "el-transfer__buttons" };
const _hoisted_3$6 = /* @__PURE__ */ vue.createElementVNode(
"i",
{ class: "el-icon-arrow-left" },
null,
-1
);
const _hoisted_4$3 = { key: 0 };
const _hoisted_5$2 = { key: 0 };
const _hoisted_6$2 = /* @__PURE__ */ vue.createElementVNode(
"i",
{ class: "el-icon-arrow-right" },
null,
-1
);
function render$8(_ctx, _cache, $props, $setup, $data, $options) {
const _component_transfer_panel = vue.resolveComponent("transfer-panel");
const _component_el_button = vue.resolveComponent("el-button");
return (
vue.openBlock(),
vue.createElementBlock("div", _hoisted_1$7, [
vue.createVNode(
_component_transfer_panel,
{
ref: "leftPanel",
data: _ctx.sourceData,
"option-render": _ctx.optionRender,
placeholder: _ctx.panelFilterPlaceholder,
title: _ctx.leftPanelTitle,
filterable: _ctx.filterable,
format: _ctx.format,
"filter-method": _ctx.filterMethod,
"default-checked": _ctx.leftDefaultChecked,
props: _ctx.props,
onCheckedChange: _ctx.onSourceCheckedChange,
},
{
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "left-footer"),
]),
_: 3,
},
8,
[
"data",
"option-render",
"placeholder",
"title",
"filterable",
"format",
"filter-method",
"default-checked",
"props",
"onCheckedChange",
]
),
vue.createElementVNode("div", _hoisted_2$6, [
vue.createVNode(
_component_el_button,
{
type: "primary",
class: vue.normalizeClass([
"el-transfer__button",
_ctx.hasButtonTexts ? "is-with-texts" : "",
]),
disabled: _ctx.rightChecked.length === 0,
onClick: _ctx.addToLeft,
},
{
default: vue.withCtx(() => [
_hoisted_3$6,
_ctx.buttonTexts[0] !== void 0
? (vue.openBlock(),
vue.createElementBlock(
"span",
_hoisted_4$3,
vue.toDisplayString(_ctx.buttonTexts[0]),
1
))
: vue.createCommentVNode("v-if", true),
]),
_: 1,
},
8,
["class", "disabled", "onClick"]
),
vue.createVNode(
_component_el_button,
{
type: "primary",
class: vue.normalizeClass([
"el-transfer__button",
_ctx.hasButtonTexts ? "is-with-texts" : "",
]),
disabled: _ctx.leftChecked.length === 0,
onClick: _ctx.addToRight,
},
{
default: vue.withCtx(() => [
_ctx.buttonTexts[1] !== void 0
? (vue.openBlock(),
vue.createElementBlock(
"span",
_hoisted_5$2,
vue.toDisplayString(_ctx.buttonTexts[1]),
1
))
: vue.createCommentVNode("v-if", true),
_hoisted_6$2,
]),
_: 1,
},
8,
["class", "disabled", "onClick"]
),
]),
vue.createVNode(
_component_transfer_panel,
{
ref: "rightPanel",
data: _ctx.targetData,
"option-render": _ctx.optionRender,
placeholder: _ctx.panelFilterPlaceholder,
filterable: _ctx.filterable,
format: _ctx.format,
"filter-method": _ctx.filterMethod,
title: _ctx.rightPanelTitle,
"default-checked": _ctx.rightDefaultChecked,
props: _ctx.props,
onCheckedChange: _ctx.onTargetCheckedChange,
},
{
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "right-footer"),
]),
_: 3,
},
8,
[
"data",
"option-render",
"placeholder",
"filterable",
"format",
"filter-method",
"title",
"default-checked",
"props",
"onCheckedChange",
]
),
])
);
}
script$a.render = render$8;
script$a.__file = "packages/components/transfer/src/index.vue";
script$a.install = (app) => {
app.component(script$a.name, script$a);
};
const _Transfer = script$a;
const ElTransfer = _Transfer;
const NODE_KEY = "$treeNodeId";
const markNodeData = function (node, data) {
if (!data || data[NODE_KEY]) return;
Object.defineProperty(data, NODE_KEY, {
value: node.id,
enumerable: false,
configurable: false,
writable: false,
});
};
const getNodeKey = function (key, data) {
if (!key) return data[NODE_KEY];
return data[key];
};
const getChildState = (node) => {
let all = true;
let none = true;
let allWithoutDisable = true;
for (let i = 0, j = node.length; i < j; i++) {
const n = node[i];
if (n.checked !== true || n.indeterminate) {
all = false;
if (!n.disabled) {
allWithoutDisable = false;
}
}
if (n.checked !== false || n.indeterminate) {
none = false;
}
}
return { all, none, allWithoutDisable, half: !all && !none };
};
const reInitChecked = function (node) {
if (node.childNodes.length === 0) return;
const { all, none, half } = getChildState(node.childNodes);
if (all) {
node.checked = true;
node.indeterminate = false;
} else if (half) {
node.checked = false;
node.indeterminate = true;
} else if (none) {
node.checked = false;
node.indeterminate = false;
}
const parent = node.parent;
if (!parent || parent.level === 0) return;
if (!node.store.checkStrictly) {
reInitChecked(parent);
}
};
const getPropertyFromData = function (node, prop) {
const props = node.store.props;
const data = node.data || {};
const config = props[prop];
if (typeof config === "function") {
return config(data, node);
} else if (typeof config === "string") {
return data[config];
} else if (typeof config === "undefined") {
const dataProp = data[prop];
return dataProp === void 0 ? "" : dataProp;
}
};
let nodeIdSeed = 0;
class Node {
constructor(options) {
this.id = nodeIdSeed++;
this.text = null;
this.checked = false;
this.indeterminate = false;
this.data = null;
this.expanded = false;
this.parent = null;
this.visible = true;
this.isCurrent = false;
this.canFocus = false;
for (const name in options) {
if (hasOwn(options, name)) {
this[name] = options[name];
}
}
this.level = 0;
this.loaded = false;
this.childNodes = [];
this.loading = false;
if (this.parent) {
this.level = this.parent.level + 1;
}
}
initialize() {
const store = this.store;
if (!store) {
throw new Error("[Node]store is required!");
}
store.registerNode(this);
const props = store.props;
if (props && typeof props.isLeaf !== "undefined") {
const isLeaf = getPropertyFromData(this, "isLeaf");
if (typeof isLeaf === "boolean") {
this.isLeafByUser = isLeaf;
}
}
if (store.lazy !== true && this.data) {
this.setData(this.data);
if (store.defaultExpandAll) {
this.expanded = true;
this.canFocus = true;
}
} else if (this.level > 0 && store.lazy && store.defaultExpandAll) {
this.expand();
}
if (!Array.isArray(this.data)) {
markNodeData(this, this.data);
}
if (!this.data) return;
const defaultExpandedKeys = store.defaultExpandedKeys;
const key = store.key;
if (
key &&
defaultExpandedKeys &&
defaultExpandedKeys.indexOf(this.key) !== -1
) {
this.expand(null, store.autoExpandParent);
}
if (
key &&
store.currentNodeKey !== void 0 &&
this.key === store.currentNodeKey
) {
store.currentNode = this;
store.currentNode.isCurrent = true;
}
if (store.lazy) {
store._initDefaultCheckedNode(this);
}
this.updateLeafState();
if (this.parent && (this.level === 1 || this.parent.expanded === true))
this.canFocus = true;
}
setData(data) {
if (!Array.isArray(data)) {
markNodeData(this, data);
}
this.data = data;
this.childNodes = [];
let children;
if (this.level === 0 && this.data instanceof Array) {
children = this.data;
} else {
children = getPropertyFromData(this, "children") || [];
}
for (let i = 0, j = children.length; i < j; i++) {
this.insertChild({ data: children[i] });
}
}
get label() {
return getPropertyFromData(this, "label");
}
get key() {
const nodeKey = this.store.key;
if (this.data) return this.data[nodeKey];
return null;
}
get disabled() {
return getPropertyFromData(this, "disabled");
}
get nextSibling() {
const parent = this.parent;
if (parent) {
const index = parent.childNodes.indexOf(this);
if (index > -1) {
return parent.childNodes[index + 1];
}
}
return null;
}
get previousSibling() {
const parent = this.parent;
if (parent) {
const index = parent.childNodes.indexOf(this);
if (index > -1) {
return index > 0 ? parent.childNodes[index - 1] : null;
}
}
return null;
}
contains(target, deep = true) {
return (this.childNodes || []).some(
(child) => child === target || (deep && child.contains(target))
);
}
remove() {
const parent = this.parent;
if (parent) {
parent.removeChild(this);
}
}
insertChild(child, index, batch) {
if (!child) throw new Error("insertChild error: child is required.");
if (!(child instanceof Node)) {
if (!batch) {
const children = this.getChildren(true);
if (children.indexOf(child.data) === -1) {
if (typeof index === "undefined" || index < 0) {
children.push(child.data);
} else {
children.splice(index, 0, child.data);
}
}
}
Object.assign(child, {
parent: this,
store: this.store,
});
child = vue.reactive(new Node(child));
if (child instanceof Node) {
child.initialize();
}
}
child.level = this.level + 1;
if (typeof index === "undefined" || index < 0) {
this.childNodes.push(child);
} else {
this.childNodes.splice(index, 0, child);
}
this.updateLeafState();
}
insertBefore(child, ref) {
let index;
if (ref) {
index = this.childNodes.indexOf(ref);
}
this.insertChild(child, index);
}
insertAfter(child, ref) {
let index;
if (ref) {
index = this.childNodes.indexOf(ref);
if (index !== -1) index += 1;
}
this.insertChild(child, index);
}
removeChild(child) {
const children = this.getChildren() || [];
const dataIndex = children.indexOf(child.data);
if (dataIndex > -1) {
children.splice(dataIndex, 1);
}
const index = this.childNodes.indexOf(child);
if (index > -1) {
this.store && this.store.deregisterNode(child);
child.parent = null;
this.childNodes.splice(index, 1);
}
this.updateLeafState();
}
removeChildByData(data) {
let targetNode = null;
for (let i = 0; i < this.childNodes.length; i++) {
if (this.childNodes[i].data === data) {
targetNode = this.childNodes[i];
break;
}
}
if (targetNode) {
this.removeChild(targetNode);
}
}
expand(callback, expandParent) {
const done = () => {
if (expandParent) {
let parent = this.parent;
while (parent.level > 0) {
parent.expanded = true;
parent = parent.parent;
}
}
this.expanded = true;
if (callback) callback();
this.childNodes.forEach((item) => {
item.canFocus = true;
});
};
if (this.shouldLoadData()) {
this.loadData((data) => {
if (Array.isArray(data)) {
if (this.checked) {
this.setChecked(true, true);
} else if (!this.store.checkStrictly) {
reInitChecked(this);
}
done();
}
});
} else {
done();
}
}
doCreateChildren(array, defaultProps = {}) {
array.forEach((item) => {
this.insertChild(
Object.assign({ data: item }, defaultProps),
void 0,
true
);
});
}
collapse() {
this.expanded = false;
this.childNodes.forEach((item) => {
item.canFocus = false;
});
}
shouldLoadData() {
return this.store.lazy === true && this.store.load && !this.loaded;
}
updateLeafState() {
if (
this.store.lazy === true &&
this.loaded !== true &&
typeof this.isLeafByUser !== "undefined"
) {
this.isLeaf = this.isLeafByUser;
return;
}
const childNodes = this.childNodes;
if (
!this.store.lazy ||
(this.store.lazy === true && this.loaded === true)
) {
this.isLeaf = !childNodes || childNodes.length === 0;
return;
}
this.isLeaf = false;
}
setChecked(value, deep, recursion, passValue) {
this.indeterminate = value === "half";
this.checked = value === true;
if (this.store.checkStrictly) return;
if (!(this.shouldLoadData() && !this.store.checkDescendants)) {
const { all, allWithoutDisable } = getChildState(this.childNodes);
if (!this.isLeaf && !all && allWithoutDisable) {
this.checked = false;
value = false;
}
const handleDescendants = () => {
if (deep) {
const childNodes = this.childNodes;
for (let i = 0, j = childNodes.length; i < j; i++) {
const child = childNodes[i];
passValue = passValue || value !== false;
const isCheck = child.disabled ? child.checked : passValue;
child.setChecked(isCheck, deep, true, passValue);
}
const { half, all: all2 } = getChildState(childNodes);
if (!all2) {
this.checked = all2;
this.indeterminate = half;
}
}
};
if (this.shouldLoadData()) {
this.loadData(
() => {
handleDescendants();
reInitChecked(this);
},
{
checked: value !== false,
}
);
return;
} else {
handleDescendants();
}
}
const parent = this.parent;
if (!parent || parent.level === 0) return;
if (!recursion) {
reInitChecked(parent);
}
}
getChildren(forceInit = false) {
if (this.level === 0) return this.data;
const data = this.data;
if (!data) return null;
const props = this.store.props;
let children = "children";
if (props) {
children = props.children || "children";
}
if (data[children] === void 0) {
data[children] = null;
}
if (forceInit && !data[children]) {
data[children] = [];
}
return data[children];
}
updateChildren() {
const newData = this.getChildren() || [];
const oldData = this.childNodes.map((node) => node.data);
const newDataMap = {};
const newNodes = [];
newData.forEach((item, index) => {
const key = item[NODE_KEY];
const isNodeExists =
!!key && oldData.findIndex((data) => data[NODE_KEY] === key) >= 0;
if (isNodeExists) {
newDataMap[key] = { index, data: item };
} else {
newNodes.push({ index, data: item });
}
});
if (!this.store.lazy) {
oldData.forEach((item) => {
if (!newDataMap[item[NODE_KEY]]) this.removeChildByData(item);
});
}
newNodes.forEach(({ index, data }) => {
this.insertChild({ data }, index);
});
this.updateLeafState();
}
loadData(callback, defaultProps = {}) {
if (
this.store.lazy === true &&
this.store.load &&
!this.loaded &&
(!this.loading || Object.keys(defaultProps).length)
) {
this.loading = true;
const resolve = (children) => {
this.loaded = true;
this.loading = false;
this.childNodes = [];
this.doCreateChildren(children, defaultProps);
this.updateLeafState();
if (callback) {
callback.call(this, children);
}
};
this.store.load(this, resolve);
} else {
if (callback) {
callback.call(this);
}
}
}
}
var Node$1 = Node;
class TreeStore {
constructor(options) {
this.currentNode = null;
this.currentNodeKey = null;
for (const option in options) {
if (hasOwn(options, option)) {
this[option] = options[option];
}
}
this.nodesMap = {};
}
initialize() {
this.root = new Node$1({
data: this.data,
store: this,
});
this.root.initialize();
if (this.lazy && this.load) {
const loadFn = this.load;
loadFn(this.root, (data) => {
this.root.doCreateChildren(data);
this._initDefaultCheckedNodes();
});
} else {
this._initDefaultCheckedNodes();
}
}
filter(value) {
const filterNodeMethod = this.filterNodeMethod;
const lazy = this.lazy;
const traverse = function (node) {
const childNodes = node.root ? node.root.childNodes : node.childNodes;
childNodes.forEach((child) => {
child.visible = filterNodeMethod.call(
child,
value,
child.data,
child
);
traverse(child);
});
if (!node.visible && childNodes.length) {
let allHidden = true;
allHidden = !childNodes.some((child) => child.visible);
if (node.root) {
node.root.visible = allHidden === false;
} else {
node.visible = allHidden === false;
}
}
if (!value) return;
if (node.visible && !node.isLeaf && !lazy) node.expand();
};
traverse(this);
}
setData(newVal) {
const instanceChanged = newVal !== this.root.data;
if (instanceChanged) {
this.root.setData(newVal);
this._initDefaultCheckedNodes();
} else {
this.root.updateChildren();
}
}
getNode(data) {
if (data instanceof Node$1) return data;
const key = typeof data !== "object" ? data : getNodeKey(this.key, data);
return this.nodesMap[key] || null;
}
insertBefore(data, refData) {
const refNode = this.getNode(refData);
refNode.parent.insertBefore({ data }, refNode);
}
insertAfter(data, refData) {
const refNode = this.getNode(refData);
refNode.parent.insertAfter({ data }, refNode);
}
remove(data) {
const node = this.getNode(data);
if (node && node.parent) {
if (node === this.currentNode) {
this.currentNode = null;
}
node.parent.removeChild(node);
}
}
append(data, parentData) {
const parentNode = parentData ? this.getNode(parentData) : this.root;
if (parentNode) {
parentNode.insertChild({ data });
}
}
_initDefaultCheckedNodes() {
const defaultCheckedKeys = this.defaultCheckedKeys || [];
const nodesMap = this.nodesMap;
defaultCheckedKeys.forEach((checkedKey) => {
const node = nodesMap[checkedKey];
if (node) {
node.setChecked(true, !this.checkStrictly);
}
});
}
_initDefaultCheckedNode(node) {
const defaultCheckedKeys = this.defaultCheckedKeys || [];
if (defaultCheckedKeys.indexOf(node.key) !== -1) {
node.setChecked(true, !this.checkStrictly);
}
}
setDefaultCheckedKey(newVal) {
if (newVal !== this.defaultCheckedKeys) {
this.defaultCheckedKeys = newVal;
this._initDefaultCheckedNodes();
}
}
registerNode(node) {
const key = this.key;
if (!node || !node.data) return;
if (!key) {
this.nodesMap[node.id] = node;
} else {
const nodeKey = node.key;
if (nodeKey !== void 0) this.nodesMap[node.key] = node;
}
}
deregisterNode(node) {
const key = this.key;
if (!key || !node || !node.data) return;
node.childNodes.forEach((child) => {
this.deregisterNode(child);
});
delete this.nodesMap[node.key];
}
getCheckedNodes(leafOnly = false, includeHalfChecked = false) {
const checkedNodes = [];
const traverse = function (node) {
const childNodes = node.root ? node.root.childNodes : node.childNodes;
childNodes.forEach((child) => {
if (
(child.checked || (includeHalfChecked && child.indeterminate)) &&
(!leafOnly || (leafOnly && child.isLeaf))
) {
checkedNodes.push(child.data);
}
traverse(child);
});
};
traverse(this);
return checkedNodes;
}
getCheckedKeys(leafOnly = false) {
return this.getCheckedNodes(leafOnly).map(
(data) => (data || {})[this.key]
);
}
getHalfCheckedNodes() {
const nodes = [];
const traverse = function (node) {
const childNodes = node.root ? node.root.childNodes : node.childNodes;
childNodes.forEach((child) => {
if (child.indeterminate) {
nodes.push(child.data);
}
traverse(child);
});
};
traverse(this);
return nodes;
}
getHalfCheckedKeys() {
return this.getHalfCheckedNodes().map((data) => (data || {})[this.key]);
}
_getAllNodes() {
const allNodes = [];
const nodesMap = this.nodesMap;
for (const nodeKey in nodesMap) {
if (hasOwn(nodesMap, nodeKey)) {
allNodes.push(nodesMap[nodeKey]);
}
}
return allNodes;
}
updateChildren(key, data) {
const node = this.nodesMap[key];
if (!node) return;
const childNodes = node.childNodes;
for (let i = childNodes.length - 1; i >= 0; i--) {
const child = childNodes[i];
this.remove(child.data);
}
for (let i = 0, j = data.length; i < j; i++) {
const child = data[i];
this.append(child, node.data);
}
}
_setCheckedKeys(key, leafOnly = false, checkedKeys) {
const allNodes = this._getAllNodes().sort((a, b) => b.level - a.level);
const cache = Object.create(null);
const keys = Object.keys(checkedKeys);
allNodes.forEach((node) => node.setChecked(false, false));
for (let i = 0, j = allNodes.length; i < j; i++) {
const node = allNodes[i];
const nodeKey = node.data[key].toString();
const checked = keys.indexOf(nodeKey) > -1;
if (!checked) {
if (node.checked && !cache[nodeKey]) {
node.setChecked(false, false);
}
continue;
}
let parent = node.parent;
while (parent && parent.level > 0) {
cache[parent.data[key]] = true;
parent = parent.parent;
}
if (node.isLeaf || this.checkStrictly) {
node.setChecked(true, false);
continue;
}
node.setChecked(true, true);
if (leafOnly) {
node.setChecked(false, false);
const traverse = function (node2) {
const childNodes = node2.childNodes;
childNodes.forEach((child) => {
if (!child.isLeaf) {
child.setChecked(false, false);
}
traverse(child);
});
};
traverse(node);
}
}
}
setCheckedNodes(array, leafOnly = false) {
const key = this.key;
const checkedKeys = {};
array.forEach((item) => {
checkedKeys[(item || {})[key]] = true;
});
this._setCheckedKeys(key, leafOnly, checkedKeys);
}
setCheckedKeys(keys, leafOnly = false) {
this.defaultCheckedKeys = keys;
const key = this.key;
const checkedKeys = {};
keys.forEach((key2) => {
checkedKeys[key2] = true;
});
this._setCheckedKeys(key, leafOnly, checkedKeys);
}
setDefaultExpandedKeys(keys) {
keys = keys || [];
this.defaultExpandedKeys = keys;
keys.forEach((key) => {
const node = this.getNode(key);
if (node) node.expand(null, this.autoExpandParent);
});
}
setChecked(data, checked, deep) {
const node = this.getNode(data);
if (node) {
node.setChecked(!!checked, deep);
}
}
getCurrentNode() {
return this.currentNode;
}
setCurrentNode(currentNode) {
const prevCurrentNode = this.currentNode;
if (prevCurrentNode) {
prevCurrentNode.isCurrent = false;
}
this.currentNode = currentNode;
this.currentNode.isCurrent = true;
}
setUserCurrentNode(node, shouldAutoExpandParent = true) {
const key = node[this.key];
const currNode = this.nodesMap[key];
this.setCurrentNode(currNode);
if (shouldAutoExpandParent && this.currentNode.level > 1) {
this.currentNode.parent.expand(null, true);
}
}
setCurrentNodeKey(key, shouldAutoExpandParent = true) {
if (key === null || key === void 0) {
this.currentNode && (this.currentNode.isCurrent = false);
this.currentNode = null;
return;
}
const node = this.getNode(key);
if (node) {
this.setCurrentNode(node);
if (shouldAutoExpandParent && this.currentNode.level > 1) {
this.currentNode.parent.expand(null, true);
}
}
}
}
var script$9 = vue.defineComponent({
name: "ElTreeNodeContent",
props: {
node: {
type: Object,
required: true,
},
renderContent: Function,
},
setup(props) {
const nodeInstance = vue.inject("NodeInstance");
const tree = vue.inject("RootTree");
return () => {
const node = props.node;
const { data, store } = node;
return props.renderContent
? props.renderContent(vue.h, {
_self: nodeInstance,
node,
data,
store,
})
: tree.ctx.slots.default
? tree.ctx.slots.default({ node, data })
: vue.h("span", { class: "el-tree-node__label" }, [node.label]);
};
},
});
script$9.__file = "packages/components/tree/src/tree-node-content.vue";
function useNodeExpandEventBroadcast(props) {
const parentNodeMap = vue.inject("TreeNodeMap", null);
const currentNodeMap = {
treeNodeExpand: (node) => {
if (props.node !== node) {
props.node.collapse();
}
},
children: [],
};
if (parentNodeMap) {
parentNodeMap.children.push(currentNodeMap);
}
vue.provide("TreeNodeMap", currentNodeMap);
return {
broadcastExpanded: (node) => {
if (!props.accordion) return;
for (const childNode of currentNodeMap.children) {
childNode.treeNodeExpand(node);
}
},
};
}
const dragEventsKey = Symbol("dragEvents");
function useDragNodeHandler({ props, ctx, el$, dropIndicator$, store }) {
const dragState = vue.ref({
showDropIndicator: false,
draggingNode: null,
dropNode: null,
allowDrop: true,
dropType: null,
});
const treeNodeDragStart = ({ event, treeNode }) => {
if (
typeof props.allowDrag === "function" &&
!props.allowDrag(treeNode.node)
) {
event.preventDefault();
return false;
}
event.dataTransfer.effectAllowed = "move";
try {
event.dataTransfer.setData("text/plain", "");
} catch (e) {}
dragState.value.draggingNode = treeNode;
ctx.emit("node-drag-start", treeNode.node, event);
};
const treeNodeDragOver = ({ event, treeNode }) => {
const dropNode = treeNode;
const oldDropNode = dragState.value.dropNode;
if (oldDropNode && oldDropNode !== dropNode) {
removeClass(oldDropNode.$el, "is-drop-inner");
}
const draggingNode = dragState.value.draggingNode;
if (!draggingNode || !dropNode) return;
let dropPrev = true;
let dropInner = true;
let dropNext = true;
let userAllowDropInner = true;
if (typeof props.allowDrop === "function") {
dropPrev = props.allowDrop(draggingNode.node, dropNode.node, "prev");
userAllowDropInner = dropInner = props.allowDrop(
draggingNode.node,
dropNode.node,
"inner"
);
dropNext = props.allowDrop(draggingNode.node, dropNode.node, "next");
}
event.dataTransfer.dropEffect = dropInner ? "move" : "none";
if ((dropPrev || dropInner || dropNext) && oldDropNode !== dropNode) {
if (oldDropNode) {
ctx.emit(
"node-drag-leave",
draggingNode.node,
oldDropNode.node,
event
);
}
ctx.emit("node-drag-enter", draggingNode.node, dropNode.node, event);
}
if (dropPrev || dropInner || dropNext) {
dragState.value.dropNode = dropNode;
}
if (dropNode.node.nextSibling === draggingNode.node) {
dropNext = false;
}
if (dropNode.node.previousSibling === draggingNode.node) {
dropPrev = false;
}
if (dropNode.node.contains(draggingNode.node, false)) {
dropInner = false;
}
if (
draggingNode.node === dropNode.node ||
draggingNode.node.contains(dropNode.node)
) {
dropPrev = false;
dropInner = false;
dropNext = false;
}
const targetPosition = dropNode.$el.getBoundingClientRect();
const treePosition = el$.value.getBoundingClientRect();
let dropType;
const prevPercent = dropPrev
? dropInner
? 0.25
: dropNext
? 0.45
: 1
: -1;
const nextPercent = dropNext
? dropInner
? 0.75
: dropPrev
? 0.55
: 0
: 1;
let indicatorTop = -9999;
const distance = event.clientY - targetPosition.top;
if (distance < targetPosition.height * prevPercent) {
dropType = "before";
} else if (distance > targetPosition.height * nextPercent) {
dropType = "after";
} else if (dropInner) {
dropType = "inner";
} else {
dropType = "none";
}
const iconPosition = dropNode.$el
.querySelector(".el-tree-node__expand-icon")
.getBoundingClientRect();
const dropIndicator = dropIndicator$.value;
if (dropType === "before") {
indicatorTop = iconPosition.top - treePosition.top;
} else if (dropType === "after") {
indicatorTop = iconPosition.bottom - treePosition.top;
}
dropIndicator.style.top = `${indicatorTop}px`;
dropIndicator.style.left = `${iconPosition.right - treePosition.left}px`;
if (dropType === "inner") {
addClass(dropNode.$el, "is-drop-inner");
} else {
removeClass(dropNode.$el, "is-drop-inner");
}
dragState.value.showDropIndicator =
dropType === "before" || dropType === "after";
dragState.value.allowDrop =
dragState.value.showDropIndicator || userAllowDropInner;
dragState.value.dropType = dropType;
ctx.emit("node-drag-over", draggingNode.node, dropNode.node, event);
};
const treeNodeDragEnd = (event) => {
const { draggingNode, dropType, dropNode } = dragState.value;
event.preventDefault();
event.dataTransfer.dropEffect = "move";
if (draggingNode && dropNode) {
const draggingNodeCopy = { data: draggingNode.node.data };
if (dropType !== "none") {
draggingNode.node.remove();
}
if (dropType === "before") {
dropNode.node.parent.insertBefore(draggingNodeCopy, dropNode.node);
} else if (dropType === "after") {
dropNode.node.parent.insertAfter(draggingNodeCopy, dropNode.node);
} else if (dropType === "inner") {
dropNode.node.insertChild(draggingNodeCopy);
}
if (dropType !== "none") {
store.value.registerNode(draggingNodeCopy);
}
removeClass(dropNode.$el, "is-drop-inner");
ctx.emit(
"node-drag-end",
draggingNode.node,
dropNode.node,
dropType,
event
);
if (dropType !== "none") {
ctx.emit(
"node-drop",
draggingNode.node,
dropNode.node,
dropType,
event
);
}
}
if (draggingNode && !dropNode) {
ctx.emit("node-drag-end", draggingNode.node, null, dropType, event);
}
dragState.value.showDropIndicator = false;
dragState.value.draggingNode = null;
dragState.value.dropNode = null;
dragState.value.allowDrop = true;
};
vue.provide(dragEventsKey, {
treeNodeDragStart,
treeNodeDragOver,
treeNodeDragEnd,
});
return {
dragState,
};
}
var script$8 = vue.defineComponent({
name: "ElTreeNode",
components: {
ElCollapseTransition: _CollapseTransition,
ElCheckbox,
NodeContent: script$9,
},
props: {
node: {
type: Node$1,
default: () => ({}),
},
props: {
type: Object,
default: () => ({}),
},
accordion: Boolean,
renderContent: Function,
renderAfterExpand: Boolean,
showCheckbox: {
type: Boolean,
default: false,
},
},
emits: ["node-expand"],
setup(props, ctx) {
const { broadcastExpanded } = useNodeExpandEventBroadcast(props);
const tree = vue.inject("RootTree");
const expanded = vue.ref(false);
const childNodeRendered = vue.ref(false);
const oldChecked = vue.ref(null);
const oldIndeterminate = vue.ref(null);
const node$ = vue.ref(null);
const dragEvents = vue.inject(dragEventsKey);
const instance = vue.getCurrentInstance();
vue.provide("NodeInstance", instance);
if (props.node.expanded) {
expanded.value = true;
childNodeRendered.value = true;
}
const childrenKey = tree.props["children"] || "children";
vue.watch(
() => {
const children = props.node.data[childrenKey];
return children && [...children];
},
() => {
props.node.updateChildren();
}
);
vue.watch(
() => props.node.indeterminate,
(val) => {
handleSelectChange(props.node.checked, val);
}
);
vue.watch(
() => props.node.checked,
(val) => {
handleSelectChange(val, props.node.indeterminate);
}
);
vue.watch(
() => props.node.expanded,
(val) => {
vue.nextTick(() => (expanded.value = val));
if (val) {
childNodeRendered.value = true;
}
}
);
const getNodeKey$1 = (node) => {
return getNodeKey(tree.props.nodeKey, node.data);
};
const handleSelectChange = (checked, indeterminate) => {
if (
oldChecked.value !== checked ||
oldIndeterminate.value !== indeterminate
) {
tree.ctx.emit(
"check-change",
props.node.data,
checked,
indeterminate
);
}
oldChecked.value = checked;
oldIndeterminate.value = indeterminate;
};
const handleClick = () => {
const store = tree.store.value;
store.setCurrentNode(props.node);
tree.ctx.emit(
"current-change",
store.currentNode ? store.currentNode.data : null,
store.currentNode
);
tree.currentNode.value = props.node;
if (tree.props.expandOnClickNode) {
handleExpandIconClick();
}
if (tree.props.checkOnClickNode && !props.node.disabled) {
handleCheckChange(null, {
target: { checked: !props.node.checked },
});
}
tree.ctx.emit("node-click", props.node.data, props.node, instance);
};
const handleContextMenu = (event) => {
if (tree.instance.vnode.props["onNodeContextmenu"]) {
event.stopPropagation();
event.preventDefault();
}
tree.ctx.emit(
"node-contextmenu",
event,
props.node.data,
props.node,
instance
);
};
const handleExpandIconClick = () => {
if (props.node.isLeaf) return;
if (expanded.value) {
tree.ctx.emit("node-collapse", props.node.data, props.node, instance);
props.node.collapse();
} else {
props.node.expand();
ctx.emit("node-expand", props.node.data, props.node, instance);
}
};
const handleCheckChange = (value, ev) => {
props.node.setChecked(ev.target.checked, !tree.props.checkStrictly);
vue.nextTick(() => {
const store = tree.store.value;
tree.ctx.emit("check", props.node.data, {
checkedNodes: store.getCheckedNodes(),
checkedKeys: store.getCheckedKeys(),
halfCheckedNodes: store.getHalfCheckedNodes(),
halfCheckedKeys: store.getHalfCheckedKeys(),
});
});
};
const handleChildNodeExpand = (nodeData, node, instance2) => {
broadcastExpanded(node);
tree.ctx.emit("node-expand", nodeData, node, instance2);
};
const handleDragStart = (event) => {
if (!tree.props.draggable) return;
dragEvents.treeNodeDragStart({ event, treeNode: props });
};
const handleDragOver = (event) => {
if (!tree.props.draggable) return;
dragEvents.treeNodeDragOver({
event,
treeNode: { $el: node$.value, node: props.node },
});
event.preventDefault();
};
const handleDrop = (event) => {
event.preventDefault();
};
const handleDragEnd = (event) => {
if (!tree.props.draggable) return;
dragEvents.treeNodeDragEnd(event);
};
return {
node$,
tree,
expanded,
childNodeRendered,
oldChecked,
oldIndeterminate,
getNodeKey: getNodeKey$1,
handleSelectChange,
handleClick,
handleContextMenu,
handleExpandIconClick,
handleCheckChange,
handleChildNodeExpand,
handleDragStart,
handleDragOver,
handleDrop,
handleDragEnd,
};
},
});
const _hoisted_1$6 = [
"aria-expanded",
"aria-disabled",
"aria-checked",
"draggable",
"data-key",
];
const _hoisted_2$5 = {
key: 1,
class: "el-tree-node__loading-icon el-icon-loading",
};
const _hoisted_3$5 = ["aria-expanded"];
function render$7(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_checkbox = vue.resolveComponent("el-checkbox");
const _component_node_content = vue.resolveComponent("node-content");
const _component_el_tree_node = vue.resolveComponent("el-tree-node");
const _component_el_collapse_transition = vue.resolveComponent(
"el-collapse-transition"
);
return vue.withDirectives(
(vue.openBlock(),
vue.createElementBlock(
"div",
{
ref: "node$",
class: vue.normalizeClass([
"el-tree-node",
{
"is-expanded": _ctx.expanded,
"is-current": _ctx.node.isCurrent,
"is-hidden": !_ctx.node.visible,
"is-focusable": !_ctx.node.disabled,
"is-checked": !_ctx.node.disabled && _ctx.node.checked,
},
]),
role: "treeitem",
tabindex: "-1",
"aria-expanded": _ctx.expanded,
"aria-disabled": _ctx.node.disabled,
"aria-checked": _ctx.node.checked,
draggable: _ctx.tree.props.draggable,
"data-key": _ctx.getNodeKey(_ctx.node),
onClick:
_cache[2] ||
(_cache[2] = vue.withModifiers(
(...args) => _ctx.handleClick && _ctx.handleClick(...args),
["stop"]
)),
onContextmenu:
_cache[3] ||
(_cache[3] = (...args) =>
_ctx.handleContextMenu && _ctx.handleContextMenu(...args)),
onDragstart:
_cache[4] ||
(_cache[4] = vue.withModifiers(
(...args) =>
_ctx.handleDragStart && _ctx.handleDragStart(...args),
["stop"]
)),
onDragover:
_cache[5] ||
(_cache[5] = vue.withModifiers(
(...args) => _ctx.handleDragOver && _ctx.handleDragOver(...args),
["stop"]
)),
onDragend:
_cache[6] ||
(_cache[6] = vue.withModifiers(
(...args) => _ctx.handleDragEnd && _ctx.handleDragEnd(...args),
["stop"]
)),
onDrop:
_cache[7] ||
(_cache[7] = vue.withModifiers(
(...args) => _ctx.handleDrop && _ctx.handleDrop(...args),
["stop"]
)),
},
[
vue.createElementVNode(
"div",
{
class: "el-tree-node__content",
style: vue.normalizeStyle({
paddingLeft:
(_ctx.node.level - 1) * _ctx.tree.props.indent + "px",
}),
},
[
vue.createElementVNode(
"span",
{
class: vue.normalizeClass([
{
"is-leaf": _ctx.node.isLeaf,
expanded: !_ctx.node.isLeaf && _ctx.expanded,
},
"el-tree-node__expand-icon",
_ctx.tree.props.iconClass
? _ctx.tree.props.iconClass
: "el-icon-caret-right",
]),
onClick:
_cache[0] ||
(_cache[0] = vue.withModifiers(
(...args) =>
_ctx.handleExpandIconClick &&
_ctx.handleExpandIconClick(...args),
["stop"]
)),
},
null,
2
),
_ctx.showCheckbox
? (vue.openBlock(),
vue.createBlock(
_component_el_checkbox,
{
key: 0,
"model-value": _ctx.node.checked,
indeterminate: _ctx.node.indeterminate,
disabled: !!_ctx.node.disabled,
onClick:
_cache[1] ||
(_cache[1] = vue.withModifiers(() => {}, ["stop"])),
onChange: _ctx.handleCheckChange,
},
null,
8,
["model-value", "indeterminate", "disabled", "onChange"]
))
: vue.createCommentVNode("v-if", true),
_ctx.node.loading
? (vue.openBlock(),
vue.createElementBlock("span", _hoisted_2$5))
: vue.createCommentVNode("v-if", true),
vue.createVNode(
_component_node_content,
{
node: _ctx.node,
"render-content": _ctx.renderContent,
},
null,
8,
["node", "render-content"]
),
],
4
),
vue.createVNode(_component_el_collapse_transition, null, {
default: vue.withCtx(() => [
!_ctx.renderAfterExpand || _ctx.childNodeRendered
? vue.withDirectives(
(vue.openBlock(),
vue.createElementBlock(
"div",
{
key: 0,
class: "el-tree-node__children",
role: "group",
"aria-expanded": _ctx.expanded,
},
[
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.node.childNodes, (child) => {
return (
vue.openBlock(),
vue.createBlock(
_component_el_tree_node,
{
key: _ctx.getNodeKey(child),
"render-content": _ctx.renderContent,
"render-after-expand": _ctx.renderAfterExpand,
"show-checkbox": _ctx.showCheckbox,
node: child,
onNodeExpand: _ctx.handleChildNodeExpand,
},
null,
8,
[
"render-content",
"render-after-expand",
"show-checkbox",
"node",
"onNodeExpand",
]
)
);
}),
128
)),
],
8,
_hoisted_3$5
)),
[[vue.vShow, _ctx.expanded]]
)
: vue.createCommentVNode("v-if", true),
]),
_: 1,
}),
],
42,
_hoisted_1$6
)),
[[vue.vShow, _ctx.node.visible]]
);
}
script$8.render = render$7;
script$8.__file = "packages/components/tree/src/tree-node.vue";
function useKeydown({ el$ }, store) {
const treeItems = vue.shallowRef([]);
const checkboxItems = vue.shallowRef([]);
vue.onMounted(() => {
initTabIndex();
on(el$.value, "keydown", handleKeydown);
});
vue.onBeforeUnmount(() => {
off(el$.value, "keydown", handleKeydown);
});
vue.onUpdated(() => {
treeItems.value = Array.from(
el$.value.querySelectorAll("[role=treeitem]")
);
checkboxItems.value = Array.from(
el$.value.querySelectorAll("input[type=checkbox]")
);
});
vue.watch(checkboxItems, (val) => {
val.forEach((checkbox) => {
checkbox.setAttribute("tabindex", "-1");
});
});
const handleKeydown = (ev) => {
const currentItem = ev.target;
if (currentItem.className.indexOf("el-tree-node") === -1) return;
const code = ev.code;
treeItems.value = Array.from(
el$.value.querySelectorAll(".is-focusable[role=treeitem]")
);
const currentIndex = treeItems.value.indexOf(currentItem);
let nextIndex;
if ([EVENT_CODE.up, EVENT_CODE.down].indexOf(code) > -1) {
ev.preventDefault();
if (code === EVENT_CODE.up) {
nextIndex =
currentIndex === -1
? 0
: currentIndex !== 0
? currentIndex - 1
: treeItems.value.length - 1;
const startIndex = nextIndex;
while (true) {
if (
store.value.getNode(treeItems.value[nextIndex].dataset.key)
.canFocus
)
break;
nextIndex--;
if (nextIndex === startIndex) {
nextIndex = -1;
break;
}
if (nextIndex < 0) {
nextIndex = treeItems.value.length - 1;
}
}
} else {
nextIndex =
currentIndex === -1
? 0
: currentIndex < treeItems.value.length - 1
? currentIndex + 1
: 0;
const startIndex = nextIndex;
while (true) {
if (
store.value.getNode(treeItems.value[nextIndex].dataset.key)
.canFocus
)
break;
nextIndex++;
if (nextIndex === startIndex) {
nextIndex = -1;
break;
}
if (nextIndex >= treeItems.value.length) {
nextIndex = 0;
}
}
}
nextIndex !== -1 && treeItems.value[nextIndex].focus();
}
if ([EVENT_CODE.left, EVENT_CODE.right].indexOf(code) > -1) {
ev.preventDefault();
currentItem.click();
}
const hasInput = currentItem.querySelector('[type="checkbox"]');
if ([EVENT_CODE.enter, EVENT_CODE.space].indexOf(code) > -1 && hasInput) {
ev.preventDefault();
hasInput.click();
}
};
const initTabIndex = () => {
var _a;
treeItems.value = Array.from(
el$.value.querySelectorAll(".is-focusable[role=treeitem]")
);
checkboxItems.value = Array.from(
el$.value.querySelectorAll("input[type=checkbox]")
);
const checkedItem = el$.value.querySelectorAll(
".is-checked[role=treeitem]"
);
if (checkedItem.length) {
checkedItem[0].setAttribute("tabindex", "0");
return;
}
(_a = treeItems.value[0]) == null
? void 0
: _a.setAttribute("tabindex", "0");
};
}
var script$7 = vue.defineComponent({
name: "ElTree",
components: { ElTreeNode: script$8 },
props: {
data: {
type: Array,
default: () => [],
},
emptyText: {
type: String,
},
renderAfterExpand: {
type: Boolean,
default: true,
},
nodeKey: String,
checkStrictly: Boolean,
defaultExpandAll: Boolean,
expandOnClickNode: {
type: Boolean,
default: true,
},
checkOnClickNode: Boolean,
checkDescendants: {
type: Boolean,
default: false,
},
autoExpandParent: {
type: Boolean,
default: true,
},
defaultCheckedKeys: Array,
defaultExpandedKeys: Array,
currentNodeKey: [String, Number],
renderContent: Function,
showCheckbox: {
type: Boolean,
default: false,
},
draggable: {
type: Boolean,
default: false,
},
allowDrag: Function,
allowDrop: Function,
props: {
type: Object,
default: () => ({
children: "children",
label: "label",
disabled: "disabled",
}),
},
lazy: {
type: Boolean,
default: false,
},
highlightCurrent: Boolean,
load: Function,
filterNodeMethod: Function,
accordion: Boolean,
indent: {
type: Number,
default: 18,
},
iconClass: String,
},
emits: [
"check-change",
"current-change",
"node-click",
"node-contextmenu",
"node-collapse",
"node-expand",
"check",
"node-drag-start",
"node-drag-end",
"node-drop",
"node-drag-leave",
"node-drag-enter",
"node-drag-over",
],
setup(props, ctx) {
const { t } = useLocaleInject();
const store = vue.ref(
new TreeStore({
key: props.nodeKey,
data: props.data,
lazy: props.lazy,
props: props.props,
load: props.load,
currentNodeKey: props.currentNodeKey,
checkStrictly: props.checkStrictly,
checkDescendants: props.checkDescendants,
defaultCheckedKeys: props.defaultCheckedKeys,
defaultExpandedKeys: props.defaultExpandedKeys,
autoExpandParent: props.autoExpandParent,
defaultExpandAll: props.defaultExpandAll,
filterNodeMethod: props.filterNodeMethod,
})
);
store.value.initialize();
const root = vue.ref(store.value.root);
const currentNode = vue.ref(null);
const el$ = vue.ref(null);
const dropIndicator$ = vue.ref(null);
const { broadcastExpanded } = useNodeExpandEventBroadcast(props);
const { dragState } = useDragNodeHandler({
props,
ctx,
el$,
dropIndicator$,
store,
});
useKeydown({ el$ }, store);
const isEmpty = vue.computed(() => {
const { childNodes } = root.value;
return (
!childNodes ||
childNodes.length === 0 ||
childNodes.every(({ visible }) => !visible)
);
});
vue.watch(
() => props.defaultCheckedKeys,
(newVal) => {
store.value.setDefaultCheckedKey(newVal);
}
);
vue.watch(
() => props.defaultExpandedKeys,
(newVal) => {
store.value.defaultExpandedKeys = newVal;
store.value.setDefaultExpandedKeys(newVal);
}
);
vue.watch(
() => props.data,
(newVal) => {
store.value.setData(newVal);
},
{ deep: true }
);
vue.watch(
() => props.checkStrictly,
(newVal) => {
store.value.checkStrictly = newVal;
}
);
const filter = (value) => {
if (!props.filterNodeMethod)
throw new Error("[Tree] filterNodeMethod is required when filter");
store.value.filter(value);
};
const getNodeKey$1 = (node) => {
return getNodeKey(props.nodeKey, node.data);
};
const getNodePath = (data) => {
if (!props.nodeKey)
throw new Error("[Tree] nodeKey is required in getNodePath");
const node = store.value.getNode(data);
if (!node) return [];
const path = [node.data];
let parent = node.parent;
while (parent && parent !== root.value) {
path.push(parent.data);
parent = parent.parent;
}
return path.reverse();
};
const getCheckedNodes = (leafOnly, includeHalfChecked) => {
return store.value.getCheckedNodes(leafOnly, includeHalfChecked);
};
const getCheckedKeys = (leafOnly) => {
return store.value.getCheckedKeys(leafOnly);
};
const getCurrentNode = () => {
const currentNode2 = store.value.getCurrentNode();
return currentNode2 ? currentNode2.data : null;
};
const getCurrentKey = () => {
if (!props.nodeKey)
throw new Error("[Tree] nodeKey is required in getCurrentKey");
const currentNode2 = getCurrentNode();
return currentNode2 ? currentNode2[props.nodeKey] : null;
};
const setCheckedNodes = (nodes, leafOnly) => {
if (!props.nodeKey)
throw new Error("[Tree] nodeKey is required in setCheckedNodes");
store.value.setCheckedNodes(nodes, leafOnly);
};
const setCheckedKeys = (keys, leafOnly) => {
if (!props.nodeKey)
throw new Error("[Tree] nodeKey is required in setCheckedKeys");
store.value.setCheckedKeys(keys, leafOnly);
};
const setChecked = (data, checked, deep) => {
store.value.setChecked(data, checked, deep);
};
const getHalfCheckedNodes = () => {
return store.value.getHalfCheckedNodes();
};
const getHalfCheckedKeys = () => {
return store.value.getHalfCheckedKeys();
};
const setCurrentNode = (node, shouldAutoExpandParent = true) => {
if (!props.nodeKey)
throw new Error("[Tree] nodeKey is required in setCurrentNode");
store.value.setUserCurrentNode(node, shouldAutoExpandParent);
};
const setCurrentKey = (key, shouldAutoExpandParent = true) => {
if (!props.nodeKey)
throw new Error("[Tree] nodeKey is required in setCurrentKey");
store.value.setCurrentNodeKey(key, shouldAutoExpandParent);
};
const getNode = (data) => {
return store.value.getNode(data);
};
const remove = (data) => {
store.value.remove(data);
};
const append = (data, parentNode) => {
store.value.append(data, parentNode);
};
const insertBefore = (data, refNode) => {
store.value.insertBefore(data, refNode);
};
const insertAfter = (data, refNode) => {
store.value.insertAfter(data, refNode);
};
const handleNodeExpand = (nodeData, node, instance) => {
broadcastExpanded(node);
ctx.emit("node-expand", nodeData, node, instance);
};
const updateKeyChildren = (key, data) => {
if (!props.nodeKey)
throw new Error("[Tree] nodeKey is required in updateKeyChild");
store.value.updateChildren(key, data);
};
vue.provide("RootTree", {
ctx,
props,
store,
root,
currentNode,
instance: vue.getCurrentInstance(),
});
return {
store,
root,
currentNode,
dragState,
el$,
dropIndicator$,
isEmpty,
filter,
getNodeKey: getNodeKey$1,
getNodePath,
getCheckedNodes,
getCheckedKeys,
getCurrentNode,
getCurrentKey,
setCheckedNodes,
setCheckedKeys,
setChecked,
getHalfCheckedNodes,
getHalfCheckedKeys,
setCurrentNode,
setCurrentKey,
t,
getNode,
remove,
append,
insertBefore,
insertAfter,
handleNodeExpand,
updateKeyChildren,
};
},
});
const _hoisted_1$5 = {
key: 0,
class: "el-tree__empty-block",
};
const _hoisted_2$4 = { class: "el-tree__empty-text" };
const _hoisted_3$4 = {
ref: "dropIndicator$",
class: "el-tree__drop-indicator",
};
function render$6(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_tree_node = vue.resolveComponent("el-tree-node");
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
ref: "el$",
class: vue.normalizeClass([
"el-tree",
{
"el-tree--highlight-current": _ctx.highlightCurrent,
"is-dragging": !!_ctx.dragState.draggingNode,
"is-drop-not-allow": !_ctx.dragState.allowDrop,
"is-drop-inner": _ctx.dragState.dropType === "inner",
},
]),
role: "tree",
},
[
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.root.childNodes, (child) => {
return (
vue.openBlock(),
vue.createBlock(
_component_el_tree_node,
{
key: _ctx.getNodeKey(child),
node: child,
props: _ctx.props,
accordion: _ctx.accordion,
"render-after-expand": _ctx.renderAfterExpand,
"show-checkbox": _ctx.showCheckbox,
"render-content": _ctx.renderContent,
onNodeExpand: _ctx.handleNodeExpand,
},
null,
8,
[
"node",
"props",
"accordion",
"render-after-expand",
"show-checkbox",
"render-content",
"onNodeExpand",
]
)
);
}),
128
)),
_ctx.isEmpty
? (vue.openBlock(),
vue.createElementBlock("div", _hoisted_1$5, [
vue.createElementVNode(
"span",
_hoisted_2$4,
vue.toDisplayString(
_ctx.emptyText || _ctx.t("el.tree.emptyText")
),
1
),
]))
: vue.createCommentVNode("v-if", true),
vue.withDirectives(
vue.createElementVNode("div", _hoisted_3$4, null, 512),
[[vue.vShow, _ctx.dragState.showDropIndicator]]
),
],
2
)
);
}
script$7.render = render$6;
script$7.__file = "packages/components/tree/src/tree.vue";
script$7.install = (app) => {
app.component(script$7.name, script$7);
};
const _Tree = script$7;
const ElTree = _Tree;
function getError(action, option, xhr) {
let msg;
if (xhr.response) {
msg = `${xhr.response.error || xhr.response}`;
} else if (xhr.responseText) {
msg = `${xhr.responseText}`;
} else {
msg = `fail to ${option.method} ${action} ${xhr.status}`;
}
const err = new Error(msg);
err.status = xhr.status;
err.method = option.method;
err.url = action;
return err;
}
function getBody(xhr) {
const text = xhr.responseText || xhr.response;
if (!text) {
return text;
}
try {
return JSON.parse(text);
} catch (e) {
return text;
}
}
function upload(option) {
if (typeof XMLHttpRequest === "undefined") {
return;
}
const xhr = new XMLHttpRequest();
const action = option.action;
if (xhr.upload) {
xhr.upload.onprogress = function progress(e) {
if (e.total > 0) {
e.percent = (e.loaded / e.total) * 100;
}
option.onProgress(e);
};
}
const formData = new FormData();
if (option.data) {
Object.keys(option.data).forEach((key) => {
formData.append(key, option.data[key]);
});
}
formData.append(option.filename, option.file, option.file.name);
xhr.onerror = function error() {
option.onError(getError(action, option, xhr));
};
xhr.onload = function onload() {
if (xhr.status < 200 || xhr.status >= 300) {
return option.onError(getError(action, option, xhr));
}
option.onSuccess(getBody(xhr));
};
xhr.open(option.method, action, true);
if (option.withCredentials && "withCredentials" in xhr) {
xhr.withCredentials = true;
}
const headers = option.headers || {};
for (const item in headers) {
if (hasOwn(headers, item) && headers[item] !== null) {
xhr.setRequestHeader(item, headers[item]);
}
}
xhr.send(formData);
return xhr;
}
var script$6 = vue.defineComponent({
name: "ElUploadList",
components: { ElProgress: _Progress },
props: {
files: {
type: Array,
default: () => [],
},
disabled: {
type: Boolean,
default: false,
},
handlePreview: {
type: Function,
default: () => NOOP,
},
listType: {
type: String,
default: "text",
},
},
emits: ["remove"],
setup(props, { emit }) {
const { t } = useLocaleInject();
const handleClick = (file) => {
props.handlePreview(file);
};
const onFileClicked = (e) => {
e.target.focus();
};
const handleRemove = (e, file) => {
emit("remove", file);
};
return {
focusing: vue.ref(false),
handleClick,
handleRemove,
onFileClicked,
t,
};
},
});
const _hoisted_1$4 = ["onKeydown"];
const _hoisted_2$3 = ["src"];
const _hoisted_3$3 = ["onClick"];
const _hoisted_4$2 = /* @__PURE__ */ vue.createElementVNode(
"i",
{ class: "el-icon-document" },
null,
-1
);
const _hoisted_5$1 = { class: "el-upload-list__item-status-label" };
const _hoisted_6$1 = ["onClick"];
const _hoisted_7$1 = {
key: 2,
class: "el-icon-close-tip",
};
const _hoisted_8$1 = {
key: 4,
class: "el-upload-list__item-actions",
};
const _hoisted_9$1 = ["onClick"];
const _hoisted_10$1 = /* @__PURE__ */ vue.createElementVNode(
"i",
{ class: "el-icon-zoom-in" },
null,
-1
);
const _hoisted_11$1 = [_hoisted_10$1];
const _hoisted_12$1 = ["onClick"];
const _hoisted_13 = /* @__PURE__ */ vue.createElementVNode(
"i",
{ class: "el-icon-delete" },
null,
-1
);
const _hoisted_14 = [_hoisted_13];
function render$5(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_progress = vue.resolveComponent("el-progress");
return (
vue.openBlock(),
vue.createBlock(
vue.TransitionGroup,
{
tag: "ul",
class: vue.normalizeClass([
"el-upload-list",
"el-upload-list--" + _ctx.listType,
{ "is-disabled": _ctx.disabled },
]),
name: "el-list",
},
{
default: vue.withCtx(() => [
(vue.openBlock(true),
vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.files, (file) => {
return (
vue.openBlock(),
vue.createElementBlock(
"li",
{
key: file.uid || file,
class: vue.normalizeClass([
"el-upload-list__item",
"is-" + file.status,
_ctx.focusing ? "focusing" : "",
]),
tabindex: "0",
onKeydown: vue.withKeys(
($event) =>
!_ctx.disabled && _ctx.handleRemove($event, file),
["delete"]
),
onFocus:
_cache[0] ||
(_cache[0] = ($event) => (_ctx.focusing = true)),
onBlur:
_cache[1] ||
(_cache[1] = ($event) => (_ctx.focusing = false)),
onClick:
_cache[2] ||
(_cache[2] = (...args) =>
_ctx.onFileClicked && _ctx.onFileClicked(...args)),
},
[
vue.renderSlot(_ctx.$slots, "default", { file }, () => [
file.status !== "uploading" &&
["picture-card", "picture"].includes(_ctx.listType)
? (vue.openBlock(),
vue.createElementBlock(
"img",
{
key: 0,
class: "el-upload-list__item-thumbnail",
src: file.url,
alt: "",
},
null,
8,
_hoisted_2$3
))
: vue.createCommentVNode("v-if", true),
vue.createElementVNode(
"a",
{
class: "el-upload-list__item-name",
onClick: ($event) => _ctx.handleClick(file),
},
[
_hoisted_4$2,
vue.createTextVNode(
vue.toDisplayString(file.name),
1
),
],
8,
_hoisted_3$3
),
vue.createElementVNode("label", _hoisted_5$1, [
vue.createElementVNode(
"i",
{
class: vue.normalizeClass({
"el-icon-upload-success": true,
"el-icon-circle-check":
_ctx.listType === "text",
"el-icon-check": [
"picture-card",
"picture",
].includes(_ctx.listType),
}),
},
null,
2
),
]),
!_ctx.disabled
? (vue.openBlock(),
vue.createElementBlock(
"i",
{
key: 1,
class: "el-icon-close",
onClick: ($event) =>
_ctx.handleRemove($event, file),
},
null,
8,
_hoisted_6$1
))
: vue.createCommentVNode("v-if", true),
vue.createCommentVNode(
" Due to close btn only appears when li gets focused disappears after li gets blurred, thus keyboard navigation can never reach close btn"
),
vue.createCommentVNode(
" This is a bug which needs to be fixed "
),
vue.createCommentVNode(
" TODO: Fix the incorrect navigation interaction "
),
!_ctx.disabled
? (vue.openBlock(),
vue.createElementBlock(
"i",
_hoisted_7$1,
vue.toDisplayString(
_ctx.t("el.upload.deleteTip")
),
1
))
: vue.createCommentVNode("v-if", true),
file.status === "uploading"
? (vue.openBlock(),
vue.createBlock(
_component_el_progress,
{
key: 3,
type:
_ctx.listType === "picture-card"
? "circle"
: "line",
"stroke-width":
_ctx.listType === "picture-card" ? 6 : 2,
percentage: +file.percentage,
},
null,
8,
["type", "stroke-width", "percentage"]
))
: vue.createCommentVNode("v-if", true),
_ctx.listType === "picture-card"
? (vue.openBlock(),
vue.createElementBlock("span", _hoisted_8$1, [
vue.createElementVNode(
"span",
{
class: "el-upload-list__item-preview",
onClick: ($event) => _ctx.handlePreview(file),
},
_hoisted_11$1,
8,
_hoisted_9$1
),
!_ctx.disabled
? (vue.openBlock(),
vue.createElementBlock(
"span",
{
key: 0,
class: "el-upload-list__item-delete",
onClick: ($event) =>
_ctx.handleRemove($event, file),
},
_hoisted_14,
8,
_hoisted_12$1
))
: vue.createCommentVNode("v-if", true),
]))
: vue.createCommentVNode("v-if", true),
]),
],
42,
_hoisted_1$4
)
);
}),
128
)),
]),
_: 3,
},
8,
["class"]
)
);
}
script$6.render = render$5;
script$6.__file = "packages/components/upload/src/upload-list.vue";
var script$5 = vue.defineComponent({
name: "ElUploadDrag",
props: {
disabled: {
type: Boolean,
default: false,
},
},
emits: ["file"],
setup(props, { emit }) {
const uploader = vue.inject("uploader", {});
const dragover = vue.ref(false);
function onDrop(e) {
if (props.disabled || !uploader) return;
const accept = uploader.accept;
dragover.value = false;
if (!accept) {
emit("file", e.dataTransfer.files);
return;
}
emit(
"file",
Array.from(e.dataTransfer.files).filter((file) => {
const { type, name } = file;
const extension =
name.indexOf(".") > -1 ? `.${name.split(".").pop()}` : "";
const baseType = type.replace(/\/.*$/, "");
return accept
.split(",")
.map((type2) => type2.trim())
.filter((type2) => type2)
.some((acceptedType) => {
if (acceptedType.startsWith(".")) {
return extension === acceptedType;
}
if (/\/\*$/.test(acceptedType)) {
return baseType === acceptedType.replace(/\/\*$/, "");
}
if (/^[^/]+\/[^/]+$/.test(acceptedType)) {
return type === acceptedType;
}
return false;
});
})
);
}
function onDragover() {
if (!props.disabled) dragover.value = true;
}
return {
dragover,
onDrop,
onDragover,
};
},
});
function render$4(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
class: vue.normalizeClass({
"el-upload-dragger": true,
"is-dragover": _ctx.dragover,
}),
onDrop:
_cache[0] ||
(_cache[0] = vue.withModifiers(
(...args) => _ctx.onDrop && _ctx.onDrop(...args),
["prevent"]
)),
onDragover:
_cache[1] ||
(_cache[1] = vue.withModifiers(
(...args) => _ctx.onDragover && _ctx.onDragover(...args),
["prevent"]
)),
onDragleave:
_cache[2] ||
(_cache[2] = vue.withModifiers(
($event) => (_ctx.dragover = false),
["prevent"]
)),
},
[vue.renderSlot(_ctx.$slots, "default")],
34
)
);
}
script$5.render = render$4;
script$5.__file = "packages/components/upload/src/upload-dragger.vue";
var script$4 = vue.defineComponent({
components: {
UploadDragger: script$5,
},
props: {
type: {
type: String,
default: "",
},
action: {
type: String,
required: true,
},
name: {
type: String,
default: "file",
},
data: {
type: Object,
default: () => null,
},
headers: {
type: Object,
default: () => null,
},
method: {
type: String,
default: "post",
},
withCredentials: {
type: Boolean,
default: false,
},
multiple: {
type: Boolean,
default: null,
},
accept: {
type: String,
default: "",
},
onStart: {
type: Function,
default: NOOP,
},
onProgress: {
type: Function,
default: NOOP,
},
onSuccess: {
type: Function,
default: NOOP,
},
onError: {
type: Function,
default: NOOP,
},
beforeUpload: {
type: Function,
default: NOOP,
},
drag: {
type: Boolean,
default: false,
},
onPreview: {
type: Function,
default: NOOP,
},
onRemove: {
type: Function,
default: NOOP,
},
fileList: {
type: Array,
default: () => [],
},
autoUpload: {
type: Boolean,
default: true,
},
listType: {
type: String,
default: "text",
},
httpRequest: {
type: Function,
default: () => upload,
},
disabled: Boolean,
limit: {
type: Number,
default: null,
},
onExceed: {
type: Function,
default: NOOP,
},
},
setup(props) {
const reqs = vue.ref({});
const mouseover = vue.ref(false);
const inputRef = vue.ref(null);
function uploadFiles(files) {
if (props.limit && props.fileList.length + files.length > props.limit) {
props.onExceed(files, props.fileList);
return;
}
let postFiles = Array.from(files);
if (!props.multiple) {
postFiles = postFiles.slice(0, 1);
}
if (postFiles.length === 0) {
return;
}
postFiles.forEach((rawFile) => {
props.onStart(rawFile);
if (props.autoUpload) upload(rawFile);
});
}
function upload(rawFile) {
inputRef.value.value = null;
if (!props.beforeUpload) {
return post(rawFile);
}
const before = props.beforeUpload(rawFile);
if (before instanceof Promise) {
before
.then((processedFile) => {
const fileType = Object.prototype.toString.call(processedFile);
if (
fileType === "[object File]" ||
fileType === "[object Blob]"
) {
if (fileType === "[object Blob]") {
processedFile = new File([processedFile], rawFile.name, {
type: rawFile.type,
});
}
for (const p in rawFile) {
if (hasOwn(rawFile, p)) {
processedFile[p] = rawFile[p];
}
}
post(processedFile);
} else {
post(rawFile);
}
})
.catch(() => {
props.onRemove(null, rawFile);
});
} else if (before !== false) {
post(rawFile);
} else {
props.onRemove(null, rawFile);
}
}
function abort(file) {
const _reqs = reqs.value;
if (file) {
let uid = file;
if (file.uid) uid = file.uid;
if (_reqs[uid]) {
_reqs[uid].abort();
}
} else {
Object.keys(_reqs).forEach((uid) => {
if (_reqs[uid]) _reqs[uid].abort();
delete _reqs[uid];
});
}
}
function post(rawFile) {
const { uid } = rawFile;
const options = {
headers: props.headers,
withCredentials: props.withCredentials,
file: rawFile,
data: props.data,
method: props.method,
filename: props.name,
action: props.action,
onProgress: (e) => {
props.onProgress(e, rawFile);
},
onSuccess: (res) => {
props.onSuccess(res, rawFile);
delete reqs.value[uid];
},
onError: (err) => {
props.onError(err, rawFile);
delete reqs.value[uid];
},
};
const req = props.httpRequest(options);
reqs.value[uid] = req;
if (req instanceof Promise) {
req.then(options.onSuccess, options.onError);
}
}
function handleChange(e) {
const files = e.target.files;
if (!files) return;
uploadFiles(files);
}
function handleClick() {
if (!props.disabled) {
inputRef.value.value = null;
inputRef.value.click();
}
}
function handleKeydown() {
handleClick();
}
return {
reqs,
mouseover,
inputRef,
abort,
post,
handleChange,
handleClick,
handleKeydown,
upload,
uploadFiles,
};
},
});
const _hoisted_1$3 = ["name", "multiple", "accept"];
function render$3(_ctx, _cache, $props, $setup, $data, $options) {
const _component_upload_dragger = vue.resolveComponent("upload-dragger");
return (
vue.openBlock(),
vue.createElementBlock(
"div",
{
class: vue.normalizeClass([
"el-upload",
`el-upload--${_ctx.listType}`,
]),
tabindex: "0",
onClick:
_cache[1] ||
(_cache[1] = (...args) =>
_ctx.handleClick && _ctx.handleClick(...args)),
onKeydown:
_cache[2] ||
(_cache[2] = vue.withKeys(
vue.withModifiers(
(...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args),
["self"]
),
["enter", "space"]
)),
},
[
_ctx.drag
? (vue.openBlock(),
vue.createBlock(
_component_upload_dragger,
{
key: 0,
disabled: _ctx.disabled,
onFile: _ctx.uploadFiles,
},
{
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default"),
]),
_: 3,
},
8,
["disabled", "onFile"]
))
: vue.renderSlot(_ctx.$slots, "default", { key: 1 }),
vue.createElementVNode(
"input",
{
ref: "inputRef",
class: "el-upload__input",
type: "file",
name: _ctx.name,
multiple: _ctx.multiple,
accept: _ctx.accept,
onChange:
_cache[0] ||
(_cache[0] = (...args) =>
_ctx.handleChange && _ctx.handleChange(...args)),
},
null,
40,
_hoisted_1$3
),
],
34
)
);
}
script$4.render = render$3;
script$4.__file = "packages/components/upload/src/upload.vue";
/**
* A specialized version of `_.forEach` for arrays without support for
* iteratee shorthands.
*
* @private
* @param {Array} [array] The array to iterate over.
* @param {Function} iteratee The function invoked per iteration.
* @returns {Array} Returns `array`.
*/
function arrayEach(array, iteratee) {
var index = -1,
length = array == null ? 0 : array.length;
while (++index < length) {
if (iteratee(array[index], index, array) === false) {
break;
}
}
return array;
}
var _arrayEach = arrayEach;
/**
* The base implementation of `assignValue` and `assignMergeValue` without
* value checks.
*
* @private
* @param {Object} object The object to modify.
* @param {string} key The key of the property to assign.
* @param {*} value The value to assign.
*/
function baseAssignValue(object, key, value) {
if (key == "__proto__" && _defineProperty) {
_defineProperty(object, key, {
configurable: true,
enumerable: true,
value: value,
writable: true,
});
} else {
object[key] = value;
}
}
var _baseAssignValue = baseAssignValue;
/** Used for built-in method references. */
var objectProto$2 = Object.prototype;
/** Used to check objects for own properties. */
var hasOwnProperty$2 = objectProto$2.hasOwnProperty;
/**
* Assigns `value` to `key` of `object` if the existing value is not equivalent
* using [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
* for equality comparisons.
*
* @private
* @param {Object} object The object to modify.
* @param {string} key The key of the property to assign.
* @param {*} value The value to assign.
*/
function assignValue(object, key, value) {
var objValue = object[key];
if (
!(hasOwnProperty$2.call(object, key) && eq_1(objValue, value)) ||
(value === undefined && !(key in object))
) {
_baseAssignValue(object, key, value);
}
}
var _assignValue = assignValue;
/**
* Copies properties of `source` to `object`.
*
* @private
* @param {Object} source The object to copy properties from.
* @param {Array} props The property identifiers to copy.
* @param {Object} [object={}] The object to copy properties to.
* @param {Function} [customizer] The function to customize copied values.
* @returns {Object} Returns `object`.
*/
function copyObject(source, props, object, customizer) {
var isNew = !object;
object || (object = {});
var index = -1,
length = props.length;
while (++index < length) {
var key = props[index];
var newValue = customizer
? customizer(object[key], source[key], key, object, source)
: undefined;
if (newValue === undefined) {
newValue = source[key];
}
if (isNew) {
_baseAssignValue(object, key, newValue);
} else {
_assignValue(object, key, newValue);
}
}
return object;
}
var _copyObject = copyObject;
/**
* The base implementation of `_.assign` without support for multiple sources
* or `customizer` functions.
*
* @private
* @param {Object} object The destination object.
* @param {Object} source The source object.
* @returns {Object} Returns `object`.
*/
function baseAssign(object, source) {
return object && _copyObject(source, keys_1(source), object);
}
var _baseAssign = baseAssign;
/**
* This function is like
* [`Object.keys`](http://ecma-international.org/ecma-262/7.0/#sec-object.keys)
* except that it includes inherited enumerable properties.
*
* @private
* @param {Object} object The object to query.
* @returns {Array} Returns the array of property names.
*/
function nativeKeysIn(object) {
var result = [];
if (object != null) {
for (var key in Object(object)) {
result.push(key);
}
}
return result;
}
var _nativeKeysIn = nativeKeysIn;
/** Used for built-in method references. */
var objectProto$1 = Object.prototype;
/** Used to check objects for own properties. */
var hasOwnProperty$1 = objectProto$1.hasOwnProperty;
/**
* The base implementation of `_.keysIn` which doesn't treat sparse arrays as dense.
*
* @private
* @param {Object} object The object to query.
* @returns {Array} Returns the array of property names.
*/
function baseKeysIn(object) {
if (!isObject_1(object)) {
return _nativeKeysIn(object);
}
var isProto = _isPrototype(object),
result = [];
for (var key in object) {
if (
!(
key == "constructor" &&
(isProto || !hasOwnProperty$1.call(object, key))
)
) {
result.push(key);
}
}
return result;
}
var _baseKeysIn = baseKeysIn;
/**
* Creates an array of the own and inherited enumerable property names of `object`.
*
* **Note:** Non-object values are coerced to objects.
*
* @static
* @memberOf _
* @since 3.0.0
* @category Object
* @param {Object} object The object to query.
* @returns {Array} Returns the array of property names.
* @example
*
* function Foo() {
* this.a = 1;
* this.b = 2;
* }
*
* Foo.prototype.c = 3;
*
* _.keysIn(new Foo);
* // => ['a', 'b', 'c'] (iteration order is not guaranteed)
*/
function keysIn(object) {
return isArrayLike_1(object)
? _arrayLikeKeys(object, true)
: _baseKeysIn(object);
}
var keysIn_1 = keysIn;
/**
* The base implementation of `_.assignIn` without support for multiple sources
* or `customizer` functions.
*
* @private
* @param {Object} object The destination object.
* @param {Object} source The source object.
* @returns {Object} Returns `object`.
*/
function baseAssignIn(object, source) {
return object && _copyObject(source, keysIn_1(source), object);
}
var _baseAssignIn = baseAssignIn;
var _cloneBuffer = createCommonjsModule(function (module, exports) {
/** Detect free variable `exports`. */
var freeExports = exports && !exports.nodeType && exports;
/** Detect free variable `module`. */
var freeModule =
freeExports &&
"object" == "object" &&
module &&
!module.nodeType &&
module;
/** Detect the popular CommonJS extension `module.exports`. */
var moduleExports = freeModule && freeModule.exports === freeExports;
/** Built-in value references. */
var Buffer = moduleExports ? _root.Buffer : undefined,
allocUnsafe = Buffer ? Buffer.allocUnsafe : undefined;
/**
* Creates a clone of `buffer`.
*
* @private
* @param {Buffer} buffer The buffer to clone.
* @param {boolean} [isDeep] Specify a deep clone.
* @returns {Buffer} Returns the cloned buffer.
*/
function cloneBuffer(buffer, isDeep) {
if (isDeep) {
return buffer.slice();
}
var length = buffer.length,
result = allocUnsafe
? allocUnsafe(length)
: new buffer.constructor(length);
buffer.copy(result);
return result;
}
module.exports = cloneBuffer;
});
/**
* Copies the values of `source` to `array`.
*
* @private
* @param {Array} source The array to copy values from.
* @param {Array} [array=[]] The array to copy values to.
* @returns {Array} Returns `array`.
*/
function copyArray(source, array) {
var index = -1,
length = source.length;
array || (array = Array(length));
while (++index < length) {
array[index] = source[index];
}
return array;
}
var _copyArray = copyArray;
/**
* Copies own symbols of `source` to `object`.
*
* @private
* @param {Object} source The object to copy symbols from.
* @param {Object} [object={}] The object to copy symbols to.
* @returns {Object} Returns `object`.
*/
function copySymbols(source, object) {
return _copyObject(source, _getSymbols(source), object);
}
var _copySymbols = copySymbols;
/** Built-in value references. */
var getPrototype = _overArg(Object.getPrototypeOf, Object);
var _getPrototype = getPrototype;
/* Built-in method references for those with the same name as other `lodash` methods. */
var nativeGetSymbols = Object.getOwnPropertySymbols;
/**
* Creates an array of the own and inherited enumerable symbols of `object`.
*
* @private
* @param {Object} object The object to query.
* @returns {Array} Returns the array of symbols.
*/
var getSymbolsIn = !nativeGetSymbols
? stubArray_1
: function (object) {
var result = [];
while (object) {
_arrayPush(result, _getSymbols(object));
object = _getPrototype(object);
}
return result;
};
var _getSymbolsIn = getSymbolsIn;
/**
* Copies own and inherited symbols of `source` to `object`.
*
* @private
* @param {Object} source The object to copy symbols from.
* @param {Object} [object={}] The object to copy symbols to.
* @returns {Object} Returns `object`.
*/
function copySymbolsIn(source, object) {
return _copyObject(source, _getSymbolsIn(source), object);
}
var _copySymbolsIn = copySymbolsIn;
/**
* Creates an array of own and inherited enumerable property names and
* symbols of `object`.
*
* @private
* @param {Object} object The object to query.
* @returns {Array} Returns the array of property names and symbols.
*/
function getAllKeysIn(object) {
return _baseGetAllKeys(object, keysIn_1, _getSymbolsIn);
}
var _getAllKeysIn = getAllKeysIn;
/** Used for built-in method references. */
var objectProto = Object.prototype;
/** Used to check objects for own properties. */
var hasOwnProperty = objectProto.hasOwnProperty;
/**
* Initializes an array clone.
*
* @private
* @param {Array} array The array to clone.
* @returns {Array} Returns the initialized clone.
*/
function initCloneArray(array) {
var length = array.length,
result = new array.constructor(length);
// Add properties assigned by `RegExp#exec`.
if (
length &&
typeof array[0] == "string" &&
hasOwnProperty.call(array, "index")
) {
result.index = array.index;
result.input = array.input;
}
return result;
}
var _initCloneArray = initCloneArray;
/**
* Creates a clone of `arrayBuffer`.
*
* @private
* @param {ArrayBuffer} arrayBuffer The array buffer to clone.
* @returns {ArrayBuffer} Returns the cloned array buffer.
*/
function cloneArrayBuffer(arrayBuffer) {
var result = new arrayBuffer.constructor(arrayBuffer.byteLength);
new _Uint8Array(result).set(new _Uint8Array(arrayBuffer));
return result;
}
var _cloneArrayBuffer = cloneArrayBuffer;
/**
* Creates a clone of `dataView`.
*
* @private
* @param {Object} dataView The data view to clone.
* @param {boolean} [isDeep] Specify a deep clone.
* @returns {Object} Returns the cloned data view.
*/
function cloneDataView(dataView, isDeep) {
var buffer = isDeep ? _cloneArrayBuffer(dataView.buffer) : dataView.buffer;
return new dataView.constructor(
buffer,
dataView.byteOffset,
dataView.byteLength
);
}
var _cloneDataView = cloneDataView;
/** Used to match `RegExp` flags from their coerced string values. */
var reFlags = /\w*$/;
/**
* Creates a clone of `regexp`.
*
* @private
* @param {Object} regexp The regexp to clone.
* @returns {Object} Returns the cloned regexp.
*/
function cloneRegExp(regexp) {
var result = new regexp.constructor(regexp.source, reFlags.exec(regexp));
result.lastIndex = regexp.lastIndex;
return result;
}
var _cloneRegExp = cloneRegExp;
/** Used to convert symbols to primitives and strings. */
var symbolProto = _Symbol ? _Symbol.prototype : undefined,
symbolValueOf = symbolProto ? symbolProto.valueOf : undefined;
/**
* Creates a clone of the `symbol` object.
*
* @private
* @param {Object} symbol The symbol object to clone.
* @returns {Object} Returns the cloned symbol object.
*/
function cloneSymbol(symbol) {
return symbolValueOf ? Object(symbolValueOf.call(symbol)) : {};
}
var _cloneSymbol = cloneSymbol;
/**
* Creates a clone of `typedArray`.
*
* @private
* @param {Object} typedArray The typed array to clone.
* @param {boolean} [isDeep] Specify a deep clone.
* @returns {Object} Returns the cloned typed array.
*/
function cloneTypedArray(typedArray, isDeep) {
var buffer = isDeep
? _cloneArrayBuffer(typedArray.buffer)
: typedArray.buffer;
return new typedArray.constructor(
buffer,
typedArray.byteOffset,
typedArray.length
);
}
var _cloneTypedArray = cloneTypedArray;
/** `Object#toString` result references. */
var boolTag$1 = "[object Boolean]",
dateTag$1 = "[object Date]",
mapTag$2 = "[object Map]",
numberTag$1 = "[object Number]",
regexpTag$1 = "[object RegExp]",
setTag$2 = "[object Set]",
stringTag$1 = "[object String]",
symbolTag$1 = "[object Symbol]";
var arrayBufferTag$1 = "[object ArrayBuffer]",
dataViewTag$1 = "[object DataView]",
float32Tag$1 = "[object Float32Array]",
float64Tag$1 = "[object Float64Array]",
int8Tag$1 = "[object Int8Array]",
int16Tag$1 = "[object Int16Array]",
int32Tag$1 = "[object Int32Array]",
uint8Tag$1 = "[object Uint8Array]",
uint8ClampedTag$1 = "[object Uint8ClampedArray]",
uint16Tag$1 = "[object Uint16Array]",
uint32Tag$1 = "[object Uint32Array]";
/**
* Initializes an object clone based on its `toStringTag`.
*
* **Note:** This function only supports cloning values with tags of
* `Boolean`, `Date`, `Error`, `Map`, `Number`, `RegExp`, `Set`, or `String`.
*
* @private
* @param {Object} object The object to clone.
* @param {string} tag The `toStringTag` of the object to clone.
* @param {boolean} [isDeep] Specify a deep clone.
* @returns {Object} Returns the initialized clone.
*/
function initCloneByTag(object, tag, isDeep) {
var Ctor = object.constructor;
switch (tag) {
case arrayBufferTag$1:
return _cloneArrayBuffer(object);
case boolTag$1:
case dateTag$1:
return new Ctor(+object);
case dataViewTag$1:
return _cloneDataView(object, isDeep);
case float32Tag$1:
case float64Tag$1:
case int8Tag$1:
case int16Tag$1:
case int32Tag$1:
case uint8Tag$1:
case uint8ClampedTag$1:
case uint16Tag$1:
case uint32Tag$1:
return _cloneTypedArray(object, isDeep);
case mapTag$2:
return new Ctor();
case numberTag$1:
case stringTag$1:
return new Ctor(object);
case regexpTag$1:
return _cloneRegExp(object);
case setTag$2:
return new Ctor();
case symbolTag$1:
return _cloneSymbol(object);
}
}
var _initCloneByTag = initCloneByTag;
/** Built-in value references. */
var objectCreate = Object.create;
/**
* The base implementation of `_.create` without support for assigning
* properties to the created object.
*
* @private
* @param {Object} proto The object to inherit from.
* @returns {Object} Returns the new object.
*/
var baseCreate = (function () {
function object() {}
return function (proto) {
if (!isObject_1(proto)) {
return {};
}
if (objectCreate) {
return objectCreate(proto);
}
object.prototype = proto;
var result = new object();
object.prototype = undefined;
return result;
};
})();
var _baseCreate = baseCreate;
/**
* Initializes an object clone.
*
* @private
* @param {Object} object The object to clone.
* @returns {Object} Returns the initialized clone.
*/
function initCloneObject(object) {
return typeof object.constructor == "function" && !_isPrototype(object)
? _baseCreate(_getPrototype(object))
: {};
}
var _initCloneObject = initCloneObject;
/** `Object#toString` result references. */
var mapTag$1 = "[object Map]";
/**
* The base implementation of `_.isMap` without Node.js optimizations.
*
* @private
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a map, else `false`.
*/
function baseIsMap(value) {
return isObjectLike_1(value) && _getTag(value) == mapTag$1;
}
var _baseIsMap = baseIsMap;
/* Node.js helper references. */
var nodeIsMap = _nodeUtil && _nodeUtil.isMap;
/**
* Checks if `value` is classified as a `Map` object.
*
* @static
* @memberOf _
* @since 4.3.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a map, else `false`.
* @example
*
* _.isMap(new Map);
* // => true
*
* _.isMap(new WeakMap);
* // => false
*/
var isMap = nodeIsMap ? _baseUnary(nodeIsMap) : _baseIsMap;
var isMap_1 = isMap;
/** `Object#toString` result references. */
var setTag$1 = "[object Set]";
/**
* The base implementation of `_.isSet` without Node.js optimizations.
*
* @private
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a set, else `false`.
*/
function baseIsSet(value) {
return isObjectLike_1(value) && _getTag(value) == setTag$1;
}
var _baseIsSet = baseIsSet;
/* Node.js helper references. */
var nodeIsSet = _nodeUtil && _nodeUtil.isSet;
/**
* Checks if `value` is classified as a `Set` object.
*
* @static
* @memberOf _
* @since 4.3.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a set, else `false`.
* @example
*
* _.isSet(new Set);
* // => true
*
* _.isSet(new WeakSet);
* // => false
*/
var isSet = nodeIsSet ? _baseUnary(nodeIsSet) : _baseIsSet;
var isSet_1 = isSet;
/** Used to compose bitmasks for cloning. */
var CLONE_DEEP_FLAG$1 = 1,
CLONE_FLAT_FLAG = 2,
CLONE_SYMBOLS_FLAG$1 = 4;
/** `Object#toString` result references. */
var argsTag = "[object Arguments]",
arrayTag = "[object Array]",
boolTag = "[object Boolean]",
dateTag = "[object Date]",
errorTag = "[object Error]",
funcTag = "[object Function]",
genTag = "[object GeneratorFunction]",
mapTag = "[object Map]",
numberTag = "[object Number]",
objectTag = "[object Object]",
regexpTag = "[object RegExp]",
setTag = "[object Set]",
stringTag = "[object String]",
symbolTag = "[object Symbol]",
weakMapTag = "[object WeakMap]";
var arrayBufferTag = "[object ArrayBuffer]",
dataViewTag = "[object DataView]",
float32Tag = "[object Float32Array]",
float64Tag = "[object Float64Array]",
int8Tag = "[object Int8Array]",
int16Tag = "[object Int16Array]",
int32Tag = "[object Int32Array]",
uint8Tag = "[object Uint8Array]",
uint8ClampedTag = "[object Uint8ClampedArray]",
uint16Tag = "[object Uint16Array]",
uint32Tag = "[object Uint32Array]";
/** Used to identify `toStringTag` values supported by `_.clone`. */
var cloneableTags = {};
cloneableTags[argsTag] =
cloneableTags[arrayTag] =
cloneableTags[arrayBufferTag] =
cloneableTags[dataViewTag] =
cloneableTags[boolTag] =
cloneableTags[dateTag] =
cloneableTags[float32Tag] =
cloneableTags[float64Tag] =
cloneableTags[int8Tag] =
cloneableTags[int16Tag] =
cloneableTags[int32Tag] =
cloneableTags[mapTag] =
cloneableTags[numberTag] =
cloneableTags[objectTag] =
cloneableTags[regexpTag] =
cloneableTags[setTag] =
cloneableTags[stringTag] =
cloneableTags[symbolTag] =
cloneableTags[uint8Tag] =
cloneableTags[uint8ClampedTag] =
cloneableTags[uint16Tag] =
cloneableTags[uint32Tag] =
true;
cloneableTags[errorTag] =
cloneableTags[funcTag] =
cloneableTags[weakMapTag] =
false;
/**
* The base implementation of `_.clone` and `_.cloneDeep` which tracks
* traversed objects.
*
* @private
* @param {*} value The value to clone.
* @param {boolean} bitmask The bitmask flags.
* 1 - Deep clone
* 2 - Flatten inherited properties
* 4 - Clone symbols
* @param {Function} [customizer] The function to customize cloning.
* @param {string} [key] The key of `value`.
* @param {Object} [object] The parent object of `value`.
* @param {Object} [stack] Tracks traversed objects and their clone counterparts.
* @returns {*} Returns the cloned value.
*/
function baseClone(value, bitmask, customizer, key, object, stack) {
var result,
isDeep = bitmask & CLONE_DEEP_FLAG$1,
isFlat = bitmask & CLONE_FLAT_FLAG,
isFull = bitmask & CLONE_SYMBOLS_FLAG$1;
if (customizer) {
result = object
? customizer(value, key, object, stack)
: customizer(value);
}
if (result !== undefined) {
return result;
}
if (!isObject_1(value)) {
return value;
}
var isArr = isArray_1(value);
if (isArr) {
result = _initCloneArray(value);
if (!isDeep) {
return _copyArray(value, result);
}
} else {
var tag = _getTag(value),
isFunc = tag == funcTag || tag == genTag;
if (isBuffer_1(value)) {
return _cloneBuffer(value, isDeep);
}
if (tag == objectTag || tag == argsTag || (isFunc && !object)) {
result = isFlat || isFunc ? {} : _initCloneObject(value);
if (!isDeep) {
return isFlat
? _copySymbolsIn(value, _baseAssignIn(result, value))
: _copySymbols(value, _baseAssign(result, value));
}
} else {
if (!cloneableTags[tag]) {
return object ? value : {};
}
result = _initCloneByTag(value, tag, isDeep);
}
}
// Check for circular references and return its corresponding clone.
stack || (stack = new _Stack());
var stacked = stack.get(value);
if (stacked) {
return stacked;
}
stack.set(value, result);
if (isSet_1(value)) {
value.forEach(function (subValue) {
result.add(
baseClone(subValue, bitmask, customizer, subValue, value, stack)
);
});
} else if (isMap_1(value)) {
value.forEach(function (subValue, key) {
result.set(
key,
baseClone(subValue, bitmask, customizer, key, value, stack)
);
});
}
var keysFunc = isFull
? isFlat
? _getAllKeysIn
: _getAllKeys
: isFlat
? keysIn_1
: keys_1;
var props = isArr ? undefined : keysFunc(value);
_arrayEach(props || value, function (subValue, key) {
if (props) {
key = subValue;
subValue = value[key];
}
// Recursively populate clone (susceptible to call stack limits).
_assignValue(
result,
key,
baseClone(subValue, bitmask, customizer, key, value, stack)
);
});
return result;
}
var _baseClone = baseClone;
/** Used to compose bitmasks for cloning. */
var CLONE_DEEP_FLAG = 1,
CLONE_SYMBOLS_FLAG = 4;
/**
* This method is like `_.clone` except that it recursively clones `value`.
*
* @static
* @memberOf _
* @since 1.0.0
* @category Lang
* @param {*} value The value to recursively clone.
* @returns {*} Returns the deep cloned value.
* @see _.clone
* @example
*
* var objects = [{ 'a': 1 }, { 'b': 2 }];
*
* var deep = _.cloneDeep(objects);
* console.log(deep[0] === objects[0]);
* // => false
*/
function cloneDeep(value) {
return _baseClone(value, CLONE_DEEP_FLAG | CLONE_SYMBOLS_FLAG);
}
var cloneDeep_1 = cloneDeep;
var cloneDeep$1 = cloneDeep_1;
var __defProp$5 = Object.defineProperty;
var __defProps$4 = Object.defineProperties;
var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
var __defNormalProp$5 = (obj, key, value) =>
key in obj
? __defProp$5(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$5 = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$5.call(b, prop)) __defNormalProp$5(a, prop, b[prop]);
if (__getOwnPropSymbols$5)
for (var prop of __getOwnPropSymbols$5(b)) {
if (__propIsEnum$5.call(b, prop)) __defNormalProp$5(a, prop, b[prop]);
}
return a;
};
var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
function getFile(rawFile, uploadFiles) {
return uploadFiles.find((file) => file.uid === rawFile.uid);
}
function genUid(seed) {
return Date.now() + seed;
}
var useHandlers = (props) => {
const uploadFiles = vue.ref([]);
const uploadRef = vue.ref(null);
let tempIndex = 1;
function abort(file) {
uploadRef.value.abort(file);
}
function clearFiles(status = ["success", "fail"]) {
uploadFiles.value = uploadFiles.value.filter((row) => {
return status.indexOf(row.status) === -1;
});
}
function handleError(err, rawFile) {
const file = getFile(rawFile, uploadFiles.value);
file.status = "fail";
uploadFiles.value.splice(uploadFiles.value.indexOf(file), 1);
props.onError(err, file, uploadFiles.value);
props.onChange(file, uploadFiles.value);
}
function handleProgress(ev, rawFile) {
const file = getFile(rawFile, uploadFiles.value);
props.onProgress(ev, file, uploadFiles.value);
file.status = "uploading";
file.percentage = ev.percent || 0;
}
function handleSuccess(res, rawFile) {
const file = getFile(rawFile, uploadFiles.value);
if (file) {
file.status = "success";
file.response = res;
props.onSuccess(res, file, uploadFiles.value);
props.onChange(file, uploadFiles.value);
}
}
function handleStart(rawFile) {
const uid = genUid(tempIndex++);
rawFile.uid = uid;
const file = {
name: rawFile.name,
percentage: 0,
status: "ready",
size: rawFile.size,
raw: rawFile,
uid,
};
if (props.listType === "picture-card" || props.listType === "picture") {
try {
file.url = URL.createObjectURL(rawFile);
} catch (err) {
console.error("[Element Error][Upload]", err);
props.onError(err, file, uploadFiles.value);
}
}
uploadFiles.value.push(file);
props.onChange(file, uploadFiles.value);
}
function handleRemove(file, raw) {
if (raw) {
file = getFile(raw, uploadFiles.value);
}
const revokeObjectURL = () => {
if (file.url && file.url.indexOf("blob:") === 0) {
URL.revokeObjectURL(file.url);
}
};
const doRemove = () => {
abort(file);
const fileList = uploadFiles.value;
fileList.splice(fileList.indexOf(file), 1);
props.onRemove(file, fileList);
revokeObjectURL();
};
if (!props.beforeRemove) {
doRemove();
} else if (typeof props.beforeRemove === "function") {
const before = props.beforeRemove(file, uploadFiles.value);
if (before instanceof Promise) {
before
.then(() => {
doRemove();
})
.catch(NOOP);
} else if (before !== false) {
doRemove();
}
}
}
function submit() {
uploadFiles.value
.filter((file) => file.status === "ready")
.forEach((file) => {
uploadRef.value.upload(file.raw);
});
}
vue.watch(
() => props.listType,
(val) => {
if (val === "picture-card" || val === "picture") {
uploadFiles.value = uploadFiles.value.map((file) => {
if (!file.url && file.raw) {
try {
file.url = URL.createObjectURL(file.raw);
} catch (err) {
props.onError(err, file, uploadFiles.value);
}
}
return file;
});
}
}
);
vue.watch(
() => props.fileList,
(fileList) => {
uploadFiles.value = fileList.map((file) => {
const cloneFile = cloneDeep$1(file);
return __spreadProps$4(__spreadValues$5({}, cloneFile), {
uid: file.uid || genUid(tempIndex++),
status: file.status || "success",
});
});
},
{
immediate: true,
deep: true,
}
);
return {
abort,
clearFiles,
handleError,
handleProgress,
handleStart,
handleSuccess,
handleRemove,
submit,
uploadFiles,
uploadRef,
};
};
var script$3 = vue.defineComponent({
name: "ElUpload",
components: {
Upload: script$4,
UploadList: script$6,
},
props: {
action: {
type: String,
required: true,
},
headers: {
type: Object,
default: () => ({}),
},
method: {
type: String,
default: "post",
},
data: {
type: Object,
default: () => ({}),
},
multiple: {
type: Boolean,
default: false,
},
name: {
type: String,
default: "file",
},
drag: {
type: Boolean,
default: false,
},
withCredentials: Boolean,
showFileList: {
type: Boolean,
default: true,
},
accept: {
type: String,
default: "",
},
type: {
type: String,
default: "select",
},
beforeUpload: {
type: Function,
default: NOOP,
},
beforeRemove: {
type: Function,
default: NOOP,
},
onRemove: {
type: Function,
default: NOOP,
},
onChange: {
type: Function,
default: NOOP,
},
onPreview: {
type: Function,
default: NOOP,
},
onSuccess: {
type: Function,
default: NOOP,
},
onProgress: {
type: Function,
default: NOOP,
},
onError: {
type: Function,
default: NOOP,
},
fileList: {
type: Array,
default: () => {
return [];
},
},
autoUpload: {
type: Boolean,
default: true,
},
listType: {
type: String,
default: "text",
},
httpRequest: {
type: Function,
default: upload,
},
disabled: Boolean,
limit: {
type: Number,
default: null,
},
onExceed: {
type: Function,
default: () => NOOP,
},
},
setup(props) {
const elForm = vue.inject(elFormKey, {});
const uploadDisabled = vue.computed(() => {
return props.disabled || elForm.disabled;
});
const {
abort,
clearFiles,
handleError,
handleProgress,
handleStart,
handleSuccess,
handleRemove,
submit,
uploadRef,
uploadFiles,
} = useHandlers(props);
vue.provide("uploader", vue.getCurrentInstance());
vue.onBeforeUnmount(() => {
uploadFiles.value.forEach((file) => {
if (file.url && file.url.indexOf("blob:") === 0) {
URL.revokeObjectURL(file.url);
}
});
});
return {
abort,
dragOver: vue.ref(false),
draging: vue.ref(false),
handleError,
handleProgress,
handleRemove,
handleStart,
handleSuccess,
uploadDisabled,
uploadFiles,
uploadRef,
submit,
clearFiles,
};
},
render() {
var _a, _b;
let uploadList;
if (this.showFileList) {
uploadList = vue.h(
script$6,
{
disabled: this.uploadDisabled,
listType: this.listType,
files: this.uploadFiles,
onRemove: this.handleRemove,
handlePreview: this.onPreview,
},
this.$slots.file
? {
default: (props) => {
return this.$slots.file({
file: props.file,
});
},
}
: null
);
} else {
uploadList = null;
}
const uploadData = {
type: this.type,
drag: this.drag,
action: this.action,
multiple: this.multiple,
"before-upload": this.beforeUpload,
"with-credentials": this.withCredentials,
headers: this.headers,
method: this.method,
name: this.name,
data: this.data,
accept: this.accept,
fileList: this.uploadFiles,
autoUpload: this.autoUpload,
listType: this.listType,
disabled: this.uploadDisabled,
limit: this.limit,
"on-exceed": this.onExceed,
"on-start": this.handleStart,
"on-progress": this.handleProgress,
"on-success": this.handleSuccess,
"on-error": this.handleError,
"on-preview": this.onPreview,
"on-remove": this.handleRemove,
"http-request": this.httpRequest,
ref: "uploadRef",
};
const trigger = this.$slots.trigger || this.$slots.default;
const uploadComponent = vue.h(script$4, uploadData, {
default: () => (trigger == null ? void 0 : trigger()),
});
return vue.h("div", [
this.listType === "picture-card" ? uploadList : null,
this.$slots.trigger
? [uploadComponent, this.$slots.default()]
: uploadComponent,
(_b = (_a = this.$slots).tip) == null ? void 0 : _b.call(_a),
this.listType !== "picture-card" ? uploadList : null,
]);
},
});
script$3.__file = "packages/components/upload/src/index.vue";
script$3.install = (app) => {
app.component(script$3.name, script$3);
};
const _Upload = script$3;
const ElUpload = _Upload;
var Components = [
ElAffix,
ElAlert,
ElAutocomplete,
ElAvatar,
ElBacktop,
ElBadge,
ElBreadcrumb,
ElBreadcrumbItem,
ElButton,
ElButtonGroup$2,
ElCalendar,
ElCard,
ElCarousel,
ElCarouselItem,
ElCascader,
ElCascaderPanel,
ElCheckTag,
ElCheckbox,
ElCheckboxButton,
ElCheckboxGroup$1,
ElCol,
ElCollapse,
ElCollapseItem,
ElCollapseTransition,
ElColorPicker,
ElConfigProvider,
ElContainer,
ElAside,
ElFooter,
ElHeader,
ElMain,
ElDatePicker,
ElDescriptions,
ElDescriptionsItem,
ElDialog,
ElDivider,
ElDrawer,
ElDropdown,
ElDropdownItem,
ElDropdownMenu,
ElEmpty,
ElForm,
ElFormItem,
ElIcon,
ElImage,
ElImageViewer,
ElInput,
ElInputNumber,
ElLink,
ElMenu,
ElMenuItem,
ElMenuItemGroup,
ElPageHeader,
ElPagination,
ElPopconfirm,
ElPopover,
ElPopper,
ElProgress,
ElRadio,
ElRadioButton,
ElRadioGroup,
ElRate,
ElResult,
ElRow,
ElScrollbar,
ElSelect,
ElOption$1,
ElOptionGroup,
ElSelectV2,
ElSkeleton,
ElSkeletonItem,
ElSlider,
ElSpace,
ElSteps,
ElStep,
ElSwitch,
ElTable,
ElTableColumn,
ElTabs,
ElTabPane,
ElTag,
ElTimePicker,
ElTimeSelect,
ElTimeline,
ElTimelineItem,
ElTooltip,
ElTransfer,
ElTree,
ElUpload,
];
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
var __async$2 = (__this, __arguments, generator) => {
return new Promise((resolve, reject) => {
var fulfilled = (value) => {
try {
step(generator.next(value));
} catch (e) {
reject(e);
}
};
var rejected = (value) => {
try {
step(generator.throw(value));
} catch (e) {
reject(e);
}
};
var step = (x) =>
x.done
? resolve(x.value)
: Promise.resolve(x.value).then(fulfilled, rejected);
step((generator = generator.apply(__this, __arguments)).next());
});
};
const SCOPE = "ElInfiniteScroll";
const CHECK_INTERVAL = 50;
const DEFAULT_DELAY = 200;
const DEFAULT_DISTANCE = 0;
const attributes = {
delay: {
type: Number,
default: DEFAULT_DELAY,
},
distance: {
type: Number,
default: DEFAULT_DISTANCE,
},
disabled: {
type: Boolean,
default: false,
},
immediate: {
type: Boolean,
default: true,
},
};
const getScrollOptions = (el, instance) => {
return Object.entries(attributes).reduce((acm, [name, option]) => {
var _a, _b;
const { type, default: defaultValue } = option;
const attrVal = el.getAttribute(`infinite-scroll-${name}`);
let value =
(_b = (_a = instance[attrVal]) != null ? _a : attrVal) != null
? _b
: defaultValue;
value = value === "false" ? false : value;
value = type(value);
acm[name] = Number.isNaN(value) ? defaultValue : value;
return acm;
}, {});
};
const destroyObserver = (el) => {
const { observer } = el[SCOPE];
if (observer) {
observer.disconnect();
delete el[SCOPE].observer;
}
};
const handleScroll = (el, cb) => {
const { container, containerEl, instance, observer, lastScrollTop } =
el[SCOPE];
const { disabled, distance } = getScrollOptions(el, instance);
const { clientHeight, scrollHeight, scrollTop } = containerEl;
const delta = scrollTop - lastScrollTop;
el[SCOPE].lastScrollTop = scrollTop;
if (observer || disabled || delta < 0) return;
let shouldTrigger = false;
if (container === el) {
shouldTrigger = scrollHeight - (clientHeight + scrollTop) <= distance;
} else {
const { clientTop, scrollHeight: height } = el;
const offsetTop = getOffsetTopDistance(el, containerEl);
shouldTrigger =
scrollTop + clientHeight >= offsetTop + clientTop + height - distance;
}
if (shouldTrigger) {
cb.call(instance);
}
};
function checkFull(el, cb) {
const { containerEl, instance } = el[SCOPE];
const { disabled } = getScrollOptions(el, instance);
if (disabled) return;
if (containerEl.scrollHeight <= containerEl.clientHeight) {
cb.call(instance);
} else {
destroyObserver(el);
}
}
const InfiniteScroll = {
mounted(el, binding) {
return __async$2(this, null, function* () {
const { instance, value: cb } = binding;
if (!isFunction$1(cb)) {
throwError(
SCOPE,
"'v-infinite-scroll' binding value must be a function"
);
}
yield vue.nextTick();
const { delay, immediate } = getScrollOptions(el, instance);
const container = getScrollContainer(el, true);
const containerEl =
container === window ? document.documentElement : container;
const onScroll = throttle_1(handleScroll.bind(null, el, cb), delay);
if (!container) return;
el[SCOPE] = {
instance,
container,
containerEl,
delay,
cb,
onScroll,
lastScrollTop: containerEl.scrollTop,
};
if (immediate) {
const observer = new MutationObserver(
throttle_1(checkFull.bind(null, el, cb), CHECK_INTERVAL)
);
el[SCOPE].observer = observer;
observer.observe(el, { childList: true, subtree: true });
checkFull(el, cb);
}
container.addEventListener("scroll", onScroll);
});
},
unmounted(el) {
const { container, onScroll } = el[SCOPE];
container == null
? void 0
: container.removeEventListener("scroll", onScroll);
destroyObserver(el);
},
};
const _InfiniteScroll = InfiniteScroll;
_InfiniteScroll.install = (app) => {
app.directive("InfiniteScroll", _InfiniteScroll);
};
const ElInfiniteScroll = _InfiniteScroll;
var __defProp$4 = Object.defineProperty;
var __defProps$3 = Object.defineProperties;
var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
var __defNormalProp$4 = (obj, key, value) =>
key in obj
? __defProp$4(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$4 = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$4.call(b, prop)) __defNormalProp$4(a, prop, b[prop]);
if (__getOwnPropSymbols$4)
for (var prop of __getOwnPropSymbols$4(b)) {
if (__propIsEnum$4.call(b, prop)) __defNormalProp$4(a, prop, b[prop]);
}
return a;
};
var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
function createLoadingComponent({ options, globalLoadingOption }) {
let vm = null;
let afterLeaveTimer = null;
const afterLeaveFlag = vue.ref(false);
const data = vue.reactive(
__spreadProps$3(__spreadValues$4({}, options), {
originalPosition: "",
originalOverflow: "",
visible: false,
})
);
function setText(text) {
data.text = text;
}
function destroySelf() {
const target = data.parent;
if (!target.vLoadingAddClassList) {
let loadingNumber = target.getAttribute("loading-number");
loadingNumber = Number.parseInt(loadingNumber) - 1;
if (!loadingNumber) {
removeClass(target, "el-loading-parent--relative");
target.removeAttribute("loading-number");
} else {
target.setAttribute("loading-number", loadingNumber.toString());
}
removeClass(target, "el-loading-parent--hidden");
}
if (vm.el && vm.el.parentNode) {
vm.el.parentNode.removeChild(vm.el);
}
}
function close() {
const target = data.parent;
target.vLoadingAddClassList = null;
if (data.fullscreen) {
globalLoadingOption.fullscreenLoading = void 0;
}
afterLeaveFlag.value = true;
clearTimeout(afterLeaveTimer);
afterLeaveTimer = window.setTimeout(() => {
if (afterLeaveFlag.value) {
afterLeaveFlag.value = false;
destroySelf();
}
}, 400);
data.visible = false;
}
function handleAfterLeave() {
if (!afterLeaveFlag.value) return;
afterLeaveFlag.value = false;
destroySelf();
}
const componentSetupConfig = __spreadProps$3(
__spreadValues$4({}, vue.toRefs(data)),
{
setText,
close,
handleAfterLeave,
}
);
const elLoadingComponent = {
name: "ElLoading",
setup() {
return componentSetupConfig;
},
render() {
const spinner = vue.h(
"svg",
__spreadValues$4(
{
class: "circular",
viewBox: this.svgViewBox ? this.svgViewBox : "25 25 50 50",
},
this.svg ? { innerHTML: this.svg } : {}
),
[
vue.h("circle", {
class: "path",
cx: "50",
cy: "50",
r: "20",
fill: "none",
}),
]
);
const noSpinner = vue.h("i", { class: this.spinner });
const spinnerText = vue.h("p", { class: "el-loading-text" }, [
this.text,
]);
return vue.h(
vue.Transition,
{
name: "el-loading-fade",
onAfterLeave: this.handleAfterLeave,
},
{
default: vue.withCtx(() => [
vue.withDirectives(
vue.createVNode(
"div",
{
style: {
backgroundColor: this.background || "",
},
class: [
"el-loading-mask",
this.customClass,
this.fullscreen ? "is-fullscreen" : "",
],
},
[
vue.h(
"div",
{
class: "el-loading-spinner",
},
[
!this.spinner ? spinner : noSpinner,
this.text ? spinnerText : null,
]
),
]
),
[[vue.vShow, this.visible]]
),
]),
}
);
},
};
vm = vue.createVNode(elLoadingComponent);
vue.render(vm, document.createElement("div"));
return __spreadProps$3(__spreadValues$4({}, componentSetupConfig), {
vm,
get $el() {
return vm.el;
},
});
}
var __defProp$3 = Object.defineProperty;
var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
var __defNormalProp$3 = (obj, key, value) =>
key in obj
? __defProp$3(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$3 = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$3.call(b, prop)) __defNormalProp$3(a, prop, b[prop]);
if (__getOwnPropSymbols$3)
for (var prop of __getOwnPropSymbols$3(b)) {
if (__propIsEnum$3.call(b, prop)) __defNormalProp$3(a, prop, b[prop]);
}
return a;
};
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
var __async$1 = (__this, __arguments, generator) => {
return new Promise((resolve, reject) => {
var fulfilled = (value) => {
try {
step(generator.next(value));
} catch (e) {
reject(e);
}
};
var rejected = (value) => {
try {
step(generator.throw(value));
} catch (e) {
reject(e);
}
};
var step = (x) =>
x.done
? resolve(x.value)
: Promise.resolve(x.value).then(fulfilled, rejected);
step((generator = generator.apply(__this, __arguments)).next());
});
};
const defaults = {
parent: null,
background: "",
svg: null,
svgViewBox: null,
spinner: false,
text: null,
fullscreen: true,
body: false,
lock: false,
customClass: "",
};
const globalLoadingOption = {
fullscreenLoading: null,
};
const addStyle = (options, parent, instance) =>
__async$1(undefined, null, function* () {
const maskStyle = {};
if (options.fullscreen) {
instance.originalPosition.value = getStyle(document.body, "position");
instance.originalOverflow.value = getStyle(document.body, "overflow");
maskStyle.zIndex = PopupManager.nextZIndex();
} else if (options.body) {
instance.originalPosition.value = getStyle(document.body, "position");
yield vue.nextTick();
["top", "left"].forEach((property) => {
const scroll = property === "top" ? "scrollTop" : "scrollLeft";
maskStyle[property] = `${
options.target.getBoundingClientRect()[property] +
document.body[scroll] +
document.documentElement[scroll] -
parseInt(getStyle(document.body, `margin-${property}`), 10)
}px`;
});
["height", "width"].forEach((property) => {
maskStyle[property] = `${
options.target.getBoundingClientRect()[property]
}px`;
});
} else {
instance.originalPosition.value = getStyle(parent, "position");
}
Object.keys(maskStyle).forEach((property) => {
instance.$el.style[property] = maskStyle[property];
});
});
const addClassList = (options, parent, instance) => {
if (
instance.originalPosition.value !== "absolute" &&
instance.originalPosition.value !== "fixed"
) {
addClass(parent, "el-loading-parent--relative");
} else {
removeClass(parent, "el-loading-parent--relative");
}
if (options.fullscreen && options.lock) {
addClass(parent, "el-loading-parent--hidden");
} else {
removeClass(parent, "el-loading-parent--hidden");
}
};
const Loading = function (options = {}) {
if (isServer) return;
options = __spreadValues$3(__spreadValues$3({}, defaults), options);
if (typeof options.target === "string") {
options.target = document.querySelector(options.target);
}
options.target = options.target || document.body;
if (options.target !== document.body) {
options.fullscreen = false;
} else {
options.body = true;
}
if (options.fullscreen && globalLoadingOption.fullscreenLoading) {
globalLoadingOption.fullscreenLoading.close();
}
const parent = options.body ? document.body : options.target;
options.parent = parent;
const instance = createLoadingComponent({
options,
globalLoadingOption,
});
addStyle(options, parent, instance);
addClassList(options, parent, instance);
options.parent.vLoadingAddClassList = () => {
addClassList(options, parent, instance);
};
let loadingNumber = parent.getAttribute("loading-number");
if (!loadingNumber) {
loadingNumber = 1;
} else {
loadingNumber = Number.parseInt(loadingNumber) + 1;
}
parent.setAttribute("loading-number", loadingNumber.toString());
parent.appendChild(instance.$el);
vue.nextTick().then(() => {
instance.visible.value = hasOwn(options, "visible")
? options.visible
: true;
});
if (options.fullscreen) {
globalLoadingOption.fullscreenLoading = instance;
}
return instance;
};
const INSTANCE_NAME = "ElLoading";
const createInstance = (el, binding) => {
const textExr = el.getAttribute("element-loading-text");
const spinnerExr = el.getAttribute("element-loading-spinner");
const svgExr = el.getAttribute("element-loading-svg");
const svgViewBoxExr = el.getAttribute("element-loading-svg-view-box");
const backgroundExr = el.getAttribute("element-loading-background");
const customClassExr = el.getAttribute("element-loading-custom-class");
const vm = binding.instance;
el[INSTANCE_NAME] = Loading({
text: (vm && vm[textExr]) || textExr,
svg: (vm && vm[svgExr]) || svgExr,
svgViewBox: (vm && vm[svgViewBoxExr]) || svgViewBoxExr,
spinner: (vm && vm[spinnerExr]) || spinnerExr,
background: (vm && vm[backgroundExr]) || backgroundExr,
customClass: (vm && vm[customClassExr]) || customClassExr,
fullscreen: !!binding.modifiers.fullscreen,
target: binding.modifiers.fullscreen ? null : el,
body: !!binding.modifiers.body,
visible: true,
lock: !!binding.modifiers.lock,
});
};
const vLoading = {
mounted(el, binding) {
if (binding.value) {
createInstance(el, binding);
}
},
updated(el, binding) {
const instance = el[INSTANCE_NAME];
if (binding.oldValue !== binding.value) {
if (binding.value) {
createInstance(el, binding);
} else {
instance == null ? void 0 : instance.close();
}
}
},
unmounted(el) {
var _a;
(_a = el[INSTANCE_NAME]) == null ? void 0 : _a.close();
},
};
const ElLoading = {
install(app) {
app.directive("loading", vLoading);
app.config.globalProperties.$loading = Loading;
},
directive: vLoading,
service: Loading,
};
const ElLoadingDirective = vLoading;
const ElLoadingService = Loading;
const messageTypes = ["success", "info", "warning", "error"];
const messageProps = {
customClass: {
type: String,
default: "",
},
center: {
type: Boolean,
default: false,
},
dangerouslyUseHTMLString: {
type: Boolean,
default: false,
},
duration: {
type: Number,
default: 3e3,
},
iconClass: {
type: String,
default: "",
},
id: {
type: String,
default: "",
},
message: buildProp({
type: definePropType([String, Object]),
default: "",
}),
onClose: buildProp({
type: definePropType(Function),
required: false,
}),
showClose: {
type: Boolean,
default: false,
},
type: buildProp({
type: String,
values: messageTypes,
default: "info",
}),
offset: {
type: Number,
default: 20,
},
zIndex: {
type: Number,
default: 0,
},
};
const messageEmits = {
destroy: () => true,
};
const typeMap$1 = {
success: "el-icon-success",
info: "el-icon-info",
warning: "el-icon-warning",
error: "el-icon-error",
};
var script$2 = vue.defineComponent({
name: "ElMessage",
props: messageProps,
emits: messageEmits,
setup(props) {
const visible = vue.ref(false);
let timer = void 0;
const typeClass = vue.computed(() => {
var _a;
return props.iconClass
? props.iconClass
: (_a = typeMap$1[props.type]) != null
? _a
: "";
});
const customStyle = vue.computed(() => ({
top: `${props.offset}px`,
zIndex: props.zIndex,
}));
function startTimer() {
if (props.duration > 0) {
({ stop: timer } = useTimeoutFn(() => {
if (visible.value) close();
}, props.duration));
}
}
function clearTimer() {
timer == null ? void 0 : timer();
}
function close() {
visible.value = false;
}
function keydown({ code }) {
if (code === EVENT_CODE.esc) {
if (visible.value) {
close();
}
} else {
startTimer();
}
}
vue.onMounted(() => {
startTimer();
visible.value = true;
});
useEventListener(document, "keydown", keydown);
return {
typeClass,
customStyle,
visible,
close,
clearTimer,
startTimer,
};
},
});
const _hoisted_1$2 = ["id"];
const _hoisted_2$2 = {
key: 0,
class: "el-message__content",
};
const _hoisted_3$2 = ["innerHTML"];
function render$2(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createBlock(
vue.Transition,
{
name: "el-message-fade",
onBeforeLeave: _ctx.onClose,
onAfterLeave:
_cache[3] || (_cache[3] = ($event) => _ctx.$emit("destroy")),
},
{
default: vue.withCtx(() => [
vue.withDirectives(
vue.createElementVNode(
"div",
{
id: _ctx.id,
class: vue.normalizeClass([
"el-message",
_ctx.type && !_ctx.iconClass
? `el-message--${_ctx.type}`
: "",
_ctx.center ? "is-center" : "",
_ctx.showClose ? "is-closable" : "",
_ctx.customClass,
]),
style: vue.normalizeStyle(_ctx.customStyle),
role: "alert",
onMouseenter:
_cache[1] ||
(_cache[1] = (...args) =>
_ctx.clearTimer && _ctx.clearTimer(...args)),
onMouseleave:
_cache[2] ||
(_cache[2] = (...args) =>
_ctx.startTimer && _ctx.startTimer(...args)),
},
[
_ctx.type || _ctx.iconClass
? (vue.openBlock(),
vue.createElementBlock(
"i",
{
key: 0,
class: vue.normalizeClass([
"el-message__icon",
_ctx.typeClass,
_ctx.iconClass,
]),
},
null,
2
))
: vue.createCommentVNode("v-if", true),
vue.renderSlot(_ctx.$slots, "default", {}, () => [
!_ctx.dangerouslyUseHTMLString
? (vue.openBlock(),
vue.createElementBlock(
"p",
_hoisted_2$2,
vue.toDisplayString(_ctx.message),
1
))
: (vue.openBlock(),
vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
vue.createCommentVNode(
" Caution here, message could've been compromised, never use user's input as message "
),
vue.createElementVNode(
"p",
{
class: "el-message__content",
innerHTML: _ctx.message,
},
null,
8,
_hoisted_3$2
),
],
2112
)),
]),
_ctx.showClose
? (vue.openBlock(),
vue.createElementBlock("div", {
key: 1,
class: "el-message__closeBtn el-icon-close",
onClick:
_cache[0] ||
(_cache[0] = vue.withModifiers(
(...args) => _ctx.close && _ctx.close(...args),
["stop"]
)),
}))
: vue.createCommentVNode("v-if", true),
],
46,
_hoisted_1$2
),
[[vue.vShow, _ctx.visible]]
),
]),
_: 3,
},
8,
["onBeforeLeave"]
)
);
}
script$2.render = render$2;
script$2.__file = "packages/components/message/src/message.vue";
var __defProp$2 = Object.defineProperty;
var __defProps$2 = Object.defineProperties;
var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
var __defNormalProp$2 = (obj, key, value) =>
key in obj
? __defProp$2(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$2 = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$2.call(b, prop)) __defNormalProp$2(a, prop, b[prop]);
if (__getOwnPropSymbols$2)
for (var prop of __getOwnPropSymbols$2(b)) {
if (__propIsEnum$2.call(b, prop)) __defNormalProp$2(a, prop, b[prop]);
}
return a;
};
var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
const instances = [];
let seed$1 = 1;
const message = function (options = {}) {
if (isServer) return { close: () => void 0 };
if (typeof options === "string" || vue.isVNode(options)) {
options = { message: options };
}
let verticalOffset = options.offset || 20;
instances.forEach(({ vm: vm2 }) => {
var _a;
verticalOffset +=
(((_a = vm2.el) == null ? void 0 : _a.offsetHeight) || 0) + 16;
});
verticalOffset += 16;
const id = `message_${seed$1++}`;
const userOnClose = options.onClose;
const props = __spreadProps$2(
__spreadValues$2(
{
zIndex: PopupManager.nextZIndex(),
offset: verticalOffset,
},
options
),
{
id,
onClose: () => {
close$1(id, userOnClose);
},
}
);
const container = document.createElement("div");
container.className = `container_${id}`;
const message2 = props.message;
const vm = vue.createVNode(
script$2,
props,
vue.isVNode(props.message) ? { default: () => message2 } : null
);
vm.props.onDestroy = () => {
vue.render(null, container);
};
vue.render(vm, container);
instances.push({ vm });
document.body.appendChild(container.firstElementChild);
return {
close: () => (vm.component.proxy.visible = false),
};
};
messageTypes.forEach((type) => {
message[type] = (options = {}) => {
if (typeof options === "string" || vue.isVNode(options)) {
options = {
message: options,
};
}
return message(
__spreadProps$2(__spreadValues$2({}, options), {
type,
})
);
};
});
function close$1(id, userOnClose) {
const idx = instances.findIndex(
({ vm: vm2 }) => id === vm2.component.props.id
);
if (idx === -1) return;
const { vm } = instances[idx];
if (!vm) return;
userOnClose == null ? void 0 : userOnClose(vm);
const removedHeight = vm.el.offsetHeight;
instances.splice(idx, 1);
const len = instances.length;
if (len < 1) return;
for (let i = idx; i < len; i++) {
const pos =
parseInt(instances[i].vm.el.style["top"], 10) - removedHeight - 16;
instances[i].vm.component.props.offset = pos;
}
}
function closeAll$1() {
var _a;
for (let i = instances.length - 1; i >= 0; i--) {
const instance = instances[i].vm.component;
(_a = instance == null ? void 0 : instance.proxy) == null
? void 0
: _a.close();
}
}
message.closeAll = closeAll$1;
const ElMessage = withInstallFunction(message, "$message");
var __defProp$1 = Object.defineProperty;
var __defProps$1 = Object.defineProperties;
var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
var __defNormalProp$1 = (obj, key, value) =>
key in obj
? __defProp$1(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues$1 = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$1.call(b, prop)) __defNormalProp$1(a, prop, b[prop]);
if (__getOwnPropSymbols$1)
for (var prop of __getOwnPropSymbols$1(b)) {
if (__propIsEnum$1.call(b, prop)) __defNormalProp$1(a, prop, b[prop]);
}
return a;
};
var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
var __async = (__this, __arguments, generator) => {
return new Promise((resolve, reject) => {
var fulfilled = (value) => {
try {
step(generator.next(value));
} catch (e) {
reject(e);
}
};
var rejected = (value) => {
try {
step(generator.throw(value));
} catch (e) {
reject(e);
}
};
var step = (x) =>
x.done
? resolve(x.value)
: Promise.resolve(x.value).then(fulfilled, rejected);
step((generator = generator.apply(__this, __arguments)).next());
});
};
const TypeMap = {
success: "success",
info: "info",
warning: "warning",
error: "error",
};
var script$1 = vue.defineComponent({
name: "ElMessageBox",
directives: {
TrapFocus,
},
components: {
ElButton,
ElInput: _Input,
ElOverlay,
},
inheritAttrs: false,
props: {
buttonSize: {
type: String,
validator: isValidComponentSize,
},
modal: {
type: Boolean,
default: true,
},
lockScroll: {
type: Boolean,
default: true,
},
showClose: {
type: Boolean,
default: true,
},
closeOnClickModal: {
type: Boolean,
default: true,
},
closeOnPressEscape: {
type: Boolean,
default: true,
},
closeOnHashChange: {
type: Boolean,
default: true,
},
center: Boolean,
roundButton: {
default: false,
type: Boolean,
},
container: {
type: String,
default: "body",
},
boxType: {
type: String,
default: "",
},
},
emits: ["vanish", "action"],
setup(props, { emit }) {
const { t } = useLocaleInject();
const visible = vue.ref(false);
const state = vue.reactive({
beforeClose: null,
callback: null,
cancelButtonText: "",
cancelButtonClass: "",
confirmButtonText: "",
confirmButtonClass: "",
customClass: "",
customStyle: {},
dangerouslyUseHTMLString: false,
distinguishCancelAndClose: false,
iconClass: "",
inputPattern: null,
inputPlaceholder: "",
inputType: "text",
inputValue: null,
inputValidator: null,
inputErrorMessage: "",
message: null,
modalFade: true,
modalClass: "",
showCancelButton: false,
showConfirmButton: true,
type: "",
title: void 0,
showInput: false,
action: "",
confirmButtonLoading: false,
cancelButtonLoading: false,
confirmButtonDisabled: false,
editorErrorMessage: "",
validateError: false,
zIndex: PopupManager.nextZIndex(),
});
const icon = vue.computed(
() =>
state.iconClass ||
(state.type && TypeMap[state.type]
? `el-icon-${TypeMap[state.type]}`
: "")
);
const hasMessage = vue.computed(() => !!state.message);
const inputRef = vue.ref(null);
const confirmRef = vue.ref(null);
const confirmButtonClasses = vue.computed(
() => `el-button--primary ${state.confirmButtonClass}`
);
vue.watch(
() => state.inputValue,
(val) =>
__async(this, null, function* () {
yield vue.nextTick();
if (props.boxType === "prompt" && val !== null) {
validate();
}
}),
{ immediate: true }
);
vue.watch(
() => visible.value,
(val) => {
if (val) {
if (props.boxType === "alert" || props.boxType === "confirm") {
vue.nextTick().then(() => {
var _a, _b, _c;
(_c =
(_b = (_a = confirmRef.value) == null ? void 0 : _a.$el) ==
null
? void 0
: _b.focus) == null
? void 0
: _c.call(_b);
});
}
state.zIndex = PopupManager.nextZIndex();
}
if (props.boxType !== "prompt") return;
if (val) {
vue.nextTick().then(() => {
if (inputRef.value && inputRef.value.$el) {
getInputElement().focus();
}
});
} else {
state.editorErrorMessage = "";
state.validateError = false;
}
}
);
vue.onMounted(() =>
__async(this, null, function* () {
yield vue.nextTick();
if (props.closeOnHashChange) {
on(window, "hashchange", doClose);
}
})
);
vue.onBeforeUnmount(() => {
if (props.closeOnHashChange) {
off(window, "hashchange", doClose);
}
});
function doClose() {
if (!visible.value) return;
visible.value = false;
vue.nextTick(() => {
if (state.action) emit("action", state.action);
});
}
const handleWrapperClick = () => {
if (props.closeOnClickModal) {
handleAction(state.distinguishCancelAndClose ? "close" : "cancel");
}
};
const handleInputEnter = () => {
if (state.inputType !== "textarea") {
return handleAction("confirm");
}
};
const handleAction = (action) => {
var _a;
if (props.boxType === "prompt" && action === "confirm" && !validate()) {
return;
}
state.action = action;
if (state.beforeClose) {
(_a = state.beforeClose) == null
? void 0
: _a.call(state, action, state, doClose);
} else {
doClose();
}
};
const validate = () => {
if (props.boxType === "prompt") {
const inputPattern = state.inputPattern;
if (inputPattern && !inputPattern.test(state.inputValue || "")) {
state.editorErrorMessage =
state.inputErrorMessage || t("el.messagebox.error");
state.validateError = true;
return false;
}
const inputValidator = state.inputValidator;
if (typeof inputValidator === "function") {
const validateResult = inputValidator(state.inputValue);
if (validateResult === false) {
state.editorErrorMessage =
state.inputErrorMessage || t("el.messagebox.error");
state.validateError = true;
return false;
}
if (typeof validateResult === "string") {
state.editorErrorMessage = validateResult;
state.validateError = true;
return false;
}
}
}
state.editorErrorMessage = "";
state.validateError = false;
return true;
};
const getInputElement = () => {
const inputRefs = inputRef.value.$refs;
return inputRefs.input || inputRefs.textarea;
};
const handleClose = () => {
handleAction("close");
};
if (props.closeOnPressEscape) {
useModal(
{
handleClose,
},
visible
);
} else {
usePreventGlobal(visible, "keydown", (e) => e.code === EVENT_CODE.esc);
}
if (props.lockScroll) {
useLockScreen(visible);
}
useRestoreActive(visible);
return __spreadProps$1(__spreadValues$1({}, vue.toRefs(state)), {
visible,
hasMessage,
icon,
confirmButtonClasses,
inputRef,
confirmRef,
doClose,
handleClose,
handleWrapperClick,
handleInputEnter,
handleAction,
t,
});
},
});
const _hoisted_1$1 = ["aria-label"];
const _hoisted_2$1 = {
key: 0,
class: "el-message-box__header",
};
const _hoisted_3$1 = { class: "el-message-box__title" };
const _hoisted_4$1 = /* @__PURE__ */ vue.createElementVNode(
"i",
{ class: "el-message-box__close el-icon-close" },
null,
-1
);
const _hoisted_5 = [_hoisted_4$1];
const _hoisted_6 = { class: "el-message-box__content" };
const _hoisted_7 = { class: "el-message-box__container" };
const _hoisted_8 = {
key: 1,
class: "el-message-box__message",
};
const _hoisted_9 = { key: 0 };
const _hoisted_10 = ["innerHTML"];
const _hoisted_11 = { class: "el-message-box__input" };
const _hoisted_12 = { class: "el-message-box__btns" };
function render$1(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_input = vue.resolveComponent("el-input");
const _component_el_button = vue.resolveComponent("el-button");
const _component_el_overlay = vue.resolveComponent("el-overlay");
const _directive_trap_focus = vue.resolveDirective("trap-focus");
return (
vue.openBlock(),
vue.createBlock(
vue.Transition,
{
name: "fade-in-linear",
onAfterLeave:
_cache[7] || (_cache[7] = ($event) => _ctx.$emit("vanish")),
},
{
default: vue.withCtx(() => [
vue.withDirectives(
vue.createVNode(
_component_el_overlay,
{
"z-index": _ctx.zIndex,
"overlay-class": ["is-message-box", _ctx.modalClass],
mask: _ctx.modal,
onClick: vue.withModifiers(_ctx.handleWrapperClick, ["self"]),
},
{
default: vue.withCtx(() => [
vue.withDirectives(
vue.createElementVNode(
"div",
{
ref: "root",
"aria-label": _ctx.title || "dialog",
"aria-modal": "true",
class: vue.normalizeClass([
"el-message-box",
_ctx.customClass,
{ "el-message-box--center": _ctx.center },
]),
style: vue.normalizeStyle(_ctx.customStyle),
},
[
_ctx.title !== null && _ctx.title !== void 0
? (vue.openBlock(),
vue.createElementBlock("div", _hoisted_2$1, [
vue.createElementVNode("div", _hoisted_3$1, [
_ctx.icon && _ctx.center
? (vue.openBlock(),
vue.createElementBlock(
"div",
{
key: 0,
class: vue.normalizeClass([
"el-message-box__status",
_ctx.icon,
]),
},
null,
2
))
: vue.createCommentVNode("v-if", true),
vue.createElementVNode(
"span",
null,
vue.toDisplayString(_ctx.title),
1
),
]),
_ctx.showClose
? (vue.openBlock(),
vue.createElementBlock(
"button",
{
key: 0,
type: "button",
class: "el-message-box__headerbtn",
"aria-label": "Close",
onClick:
_cache[0] ||
(_cache[0] = ($event) =>
_ctx.handleAction(
_ctx.distinguishCancelAndClose
? "close"
: "cancel"
)),
onKeydown:
_cache[1] ||
(_cache[1] = vue.withKeys(
vue.withModifiers(
($event) =>
_ctx.handleAction(
_ctx.distinguishCancelAndClose
? "close"
: "cancel"
),
["prevent"]
),
["enter"]
)),
},
_hoisted_5,
32
))
: vue.createCommentVNode("v-if", true),
]))
: vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", _hoisted_6, [
vue.createElementVNode("div", _hoisted_7, [
_ctx.icon && !_ctx.center && _ctx.hasMessage
? (vue.openBlock(),
vue.createElementBlock(
"div",
{
key: 0,
class: vue.normalizeClass([
"el-message-box__status",
_ctx.icon,
]),
},
null,
2
))
: vue.createCommentVNode("v-if", true),
_ctx.hasMessage
? (vue.openBlock(),
vue.createElementBlock("div", _hoisted_8, [
vue.renderSlot(
_ctx.$slots,
"default",
{},
() => [
!_ctx.dangerouslyUseHTMLString
? (vue.openBlock(),
vue.createElementBlock(
"p",
_hoisted_9,
vue.toDisplayString(_ctx.message),
1
))
: (vue.openBlock(),
vue.createElementBlock(
"p",
{
key: 1,
innerHTML: _ctx.message,
},
null,
8,
_hoisted_10
)),
]
),
]))
: vue.createCommentVNode("v-if", true),
]),
vue.withDirectives(
vue.createElementVNode(
"div",
_hoisted_11,
[
vue.createVNode(
_component_el_input,
{
ref: "inputRef",
modelValue: _ctx.inputValue,
"onUpdate:modelValue":
_cache[2] ||
(_cache[2] = ($event) =>
(_ctx.inputValue = $event)),
type: _ctx.inputType,
placeholder: _ctx.inputPlaceholder,
class: vue.normalizeClass({
invalid: _ctx.validateError,
}),
onKeydown: vue.withKeys(
vue.withModifiers(
_ctx.handleInputEnter,
["prevent"]
),
["enter"]
),
},
null,
8,
[
"modelValue",
"type",
"placeholder",
"class",
"onKeydown",
]
),
vue.createElementVNode(
"div",
{
class: "el-message-box__errormsg",
style: vue.normalizeStyle({
visibility: !!_ctx.editorErrorMessage
? "visible"
: "hidden",
}),
},
vue.toDisplayString(
_ctx.editorErrorMessage
),
5
),
],
512
),
[[vue.vShow, _ctx.showInput]]
),
]),
vue.createElementVNode("div", _hoisted_12, [
_ctx.showCancelButton
? (vue.openBlock(),
vue.createBlock(
_component_el_button,
{
key: 0,
loading: _ctx.cancelButtonLoading,
class: vue.normalizeClass([
_ctx.cancelButtonClass,
]),
round: _ctx.roundButton,
size: _ctx.buttonSize || "small",
onClick:
_cache[3] ||
(_cache[3] = ($event) =>
_ctx.handleAction("cancel")),
onKeydown:
_cache[4] ||
(_cache[4] = vue.withKeys(
vue.withModifiers(
($event) =>
_ctx.handleAction("cancel"),
["prevent"]
),
["enter"]
)),
},
{
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(
_ctx.cancelButtonText ||
_ctx.t("el.messagebox.cancel")
),
1
),
]),
_: 1,
},
8,
["loading", "class", "round", "size"]
))
: vue.createCommentVNode("v-if", true),
vue.withDirectives(
vue.createVNode(
_component_el_button,
{
ref: "confirmRef",
loading: _ctx.confirmButtonLoading,
class: vue.normalizeClass([
_ctx.confirmButtonClasses,
]),
round: _ctx.roundButton,
disabled: _ctx.confirmButtonDisabled,
size: _ctx.buttonSize || "small",
onClick:
_cache[5] ||
(_cache[5] = ($event) =>
_ctx.handleAction("confirm")),
onKeydown:
_cache[6] ||
(_cache[6] = vue.withKeys(
vue.withModifiers(
($event) =>
_ctx.handleAction("confirm"),
["prevent"]
),
["enter"]
)),
},
{
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(
_ctx.confirmButtonText ||
_ctx.t("el.messagebox.confirm")
),
1
),
]),
_: 1,
},
8,
[
"loading",
"class",
"round",
"disabled",
"size",
]
),
[[vue.vShow, _ctx.showConfirmButton]]
),
]),
],
14,
_hoisted_1$1
),
[[_directive_trap_focus]]
),
]),
_: 3,
},
8,
["z-index", "overlay-class", "mask", "onClick"]
),
[[vue.vShow, _ctx.visible]]
),
]),
_: 3,
}
)
);
}
script$1.render = render$1;
script$1.__file = "packages/components/message-box/src/index.vue";
const messageInstance = new Map();
const initInstance = (props, container) => {
const vnode = vue.h(script$1, props);
vue.render(vnode, container);
document.body.appendChild(container.firstElementChild);
return vnode.component;
};
const genContainer = () => {
return document.createElement("div");
};
const showMessage = (options) => {
const container = genContainer();
options.onVanish = () => {
vue.render(null, container);
messageInstance.delete(vm);
};
options.onAction = (action) => {
const currentMsg = messageInstance.get(vm);
let resolve;
if (options.showInput) {
resolve = { value: vm.inputValue, action };
} else {
resolve = action;
}
if (options.callback) {
options.callback(resolve, instance.proxy);
} else {
if (action === "cancel" || action === "close") {
if (options.distinguishCancelAndClose && action !== "cancel") {
currentMsg.reject("close");
} else {
currentMsg.reject("cancel");
}
} else {
currentMsg.resolve(resolve);
}
}
};
const instance = initInstance(options, container);
const vm = instance.proxy;
for (const prop in options) {
if (hasOwn(options, prop) && !hasOwn(vm.$props, prop)) {
vm[prop] = options[prop];
}
}
vue.watch(
() => vm.message,
(newVal, oldVal) => {
if (vue.isVNode(newVal)) {
instance.slots.default = () => [newVal];
} else if (vue.isVNode(oldVal) && !vue.isVNode(newVal)) {
delete instance.slots.default;
}
},
{
immediate: true,
}
);
vm.visible = true;
return vm;
};
function MessageBox(options) {
if (isServer) return;
let callback;
if (isString$1(options) || vue.isVNode(options)) {
options = {
message: options,
};
} else {
callback = options.callback;
}
return new Promise((resolve, reject) => {
const vm = showMessage(options);
messageInstance.set(vm, {
options,
callback,
resolve,
reject,
});
});
}
MessageBox.alert = (message, title, options) => {
if (typeof title === "object") {
options = title;
title = "";
} else if (title === void 0) {
title = "";
}
return MessageBox(
Object.assign(
{
title,
message,
type: "",
closeOnPressEscape: false,
closeOnClickModal: false,
},
options,
{
boxType: "alert",
}
)
);
};
MessageBox.confirm = (message, title, options) => {
if (typeof title === "object") {
options = title;
title = "";
} else if (title === void 0) {
title = "";
}
return MessageBox(
Object.assign(
{
title,
message,
type: "",
showCancelButton: true,
},
options,
{
boxType: "confirm",
}
)
);
};
MessageBox.prompt = (message, title, options) => {
if (typeof title === "object") {
options = title;
title = "";
} else if (title === void 0) {
title = "";
}
return MessageBox(
Object.assign(
{
title,
message,
showCancelButton: true,
showInput: true,
type: "",
},
options,
{
boxType: "prompt",
}
)
);
};
MessageBox.close = () => {
messageInstance.forEach((_, vm) => {
vm.doClose();
});
messageInstance.clear();
};
const _MessageBox = MessageBox;
_MessageBox.install = (app) => {
app.config.globalProperties.$msgbox = _MessageBox;
app.config.globalProperties.$messageBox = _MessageBox;
app.config.globalProperties.$alert = _MessageBox.alert;
app.config.globalProperties.$confirm = _MessageBox.confirm;
app.config.globalProperties.$prompt = _MessageBox.prompt;
};
const ElMessageBox = _MessageBox;
const notificationTypes = ["success", "info", "warning", "error"];
const notificationProps = {
customClass: {
type: String,
default: "",
},
dangerouslyUseHTMLString: {
type: Boolean,
default: false,
},
duration: {
type: Number,
default: 4500,
},
iconClass: {
type: String,
default: "",
},
id: {
type: String,
default: "",
},
message: buildProp({
type: definePropType([String, Object]),
default: "",
}),
offset: {
type: Number,
default: 0,
},
onClick: buildProp({
type: definePropType(Function),
default: () => void 0,
}),
onClose: buildProp({
type: definePropType(Function),
required: true,
}),
position: buildProp({
type: String,
values: ["top-right", "top-left", "bottom-right", "bottom-left"],
default: "top-right",
}),
showClose: {
type: Boolean,
default: true,
},
title: {
type: String,
default: "",
},
type: buildProp({
type: String,
values: [...notificationTypes, ""],
default: "",
}),
zIndex: {
type: Number,
default: 0,
},
};
const notificationEmits = {
destroy: () => true,
};
const typeMap = {
"": "",
success: "el-icon-success",
info: "el-icon-info",
warning: "el-icon-warning",
error: "el-icon-error",
};
var script = vue.defineComponent({
name: "ElNotification",
props: notificationProps,
emits: notificationEmits,
setup(props) {
const visible = vue.ref(false);
let timer = void 0;
const typeClass = vue.computed(() => typeMap[props.type]);
const horizontalClass = vue.computed(() =>
props.position.endsWith("right") ? "right" : "left"
);
const verticalProperty = vue.computed(() =>
props.position.startsWith("top") ? "top" : "bottom"
);
const positionStyle = vue.computed(() => {
return {
[verticalProperty.value]: `${props.offset}px`,
zIndex: props.zIndex,
};
});
function startTimer() {
if (props.duration > 0) {
({ stop: timer } = useTimeoutFn(() => {
if (visible.value) close();
}, props.duration));
}
}
function clearTimer() {
timer == null ? void 0 : timer();
}
function close() {
visible.value = false;
}
function onKeydown({ code }) {
if (code === EVENT_CODE.delete || code === EVENT_CODE.backspace) {
clearTimer();
} else if (code === EVENT_CODE.esc) {
if (visible.value) {
close();
}
} else {
startTimer();
}
}
vue.onMounted(() => {
startTimer();
visible.value = true;
});
useEventListener(document, "keydown", onKeydown);
return {
horizontalClass,
typeClass,
positionStyle,
visible,
close,
clearTimer,
startTimer,
};
},
});
const _hoisted_1 = ["id"];
const _hoisted_2 = ["textContent"];
const _hoisted_3 = { key: 0 };
const _hoisted_4 = ["innerHTML"];
function render(_ctx, _cache, $props, $setup, $data, $options) {
return (
vue.openBlock(),
vue.createBlock(
vue.Transition,
{
name: "el-notification-fade",
onBeforeLeave: _ctx.onClose,
onAfterLeave:
_cache[4] || (_cache[4] = ($event) => _ctx.$emit("destroy")),
},
{
default: vue.withCtx(() => [
vue.withDirectives(
vue.createElementVNode(
"div",
{
id: _ctx.id,
class: vue.normalizeClass([
"el-notification",
_ctx.customClass,
_ctx.horizontalClass,
]),
style: vue.normalizeStyle(_ctx.positionStyle),
role: "alert",
onMouseenter:
_cache[1] ||
(_cache[1] = (...args) =>
_ctx.clearTimer && _ctx.clearTimer(...args)),
onMouseleave:
_cache[2] ||
(_cache[2] = (...args) =>
_ctx.startTimer && _ctx.startTimer(...args)),
onClick:
_cache[3] ||
(_cache[3] = (...args) =>
_ctx.onClick && _ctx.onClick(...args)),
},
[
_ctx.type || _ctx.iconClass
? (vue.openBlock(),
vue.createElementBlock(
"i",
{
key: 0,
class: vue.normalizeClass([
"el-notification__icon",
[_ctx.typeClass, _ctx.iconClass],
]),
},
null,
2
))
: vue.createCommentVNode("v-if", true),
vue.createElementVNode(
"div",
{
class: vue.normalizeClass([
"el-notification__group",
{ "is-with-icon": _ctx.typeClass || _ctx.iconClass },
]),
},
[
vue.createElementVNode(
"h2",
{
class: "el-notification__title",
textContent: vue.toDisplayString(_ctx.title),
},
null,
8,
_hoisted_2
),
vue.withDirectives(
vue.createElementVNode(
"div",
{
class: "el-notification__content",
style: vue.normalizeStyle(
!!_ctx.title ? void 0 : { margin: 0 }
),
},
[
vue.renderSlot(_ctx.$slots, "default", {}, () => [
!_ctx.dangerouslyUseHTMLString
? (vue.openBlock(),
vue.createElementBlock(
"p",
_hoisted_3,
vue.toDisplayString(_ctx.message),
1
))
: (vue.openBlock(),
vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
vue.createCommentVNode(
" Caution here, message could've been compromized, nerver use user's input as message "
),
vue.createCommentVNode(
" eslint-disable-next-line "
),
vue.createElementVNode(
"p",
{ innerHTML: _ctx.message },
null,
8,
_hoisted_4
),
],
2112
)),
]),
],
4
),
[[vue.vShow, _ctx.message]]
),
_ctx.showClose
? (vue.openBlock(),
vue.createElementBlock("div", {
key: 0,
class: "el-notification__closeBtn el-icon-close",
onClick:
_cache[0] ||
(_cache[0] = vue.withModifiers(
(...args) => _ctx.close && _ctx.close(...args),
["stop"]
)),
}))
: vue.createCommentVNode("v-if", true),
],
2
),
],
46,
_hoisted_1
),
[[vue.vShow, _ctx.visible]]
),
]),
_: 3,
},
8,
["onBeforeLeave"]
)
);
}
script.render = render;
script.__file = "packages/components/notification/src/notification.vue";
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) =>
key in obj
? __defProp(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value,
})
: (obj[key] = value);
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
typeof require !== "undefined"
? require
: (x) => {
throw new Error('Dynamic require of "' + x + '" is not supported');
};
const notifications = {
"top-left": [],
"top-right": [],
"bottom-left": [],
"bottom-right": [],
};
const GAP_SIZE = 16;
let seed = 1;
const notify = function (options = {}) {
if (isServer) return { close: () => void 0 };
if (typeof options === "string" || vue.isVNode(options)) {
options = { message: options };
}
const position = options.position || "top-right";
let verticalOffset = options.offset || 0;
notifications[position].forEach(({ vm: vm2 }) => {
var _a;
verticalOffset +=
(((_a = vm2.el) == null ? void 0 : _a.offsetHeight) || 0) + GAP_SIZE;
});
verticalOffset += GAP_SIZE;
const id = `notification_${seed++}`;
const userOnClose = options.onClose;
const props = __spreadProps(
__spreadValues(
{
zIndex: PopupManager.nextZIndex(),
offset: verticalOffset,
},
options
),
{
id,
onClose: () => {
close(id, position, userOnClose);
},
}
);
const container = document.createElement("div");
const vm = vue.createVNode(
script,
props,
vue.isVNode(props.message)
? {
default: () => props.message,
}
: null
);
vm.props.onDestroy = () => {
vue.render(null, container);
};
vue.render(vm, container);
notifications[position].push({ vm });
document.body.appendChild(container.firstElementChild);
return {
close: () => {
vm.component.proxy.visible = false;
},
};
};
notificationTypes.forEach((type) => {
notify[type] = (options = {}) => {
if (typeof options === "string" || vue.isVNode(options)) {
options = {
message: options,
};
}
return notify(
__spreadProps(__spreadValues({}, options), {
type,
})
);
};
});
function close(id, position, userOnClose) {
const orientedNotifications = notifications[position];
const idx = orientedNotifications.findIndex(({ vm: vm2 }) => {
var _a;
return ((_a = vm2.component) == null ? void 0 : _a.props.id) === id;
});
if (idx === -1) return;
const { vm } = orientedNotifications[idx];
if (!vm) return;
userOnClose == null ? void 0 : userOnClose(vm);
const removedHeight = vm.el.offsetHeight;
const verticalPos = position.split("-")[0];
orientedNotifications.splice(idx, 1);
const len = orientedNotifications.length;
if (len < 1) return;
for (let i = idx; i < len; i++) {
const { el, component } = orientedNotifications[i].vm;
const pos =
parseInt(el.style[verticalPos], 10) - removedHeight - GAP_SIZE;
component.props.offset = pos;
}
}
function closeAll() {
for (const orientedNotifications of Object.values(notifications)) {
orientedNotifications.forEach(({ vm }) => {
vm.component.proxy.visible = false;
});
}
}
notify.closeAll = closeAll;
const ElNotification = withInstallFunction(notify, "$notify");
var Plugins = [
ElInfiniteScroll,
ElLoading,
ElMessage,
ElMessageBox,
ElNotification,
ElPopoverDirective,
];
var installer = makeInstaller([...Components, ...Plugins]);
const install = installer.install;
const version = installer.version;
exports.ALERT_TYPE_CLASSES_MAP = ALERT_TYPE_CLASSES_MAP;
exports.BAR_MAP = BAR_MAP;
exports.CASCADER_PANEL_INJECTION_KEY = CASCADER_PANEL_INJECTION_KEY;
exports.CHANGE_EVENT = CHANGE_EVENT;
exports.ClickOutside = ClickOutside;
exports.CommonPicker = script$1O;
exports.CommonProps = CommonProps;
exports.DARK_EFFECT = DARK_EFFECT;
exports.DEFAULT_FORMATS_DATE = DEFAULT_FORMATS_DATE;
exports.DEFAULT_FORMATS_DATEPICKER = DEFAULT_FORMATS_DATEPICKER;
exports.DEFAULT_FORMATS_TIME = DEFAULT_FORMATS_TIME;
exports.DefaultProps = DefaultProps;
exports.DynamicSizeGrid = FixedSizeGrid$1;
exports.DynamicSizeList = DynamicSizeList$1;
exports.ElAffix = ElAffix;
exports.ElAlert = ElAlert;
exports.ElAside = ElAside;
exports.ElAutocomplete = ElAutocomplete;
exports.ElAvatar = ElAvatar;
exports.ElBacktop = ElBacktop;
exports.ElBadge = ElBadge;
exports.ElBreadcrumb = ElBreadcrumb;
exports.ElBreadcrumbItem = ElBreadcrumbItem;
exports.ElButton = ElButton;
exports.ElButtonGroup = ElButtonGroup$2;
exports.ElCalendar = ElCalendar;
exports.ElCard = ElCard;
exports.ElCarousel = ElCarousel;
exports.ElCarouselItem = ElCarouselItem;
exports.ElCascader = ElCascader;
exports.ElCascaderPanel = ElCascaderPanel;
exports.ElCheckTag = ElCheckTag;
exports.ElCheckbox = ElCheckbox;
exports.ElCheckboxButton = ElCheckboxButton;
exports.ElCheckboxGroup = ElCheckboxGroup$1;
exports.ElCol = ElCol;
exports.ElCollapse = ElCollapse;
exports.ElCollapseItem = ElCollapseItem;
exports.ElCollapseTransition = ElCollapseTransition;
exports.ElColorPicker = ElColorPicker;
exports.ElConfigProvider = ElConfigProvider;
exports.ElContainer = ElContainer;
exports.ElDatePicker = ElDatePicker;
exports.ElDescriptions = ElDescriptions;
exports.ElDescriptionsItem = ElDescriptionsItem;
exports.ElDialog = ElDialog;
exports.ElDivider = ElDivider;
exports.ElDrawer = ElDrawer;
exports.ElDropdown = ElDropdown;
exports.ElDropdownItem = ElDropdownItem;
exports.ElDropdownMenu = ElDropdownMenu;
exports.ElEmpty = ElEmpty;
exports.ElFooter = ElFooter;
exports.ElForm = ElForm;
exports.ElFormItem = ElFormItem;
exports.ElHeader = ElHeader;
exports.ElIcon = ElIcon;
exports.ElImage = ElImage;
exports.ElImageViewer = ElImageViewer;
exports.ElInfiniteScroll = ElInfiniteScroll;
exports.ElInput = ElInput;
exports.ElInputNumber = ElInputNumber;
exports.ElLink = ElLink;
exports.ElLoading = ElLoading;
exports.ElLoadingDirective = ElLoadingDirective;
exports.ElLoadingService = ElLoadingService;
exports.ElMain = ElMain;
exports.ElMenu = ElMenu;
exports.ElMenuItem = ElMenuItem;
exports.ElMenuItemGroup = ElMenuItemGroup;
exports.ElMessage = ElMessage;
exports.ElMessageBox = ElMessageBox;
exports.ElNotification = ElNotification;
exports.ElOption = ElOption$1;
exports.ElOptionGroup = ElOptionGroup;
exports.ElOverlay = ElOverlay;
exports.ElPageHeader = ElPageHeader;
exports.ElPagination = ElPagination;
exports.ElPopconfirm = ElPopconfirm;
exports.ElPopover = ElPopover;
exports.ElPopoverDirective = ElPopoverDirective;
exports.ElPopper = ElPopper;
exports.ElProgress = ElProgress;
exports.ElRadio = ElRadio;
exports.ElRadioButton = ElRadioButton;
exports.ElRadioGroup = ElRadioGroup;
exports.ElRate = ElRate;
exports.ElResult = ElResult;
exports.ElRow = ElRow;
exports.ElScrollbar = ElScrollbar;
exports.ElSelect = ElSelect;
exports.ElSelectV2 = ElSelectV2;
exports.ElSkeleton = ElSkeleton;
exports.ElSkeletonItem = ElSkeletonItem;
exports.ElSlider = ElSlider;
exports.ElSpace = ElSpace;
exports.ElStep = ElStep;
exports.ElSteps = ElSteps;
exports.ElSubMenu = ElSubMenu;
exports.ElSwitch = ElSwitch;
exports.ElTabPane = ElTabPane;
exports.ElTable = ElTable;
exports.ElTableColumn = ElTableColumn;
exports.ElTabs = ElTabs;
exports.ElTag = ElTag;
exports.ElTimePicker = ElTimePicker;
exports.ElTimeSelect = ElTimeSelect;
exports.ElTimeline = ElTimeline;
exports.ElTimelineItem = ElTimelineItem;
exports.ElTooltip = ElTooltip;
exports.ElTransfer = ElTransfer;
exports.ElTree = ElTree;
exports.ElUpload = ElUpload;
exports.FixedSizeGrid = FixedSizeGrid$3;
exports.FixedSizeList = FixedSizeList$1;
exports.LIGHT_EFFECT = LIGHT_EFFECT;
exports.LocaleInjectionKey = LocaleInjectionKey;
exports.Mousewheel = Mousewheel;
exports.RepeatClick = RepeatClick;
exports.Resize = Resize;
exports.TimePickPanel = script$1M;
exports.TrapFocus = TrapFocus;
exports.affixEmits = affixEmits;
exports.affixProps = affixProps;
exports.alertEmits = alertEmits;
exports.alertProps = alertProps;
exports.avatarEmits = avatarEmits;
exports.avatarProps = avatarProps;
exports.backtopEmits = backtopEmits;
exports.backtopProps = backtopProps;
exports.badgeProps = badgeProps;
exports.breadcrumbItemProps = breadcrumbItemProps;
exports.breadcrumbProps = breadcrumbProps;
exports.buttonEmits = buttonEmits;
exports.buttonNativeType = buttonNativeType;
exports.buttonProps = buttonProps;
exports.buttonSize = buttonSize;
exports.buttonType = buttonType;
exports.cardProps = cardProps;
exports["default"] = installer;
exports.dialogEmits = dialogEmits;
exports.dialogProps = dialogProps;
exports.dividerProps = dividerProps;
exports.elBreadcrumbKey = elBreadcrumbKey;
exports.elButtonGroupKey = elButtonGroupKey;
exports.elFormItemKey = elFormItemKey;
exports.elFormKey = elFormKey;
exports.elPaginationKey = elPaginationKey;
exports.emptyProps = emptyProps;
exports.extractDateFormat = extractDateFormat;
exports.extractTimeFormat = extractTimeFormat;
exports.iconProps = iconProps;
exports.install = install;
exports.linkEmits = linkEmits;
exports.linkProps = linkProps;
exports.localeProviderMaker = localeProviderMaker;
exports.makeInstaller = makeInstaller;
exports.messageEmits = messageEmits;
exports.messageProps = messageProps;
exports.messageTypes = messageTypes;
exports.notificationEmits = notificationEmits;
exports.notificationProps = notificationProps;
exports.notificationTypes = notificationTypes;
exports.overlayEmits = overlayEmits;
exports.overlayProps = overlayProps;
exports.pageHeaderEmits = pageHeaderEmits;
exports.pageHeaderProps = pageHeaderProps;
exports.paginationEmits = paginationEmits;
exports.paginationProps = paginationProps;
exports.popconfirmEmits = popconfirmEmits;
exports.popconfirmProps = popconfirmProps;
exports.popperDefaultProps = popperDefaultProps;
exports.rangeArr = rangeArr;
exports.renderArrow = renderArrow;
exports.renderPopper = renderPopper;
exports.renderThumbStyle = renderThumbStyle$1;
exports.renderTrigger = renderTrigger;
exports.selectGroupKey = selectGroupKey;
exports.selectKey = selectKey;
exports.selectV2InjectionKey = selectV2InjectionKey;
exports.tagEmits = tagEmits;
exports.tagProps = tagProps;
exports.themeVarsKey = themeVarsKey;
exports.timePickerDefaultProps = timePickerDefaultProps;
exports.useAttrs = useAttrs;
exports.useCascaderConfig = useCascaderConfig;
exports.useCssVar = useCssVar;
exports.useDialog = useDialog;
exports.useEvents = index$1;
exports.useFocus = useFocus;
exports.useFormItem = useFormItem;
exports.useFormItemProps = useFormItemProps;
exports.useLocale = useLocale;
exports.useLocaleInject = useLocaleInject;
exports.useLocaleProps = useLocaleProps;
exports.useLockScreen = useLockScreen;
exports.useMigrating = useMigrating;
exports.useModal = useModal;
exports.useModelToggle = useModelToggle;
exports.useModelToggleEmits = useModelToggleEmits;
exports.useModelToggleProps = useModelToggleProps;
exports.usePopper = usePopper;
exports.usePopperControlProps = usePopperControlProps;
exports.usePopperHook = usePopperHook;
exports.usePopperProps = usePopperProps;
exports.usePreventGlobal = usePreventGlobal;
exports.useRestoreActive = useRestoreActive;
exports.useSameTarget = useSameTarget;
exports.useTeleport = useTeleport;
exports.useThemeVars = useThemeVars;
exports.useThrottleRender = useThrottleRender;
exports.useTimeout = useTimeout;
exports.version = version;
exports.virtualizedGridProps = virtualizedGridProps;
exports.virtualizedListProps = virtualizedListProps;
exports.virtualizedProps = virtualizedProps;
exports.virtualizedScrollbarProps = virtualizedScrollbarProps;
Object.defineProperty(exports, "__esModule", { value: true });
});