/*! Element Plus v1.2.0-beta.3 */ (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) : typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) : (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ElementPlus = {}, global.Vue)); })(this, (function (exports, vue) { 'use strict'; let $ELEMENT = {}; const setConfig = (option) => { $ELEMENT = option; }; const getConfig = (key) => { return $ELEMENT[key]; }; var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; /** * The inverse of `_.toPairs`; this method returns an object composed * from key-value `pairs`. * * @static * @memberOf _ * @since 4.0.0 * @category Array * @param {Array} pairs The key-value pairs. * @returns {Object} Returns the new object. * @example * * _.fromPairs([['a', 1], ['b', 2]]); * // => { 'a': 1, 'b': 2 } */ 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$6 = Array.isArray; const isFunction$3 = (val) => typeof val === 'function'; const isString$1 = (val) => typeof val === 'string'; const isObject$a = (val) => val !== null && typeof val === 'object'; const isPromise = (val) => { return isObject$a(val) && isFunction$3(val.then) && isFunction$3(val.catch); }; const objectToString$2 = Object.prototype.toString; const toTypeString = (value) => objectToString$2.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$1() { this.__data__ = []; this.size = 0; } var _listCacheClear = listCacheClear$1; /** * 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$3(value, other) { return value === other || (value !== value && other !== other); } var eq_1 = eq$3; var eq$2 = eq_1; /** * 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$4(array, key) { var length = array.length; while (length--) { if (eq$2(array[length][0], key)) { return length; } } return -1; } var _assocIndexOf = assocIndexOf$4; var assocIndexOf$3 = _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$1(key) { var data = this.__data__, index = assocIndexOf$3(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$1; var assocIndexOf$2 = _assocIndexOf; /** * 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$1(key) { var data = this.__data__, index = assocIndexOf$2(data, key); return index < 0 ? undefined : data[index][1]; } var _listCacheGet = listCacheGet$1; var assocIndexOf$1 = _assocIndexOf; /** * 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$1(key) { return assocIndexOf$1(this.__data__, key) > -1; } var _listCacheHas = listCacheHas$1; var assocIndexOf = _assocIndexOf; /** * 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$1(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$1; var listCacheClear = _listCacheClear, listCacheDelete = _listCacheDelete, listCacheGet = _listCacheGet, listCacheHas = _listCacheHas, listCacheSet = _listCacheSet; /** * Creates an list cache object. * * @private * @constructor * @param {Array} [entries] The key-value pairs to cache. */ function ListCache$4(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$4.prototype.clear = listCacheClear; ListCache$4.prototype['delete'] = listCacheDelete; ListCache$4.prototype.get = listCacheGet; ListCache$4.prototype.has = listCacheHas; ListCache$4.prototype.set = listCacheSet; var _ListCache = ListCache$4; var ListCache$3 = _ListCache; /** * Removes all key-value entries from the stack. * * @private * @name clear * @memberOf Stack */ function stackClear$1() { this.__data__ = new ListCache$3; this.size = 0; } var _stackClear = stackClear$1; /** * 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$1(key) { var data = this.__data__, result = data['delete'](key); this.size = data.size; return result; } var _stackDelete = stackDelete$1; /** * 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$1(key) { return this.__data__.get(key); } var _stackGet = stackGet$1; /** * 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$1(key) { return this.__data__.has(key); } var _stackHas = stackHas$1; /** Detect free variable `global` from Node.js. */ var freeGlobal$1 = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal; var _freeGlobal = freeGlobal$1; 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$9 = freeGlobal || freeSelf || Function('return this')(); var _root = root$9; var root$8 = _root; /** Built-in value references. */ var Symbol$6 = root$8.Symbol; var _Symbol = Symbol$6; var Symbol$5 = _Symbol; /** 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$5 ? Symbol$5.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$1(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$1; /** 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$1(value) { return nativeObjectToString.call(value); } var _objectToString = objectToString$1; var Symbol$4 = _Symbol, getRawTag = _getRawTag, objectToString = _objectToString; /** `Object#toString` result references. */ var nullTag = '[object Null]', undefinedTag = '[object Undefined]'; /** Built-in value references. */ var symToStringTag = Symbol$4 ? Symbol$4.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$5(value) { if (value == null) { return value === undefined ? undefinedTag : nullTag; } return (symToStringTag && symToStringTag in Object(value)) ? getRawTag(value) : objectToString(value); } var _baseGetTag = baseGetTag$5; /** * 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$9(value) { var type = typeof value; return value != null && (type == 'object' || type == 'function'); } var isObject_1 = isObject$9; var baseGetTag$4 = _baseGetTag, isObject$8 = 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$2(value) { if (!isObject$8(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$4(value); return tag == funcTag$2 || tag == genTag$1 || tag == asyncTag || tag == proxyTag; } var isFunction_1 = isFunction$2; var root$7 = _root; /** Used to detect overreaching core-js shims. */ var coreJsData$1 = root$7['__core-js_shared__']; var _coreJsData = coreJsData$1; 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$1(func) { return !!maskSrcKey && (maskSrcKey in func); } var _isMasked = isMasked$1; /** 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$2(func) { if (func != null) { try { return funcToString$1.call(func); } catch (e) {} try { return (func + ''); } catch (e) {} } return ''; } var _toSource = toSource$2; var isFunction$1 = isFunction_1, isMasked = _isMasked, isObject$7 = isObject_1, toSource$1 = _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$1(value) { if (!isObject$7(value) || isMasked(value)) { return false; } var pattern = isFunction$1(value) ? reIsNative : reIsHostCtor; return pattern.test(toSource$1(value)); } var _baseIsNative = baseIsNative$1; /** * 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$2(object, key) { return object == null ? undefined : object[key]; } var _getValue = getValue$2; var baseIsNative = _baseIsNative, getValue$1 = _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$7(object, key) { var value = getValue$1(object, key); return baseIsNative(value) ? value : undefined; } var _getNative = getNative$7; var getNative$6 = _getNative, root$6 = _root; /* Built-in method references that are verified to be native. */ var Map$4 = getNative$6(root$6, 'Map'); var _Map = Map$4; var getNative$5 = _getNative; /* Built-in method references that are verified to be native. */ var nativeCreate$4 = getNative$5(Object, 'create'); var _nativeCreate = nativeCreate$4; var nativeCreate$3 = _nativeCreate; /** * Removes all key-value entries from the hash. * * @private * @name clear * @memberOf Hash */ function hashClear$1() { this.__data__ = nativeCreate$3 ? nativeCreate$3(null) : {}; this.size = 0; } var _hashClear = hashClear$1; /** * 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$1(key) { var result = this.has(key) && delete this.__data__[key]; this.size -= result ? 1 : 0; return result; } var _hashDelete = hashDelete$1; var nativeCreate$2 = _nativeCreate; /** 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$1(key) { var data = this.__data__; if (nativeCreate$2) { var result = data[key]; return result === HASH_UNDEFINED$2 ? undefined : result; } return hasOwnProperty$9.call(data, key) ? data[key] : undefined; } var _hashGet = hashGet$1; var nativeCreate$1 = _nativeCreate; /** 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$1(key) { var data = this.__data__; return nativeCreate$1 ? (data[key] !== undefined) : hasOwnProperty$8.call(data, key); } var _hashHas = hashHas$1; var nativeCreate = _nativeCreate; /** 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$1(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$1; var hashClear = _hashClear, hashDelete = _hashDelete, hashGet = _hashGet, hashHas = _hashHas, hashSet = _hashSet; /** * Creates a hash object. * * @private * @constructor * @param {Array} [entries] The key-value pairs to cache. */ function Hash$1(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$1.prototype.clear = hashClear; Hash$1.prototype['delete'] = hashDelete; Hash$1.prototype.get = hashGet; Hash$1.prototype.has = hashHas; Hash$1.prototype.set = hashSet; var _Hash = Hash$1; var Hash = _Hash, ListCache$2 = _ListCache, Map$3 = _Map; /** * Removes all key-value entries from the map. * * @private * @name clear * @memberOf MapCache */ function mapCacheClear$1() { this.size = 0; this.__data__ = { 'hash': new Hash, 'map': new (Map$3 || ListCache$2), 'string': new Hash }; } var _mapCacheClear = mapCacheClear$1; /** * 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$1(value) { var type = typeof value; return (type == 'string' || type == 'number' || type == 'symbol' || type == 'boolean') ? (value !== '__proto__') : (value === null); } var _isKeyable = isKeyable$1; 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$4(map, key) { var data = map.__data__; return isKeyable(key) ? data[typeof key == 'string' ? 'string' : 'hash'] : data.map; } var _getMapData = getMapData$4; var getMapData$3 = _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$1(key) { var result = getMapData$3(this, key)['delete'](key); this.size -= result ? 1 : 0; return result; } var _mapCacheDelete = mapCacheDelete$1; var getMapData$2 = _getMapData; /** * 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$1(key) { return getMapData$2(this, key).get(key); } var _mapCacheGet = mapCacheGet$1; var getMapData$1 = _getMapData; /** * 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$1(key) { return getMapData$1(this, key).has(key); } var _mapCacheHas = mapCacheHas$1; var getMapData = _getMapData; /** * 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$1(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$1; var mapCacheClear = _mapCacheClear, mapCacheDelete = _mapCacheDelete, mapCacheGet = _mapCacheGet, mapCacheHas = _mapCacheHas, 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$3(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$3.prototype.clear = mapCacheClear; MapCache$3.prototype['delete'] = mapCacheDelete; MapCache$3.prototype.get = mapCacheGet; MapCache$3.prototype.has = mapCacheHas; MapCache$3.prototype.set = mapCacheSet; var _MapCache = MapCache$3; var ListCache$1 = _ListCache, Map$2 = _Map, MapCache$2 = _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$1(key, value) { var data = this.__data__; if (data instanceof ListCache$1) { var pairs = data.__data__; if (!Map$2 || (pairs.length < LARGE_ARRAY_SIZE$1 - 1)) { pairs.push([key, value]); this.size = ++data.size; return this; } data = this.__data__ = new MapCache$2(pairs); } data.set(key, value); this.size = data.size; return this; } var _stackSet = stackSet$1; var ListCache = _ListCache, stackClear = _stackClear, stackDelete = _stackDelete, stackGet = _stackGet, stackHas = _stackHas, 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$2(entries) { var data = this.__data__ = new ListCache(entries); this.size = data.size; } // Add methods to `Stack`. Stack$2.prototype.clear = stackClear; Stack$2.prototype['delete'] = stackDelete; Stack$2.prototype.get = stackGet; Stack$2.prototype.has = stackHas; Stack$2.prototype.set = stackSet; var _Stack = Stack$2; /** 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$1(value) { this.__data__.set(value, HASH_UNDEFINED); return this; } var _setCacheAdd = setCacheAdd$1; /** * 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$1(value) { return this.__data__.has(value); } var _setCacheHas = setCacheHas$1; var MapCache$1 = _MapCache, setCacheAdd = _setCacheAdd, setCacheHas = _setCacheHas; /** * * Creates an array cache object to store unique values. * * @private * @constructor * @param {Array} [values] The values to cache. */ function SetCache$2(values) { var index = -1, length = values == null ? 0 : values.length; this.__data__ = new MapCache$1; while (++index < length) { this.add(values[index]); } } // Add methods to `SetCache`. SetCache$2.prototype.add = SetCache$2.prototype.push = setCacheAdd; SetCache$2.prototype.has = setCacheHas; var _SetCache = SetCache$2; /** * 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$1(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$1; /** * 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$2(cache, key) { return cache.has(key); } var _cacheHas = cacheHas$2; var SetCache$1 = _SetCache, arraySome = _arraySome, cacheHas$1 = _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$2(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$1 : 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$1(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$2; var root$5 = _root; /** Built-in value references. */ var Uint8Array$2 = root$5.Uint8Array; var _Uint8Array = Uint8Array$2; /** * Converts `map` to its key-value pairs. * * @private * @param {Object} map The map to convert. * @returns {Array} Returns the key-value pairs. */ function mapToArray$1(map) { var index = -1, result = Array(map.size); map.forEach(function(value, key) { result[++index] = [key, value]; }); return result; } var _mapToArray = mapToArray$1; /** * Converts `set` to an array of its values. * * @private * @param {Object} set The set to convert. * @returns {Array} Returns the values. */ function setToArray$3(set) { var index = -1, result = Array(set.size); set.forEach(function(value) { result[++index] = value; }); return result; } var _setToArray = setToArray$3; var Symbol$3 = _Symbol, Uint8Array$1 = _Uint8Array, eq$1 = eq_1, equalArrays$1 = _equalArrays, mapToArray = _mapToArray, setToArray$2 = _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$3 ? Symbol$3.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$1(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$1(object), new Uint8Array$1(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$2); 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$1(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$1; /** * 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$3(array, values) { var index = -1, length = values.length, offset = array.length; while (++index < length) { array[offset + index] = values[index]; } return array; } var _arrayPush = arrayPush$3; /** * 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$5 = Array.isArray; var isArray_1 = isArray$5; var arrayPush$2 = _arrayPush, isArray$4 = isArray_1; /** * 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$2(object, keysFunc, symbolsFunc) { var result = keysFunc(object); return isArray$4(object) ? result : arrayPush$2(result, symbolsFunc(object)); } var _baseGetAllKeys = baseGetAllKeys$2; /** * 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$1(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$1; /** * 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$2() { return []; } var stubArray_1 = stubArray$2; var arrayFilter = _arrayFilter, stubArray$1 = stubArray_1; /** 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$3 = !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$3; /** * 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$1(n, iteratee) { var index = -1, result = Array(n); while (++index < n) { result[index] = iteratee(index); } return result; } var _baseTimes = baseTimes$1; /** * 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$8(value) { return value != null && typeof value == 'object'; } var isObjectLike_1 = isObjectLike$8; var baseGetTag$3 = _baseGetTag, isObjectLike$7 = isObjectLike_1; /** `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$1(value) { return isObjectLike$7(value) && baseGetTag$3(value) == argsTag$3; } var _baseIsArguments = baseIsArguments$1; var baseIsArguments = _baseIsArguments, isObjectLike$6 = isObjectLike_1; /** 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$2 = baseIsArguments(function() { return arguments; }()) ? baseIsArguments : function(value) { return isObjectLike$6(value) && hasOwnProperty$7.call(value, 'callee') && !propertyIsEnumerable.call(value, 'callee'); }; var isArguments_1 = isArguments$2; var isBuffer$3 = {exports: {}}; /** * 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; (function (module, exports) { var root = _root, stubFalse = stubFalse_1; /** 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; module.exports = isBuffer; }(isBuffer$3, isBuffer$3.exports)); /** 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$1(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$1; /** 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$2(value) { return typeof value == 'number' && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER; } var isLength_1 = isLength$2; var baseGetTag$2 = _baseGetTag, isLength$1 = isLength_1, isObjectLike$5 = isObjectLike_1; /** `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$1(value) { return isObjectLike$5(value) && isLength$1(value.length) && !!typedArrayTags[baseGetTag$2(value)]; } var _baseIsTypedArray = baseIsTypedArray$1; /** * 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$3(func) { return function(value) { return func(value); }; } var _baseUnary = baseUnary$3; var _nodeUtil = {exports: {}}; (function (module, exports) { var freeGlobal = _freeGlobal; /** 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; }(_nodeUtil, _nodeUtil.exports)); var baseIsTypedArray = _baseIsTypedArray, baseUnary$2 = _baseUnary, nodeUtil$2 = _nodeUtil.exports; /* Node.js helper references. */ var nodeIsTypedArray = nodeUtil$2 && nodeUtil$2.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$2 = nodeIsTypedArray ? baseUnary$2(nodeIsTypedArray) : baseIsTypedArray; var isTypedArray_1 = isTypedArray$2; var baseTimes = _baseTimes, isArguments$1 = isArguments_1, isArray$3 = isArray_1, isBuffer$2 = isBuffer$3.exports, isIndex = _isIndex, isTypedArray$1 = isTypedArray_1; /** 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$2(value, inherited) { var isArr = isArray$3(value), isArg = !isArr && isArguments$1(value), isBuff = !isArr && !isArg && isBuffer$2(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$2; /** 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$3(value) { var Ctor = value && value.constructor, proto = (typeof Ctor == 'function' && Ctor.prototype) || objectProto$6; return value === proto; } var _isPrototype = isPrototype$3; /** * 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$2(func, transform) { return function(arg) { return func(transform(arg)); }; } var _overArg = overArg$2; var overArg$1 = _overArg; /* Built-in method references for those with the same name as other `lodash` methods. */ var nativeKeys$1 = overArg$1(Object.keys, Object); var _nativeKeys = nativeKeys$1; var isPrototype$2 = _isPrototype, 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$1(object) { if (!isPrototype$2(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$1; var isFunction = isFunction_1, isLength = isLength_1; /** * 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$3(value) { return value != null && isLength(value.length) && !isFunction(value); } var isArrayLike_1 = isArrayLike$3; var arrayLikeKeys$1 = _arrayLikeKeys, baseKeys = _baseKeys, isArrayLike$2 = isArrayLike_1; /** * 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$3(object) { return isArrayLike$2(object) ? arrayLikeKeys$1(object) : baseKeys(object); } var keys_1 = keys$3; var baseGetAllKeys$1 = _baseGetAllKeys, getSymbols$2 = _getSymbols, keys$2 = keys_1; /** * 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$2(object) { return baseGetAllKeys$1(object, keys$2, getSymbols$2); } var _getAllKeys = getAllKeys$2; var getAllKeys$1 = _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$1(object, other, bitmask, customizer, equalFunc, stack) { var isPartial = bitmask & COMPARE_PARTIAL_FLAG$1, objProps = getAllKeys$1(object), objLength = objProps.length, othProps = getAllKeys$1(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$1; var getNative$4 = _getNative, root$4 = _root; /* Built-in method references that are verified to be native. */ var DataView$1 = getNative$4(root$4, 'DataView'); var _DataView = DataView$1; var getNative$3 = _getNative, root$3 = _root; /* Built-in method references that are verified to be native. */ var Promise$2 = getNative$3(root$3, 'Promise'); var _Promise = Promise$2; var getNative$2 = _getNative, root$2 = _root; /* Built-in method references that are verified to be native. */ var Set$3 = getNative$2(root$2, 'Set'); var _Set = Set$3; var getNative$1 = _getNative, root$1 = _root; /* Built-in method references that are verified to be native. */ var WeakMap$1 = getNative$1(root$1, 'WeakMap'); var _WeakMap = WeakMap$1; var DataView = _DataView, Map$1 = _Map, Promise$1 = _Promise, Set$2 = _Set, WeakMap = _WeakMap, baseGetTag$1 = _baseGetTag, toSource = _toSource; /** `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$1), promiseCtorString = toSource(Promise$1), setCtorString = toSource(Set$2), weakMapCtorString = toSource(WeakMap); /** * Gets the `toStringTag` of `value`. * * @private * @param {*} value The value to query. * @returns {string} Returns the `toStringTag`. */ var getTag$4 = baseGetTag$1; // Fallback for data views, maps, sets, and weak maps in IE 11 and promises in Node.js < 6. if ((DataView && getTag$4(new DataView(new ArrayBuffer(1))) != dataViewTag$2) || (Map$1 && getTag$4(new Map$1) != mapTag$3) || (Promise$1 && getTag$4(Promise$1.resolve()) != promiseTag) || (Set$2 && getTag$4(new Set$2) != setTag$3) || (WeakMap && getTag$4(new WeakMap) != weakMapTag$1)) { getTag$4 = function(value) { var result = baseGetTag$1(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$4; var Stack$1 = _Stack, equalArrays = _equalArrays, equalByTag = _equalByTag, equalObjects = _equalObjects, getTag$3 = _getTag, isArray$2 = isArray_1, isBuffer$1 = isBuffer$3.exports, isTypedArray = isTypedArray_1; /** 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$1(object, other, bitmask, customizer, equalFunc, stack) { var objIsArr = isArray$2(object), othIsArr = isArray$2(other), objTag = objIsArr ? arrayTag$1 : getTag$3(object), othTag = othIsArr ? arrayTag$1 : getTag$3(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$1); return (objIsArr || isTypedArray(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$1); return equalFunc(objUnwrapped, othUnwrapped, bitmask, customizer, stack); } } if (!isSameTag) { return false; } stack || (stack = new Stack$1); return equalObjects(object, other, bitmask, customizer, equalFunc, stack); } var _baseIsEqualDeep = baseIsEqualDeep$1; var baseIsEqualDeep = _baseIsEqualDeep, isObjectLike$4 = isObjectLike_1; /** * 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$1(value, other, bitmask, customizer, stack) { if (value === other) { return true; } if (value == null || other == null || (!isObjectLike$4(value) && !isObjectLike$4(other))) { return value !== value && other !== other; } return baseIsEqualDeep(value, other, bitmask, customizer, baseIsEqual$1, stack); } var _baseIsEqual = baseIsEqual$1; const SCOPE$1 = "Util"; 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) { throwError(SCOPE$1, "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 = 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(() => { Reflect.apply(fn, this, args); locked = false; }); }; } function isUndefined(val) { return val === void 0; } function useGlobalConfig$1() { const vm = vue.getCurrentInstance(); if ("$ELEMENT" in vm.proxy) { return vm.proxy.$ELEMENT; } return {}; } function isEmpty(val) { if (!val && val !== 0 || isArray$6(val) && !val.length || isObject$a(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 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 trimArr = function(s) { return (s || "").split(" ").filter((item) => !!item.trim()); }; 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 { const className = el.getAttribute("class") || ""; return className.split(" ").includes(cls); } } function addClass(el, cls) { if (!el) return; let className = el.getAttribute("class") || ""; const curClass = trimArr(className); const classes = (cls || "").split(" ").filter((item) => !curClass.includes(item) && !!item.trim()); if (el.classList) { el.classList.add(...classes); } else { className += ` ${classes.join(" ")}`; el.setAttribute("class", className); } } function removeClass(el, cls) { if (!el || !cls) return; const classes = trimArr(cls); let curClass = el.getAttribute("class") || ""; if (el.classList) { el.classList.remove(...classes); return; } classes.forEach((item) => { curClass = curClass.replace(` ${item} `, " "); }); const className = trimArr(curClass).join(" "); el.setAttribute("class", className); } const getStyle = function(element, styleName) { var _a; if (isServer) return ""; if (!element || !styleName) return ""; styleName = camelize(styleName); if (styleName === "float") { styleName = "cssFloat"; } try { const style = element.style[styleName]; if (style) return style; const computed = (_a = document.defaultView) == null ? void 0 : _a.getComputedStyle(element, ""); return computed ? computed[styleName] : ""; } catch (e) { return element.style[styleName]; } }; const isScroll = (el, isVertical) => { if (isServer) return null; 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 (container instanceof Element) { containerRect = container.getBoundingClientRect(); } else { containerRect = { top: 0, right: window.innerWidth, bottom: window.innerHeight, left: 0 }; } return elRect.top < containerRect.bottom && elRect.bottom > containerRect.top && elRect.right > containerRect.left && elRect.left < containerRect.right; }; const getOffsetTop = (el) => { let offset = 0; let parent = el; while (parent) { offset += parent.offsetTop; parent = parent.offsetParent; } return offset; }; const getOffsetTopDistance = (el, containerEl) => { return Math.abs(getOffsetTop(el) - getOffsetTop(containerEl)); }; const stop = (e) => e.stopPropagation(); var index = (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((item) => isFocusable(item) && isVisible(item)); }; const isFocusable = (element) => { if (element.tabIndex > 0 || element.tabIndex === 0 && element.getAttribute("tabIndex") !== null) { return true; } if (element.disabled) { return false; } switch (element.nodeName) { case "A": { return !!element.href && element.rel !== "ignore"; } case "INPUT": { return !(element.type === "hidden" || element.type === "file"); } case "BUTTON": case "SELECT": case "TEXTAREA": { return true; } default: { return false; } } }; const triggerEvent = function(elm, name, ...opts) { let eventName; if (name.includes("mouse") || name.includes("click")) { eventName = "MouseEvents"; } else if (name.includes("key")) { eventName = "KeyboardEvent"; } else { eventName = "HTMLEvents"; } const evt = document.createEvent(eventName); evt.initEvent(name, ...opts); elm.dispatchEvent(evt); return elm; }; const isLeaf = (el) => !el.getAttribute("aria-owns"); const getSibling = (el, distance, elClass) => { const { parentNode } = el; if (!parentNode) return null; const siblings = parentNode.querySelectorAll(elClass); const index = Array.prototype.indexOf.call(siblings, el); return siblings[index + distance] || null; }; const focusNode = (el) => { if (!el) return; el.focus(); !isLeaf(el) && el.click(); }; const 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 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$3(props["onUpdate:modelValue"])); const isModelBindingAbsent = vue.computed(() => props.modelValue === null); const doShow = () => { if (indicator.value === true) { return; } indicator.value = true; if (isFunction$3(onShow)) { onShow(); } }; const doHide = () => { if (indicator.value === false) { return; } indicator.value = false; if (isFunction$3(onHide)) { onHide(); } }; const show = () => { if (props.disabled === true || isFunction$3(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(() => ({ ...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]; } // import { isHTMLElement } from './instanceOf'; function getBoundingClientRect(element, // eslint-disable-next-line unused-imports/no-unused-vars includeScale) { var rect = element.getBoundingClientRect(); var scaleX = 1; var scaleY = 1; // FIXME: // `offsetWidth` returns an integer while `getBoundingClientRect` // returns a float. This results in `scaleX` or `scaleY` being // non-1 when it should be for elements that aren't a full pixel in // width or height. // if (isHTMLElement(element) && includeScale) { // const offsetHeight = element.offsetHeight; // const 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: rect.width / scaleX, height: rect.height / scaleY, top: rect.top / scaleY, right: rect.right / scaleX, bottom: rect.bottom / scaleY, left: rect.left / scaleX, x: rect.left / scaleX, y: 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 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 // 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 `` and `` 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); isHTMLElement(offsetParent) && isElementScaled(offsetParent); var documentElement = getDocumentElement(offsetParent); var rect = getBoundingClientRect(elementOrVirtualElement); 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); 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$3(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$3(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); } } }; var h=!1,o,s,f,u,d,D,l,p,m,w,N,E,x,A,M;function a(){if(!h){h=!0;var e=navigator.userAgent,n=/(?:MSIE.(\d+\.\d+))|(?:(?:Firefox|GranParadiso|Iceweasel).(\d+\.\d+))|(?:Opera(?:.+Version.|.)(\d+\.\d+))|(?:AppleWebKit.(\d+(?:\.\d+)?))|(?:Trident\/\d+\.\d+.*rv:(\d+\.\d+))/.exec(e),i=/(Mac OS X)|(Windows)|(Linux)/.exec(e);if(E=/\b(iPhone|iP[ao]d)/.exec(e),x=/\b(iP[ao]d)/.exec(e),w=/Android/i.exec(e),A=/FBAN\/\w+;/i.exec(e),M=/Mobile/i.exec(e),N=!!/Win64/.exec(e),n){o=n[1]?parseFloat(n[1]):n[5]?parseFloat(n[5]):NaN,o&&document&&document.documentMode&&(o=document.documentMode);var r=/(?:Trident\/(\d+.\d+))/.exec(e);D=r?parseFloat(r[1])+4:o,s=n[2]?parseFloat(n[2]):NaN,f=n[3]?parseFloat(n[3]):NaN,u=n[4]?parseFloat(n[4]):NaN,u?(n=/(?:Chrome\/(\d+\.\d+))/.exec(e),d=n&&n[1]?parseFloat(n[1]):NaN):d=NaN;}else { o=s=f=d=u=NaN; }if(i){if(i[1]){var t=/(?:Mac OS X (\d+(?:[._]\d+)?))/.exec(e);l=t?parseFloat(t[1].replace("_",".")):!0;}else { l=!1; }p=!!i[2],m=!!i[3];}else { l=p=m=!1; }}}var _={ie:function(){return a()||o},ieCompatibilityMode:function(){return a()||D>o},ie64:function(){return _.ie()&&N},firefox:function(){return a()||s},opera:function(){return a()||f},webkit:function(){return a()||u},safari:function(){return _.webkit()},chrome:function(){return a()||d},windows:function(){return a()||p},osx:function(){return a()||l},linux:function(){return a()||m},iphone:function(){return a()||E},mobile:function(){return a()||E||x||w||M},nativeApp:function(){return a()||A},android:function(){return a()||w},ipad:function(){return a()||x}},F=_;var c=!!(typeof window!="undefined"&&window.document&&window.document.createElement),I={canUseDOM:c,canUseWorkers:typeof Worker!="undefined",canUseEventListeners:c&&!!(window.addEventListener||window.attachEvent),canUseViewport:c&&!!window.screen,isInWorker:!c},v=I;var X;v.canUseDOM&&(X=document.implementation&&document.implementation.hasFeature&&document.implementation.hasFeature("","")!==!0);function S(e,n){if(!v.canUseDOM||n&&!("addEventListener"in document)){ return !1; }var i="on"+e,r=i in document;if(!r){var t=document.createElement("div");t.setAttribute(i,"return;"),r=typeof t[i]=="function";}return !r&&X&&e==="wheel"&&(r=document.implementation.hasFeature("Events.wheel","3.0")),r}var b=S;var O=10,P=40,T=800;function U(e){var n=0,i=0,r=0,t=0;return "detail"in e&&(i=e.detail),"wheelDelta"in e&&(i=-e.wheelDelta/120),"wheelDeltaY"in e&&(i=-e.wheelDeltaY/120),"wheelDeltaX"in e&&(n=-e.wheelDeltaX/120),"axis"in e&&e.axis===e.HORIZONTAL_AXIS&&(n=i,i=0),r=n*O,t=i*O,"deltaY"in e&&(t=e.deltaY),"deltaX"in e&&(r=e.deltaX),(r||t)&&e.deltaMode&&(e.deltaMode==1?(r*=P,t*=P):(r*=T,t*=T)),r&&!n&&(n=r<1?-1:1),t&&!i&&(i=t<1?-1:1),{spinX:n,spinY:i,pixelX:r,pixelY:t}}U.getEventType=function(){return F.firefox()?"DOMMouseScroll":b("wheel")?"wheel":"mousewheel"};var W=U;/** * Checks if an event is supported in the current execution environment. * * NOTE: This will not work correctly for non-generic events such as `change`, * `reset`, `load`, `error`, and `select`. * * Borrows from Modernizr. * * @param {string} eventNameSuffix Event name, e.g. "click". * @param {?boolean} capture Check if the capture phase is supported. * @return {boolean} True if the event is supported. * @internal * @license Modernizr 3.0.0pre (Custom Build) | MIT */ const mousewheel = function(element, callback) { if (element && element.addEventListener) { const fn = function(event) { const normalized = W(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); } }; 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 ResizeObserver(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) => vue.isVNode(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) => vue.isVNode(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 }; } }; 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) => { var _a; const events = {}; (_a = triggerEventsMap[t]) == null ? void 0 : _a.forEach((event) => { events[event] = popperEventsHandler; }); return events; }; return vue.computed(() => { if (isArray$6(props.trigger)) { return Object.values(props.trigger).reduce((pre, t) => { return { ...pre, ...mapEvents(t) }; }, {}); } else { return mapEvents(props.trigger); } }); }; 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 = { ...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 = () => { var _a; const vm = vue.getCurrentInstance(); const props = (_a = vm.proxy) == null ? void 0 : _a.$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 _a2; (_a2 = popperInstance == null ? void 0 : popperInstance.destroy) == null ? void 0 : _a2.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 { ...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 _a2; const trigger = (_a2 = slots.trigger) == null ? void 0 : _a2.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({ "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 }; }; 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 = { ...themeVars, ...vue.unref(vars) }; vue.provide(themeVarsKey, vue.ref(customVars)); vue.onMounted(() => { vue.isRef(vars) ? stopWatchCssVar = vue.watch(vars, (val) => { setVars(elRef.value, { ...vue.unref(themeVars), ...val }); }, { immediate: true, deep: true }) : setVars(elRef.value, { ...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 wrapperKey = Symbol(); const propKey = Symbol(); function buildProp(option, key) { if (!isObject$a(option) || !!option[propKey]) return option; const { values, required, default: defaultValue, type, validator } = option; const _validator = values || validator ? (val) => { let valid = false; let allowedValues = []; if (values) { allowedValues = [...values, defaultValue]; valid || (valid = allowedValues.includes(val)); } if (validator) valid || (valid = validator(val)); if (!valid && allowedValues.length > 0) { const allowValuesText = [...new Set(allowedValues)].map((value) => JSON.stringify(value)).join(", "); vue.warn(`Invalid prop: validation failed${key ? ` for prop "${key}"` : ""}. Expected one of [${allowValuesText}], got value ${JSON.stringify(val)}.`); } return valid; } : void 0; return { type: typeof type === "object" && Object.getOwnPropertySymbols(type).includes(wrapperKey) ? type[wrapperKey] : type, required: !!required, default: defaultValue, validator: _validator, [propKey]: true }; } const buildProps = (props) => fromPairs_1(Object.entries(props).map(([key, option]) => [ key, buildProp(option, key) ])); const definePropType = (val) => ({ [wrapperKey]: val }); const keyOf = (arr) => Object.keys(arr); const mutable = (val) => val; const componentSize = ["large", "medium", "small", "mini"]; const useLocaleProps = { locale: buildProp({ type: definePropType(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 configProviderContextKey = Symbol(); const radioGroupKey = Symbol("radioGroupKey"); const sizes = ["", "large", "medium", "small", "mini"]; const useFormItemProps = buildProps({ size: { type: String, values: sizes, default: "" }, disabled: Boolean }); const useFormItem = ({ size, disabled }) => { var _a; const vm = vue.getCurrentInstance(); const $ELEMENT = useGlobalConfig$1(); const props = (_a = vm.proxy) == null ? void 0 : _a.$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; }), form, formItem }; }; 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 defaultConfig = { button: { autoInsertSpace: true } }; const useGlobalConfig = () => { return vue.inject(configProviderContextKey, defaultConfig); }; const version$1 = "1.2.0-beta.3"; 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 }; }; var makeInstaller$1 = makeInstaller; 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; }; function tryOnScopeDispose(fn) { if (vue.getCurrentScope()) { vue.onScopeDispose(fn); return true; } return false; } const isClient = typeof window !== "undefined"; const isString = (val) => typeof val === "string"; const noop$2 = () => { }; function createFilterWrapper(filter, fn) { function wrapper(...args) { filter(() => fn.apply(this, args), { fn, thisArg: this, args }); } return wrapper; } function throttleFilter(ms, trailing = true, leading = true) { let lastExec = 0; let timer; let preventLeading = !leading; const clear = () => { if (timer) { clearTimeout(timer); timer = void 0; } }; 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(); if (preventLeading) preventLeading = false; else invoke(); } else if (trailing) { timer = setTimeout(() => { lastExec = Date.now(); if (!leading) preventLeading = true; clear(); invoke(); }, duration); } if (!leading && !timer) timer = setTimeout(() => preventLeading = true, duration); }; return filter; } function useThrottleFn(fn, ms = 200, trailing = true, leading = true) { return createFilterWrapper(throttleFilter(ms, trailing, leading), fn); } 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; cb(...args); }, vue.unref(interval)); } if (immediate) { isPending.value = true; if (isClient) start(); } tryOnScopeDispose(stop); return { isPending, start, stop }; } function unrefElement(elRef) { var _a; const plain = vue.unref(elRef); return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain; } const defaultWindow = isClient ? window : void 0; isClient ? window.document : void 0; isClient ? window.navigator : void 0; 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$2; let cleanup = noop$2; 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$2; }; }, { immediate: true, flush: "post" }); const stop = () => { stopWatch(); cleanup(); }; tryOnScopeDispose(stop); return stop; } var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols; var __hasOwnProp$9 = Object.prototype.hasOwnProperty; var __propIsEnum$9 = Object.prototype.propertyIsEnumerable; var __objRest$2 = (source, exclude) => { var target = {}; for (var prop in source) if (__hasOwnProp$9.call(source, prop) && exclude.indexOf(prop) < 0) target[prop] = source[prop]; if (source != null && __getOwnPropSymbols$9) for (var prop of __getOwnPropSymbols$9(source)) { if (exclude.indexOf(prop) < 0 && __propIsEnum$9.call(source, prop)) target[prop] = source[prop]; } return target; }; function useResizeObserver(target, callback, options = {}) { const _a = options, { window = defaultWindow } = _a, observerOptions = __objRest$2(_a, ["window"]); let observer; const isSupported = window && "ResizeObserver" in window; const cleanup = () => { if (observer) { observer.disconnect(); observer = void 0; } }; const stopWatch = vue.watch(() => unrefElement(target), (el) => { cleanup(); if (isSupported && window && el) { 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(SwipeDirection2) { SwipeDirection2["UP"] = "UP"; SwipeDirection2["RIGHT"] = "RIGHT"; SwipeDirection2["DOWN"] = "DOWN"; SwipeDirection2["LEFT"] = "LEFT"; SwipeDirection2["NONE"] = "NONE"; })(SwipeDirection || (SwipeDirection = {})); const affixProps = buildProps({ zIndex: { type: definePropType([Number, String]), default: 100 }, target: { type: String, default: "" }, offset: { type: Number, default: 0 }, position: { type: String, values: ["top", "bottom"], default: "top" } }); const affixEmits = { scroll: ({ scrollTop, fixed }) => typeof scrollTop === "number" && typeof fixed === "boolean", change: (fixed) => typeof fixed === "boolean" }; var script$2z = 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, true); }); useEventListener(scrollContainer, "scroll", onScroll); useResizeObserver(root, () => update()); useResizeObserver(target, () => update()); return { root, state, rootStyle, affixStyle, update }; } }); function render$2r(_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$2z.render = render$2r; script$2z.__file = "packages/components/affix/src/affix.vue"; const ElAffix = withInstall(script$2z); const iconProps = buildProps({ size: { type: definePropType([Number, String]) }, color: { type: String } }); var script$2y = vue.defineComponent({ name: "ElIcon", inheritAttrs: false, props: iconProps, setup(props) { return { style: vue.computed(() => { if (!props.size && !props.color) { return {}; } let size = props.size; if (isNumber(size) || isString$1(size) && !size.endsWith("px")) { size = `${size}px`; } return { ...props.size ? { "--font-size": size } : {}, ...props.color ? { "--color": props.color } : {} }; }) }; } }); function render$2q(_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$2y.render = render$2q; script$2y.__file = "packages/components/icon/src/icon.vue"; const ElIcon = withInstall(script$2y); var ElIcon$1 = ElIcon; var script$2x = vue.defineComponent({ name: "ArrowDown" }); const _hoisted_1$1Y = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$1z = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z" }, null, -1); function render$2p(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1Y, [ _hoisted_2$1z ]); } script$2x.render = render$2p; script$2x.__file = "packages/components/ArrowDown.vue"; var ArrowDown = script$2x; var script$2w = vue.defineComponent({ name: "ArrowLeft" }); const _hoisted_1$1X = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$1y = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z" }, null, -1); function render$2o(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1X, [ _hoisted_2$1y ]); } script$2w.render = render$2o; script$2w.__file = "packages/components/ArrowLeft.vue"; var ArrowLeft = script$2w; var script$2v = vue.defineComponent({ name: "ArrowUp" }); const _hoisted_1$1W = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$1x = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "m488.832 344.32-339.84 356.672a32 32 0 0 0 0 44.16l.384.384a29.44 29.44 0 0 0 42.688 0l320-335.872 319.872 335.872a29.44 29.44 0 0 0 42.688 0l.384-.384a32 32 0 0 0 0-44.16L535.168 344.32a32 32 0 0 0-46.336 0z" }, null, -1); function render$2n(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1W, [ _hoisted_2$1x ]); } script$2v.render = render$2n; script$2v.__file = "packages/components/ArrowUp.vue"; var ArrowUp = script$2v; var script$2u = vue.defineComponent({ name: "Back" }); const _hoisted_1$1V = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$1w = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M224 480h640a32 32 0 1 1 0 64H224a32 32 0 0 1 0-64z" }, null, -1); const _hoisted_3$Q = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "m237.248 512 265.408 265.344a32 32 0 0 1-45.312 45.312l-288-288a32 32 0 0 1 0-45.312l288-288a32 32 0 1 1 45.312 45.312L237.248 512z" }, null, -1); function render$2m(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1V, [ _hoisted_2$1w, _hoisted_3$Q ]); } script$2u.render = render$2m; script$2u.__file = "packages/components/Back.vue"; var Back = script$2u; var script$2t = vue.defineComponent({ name: "Calendar" }); const _hoisted_1$1U = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$1v = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M128 384v512h768V192H768v32a32 32 0 1 1-64 0v-32H320v32a32 32 0 0 1-64 0v-32H128v128h768v64H128zm192-256h384V96a32 32 0 1 1 64 0v32h160a32 32 0 0 1 32 32v768a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h160V96a32 32 0 0 1 64 0v32zm-32 384h64a32 32 0 0 1 0 64h-64a32 32 0 0 1 0-64zm0 192h64a32 32 0 1 1 0 64h-64a32 32 0 1 1 0-64zm192-192h64a32 32 0 0 1 0 64h-64a32 32 0 0 1 0-64zm0 192h64a32 32 0 1 1 0 64h-64a32 32 0 1 1 0-64zm192-192h64a32 32 0 1 1 0 64h-64a32 32 0 1 1 0-64zm0 192h64a32 32 0 1 1 0 64h-64a32 32 0 1 1 0-64z" }, null, -1); function render$2l(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1U, [ _hoisted_2$1v ]); } script$2t.render = render$2l; script$2t.__file = "packages/components/Calendar.vue"; var Calendar = script$2t; var script$2s = vue.defineComponent({ name: "CaretRight" }); const _hoisted_1$1T = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$1u = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M384 192v640l384-320.064z" }, null, -1); function render$2k(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1T, [ _hoisted_2$1u ]); } script$2s.render = render$2k; script$2s.__file = "packages/components/CaretRight.vue"; var CaretRight = script$2s; var script$2r = vue.defineComponent({ name: "CaretTop" }); const _hoisted_1$1S = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$1t = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M512 320 192 704h639.936z" }, null, -1); function render$2j(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1S, [ _hoisted_2$1t ]); } script$2r.render = render$2j; script$2r.__file = "packages/components/CaretTop.vue"; var CaretTop = script$2r; var script$2q = vue.defineComponent({ name: "Check" }); const _hoisted_1$1R = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$1s = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M406.656 706.944 195.84 496.256a32 32 0 1 0-45.248 45.248l256 256 512-512a32 32 0 0 0-45.248-45.248L406.592 706.944z" }, null, -1); function render$2i(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1R, [ _hoisted_2$1s ]); } script$2q.render = render$2i; script$2q.__file = "packages/components/Check.vue"; var Check = script$2q; var script$2p = vue.defineComponent({ name: "CircleCheckFilled" }); const _hoisted_1$1Q = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$1r = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm-55.808 536.384-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.272 38.272 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336L456.192 600.384z" }, null, -1); function render$2h(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1Q, [ _hoisted_2$1r ]); } script$2p.render = render$2h; script$2p.__file = "packages/components/CircleCheckFilled.vue"; var CircleCheckFilled = script$2p; var script$2o = vue.defineComponent({ name: "CircleCheck" }); const _hoisted_1$1P = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$1q = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z" }, null, -1); const _hoisted_3$P = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M745.344 361.344a32 32 0 0 1 45.312 45.312l-288 288a32 32 0 0 1-45.312 0l-160-160a32 32 0 1 1 45.312-45.312L480 626.752l265.344-265.408z" }, null, -1); function render$2g(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1P, [ _hoisted_2$1q, _hoisted_3$P ]); } script$2o.render = render$2g; script$2o.__file = "packages/components/CircleCheck.vue"; var CircleCheck = script$2o; var script$2n = vue.defineComponent({ name: "CircleCloseFilled" }); const _hoisted_1$1O = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$1p = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 393.664L407.936 353.6a38.4 38.4 0 1 0-54.336 54.336L457.664 512 353.6 616.064a38.4 38.4 0 1 0 54.336 54.336L512 566.336 616.064 670.4a38.4 38.4 0 1 0 54.336-54.336L566.336 512 670.4 407.936a38.4 38.4 0 1 0-54.336-54.336L512 457.664z" }, null, -1); function render$2f(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1O, [ _hoisted_2$1p ]); } script$2n.render = render$2f; script$2n.__file = "packages/components/CircleCloseFilled.vue"; var CircleCloseFilled = script$2n; var script$2m = vue.defineComponent({ name: "CircleClose" }); const _hoisted_1$1N = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$1o = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "m466.752 512-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248L466.752 512z" }, null, -1); const _hoisted_3$O = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z" }, null, -1); function render$2e(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1N, [ _hoisted_2$1o, _hoisted_3$O ]); } script$2m.render = render$2e; script$2m.__file = "packages/components/CircleClose.vue"; var CircleClose = script$2m; var script$2l = vue.defineComponent({ name: "ArrowRight" }); const _hoisted_1$1M = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$1n = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z" }, null, -1); function render$2d(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1M, [ _hoisted_2$1n ]); } script$2l.render = render$2d; script$2l.__file = "packages/components/ArrowRight.vue"; var ArrowRight = script$2l; var script$2k = vue.defineComponent({ name: "Clock" }); const _hoisted_1$1L = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$1m = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z" }, null, -1); const _hoisted_3$N = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M480 256a32 32 0 0 1 32 32v256a32 32 0 0 1-64 0V288a32 32 0 0 1 32-32z" }, null, -1); const _hoisted_4$x = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M480 512h256q32 0 32 32t-32 32H480q-32 0-32-32t32-32z" }, null, -1); function render$2c(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1L, [ _hoisted_2$1m, _hoisted_3$N, _hoisted_4$x ]); } script$2k.render = render$2c; script$2k.__file = "packages/components/Clock.vue"; var Clock = script$2k; var script$2j = vue.defineComponent({ name: "Close" }); const _hoisted_1$1K = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$1l = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z" }, null, -1); function render$2b(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1K, [ _hoisted_2$1l ]); } script$2j.render = render$2b; script$2j.__file = "packages/components/Close.vue"; var Close = script$2j; var script$2i = vue.defineComponent({ name: "DArrowLeft" }); const _hoisted_1$1J = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$1k = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M529.408 149.376a29.12 29.12 0 0 1 41.728 0 30.592 30.592 0 0 1 0 42.688L259.264 511.936l311.872 319.936a30.592 30.592 0 0 1-.512 43.264 29.12 29.12 0 0 1-41.216-.512L197.76 534.272a32 32 0 0 1 0-44.672l331.648-340.224zm256 0a29.12 29.12 0 0 1 41.728 0 30.592 30.592 0 0 1 0 42.688L515.264 511.936l311.872 319.936a30.592 30.592 0 0 1-.512 43.264 29.12 29.12 0 0 1-41.216-.512L453.76 534.272a32 32 0 0 1 0-44.672l331.648-340.224z" }, null, -1); function render$2a(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1J, [ _hoisted_2$1k ]); } script$2i.render = render$2a; script$2i.__file = "packages/components/DArrowLeft.vue"; var DArrowLeft = script$2i; var script$2h = vue.defineComponent({ name: "DArrowRight" }); const _hoisted_1$1I = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$1j = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M452.864 149.312a29.12 29.12 0 0 1 41.728.064L826.24 489.664a32 32 0 0 1 0 44.672L494.592 874.624a29.12 29.12 0 0 1-41.728 0 30.592 30.592 0 0 1 0-42.752L764.736 512 452.864 192a30.592 30.592 0 0 1 0-42.688zm-256 0a29.12 29.12 0 0 1 41.728.064L570.24 489.664a32 32 0 0 1 0 44.672L238.592 874.624a29.12 29.12 0 0 1-41.728 0 30.592 30.592 0 0 1 0-42.752L508.736 512 196.864 192a30.592 30.592 0 0 1 0-42.688z" }, null, -1); function render$29(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1I, [ _hoisted_2$1j ]); } script$2h.render = render$29; script$2h.__file = "packages/components/DArrowRight.vue"; var DArrowRight = script$2h; var script$2g = vue.defineComponent({ name: "Delete" }); const _hoisted_1$1H = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$1i = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M160 256H96a32 32 0 0 1 0-64h256V95.936a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V192h256a32 32 0 1 1 0 64h-64v672a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32V256zm448-64v-64H416v64h192zM224 896h576V256H224v640zm192-128a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32zm192 0a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32z" }, null, -1); function render$28(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1H, [ _hoisted_2$1i ]); } script$2g.render = render$28; script$2g.__file = "packages/components/Delete.vue"; var Delete = script$2g; var script$2f = vue.defineComponent({ name: "Document" }); const _hoisted_1$1G = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$1h = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M832 384H576V128H192v768h640V384zm-26.496-64L640 154.496V320h165.504zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32zm160 448h384v64H320v-64zm0-192h160v64H320v-64zm0 384h384v64H320v-64z" }, null, -1); function render$27(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1G, [ _hoisted_2$1h ]); } script$2f.render = render$27; script$2f.__file = "packages/components/Document.vue"; var Document = script$2f; var script$2e = vue.defineComponent({ name: "FullScreen" }); const _hoisted_1$1F = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$1g = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "m160 96.064 192 .192a32 32 0 0 1 0 64l-192-.192V352a32 32 0 0 1-64 0V96h64v.064zm0 831.872V928H96V672a32 32 0 1 1 64 0v191.936l192-.192a32 32 0 1 1 0 64l-192 .192zM864 96.064V96h64v256a32 32 0 1 1-64 0V160.064l-192 .192a32 32 0 1 1 0-64l192-.192zm0 831.872-192-.192a32 32 0 0 1 0-64l192 .192V672a32 32 0 1 1 64 0v256h-64v-.064z" }, null, -1); function render$26(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1F, [ _hoisted_2$1g ]); } script$2e.render = render$26; script$2e.__file = "packages/components/FullScreen.vue"; var FullScreen = script$2e; var script$2d = vue.defineComponent({ name: "InfoFilled" }); const _hoisted_1$1E = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$1f = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M512 64a448 448 0 1 1 0 896.064A448 448 0 0 1 512 64zm67.2 275.072c33.28 0 60.288-23.104 60.288-57.344s-27.072-57.344-60.288-57.344c-33.28 0-60.16 23.104-60.16 57.344s26.88 57.344 60.16 57.344zM590.912 699.2c0-6.848 2.368-24.64 1.024-34.752l-52.608 60.544c-10.88 11.456-24.512 19.392-30.912 17.28a12.992 12.992 0 0 1-8.256-14.72l87.68-276.992c7.168-35.136-12.544-67.2-54.336-71.296-44.096 0-108.992 44.736-148.48 101.504 0 6.784-1.28 23.68.064 33.792l52.544-60.608c10.88-11.328 23.552-19.328 29.952-17.152a12.8 12.8 0 0 1 7.808 16.128L388.48 728.576c-10.048 32.256 8.96 63.872 55.04 71.04 67.84 0 107.904-43.648 147.456-100.416z" }, null, -1); function render$25(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1E, [ _hoisted_2$1f ]); } script$2d.render = render$25; script$2d.__file = "packages/components/InfoFilled.vue"; var InfoFilled = script$2d; var script$2c = vue.defineComponent({ name: "Loading" }); const _hoisted_1$1D = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$1e = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z" }, null, -1); function render$24(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1D, [ _hoisted_2$1e ]); } script$2c.render = render$24; script$2c.__file = "packages/components/Loading.vue"; var Loading$2 = script$2c; var script$2b = vue.defineComponent({ name: "Minus" }); const _hoisted_1$1C = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$1d = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M128 544h768a32 32 0 1 0 0-64H128a32 32 0 0 0 0 64z" }, null, -1); function render$23(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1C, [ _hoisted_2$1d ]); } script$2b.render = render$23; script$2b.__file = "packages/components/Minus.vue"; var Minus = script$2b; var script$2a = vue.defineComponent({ name: "More" }); const _hoisted_1$1B = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$1c = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M176 416a112 112 0 1 0 0 224 112 112 0 0 0 0-224m0 64a48 48 0 1 1 0 96 48 48 0 0 1 0-96zm336-64a112 112 0 1 1 0 224 112 112 0 0 1 0-224zm0 64a48 48 0 1 0 0 96 48 48 0 0 0 0-96zm336-64a112 112 0 1 1 0 224 112 112 0 0 1 0-224zm0 64a48 48 0 1 0 0 96 48 48 0 0 0 0-96z" }, null, -1); function render$22(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1B, [ _hoisted_2$1c ]); } script$2a.render = render$22; script$2a.__file = "packages/components/More.vue"; var More = script$2a; var script$29 = vue.defineComponent({ name: "MoreFilled" }); const _hoisted_1$1A = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$1b = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M176 416a112 112 0 1 1 0 224 112 112 0 0 1 0-224zm336 0a112 112 0 1 1 0 224 112 112 0 0 1 0-224zm336 0a112 112 0 1 1 0 224 112 112 0 0 1 0-224z" }, null, -1); function render$21(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1A, [ _hoisted_2$1b ]); } script$29.render = render$21; script$29.__file = "packages/components/MoreFilled.vue"; var MoreFilled = script$29; var script$28 = vue.defineComponent({ name: "Plus" }); const _hoisted_1$1z = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$1a = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64h352z" }, null, -1); function render$20(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1z, [ _hoisted_2$1a ]); } script$28.render = render$20; script$28.__file = "packages/components/Plus.vue"; var Plus = script$28; var script$27 = vue.defineComponent({ name: "QuestionFilled" }); const _hoisted_1$1y = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$19 = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm23.744 191.488c-52.096 0-92.928 14.784-123.2 44.352-30.976 29.568-45.76 70.4-45.76 122.496h80.256c0-29.568 5.632-52.8 17.6-68.992 13.376-19.712 35.2-28.864 66.176-28.864 23.936 0 42.944 6.336 56.32 19.712 12.672 13.376 19.712 31.68 19.712 54.912 0 17.6-6.336 34.496-19.008 49.984l-8.448 9.856c-45.76 40.832-73.216 70.4-82.368 89.408-9.856 19.008-14.08 42.24-14.08 68.992v9.856h80.96v-9.856c0-16.896 3.52-31.68 10.56-45.76 6.336-12.672 15.488-24.64 28.16-35.2 33.792-29.568 54.208-48.576 60.544-55.616 16.896-22.528 26.048-51.392 26.048-86.592 0-42.944-14.08-76.736-42.24-101.376-28.16-25.344-65.472-37.312-111.232-37.312zm-12.672 406.208a54.272 54.272 0 0 0-38.72 14.784 49.408 49.408 0 0 0-15.488 38.016c0 15.488 4.928 28.16 15.488 38.016A54.848 54.848 0 0 0 523.072 768c15.488 0 28.16-4.928 38.72-14.784a51.52 51.52 0 0 0 16.192-38.72 51.968 51.968 0 0 0-15.488-38.016 55.936 55.936 0 0 0-39.424-14.784z" }, null, -1); function render$1$(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1y, [ _hoisted_2$19 ]); } script$27.render = render$1$; script$27.__file = "packages/components/QuestionFilled.vue"; var QuestionFilled = script$27; var script$26 = vue.defineComponent({ name: "RefreshRight" }); const _hoisted_1$1x = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$18 = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M784.512 230.272v-50.56a32 32 0 1 1 64 0v149.056a32 32 0 0 1-32 32H667.52a32 32 0 1 1 0-64h92.992A320 320 0 1 0 524.8 833.152a320 320 0 0 0 320-320h64a384 384 0 0 1-384 384 384 384 0 0 1-384-384 384 384 0 0 1 643.712-282.88z" }, null, -1); function render$1_(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1x, [ _hoisted_2$18 ]); } script$26.render = render$1_; script$26.__file = "packages/components/RefreshRight.vue"; var RefreshRight = script$26; var script$25 = vue.defineComponent({ name: "RefreshLeft" }); const _hoisted_1$1w = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$17 = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M289.088 296.704h92.992a32 32 0 0 1 0 64H232.96a32 32 0 0 1-32-32V179.712a32 32 0 0 1 64 0v50.56a384 384 0 0 1 643.84 282.88 384 384 0 0 1-383.936 384 384 384 0 0 1-384-384h64a320 320 0 1 0 640 0 320 320 0 0 0-555.712-216.448z" }, null, -1); function render$1Z(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1w, [ _hoisted_2$17 ]); } script$25.render = render$1Z; script$25.__file = "packages/components/RefreshLeft.vue"; var RefreshLeft = script$25; var script$24 = vue.defineComponent({ name: "ScaleToOriginal" }); const _hoisted_1$1v = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$16 = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M813.176 180.706a60.235 60.235 0 0 1 60.236 60.235v481.883a60.235 60.235 0 0 1-60.236 60.235H210.824a60.235 60.235 0 0 1-60.236-60.235V240.94a60.235 60.235 0 0 1 60.236-60.235h602.352zm0-60.235H210.824A120.47 120.47 0 0 0 90.353 240.94v481.883a120.47 120.47 0 0 0 120.47 120.47h602.353a120.47 120.47 0 0 0 120.471-120.47V240.94a120.47 120.47 0 0 0-120.47-120.47zm-120.47 180.705a30.118 30.118 0 0 0-30.118 30.118v301.177a30.118 30.118 0 0 0 60.236 0V331.294a30.118 30.118 0 0 0-30.118-30.118zm-361.412 0a30.118 30.118 0 0 0-30.118 30.118v301.177a30.118 30.118 0 1 0 60.236 0V331.294a30.118 30.118 0 0 0-30.118-30.118zM512 361.412a30.118 30.118 0 0 0-30.118 30.117v30.118a30.118 30.118 0 0 0 60.236 0V391.53A30.118 30.118 0 0 0 512 361.412zM512 512a30.118 30.118 0 0 0-30.118 30.118v30.117a30.118 30.118 0 0 0 60.236 0v-30.117A30.118 30.118 0 0 0 512 512z" }, null, -1); function render$1Y(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1v, [ _hoisted_2$16 ]); } script$24.render = render$1Y; script$24.__file = "packages/components/ScaleToOriginal.vue"; var ScaleToOriginal = script$24; var script$23 = vue.defineComponent({ name: "Search" }); const _hoisted_1$1u = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$15 = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704z" }, null, -1); function render$1X(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1u, [ _hoisted_2$15 ]); } script$23.render = render$1X; script$23.__file = "packages/components/Search.vue"; var Search = script$23; var script$22 = vue.defineComponent({ name: "Star" }); const _hoisted_1$1t = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$14 = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "m512 747.84 228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72L512 747.84zM313.6 924.48a70.4 70.4 0 0 1-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 0 1 128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 0 1 126.208 0l99.2 200.96 221.824 32.256a70.4 70.4 0 0 1 39.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 0 1-102.144 74.24L512 820.096l-198.4 104.32z" }, null, -1); function render$1W(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1t, [ _hoisted_2$14 ]); } script$22.render = render$1W; script$22.__file = "packages/components/Star.vue"; var Star = script$22; var script$21 = vue.defineComponent({ name: "StarFilled" }); const _hoisted_1$1s = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$13 = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z" }, null, -1); function render$1V(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1s, [ _hoisted_2$13 ]); } script$21.render = render$1V; script$21.__file = "packages/components/StarFilled.vue"; var StarFilled = script$21; var script$20 = vue.defineComponent({ name: "SuccessFilled" }); const _hoisted_1$1r = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$12 = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm-55.808 536.384-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.272 38.272 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336L456.192 600.384z" }, null, -1); function render$1U(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1r, [ _hoisted_2$12 ]); } script$20.render = render$1U; script$20.__file = "packages/components/SuccessFilled.vue"; var SuccessFilled = script$20; var script$1$ = vue.defineComponent({ name: "View" }); const _hoisted_1$1q = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$11 = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352zm0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448zm0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160z" }, null, -1); function render$1T(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1q, [ _hoisted_2$11 ]); } script$1$.render = render$1T; script$1$.__file = "packages/components/View.vue"; var IconView = script$1$; var script$1_ = vue.defineComponent({ name: "WarningFilled" }); const _hoisted_1$1p = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$10 = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 192a58.432 58.432 0 0 0-58.24 63.744l23.36 256.384a35.072 35.072 0 0 0 69.76 0l23.296-256.384A58.432 58.432 0 0 0 512 256zm0 512a51.2 51.2 0 1 0 0-102.4 51.2 51.2 0 0 0 0 102.4z" }, null, -1); function render$1S(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1p, [ _hoisted_2$10 ]); } script$1_.render = render$1S; script$1_.__file = "packages/components/WarningFilled.vue"; var WarningFilled = script$1_; var script$1Z = vue.defineComponent({ name: "ZoomIn" }); const _hoisted_1$1o = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$$ = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704zm-32-384v-96a32 32 0 0 1 64 0v96h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64h96z" }, null, -1); function render$1R(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1o, [ _hoisted_2$$ ]); } script$1Z.render = render$1R; script$1Z.__file = "packages/components/ZoomIn.vue"; var ZoomIn = script$1Z; var script$1Y = vue.defineComponent({ name: "ZoomOut" }); const _hoisted_1$1n = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }; const _hoisted_2$_ = /* @__PURE__ */ vue.createVNode("path", { fill: "currentColor", d: "m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704zM352 448h256a32 32 0 0 1 0 64H352a32 32 0 0 1 0-64z" }, null, -1); function render$1Q(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock("svg", _hoisted_1$1n, [ _hoisted_2$_ ]); } script$1Y.render = render$1Q; script$1Y.__file = "packages/components/ZoomOut.vue"; var ZoomOut = script$1Y; const CloseComponents = { Close }; const TypeComponents = { Close, SuccessFilled, InfoFilled, WarningFilled, CircleCloseFilled }; const TypeComponentsMap = { success: SuccessFilled, warning: WarningFilled, error: CircleCloseFilled, info: InfoFilled }; const ValidateComponentsMap = { validating: Loading$2, success: CircleCheck, error: CircleClose }; const alertProps = buildProps({ title: { type: String, default: "" }, description: { type: String, default: "" }, type: { type: String, values: keyOf(TypeComponentsMap), default: "info" }, closable: { type: Boolean, default: true }, closeText: { type: String, default: "" }, showIcon: Boolean, center: Boolean, effect: { type: String, values: ["light", "dark"], default: "light" } }); const alertEmits = { close: (evt) => evt instanceof MouseEvent }; var script$1X = vue.defineComponent({ name: "ElAlert", components: { ElIcon, ...TypeComponents }, props: alertProps, emits: alertEmits, setup(props, { emit, slots }) { const visible = vue.ref(true); const typeClass = vue.computed(() => `el-alert--${props.type}`); const iconComponent = vue.computed(() => TypeComponentsMap[props.type] || TypeComponentsMap["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, iconComponent, isBigIcon, isBoldTitle, close }; } }); const _hoisted_1$1m = { class: "el-alert__content" }; const _hoisted_2$Z = { key: 1, class: "el-alert__description" }; function render$1P(_ctx, _cache, $props, $setup, $data, $options) { const _component_el_icon = vue.resolveComponent("el-icon"); const _component_close = vue.resolveComponent("close"); 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 && _ctx.iconComponent ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0, class: vue.normalizeClass(["el-alert__icon", _ctx.isBigIcon]) }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent))) ]), _: 1 }, 8, ["class"])) : vue.createCommentVNode("v-if", true), vue.createElementVNode("div", _hoisted_1$1m, [ _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$Z, [ vue.renderSlot(_ctx.$slots, "default", {}, () => [ vue.createTextVNode(vue.toDisplayString(_ctx.description), 1) ]) ])) : vue.createCommentVNode("v-if", true), _ctx.closable ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [ _ctx.closeText ? (vue.openBlock(), vue.createElementBlock("div", { key: 0, class: "el-alert__closebtn is-customed", onClick: _cache[0] || (_cache[0] = (...args) => _ctx.close && _ctx.close(...args)) }, vue.toDisplayString(_ctx.closeText), 1)) : (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 1, class: "el-alert__closebtn", onClick: _ctx.close }, { default: vue.withCtx(() => [ vue.createVNode(_component_close) ]), _: 1 }, 8, ["onClick"])) ], 2112)) : vue.createCommentVNode("v-if", true) ]) ], 2), [ [vue.vShow, _ctx.visible] ]) ]), _: 3 }); } script$1X.render = render$1P; script$1X.__file = "packages/components/alert/src/alert.vue"; const ElAlert = withInstall(script$1X); var root = _root; /** * 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$1 = function() { return root.Date.now(); }; var now_1 = now$1; /** 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$1(string) { var index = string.length; while (index-- && reWhitespace.test(string.charAt(index))) {} return index; } var _trimmedEndIndex = trimmedEndIndex$1; 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$1(string) { return string ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '') : string; } var _baseTrim = baseTrim$1; var baseGetTag = _baseGetTag, isObjectLike$3 = isObjectLike_1; /** `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$1(value) { return typeof value == 'symbol' || (isObjectLike$3(value) && baseGetTag(value) == symbolTag$2); } var isSymbol_1 = isSymbol$1; var baseTrim = _baseTrim, isObject$6 = isObject_1, isSymbol = isSymbol_1; /** 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$1(value) { if (typeof value == 'number') { return value; } if (isSymbol(value)) { return NAN; } if (isObject$6(value)) { var other = typeof value.valueOf == 'function' ? value.valueOf() : value; value = isObject$6(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$1; var isObject$5 = isObject_1, now = now_1, toNumber = toNumber_1; /** 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$1(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(wait) || 0; if (isObject$5(options)) { leading = !!options.leading; maxing = 'maxWait' in options; maxWait = maxing ? nativeMax$1(toNumber(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(); 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()); } function debounced() { var time = now(), 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$1; var debounce$2 = debounce_1; function isKorean(text) { const reg = /([(\uAC00-\uD7AF)|(\u3130-\u318F)])+/gi; return reg.test(text); } let hiddenTextarea = void 0; 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) { var _a; if (!hiddenTextarea) { hiddenTextarea = document.createElement("textarea"); document.body.appendChild(hiddenTextarea); } const { paddingSize, borderSize, boxSizing, contextStyle } = calculateNodeStyling(targetElement); hiddenTextarea.setAttribute("style", `${contextStyle};${HIDDEN_STYLE}`); hiddenTextarea.value = targetElement.value || targetElement.placeholder || ""; let height = hiddenTextarea.scrollHeight; const result = {}; if (boxSizing === "border-box") { height = height + borderSize; } else if (boxSizing === "content-box") { height = height - paddingSize; } hiddenTextarea.value = ""; const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize; if (isNumber(minRows)) { let minHeight = singleRowHeight * minRows; if (boxSizing === "border-box") { minHeight = minHeight + paddingSize + borderSize; } height = Math.max(minHeight, height); result.minHeight = `${minHeight}px`; } if (isNumber(maxRows)) { let maxHeight = singleRowHeight * maxRows; if (boxSizing === "border-box") { maxHeight = maxHeight + paddingSize + borderSize; } height = Math.min(maxHeight, height); } result.height = `${height}px`; (_a = hiddenTextarea.parentNode) == null ? void 0 : _a.removeChild(hiddenTextarea); hiddenTextarea = void 0; return result; } const inputProps = buildProps({ ...useFormItemProps, modelValue: { type: definePropType(void 0), default: "" }, type: { type: String, default: "text" }, resize: { type: String, values: ["none", "both", "horizontal", "vertical"] }, autosize: { type: definePropType([Boolean, Object]), default: false }, autocomplete: { type: String, default: "off" }, placeholder: { type: String }, form: { type: String, default: "" }, readonly: { type: Boolean, default: false }, clearable: { type: Boolean, default: false }, showPassword: { type: Boolean, default: false }, showWordLimit: { type: Boolean, default: false }, suffixIcon: { type: definePropType([String, Object]), default: "" }, prefixIcon: { type: definePropType([String, Object]), default: "" }, label: { type: String }, tabindex: { type: [Number, String] }, validateEvent: { type: Boolean, default: true }, inputStyle: { type: definePropType([Object, Array, String]), default: () => mutable({}) } }); const inputEmits = { [UPDATE_MODEL_EVENT]: (value) => isString$1(value), input: (value) => isString$1(value), change: (value) => isString$1(value), focus: (evt) => evt instanceof FocusEvent, blur: (evt) => evt instanceof FocusEvent, clear: () => true, mouseleave: (evt) => evt instanceof MouseEvent, mouseenter: (evt) => evt instanceof MouseEvent, keydown: (evt) => evt instanceof KeyboardEvent, compositionstart: (evt) => evt instanceof CompositionEvent, compositionupdate: (evt) => evt instanceof CompositionEvent, compositionend: (evt) => evt instanceof CompositionEvent }; const PENDANT_MAP = { suffix: "append", prefix: "prepend" }; var script$1W = vue.defineComponent({ name: "ElInput", components: { ElIcon, CircleClose, IconView }, inheritAttrs: false, props: inputProps, emits: inputEmits, setup(props, { slots, emit, attrs: rawAttrs }) { const instance = vue.getCurrentInstance(); const attrs = useAttrs(); const elForm = vue.inject(elFormKey, void 0); const elFormItem = vue.inject(elFormItemKey, void 0); const { size: inputSize, disabled: inputDisabled } = useFormItem({}); const input = vue.ref(); const textarea = vue.ref(); 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 needStatusIcon = vue.computed(() => { var _a; return (_a = elForm == null ? void 0 : elForm.statusIcon) != null ? _a : false; }); const validateState = vue.computed(() => (elFormItem == null ? void 0 : elFormItem.validateState) || ""); const validateIcon = vue.computed(() => ValidateComponentsMap[validateState.value]); const containerStyle = vue.computed(() => rawAttrs.style); const computedTextareaStyle = vue.computed(() => [ props.inputStyle, _textareaCalcStyle.value, { resize: props.resize } ]); const nativeInputValue = vue.computed(() => props.modelValue === null || props.modelValue === void 0 ? "" : String(props.modelValue)); const showClear = vue.computed(() => props.clearable && !inputDisabled.value && !props.readonly && !!nativeInputValue.value && (focused.value || hovering.value)); const showPwdVisible = vue.computed(() => props.showPassword && !inputDisabled.value && !props.readonly && (!!nativeInputValue.value || focused.value)); const isWordLimitVisible = vue.computed(() => props.showWordLimit && !!attrs.value.maxlength && (props.type === "text" || props.type === "textarea") && !inputDisabled.value && !props.readonly && !props.showPassword); const textLength = vue.computed(() => Array.from(nativeInputValue.value).length); const inputExceed = vue.computed(() => !!isWordLimitVisible.value && textLength.value > Number(attrs.value.maxlength)); const resizeTextarea = () => { const { type, autosize } = props; if (isServer || type !== "textarea") return; if (autosize) { const minRows = isObject$a(autosize) ? autosize.minRows : void 0; const maxRows = isObject$a(autosize) ? autosize.maxRows : void 0; _textareaCalcStyle.value = { ...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; if (!el) return; 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 (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) => { const { value } = event.target; if (isComposing.value) return; if (value === nativeInputValue.value) return; emit(UPDATE_MODEL_EVENT, value); emit("input", value); vue.nextTick(setNativeInputValue); }; const handleChange = (event) => { emit("change", event.target.value); }; const focus = () => { vue.nextTick(() => { var _a; (_a = inputOrTextarea.value) == null ? void 0 : _a.focus(); }); }; const blur = () => { var _a; (_a = inputOrTextarea.value) == null ? void 0 : _a.blur(); }; const handleFocus = (event) => { focused.value = true; emit("focus", event); }; const handleBlur = (event) => { var _a; focused.value = false; emit("blur", event); if (props.validateEvent) { (_a = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "blur"); } }; const select = () => { var _a; (_a = inputOrTextarea.value) == null ? void 0 : _a.select(); }; const handleCompositionStart = (event) => { emit("compositionstart", event); isComposing.value = true; }; const handleCompositionUpdate = (event) => { var _a; emit("compositionupdate", event); const text = (_a = event.target) == null ? void 0 : _a.value; const lastCharacter = text[text.length - 1] || ""; isComposing.value = !isKorean(lastCharacter); }; const handleCompositionEnd = (event) => { emit("compositionend", event); if (isComposing.value) { isComposing.value = false; handleInput(event); } }; const clear = () => { emit(UPDATE_MODEL_EVENT, ""); emit("change", ""); emit("clear"); emit("input", ""); }; const handlePasswordVisible = () => { passwordVisible.value = !passwordVisible.value; focus(); }; const suffixVisible = vue.computed(() => !!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 == null ? void 0 : 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 = (evt) => { hovering.value = false; emit("mouseleave", evt); }; const onMouseEnter = (evt) => { hovering.value = true; emit("mouseenter", evt); }; const handleKeydown = (evt) => { emit("keydown", evt); }; return { input, textarea, attrs, inputSize, validateState, validateIcon, containerStyle, computedTextareaStyle, inputDisabled, showClear, showPwdVisible, isWordLimitVisible, textLength, hovering, inputExceed, passwordVisible, inputOrTextarea, suffixVisible, resizeTextarea, handleInput, handleChange, handleFocus, handleBlur, handleCompositionStart, handleCompositionUpdate, handleCompositionEnd, handlePasswordVisible, clear, select, focus, blur, onMouseLeave, onMouseEnter, handleKeydown }; } }); const _hoisted_1$1l = { key: 0, class: "el-input-group__prepend" }; const _hoisted_2$Y = ["type", "disabled", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder"]; const _hoisted_3$M = { key: 1, class: "el-input__prefix" }; const _hoisted_4$w = { class: "el-input__prefix-inner" }; const _hoisted_5$o = { key: 2, class: "el-input__suffix" }; const _hoisted_6$i = { class: "el-input__suffix-inner" }; const _hoisted_7$c = { key: 3, class: "el-input__count" }; const _hoisted_8$b = { class: "el-input__count-inner" }; const _hoisted_9$8 = { key: 3, class: "el-input-group__append" }; const _hoisted_10$8 = ["tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder"]; const _hoisted_11$4 = { key: 0, class: "el-input__count" }; function render$1O(_ctx, _cache, $props, $setup, $data, $options) { const _component_el_icon = vue.resolveComponent("el-icon"); const _component_circle_close = vue.resolveComponent("circle-close"); const _component_icon_view = vue.resolveComponent("icon-view"); return vue.withDirectives((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.containerStyle), onMouseenter: _cache[17] || (_cache[17] = (...args) => _ctx.onMouseEnter && _ctx.onMouseEnter(...args)), onMouseleave: _cache[18] || (_cache[18] = (...args) => _ctx.onMouseLeave && _ctx.onMouseLeave(...args)) }, [ vue.createCommentVNode(" input "), _ctx.type !== "textarea" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [ vue.createCommentVNode(" prepend slot "), _ctx.$slots.prepend ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1l, [ vue.renderSlot(_ctx.$slots, "prepend") ])) : vue.createCommentVNode("v-if", true), vue.createElementVNode("input", vue.mergeProps({ 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$Y), vue.createCommentVNode(" prefix slot "), _ctx.$slots.prefix || _ctx.prefixIcon ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$M, [ vue.createElementVNode("span", _hoisted_4$w, [ vue.renderSlot(_ctx.$slots, "prefix"), _ctx.prefixIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0, class: "el-input__icon" }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.prefixIcon))) ]), _: 1 })) : vue.createCommentVNode("v-if", true) ]) ])) : vue.createCommentVNode("v-if", true), vue.createCommentVNode(" suffix slot "), _ctx.suffixVisible ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$o, [ vue.createElementVNode("span", _hoisted_6$i, [ !_ctx.showClear || !_ctx.showPwdVisible || !_ctx.isWordLimitVisible ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [ vue.renderSlot(_ctx.$slots, "suffix"), _ctx.suffixIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0, class: "el-input__icon" }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.suffixIcon))) ]), _: 1 })) : vue.createCommentVNode("v-if", true) ], 64)) : vue.createCommentVNode("v-if", true), _ctx.showClear ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 1, class: "el-input__icon el-input__clear", onMousedown: _cache[8] || (_cache[8] = vue.withModifiers(() => { }, ["prevent"])), onClick: _ctx.clear }, { default: vue.withCtx(() => [ vue.createVNode(_component_circle_close) ]), _: 1 }, 8, ["onClick"])) : vue.createCommentVNode("v-if", true), _ctx.showPwdVisible ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 2, class: "el-input__icon el-input__clear", onClick: _ctx.handlePasswordVisible }, { default: vue.withCtx(() => [ vue.createVNode(_component_icon_view) ]), _: 1 }, 8, ["onClick"])) : vue.createCommentVNode("v-if", true), _ctx.isWordLimitVisible ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7$c, [ vue.createElementVNode("span", _hoisted_8$b, vue.toDisplayString(_ctx.textLength) + " / " + vue.toDisplayString(_ctx.attrs.maxlength), 1) ])) : vue.createCommentVNode("v-if", true) ]), _ctx.validateState && _ctx.validateIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0, class: "el-input__icon el-input__validateIcon" }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.validateIcon))) ]), _: 1 })) : vue.createCommentVNode("v-if", true) ])) : vue.createCommentVNode("v-if", true), vue.createCommentVNode(" append slot "), _ctx.$slots.append ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9$8, [ vue.renderSlot(_ctx.$slots, "append") ])) : vue.createCommentVNode("v-if", true) ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [ vue.createCommentVNode(" textarea "), vue.createElementVNode("textarea", vue.mergeProps({ 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[9] || (_cache[9] = (...args) => _ctx.handleCompositionStart && _ctx.handleCompositionStart(...args)), onCompositionupdate: _cache[10] || (_cache[10] = (...args) => _ctx.handleCompositionUpdate && _ctx.handleCompositionUpdate(...args)), onCompositionend: _cache[11] || (_cache[11] = (...args) => _ctx.handleCompositionEnd && _ctx.handleCompositionEnd(...args)), onInput: _cache[12] || (_cache[12] = (...args) => _ctx.handleInput && _ctx.handleInput(...args)), onFocus: _cache[13] || (_cache[13] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)), onBlur: _cache[14] || (_cache[14] = (...args) => _ctx.handleBlur && _ctx.handleBlur(...args)), onChange: _cache[15] || (_cache[15] = (...args) => _ctx.handleChange && _ctx.handleChange(...args)), onKeydown: _cache[16] || (_cache[16] = (...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args)) }), null, 16, _hoisted_10$8), _ctx.isWordLimitVisible ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_11$4, vue.toDisplayString(_ctx.textLength) + " / " + vue.toDisplayString(_ctx.attrs.maxlength), 1)) : vue.createCommentVNode("v-if", true) ], 64)) ], 38)), [ [vue.vShow, _ctx.type !== "hidden"] ]); } script$1W.render = render$1O; script$1W.__file = "packages/components/input/src/input.vue"; const ElInput = withInstall(script$1W); var ElInput$1 = ElInput; 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 script$1V = 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 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$1N(_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$1V.render = render$1N; script$1V.__file = "packages/components/scrollbar/src/bar.vue"; var script$1U = vue.defineComponent({ name: "ElScrollbar", components: { Bar: script$1V }, 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 = offsetHeight ** 2 / wrap.value.scrollHeight; const originalWidth = 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$6(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$1k = { ref: "scrollbar", class: "el-scrollbar" }; function render$1M(_ctx, _cache, $props, $setup, $data, $options) { const _component_bar = vue.resolveComponent("bar"); return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1k, [ 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$1U.render = render$1M; script$1U.__file = "packages/components/scrollbar/src/index.vue"; script$1U.install = (app) => { app.component(script$1U.name, script$1U); }; const _Scrollbar = script$1U; var ElScrollbar = _Scrollbar; const ElScrollbar$1 = _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; } function usePopperOptions(props, state) { return vue.computed(() => { var _a; return { 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 (!vue.unref(visibility)) { return; } const unwrappedTrigger = vue.unref(triggerRef); const _trigger = isHTMLElement$1(unwrappedTrigger) ? unwrappedTrigger : unwrappedTrigger.$el; popperInstance = createPopper(_trigger, vue.unref(popperRef), vue.unref(popperOptions)); popperInstance.update(); } function doDestroy(forceDestroy) { if (!popperInstance || vue.unref(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 (!vue.unref(visibility)) { return; } if (popperInstance) { popperInstance.update(); } else { initializePopper(); } } function onVisibilityChange(toState) { if (toState) { popperStyle.value.zIndex = PopupManager.nextZIndex(); initializePopper(); } } if (!isManualMode()) { const toggleState = () => { if (vue.unref(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$6(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, ""); } const compName = "ElPopper"; const UPDATE_VISIBLE_EVENT = "update:visible"; var script$1T = 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 = { "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$1T.__file = "packages/components/popper/src/index.vue"; script$1T.install = (app) => { app.component(script$1T.name, script$1T); }; const _Popper = script$1T; var ElPopper = _Popper; const ElPopper$1 = _Popper; var script$1S = vue.defineComponent({ name: "ElAutocomplete", components: { ElPopper, ElInput: ElInput$1, ElScrollbar, ElIcon: ElIcon$1, Loading: Loading$2 }, 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$6(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$6(suggestionsArg)) { suggestions.value = suggestionsArg; highlightedIndex.value = props.highlightFirstItem ? 0 : -1; } else { throwError("ElAutocomplete", "autocomplete suggestions must be an array"); } }); }; const debouncedGetData = debounce$2(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$1j = ["aria-expanded", "aria-owns"]; const _hoisted_2$X = { key: 0 }; const _hoisted_3$L = ["id", "aria-selected", "onClick"]; function render$1L(_ctx, _cache, $props, $setup, $data, $options) { const _component_el_input = vue.resolveComponent("el-input"); const _component_loading = vue.resolveComponent("loading"); const _component_el_icon = vue.resolveComponent("el-icon"); 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$1j), [ [_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({ minWidth: _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$X, [ vue.createVNode(_component_el_icon, { class: "is-loading" }, { default: vue.withCtx(() => [ vue.createVNode(_component_loading) ]), _: 1 }) ])) : (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_3$L); }), 128)) ]), _: 3 }) ], 6) ]), _: 3 }, 8, ["visible", "placement", "popper-class", "append-to-body", "effect"]); } script$1S.render = render$1L; script$1S.__file = "packages/components/autocomplete/src/index.vue"; script$1S.install = (app) => { app.component(script$1S.name, script$1S); }; const _Autocomplete = script$1S; const ElAutocomplete = _Autocomplete; const avatarProps = buildProps({ size: { type: [Number, String], values: ["large", "medium", "small"], default: "large", validator: (val) => typeof val === "number" }, shape: { type: String, values: ["circle", "square"], default: "circle" }, icon: { type: definePropType([String, Object]) }, src: { type: String, default: "" }, alt: String, srcSet: String, fit: { type: definePropType(String), default: "cover" } }); const avatarEmits = { error: (evt) => evt instanceof Event }; var script$1R = vue.defineComponent({ name: "ElAvatar", components: { ElIcon }, 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$1i = ["src", "alt", "srcset"]; function render$1K(_ctx, _cache, $props, $setup, $data, $options) { const _component_el_icon = vue.resolveComponent("el-icon"); 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$1i)) : _ctx.icon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 1 }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon))) ]), _: 1 })) : vue.renderSlot(_ctx.$slots, "default", { key: 2 }) ], 6); } script$1R.render = render$1K; script$1R.__file = "packages/components/avatar/src/avatar.vue"; const ElAvatar = withInstall(script$1R); 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$4 = "ElBacktop"; var script$1Q = vue.defineComponent({ name: COMPONENT_NAME$4, components: { ElIcon, CaretTop }, 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$4, `target is not existed: ${props.target}`); } container.value = el.value; } useEventListener(container, "scroll", handleScrollThrottled); }); return { visible, styleBottom, styleRight, handleClick }; } }); function render$1J(_ctx, _cache, $props, $setup, $data, $options) { const _component_caret_top = vue.resolveComponent("caret-top"); const _component_el_icon = vue.resolveComponent("el-icon"); 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", {}, () => [ vue.createVNode(_component_el_icon, { class: "el-backtop__icon" }, { default: vue.withCtx(() => [ vue.createVNode(_component_caret_top) ]), _: 1 }) ]) ], 4)) : vue.createCommentVNode("v-if", true) ]), _: 3 }); } script$1Q.render = render$1J; script$1Q.__file = "packages/components/backtop/src/backtop.vue"; const ElBacktop = withInstall(script$1Q); const badgeProps = buildProps({ value: { type: [String, Number], default: "" }, max: { type: Number, default: 99 }, isDot: Boolean, hidden: Boolean, type: { type: String, values: ["primary", "success", "warning", "info", "danger"], default: "danger" } }); var script$1P = 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$1h = { class: "el-badge" }; const _hoisted_2$W = ["textContent"]; function render$1I(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1h, [ 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$W), [ [vue.vShow, !_ctx.hidden && (_ctx.content || _ctx.content === "0" || _ctx.isDot)] ]) ]), _: 1 }) ]); } script$1P.render = render$1I; script$1P.__file = "packages/components/badge/src/badge.vue"; const ElBadge = withInstall(script$1P); const breadcrumbProps = buildProps({ separator: { type: String, default: "/" }, separatorIcon: { type: definePropType([String, Object]), default: "" } }); var script$1O = 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$1g = { ref: "breadcrumb", class: "el-breadcrumb", "aria-label": "Breadcrumb", role: "navigation" }; function render$1H(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1g, [ vue.renderSlot(_ctx.$slots, "default") ], 512); } script$1O.render = render$1H; script$1O.__file = "packages/components/breadcrumb/src/breadcrumb.vue"; const breadcrumbItemProps = buildProps({ to: { type: definePropType([String, Object]), default: "" }, replace: { type: Boolean, default: false } }); const COMPONENT_NAME$3 = "ElBreadcrumbItem"; var script$1N = vue.defineComponent({ name: COMPONENT_NAME$3, components: { ElIcon: ElIcon$1 }, 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, separatorIcon: parent == null ? void 0 : parent.separatorIcon }; } }); const _hoisted_1$1f = { class: "el-breadcrumb__item" }; const _hoisted_2$V = { key: 1, class: "el-breadcrumb__separator", role: "presentation" }; function render$1G(_ctx, _cache, $props, $setup, $data, $options) { const _component_el_icon = vue.resolveComponent("el-icon"); return vue.openBlock(), vue.createElementBlock("span", _hoisted_1$1f, [ vue.createElementVNode("span", { ref: "link", class: vue.normalizeClass(["el-breadcrumb__inner", _ctx.to ? "is-link" : ""]), role: "link" }, [ vue.renderSlot(_ctx.$slots, "default") ], 2), _ctx.separatorIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0, class: "el-breadcrumb__separator" }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.separatorIcon))) ]), _: 1 })) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$V, vue.toDisplayString(_ctx.separator), 1)) ]); } script$1N.render = render$1G; script$1N.__file = "packages/components/breadcrumb/src/breadcrumb-item.vue"; const ElBreadcrumb = withInstall(script$1O, { BreadcrumbItem: script$1N }); const ElBreadcrumbItem = withNoopInstall(script$1N); const buttonType = [ "default", "primary", "success", "warning", "info", "danger", "text", "" ]; const buttonSize = ["", "large", "medium", "small", "mini"]; const buttonNativeType = ["button", "submit", "reset"]; const buttonProps = buildProps({ ...useFormItemProps, type: { type: String, values: buttonType, default: "" }, icon: { type: definePropType([String, Object]), default: "" }, nativeType: { type: String, values: buttonNativeType, default: "button" }, loading: Boolean, plain: Boolean, autofocus: Boolean, round: Boolean, circle: Boolean, autoInsertSpace: { type: Boolean } }); const buttonEmits = { click: (evt) => evt instanceof MouseEvent }; var script$1M = vue.defineComponent({ name: "ElButton", components: { ElIcon, Loading: Loading$2 }, props: buttonProps, emits: buttonEmits, setup(props, { emit, slots }) { const elBtnGroup = vue.inject(elButtonGroupKey, void 0); const globalConfig = useGlobalConfig(); const autoInsertSpace = vue.computed(() => { var _a; return (_a = props.autoInsertSpace) != null ? _a : globalConfig == null ? void 0 : globalConfig.button.autoInsertSpace; }); const shouldAddSpace = vue.computed(() => { var _a; const defaultSlot = (_a = slots.default) == null ? void 0 : _a.call(slots); if (autoInsertSpace.value && (defaultSlot == null ? void 0 : defaultSlot.length) === 1) { const slot = defaultSlot[0]; if ((slot == null ? void 0 : slot.type) === vue.Text) { const text = slot.children; return /^\p{Unified_Ideograph}{2}$/u.test(text); } } return false; }); const { size: buttonSize, disabled: buttonDisabled } = useFormItem({ size: vue.computed(() => elBtnGroup == null ? void 0 : elBtnGroup.size) }); const buttonType = vue.computed(() => props.type || (elBtnGroup == null ? void 0 : elBtnGroup.type) || "default"); 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, buttonType, buttonDisabled, shouldAddSpace, handleClick }; } }); const _hoisted_1$1e = ["disabled", "autofocus", "type"]; function render$1F(_ctx, _cache, $props, $setup, $data, $options) { const _component_loading = vue.resolveComponent("loading"); const _component_el_icon = vue.resolveComponent("el-icon"); return vue.openBlock(), vue.createElementBlock("button", { class: vue.normalizeClass([ "el-button", _ctx.buttonType ? "el-button--" + _ctx.buttonType : "", _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.createBlock(_component_el_icon, { key: 0, class: "is-loading" }, { default: vue.withCtx(() => [ vue.createVNode(_component_loading) ]), _: 1 })) : _ctx.icon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 1 }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon))) ]), _: 1 })) : vue.createCommentVNode("v-if", true), _ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock("span", { key: 2, class: vue.normalizeClass({ "el-button__text--expand": _ctx.shouldAddSpace }) }, [ vue.renderSlot(_ctx.$slots, "default") ], 2)) : vue.createCommentVNode("v-if", true) ], 10, _hoisted_1$1e); } script$1M.render = render$1F; script$1M.__file = "packages/components/button/src/button.vue"; const buttonGroupProps = { size: buttonProps.size, type: buttonProps.type }; var script$1L = vue.defineComponent({ name: "ElButtonGroup", props: buttonGroupProps, setup(props) { vue.provide(elButtonGroupKey, vue.reactive({ size: vue.toRef(props, "size"), type: vue.toRef(props, "type") })); } }); const _hoisted_1$1d = { class: "el-button-group" }; function render$1E(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1d, [ vue.renderSlot(_ctx.$slots, "default") ]); } script$1L.render = render$1E; script$1L.__file = "packages/components/button/src/button-group.vue"; const ElButton = withInstall(script$1M, { ButtonGroup: script$1L }); const ElButtonGroup$2 = withNoopInstall(script$1L); var dayjs_min = {exports: {}}; (function (module, exports) { !function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",f="month",h="quarter",c="year",d="date",$="Invalid Date",l=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_")},m=function(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()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-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);};}})); }(customParseFormat$1)); var customParseFormat = customParseFormat$1.exports; 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}` }; var baseIsEqual = _baseIsEqual; /** * 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 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); 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, Object], default: CircleClose }, editable: { type: Boolean, default: true }, prefixIcon: { type: [String, Object], 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(date).locale(lang) : dayjs(date, format).locale(lang); return day.isValid() ? day : void 0; }; const formatter = function(date, format, lang) { return isEmpty(format) ? date : dayjs(date).locale(lang).format(format); }; var script$1K = vue.defineComponent({ name: "Picker", components: { ElInput: ElInput$1, ElPopper, ElIcon: ElIcon$1 }, directives: { clickoutside: ClickOutside }, props: timePickerDefaultProps, emits: ["update:modelValue", "change", "focus", "blur", "calendar-change"], setup(props, ctx) { const ELEMENT = useGlobalConfig$1(); 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")); } }; 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 triggerIcon = vue.computed(() => props.prefixIcon || (isTimeLikePicker.value ? Clock : Calendar)); 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, triggerIcon, onPick, handleFocus, handleBlur, pickerVisible, pickerActualVisible, displayValue, parsedValue, setSelectionRange, refPopper, pickerDisabled, onSetPickerOption, onCalendarChange }; } }); const _hoisted_1$1c = ["name", "placeholder", "value", "disabled", "readonly"]; const _hoisted_2$U = { class: "el-range-separator" }; const _hoisted_3$K = ["name", "placeholder", "value", "disabled", "readonly"]; function render$1D(_ctx, _cache, $props, $setup, $data, $options) { const _component_el_icon = vue.resolveComponent("el-icon"); 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[15] || (_cache[15] = ($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[16] || (_cache[16] = ($event) => _ctx.pickerActualVisible = true), onAfterLeave: _cache[17] || (_cache[17] = ($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(() => [ _ctx.triggerIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0, class: "el-input__icon", onClick: _ctx.handleFocus }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.triggerIcon))) ]), _: 1 }, 8, ["onClick"])) : vue.createCommentVNode("v-if", true) ]), suffix: vue.withCtx(() => [ _ctx.showClose && _ctx.clearIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0, class: "el-input__icon clear-icon", onClick: _ctx.onClearIconClick }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.clearIcon))) ]), _: 1 }, 8, ["onClick"])) : vue.createCommentVNode("v-if", true) ]), _: 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[6] || (_cache[6] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)), onMouseenter: _cache[7] || (_cache[7] = (...args) => _ctx.onMouseEnter && _ctx.onMouseEnter(...args)), onMouseleave: _cache[8] || (_cache[8] = (...args) => _ctx.onMouseLeave && _ctx.onMouseLeave(...args)), onKeydown: _cache[9] || (_cache[9] = (...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args)) }, [ _ctx.triggerIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0, class: "el-input__icon el-range__icon", onClick: _ctx.handleFocus }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.triggerIcon))) ]), _: 1 }, 8, ["onClick"])) : vue.createCommentVNode("v-if", true), 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[0] || (_cache[0] = (...args) => _ctx.handleStartInput && _ctx.handleStartInput(...args)), onChange: _cache[1] || (_cache[1] = (...args) => _ctx.handleStartChange && _ctx.handleStartChange(...args)), onFocus: _cache[2] || (_cache[2] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)) }, null, 40, _hoisted_1$1c), vue.renderSlot(_ctx.$slots, "range-separator", {}, () => [ vue.createElementVNode("span", _hoisted_2$U, 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[3] || (_cache[3] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)), onInput: _cache[4] || (_cache[4] = (...args) => _ctx.handleEndInput && _ctx.handleEndInput(...args)), onChange: _cache[5] || (_cache[5] = (...args) => _ctx.handleEndChange && _ctx.handleEndChange(...args)) }, null, 40, _hoisted_3$K), _ctx.clearIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 1, class: vue.normalizeClass(["el-input__icon el-range__close-icon", { "el-range__close-icon--hidden": !_ctx.showClose }]), onClick: _ctx.onClearIconClick }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.clearIcon))) ]), _: 1 }, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true) ], 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[10] || (_cache[10] = (...args) => _ctx.onPick && _ctx.onPick(...args)), onSelectRange: _cache[11] || (_cache[11] = (...args) => _ctx.setSelectionRange && _ctx.setSelectionRange(...args)), onSetPickerOption: _cache[12] || (_cache[12] = (...args) => _ctx.onSetPickerOption && _ctx.onSetPickerOption(...args)), onCalendarChange: _cache[13] || (_cache[13] = (...args) => _ctx.onCalendarChange && _ctx.onCalendarChange(...args)), onMousedown: _cache[14] || (_cache[14] = vue.withModifiers(() => { }, ["stop"])) }) ]), _: 3 }, 16, ["visible", "effect", "popper-class", "popper-options"]); } script$1K.render = render$1D; script$1K.__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$1J = vue.defineComponent({ directives: { repeatClick: RepeatClick }, components: { ElScrollbar, ElIcon: ElIcon$1, ArrowUp, ArrowDown }, 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$2((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$1b = ["onClick"]; const _hoisted_2$T = ["onMouseenter"]; const _hoisted_3$J = { class: "el-time-spinner__list" }; function render$1C(_ctx, _cache, $props, $setup, $data, $options) { const _component_el_scrollbar = vue.resolveComponent("el-scrollbar"); const _component_arrow_up = vue.resolveComponent("arrow-up"); const _component_el_icon = vue.resolveComponent("el-icon"); const _component_arrow_down = vue.resolveComponent("arrow-down"); 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$1b); }), 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.createVNode(_component_el_icon, { class: "el-time-spinner__arrow arrow-up" }, { default: vue.withCtx(() => [ vue.createVNode(_component_arrow_up) ]), _: 1 }, 512), [ [_directive_repeat_click, _ctx.onDecreaseClick] ]), vue.withDirectives(vue.createVNode(_component_el_icon, { class: "el-time-spinner__arrow arrow-down" }, { default: vue.withCtx(() => [ vue.createVNode(_component_arrow_down) ]), _: 1 }, 512), [ [_directive_repeat_click, _ctx.onIncreaseClick] ]), vue.createElementVNode("ul", _hoisted_3$J, [ (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] }]) }, [ time ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [ item === "hours" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [ vue.createTextVNode(vue.toDisplayString(("0" + (_ctx.amPmMode ? time % 12 || 12 : time)).slice(-2)) + vue.toDisplayString(_ctx.getAmPmFlag(time)), 1) ], 2112)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [ vue.createTextVNode(vue.toDisplayString(("0" + time).slice(-2)), 1) ], 2112)) ], 2112)) : vue.createCommentVNode("v-if", true) ], 2); }), 128)) ]) ], 40, _hoisted_2$T); }), 128)) : vue.createCommentVNode("v-if", true) ], 2); } script$1J.render = render$1C; script$1J.__file = "packages/components/time-picker/src/time-picker-com/basic-time-spinner.vue"; var script$1I = vue.defineComponent({ components: { TimeSpinner: script$1J }, 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(_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(value, props.format).locale(lang.value); }; const formatToString = (value) => { if (!value) return null; return value.format(props.format); }; const getDefaultValue = () => { return dayjs(defaultValue).locale(lang.value); }; 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$1a = { key: 0, class: "el-time-panel" }; const _hoisted_2$S = { class: "el-time-panel__footer" }; function render$1B(_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$1a, [ 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$S, [ 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$1I.render = render$1B; script$1I.__file = "packages/components/time-picker/src/time-picker-com/panel-time-pick.vue"; var Symbol$2 = _Symbol, isArguments = isArguments_1, isArray$1 = isArray_1; /** Built-in value references. */ var spreadableSymbol = Symbol$2 ? Symbol$2.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$1(value) { return isArray$1(value) || isArguments(value) || !!(spreadableSymbol && value && value[spreadableSymbol]); } var _isFlattenable = isFlattenable$1; var arrayPush$1 = _arrayPush, 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$1(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$1(value, depth - 1, predicate, isStrict, result); } else { arrayPush$1(result, value); } } else if (!isStrict) { result[result.length] = value; } } return result; } var _baseFlatten = baseFlatten$1; /** * 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$2(value) { return value; } var identity_1 = identity$2; /** * 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$1(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$1; 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$1(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$1; /** * 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$1(value) { return function() { return value; }; } var constant_1 = constant$1; var getNative = _getNative; var defineProperty$2 = (function() { try { var func = getNative(Object, 'defineProperty'); func({}, '', {}); return func; } catch (e) {} }()); var _defineProperty = defineProperty$2; var constant = constant_1, defineProperty$1 = _defineProperty, identity$1 = identity_1; /** * 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$1 = !defineProperty$1 ? identity$1 : function(func, string) { return defineProperty$1(func, 'toString', { 'configurable': true, 'enumerable': false, 'value': constant(string), 'writable': true }); }; var _baseSetToString = baseSetToString$1; /** 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$1(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$1; var baseSetToString = _baseSetToString, 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$1 = shortOut(baseSetToString); var _setToString = setToString$1; var identity = identity_1, overRest = _overRest, 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$1(func, start) { return setToString(overRest(func, start, identity), func + ''); } var _baseRest = baseRest$1; /** * 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$1(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$1; /** * 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$1(value) { return value !== value; } var _baseIsNaN = baseIsNaN$1; /** * 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$1(array, value, fromIndex) { var index = fromIndex - 1, length = array.length; while (++index < length) { if (array[index] === value) { return index; } } return -1; } var _strictIndexOf = strictIndexOf$1; var baseFindIndex = _baseFindIndex, baseIsNaN = _baseIsNaN, 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$1(array, value, fromIndex) { return value === value ? strictIndexOf(array, value, fromIndex) : baseFindIndex(array, baseIsNaN, fromIndex); } var _baseIndexOf = baseIndexOf$1; 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$1(array, value) { var length = array == null ? 0 : array.length; return !!length && baseIndexOf(array, value, 0) > -1; } var _arrayIncludes = arrayIncludes$1; /** * 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$1(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$1; /** * This method returns `undefined`. * * @static * @memberOf _ * @since 2.3.0 * @category Util * @example * * _.times(2, _.noop); * // => [undefined, undefined] */ function noop$1() { // No operation performed. } var noop_1 = noop$1; var Set$1 = _Set, noop = noop_1, setToArray$1 = _setToArray; /** 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$1 = !(Set$1 && (1 / setToArray$1(new Set$1([,-0]))[1]) == INFINITY) ? noop : function(values) { return new Set$1(values); }; var _createSet = createSet$1; var SetCache = _SetCache, arrayIncludes = _arrayIncludes, arrayIncludesWith = _arrayIncludesWith, cacheHas = _cacheHas, createSet = _createSet, setToArray = _setToArray; /** 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$1(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$1; var isArrayLike$1 = isArrayLike_1, isObjectLike$2 = isObjectLike_1; /** * 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$1(value) { return isObjectLike$2(value) && isArrayLike$1(value); } var isArrayLikeObject_1 = isArrayLikeObject$1; var baseFlatten = _baseFlatten, baseRest = _baseRest, baseUniq = _baseUniq, isArrayLikeObject = isArrayLikeObject_1; /** * 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, 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$1H = vue.defineComponent({ components: { TimeSpinner: script$1J }, 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(_).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(_, props.format).locale(lang.value)); } return dayjs(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(_).locale(lang.value)); } const defaultDay = dayjs(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$19 = { key: 0, class: "el-time-range-picker el-picker-panel" }; const _hoisted_2$R = { class: "el-time-range-picker__content" }; const _hoisted_3$I = { class: "el-time-range-picker__cell" }; const _hoisted_4$v = { class: "el-time-range-picker__header" }; const _hoisted_5$n = { class: "el-time-range-picker__cell" }; const _hoisted_6$h = { class: "el-time-range-picker__header" }; const _hoisted_7$b = { class: "el-time-panel__footer" }; const _hoisted_8$a = ["disabled"]; function render$1A(_ctx, _cache, $props, $setup, $data, $options) { const _component_time_spinner = vue.resolveComponent("time-spinner"); return _ctx.actualVisible ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$19, [ vue.createElementVNode("div", _hoisted_2$R, [ vue.createElementVNode("div", _hoisted_3$I, [ vue.createElementVNode("div", _hoisted_4$v, 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$n, [ vue.createElementVNode("div", _hoisted_6$h, 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$b, [ 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$1H.render = render$1A; script$1H.__file = "packages/components/time-picker/src/time-picker-com/panel-time-range.vue"; dayjs.extend(customParseFormat); var TimePicker = vue.defineComponent({ name: "ElTimePicker", install: null, props: { ...timePickerDefaultProps, isRange: { type: Boolean, default: false } }, emits: ["update:modelValue"], setup(props, ctx) { const commonPicker = vue.ref(null); const type = props.isRange ? "timerange" : "time"; const panel = props.isRange ? script$1H : script$1I; const refProps = { ...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$1K, { ...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.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$1G = 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().locale(lang.value).localeData().weekdaysShort()); const now = dayjs().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$18 = { key: 0 }; const _hoisted_2$Q = ["onClick"]; const _hoisted_3$H = { class: "el-calendar-day" }; function render$1z(_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$18, [ (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$H, [ vue.renderSlot(_ctx.$slots, "dateCell", { data: _ctx.getSlotData(cell) }, () => [ vue.createElementVNode("span", null, vue.toDisplayString(cell.text), 1) ]) ]) ], 10, _hoisted_2$Q); }), 128)) ], 2); }), 128)) ]) ], 2); } script$1G.render = render$1z; script$1G.__file = "packages/components/calendar/src/date-table.vue"; const { ButtonGroup: ElButtonGroup$1 } = ElButton; var script$1F = vue.defineComponent({ name: "ElCalendar", components: { DateTable: script$1G, 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().locale(lang.value); const prevMonthDayjs = vue.computed(() => { return date.value.subtract(1, "month"); }); const curMonthDatePrefix = vue.computed(() => { return dayjs(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(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 secondMonthFirstDay = firstDay.add(1, "month").startOf("month"); const secondMonthStartDay = firstMonthLastDay.isSame(secondMonthFirstDay, "week") ? secondMonthFirstDay.add(1, "week") : secondMonthFirstDay; 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(_).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$17 = { class: "el-calendar" }; const _hoisted_2$P = { class: "el-calendar__header" }; const _hoisted_3$G = { class: "el-calendar__title" }; const _hoisted_4$u = { key: 0, class: "el-calendar__button-group" }; const _hoisted_5$m = { key: 0, class: "el-calendar__body" }; const _hoisted_6$g = { key: 1, class: "el-calendar__body" }; function render$1y(_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$17, [ vue.createElementVNode("div", _hoisted_2$P, [ vue.renderSlot(_ctx.$slots, "header", { date: _ctx.i18nDate }, () => [ vue.createElementVNode("div", _hoisted_3$G, vue.toDisplayString(_ctx.i18nDate), 1), _ctx.validatedRange.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$u, [ 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$m, [ 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$g, [ (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$1F.render = render$1y; script$1F.__file = "packages/components/calendar/src/index.vue"; script$1F.install = (app) => { app.component(script$1F.name, script$1F); }; const _Calendar = script$1F; const ElCalendar = _Calendar; const cardProps = buildProps({ header: { type: String, default: "" }, bodyStyle: { type: definePropType([String, Object, Array]), default: "" }, shadow: { type: String, default: "" } }); var script$1E = vue.defineComponent({ name: "ElCard", props: cardProps }); const _hoisted_1$16 = { key: 0, class: "el-card__header" }; function render$1x(_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$16, [ 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$1E.render = render$1x; script$1E.__file = "packages/components/card/src/card.vue"; const ElCard = withInstall(script$1E); var debounce = debounce_1, isObject$4 = isObject_1; /** 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$4(options)) { leading = 'leading' in options ? !!options.leading : leading; trailing = 'trailing' in options ? !!options.trailing : trailing; } return debounce(func, wait, { 'leading': leading, 'maxWait': wait, 'trailing': trailing }); } var throttle_1 = throttle; var throttle$1 = throttle_1; var script$1D = vue.defineComponent({ name: "ElCarousel", components: { ElIcon, ArrowLeft, ArrowRight }, 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$15 = ["onMouseenter", "onClick"]; const _hoisted_2$O = { class: "el-carousel__button" }; const _hoisted_3$F = { key: 0 }; function render$1w(_ctx, _cache, $props, $setup, $data, $options) { const _component_arrow_left = vue.resolveComponent("arrow-left"); const _component_el_icon = vue.resolveComponent("el-icon"); const _component_arrow_right = vue.resolveComponent("arrow-right"); 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"])) }, [ vue.createVNode(_component_el_icon, null, { default: vue.withCtx(() => [ vue.createVNode(_component_arrow_left) ]), _: 1 }) ], 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"])) }, [ vue.createVNode(_component_el_icon, null, { default: vue.withCtx(() => [ vue.createVNode(_component_arrow_right) ]), _: 1 }) ], 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_2$O, [ _ctx.hasLabel ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$F, vue.toDisplayString(item.label), 1)) : vue.createCommentVNode("v-if", true) ]) ], 42, _hoisted_1$15); }), 128)) ], 2)) : vue.createCommentVNode("v-if", true) ], 34); } script$1D.render = render$1w; script$1D.__file = "packages/components/carousel/src/main.vue"; const CARD_SCALE = 0.83; var script$1C = 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({ 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$14 = { key: 0, class: "el-carousel__mask" }; function render$1v(_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$14, null, 512)), [ [vue.vShow, !_ctx.data.active] ]) : vue.createCommentVNode("v-if", true), vue.renderSlot(_ctx.$slots, "default") ], 6)), [ [vue.vShow, _ctx.data.ready] ]); } script$1C.render = render$1v; script$1C.__file = "packages/components/carousel/src/item.vue"; const ElCarousel = withInstall(script$1D, { CarouselItem: script$1C }); const ElCarouselItem = withNoopInstall(script$1C); 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 }, tabindex: [String, Number], size: String }; const useCheckboxGroup = () => { const ELEMENT = useGlobalConfig$1(); 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 = checkboxGroup.max !== void 0 && val.length > checkboxGroup.max.value; 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$1B = 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 }, tabindex: [String, Number] }, emits: [UPDATE_MODEL_EVENT, "change"], setup(props) { return useCheckbox(props); } }); const _hoisted_1$13 = ["id", "aria-controls"]; const _hoisted_2$N = ["tabindex", "role", "aria-checked"]; const _hoisted_3$E = /* @__PURE__ */ vue.createElementVNode("span", { class: "el-checkbox__inner" }, null, -1); const _hoisted_4$t = ["aria-hidden", "name", "tabindex", "disabled", "true-value", "false-value"]; const _hoisted_5$l = ["aria-hidden", "disabled", "value", "name", "tabindex"]; const _hoisted_6$f = { key: 0, class: "el-checkbox__label" }; function render$1u(_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$E, _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, tabindex: _ctx.tabindex, 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$t)), [ [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, tabindex: _ctx.tabindex, 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$l)), [ [vue.vModelCheckbox, _ctx.model] ]) ], 10, _hoisted_2$N), _ctx.$slots.default || _ctx.label ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$f, [ 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$13); } script$1B.render = render$1u; script$1B.__file = "packages/components/checkbox/src/checkbox.vue"; var script$1A = 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$12 = ["aria-checked", "aria-disabled"]; const _hoisted_2$M = ["name", "tabindex", "disabled", "true-value", "false-value"]; const _hoisted_3$D = ["name", "tabindex", "disabled", "value"]; function render$1t(_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, tabindex: _ctx.tabindex, 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$M)), [ [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, tabindex: _ctx.tabindex, 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$D)), [ [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$12); } script$1A.render = render$1t; script$1A.__file = "packages/components/checkbox/src/checkbox-button.vue"; var script$1z = 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", { 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$11 = { class: "el-checkbox-group", role: "group", "aria-label": "checkbox-group" }; function render$1s(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$11, [ vue.renderSlot(_ctx.$slots, "default") ]); } script$1z.render = render$1s; script$1z.__file = "packages/components/checkbox/src/checkbox-group.vue"; const ElCheckbox = withInstall(script$1B, { CheckboxButton: script$1A, CheckboxGroup: script$1z }); const ElCheckboxButton = withNoopInstall(script$1A); const ElCheckboxGroup$1 = withNoopInstall(script$1z); const radioPropsBase = buildProps({ ...useFormItemProps, label: { type: [String, Number, Boolean], default: "" } }); const radioProps = buildProps({ ...radioPropsBase, modelValue: { type: [String, Number, Boolean], default: "" }, name: { type: String, default: "" }, border: Boolean }); const radioEmits = { [UPDATE_MODEL_EVENT]: (val) => isString$1(val) || isNumber(val) || isBool(val), change: (val) => isString$1(val) || isNumber(val) || isBool(val) }; const useRadio = (props, emit) => { const radioRef = vue.ref(); const radioGroup = vue.inject(radioGroupKey, void 0); const isGroup = vue.computed(() => !!radioGroup); const modelValue = vue.computed({ get() { return isGroup.value ? radioGroup.modelValue : props.modelValue; }, set(val) { if (isGroup.value) { radioGroup.changeEvent(val); } else { emit(UPDATE_MODEL_EVENT, val); } radioRef.value.checked = props.modelValue === props.label; } }); const { size, disabled } = useFormItem({ size: vue.computed(() => radioGroup == null ? void 0 : radioGroup.size), disabled: vue.computed(() => radioGroup == null ? void 0 : radioGroup.disabled) }); const focus = vue.ref(false); const tabIndex = vue.computed(() => { return disabled.value || isGroup.value && modelValue.value !== props.label ? -1 : 0; }); return { radioRef, isGroup, radioGroup, focus, size, disabled, tabIndex, modelValue }; }; var script$1y = vue.defineComponent({ name: "ElRadio", props: radioProps, emits: radioEmits, setup(props, { emit }) { const { radioRef, isGroup, focus, size, disabled, tabIndex, modelValue } = useRadio(props, emit); function handleChange() { vue.nextTick(() => emit("change", modelValue.value)); } return { focus, isGroup, modelValue, tabIndex, size, disabled, radioRef, handleChange }; } }); const _hoisted_1$10 = ["aria-checked", "aria-disabled", "tabindex"]; const _hoisted_2$L = /* @__PURE__ */ vue.createElementVNode("span", { class: "el-radio__inner" }, null, -1); const _hoisted_3$C = ["value", "name", "disabled"]; function render$1r(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createElementBlock("label", { class: vue.normalizeClass(["el-radio", { [`el-radio--${_ctx.size || ""}`]: _ctx.size, "is-disabled": _ctx.disabled, "is-focus": _ctx.focus, "is-bordered": _ctx.border, "is-checked": _ctx.modelValue === _ctx.label }]), role: "radio", "aria-checked": _ctx.modelValue === _ctx.label, "aria-disabled": _ctx.disabled, tabindex: _ctx.tabIndex, onKeydown: _cache[5] || (_cache[5] = vue.withKeys(vue.withModifiers(($event) => _ctx.modelValue = _ctx.disabled ? _ctx.modelValue : _ctx.label, ["stop", "prevent"]), ["space"])) }, [ vue.createElementVNode("span", { class: vue.normalizeClass(["el-radio__input", { "is-disabled": _ctx.disabled, "is-checked": _ctx.modelValue === _ctx.label }]) }, [ _hoisted_2$L, vue.withDirectives(vue.createElementVNode("input", { ref: "radioRef", "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.modelValue = $event), class: "el-radio__original", value: _ctx.label, type: "radio", "aria-hidden": "true", name: _ctx.name, disabled: _ctx.disabled, 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$C), [ [vue.vModelRadio, _ctx.modelValue] ]) ], 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$10); } script$1y.render = render$1r; script$1y.__file = "packages/components/radio/src/radio.vue"; const radioButtonProps = buildProps({ ...radioPropsBase, name: { type: String, default: "" } }); var script$1x = vue.defineComponent({ name: "ElRadioButton", props: radioButtonProps, setup(props, { emit }) { const { radioRef, isGroup, focus, size, disabled, tabIndex, modelValue, radioGroup } = useRadio(props, emit); const activeStyle = vue.computed(() => { return { backgroundColor: (radioGroup == null ? void 0 : radioGroup.fill) || "", borderColor: (radioGroup == null ? void 0 : radioGroup.fill) || "", boxShadow: (radioGroup == null ? void 0 : radioGroup.fill) ? `-1px 0 0 0 ${radioGroup.fill}` : "", color: (radioGroup == null ? void 0 : radioGroup.textColor) || "" }; }); return { isGroup, size, disabled, tabIndex, modelValue, focus, activeStyle, radioRef }; } }); const _hoisted_1$$ = ["aria-checked", "aria-disabled", "tabindex"]; const _hoisted_2$K = ["value", "name", "disabled"]; function render$1q(_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.modelValue === _ctx.label, "is-disabled": _ctx.disabled, "is-focus": _ctx.focus } ]]), role: "radio", "aria-checked": _ctx.modelValue === _ctx.label, "aria-disabled": _ctx.disabled, tabindex: _ctx.tabIndex, onKeydown: _cache[4] || (_cache[4] = vue.withKeys(vue.withModifiers(($event) => _ctx.modelValue = _ctx.disabled ? _ctx.modelValue : _ctx.label, ["stop", "prevent"]), ["space"])) }, [ vue.withDirectives(vue.createElementVNode("input", { ref: "radioRef", "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.modelValue = $event), class: "el-radio-button__original-radio", value: _ctx.label, type: "radio", name: _ctx.name, disabled: _ctx.disabled, tabindex: "-1", onFocus: _cache[1] || (_cache[1] = ($event) => _ctx.focus = true), onBlur: _cache[2] || (_cache[2] = ($event) => _ctx.focus = false) }, null, 40, _hoisted_2$K), [ [vue.vModelRadio, _ctx.modelValue] ]), vue.createElementVNode("span", { class: "el-radio-button__inner", style: vue.normalizeStyle(_ctx.modelValue === _ctx.label ? _ctx.activeStyle : {}), onKeydown: _cache[3] || (_cache[3] = vue.withModifiers(() => { }, ["stop"])) }, [ vue.renderSlot(_ctx.$slots, "default", {}, () => [ vue.createTextVNode(vue.toDisplayString(_ctx.label), 1) ]) ], 36) ], 42, _hoisted_1$$); } script$1x.render = render$1q; script$1x.__file = "packages/components/radio/src/radio-button.vue"; const radioGroupProps = buildProps({ ...useFormItemProps, modelValue: { type: [String, Number, Boolean], default: "" }, fill: { type: String, default: "" }, textColor: { type: String, default: "" } }); const radioGroupEmits = radioEmits; var script$1w = vue.defineComponent({ name: "ElRadioGroup", props: radioGroupProps, emits: radioGroupEmits, setup(props, ctx) { const radioGroupRef = vue.ref(); const { size, disabled, formItem } = useFormItem({}); const changeEvent = (value) => { ctx.emit(UPDATE_MODEL_EVENT, value); vue.nextTick(() => ctx.emit("change", value)); }; const handleKeydown = (e) => { if (!radioGroupRef.value) return; const target = e.target; const className = target.nodeName === "INPUT" ? "[type=radio]" : "[role=radio]"; const radios = radioGroupRef.value.querySelectorAll(className); const length = radios.length; const index = Array.from(radios).indexOf(target); const roleRadios = radioGroupRef.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 = radioGroupRef.value.querySelectorAll("[type=radio]"); const firstLabel = radios[0]; if (!Array.from(radios).some((radio) => radio.checked) && firstLabel) { firstLabel.tabIndex = 0; } }); vue.provide(radioGroupKey, vue.reactive({ ...vue.toRefs(props), changeEvent })); vue.watch(() => props.modelValue, () => formItem == null ? void 0 : formItem.validate("change")); return { size, disabled, radioGroupRef, handleKeydown }; } }); function render$1p(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createElementBlock("div", { ref: "radioGroupRef", class: "el-radio-group", role: "radiogroup", onKeydown: _cache[0] || (_cache[0] = (...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args)) }, [ vue.renderSlot(_ctx.$slots, "default") ], 544); } script$1w.render = render$1p; script$1w.__file = "packages/components/radio/src/radio-group.vue"; const ElRadio = withInstall(script$1y, { RadioButton: script$1x, RadioGroup: script$1w }); const ElRadioGroup = withNoopInstall(script$1w); const ElRadioButton = withNoopInstall(script$1x); 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$1v = vue.defineComponent({ name: "ElCascaderNode", components: { ElCheckbox, ElRadio, NodeContent, ElIcon: ElIcon$1, Check, Loading: Loading$2, ArrowRight }, 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$_ = ["id", "aria-haspopup", "aria-owns", "aria-expanded", "tabindex"]; const _hoisted_2$J = /* @__PURE__ */ vue.createElementVNode("span", null, null, -1); function render$1o(_ctx, _cache, $props, $setup, $data, $options) { const _component_el_checkbox = vue.resolveComponent("el-checkbox"); const _component_el_radio = vue.resolveComponent("el-radio"); const _component_check = vue.resolveComponent("check"); const _component_el_icon = vue.resolveComponent("el-icon"); const _component_node_content = vue.resolveComponent("node-content"); const _component_loading = vue.resolveComponent("loading"); const _component_arrow_right = vue.resolveComponent("arrow-right"); return vue.openBlock(), vue.createElementBlock("li", { id: `${_ctx.menuId}-${_ctx.node.uid}`, role: "menuitem", "aria-haspopup": !_ctx.isLeaf, "aria-owns": _ctx.isLeaf ? null : _ctx.menuId, "aria-expanded": _ctx.inExpandingPath, tabindex: _ctx.expandable ? -1 : void 0, class: vue.normalizeClass([ "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$J ]), _: 1 }, 8, ["model-value", "label", "disabled", "onUpdate:modelValue"])) : _ctx.isLeaf && _ctx.node.checked ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 2, class: "el-cascader-node__prefix" }, { default: vue.withCtx(() => [ vue.createVNode(_component_check) ]), _: 1 })) : vue.createCommentVNode("v-if", true), vue.createCommentVNode(" content "), vue.createVNode(_component_node_content), vue.createCommentVNode(" postfix "), !_ctx.isLeaf ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 3 }, [ _ctx.node.loading ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0, class: "is-loading el-cascader-node__postfix" }, { default: vue.withCtx(() => [ vue.createVNode(_component_loading) ]), _: 1 })) : (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 1, class: "arrow-right el-cascader-node__postfix" }, { default: vue.withCtx(() => [ vue.createVNode(_component_arrow_right) ]), _: 1 })) ], 2112)) : vue.createCommentVNode("v-if", true) ], 42, _hoisted_1$_); } script$1v.render = render$1o; script$1v.__file = "packages/components/cascader-panel/src/node.vue"; var script$1u = vue.defineComponent({ name: "ElCascaderMenu", components: { ElScrollbar, ElCascaderNode: script$1v }, 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 = ` `; } 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$Z = { key: 0, class: "el-cascader-menu__empty-text" }; const _hoisted_2$I = { key: 1, ref: "hoverZone", class: "el-cascader-menu__hover-zone" }; function render$1n(_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(() => { var _a; return [ (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.nodes, (node) => { return vue.openBlock(), vue.createBlock(_component_el_cascader_node, { key: node.uid, node, "menu-id": _ctx.menuId, onExpand: _ctx.handleExpand }, null, 8, ["node", "menu-id", "onExpand"]); }), 128)), _ctx.isEmpty ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$Z, vue.toDisplayString(_ctx.t("el.cascader.noData")), 1)) : ((_a = _ctx.panel) == null ? void 0 : _a.isHoverMenu) ? (vue.openBlock(), vue.createElementBlock("svg", _hoisted_2$I, null, 512)) : vue.createCommentVNode("v-if", true) ]; }), _: 1 }, 8, ["view-class", "onMousemove", "onMouseleave"]); } script$1u.render = render$1n; script$1u.__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$3 { 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$3(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$3(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$3(leaf) ? leaf(data, this) : data[leaf]; return isUndefined(isLeaf) ? lazy && !loaded ? false : !(Array.isArray(childrenData) && childrenData.length) : !!isLeaf; } get valueByOption() { return this.config.emitPath ? this.pathValues : this.value; } appendChild(childData) { const { childrenData, children } = this; const node = new Node$3(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$3(nodeData, this.config)); this.nodes = nodes; this.allNodes = flatNodes(nodes, false); this.leafNodes = flatNodes(nodes, true); } getNodes() { return this.nodes; } getFlattedNodes(leafOnly) { return leafOnly ? this.leafNodes : this.allNodes; } appendNode(nodeData, parentNode) { const node = parentNode ? parentNode.appendChild(nodeData) : new Node$3(nodeData, this.config); if (!parentNode) this.nodes.push(node); this.allNodes.push(node); node.isLeaf && this.leafNodes.push(node); } appendNodes(nodeDataList, parentNode) { nodeDataList.forEach((nodeData) => this.appendNode(nodeData, parentNode)); } getNodeByValue(value, leafOnly = false) { if (!value && value !== 0) return null; const 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; } } 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(() => ({ ...DefaultProps, ...props.props })); }; const getMenuIndex = (el) => { if (!el) return 0; const pieces = el.id.split("-"); return Number(pieces[pieces.length - 2]); }; const checkNode = (el) => { if (!el) return; const input = el.querySelector("input"); if (input) { input.click(); } else if (isLeaf(el)) { el.click(); } }; const sortByOriginalOrder = (oldNodes, newNodes) => { const newNodesCopy = newNodes.slice(0); const newIds = newNodesCopy.map((node) => node.uid); const res = oldNodes.reduce((acc, item) => { const index = newIds.indexOf(item.uid); if (index > -1) { acc.push(item); newNodesCopy.splice(index, 1); newIds.splice(index, 1); } return acc; }, []); res.push(...newNodesCopy); return res; }; var script$1t = vue.defineComponent({ name: "ElCascaderPanel", components: { ElCascaderMenu: script$1u }, props: { ...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); const initStore = () => { const { options } = props; const cfg = config.value; manualChecked = false; store.value = new Store(options, cfg); menus.value = [store.value.getNodes()]; if (cfg.lazy && isEmpty(props.options)) { initialLoaded = false; lazyLoad(void 0, () => { initialLoaded = true; syncCheckedValue(false, true); }); } else { syncCheckedValue(false, true); } }; const lazyLoad = (node, cb) => { const cfg = config.value; node = node || new Node$3({}, cfg, void 0, true); node.loading = true; const resolve = (dataList) => { var _a; const _node = node; const parent = _node.root ? null : _node; dataList && ((_a = store.value) == null ? void 0 : _a.appendNodes(dataList, parent)); _node.loading = false; _node.loaded = true; _node.childrenData = _node.childrenData || []; cb && cb(dataList); }; cfg.lazyLoad(node, resolve); }; const expandNode = (node, silent) => { var _a; const { level } = node; const newMenus = menus.value.slice(0, level); let newExpandingNode; if (node.isLeaf) { newExpandingNode = node.pathNodes[level - 2]; } else { newExpandingNode = node; newMenus.push(node.children); } if (((_a = expandingNode.value) == null ? void 0 : _a.uid) !== (newExpandingNode == null ? void 0 : newExpandingNode.uid)) { expandingNode.value = node; menus.value = newMenus; !silent && emit("expand-change", (node == null ? void 0 : node.pathValues) || []); } }; const handleCheckChange = (node, checked, emitClose = true) => { const { checkStrictly, multiple } = config.value; const oldNode = checkedNodes.value[0]; manualChecked = true; !multiple && (oldNode == null ? void 0 : oldNode.doCheck(false)); node.doCheck(checked); calculateCheckedValue(); emitClose && !multiple && !checkStrictly && emit("close"); !emitClose && !multiple && !checkStrictly && expandParentNode(node); }; const expandParentNode = (node) => { if (!node) return; node = node.parent; expandParentNode(node); node && expandNode(node); }; const getFlattedNodes = (leafOnly) => { var _a; return (_a = store.value) == null ? void 0 : _a.getFlattedNodes(leafOnly); }; const getCheckedNodes = (leafOnly) => { var _a; return (_a = getFlattedNodes(leafOnly)) == null ? void 0 : _a.filter((node) => node.checked !== false); }; const clearCheckedNodes = () => { checkedNodes.value.forEach((node) => node.doCheck(false)); calculateCheckedValue(); }; const calculateCheckedValue = () => { var _a; const { checkStrictly, multiple } = config.value; const oldNodes = checkedNodes.value; const newNodes = getCheckedNodes(!checkStrictly); const nodes = sortByOriginalOrder(oldNodes, newNodes); const values = nodes.map((node) => node.valueByOption); checkedNodes.value = nodes; checkedValue.value = multiple ? values : (_a = values[0]) != null ? _a : null; }; const syncCheckedValue = (loaded = false, forced = false) => { const { modelValue } = props; const { lazy, multiple, checkStrictly } = config.value; const leafOnly = !checkStrictly; if (!initialLoaded || manualChecked || !forced && isEqual$2(modelValue, checkedValue.value)) return; if (lazy && !loaded) { const values = deduplicate(arrayFlat(coerceTruthyValueToArray(modelValue))); const nodes = values.map((val) => { var _a; return (_a = store.value) == null ? void 0 : _a.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) => { var _a; return (_a = store.value) == null ? void 0 : _a.getNodeByValue(val, leafOnly); })); syncMenuState(nodes, false); checkedValue.value = modelValue; } }; const syncMenuState = (newCheckedNodes, reserveExpandingState = true) => { var _a; const { checkStrictly } = config.value; const oldNodes = checkedNodes.value; const newNodes = newCheckedNodes.filter((node) => !!node && (checkStrictly || node.isLeaf)); const oldExpandingNode = (_a = store.value) == null ? void 0 : _a.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, '.el-cascader-node[tabindex="-1"]')); 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$1m(_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$1t.render = render$1m; script$1t.__file = "packages/components/cascader-panel/src/index.vue"; script$1t.install = (app) => { app.component(script$1t.name, script$1t); }; const _CascaderPanel = script$1t; const ElCascaderPanel = _CascaderPanel; const tagProps = buildProps({ closable: Boolean, type: { type: String, values: ["success", "info", "warning", "danger", ""], default: "" }, hit: Boolean, disableTransitions: Boolean, color: { type: String, default: "" }, size: { type: String, values: ["large", "medium", "small", "mini"] }, effect: { type: String, values: ["dark", "light", "plain"], default: "light" } }); const tagEmits = { close: (evt) => evt instanceof MouseEvent, click: (evt) => evt instanceof MouseEvent }; var script$1s = vue.defineComponent({ name: "ElTag", components: { ElIcon: ElIcon$1, Close }, props: tagProps, emits: tagEmits, setup(props, { emit }) { const ELEMENT = useGlobalConfig$1(); 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$1l(_ctx, _cache, $props, $setup, $data, $options) { const _component_close = vue.resolveComponent("close"); const _component_el_icon = vue.resolveComponent("el-icon"); return !_ctx.disableTransitions ? (vue.openBlock(), vue.createElementBlock("span", { key: 0, class: vue.normalizeClass(_ctx.classes), style: vue.normalizeStyle({ backgroundColor: _ctx.color }), onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)) }, [ vue.renderSlot(_ctx.$slots, "default"), _ctx.closable ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0, class: "el-tag__close", onClick: _ctx.handleClose }, { default: vue.withCtx(() => [ vue.createVNode(_component_close) ]), _: 1 }, 8, ["onClick"])) : 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[1] || (_cache[1] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)) }, [ vue.renderSlot(_ctx.$slots, "default"), _ctx.closable ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0, class: "el-tag__close", onClick: _ctx.handleClose }, { default: vue.withCtx(() => [ vue.createVNode(_component_close) ]), _: 1 }, 8, ["onClick"])) : vue.createCommentVNode("v-if", true) ], 6) ]), _: 3 })); } script$1s.render = render$1l; script$1s.__file = "packages/components/tag/src/tag.vue"; const ElTag = withInstall(script$1s); 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$1r = vue.defineComponent({ name: "ElCascader", components: { ElCascaderPanel: _CascaderPanel, ElInput: ElInput$1, ElPopper, ElScrollbar, ElTag, ElIcon: ElIcon$1, CircleClose, Check, ArrowDown }, directives: { Clickoutside: ClickOutside }, props: { ...CommonProps, size: { type: String, validator: isValidComponentSize }, placeholder: { type: String }, disabled: Boolean, clearable: Boolean, filterable: Boolean, filterMethod: { type: Function, default: (node, keyword) => node.text.includes(keyword) }, separator: { type: String, default: " / " }, showAllLevels: { type: Boolean, default: true }, collapseTags: Boolean, 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$1(); 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 isOnComposition = vue.ref(false); 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) => { var _a, _b, _c; if (isDisabled.value) return; visible = visible != null ? visible : !popperVisible.value; if (visible !== popperVisible.value) { popperVisible.value = visible; (_b = (_a = input.value) == null ? void 0 : _a.input) == null ? void 0 : _b.setAttribute("aria-expanded", `${visible}`); if (visible) { updatePopperPosition(); vue.nextTick((_c = panel.value) == null ? void 0 : _c.scrollToExpandingNode); } else if (props.filterable) { const { value } = presentText; inputValue.value = value; searchInputValue.value = value; } emit("visible-change", visible); } }; const updatePopperPosition = () => { var _a; vue.nextTick((_a = popper.value) == null ? void 0 : _a.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) => { var _a; const node = tag.node; node.doCheck(false); (_a = panel.value) == null ? void 0 : _a.calculateCheckedValue(); emit("remove-tag", node.valueByOption); }; const calculatePresentTags = () => { if (!multiple.value) return; const nodes = checkedNodes.value; const tags = []; 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 = () => { var _a, _b; const { filterMethod, showAllLevels, separator } = props; const res = (_b = (_a = panel.value) == null ? void 0 : _a.getFlattedNodes(!props.props.checkStrictly)) == null ? void 0 : _b.filter((node) => { if (node.isDisabled) return false; node.calcText(showAllLevels, separator); return filterMethod(node, searchKeyword.value); }); if (multiple.value) { presentTags.value.forEach((tag) => { tag.hitState = false; }); } filtering.value = true; suggestions.value = res; updatePopperPosition(); }; const focusFirstNode = () => { var _a; let firstNode; 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, _b; const inputInner = (_a = input.value) == null ? void 0 : _a.input; const tagWrapperEl = tagWrapper.value; const suggestionPanelEl = (_b = suggestionPanel.value) == null ? void 0 : _b.$el; if (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) => { var _a; return (_a = panel.value) == null ? void 0 : _a.getCheckedNodes(leafOnly); }; const handleExpandChange = (value) => { updatePopperPosition(); emit("expand-change", value); }; const handleComposition = (event) => { var _a; const text = (_a = event.target) == null ? void 0 : _a.value; if (event.type === "compositionend") { isOnComposition.value = false; vue.nextTick(() => handleInput(text)); } else { const lastCharacter = text[text.length - 1] || ""; isOnComposition.value = !isKorean(lastCharacter); } }; const handleKeyDown = (e) => { if (isOnComposition.value) return; switch (e.code) { case EVENT_CODE.enter: togglePopperVisible(); break; case EVENT_CODE.down: togglePopperVisible(true); vue.nextTick(focusFirstNode); e.preventDefault(); break; case EVENT_CODE.esc: case EVENT_CODE.tab: togglePopperVisible(false); break; } }; const handleClear = () => { var _a; (_a = panel.value) == null ? void 0 : _a.clearCheckedNodes(); togglePopperVisible(false); }; const handleSuggestionClick = (node) => { var _a, _b; const { checked } = node; if (multiple.value) { (_a = panel.value) == null ? void 0 : _a.handleCheckChange(node, !checked, false); } else { !checked && ((_b = panel.value) == null ? void 0 : _b.handleCheckChange(node, true, false)); togglePopperVisible(false); } }; const handleSuggestionKeyDown = (e) => { const target = e.target; const { code } = e; switch (code) { case EVENT_CODE.up: case EVENT_CODE.down: { const distance = code === EVENT_CODE.up ? -1 : 1; focusNode(getSibling(target, distance, '.el-cascader__suggestion-item[tabindex="-1"]')); break; } case EVENT_CODE.enter: target.click(); break; case EVENT_CODE.esc: case EVENT_CODE.tab: togglePopperVisible(false); break; } }; 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$2(() => { 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(() => { var _a; const inputEl = (_a = input.value) == null ? void 0 : _a.$el; inputInitialHeight = (inputEl == null ? void 0 : inputEl.offsetHeight) || INPUT_HEIGHT_MAP[realSize.value] || DEFAULT_INPUT_HEIGHT; addResizeListener(inputEl, updateStyle); }); vue.onBeforeUnmount(() => { var _a; removeResizeListener((_a = input.value) == null ? void 0 : _a.$el, updateStyle); }); return { Effect: exports.Effect, popperOptions, popper, popperPaneRef, input, tagWrapper, panel, suggestionPanel, popperVisible, inputHover, inputPlaceholder, filtering, presentText, checkedValue, inputValue, searchInputValue, presentTags, suggestions, isDisabled, isOnComposition, realSize, tagSize, multiple, readonly, clearBtnVisible, t, togglePopperVisible, hideSuggestionPanel, deleteTag, focusFirstNode, getCheckedNodes, handleExpandChange, handleKeyDown, handleComposition, handleClear, handleSuggestionClick, handleSuggestionKeyDown, handleDelete, handleInput }; } }); const _hoisted_1$Y = { key: 0, ref: "tagWrapper", class: "el-cascader__tags" }; const _hoisted_2$H = ["placeholder"]; const _hoisted_3$B = ["onClick"]; const _hoisted_4$s = { class: "el-cascader__empty-text" }; function render$1k(_ctx, _cache, $props, $setup, $data, $options) { const _component_circle_close = vue.resolveComponent("circle-close"); const _component_el_icon = vue.resolveComponent("el-icon"); const _component_arrow_down = vue.resolveComponent("arrow-down"); const _component_el_input = vue.resolveComponent("el-input"); const _component_el_tag = vue.resolveComponent("el-tag"); const _component_el_cascader_panel = vue.resolveComponent("el-cascader-panel"); const _component_check = vue.resolveComponent("check"); 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[17] || (_cache[17] = ($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[11] || (_cache[11] = () => _ctx.togglePopperVisible(_ctx.readonly ? void 0 : true)), onKeydown: _cache[12] || (_cache[12] = (...args) => _ctx.handleKeyDown && _ctx.handleKeyDown(...args)), onMouseenter: _cache[13] || (_cache[13] = ($event) => _ctx.inputHover = true), onMouseleave: _cache[14] || (_cache[14] = ($event) => _ctx.inputHover = false) }, [ vue.createVNode(_component_el_input, { ref: "input", modelValue: _ctx.inputValue, "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.inputValue = $event), 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 }), onCompositionstart: _ctx.handleComposition, onCompositionupdate: _ctx.handleComposition, onCompositionend: _ctx.handleComposition, onFocus: _cache[2] || (_cache[2] = (e) => _ctx.$emit("focus", e)), onBlur: _cache[3] || (_cache[3] = (e) => _ctx.$emit("blur", e)), onInput: _ctx.handleInput }, { suffix: vue.withCtx(() => [ _ctx.clearBtnVisible ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: "clear", class: "el-input__icon icon-circle-close", onClick: vue.withModifiers(_ctx.handleClear, ["stop"]) }, { default: vue.withCtx(() => [ vue.createVNode(_component_circle_close) ]), _: 1 }, 8, ["onClick"])) : (vue.openBlock(), vue.createBlock(_component_el_icon, { key: "arrow-down", class: vue.normalizeClass([ "el-input__icon", "icon-arrow-down", _ctx.popperVisible && "is-reverse" ]), onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => _ctx.togglePopperVisible(), ["stop"])) }, { default: vue.withCtx(() => [ vue.createVNode(_component_arrow_down) ]), _: 1 }, 8, ["class"])) ]), _: 1 }, 8, ["modelValue", "placeholder", "readonly", "disabled", "size", "class", "onCompositionstart", "onCompositionupdate", "onCompositionend", "onInput"]), _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$Y, [ (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[4] || (_cache[4] = ($event) => _ctx.searchInputValue = $event), type: "text", class: "el-cascader__search-input", placeholder: _ctx.presentText ? "" : _ctx.inputPlaceholder, onInput: _cache[5] || (_cache[5] = (e) => _ctx.handleInput(_ctx.searchInputValue, e)), onClick: _cache[6] || (_cache[6] = vue.withModifiers(($event) => _ctx.togglePopperVisible(true), ["stop"])), onKeydown: _cache[7] || (_cache[7] = vue.withKeys((...args) => _ctx.handleDelete && _ctx.handleDelete(...args), ["delete"])), onCompositionstart: _cache[8] || (_cache[8] = (...args) => _ctx.handleComposition && _ctx.handleComposition(...args)), onCompositionupdate: _cache[9] || (_cache[9] = (...args) => _ctx.handleComposition && _ctx.handleComposition(...args)), onCompositionend: _cache[10] || (_cache[10] = (...args) => _ctx.handleComposition && _ctx.handleComposition(...args)) }, null, 40, _hoisted_2$H)), [ [ 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[15] || (_cache[15] = ($event) => _ctx.checkedValue = $event), options: _ctx.options, props: _ctx.props, border: false, "render-label": _ctx.$slots.default, onExpandChange: _ctx.handleExpandChange, onClose: _cache[16] || (_cache[16] = ($event) => _ctx.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", onKeydown: _ctx.handleSuggestionKeyDown }, { default: vue.withCtx(() => [ _ctx.suggestions.length ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.suggestions, (item) => { return vue.openBlock(), vue.createElementBlock("li", { key: item.uid, class: vue.normalizeClass([ "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.createBlock(_component_el_icon, { key: 0 }, { default: vue.withCtx(() => [ vue.createVNode(_component_check) ]), _: 1 })) : vue.createCommentVNode("v-if", true) ], 10, _hoisted_3$B); }), 128)) : vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [ vue.createElementVNode("li", _hoisted_4$s, vue.toDisplayString(_ctx.t("el.cascader.noMatch")), 1) ]) ]), _: 3 }, 8, ["onKeydown"])), [ [vue.vShow, _ctx.filtering] ]) : vue.createCommentVNode("v-if", true) ]), _: 3 }, 8, ["visible", "append-to-body", "popper-class", "popper-options", "effect", "onAfterLeave"]); } script$1r.render = render$1k; script$1r.__file = "packages/components/cascader/src/index.vue"; script$1r.install = (app) => { app.component(script$1r.name, script$1r); }; const _Cascader = script$1r; const ElCascader = _Cascader; const checkTagProps = { checked: { type: Boolean, default: false } }; var script$1q = 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$1j(_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$1q.render = render$1j; script$1q.__file = "packages/components/check-tag/src/index.vue"; const ElCheckTag = withInstall(script$1q); const colProps = buildProps({ tag: { type: String, default: "div" }, span: { type: Number, default: 24 }, offset: { type: Number, default: 0 }, pull: { type: Number, default: 0 }, push: { type: Number, default: 0 }, xs: { type: definePropType([Number, Object]), default: () => mutable({}) }, sm: { type: definePropType([Number, Object]), default: () => mutable({}) }, md: { type: definePropType([Number, Object]), default: () => mutable({}) }, lg: { type: definePropType([Number, Object]), default: () => mutable({}) }, xl: { type: definePropType([Number, Object]), default: () => mutable({}) } }); var Col = vue.defineComponent({ name: "ElCol", props: colProps, 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 classes = []; const pos = ["span", "offset", "pull", "push"]; pos.forEach((prop) => { const size = props[prop]; if (typeof size === "number") { if (prop === "span") classes.push(`el-col-${props[prop]}`); else if (size > 0) classes.push(`el-col-${prop}-${props[prop]}`); } }); const sizes = ["xs", "sm", "md", "lg", "xl"]; sizes.forEach((size) => { if (typeof props[size] === "number") { classes.push(`el-col-${size}-${props[size]}`); } else if (typeof props[size] === "object") { const sizeProps = props[size]; Object.keys(sizeProps).forEach((prop) => { classes.push(prop !== "span" ? `el-col-${size}-${prop}-${sizeProps[prop]}` : `el-col-${size}-${sizeProps[prop]}`); }); } }); if (gutter.value) { classes.push("is-guttered"); } return classes; }); return () => vue.h(props.tag, { class: ["el-col", classList.value], style: style.value }, [vue.renderSlot(slots, "default")]); } }); const ElCol = withInstall(Col); var script$1p = 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$X = { class: "el-collapse", role: "tablist", "aria-multiselectable": "true" }; function render$1i(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$X, [ vue.renderSlot(_ctx.$slots, "default") ]); } script$1p.render = render$1i; script$1p.__file = "packages/components/collapse/src/collapse.vue"; var script$1o = 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$1h(_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$1o.render = render$1h; script$1o.__file = "packages/components/collapse-transition/src/collapse-transition.vue"; script$1o.install = (app) => { app.component(script$1o.name, script$1o); }; const _CollapseTransition = script$1o; const ElCollapseTransition = _CollapseTransition; var script$1n = vue.defineComponent({ name: "ElCollapseItem", components: { ElCollapseTransition: _CollapseTransition, ElIcon: ElIcon$1, ArrowRight }, 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$W = ["aria-expanded", "aria-controls", "aria-describedby"]; const _hoisted_2$G = ["id", "tabindex"]; const _hoisted_3$A = ["id", "aria-hidden", "aria-labelledby"]; const _hoisted_4$r = { class: "el-collapse-item__content" }; function render$1g(_ctx, _cache, $props, $setup, $data, $options) { const _component_arrow_right = vue.resolveComponent("arrow-right"); const _component_el_icon = vue.resolveComponent("el-icon"); 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.createVNode(_component_el_icon, { class: vue.normalizeClass(["el-collapse-item__arrow", { "is-active": _ctx.isActive }]) }, { default: vue.withCtx(() => [ vue.createVNode(_component_arrow_right) ]), _: 1 }, 8, ["class"]) ], 42, _hoisted_2$G) ], 8, _hoisted_1$W), 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$A), [ [vue.vShow, _ctx.isActive] ]) ]), _: 3 }) ], 2); } script$1n.render = render$1g; script$1n.__file = "packages/components/collapse/src/collapse-item.vue"; const ElCollapse = withInstall(script$1p, { CollapseItem: script$1n }); const ElCollapseItem = withNoopInstall(script$1n); 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$1m = 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$1f(_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$1m.render = render$1f; script$1m.__file = "packages/components/color-picker/src/components/alpha-slider.vue"; var script$1l = 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$1e(_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$1l.render = render$1e; script$1l.__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 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}`; }; const toHex = function({ r, g, b }) { 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) { if (prop === "alpha") { return Math.floor(this[`_${prop}`]); } return this[`_${prop}`]; } toRgb() { return hsv2rgb(this._hue, this._saturation, this._value); } fromString(value) { if (!value) { this._hue = 0; this._saturation = 100; this._value = 100; this.doOnChange(); return; } const fromHSV = (h, s, v) => { this._hue = Math.max(0, Math.min(360, h)); this._saturation = Math.max(0, Math.min(100, s)); this._value = Math.max(0, Math.min(100, v)); this.doOnChange(); }; if (value.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 = 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 = 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 = 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 = 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)}%, ${this.get("alpha") / 100})`; break; } case "hsv": { this.value = `hsva(${_hue}, ${Math.round(_saturation)}%, ${Math.round(_value)}%, ${this.get("alpha") / 100})`; break; } case "hex": { this.value = `${toHex(hsv2rgb(_hue, _saturation, _value))}${hexOne(_alpha * 255 / 100)}`; break; } default: { const { r, g, b } = hsv2rgb(_hue, _saturation, _value); this.value = `rgba(${r}, ${g}, ${b}, ${this.get("alpha") / 100})`; } } } else { switch (format) { case "hsl": { const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100); this.value = `hsl(${_hue}, ${Math.round(hsl[1] * 100)}%, ${Math.round(hsl[2] * 100)}%)`; break; } case "hsv": { this.value = `hsv(${_hue}, ${Math.round(_saturation)}%, ${Math.round(_value)}%)`; break; } case "rgb": { const { r, g, b } = hsv2rgb(_hue, _saturation, _value); this.value = `rgb(${r}, ${g}, ${b})`; break; } default: { this.value = toHex(hsv2rgb(_hue, _saturation, _value)); } } } } } var script$1k = 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$V = { class: "el-color-predefine" }; const _hoisted_2$F = { class: "el-color-predefine__colors" }; const _hoisted_3$z = ["onClick"]; function render$1d(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$V, [ vue.createElementVNode("div", _hoisted_2$F, [ (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$z); }), 128)) ]) ]); } script$1k.render = render$1d; script$1k.__file = "packages/components/color-picker/src/components/predefine.vue"; var script$1j = 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$U = /* @__PURE__ */ vue.createElementVNode("div", { class: "el-color-svpanel__white" }, null, -1); const _hoisted_2$E = /* @__PURE__ */ vue.createElementVNode("div", { class: "el-color-svpanel__black" }, null, -1); const _hoisted_3$y = /* @__PURE__ */ vue.createElementVNode("div", null, null, -1); const _hoisted_4$q = [ _hoisted_3$y ]; function render$1c(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createElementBlock("div", { class: "el-color-svpanel", style: vue.normalizeStyle({ backgroundColor: _ctx.background }) }, [ _hoisted_1$U, _hoisted_2$E, 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$1j.render = render$1c; script$1j.__file = "packages/components/color-picker/src/components/sv-panel.vue"; var script$1i = vue.defineComponent({ name: "ElColorPicker", components: { ElButton, ElPopper, ElInput: ElInput$1, ElIcon: ElIcon$1, Close, ArrowDown, SvPanel: script$1j, HueSlider: script$1l, AlphaSlider: script$1m, Predefine: script$1k }, 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$1(); 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$2(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$T = { class: "el-color-dropdown__main-wrapper" }; const _hoisted_2$D = { class: "el-color-dropdown__btns" }; const _hoisted_3$x = { class: "el-color-dropdown__value" }; const _hoisted_4$p = { key: 0, class: "el-color-picker__mask" }; function render$1b(_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_close = vue.resolveComponent("close"); const _component_el_icon = vue.resolveComponent("el-icon"); const _component_arrow_down = vue.resolveComponent("arrow-down"); 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$T, [ 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$D, [ vue.createElementVNode("span", _hoisted_3$x, [ 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.createBlock(_component_el_icon, { key: 0, class: "el-color-picker__empty is-icon-close" }, { default: vue.withCtx(() => [ vue.createVNode(_component_close) ]), _: 1 })) : vue.createCommentVNode("v-if", true) ], 2), vue.withDirectives(vue.createVNode(_component_el_icon, { class: "el-color-picker__icon is-icon-arrow-down" }, { default: vue.withCtx(() => [ vue.createVNode(_component_arrow_down) ]), _: 1 }, 512), [ [vue.vShow, _ctx.modelValue || _ctx.showPanelColor] ]) ]) ], 2) ]), _: 1 }, 8, ["visible", "effect", "popper-class"]); } script$1i.render = render$1b; script$1i.__file = "packages/components/color-picker/src/index.vue"; script$1i.install = (app) => { app.component(script$1i.name, script$1i); }; const _ColorPicker = script$1i; const ElColorPicker = _ColorPicker; const configProviderProps = { ...useLocaleProps, button: buildProp({ type: definePropType(Object), default: () => { return mutable({ autoInsertSpace: true }); } }) }; const ConfigProvider = vue.defineComponent({ name: "ElConfigProvider", props: configProviderProps, setup(props, { slots }) { useLocale(); vue.provide(configProviderContextKey, props); return () => { var _a; return (_a = slots.default) == null ? void 0 : _a.call(slots); }; } }); const ElConfigProvider = withInstall(ConfigProvider); var script$1h = 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$1a(_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$1h.render = render$1a; script$1h.__file = "packages/components/container/src/container.vue"; var script$1g = 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$19(_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$1g.render = render$19; script$1g.__file = "packages/components/container/src/aside.vue"; var script$1f = 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$18(_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$1f.render = render$18; script$1f.__file = "packages/components/container/src/footer.vue"; var script$1e = 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$17(_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$1e.render = render$17; script$1e.__file = "packages/components/container/src/header.vue"; var script$1d = vue.defineComponent({ name: "ElMain" }); const _hoisted_1$S = { class: "el-main" }; function render$16(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createElementBlock("main", _hoisted_1$S, [ vue.renderSlot(_ctx.$slots, "default") ]); } script$1d.render = render$16; script$1d.__file = "packages/components/container/src/main.vue"; const ElContainer = withInstall(script$1h, { Aside: script$1g, Footer: script$1f, Header: script$1e, Main: script$1d }); const ElAside = withNoopInstall(script$1g); const ElFooter = withNoopInstall(script$1f); const ElHeader = withNoopInstall(script$1e); const ElMain = withNoopInstall(script$1d); var advancedFormat$1 = {exports: {}}; (function (module, exports) { !function(e,t){module.exports=t();}(commonjsGlobal,(function(){return function(e,t,r){var n=t.prototype,s=n.format;r.en.ordinal=function(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)};}})); }(advancedFormat$1)); var advancedFormat = advancedFormat$1.exports; var weekOfYear$1 = {exports: {}}; (function (module, exports) { !function(e,t){module.exports=t();}(commonjsGlobal,(function(){var e="week",t="year";return function(i,n,r){var f=n.prototype;f.week=function(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)};}})); }(weekOfYear$1)); var weekOfYear = weekOfYear$1.exports; var weekYear$1 = {exports: {}}; (function (module, exports) { !function(e,t){module.exports=t();}(commonjsGlobal,(function(){return function(e,t){t.prototype.weekYear=function(){var e=this.month(),t=this.week(),n=this.year();return 1===t&&11===e?n+1:0===e&&t>=52?n-1:n};}})); }(weekYear$1)); var weekYear = weekYear$1.exports; var dayOfYear$1 = {exports: {}}; (function (module, exports) { !function(e,t){module.exports=t();}(commonjsGlobal,(function(){return function(e,t,n){t.prototype.dayOfYear=function(e){var t=Math.round((n(this).startOf("day")-n(this).startOf("year"))/864e5)+1;return null==e?t:this.add(e-t,"day")};}})); }(dayOfYear$1)); var dayOfYear = dayOfYear$1.exports; var isSameOrAfter$1 = {exports: {}}; (function (module, exports) { !function(e,t){module.exports=t();}(commonjsGlobal,(function(){return function(e,t){t.prototype.isSameOrAfter=function(e,t){return this.isSame(e,t)||this.isAfter(e,t)};}})); }(isSameOrAfter$1)); var isSameOrAfter = isSameOrAfter$1.exports; var isSameOrBefore$1 = {exports: {}}; (function (module, exports) { !function(e,i){module.exports=i();}(commonjsGlobal,(function(){return function(e,i){i.prototype.isSameOrBefore=function(e,i){return this.isSame(e,i)||this.isBefore(e,i)};}})); }(isSameOrBefore$1)); var isSameOrBefore = isSameOrBefore$1.exports; const ROOT_PICKER_INJECTION_KEY = Symbol(); var ElDatePickerCell = vue.defineComponent({ name: "ElDatePickerCell", props: buildProps({ cell: { type: definePropType(Object) } }), setup(props) { const picker = vue.inject(ROOT_PICKER_INJECTION_KEY); return () => { const cell = props.cell; return (picker == null ? void 0 : picker.ctx.slots.default) ? picker.ctx.slots.default(cell) : vue.h("div", { class: "el-date-table-cell" }, [ vue.h("span", { class: "el-date-table-cell__text" }, [cell == null ? void 0 : cell.text]) ]); }; } }); var script$1c = vue.defineComponent({ components: { ElDatePickerCell }, 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().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.dayjs = calTime; cell.date = calTime.toDate(); cell.timestamp = calTime.valueOf(); 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.isSelected = !!cell.selected; cell.isCurrent = isCurrent(cell); 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 isCurrent = (cell) => { return props.selectionMode === "day" && (cell.type === "normal" || cell.type === "today") && cellMatchesDate(cell, props.parsedValue); }; const cellMatchesDate = (cell, date) => { if (!date) return false; return dayjs(date).locale(lang.value).isSame(props.date.date(Number(cell.text)), "day"); }; const getCellClasses = (cell) => { const classes = []; if ((cell.type === "normal" || cell.type === "today") && !cell.disabled) { classes.push("available"); if (cell.type === "today") { classes.push("today"); } } else { classes.push(cell.type); } if (isCurrent(cell)) { classes.push("current"); } if (cell.inRange && (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; while (target) { if (target.tagName === "TD") { break; } target = target.parentNode; } if (!target || 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$R = { key: 0 }; function render$15(_ctx, _cache, $props, $setup, $data, $options) { const _component_el_date_picker_cell = vue.resolveComponent("el-date-picker-cell"); 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$R, 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.createVNode(_component_el_date_picker_cell, { cell }, null, 8, ["cell"]) ], 2); }), 128)) ], 2); }), 128)) ]) ], 34); } script$1c.render = render$15; script$1c.__file = "packages/components/date-picker/src/date-picker-com/basic-date-table.vue"; const datesInMonth = (year, month, lang) => { const firstDay = dayjs().locale(lang).startOf("month").month(month).year(year); const numOfDays = firstDay.daysInMonth(); return rangeArr(numOfDays).map((n) => firstDay.add(n, "day").toDate()); }; var script$1b = 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().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$Q = { class: "cell" }; function render$14(_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$Q, vue.toDisplayString(_ctx.t("el.datepicker.months." + _ctx.months[cell.text])), 1) ]) ], 2); }), 128)) ]); }), 128)) ]) ], 32); } script$1b.render = render$14; script$1b.__file = "packages/components/date-picker/src/date-picker-com/basic-month-table.vue"; const datesInYear = (year, lang) => { const firstDay = dayjs(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$1a = 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().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$P = { class: "cell" }; const _hoisted_2$C = { class: "cell" }; const _hoisted_3$w = { class: "cell" }; const _hoisted_4$o = { class: "cell" }; const _hoisted_5$k = { class: "cell" }; const _hoisted_6$e = { class: "cell" }; const _hoisted_7$a = { class: "cell" }; const _hoisted_8$9 = { class: "cell" }; const _hoisted_9$7 = { class: "cell" }; const _hoisted_10$7 = { class: "cell" }; const _hoisted_11$3 = /* @__PURE__ */ vue.createElementVNode("td", null, null, -1); const _hoisted_12$3 = /* @__PURE__ */ vue.createElementVNode("td", null, null, -1); function render$13(_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$P, vue.toDisplayString(_ctx.startYear), 1) ], 2), vue.createElementVNode("td", { class: vue.normalizeClass(["available", _ctx.getCellStyle(_ctx.startYear + 1)]) }, [ vue.createElementVNode("a", _hoisted_2$C, vue.toDisplayString(_ctx.startYear + 1), 1) ], 2), vue.createElementVNode("td", { class: vue.normalizeClass(["available", _ctx.getCellStyle(_ctx.startYear + 2)]) }, [ vue.createElementVNode("a", _hoisted_3$w, 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$e, vue.toDisplayString(_ctx.startYear + 5), 1) ], 2), vue.createElementVNode("td", { class: vue.normalizeClass(["available", _ctx.getCellStyle(_ctx.startYear + 6)]) }, [ vue.createElementVNode("a", _hoisted_7$a, 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$7, vue.toDisplayString(_ctx.startYear + 8), 1) ], 2), vue.createElementVNode("td", { class: vue.normalizeClass(["available", _ctx.getCellStyle(_ctx.startYear + 9)]) }, [ vue.createElementVNode("a", _hoisted_10$7, vue.toDisplayString(_ctx.startYear + 9), 1) ], 2), _hoisted_11$3, _hoisted_12$3 ]) ]) ]); } script$1a.render = render$13; script$1a.__file = "packages/components/date-picker/src/date-picker-com/basic-year-table.vue"; const timeWithinRange = (_, __, ___) => true; var script$19 = vue.defineComponent({ components: { DateTable: script$1c, ElInput: ElInput$1, ElButton, ElIcon, TimePickPanel: script$1I, MonthTable: script$1b, YearTable: script$1a, DArrowLeft, ArrowLeft, DArrowRight, ArrowRight }, 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 pickerBase = vue.inject("EP_PICKER_BASE"); const { shortcuts, disabledDate, cellClassName, defaultTime, defaultValue, arrowControl } = pickerBase.props; const innerDate = vue.ref(dayjs().locale(lang.value)); const defaultTimeD = vue.computed(() => { return dayjs(defaultTime).locale(lang.value); }); const month = vue.computed(() => { return innerDate.value.month(); }); const year = vue.computed(() => { return innerDate.value.year(); }); const selectableRange = vue.ref([]); const userInputDate = vue.ref(null); const userInputTime = vue.ref(null); const checkDateWithinRange = (date) => { return selectableRange.value.length > 0 ? timeWithinRange(date, selectableRange.value, props.format || "HH:mm:ss") : true; }; const formatEmit = (emitDayjs) => { if (defaultTime && !visibleTime.value) { return defaultTimeD.value.year(emitDayjs.year()).month(emitDayjs.month()).date(emitDayjs.date()); } if (showTime.value) return emitDayjs.millisecond(0); return emitDayjs.startOf("day"); }; const emit = (value, ...args) => { if (!value) { 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(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 defaultTimeD2 = dayjs(defaultTime).locale(lang.value); const defaultValueD = getDefaultValue(); result = defaultTimeD2.year(defaultValueD.year()).month(defaultValueD.month()).date(defaultValueD.date()); } innerDate.value = result; emit(result); } }; const changeToNow = () => { const now = dayjs().locale(lang.value); const nowDate = now.toDate(); if ((!disabledDate || !disabledDate(nowDate)) && checkDateWithinRange(nowDate)) { innerDate.value = dayjs().locale(lang.value); emit(innerDate.value); } }; const timeFormat = vue.computed(() => { return extractTimeFormat(props.format); }); const dateFormat = vue.computed(() => { return extractDateFormat(props.format); }); const visibleTime = vue.computed(() => { if (userInputTime.value) return userInputTime.value; if (!props.parsedValue && !defaultValue) 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(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(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 dayjs.isDayjs(date) && date.isValid() && (disabledDate ? !disabledDate(date.toDate()) : true); }; const formatToString = (value) => { if (selectionMode.value === "dates") { return value.map((_) => _.format(props.format)); } return value.format(props.format); }; const parseUserInput = (value) => { return dayjs(value, props.format).locale(lang.value); }; const getDefaultValue = () => { const parseDate = dayjs(defaultValue).locale(lang.value); if (!defaultValue) { const defaultTimeDValue = defaultTimeD.value; return dayjs().hour(defaultTimeDValue.hour()).minute(defaultTimeDValue.minute()).second(defaultTimeDValue.second()).locale(lang.value); } return parseDate; }; 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(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]); 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$O = { class: "el-picker-panel__body-wrapper" }; const _hoisted_2$B = { key: 0, class: "el-picker-panel__sidebar" }; const _hoisted_3$v = ["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$d = { class: "el-date-picker__editor-wrap" }; const _hoisted_7$9 = { class: "el-date-picker__editor-wrap" }; const _hoisted_8$8 = ["aria-label"]; const _hoisted_9$6 = ["aria-label"]; const _hoisted_10$6 = ["aria-label"]; const _hoisted_11$2 = ["aria-label"]; const _hoisted_12$2 = { class: "el-picker-panel__content" }; const _hoisted_13$2 = { class: "el-picker-panel__footer" }; function render$12(_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_d_arrow_left = vue.resolveComponent("d-arrow-left"); const _component_el_icon = vue.resolveComponent("el-icon"); const _component_arrow_left = vue.resolveComponent("arrow-left"); const _component_d_arrow_right = vue.resolveComponent("d-arrow-right"); const _component_arrow_right = vue.resolveComponent("arrow-right"); 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$O, [ vue.renderSlot(_ctx.$slots, "sidebar", { class: "el-picker-panel__sidebar" }), _ctx.hasShortcuts ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$B, [ (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$v); }), 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$d, [ 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$9, [ 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: "el-picker-panel__icon-btn el-date-picker__prev-btn d-arrow-left", onClick: _cache[2] || (_cache[2] = (...args) => _ctx.prevYear_ && _ctx.prevYear_(...args)) }, [ vue.createVNode(_component_el_icon, null, { default: vue.withCtx(() => [ vue.createVNode(_component_d_arrow_left) ]), _: 1 }) ], 8, _hoisted_8$8), vue.withDirectives(vue.createElementVNode("button", { type: "button", "aria-label": _ctx.t(`el.datepicker.prevMonth`), class: "el-picker-panel__icon-btn el-date-picker__prev-btn arrow-left", onClick: _cache[3] || (_cache[3] = (...args) => _ctx.prevMonth_ && _ctx.prevMonth_(...args)) }, [ vue.createVNode(_component_el_icon, null, { default: vue.withCtx(() => [ vue.createVNode(_component_arrow_left) ]), _: 1 }) ], 8, _hoisted_9$6), [ [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: "el-picker-panel__icon-btn el-date-picker__next-btn d-arrow-right", onClick: _cache[6] || (_cache[6] = (...args) => _ctx.nextYear_ && _ctx.nextYear_(...args)) }, [ vue.createVNode(_component_el_icon, null, { default: vue.withCtx(() => [ vue.createVNode(_component_d_arrow_right) ]), _: 1 }) ], 8, _hoisted_10$6), vue.withDirectives(vue.createElementVNode("button", { type: "button", "aria-label": _ctx.t(`el.datepicker.nextMonth`), class: "el-picker-panel__icon-btn el-date-picker__next-btn arrow-right", onClick: _cache[7] || (_cache[7] = (...args) => _ctx.nextMonth_ && _ctx.nextMonth_(...args)) }, [ vue.createVNode(_component_el_icon, null, { default: vue.withCtx(() => [ vue.createVNode(_component_arrow_right) ]), _: 1 }) ], 8, _hoisted_11$2), [ [vue.vShow, _ctx.currentView === "date"] ]) ], 2), [ [vue.vShow, _ctx.currentView !== "time"] ]), vue.createElementVNode("div", _hoisted_12$2, [ _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$2, [ 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$19.render = render$12; script$19.__file = "packages/components/date-picker/src/date-picker-com/panel-date-pick.vue"; var script$18 = vue.defineComponent({ directives: { clickoutside: ClickOutside }, components: { TimePickPanel: script$1I, DateTable: script$1c, ElInput: ElInput$1, ElButton, ElIcon: ElIcon$1, DArrowLeft, ArrowLeft, DArrowRight, ArrowRight }, 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().locale(lang.value)); const rightDate = vue.ref(dayjs().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(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(shortcutValues[0]).locale(lang.value), dayjs(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(value, dateFormat.value).locale(lang.value); if (parsedValueD.isValid()) { if (disabledDate && disabledDate(parsedValueD.toDate())) { return; } if (type === "min") { leftDate.value = parsedValueD; minDate.value = (minDate.value || leftDate.value).year(parsedValueD.year()).month(parsedValueD.month()).date(parsedValueD.date()); if (!props.unlinkPanels) { rightDate.value = parsedValueD.add(1, "month"); maxDate.value = minDate.value.add(1, "month"); } } else { rightDate.value = parsedValueD; maxDate.value = (maxDate.value || rightDate.value).year(parsedValueD.year()).month(parsedValueD.month()).date(parsedValueD.date()); if (!props.unlinkPanels) { leftDate.value = parsedValueD.subtract(1, "month"); minDate.value = maxDate.value.subtract(1, "month"); } } } }; const handleDateChange = (_, type) => { dateUserInput.value[type] = null; }; const handleTimeInput = (value, type) => { timeUserInput.value[type] = value; const parsedValueD = dayjs(value, timeFormat.value).locale(lang.value); if (parsedValueD.isValid()) { if (type === "min") { minTimePickerVisible.value = true; minDate.value = (minDate.value || leftDate.value).hour(parsedValueD.hour()).minute(parsedValueD.minute()).second(parsedValueD.second()); if (!maxDate.value || maxDate.value.isBefore(minDate.value)) { maxDate.value = minDate.value; } } else { maxTimePickerVisible.value = true; maxDate.value = (maxDate.value || rightDate.value).hour(parsedValueD.hour()).minute(parsedValueD.minute()).second(parsedValueD.second()); rightDate.value = maxDate.value; if (maxDate.value && maxDate.value.isBefore(minDate.value)) { minDate.value = maxDate.value; } } } }; const handleTimeChange = (value, type) => { timeUserInput.value[type] = null; if (type === "min") { leftDate.value = minDate.value; minTimePickerVisible.value = false; } else { rightDate.value = maxDate.value; maxTimePickerVisible.value = false; } }; const handleMinTimePick = (value, visible, first) => { if (timeUserInput.value.min) return; if (value) { leftDate.value = value; minDate.value = (minDate.value || leftDate.value).hour(value.hour()).minute(value.minute()).second(value.second()); } if (!first) { minTimePickerVisible.value = visible; } if (!maxDate.value || maxDate.value.isBefore(minDate.value)) { maxDate.value = minDate.value; rightDate.value = value; } }; const handleMaxTimePick = (value, visible, first) => { if (timeUserInput.value.max) return; if (value) { rightDate.value = value; maxDate.value = (maxDate.value || rightDate.value).hour(value.hour()).minute(value.minute()).second(value.second()); } if (!first) { maxTimePickerVisible.value = visible; } if (maxDate.value && maxDate.value.isBefore(minDate.value)) { minDate.value = maxDate.value; } }; const handleClear = () => { leftDate.value = getDefaultValue()[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(_, format).locale(lang.value)) : dayjs(value, format).locale(lang.value); }; const getDefaultValue = () => { let start; if (Array.isArray(defaultValue)) { const left = dayjs(defaultValue[0]); let right = dayjs(defaultValue[1]); if (!props.unlinkPanels) { right = left.add(1, "month"); } return [left, right]; } else if (defaultValue) { start = dayjs(defaultValue); } else { start = dayjs(); } 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$N = { class: "el-picker-panel__body-wrapper" }; const _hoisted_2$A = { key: 0, class: "el-picker-panel__sidebar" }; const _hoisted_3$u = ["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$c = { class: "el-date-range-picker__editors-wrap" }; const _hoisted_7$8 = { class: "el-date-range-picker__time-picker-wrap" }; const _hoisted_8$7 = { class: "el-date-range-picker__time-picker-wrap" }; const _hoisted_9$5 = { class: "el-date-range-picker__editors-wrap is-right" }; const _hoisted_10$5 = { class: "el-date-range-picker__time-picker-wrap" }; const _hoisted_11$1 = { class: "el-date-range-picker__time-picker-wrap" }; const _hoisted_12$1 = { class: "el-picker-panel__content el-date-range-picker__content is-left" }; const _hoisted_13$1 = { class: "el-date-range-picker__header" }; const _hoisted_14$1 = ["disabled"]; const _hoisted_15$1 = ["disabled"]; const _hoisted_16$1 = { class: "el-picker-panel__content el-date-range-picker__content is-right" }; const _hoisted_17$1 = { class: "el-date-range-picker__header" }; const _hoisted_18$1 = ["disabled"]; const _hoisted_19$1 = ["disabled"]; const _hoisted_20$1 = { key: 0, class: "el-picker-panel__footer" }; function render$11(_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_arrow_right = vue.resolveComponent("arrow-right"); const _component_el_icon = vue.resolveComponent("el-icon"); const _component_d_arrow_left = vue.resolveComponent("d-arrow-left"); const _component_arrow_left = vue.resolveComponent("arrow-left"); const _component_d_arrow_right = vue.resolveComponent("d-arrow-right"); 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$N, [ vue.renderSlot(_ctx.$slots, "sidebar", { class: "el-picker-panel__sidebar" }), _ctx.hasShortcuts ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$A, [ (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$u); }), 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$c, [ vue.createElementVNode("span", _hoisted_7$8, [ 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] ]) ]), vue.createElementVNode("span", null, [ vue.createVNode(_component_el_icon, null, { default: vue.withCtx(() => [ vue.createVNode(_component_arrow_right) ]), _: 1 }) ]), vue.createElementVNode("span", _hoisted_9$5, [ vue.createElementVNode("span", _hoisted_10$5, [ 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_11$1, [ 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_12$1, [ vue.createElementVNode("div", _hoisted_13$1, [ vue.createElementVNode("button", { type: "button", class: "el-picker-panel__icon-btn d-arrow-left", onClick: _cache[10] || (_cache[10] = (...args) => _ctx.leftPrevYear && _ctx.leftPrevYear(...args)) }, [ vue.createVNode(_component_el_icon, null, { default: vue.withCtx(() => [ vue.createVNode(_component_d_arrow_left) ]), _: 1 }) ]), vue.createElementVNode("button", { type: "button", class: "el-picker-panel__icon-btn arrow-left", onClick: _cache[11] || (_cache[11] = (...args) => _ctx.leftPrevMonth && _ctx.leftPrevMonth(...args)) }, [ vue.createVNode(_component_el_icon, null, { default: vue.withCtx(() => [ vue.createVNode(_component_arrow_left) ]), _: 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 d-arrow-right"]), onClick: _cache[12] || (_cache[12] = (...args) => _ctx.leftNextYear && _ctx.leftNextYear(...args)) }, [ vue.createVNode(_component_el_icon, null, { default: vue.withCtx(() => [ vue.createVNode(_component_d_arrow_right) ]), _: 1 }) ], 10, _hoisted_14$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 arrow-right"]), onClick: _cache[13] || (_cache[13] = (...args) => _ctx.leftNextMonth && _ctx.leftNextMonth(...args)) }, [ vue.createVNode(_component_el_icon, null, { default: vue.withCtx(() => [ vue.createVNode(_component_arrow_right) ]), _: 1 }) ], 10, _hoisted_15$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_16$1, [ vue.createElementVNode("div", _hoisted_17$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 d-arrow-left"]), onClick: _cache[14] || (_cache[14] = (...args) => _ctx.rightPrevYear && _ctx.rightPrevYear(...args)) }, [ vue.createVNode(_component_el_icon, null, { default: vue.withCtx(() => [ vue.createVNode(_component_d_arrow_left) ]), _: 1 }) ], 10, _hoisted_18$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 arrow-left"]), onClick: _cache[15] || (_cache[15] = (...args) => _ctx.rightPrevMonth && _ctx.rightPrevMonth(...args)) }, [ vue.createVNode(_component_el_icon, null, { default: vue.withCtx(() => [ vue.createVNode(_component_arrow_left) ]), _: 1 }) ], 10, _hoisted_19$1)) : vue.createCommentVNode("v-if", true), vue.createElementVNode("button", { type: "button", class: "el-picker-panel__icon-btn d-arrow-right", onClick: _cache[16] || (_cache[16] = (...args) => _ctx.rightNextYear && _ctx.rightNextYear(...args)) }, [ vue.createVNode(_component_el_icon, null, { default: vue.withCtx(() => [ vue.createVNode(_component_d_arrow_right) ]), _: 1 }) ]), vue.createElementVNode("button", { type: "button", class: "el-picker-panel__icon-btn arrow-right", onClick: _cache[17] || (_cache[17] = (...args) => _ctx.rightNextMonth && _ctx.rightNextMonth(...args)) }, [ vue.createVNode(_component_el_icon, null, { default: vue.withCtx(() => [ vue.createVNode(_component_arrow_right) ]), _: 1 }) ]), 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_20$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$18.render = render$11; script$18.__file = "packages/components/date-picker/src/date-picker-com/panel-date-range.vue"; var script$17 = vue.defineComponent({ components: { MonthTable: script$1b, ElIcon: ElIcon$1, DArrowLeft, DArrowRight }, props: { unlinkPanels: Boolean, parsedValue: { type: Array } }, emits: ["pick", "set-picker-option"], setup(props, ctx) { const { t, lang } = useLocaleInject(); const leftDate = vue.ref(dayjs().locale(lang.value)); const rightDate = vue.ref(dayjs().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(shortcutValues[0]).locale(lang.value), dayjs(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(defaultValue[0]); let right = dayjs(defaultValue[1]); if (!props.unlinkPanels) { right = left.add(1, "year"); } return [left, right]; } else if (defaultValue) { start = dayjs(defaultValue); } else { start = dayjs(); } 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$M = { class: "el-picker-panel__body-wrapper" }; const _hoisted_2$z = { key: 0, class: "el-picker-panel__sidebar" }; const _hoisted_3$t = ["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$b = { class: "el-date-range-picker__header" }; const _hoisted_7$7 = ["disabled"]; const _hoisted_8$6 = { class: "el-picker-panel__content el-date-range-picker__content is-right" }; const _hoisted_9$4 = { class: "el-date-range-picker__header" }; const _hoisted_10$4 = ["disabled"]; function render$10(_ctx, _cache, $props, $setup, $data, $options) { const _component_d_arrow_left = vue.resolveComponent("d-arrow-left"); const _component_el_icon = vue.resolveComponent("el-icon"); const _component_d_arrow_right = vue.resolveComponent("d-arrow-right"); 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$M, [ vue.renderSlot(_ctx.$slots, "sidebar", { class: "el-picker-panel__sidebar" }), _ctx.hasShortcuts ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$z, [ (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$t); }), 128)) ])) : vue.createCommentVNode("v-if", true), vue.createElementVNode("div", _hoisted_4$l, [ vue.createElementVNode("div", _hoisted_5$h, [ vue.createElementVNode("div", _hoisted_6$b, [ vue.createElementVNode("button", { type: "button", class: "el-picker-panel__icon-btn d-arrow-left", onClick: _cache[0] || (_cache[0] = (...args) => _ctx.leftPrevYear && _ctx.leftPrevYear(...args)) }, [ vue.createVNode(_component_el_icon, null, { default: vue.withCtx(() => [ vue.createVNode(_component_d_arrow_left) ]), _: 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 d-arrow-right"]), onClick: _cache[1] || (_cache[1] = (...args) => _ctx.leftNextYear && _ctx.leftNextYear(...args)) }, [ vue.createVNode(_component_el_icon, null, { default: vue.withCtx(() => [ vue.createVNode(_component_d_arrow_right) ]), _: 1 }) ], 10, _hoisted_7$7)) : 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$4, [ _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 d-arrow-left"]), onClick: _cache[2] || (_cache[2] = (...args) => _ctx.rightPrevYear && _ctx.rightPrevYear(...args)) }, [ vue.createVNode(_component_el_icon, null, { default: vue.withCtx(() => [ vue.createVNode(_component_d_arrow_left) ]), _: 1 }) ], 10, _hoisted_10$4)) : vue.createCommentVNode("v-if", true), vue.createElementVNode("button", { type: "button", class: "el-picker-panel__icon-btn d-arrow-right", onClick: _cache[3] || (_cache[3] = (...args) => _ctx.rightNextYear && _ctx.rightNextYear(...args)) }, [ vue.createVNode(_component_el_icon, null, { default: vue.withCtx(() => [ vue.createVNode(_component_d_arrow_right) ]), _: 1 }) ]), 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$17.render = render$10; script$17.__file = "packages/components/date-picker/src/date-picker-com/panel-month-range.vue"; dayjs.extend(localeData); dayjs.extend(advancedFormat); dayjs.extend(customParseFormat); dayjs.extend(weekOfYear); dayjs.extend(weekYear); dayjs.extend(dayOfYear); dayjs.extend(isSameOrAfter); dayjs.extend(isSameOrBefore); const getPanel = function(type) { if (type === "daterange" || type === "datetimerange") { return script$18; } else if (type === "monthrange") { return script$17; } return script$19; }; var DatePicker = vue.defineComponent({ name: "ElDatePicker", install: null, props: { ...timePickerDefaultProps, type: { type: String, default: "date" } }, emits: ["update:modelValue"], setup(props, ctx) { vue.provide("ElPopperOptions", props.popperOptions); vue.provide(ROOT_PICKER_INJECTION_KEY, { ctx }); const commonPicker = vue.ref(null); const refProps = { ...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$1K, { ...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$16 = vue.defineComponent({ name: "ElDescriptionsRow", components: { [DescriptionsCell.name]: DescriptionsCell }, props: { row: { type: Array } }, setup() { const descriptions = vue.inject(elDescriptionsKey, {}); return { descriptions }; } }); const _hoisted_1$L = { key: 1 }; function render$$(_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$L, [ (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$16.render = render$$; script$16.__file = "packages/components/descriptions/src/descriptions-row.vue"; var script$15 = vue.defineComponent({ name: "ElDescriptions", components: { [script$16.name]: script$16 }, 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$1(); 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$K = { class: "el-descriptions" }; const _hoisted_2$y = { key: 0, class: "el-descriptions__header" }; const _hoisted_3$s = { class: "el-descriptions__title" }; const _hoisted_4$k = { class: "el-descriptions__extra" }; const _hoisted_5$g = { class: "el-descriptions__body" }; function render$_(_ctx, _cache, $props, $setup, $data, $options) { const _component_el_descriptions_row = vue.resolveComponent("el-descriptions-row"); return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$K, [ _ctx.title || _ctx.extra || _ctx.$slots.title || _ctx.$slots.extra ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$y, [ vue.createElementVNode("div", _hoisted_3$s, [ 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$15.render = render$_; script$15.__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$15, { DescriptionsItem }); const ElDescriptionsItem = withNoopInstall(DescriptionsItem); const overlayProps = buildProps({ mask: { type: Boolean, default: true }, customMaskEvent: { type: Boolean, default: false }, overlayClass: { type: definePropType([ String, Array, Object ]) }, zIndex: { type: definePropType([String, Number]) } }); const overlayEmits = { click: (evt) => evt instanceof MouseEvent }; var Overlay = 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 = buildProps({ appendToBody: { type: Boolean, default: false }, beforeClose: { 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: { 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 script$14 = vue.defineComponent({ name: "ElDialog", components: { ElOverlay, ElIcon, ...CloseComponents }, 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 { dialogRef, overlayEvent, ...dialog }; } }); const _hoisted_1$J = ["aria-label"]; const _hoisted_2$x = { class: "el-dialog__header" }; const _hoisted_3$r = { class: "el-dialog__title" }; const _hoisted_4$j = { key: 0, class: "el-dialog__body" }; const _hoisted_5$f = { key: 1, class: "el-dialog__footer" }; function render$Z(_ctx, _cache, $props, $setup, $data, $options) { const _component_close = vue.resolveComponent("close"); const _component_el_icon = vue.resolveComponent("el-icon"); 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$x, [ vue.renderSlot(_ctx.$slots, "title", {}, () => [ vue.createElementVNode("span", _hoisted_3$r, 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)) }, [ vue.createVNode(_component_el_icon, { class: "el-dialog__close" }, { default: vue.withCtx(() => [ vue.createVNode(_component_close) ]), _: 1 }) ])) : vue.createCommentVNode("v-if", true) ]), _ctx.rendered ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$j, [ vue.renderSlot(_ctx.$slots, "default") ])) : vue.createCommentVNode("v-if", true), _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$f, [ vue.renderSlot(_ctx.$slots, "footer") ])) : vue.createCommentVNode("v-if", true) ], 14, _hoisted_1$J), [ [_directive_trap_focus] ]) ], 32) ]), _: 3 }, 8, ["mask", "overlay-class", "z-index"]), [ [vue.vShow, _ctx.visible] ]) ]), _: 3 }, 8, ["onAfterEnter", "onAfterLeave", "onBeforeLeave"]) ], 8, ["disabled"]); } script$14.render = render$Z; script$14.__file = "packages/components/dialog/src/dialog.vue"; const ElDialog = withInstall(script$14); const dividerProps = buildProps({ direction: { type: String, values: ["horizontal", "vertical"], default: "horizontal" }, contentPosition: { type: String, values: ["left", "center", "right"], default: "center" } }); var script$13 = vue.defineComponent({ name: "ElDivider", props: dividerProps }); function render$Y(_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$13.render = render$Y; script$13.__file = "packages/components/divider/src/divider.vue"; const ElDivider = withInstall(script$13); var script$12 = vue.defineComponent({ name: "ElDrawer", components: { ElOverlay, ElIcon: ElIcon$1, Close }, directives: { TrapFocus }, props: { ...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 { ...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$I = ["aria-label"]; const _hoisted_2$w = { key: 0, id: "el-drawer__title", class: "el-drawer__header" }; const _hoisted_3$q = ["title"]; const _hoisted_4$i = ["aria-label"]; const _hoisted_5$e = { key: 1, class: "el-drawer__body" }; function render$X(_ctx, _cache, $props, $setup, $data, $options) { const _component_close = vue.resolveComponent("close"); const _component_el_icon = vue.resolveComponent("el-icon"); 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$w, [ vue.renderSlot(_ctx.$slots, "title", {}, () => [ vue.createElementVNode("span", { role: "heading", title: _ctx.title }, vue.toDisplayString(_ctx.title), 9, _hoisted_3$q) ]), _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)) }, [ vue.createVNode(_component_el_icon, { class: "el-drawer__close" }, { default: vue.withCtx(() => [ vue.createVNode(_component_close) ]), _: 1 }) ], 8, _hoisted_4$i)) : vue.createCommentVNode("v-if", true) ])) : vue.createCommentVNode("v-if", true), _ctx.rendered ? (vue.openBlock(), vue.createElementBlock("section", _hoisted_5$e, [ vue.renderSlot(_ctx.$slots, "default") ])) : vue.createCommentVNode("v-if", true) ], 14, _hoisted_1$I), [ [_directive_trap_focus] ]) ]), _: 3 }, 8, ["mask", "overlay-class", "z-index", "onClick"]), [ [vue.vShow, _ctx.visible] ]) ]), _: 3 }, 8, ["onAfterEnter", "onAfterLeave", "onBeforeLeave"]) ], 8, ["disabled"]); } script$12.render = render$X; script$12.__file = "packages/components/drawer/src/index.vue"; script$12.install = (app) => { app.component(script$12.name, script$12); }; const _Drawer = script$12; const ElDrawer = _Drawer; const useDropdown = () => { const ELEMENT = useGlobalConfig$1(); 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$11 = vue.defineComponent({ name: "ElDropdown", components: { ElButton, ElButtonGroup, ElScrollbar, ElPopper, ElIcon: ElIcon$1, ArrowDown }, 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$H = { class: "el-dropdown" }; function render$W(_ctx, _cache, $props, $setup, $data, $options) { const _component_el_scrollbar = vue.resolveComponent("el-scrollbar"); const _component_el_button = vue.resolveComponent("el-button"); const _component_arrow_down = vue.resolveComponent("arrow-down"); const _component_el_icon = vue.resolveComponent("el-icon"); const _component_el_button_group = vue.resolveComponent("el-button-group"); const _component_el_popper = vue.resolveComponent("el-popper"); return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$H, [ vue.createVNode(_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([_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(() => [ vue.createVNode(_component_el_icon, { class: "el-dropdown__icon" }, { default: vue.withCtx(() => [ vue.createVNode(_component_arrow_down) ]), _: 1 }) ]), _: 1 }, 8, ["size", "type"]) ]), _: 3 })) ], 2) ]), _: 3 }, 8, ["visible", "placement", "effect", "trigger"]) ]); } script$11.render = render$W; script$11.__file = "packages/components/dropdown/src/dropdown.vue"; var script$10 = vue.defineComponent({ name: "ElDropdownItem", components: { ElIcon: ElIcon$1 }, props: buildProps({ command: { type: [Object, String, Number], default: () => ({}) }, disabled: Boolean, divided: Boolean, icon: { type: definePropType([String, Object]) } }), 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$G = ["aria-disabled", "tabindex"]; function render$V(_ctx, _cache, $props, $setup, $data, $options) { const _component_el_icon = vue.resolveComponent("el-icon"); 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.createBlock(_component_el_icon, { key: 0 }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon))) ]), _: 1 })) : vue.createCommentVNode("v-if", true), vue.renderSlot(_ctx.$slots, "default") ], 10, _hoisted_1$G); } script$10.render = render$V; script$10.__file = "packages/components/dropdown/src/dropdown-item.vue"; var script$$ = 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$U(_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$$.render = render$U; script$$.__file = "packages/components/dropdown/src/dropdown-menu.vue"; const ElDropdown = withInstall(script$11, { DropdownItem: script$10, DropdownMenu: script$$ }); const ElDropdownItem = withNoopInstall(script$10); const ElDropdownMenu = withNoopInstall(script$$); let id = 0; var script$_ = vue.defineComponent({ name: "ImgEmpty", setup() { return { id: ++id }; } }); const _hoisted_1$F = { 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$v = ["id"]; const _hoisted_3$p = /* @__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$p, _hoisted_4$h ]; const _hoisted_6$a = ["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$3 = [ _hoisted_7$6, _hoisted_8$5 ]; const _hoisted_10$3 = ["id"]; const _hoisted_11 = { id: "Illustrations", stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }; const _hoisted_12 = { id: "B-type", transform: "translate(-1268.000000, -535.000000)" }; const _hoisted_13 = { id: "Group-2", transform: "translate(1268.000000, 535.000000)" }; const _hoisted_14 = /* @__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$T(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$F, [ 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$v), vue.createElementVNode("linearGradient", { id: `linearGradient-2-${_ctx.id}`, x1: "0%", y1: "9.5%", x2: "100%", y2: "90.5%" }, _hoisted_9$3, 8, _hoisted_6$a), vue.createElementVNode("rect", { id: `path-3-${_ctx.id}`, x: "0", y: "0", width: "17", height: "36" }, null, 8, _hoisted_10$3) ]), vue.createElementVNode("g", _hoisted_11, [ vue.createElementVNode("g", _hoisted_12, [ vue.createElementVNode("g", _hoisted_13, [ _hoisted_14, _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$_.render = render$T; script$_.__file = "packages/components/empty/src/img-empty.vue"; const emptyProps = { image: { type: String, default: "" }, imageSize: Number, description: { type: String, default: "" } }; var script$Z = vue.defineComponent({ name: "ElEmpty", components: { ImgEmpty: script$_ }, 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$E = { class: "el-empty" }; const _hoisted_2$u = ["src"]; const _hoisted_3$o = { class: "el-empty__description" }; const _hoisted_4$g = { key: 1 }; const _hoisted_5$c = { key: 0, class: "el-empty__bottom" }; function render$S(_ctx, _cache, $props, $setup, $data, $options) { const _component_img_empty = vue.resolveComponent("img-empty"); return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$E, [ 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$u)) : vue.renderSlot(_ctx.$slots, "image", { key: 1 }, () => [ vue.createVNode(_component_img_empty) ]) ], 4), vue.createElementVNode("div", _hoisted_3$o, [ _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$Z.render = render$S; script$Z.__file = "packages/components/empty/src/empty.vue"; const ElEmpty = withInstall(script$Z); 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$Y = 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 = { ...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({ ...vue.toRefs(props), resetFields, clearValidate, validateField, emit, addField, removeField, ...useFormLabelWidth() }); vue.provide(elFormKey, elForm); return { validate, resetFields, clearValidate, validateField, scrollToField }; } }); function render$R(_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$Y.render = render$R; script$Y.__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; _setPrototypeOf(subClass, 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 { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], 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 && typeof ASYNC_VALIDATOR_NO_WARNING === 'undefined') { 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(template) { for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { args[_key - 1] = arguments[_key]; } var i = 0; var len = args.length; if (typeof template === 'function') { return template.apply(null, args); } if (typeof template === 'string') { var str = template.replace(formatRegExp, function (x) { if (x === '%%') { return '%'; } if (i >= len) { return x; } switch (x) { case '%s': return String(args[i++]); case '%d': return Number(args[i++]); case '%j': try { return JSON.stringify(args[i++]); } catch (_) { return '[Circular]'; } break; default: return x; } }); return str; } return template; } function isNativeStringType(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, source) { 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(source); }; var flattenArr = flattenObjArr(objArr); asyncSerialArray(flattenArr, func, next); }); _pending["catch"](function (e) { return e; }); return _pending; } var firstFields = option.firstFields === true ? Object.keys(objArr) : option.firstFields || []; var objArrKeys = Object.keys(objArr); var objArrLength = objArrKeys.length; var total = 0; var results = []; var pending = new Promise(function (resolve, reject) { var next = function next(errors) { results.push.apply(results, errors); total++; if (total === objArrLength) { callback(results); return results.length ? reject(new AsyncValidationError(results, convertFieldsError(results))) : resolve(source); } }; if (!objArrKeys.length) { callback(results); resolve(source); } objArrKeys.forEach(function (key) { var arr = objArr[key]; if (firstFields.indexOf(key) !== -1) { asyncSerialArray(arr, func, next); } else { asyncParallelArray(arr, func, next); } }); }); pending["catch"](function (e) { return e; }); return pending; } function isErrorObj(obj) { return !!(obj && obj.message !== undefined); } function getValue(value, path) { var v = value; for (var i = 0; i < path.length; i++) { if (v == undefined) { return v; } v = v[path[i]]; } return v; } function complementError(rule, source) { return function (oe) { var fieldValue; if (rule.fullFields) { fieldValue = getValue(source, rule.fullFields); } else { fieldValue = source[oe.field || rule.fullField]; } if (isErrorObj(oe)) { oe.field = oe.field || rule.fullField; oe.fieldValue = fieldValue; return oe; } return { message: typeof oe === 'function' ? oe() : oe, fieldValue: fieldValue, field: oe.field || rule.fullField }; }; } function deepMerge(target, source) { if (source) { for (var s in source) { if (source.hasOwnProperty(s)) { var value = source[s]; if (typeof value === 'object' && typeof target[s] === 'object') { target[s] = _extends({}, target[s], value); } else { target[s] = value; } } } } return target; } var required$1 = function required(rule, value, source, errors, options, 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. */ var whitespace = 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$2 = { // 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\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+\.)+[a-zA-Z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]{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.length <= 320 && !!value.match(pattern$2.email); }, url: function url(value) { return typeof value === 'string' && value.length <= 2048 && !!value.match(pattern$2.url); }, hex: function hex(value) { return typeof value === 'string' && !!value.match(pattern$2.hex); } }; var type$1 = function type(rule, value, source, errors, options) { if (rule.required && value === undefined) { required$1(rule, value, source, errors, options); return; } var custom = ['integer', 'float', 'array', 'regexp', 'object', 'method', 'email', 'number', 'date', 'url', 'hex']; var ruleType = rule.type; if (custom.indexOf(ruleType) > -1) { if (!types[ruleType](value)) { errors.push(format(options.messages.types[ruleType], rule.fullField, rule.type)); } // straight typeof check } else if (ruleType && typeof value !== rule.type) { errors.push(format(options.messages.types[ruleType], rule.fullField, rule.type)); } }; var range = 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$1 = 'enum'; var enumerable$1 = function enumerable(rule, value, source, errors, options) { rule[ENUM$1] = Array.isArray(rule[ENUM$1]) ? rule[ENUM$1] : []; if (rule[ENUM$1].indexOf(value) === -1) { errors.push(format(options.messages[ENUM$1], rule.fullField, rule[ENUM$1].join(', '))); } }; var pattern$1 = function pattern(rule, value, source, errors, options) { if (rule.pattern) { if (rule.pattern instanceof RegExp) { // 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$1, whitespace: whitespace, type: type$1, range: range, "enum": enumerable$1, pattern: pattern$1 }; var string = 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); }; var method = 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); }; var number = 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); }; var _boolean = 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); }; var regexp = 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); }; var integer = 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); }; var floatFn = 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); }; var array = function array(rule, value, callback, source, options) { var errors = []; var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field); if (validate) { if ((value === undefined || value === null) && !rule.required) { return callback(); } rules.required(rule, value, source, errors, options, 'array'); if (value !== undefined && value !== null) { rules.type(rule, value, source, errors, options); rules.range(rule, value, source, errors, options); } } callback(errors); }; var object = 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 = 'enum'; var enumerable = function enumerable(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](rule, value, source, errors, options); } } callback(errors); }; var pattern = function pattern(rule, value, callback, source, options) { var errors = []; var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field); if (validate) { if (isEmptyValue(value, 'string') && !rule.required) { return callback(); } rules.required(rule, value, source, errors, options); if (!isEmptyValue(value, 'string')) { rules.pattern(rule, value, source, errors, options); } } callback(errors); }; var date = 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); }; var required = function required(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); }; var type = function type(rule, value, callback, source, options) { var ruleType = rule.type; var errors = []; var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field); if (validate) { if (isEmptyValue(value, ruleType) && !rule.required) { return callback(); } rules.required(rule, value, source, errors, options, ruleType); if (!isEmptyValue(value, ruleType)) { rules.type(rule, value, source, errors, options); } } callback(errors); }; var any = function 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, pattern: pattern, date: date, url: type, hex: type, email: type, required: required, 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. */ var Schema = /*#__PURE__*/function () { // ========================= Static ========================= // ======================== Instance ======================== function Schema(descriptor) { this.rules = null; this._messages = messages; this.define(descriptor); } var _proto = Schema.prototype; _proto.define = function define(rules) { var _this = this; 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 = {}; Object.keys(rules).forEach(function (name) { var item = rules[name]; _this.rules[name] = Array.isArray(item) ? item : [item]; }); }; _proto.messages = function messages(_messages) { if (_messages) { this._messages = deepMerge(newMessages(), _messages); } return this._messages; }; _proto.validate = function validate(source_, o, oc) { var _this2 = this; if (o === void 0) { o = {}; } if (oc === void 0) { oc = function 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(null, source); } return Promise.resolve(source); } function complete(results) { var errors = []; var fields = {}; function add(e) { if (Array.isArray(e)) { var _errors; errors = (_errors = errors).concat.apply(_errors, e); } else { errors.push(e); } } for (var i = 0; i < results.length; i++) { add(results[i]); } if (!errors.length) { callback(null, source); } else { fields = convertFieldsError(errors); callback(errors, fields); } } if (options.messages) { var messages$1 = this.messages(); if (messages$1 === messages) { messages$1 = newMessages(); } deepMerge(messages$1, options.messages); options.messages = messages$1; } else { options.messages = this.messages(); } var series = {}; var keys = options.keys || Object.keys(this.rules); keys.forEach(function (z) { var arr = _this2.rules[z]; var value = source[z]; arr.forEach(function (r) { var rule = r; if (typeof rule.transform === 'function') { if (source === source_) { source = _extends({}, source); } value = source[z] = rule.transform(value); } if (typeof rule === 'function') { rule = { validator: rule }; } else { rule = _extends({}, rule); } // Fill validator. Skip if nothing need to validate rule.validator = _this2.getValidationMethod(rule); if (!rule.validator) { return; } rule.field = z; rule.fullField = rule.fullField || z; rule.type = _this2.getType(rule); series[z] = series[z] || []; series[z].push({ rule: 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({}, schema, { fullField: rule.fullField + "." + key, fullFields: rule.fullFields ? [].concat(rule.fullFields, [key]) : [key] }); } function cb(e) { if (e === void 0) { e = []; } var errorList = Array.isArray(e) ? e : [e]; if (!options.suppressWarning && errorList.length) { Schema.warning('async-validator:', errorList); } if (errorList.length && rule.message !== undefined) { errorList = [].concat(rule.message); } // Fill error info var filledErrors = errorList.map(complementError(rule, source)); if (options.first && filledErrors.length) { errorFields[rule.field] = 1; return doIt(filledErrors); } if (!deep) { doIt(filledErrors); } else { // if rule 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 !== undefined) { filledErrors = [].concat(rule.message).map(complementError(rule, source)); } else if (options.error) { filledErrors = [options.error(rule, format(options.messages.required, rule.field))]; } return doIt(filledErrors); } var fieldsSchema = {}; if (rule.defaultField) { Object.keys(data.value).map(function (key) { fieldsSchema[key] = rule.defaultField; }); } fieldsSchema = _extends({}, fieldsSchema, data.rule.fields); var paredFieldsSchema = {}; Object.keys(fieldsSchema).forEach(function (field) { var fieldSchema = fieldsSchema[field]; var fieldSchemaList = Array.isArray(fieldSchema) ? fieldSchema : [fieldSchema]; paredFieldsSchema[field] = fieldSchemaList.map(addFullField.bind(null, field)); }); var schema = new Schema(paredFieldsSchema); schema.messages(options.messages); if (data.rule.options) { data.rule.options.messages = options.messages; data.rule.options.error = options.error; } schema.validate(data.value, data.rule.options || options, function (errs) { var finalErrors = []; if (filledErrors && filledErrors.length) { finalErrors.push.apply(finalErrors, filledErrors); } if (errs && errs.length) { finalErrors.push.apply(finalErrors, errs); } doIt(finalErrors.length ? finalErrors : null); }); } } var res; if (rule.asyncValidator) { res = rule.asyncValidator(rule, data.value, cb, data.source, options); } else if (rule.validator) { res = rule.validator(rule, data.value, cb, data.source, options); if (res === true) { cb(); } else if (res === false) { cb(typeof rule.message === 'function' ? rule.message(rule.fullField || rule.field) : rule.message || (rule.fullField || rule.field) + " fails"); } else if (res instanceof Array) { cb(res); } else if (res instanceof Error) { cb(res.message); } } if (res && res.then) { res.then(function () { return cb(); }, function (e) { return cb(e); }); } }, function (results) { complete(results); }, source); }; _proto.getType = function getType(rule) { if (rule.type === 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'; }; _proto.getValidationMethod = function getValidationMethod(rule) { if (typeof rule.validator === 'function') { return rule.validator; } var keys = Object.keys(rule); var messageIndex = keys.indexOf('message'); if (messageIndex !== -1) { keys.splice(messageIndex, 1); } if (keys.length === 1 && keys[0] === 'required') { return validators.required; } return validators[this.getType(rule)] || undefined; }; return Schema; }(); 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 script$X = 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$1(); 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 || 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 || 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, fields) => { var _a; validateState.value = !errors ? "success" : "error"; validateMessage.value = errors ? errors[0].message || `${props.prop} is required` : ""; callback(validateMessage.value, errors ? fields : {}); (_a = elForm.emit) == null ? void 0 : _a.call(elForm, "validate", props.prop, !errors, validateMessage.value || null); }); }; const clearValidate = () => { validateState.value = ""; validateMessage.value = ""; }; const resetField = () => { 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; } vue.nextTick(() => { clearValidate(); }); }; 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) => ({ ...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({ ...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$D = ["for"]; function render$Q(_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$D)) : 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$X.render = render$Q; script$X.__file = "packages/components/form/src/form-item.vue"; const ElForm = withInstall(script$Y, { FormItem: script$X }); const ElFormItem = withNoopInstall(script$X); const imageViewerProps = buildProps({ urlList: { type: definePropType(Array), default: () => mutable([]) }, zIndex: { type: Number, default: 2e3 }, initialIndex: { type: Number, default: 0 }, infinite: { type: Boolean, default: true }, hideOnClickModal: { type: Boolean, default: false } }); const imageViewerEmits = { close: () => true, switch: (index) => typeof index === "number" }; const Mode = { CONTAIN: { name: "contain", icon: FullScreen }, ORIGINAL: { name: "original", icon: ScaleToOriginal } }; const mousewheelEventName = isFirefox() ? "DOMMouseScroll" : "mousewheel"; var script$W = vue.defineComponent({ name: "ElImageViewer", components: { ElIcon: ElIcon$1, Close, ArrowLeft, ArrowRight, ZoomOut, ZoomIn, RefreshLeft, RefreshRight }, props: imageViewerProps, emits: imageViewerEmits, setup(props, { emit }) { const { t } = useLocaleInject(); const wrapper = vue.ref(); const img = vue.ref(); const scopeEventListener = vue.effectScope(); const loading = vue.ref(true); const index = vue.ref(props.initialIndex); 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() { unregisterEventListener(); emit("close"); } function registerEventListener() { const 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; } }); const 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 }); } }); scopeEventListener.run(() => { useEventListener(document, "keydown", keydownHandler); useEventListener(document, mousewheelEventName, mousewheelHandler); }); } function unregisterEventListener() { scopeEventListener.stop(); } function handleImgLoad() { loading.value = false; } function handleImgError(e) { loading.value = false; e.target.alt = t("el.image.error"); } function handleMouseDown(e) { if (loading.value || e.button !== 0 || !wrapper.value) return; 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; const dragHandler = rafThrottle((ev) => { transform.value = { ...transform.value, offsetX: offsetX + ev.pageX - startX, offsetY: offsetY + ev.pageY - startY }; }); const removeMousemove = useEventListener(document, "mousemove", dragHandler); useEventListener(document, "mouseup", (evt) => { const mouseX = evt.pageX; const mouseY = evt.pageY; if (mouseX < divLeft || mouseX > divRight || mouseY < divTop || mouseY > divBottom) { reset(); } removeMousemove(); }); e.preventDefault(); } function reset() { transform.value = { scale: 1, deg: 0, offsetX: 0, offsetY: 0, enableTransition: false }; } function toggleMode() { if (loading.value) return; const modeNames = 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 } = { 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 "clockwise": transform.value.deg += rotateDeg; break; case "anticlockwise": transform.value.deg -= rotateDeg; break; } transform.value.enableTransition = enableTransition; } vue.watch(currentImg, () => { vue.nextTick(() => { const $img = img.value; if (!($img == null ? void 0 : $img.complete)) { loading.value = true; } }); }); vue.watch(index, (val) => { reset(); emit("switch", val); }); vue.onMounted(() => { var _a, _b; registerEventListener(); (_b = (_a = wrapper.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a); }); return { index, wrapper, img, isSingle, isFirst, isLast, currentImg, imgStyle, mode, handleActions, prev, next, hide, toggleMode, handleImgLoad, handleImgError, handleMouseDown }; } }); const _hoisted_1$C = { class: "el-image-viewer__btn el-image-viewer__actions" }; const _hoisted_2$t = { class: "el-image-viewer__actions__inner" }; const _hoisted_3$n = /* @__PURE__ */ vue.createElementVNode("i", { class: "el-image-viewer__actions__divider" }, null, -1); const _hoisted_4$f = /* @__PURE__ */ vue.createElementVNode("i", { class: "el-image-viewer__actions__divider" }, null, -1); const _hoisted_5$b = { class: "el-image-viewer__canvas" }; const _hoisted_6$9 = ["src"]; function render$P(_ctx, _cache, $props, $setup, $data, $options) { const _component_close = vue.resolveComponent("close"); const _component_el_icon = vue.resolveComponent("el-icon"); const _component_arrow_left = vue.resolveComponent("arrow-left"); const _component_arrow_right = vue.resolveComponent("arrow-right"); const _component_zoom_out = vue.resolveComponent("zoom-out"); const _component_zoom_in = vue.resolveComponent("zoom-in"); const _component_refresh_left = vue.resolveComponent("refresh-left"); const _component_refresh_right = vue.resolveComponent("refresh-right"); 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)) }, [ vue.createVNode(_component_el_icon, null, { default: vue.withCtx(() => [ vue.createVNode(_component_close) ]), _: 1 }) ]), 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)) }, [ vue.createVNode(_component_el_icon, null, { default: vue.withCtx(() => [ vue.createVNode(_component_arrow_left) ]), _: 1 }) ], 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)) }, [ vue.createVNode(_component_el_icon, null, { default: vue.withCtx(() => [ vue.createVNode(_component_arrow_right) ]), _: 1 }) ], 2) ], 64)) : vue.createCommentVNode("v-if", true), vue.createCommentVNode(" ACTIONS "), vue.createElementVNode("div", _hoisted_1$C, [ vue.createElementVNode("div", _hoisted_2$t, [ vue.createVNode(_component_el_icon, { onClick: _cache[4] || (_cache[4] = ($event) => _ctx.handleActions("zoomOut")) }, { default: vue.withCtx(() => [ vue.createVNode(_component_zoom_out) ]), _: 1 }), vue.createVNode(_component_el_icon, { onClick: _cache[5] || (_cache[5] = ($event) => _ctx.handleActions("zoomIn")) }, { default: vue.withCtx(() => [ vue.createVNode(_component_zoom_in) ]), _: 1 }), _hoisted_3$n, vue.createVNode(_component_el_icon, { onClick: _ctx.toggleMode }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.mode.icon))) ]), _: 1 }, 8, ["onClick"]), _hoisted_4$f, vue.createVNode(_component_el_icon, { onClick: _cache[6] || (_cache[6] = ($event) => _ctx.handleActions("anticlockwise")) }, { default: vue.withCtx(() => [ vue.createVNode(_component_refresh_left) ]), _: 1 }), vue.createVNode(_component_el_icon, { onClick: _cache[7] || (_cache[7] = ($event) => _ctx.handleActions("clockwise")) }, { default: vue.withCtx(() => [ vue.createVNode(_component_refresh_right) ]), _: 1 }) ]) ]), vue.createCommentVNode(" CANVAS "), vue.createElementVNode("div", _hoisted_5$b, [ (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[8] || (_cache[8] = (...args) => _ctx.handleImgLoad && _ctx.handleImgLoad(...args)), onError: _cache[9] || (_cache[9] = (...args) => _ctx.handleImgError && _ctx.handleImgError(...args)), onMousedown: _cache[10] || (_cache[10] = (...args) => _ctx.handleMouseDown && _ctx.handleMouseDown(...args)) }, null, 44, _hoisted_6$9)), [ [vue.vShow, i === _ctx.index] ]); }), 128)) ]), vue.renderSlot(_ctx.$slots, "default") ], 4) ]), _: 3 }); } script$W.render = render$P; script$W.__file = "packages/components/image-viewer/src/image-viewer.vue"; const ElImageViewer = withInstall(script$W); const imageProps = buildProps({ appendToBody: { type: Boolean, default: false }, hideOnClickModal: { type: Boolean, default: false }, src: { type: String, default: "" }, fit: { type: String, values: ["", "contain", "cover", "fill", "none", "scale-down"], default: "" }, lazy: { type: Boolean, default: false }, scrollContainer: { type: definePropType([String, Object]) }, previewSrcList: { type: definePropType(Array), default: () => mutable([]) }, zIndex: { type: Number, default: 2e3 }, initialIndex: { type: Number, default: 0 } }); const imageEmits = { error: (evt) => evt instanceof Event, switch: (val) => isNumber(val), close: () => true }; const isHtmlElement = (e) => e && e.nodeType === Node.ELEMENT_NODE; let prevOverflow = ""; var script$V = vue.defineComponent({ name: "ElImage", components: { ImageViewer: ElImageViewer }, inheritAttrs: false, props: imageProps, emits: imageEmits, setup(props, { emit, attrs: rawAttrs }) { 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(); const _scrollContainer = vue.ref(); let stopScrollListener; let stopWheelListener; const containerStyle = vue.computed(() => rawAttrs.style); const imageStyle = vue.computed(() => { const { fit } = props; if (!isServer && fit) { return { objectFit: fit }; } return {}; }); const preview = vue.computed(() => { const { previewSrcList } = props; return Array.isArray(previewSrcList) && previewSrcList.length > 0; }); const imageIndex = vue.computed(() => { const { src, previewSrcList, initialIndex } = props; let previewIndex = initialIndex; const srcIndex = previewSrcList.indexOf(src); if (srcIndex >= 0) { previewIndex = srcIndex; } return previewIndex; }); const loadImage = () => { if (isServer) return; loading.value = true; hasLoadError.value = false; const img = new Image(); img.addEventListener("load", (e) => handleLoad(e, img)); img.addEventListener("error", handleError); Object.entries(attrs.value).forEach(([key, value]) => { if (key.toLowerCase() === "onload") return; 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(event) { loading.value = false; hasLoadError.value = true; emit("error", event); } function handleLazyLoad() { if (isInContainer(container.value, _scrollContainer.value)) { loadImage(); removeLazyLoadListener(); } } const lazyLoadHandler = useThrottleFn(handleLazyLoad, 200); async function addLazyLoadListener() { var _a; if (isServer) return; await vue.nextTick(); const { scrollContainer } = props; if (isHtmlElement(scrollContainer)) { _scrollContainer.value = scrollContainer; } else if (isString$1(scrollContainer) && scrollContainer !== "") { _scrollContainer.value = (_a = document.querySelector(scrollContainer)) != null ? _a : void 0; } else if (container.value) { _scrollContainer.value = getScrollContainer(container.value); } if (_scrollContainer.value) { stopScrollListener = useEventListener(_scrollContainer, "scroll", lazyLoadHandler); setTimeout(() => handleLazyLoad(), 100); } } function removeLazyLoadListener() { if (isServer || !_scrollContainer.value || !lazyLoadHandler) return; stopScrollListener(); _scrollContainer.value = void 0; } function wheelHandler(e) { if (!e.ctrlKey) return; if (e.deltaY < 0) { e.preventDefault(); return false; } else if (e.deltaY > 0) { e.preventDefault(); return false; } } function clickHandler() { if (!preview.value) return; stopWheelListener = useEventListener("wheel", wheelHandler, { passive: false }); prevOverflow = document.body.style.overflow; document.body.style.overflow = "hidden"; showViewer.value = true; } function closeViewer() { stopWheelListener == null ? void 0 : stopWheelListener(); document.body.style.overflow = prevOverflow; showViewer.value = false; emit("close"); } function switchViewer(val) { emit("switch", val); } vue.watch(() => props.src, () => { if (props.lazy) { loading.value = true; hasLoadError.value = false; removeLazyLoadListener(); addLazyLoadListener(); } else { loadImage(); } }); vue.onMounted(() => { if (props.lazy) { addLazyLoadListener(); } else { loadImage(); } }); return { attrs, loading, hasLoadError, showViewer, containerStyle, imageStyle, preview, imageIndex, container, clickHandler, closeViewer, switchViewer, t }; } }); const _hoisted_1$B = /* @__PURE__ */ vue.createElementVNode("div", { class: "el-image__placeholder" }, null, -1); const _hoisted_2$s = { class: "el-image__error" }; const _hoisted_3$m = ["src"]; const _hoisted_4$e = { key: 0 }; function render$O(_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.containerStyle) }, [ _ctx.loading ? vue.renderSlot(_ctx.$slots, "placeholder", { key: 0 }, () => [ _hoisted_1$B ]) : _ctx.hasLoadError ? vue.renderSlot(_ctx.$slots, "error", { key: 1 }, () => [ vue.createElementVNode("div", _hoisted_2$s, 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__preview": _ctx.preview }, onClick: _cache[0] || (_cache[0] = (...args) => _ctx.clickHandler && _ctx.clickHandler(...args)) }), null, 16, _hoisted_3$m)), (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$V.render = render$O; script$V.__file = "packages/components/image/src/image.vue"; const ElImage = withInstall(script$V); const inputNumberProps = buildProps({ step: { type: Number, default: 1 }, stepStrictly: { type: Boolean, default: false }, max: { type: Number, default: Infinity }, min: { type: Number, default: -Infinity }, modelValue: { type: Number, required: true }, disabled: { type: Boolean, default: false }, size: { type: String, values: componentSize }, controls: { type: Boolean, default: true }, controlsPosition: { type: String, default: "", values: ["", "right"] }, name: String, label: String, placeholder: String, precision: { type: Number, validator: (val) => val >= 0 && val === parseInt(`${val}`, 10) } }); const inputNumberEmits = { change: (prev, cur) => prev !== cur, blur: (e) => e instanceof FocusEvent, focus: (e) => e instanceof FocusEvent, input: (val) => isNumber(val), "update:modelValue": (val) => isNumber(val) }; var script$U = vue.defineComponent({ name: "ElInputNumber", components: { ElInput: ElInput$1, ElIcon, ArrowUp, ArrowDown, Plus, Minus }, directives: { RepeatClick }, props: inputNumberProps, emits: inputNumberEmits, setup(props, { emit }) { const input = vue.ref(); const data = vue.reactive({ currentValue: props.modelValue, userInput: null }); const minDisabled = vue.computed(() => _decrease(props.modelValue) < props.min); const maxDisabled = vue.computed(() => _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 { size: inputNumberSize, disabled: inputNumberDisabled } = useFormItem({}); const displayValue = vue.computed(() => { if (data.userInput !== null) { return data.userInput; } let currentValue = data.currentValue; if (isNumber(currentValue)) { if (Number.isNaN(currentValue)) return ""; 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 (!isNumber(val)) return data.currentValue; const precisionFactor = Math.pow(10, numPrecision.value); val = isNumber(val) ? val : NaN; return toPrecision((precisionFactor * val + precisionFactor * props.step) / precisionFactor); }; const _decrease = (val) => { if (!isNumber(val)) return data.currentValue; const precisionFactor = Math.pow(10, numPrecision.value); val = isNumber(val) ? val : NaN; 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; if (!isNumber(newVal)) { newVal = NaN; } 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 = Number(value); if (isNumber(newVal) && !Number.isNaN(newVal) || value === "") { setCurrentValue(newVal); } data.userInput = null; }; const focus = () => { var _a, _b; (_b = (_a = input.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a); }; const blur = () => { var _a, _b; (_b = (_a = input.value) == null ? void 0 : _a.blur) == null ? void 0 : _b.call(_a); }; vue.watch(() => props.modelValue, (value) => { let newVal = 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(() => { var _a; const innerInput = (_a = input.value) == null ? void 0 : _a.input; innerInput.setAttribute("role", "spinbutton"); innerInput.setAttribute("aria-valuemax", String(props.max)); innerInput.setAttribute("aria-valuemin", String(props.min)); innerInput.setAttribute("aria-valuenow", String(data.currentValue)); innerInput.setAttribute("aria-disabled", String(inputNumberDisabled.value)); if (!isNumber(props.modelValue)) { emit("update:modelValue", Number(props.modelValue)); } }); vue.onUpdated(() => { var _a; const innerInput = (_a = input.value) == null ? void 0 : _a.input; innerInput.setAttribute("aria-valuenow", data.currentValue); }); return { input, displayValue, handleInput, handleInputChange, controlsAtRight, decrease, increase, inputNumberSize, inputNumberDisabled, maxDisabled, minDisabled, focus, blur }; } }); function render$N(_ctx, _cache, $props, $setup, $data, $options) { const _component_arrow_down = vue.resolveComponent("arrow-down"); const _component_minus = vue.resolveComponent("minus"); const _component_el_icon = vue.resolveComponent("el-icon"); const _component_arrow_up = vue.resolveComponent("arrow-up"); const _component_plus = vue.resolveComponent("plus"); 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.createVNode(_component_el_icon, null, { default: vue.withCtx(() => [ _ctx.controlsAtRight ? (vue.openBlock(), vue.createBlock(_component_arrow_down, { key: 0 })) : (vue.openBlock(), vue.createBlock(_component_minus, { key: 1 })) ]), _: 1 }) ], 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.createVNode(_component_el_icon, null, { default: vue.withCtx(() => [ _ctx.controlsAtRight ? (vue.openBlock(), vue.createBlock(_component_arrow_up, { key: 0 })) : (vue.openBlock(), vue.createBlock(_component_plus, { key: 1 })) ]), _: 1 }) ], 34)), [ [_directive_repeat_click, _ctx.increase] ]) : vue.createCommentVNode("v-if", true), vue.createVNode(_component_el_input, { ref: "input", type: "number", "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$U.render = render$N; script$U.__file = "packages/components/input-number/src/input-number.vue"; const ElInputNumber = withInstall(script$U); const linkProps = buildProps({ type: { type: String, values: ["primary", "success", "warning", "info", "danger", "default"], default: "default" }, underline: { type: Boolean, default: true }, disabled: { type: Boolean, default: false }, href: { type: String, default: "" }, icon: { type: definePropType([String, Object]), default: "" } }); const linkEmits = { click: (evt) => evt instanceof MouseEvent }; var script$T = vue.defineComponent({ name: "ElLink", components: { ElIcon }, props: linkProps, emits: linkEmits, setup(props, { emit }) { function handleClick(event) { if (!props.disabled) emit("click", event); } return { handleClick }; } }); const _hoisted_1$A = ["href"]; const _hoisted_2$r = { key: 1, class: "el-link--inner" }; function render$M(_ctx, _cache, $props, $setup, $data, $options) { const _component_el_icon = vue.resolveComponent("el-icon"); 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.createBlock(_component_el_icon, { key: 0 }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon))) ]), _: 1 })) : vue.createCommentVNode("v-if", true), _ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$r, [ 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$A); } script$T.render = render$M; script$T.__file = "packages/components/link/src/link.vue"; const ElLink = withInstall(script$T); class SubMenu$1 { constructor(parent, domNode) { this.parent = parent; this.domNode = domNode; this.subIndex = 0; this.subIndex = 0; this.init(); } init() { this.subMenuItems = this.domNode.querySelectorAll("li"); this.addListeners(); } gotoSubIndex(idx) { if (idx === this.subMenuItems.length) { idx = 0; } else if (idx < 0) { idx = this.subMenuItems.length - 1; } this.subMenuItems[idx].focus(); this.subIndex = idx; } addListeners() { const parentNode = this.parent.domNode; Array.prototype.forEach.call(this.subMenuItems, (el) => { el.addEventListener("keydown", (event) => { let prevDef = false; switch (event.code) { case EVENT_CODE.down: { this.gotoSubIndex(this.subIndex + 1); prevDef = true; break; } case EVENT_CODE.up: { this.gotoSubIndex(this.subIndex - 1); prevDef = true; break; } case EVENT_CODE.tab: { triggerEvent(parentNode, "mouseleave"); break; } case EVENT_CODE.enter: case EVENT_CODE.space: { prevDef = true; event.currentTarget.click(); break; } } if (prevDef) { event.preventDefault(); event.stopPropagation(); } return false; }); }); } } 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$1(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$S = vue.defineComponent({ name: "ElMenuCollapseTransition", setup() { const listeners = { onBeforeEnter: (el) => el.style.opacity = "0.2", onEnter(el, done) { addClass(el, "el-opacity-transition"); el.style.opacity = "1"; done(); }, onAfterEnter(el) { removeClass(el, "el-opacity-transition"); el.style.opacity = ""; }, onBeforeLeave(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"; }, onLeave(el) { addClass(el, "horizontal-collapse-transition"); el.style.width = `${el.dataset.scrollWidth}px`; } }; return { listeners }; } }); function render$L(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createBlock(vue.Transition, vue.mergeProps({ mode: "out-in" }, _ctx.listeners), { default: vue.withCtx(() => [ vue.renderSlot(_ctx.$slots, "default") ]), _: 3 }, 16); } script$S.render = render$L; script$S.__file = "packages/components/menu/src/menu-collapse-transition.vue"; function useMenu(instance, currentIndex) { const rootMenu = vue.inject("rootMenu"); if (!rootMenu) throwError("useMenu", "can not inject root menu"); const indexPath = vue.computed(() => { let parent = instance.parent; const path = [currentIndex.value]; while (parent.type.name !== "ElMenu") { if (parent.props.index) { path.unshift(parent.props.index); } parent = parent.parent; } return path; }); const parentMenu = vue.computed(() => { let parent = instance.parent; while (parent && !["ElMenu", "ElSubMenu"].includes(parent.type.name)) { parent = parent.parent; } return parent; }); 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 calcColorChannels(c) { let rawColor = c.replace("#", ""); if (/^[0-9a-fA-F]{3}$/.test(rawColor)) { rawColor = rawColor[0].repeat(2) + rawColor[1].repeat(2) + rawColor[2].repeat(2); } 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) }; } 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 { const value = Math.abs(percent); red += (255 - red) * Math.abs(percent); green += (255 - green) * value; blue += (255 - blue) * value; } return `rgb(${Math.round(red)}, ${Math.round(green)}, ${Math.round(blue)})`; } function darken(color, percent = 0.2) { return mixColor(color, percent); } function useMenuColor(props) { const menuBarColor = vue.computed(() => { const color = props.backgroundColor; if (!color) { return ""; } else { return darken(color); } }); 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 || "" }; }); }; const subMenuProps = buildProps({ index: { type: String, required: true }, showTimeout: { type: Number, default: 300 }, hideTimeout: { type: Number, default: 300 }, popperClass: String, disabled: Boolean, popperAppendToBody: { type: Boolean, default: void 0 } }); const COMPONENT_NAME$2 = "ElSubMenu"; var SubMenu = vue.defineComponent({ name: COMPONENT_NAME$2, props: subMenuProps, setup(props, { slots, expose }) { const instance = vue.getCurrentInstance(); const { paddingStyle, indexPath, parentMenu } = useMenu(instance, vue.computed(() => props.index)); const rootMenu = vue.inject("rootMenu"); if (!rootMenu) throwError(COMPONENT_NAME$2, "can not inject root menu"); const subMenu = vue.inject(`subMenu:${parentMenu.value.uid}`); if (!subMenu) throwError(COMPONENT_NAME$2, "can not inject sub menu"); const items = vue.ref({}); const subMenus = vue.ref({}); let timeout; const currentPlacement = vue.ref(""); const mouseInChild = vue.ref(false); const verticalTitleRef = vue.ref(); const vPopper = vue.ref(); const subMenuTitleIcon = vue.computed(() => { return mode.value === "horizontal" && isFirstLevel.value || mode.value === "vertical" && !rootMenu.props.collapse ? ArrowDown : ArrowRight; }); 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(() => rootMenu.props.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(() => rootMenu.openedMenus.includes(props.index)); const active = vue.computed(() => { let isActive = false; Object.values(items.value).forEach((item2) => { if (item2.active) { isActive = true; } }); Object.values(subMenus.value).forEach((subItem) => { if (subItem.active) { isActive = true; } }); return isActive; }); const backgroundColor = vue.computed(() => rootMenu.props.backgroundColor || ""); const activeTextColor = vue.computed(() => rootMenu.props.activeTextColor || ""); const textColor = vue.computed(() => rootMenu.props.textColor || ""); const mode = vue.computed(() => rootMenu.props.mode); const item = vue.reactive({ index: props.index, indexPath, active }); const titleStyle = vue.computed(() => { if (mode.value !== "horizontal") { return { color: textColor.value }; } return { borderBottomColor: active.value ? rootMenu.props.activeTextColor ? activeTextColor.value : "" : "transparent", color: active.value ? activeTextColor.value : textColor.value }; }); const doDestroy = () => { var _a; return (_a = vPopper.value) == null ? void 0 : _a.doDestroy(); }; const handleCollapseToggle = (value) => { if (value) { updatePlacement(); } else { doDestroy(); } }; const handleClick = () => { if (rootMenu.props.menuTrigger === "hover" && rootMenu.props.mode === "horizontal" || rootMenu.props.collapse && rootMenu.props.mode === "vertical" || props.disabled) return; rootMenu.handleSubMenuClick({ index: props.index, indexPath: indexPath.value, active: active.value }); }; const handleMouseenter = (event, showTimeout = props.showTimeout) => { var _a; if (event.type === "focus" && !event.relatedTarget) { return; } if (rootMenu.props.menuTrigger === "click" && rootMenu.props.mode === "horizontal" || !rootMenu.props.collapse && rootMenu.props.mode === "vertical" || props.disabled) { return; } mouseInChild.value = true; timeout == null ? void 0 : timeout(); ({ stop: timeout } = useTimeoutFn(() => rootMenu.openMenu(props.index, indexPath.value), showTimeout)); if (appendToBody.value) { (_a = parentMenu.value.vnode.el) == null ? void 0 : _a.dispatchEvent(new MouseEvent("mouseenter")); } }; const handleMouseleave = (deepDispatch = false) => { var _a, _b; if (rootMenu.props.menuTrigger === "click" && rootMenu.props.mode === "horizontal" || !rootMenu.props.collapse && rootMenu.props.mode === "vertical") { return; } mouseInChild.value = false; timeout == null ? void 0 : timeout(); ({ stop: timeout } = useTimeoutFn(() => !mouseInChild.value && rootMenu.closeMenu(props.index, indexPath.value), props.hideTimeout)); if (appendToBody.value && deepDispatch) { if (((_a = instance.parent) == null ? void 0 : _a.type.name) === "ElSubMenu") { (_b = subMenu.handleMouseleave) == null ? void 0 : _b.call(subMenu, true); } } }; const updatePlacement = () => { currentPlacement.value = mode.value === "horizontal" && isFirstLevel.value ? "bottom-start" : "right-start"; }; vue.watch(() => rootMenu.props.collapse, (value) => handleCollapseToggle(Boolean(value))); { const addSubMenu = (item2) => { subMenus.value[item2.index] = item2; }; const removeSubMenu = (item2) => { delete subMenus.value[item2.index]; }; vue.provide(`subMenu:${instance.uid}`, { addSubMenu, removeSubMenu, handleMouseleave }); } expose({ opened }); vue.onMounted(() => { rootMenu.addSubMenu(item); subMenu.addSubMenu(item); updatePlacement(); }); vue.onBeforeUnmount(() => { subMenu.removeSubMenu(item); rootMenu.removeSubMenu(item); }); return () => { var _a; const titleTag = [ (_a = slots.title) == null ? void 0 : _a.call(slots), vue.h(ElIcon, { class: ["el-sub-menu__icon-arrow"] }, { default: () => vue.h(subMenuTitleIcon.value) }) ]; const ulStyle = useMenuCssVar(rootMenu.props); const child = rootMenu.isMenuPopup ? vue.h(ElPopper, { ref: vPopper, manualMode: true, visible: opened.value, effect: "light", pure: true, offset: 6, showArrow: false, popperClass: props.popperClass, placement: currentPlacement.value, appendToBody: appendToBody.value, fallbackPlacements: fallbackPlacements.value, transition: menuTransitionName.value, gpuAcceleration: false }, { default: () => { var _a2; return vue.h("div", { class: [`el-menu--${mode.value}`, props.popperClass], onMouseenter: (evt) => handleMouseenter(evt, 100), onMouseleave: () => handleMouseleave(true), onFocus: (evt) => handleMouseenter(evt, 100) }, [ vue.h("ul", { class: [ "el-menu el-menu--popup", `el-menu--popup-${currentPlacement.value}` ], style: ulStyle.value }, [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)]) ]); }, trigger: () => vue.h("div", { class: "el-sub-menu__title", style: [ paddingStyle.value, titleStyle.value, { backgroundColor: backgroundColor.value } ], onClick: handleClick }, titleTag) }) : vue.h(vue.Fragment, {}, [ vue.h("div", { class: "el-sub-menu__title", style: [ paddingStyle.value, titleStyle.value, { backgroundColor: backgroundColor.value } ], ref: verticalTitleRef, onClick: handleClick }, titleTag), vue.h(_CollapseTransition, {}, { default: () => { var _a2; return vue.withDirectives(vue.h("ul", { role: "menu", class: "el-menu el-menu--inline", style: ulStyle.value }, [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)]), [[vue.vShow, opened.value]]); } }) ]); return vue.h("li", { class: [ "el-sub-menu", { "is-active": active.value, "is-opened": opened.value, "is-disabled": props.disabled } ], role: "menuitem", ariaHaspopup: true, ariaExpanded: opened.value, onMouseenter: handleMouseenter, onMouseleave: () => handleMouseleave(true), onFocus: handleMouseenter }, [child]); }; } }); const menuProps = buildProps({ mode: { type: String, values: ["horizontal", "vertical"], default: "vertical" }, defaultActive: { type: String, default: "" }, defaultOpeneds: { type: definePropType(Array), default: () => mutable([]) }, uniqueOpened: Boolean, router: Boolean, menuTrigger: { type: String, values: ["hover", "click"], default: "hover" }, collapse: Boolean, backgroundColor: String, textColor: String, activeTextColor: String, collapseTransition: { type: Boolean, default: true }, ellipsis: { type: Boolean, default: true } }); const checkIndexPath = (indexPath) => Array.isArray(indexPath) && indexPath.every((path) => isString$1(path)); const menuEmits = { close: (index, indexPath) => isString$1(index) && checkIndexPath(indexPath), open: (index, indexPath) => isString$1(index) && checkIndexPath(indexPath), select: (index, indexPath, item, routerResult) => isString$1(index) && checkIndexPath(indexPath) && isObject$a(item) && (routerResult === void 0 || routerResult instanceof Promise) }; var Menu = vue.defineComponent({ name: "ElMenu", props: menuProps, emits: menuEmits, setup(props, { emit, slots, expose }) { const instance = vue.getCurrentInstance(); const router = instance.appContext.config.globalProperties.$router; const menu = vue.ref(); const openedMenus = vue.ref(props.defaultOpeneds && !props.collapse ? props.defaultOpeneds.slice(0) : []); const activeIndex = vue.ref(props.defaultActive); const items = vue.ref({}); const subMenus = vue.ref({}); const alteredCollapse = vue.ref(false); const isMenuPopup = vue.computed(() => { return props.mode === "horizontal" || props.mode === "vertical" && props.collapse; }); const initMenu = () => { const activeItem = activeIndex.value && items.value[activeIndex.value]; if (!activeItem || props.mode === "horizontal" || props.collapse) return; const indexPath = activeItem.indexPath; indexPath.forEach((index) => { const subMenu = subMenus.value[index]; subMenu && openMenu(index, subMenu.indexPath); }); }; const openMenu = (index, indexPath) => { if (openedMenus.value.includes(index)) return; if (props.uniqueOpened) { openedMenus.value = openedMenus.value.filter((index2) => indexPath.includes(index2)); } openedMenus.value.push(index); emit("open", index, indexPath); }; const closeMenu = (index, indexPath) => { const i = openedMenus.value.indexOf(index); if (i !== -1) { openedMenus.value.splice(i, 1); } emit("close", index, indexPath); }; const handleSubMenuClick = ({ index, indexPath }) => { const isOpened = openedMenus.value.includes(index); if (isOpened) { closeMenu(index, indexPath); } else { openMenu(index, indexPath); } }; const handleMenuItemClick = (menuItem) => { if (props.mode === "horizontal" || props.collapse) { openedMenus.value = []; } const { index, indexPath } = menuItem; if (index === void 0 || indexPath === void 0) return; if (props.router && router) { const route = menuItem.route || index; const routerResult = router.push(route).then((res) => { if (!res) activeIndex.value = index; return res; }); emit("select", index, indexPath, { index, indexPath, route }, routerResult); } else { activeIndex.value = index; emit("select", index, indexPath, { index, indexPath }); } }; const updateActiveIndex = (val) => { const itemsInData = items.value; const item = itemsInData[val] || activeIndex.value && itemsInData[activeIndex.value] || itemsInData[props.defaultActive]; if (item) { activeIndex.value = item.index; initMenu(); } else { if (!alteredCollapse.value) { activeIndex.value = void 0; } else { alteredCollapse.value = false; } } }; const handleResize = () => { vue.nextTick(() => instance.proxy.$forceUpdate()); }; vue.watch(() => props.defaultActive, (currentActive) => { if (!items.value[currentActive]) { activeIndex.value = ""; } updateActiveIndex(currentActive); }); vue.watch(items.value, () => initMenu()); vue.watch(() => props.collapse, (value, prev) => { if (value !== prev) { alteredCollapse.value = true; } if (value) openedMenus.value = []; }); { const addSubMenu = (item) => { subMenus.value[item.index] = item; }; const removeSubMenu = (item) => { delete subMenus.value[item.index]; }; const addMenuItem = (item) => { items.value[item.index] = item; }; const removeMenuItem = (item) => { delete items.value[item.index]; }; vue.provide("rootMenu", vue.reactive({ props, openedMenus, items, subMenus, activeIndex, isMenuPopup, addMenuItem, removeMenuItem, addSubMenu, removeSubMenu, openMenu, closeMenu, handleMenuItemClick, handleSubMenuClick })); vue.provide(`subMenu:${instance.uid}`, { addSubMenu, removeSubMenu }); } vue.onMounted(() => { initMenu(); if (props.mode === "horizontal") { new Menu$1(instance.vnode.el); } }); { const open = (index) => { const { indexPath } = subMenus.value[index]; indexPath.forEach((i) => openMenu(i, indexPath)); }; expose({ open, close: closeMenu, handleResize }); } const flattedChildren = (children) => { const vnodes = Array.isArray(children) ? children : [children]; const result = []; vnodes.forEach((child) => { if (Array.isArray(child.children)) { result.push(...flattedChildren(child.children)); } else { result.push(child); } }); return result; }; 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 vShowMore = []; 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 slotDefault = originalSlot.slice(0, sliceIndex); const slotMore = originalSlot.slice(sliceIndex); if ((slotMore == null ? void 0 : slotMore.length) && props.ellipsis) { slot = slotDefault; vShowMore.push(vue.h(SubMenu, { index: "sub-menu-more", class: "el-sub-menu__hide-arrow" }, { title: () => vue.h(ElIcon$1, { class: ["el-sub-menu__icon-more"] }, { default: () => vue.h(More) }), default: () => slotMore })); } } const ulStyle = useMenuCssVar(props); const resizeMenu = (vNode) => props.ellipsis ? useVNodeResize(vNode) : vNode; const vMenu = resizeMenu(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) => resizeMenu(vnode)), ...vShowMore])); if (props.collapseTransition && props.mode === "vertical") { return vue.h(script$S, () => vMenu); } return vMenu; }; } }); var Tooltip = vue.defineComponent({ name: "ElTooltip", components: { ElPopper }, props: { ...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(ElPopper, { ...Object.keys(popperDefaultProps).reduce((result, key) => { return { ...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; const menuItemProps = buildProps({ index: { type: definePropType([String, null]), default: null }, route: { type: definePropType([String, Object]) }, disabled: Boolean }); const menuItemEmits = { click: (item) => isString$1(item.index) && Array.isArray(item.indexPath) }; const COMPONENT_NAME$1 = "ElMenuItem"; var script$R = vue.defineComponent({ name: COMPONENT_NAME$1, components: { ElTooltip: _Tooltip }, props: menuItemProps, emits: menuItemEmits, setup(props, { emit }) { const instance = vue.getCurrentInstance(); const rootMenu = vue.inject("rootMenu"); if (!rootMenu) throwError(COMPONENT_NAME$1, "can not inject root menu"); const { parentMenu, paddingStyle, indexPath } = useMenu(instance, vue.toRef(props, "index")); const subMenu = vue.inject(`subMenu:${parentMenu.value.uid}`); if (!subMenu) throwError(COMPONENT_NAME$1, "can not inject sub menu"); const active = vue.computed(() => props.index === rootMenu.activeIndex); const item = vue.reactive({ index: props.index, indexPath, active }); const handleClick = () => { if (!props.disabled) { rootMenu.handleMenuItemClick({ index: props.index, indexPath: indexPath.value, route: props.route }); emit("click", item); } }; vue.onMounted(() => { subMenu.addSubMenu(item); rootMenu.addMenuItem(item); }); vue.onBeforeUnmount(() => { subMenu.removeSubMenu(item); rootMenu.removeMenuItem(item); }); return { Effect: exports.Effect, parentMenu, rootMenu, paddingStyle, active, handleClick }; } }); const _hoisted_1$z = { style: { position: "absolute", left: 0, top: 0, height: "100%", width: "100%", display: "inline-block", boxSizing: "border-box", padding: "0 20px" } }; function render$K(_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$z, [ 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$R.render = render$K; script$R.__file = "packages/components/menu/src/menu-item.vue"; const menuItemGroupProps = { title: String }; const COMPONENT_NAME = "ElMenuItemGroup"; var script$Q = vue.defineComponent({ name: COMPONENT_NAME, props: menuItemGroupProps, setup() { const instance = vue.getCurrentInstance(); const menu = vue.inject("rootMenu"); if (!menu) throwError(COMPONENT_NAME, "can not inject root menu"); const levelPadding = vue.computed(() => { if (menu.props.collapse) return 20; let padding = 20; let parent = instance.parent; while (parent && parent.type.name !== "ElMenu") { if (parent.type.name === "ElSubMenu") { padding += 20; } parent = parent.parent; } return padding; }); return { levelPadding }; } }); const _hoisted_1$y = { class: "el-menu-item-group" }; function render$J(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createElementBlock("li", _hoisted_1$y, [ 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$Q.render = render$J; script$Q.__file = "packages/components/menu/src/menu-item-group.vue"; const ElMenu = withInstall(Menu, { MenuItem: script$R, MenuItemGroup: script$Q, SubMenu }); const ElMenuItem = withNoopInstall(script$R); const ElMenuItemGroup = withNoopInstall(script$Q); const ElSubMenu = withNoopInstall(SubMenu); const pageHeaderProps = { icon: { type: [String, Object], default: Back }, title: String, content: { type: String, default: "" } }; const pageHeaderEmits = { back: () => true }; var script$P = vue.defineComponent({ name: "ElPageHeader", components: { ElIcon }, props: pageHeaderProps, emits: pageHeaderEmits, setup(_, { emit }) { const { t } = useLocaleInject(); function handleClick() { emit("back"); } return { handleClick, t }; } }); const _hoisted_1$x = { class: "el-page-header" }; const _hoisted_2$q = { key: 0, class: "el-page-header__icon" }; const _hoisted_3$l = { class: "el-page-header__title" }; const _hoisted_4$d = { class: "el-page-header__content" }; function render$I(_ctx, _cache, $props, $setup, $data, $options) { const _component_el_icon = vue.resolveComponent("el-icon"); return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$x, [ 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$q, [ vue.renderSlot(_ctx.$slots, "icon", {}, () => [ _ctx.icon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0 }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon))) ]), _: 1 })) : vue.createCommentVNode("v-if", true) ]) ])) : vue.createCommentVNode("v-if", true), vue.createElementVNode("div", _hoisted_3$l, [ 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$P.render = render$I; script$P.__file = "packages/components/page-header/src/page-header.vue"; const ElPageHeader = withInstall(script$P); const paginationPrevProps = { disabled: Boolean, currentPage: { type: Number, default: 1 }, prevText: { type: String, default: "" } }; var script$O = vue.defineComponent({ name: "ElPaginationPrev", components: { ElIcon, ArrowLeft }, props: paginationPrevProps, emits: ["click"], setup(props) { const internalDisabled = vue.computed(() => props.disabled || props.currentPage <= 1); return { internalDisabled }; } }); const _hoisted_1$w = ["disabled", "aria-disabled"]; const _hoisted_2$p = { key: 0 }; function render$H(_ctx, _cache, $props, $setup, $data, $options) { const _component_arrow_left = vue.resolveComponent("arrow-left"); const _component_el_icon = vue.resolveComponent("el-icon"); 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$p, vue.toDisplayString(_ctx.prevText), 1)) : (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 1 }, { default: vue.withCtx(() => [ vue.createVNode(_component_arrow_left) ]), _: 1 })) ], 8, _hoisted_1$w); } script$O.render = render$H; script$O.__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$N = vue.defineComponent({ name: "ElPaginationNext", components: { ElIcon, ArrowRight }, props: paginationNextProps, emits: ["click"], setup(props) { const internalDisabled = vue.computed(() => props.disabled || props.currentPage === props.pageCount || props.pageCount === 0); return { internalDisabled }; } }); const _hoisted_1$v = ["disabled", "aria-disabled"]; const _hoisted_2$o = { key: 0 }; function render$G(_ctx, _cache, $props, $setup, $data, $options) { const _component_arrow_right = vue.resolveComponent("arrow-right"); const _component_el_icon = vue.resolveComponent("el-icon"); 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$o, vue.toDisplayString(_ctx.nextText), 1)) : (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 1 }, { default: vue.withCtx(() => [ vue.createVNode(_component_arrow_right) ]), _: 1 })) ], 8, _hoisted_1$v); } script$N.render = render$G; script$N.__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$M = 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$F(_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$M.render = render$F; script$M.__file = "packages/components/select/src/option.vue"; var script$L = 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 isFitInputWidth = vue.computed(() => select.props.fitInputWidth); 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, isFitInputWidth }; } }); function render$E(_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({ [_ctx.isFitInputWidth ? "width" : "minWidth"]: _ctx.minWidth }) }, [ vue.renderSlot(_ctx.$slots, "default") ], 6); } script$L.render = render$E; script$L.__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$1(); 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 iconComponent = vue.computed(() => props.remote && props.filterable ? "" : ArrowUp); const iconReverse = vue.computed(() => iconComponent.value && states.visible ? "is-reverse" : ""); 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 getValueKey(item) === getValueKey(states.selected); }); } else { if (states.selected.length > 0) { states.hoverIndex = Math.min.apply(null, states.selected.map((selected) => { return optionsArray.value.findIndex((item) => { return 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$2(() => { onInputChange(); }, debounce.value); const debouncedQueryChange = debounce$2((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$a(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$a(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, iconComponent, iconReverse, 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$K = vue.defineComponent({ name: "ElSelect", componentName: "ElSelect", components: { ElInput: ElInput$1, ElSelectMenu: script$L, ElOption: script$M, ElTag, ElScrollbar, ElPopper, ElIcon: ElIcon$1 }, directives: { ClickOutside }, props: { name: String, id: String, modelValue: { type: [Array, String, Number, Boolean, Object], default: void 0 }, autocomplete: { type: String, default: "off" }, automaticDropdown: Boolean, size: { type: String, validator: isValidComponentSize }, 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, Object], default: CircleClose }, fitInputWidth: { type: Boolean, default: false } }, 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, iconComponent, iconReverse, 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, iconComponent, iconReverse, 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$u = { class: "select-trigger" }; const _hoisted_2$n = { key: 0 }; const _hoisted_3$k = { 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$8 = { key: 1, class: "el-select-dropdown__empty" }; function render$D(_ctx, _cache, $props, $setup, $data, $options) { const _component_el_tag = vue.resolveComponent("el-tag"); const _component_el_icon = vue.resolveComponent("el-icon"); const _component_el_input = vue.resolveComponent("el-input"); const _component_el_option = vue.resolveComponent("el-option"); const _component_el_scrollbar = vue.resolveComponent("el-scrollbar"); const _component_el_select_menu = vue.resolveComponent("el-select-menu"); const _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[24] || (_cache[24] = vue.withModifiers((...args) => _ctx.toggleMenu && _ctx.toggleMenu(...args), ["stop"])) }, [ vue.createVNode(_component_el_popper, { ref: "popper", visible: _ctx.dropMenuVisible, "onUpdate:visible": _cache[23] || (_cache[23] = ($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$u, [ _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$n, [ 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$k, "+ " + vue.toDisplayString(_ctx.selected.length - 1), 1) ]), _: 1 }, 8, ["size"])) : vue.createCommentVNode("v-if", true) ])) : vue.createCommentVNode("v-if", true), vue.createCommentVNode("
"), !_ctx.collapseTags ? (vue.openBlock(), vue.createBlock(vue.Transition, { key: 1, onAfterLeave: _ctx.resetInputHeight }, { default: vue.withCtx(() => [ vue.createElementVNode("span", { 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("
"), _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[16] || (_cache[16] = ($event) => _ctx.selectedLabel = $event), type: "text", placeholder: _ctx.currentPlaceholder, name: _ctx.name, autocomplete: _ctx.autocomplete, size: _ctx.selectSize, disabled: _ctx.selectDisabled, readonly: _ctx.readonly, "validate-event": false, class: vue.normalizeClass({ "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[17] || (_cache[17] = vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("next"), ["stop", "prevent"]), ["down"])), _cache[18] || (_cache[18] = vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("prev"), ["stop", "prevent"]), ["up"])), vue.withKeys(vue.withModifiers(_ctx.selectOption, ["stop", "prevent"]), ["enter"]), _cache[19] || (_cache[19] = vue.withKeys(vue.withModifiers(($event) => _ctx.visible = false, ["stop", "prevent"]), ["esc"])), _cache[20] || (_cache[20] = vue.withKeys(($event) => _ctx.visible = false, ["tab"])) ], onMouseenter: _cache[21] || (_cache[21] = ($event) => _ctx.inputHovering = true), onMouseleave: _cache[22] || (_cache[22] = ($event) => _ctx.inputHovering = false) }, vue.createSlots({ suffix: vue.withCtx(() => [ _ctx.iconComponent ? vue.withDirectives((vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0, class: vue.normalizeClass(["el-select__caret", "el-input__icon", _ctx.iconReverse]) }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent))) ]), _: 1 }, 8, ["class"])), [ [vue.vShow, !_ctx.showClose] ]) : vue.createCommentVNode("v-if", true), _ctx.showClose && _ctx.clearIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 1, class: "el-select__caret el-input__icon", onClick: _ctx.handleClearClick }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.clearIcon))) ]), _: 1 }, 8, ["onClick"])) : 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$8, 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$K.render = render$D; script$K.__file = "packages/components/select/src/select.vue"; var script$J = 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({ ...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$t = { class: "el-select-group__wrap" }; const _hoisted_2$m = { class: "el-select-group__title" }; const _hoisted_3$j = { class: "el-select-group" }; function render$C(_ctx, _cache, $props, $setup, $data, $options) { return vue.withDirectives((vue.openBlock(), vue.createElementBlock("ul", _hoisted_1$t, [ vue.createElementVNode("li", _hoisted_2$m, vue.toDisplayString(_ctx.label), 1), vue.createElementVNode("li", null, [ vue.createElementVNode("ul", _hoisted_3$j, [ vue.renderSlot(_ctx.$slots, "default") ]) ]) ], 512)), [ [vue.vShow, _ctx.visible] ]); } script$J.render = render$C; script$J.__file = "packages/components/select/src/option-group.vue"; const ElSelect = withInstall(script$K, { Option: script$M, OptionGroup: script$J }); const ElOption$1 = withNoopInstall(script$M); const ElOptionGroup = withNoopInstall(script$J); const usePagination = () => vue.inject(elPaginationKey, {}); const paginationSizesProps = buildProps({ pageSize: { type: Number, required: true }, pageSizes: { type: definePropType(Array), default: () => mutable([10, 20, 30, 40, 50, 100]) }, popperClass: { type: String, default: "" }, disabled: Boolean }); var script$I = 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$s = { class: "el-pagination__sizes" }; 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.createElementBlock("span", _hoisted_1$s, [ 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$I.render = render$B; script$I.__file = "packages/components/pagination/src/components/sizes.vue"; var script$H = vue.defineComponent({ name: "ElPaginationJumper", components: { ElInput: ElInput$1 }, 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$r = { class: "el-pagination__jump" }; function render$A(_ctx, _cache, $props, $setup, $data, $options) { const _component_el_input = vue.resolveComponent("el-input"); return vue.openBlock(), vue.createElementBlock("span", _hoisted_1$r, [ 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$H.render = render$A; script$H.__file = "packages/components/pagination/src/components/jumper.vue"; const paginationTotalProps = { total: { type: Number, default: 1e3 } }; var script$G = vue.defineComponent({ name: "ElPaginationTotal", props: paginationTotalProps, setup() { const { t } = useLocaleInject(); return { t }; } }); const _hoisted_1$q = { class: "el-pagination__total" }; function render$z(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createElementBlock("span", _hoisted_1$q, vue.toDisplayString(_ctx.t("el.pagination.total", { total: _ctx.total })), 1); } script$G.render = render$z; script$G.__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$F = vue.defineComponent({ name: "ElPaginationPager", components: { DArrowLeft, DArrowRight, MoreFilled }, props: paginationPagerProps, emits: ["change"], setup(props, { emit }) { const showPrevMore = vue.ref(false); const showNextMore = vue.ref(false); const quickPrevHover = vue.ref(false); const quickNextHover = vue.ref(false); const pagers = vue.computed(() => { const pagerCount = props.pagerCount; const halfPagerCount = (pagerCount - 1) / 2; const currentPage = Number(props.currentPage); const pageCount = Number(props.pageCount); let showPrevMore2 = false; let showNextMore2 = false; if (pageCount > pagerCount) { if (currentPage > pagerCount - halfPagerCount) { showPrevMore2 = true; } if (currentPage < pageCount - halfPagerCount) { showNextMore2 = true; } } const array = []; if (showPrevMore2 && !showNextMore2) { const startPage = pageCount - (pagerCount - 2); for (let i = startPage; i < pageCount; i++) { array.push(i); } } else if (!showPrevMore2 && showNextMore2) { for (let i = 2; i < pagerCount; i++) { array.push(i); } } else if (showPrevMore2 && showNextMore2) { const offset = Math.floor(pagerCount / 2) - 1; for (let i = currentPage - offset; i <= currentPage + offset; i++) { array.push(i); } } else { for (let i = 2; i < pageCount; i++) { array.push(i); } } return array; }); vue.watchEffect(() => { const halfPagerCount = (props.pagerCount - 1) / 2; showPrevMore.value = false; showNextMore.value = false; if (props.pageCount > props.pagerCount) { if (props.currentPage > props.pagerCount - halfPagerCount) { showPrevMore.value = true; } if (props.currentPage < props.pageCount - halfPagerCount) { showNextMore.value = true; } } }); function onMouseenter(direction) { if (props.disabled) return; if (direction === "left") { quickPrevHover.value = true; } else { quickNextHover.value = true; } } function onEnter(e) { const target = e.target; if (target.tagName.toLowerCase() === "li" && Array.from(target.classList).includes("number")) { const newPage = Number(target.textContent); if (newPage !== props.currentPage) { emit("change", newPage); } } } 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, quickPrevHover, quickNextHover, pagers, onMouseenter, onPagerClick, onEnter }; } }); const _hoisted_1$p = ["aria-current"]; const _hoisted_2$l = ["aria-current"]; const _hoisted_3$i = ["aria-current"]; function render$y(_ctx, _cache, $props, $setup, $data, $options) { const _component_d_arrow_left = vue.resolveComponent("d-arrow-left"); const _component_more_filled = vue.resolveComponent("more-filled"); const _component_d_arrow_right = vue.resolveComponent("d-arrow-right"); 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$p)) : vue.createCommentVNode("v-if", true), _ctx.showPrevMore ? (vue.openBlock(), vue.createElementBlock("li", { key: 1, class: vue.normalizeClass(["el-icon more btn-quickprev", { disabled: _ctx.disabled }]), onMouseenter: _cache[0] || (_cache[0] = ($event) => _ctx.onMouseenter("left")), onMouseleave: _cache[1] || (_cache[1] = ($event) => _ctx.quickPrevHover = false) }, [ _ctx.quickPrevHover ? (vue.openBlock(), vue.createBlock(_component_d_arrow_left, { key: 0 })) : (vue.openBlock(), vue.createBlock(_component_more_filled, { key: 1 })) ], 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$l); }), 128)), _ctx.showNextMore ? (vue.openBlock(), vue.createElementBlock("li", { key: 2, class: vue.normalizeClass(["el-icon more btn-quicknext", { disabled: _ctx.disabled }]), onMouseenter: _cache[2] || (_cache[2] = ($event) => _ctx.onMouseenter("right")), onMouseleave: _cache[3] || (_cache[3] = ($event) => _ctx.quickNextHover = false) }, [ _ctx.quickNextHover ? (vue.openBlock(), vue.createBlock(_component_d_arrow_right, { key: 0 })) : (vue.openBlock(), vue.createBlock(_component_more_filled, { key: 1 })) ], 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$i)) : vue.createCommentVNode("v-if", true) ], 32); } script$F.render = render$y; script$F.__file = "packages/components/pagination/src/components/pager.vue"; const isAbsent = (v) => typeof v !== "number"; const paginationProps = buildProps({ total: Number, pageSize: Number, defaultPageSize: Number, currentPage: Number, defaultCurrentPage: Number, pageCount: Number, pagerCount: { type: Number, validator: (value) => { return typeof value === "number" && (value | 0) === value && value > 4 && value < 22 && value % 2 === 1; }, default: 7 }, layout: { type: String, default: ["prev", "pager", "next", "jumper", "->", "total"].join(", ") }, pageSizes: { type: definePropType(Array), default: () => mutable([10, 20, 30, 40, 50, 100]) }, popperClass: { type: String, default: "" }, prevText: { type: String, default: "" }, 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$O, { disabled: props.disabled, currentPage: currentPageBridge.value, prevText: props.prevText, onClick: prev }), jumper: vue.h(script$H), pager: vue.h(script$F, { currentPage: currentPageBridge.value, pageCount: pageCountBridge.value, pagerCount: props.pagerCount, onChange: handleCurrentChange, disabled: props.disabled }), next: vue.h(script$N, { disabled: props.disabled, currentPage: currentPageBridge.value, pageCount: pageCountBridge.value, nextText: props.nextText, onClick: next }), sizes: vue.h(script$I, { 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$G, { 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); const popconfirmProps = buildProps({ title: { type: String }, confirmButtonText: { type: String }, cancelButtonText: { type: String }, confirmButtonType: { type: String, values: buttonType, default: "primary" }, cancelButtonType: { type: String, values: buttonType, default: "text" }, icon: { type: definePropType([String, Object]), default: QuestionFilled }, iconColor: { type: String, default: "#f90" }, hideIcon: { type: Boolean, default: false } }); const popconfirmEmits = { confirm: () => true, cancel: () => true }; var script$E = vue.defineComponent({ name: "ElPopconfirm", components: { ElButton, ElPopper, ElIcon: ElIcon$1 }, 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$o = { class: "el-popconfirm" }; const _hoisted_2$k = { class: "el-popconfirm__main" }; const _hoisted_3$h = { class: "el-popconfirm__action" }; function render$x(_ctx, _cache, $props, $setup, $data, $options) { const _component_el_icon = vue.resolveComponent("el-icon"); 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$o, [ vue.createElementVNode("div", _hoisted_2$k, [ !_ctx.hideIcon && _ctx.icon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0, class: "el-popconfirm__icon", style: vue.normalizeStyle({ color: _ctx.iconColor }) }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon))) ]), _: 1 }, 8, ["style"])) : vue.createCommentVNode("v-if", true), vue.createTextVNode(" " + vue.toDisplayString(_ctx.title), 1) ]), vue.createElementVNode("div", _hoisted_3$h, [ 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$E.render = render$x; script$E.__file = "packages/components/popconfirm/src/popconfirm.vue"; const ElPopconfirm = withInstall(script$E); 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 { ...popperProps, popperStyle }; } 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$D = vue.defineComponent({ name: NAME, components: { ElPopper }, props: { ...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, { 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$D.__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$D.install = (app) => { app.component(script$D.name, script$D); }; PopoverDirective.install = (app) => { app.directive(VPopover, PopoverDirective); }; const _PopoverDirective = PopoverDirective; script$D.directive = _PopoverDirective; const _Popover = script$D; const ElPopover = _Popover; const ElPopoverDirective = _PopoverDirective; var script$C = vue.defineComponent({ name: "ElProgress", components: { ElIcon, CircleCheck, CircleClose, Check, Close, WarningFilled }, props: { type: { type: String, default: "line", validator: (val) => ["line", "circle", "dashboard"].indexOf(val) > -1 }, percentage: { type: Number, default: 0, 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 statusIcon = vue.computed(() => { if (props.status === "warning") { return WarningFilled; } if (props.type === "line") { return props.status === "success" ? CircleCheck : CircleClose; } else { return props.status === "success" ? Check : 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, statusIcon, progressTextSize, content, getCurrentColor, slotData }; } }); const _hoisted_1$n = ["aria-valuenow"]; const _hoisted_2$j = { key: 0, class: "el-progress-bar" }; const _hoisted_3$g = { 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$7 = ["d", "stroke", "stroke-linecap", "stroke-width"]; const _hoisted_7$5 = { key: 0 }; function render$w(_ctx, _cache, $props, $setup, $data, $options) { const _component_el_icon = vue.resolveComponent("el-icon"); 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$j, [ 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$g, [ 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$7) ])) ], 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$5, vue.toDisplayString(_ctx.content), 1)) : (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 1 }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.statusIcon))) ]), _: 1 })) ]) ], 4)) : vue.createCommentVNode("v-if", true) ], 10, _hoisted_1$n); } script$C.render = render$w; script$C.__file = "packages/components/progress/src/index.vue"; script$C.install = (app) => { app.component(script$C.name, script$C); }; const _Progress = script$C; const ElProgress = _Progress; const rateProps = buildProps({ modelValue: { type: Number, default: 0 }, lowThreshold: { type: Number, default: 2 }, highThreshold: { type: Number, default: 4 }, max: { type: Number, default: 5 }, colors: { type: definePropType([Array, Object]), default: () => mutable(["#F7BA2A", "#F7BA2A", "#F7BA2A"]) }, voidColor: { type: String, default: "#C6D1DE" }, disabledVoidColor: { type: String, default: "#EFF2F7" }, icons: { type: definePropType([Array, Object]), default: () => [StarFilled, StarFilled, StarFilled] }, voidIcon: { type: definePropType([String, Object]), default: () => Star }, disabledvoidIcon: { type: definePropType([String, Object]), default: () => StarFilled }, 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: definePropType([Array]), default: () => mutable([ "Extremely bad", "Disappointed", "Fair", "Satisfied", "Surprise" ]) }, scoreTemplate: { type: String, default: "{value}" } }); const rateEmits = { change: (value) => typeof value === "number", [UPDATE_MODEL_EVENT]: (value) => typeof value === "number" }; function getValueFromMap(value, map) { const isExcludedObject = (val) => isObject$a(val); const matchedKeys = Object.keys(map).map((key) => +key).filter((key) => { const val = map[key]; const excluded = isExcludedObject(val) ? val.excluded : false; return excluded ? value < key : value <= key; }).sort((a, b) => a - b); const matchedValue = map[matchedKeys[0]]; return isExcludedObject(matchedValue) ? matchedValue.value : matchedValue; } var script$B = vue.defineComponent({ name: "ElRate", components: { ElIcon, StarFilled, Star }, props: rateProps, emits: rateEmits, setup(props, { emit }) { const elForm = vue.inject(elFormKey, {}); const currentValue = vue.ref(props.modelValue); const hoverIndex = vue.ref(-1); const pointerAtLeftHalf = vue.ref(true); 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; }); const valueDecimal = vue.computed(() => props.modelValue * 100 - Math.floor(props.modelValue) * 100); const colorMap = vue.computed(() => isArray$6(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 componentMap = vue.computed(() => isArray$6(props.icons) ? { [props.lowThreshold]: props.icons[0], [props.highThreshold]: { value: props.icons[1], excluded: true }, [props.max]: props.icons[2] } : props.icons); const decimalIconComponent = vue.computed(() => getValueFromMap(props.modelValue, componentMap.value)); const voidComponent = vue.computed(() => rateDisabled.value ? props.disabledvoidIcon : props.voidIcon); const activeComponent = vue.computed(() => getValueFromMap(currentValue.value, componentMap.value)); const iconComponents = vue.computed(() => { const result = Array(props.max); const threshold = currentValue.value; result.fill(activeComponent.value, 0, threshold); result.fill(voidComponent.value, threshold, props.max); return result; }); 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; } 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 (target.clientWidth === 0 || 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; } vue.watch(() => props.modelValue, (val) => { currentValue.value = val; pointerAtLeftHalf.value = props.modelValue !== Math.floor(props.modelValue); }); if (!props.modelValue) { emit(UPDATE_MODEL_EVENT, 0); } return { hoverIndex, currentValue, rateDisabled, text, decimalStyle, decimalIconComponent, iconComponents, showDecimalIcon, getIconStyle, selectValue, handleKey, setCurrentValue, resetCurrentValue }; } }); const _hoisted_1$m = ["aria-valuenow", "aria-valuetext", "aria-valuemax"]; const _hoisted_2$i = ["onMousemove", "onClick"]; function render$v(_ctx, _cache, $props, $setup, $data, $options) { const _component_el_icon = vue.resolveComponent("el-icon"); 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.createVNode(_component_el_icon, { class: vue.normalizeClass([[{ hover: _ctx.hoverIndex === item }], "el-rate__icon"]), style: vue.normalizeStyle(_ctx.getIconStyle(item)) }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponents[item - 1]))), _ctx.showDecimalIcon(item) ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0, style: vue.normalizeStyle(_ctx.decimalStyle), class: "el-rate__icon el-rate__decimal" }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.decimalIconComponent))) ]), _: 1 }, 8, ["style"])) : vue.createCommentVNode("v-if", true) ]), _: 2 }, 1032, ["class", "style"]) ], 44, _hoisted_2$i); }), 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$m); } script$B.render = render$v; script$B.__file = "packages/components/rate/src/rate.vue"; const ElRate = withInstall(script$B); const IconMap = { success: "icon-success", warning: "icon-warning", error: "icon-error", info: "icon-info" }; const IconComponentMap = { [IconMap.success]: CircleCheckFilled, [IconMap.warning]: WarningFilled, [IconMap.error]: CircleCloseFilled, [IconMap.info]: InfoFilled }; const resultProps = buildProps({ title: { type: String, default: "" }, subTitle: { type: String, default: "" }, icon: { values: ["success", "warning", "info", "error"], default: "info" } }); var script$A = vue.defineComponent({ name: "ElResult", props: resultProps, setup(props) { const resultIcon = vue.computed(() => { const icon = props.icon; const iconClass = icon && IconMap[icon] ? IconMap[icon] : "icon-info"; const iconComponent = IconComponentMap[iconClass] || IconComponentMap["icon-info"]; return { class: iconClass, component: iconComponent }; }); return { resultIcon }; } }); const _hoisted_1$l = { class: "el-result" }; const _hoisted_2$h = { class: "el-result__icon" }; const _hoisted_3$f = { 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$u(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [ vue.createElementVNode("div", _hoisted_2$h, [ vue.renderSlot(_ctx.$slots, "icon", {}, () => [ _ctx.resultIcon.component ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.resultIcon.component), { key: 0, class: vue.normalizeClass(_ctx.resultIcon.class) }, null, 8, ["class"])) : vue.createCommentVNode("v-if", true) ]) ]), _ctx.title || _ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$f, [ 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$A.render = render$u; script$A.__file = "packages/components/result/src/result.vue"; const ElResult = withInstall(script$A); const rowProps = buildProps({ tag: { type: String, default: "div" }, gutter: { type: Number, default: 0 }, justify: { type: String, values: ["start", "center", "end", "space-around", "space-between"], default: "start" }, align: { type: String, values: ["top", "middle", "bottom"], default: "top" } }); var Row = vue.defineComponent({ name: "ElRow", props: rowProps, 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 ElRow = withInstall(Row); var MapCache = _MapCache; /** 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 cache = null; function memoized() { var newArgs = []; for (var _i = 0; _i < arguments.length; _i++) { newArgs[_i] = arguments[_i]; } if (cache && cache.lastThis === this && isEqual(newArgs, cache.lastArgs)) { return cache.lastResult; } var lastResult = resultFn.apply(this, newArgs); cache = { lastResult: lastResult, lastArgs: newArgs, lastThis: this, }; return lastResult; } memoized.clear = function clear() { cache = null; }; return memoized; } const useCache = () => { const vm = vue.getCurrentInstance(); const props = vm.proxy.$props; return vue.computed(() => { const _getItemStyleCache = (_, __, ___) => ({}); return props.perfMode ? memoize_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$a(navigator) && /Firefox/i.test(navigator.userAgent); const LayoutKeys = { [HORIZONTAL]: "deltaX", [VERTICAL]: "deltaY" }; const useWheel = ({ atEndEdge, atStartEdge, layout }, onWheelDelta) => { let frameHandle; let offset = 0; const hasReachedEdge = (offset2) => { const edgeReached = offset2 < 0 && atStartEdge.value || offset2 > 0 && atEndEdge.value; return edgeReached; }; const onWheel = (e) => { cAF(frameHandle); const newOffset = e[LayoutKeys[layout.value]]; if (hasReachedEdge(offset) && hasReachedEdge(offset + newOffset)) return; offset += newOffset; if (!isFF) { e.preventDefault(); } frameHandle = rAF(() => { onWheelDelta(offset); offset = 0; }); }; return { hasReachedEdge, onWheel }; }; var useWheel$1 = useWheel; const itemSize = buildProp({ type: definePropType([Number, Function]), required: true }); const estimatedItemSize = buildProp({ type: Number }); const cache = buildProp({ type: Number, default: 2 }); const direction = buildProp({ type: String, values: ["ltr", "rtl"], default: "ltr" }); const initScrollOffset = buildProp({ type: Number, default: 0 }); const total = buildProp({ type: Number, required: true }); const layout = buildProp({ type: String, values: ["horizontal", "vertical"], default: VERTICAL }); const virtualizedProps = buildProps({ className: { type: String, default: "" }, containerElement: { type: definePropType([String, Object]), default: "div" }, data: { type: definePropType(Array), default: () => mutable([]) }, direction, height: { type: [String, Number], required: true }, innerElement: { type: [String, Object], default: "div" }, style: { type: definePropType([Object, String, Array]) }, useIsScrolling: { type: Boolean, default: false }, width: { type: [Number, String], required: false }, perfMode: { type: Boolean, default: true }, scrollbarAlwaysOn: { type: Boolean, default: false } }); const virtualizedListProps = buildProps({ cache, estimatedItemSize, layout, initScrollOffset, total, itemSize, ...virtualizedProps }); const virtualizedGridProps = buildProps({ columnCache: cache, columnWidth: itemSize, estimatedColumnWidth: estimatedItemSize, estimatedRowHeight: estimatedItemSize, initScrollLeft: initScrollOffset, initScrollTop: initScrollOffset, rowCache: cache, rowHeight: itemSize, totalColumn: total, totalRow: total, ...virtualizedProps }); const virtualizedScrollbarProps = buildProps({ layout, total, ratio: { type: Number, required: true }, clientSize: { type: Number, required: true }, scrollFrom: { type: Number, required: true }, visible: Boolean }); 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(() => ({ 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" })); 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 Scrollbar = ScrollBar; const createList = ({ name, getOffset, getItemSize, getItemOffset, getEstimatedTotalSize, getStartIndexForOffset, getStopIndexForStartIndex, initCache, clearCache, validateProps }) => { return vue.defineComponent({ name: name != null ? name : "ElVirtualList", props: virtualizedListProps, emits: [ITEM_RENDER_EVT, SCROLL_EVT], setup(props, { emit, expose }) { validateProps(props); const instance = vue.getCurrentInstance(); const dynamicSizeCache = vue.ref(initCache(props, instance)); const getItemStyleCache = useCache(); const windowRef = vue.ref(); const innerRef = vue.ref(); const scrollbarRef = vue.ref(); const states = vue.ref({ isScrolling: false, scrollDir: "forward", scrollOffset: isNumber(props.initScrollOffset) ? props.initScrollOffset : 0, updateRequested: false, isScrollbarDragging: false, scrollbarAlwaysOn: props.scrollbarAlwaysOn }); const itemsToRender = vue.computed(() => { const { total, cache } = props; const { isScrolling, scrollDir, scrollOffset } = vue.unref(states); if (total === 0) { return [0, 0, 0, 0]; } const startIndex = getStartIndexForOffset(props, scrollOffset, vue.unref(dynamicSizeCache)); const stopIndex = getStopIndexForStartIndex(props, startIndex, scrollOffset, vue.unref(dynamicSizeCache)); const cacheBackward = !isScrolling || scrollDir === BACKWARD ? Math.max(1, cache) : 1; const cacheForward = !isScrolling || scrollDir === FORWARD ? Math.max(1, cache) : 1; return [ Math.max(0, startIndex - cacheBackward), Math.max(0, Math.min(total - 1, stopIndex + cacheForward)), startIndex, stopIndex ]; }); const estimatedTotalSize = vue.computed(() => getEstimatedTotalSize(props, vue.unref(dynamicSizeCache))); const _isHorizontal = vue.computed(() => isHorizontal(props.layout)); const windowStyle = vue.computed(() => [ { position: "relative", overflow: "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$1({ atStartEdge: vue.computed(() => states.value.scrollOffset <= 0), atEndEdge: vue.computed(() => states.value.scrollOffset >= estimatedTotalSize.value), layout: vue.computed(() => props.layout) }, (offset) => { var _a, _b; (_b = (_a = scrollbarRef.value).onMouseUp) == null ? void 0 : _b.call(_a); scrollTo(Math.min(states.value.scrollOffset + offset, estimatedTotalSize.value - clientSize.value)); }); const emitEvents = () => { const { total } = props; if (total > 0) { const [cacheStart, cacheEnd, visibleStart, visibleEnd] = vue.unref(itemsToRender); emit(ITEM_RENDER_EVT, cacheStart, cacheEnd, visibleStart, visibleEnd); } const { scrollDir, scrollOffset, updateRequested } = vue.unref(states); emit(SCROLL_EVT, scrollDir, scrollOffset, updateRequested); }; const scrollVertically = (e) => { const { clientHeight, scrollHeight, scrollTop } = e.currentTarget; const _states = vue.unref(states); if (_states.scrollOffset === scrollTop) { return; } const scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight)); states.value = { ..._states, isScrolling: true, scrollDir: getScrollDir(_states.scrollOffset, scrollOffset), scrollOffset, updateRequested: false }; vue.nextTick(resetIsScrolling); }; const scrollHorizontally = (e) => { const { clientWidth, scrollLeft, scrollWidth } = e.currentTarget; const _states = vue.unref(states); if (_states.scrollOffset === scrollLeft) { return; } const { direction } = props; let scrollOffset = scrollLeft; if (direction === RTL) { switch (getRTLOffsetType()) { case RTL_OFFSET_NAG: { scrollOffset = -scrollLeft; break; } case RTL_OFFSET_POS_DESC: { scrollOffset = scrollWidth - clientWidth - scrollLeft; break; } } } scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth)); states.value = { ..._states, isScrolling: true, scrollDir: getScrollDir(_states.scrollOffset, scrollOffset), scrollOffset, updateRequested: false }; vue.nextTick(resetIsScrolling); }; const onScroll = (e) => { vue.unref(_isHorizontal) ? scrollHorizontally(e) : scrollVertically(e); emitEvents(); }; const onScrollbarScroll = (distanceToGo, totalSteps) => { const offset = (estimatedTotalSize.value - clientSize.value) / totalSteps * distanceToGo; scrollTo(Math.min(estimatedTotalSize.value - clientSize.value, offset)); }; const scrollTo = (offset) => { offset = Math.max(offset, 0); if (offset === vue.unref(states).scrollOffset) { return; } states.value = { ...vue.unref(states), scrollOffset: offset, scrollDir: getScrollDir(vue.unref(states).scrollOffset, offset), updateRequested: true }; vue.nextTick(resetIsScrolling); }; const scrollToItem = (idx, alignment = AUTO_ALIGNMENT) => { const { scrollOffset } = vue.unref(states); idx = Math.max(0, Math.min(idx, props.total - 1)); scrollTo(getOffset(props, idx, alignment, scrollOffset, vue.unref(dynamicSizeCache))); }; const getItemStyle = (idx) => { const { direction, itemSize, layout } = props; const itemStyleCache = getItemStyleCache.value(clearCache && itemSize, clearCache && layout, clearCache && direction); let style; if (hasOwn(itemStyleCache, String(idx))) { style = itemStyleCache[idx]; } else { const offset = getItemOffset(props, idx, vue.unref(dynamicSizeCache)); const size = getItemSize(props, idx, vue.unref(dynamicSizeCache)); const horizontal = vue.unref(_isHorizontal); const isRtl = direction === RTL; const offsetHorizontal = horizontal ? offset : 0; itemStyleCache[idx] = style = { position: "absolute", left: isRtl ? void 0 : `${offsetHorizontal}px`, right: isRtl ? `${offsetHorizontal}px` : void 0, top: !horizontal ? `${offset}px` : 0, height: !horizontal ? `${size}px` : "100%", width: horizontal ? `${size}px` : "100%" }; } return style; }; const resetIsScrolling = () => { states.value.isScrolling = false; vue.nextTick(() => { getItemStyleCache.value(-1, null, null); }); }; const resetScrollTop = () => { const window = windowRef.value; if (window) { window.scrollTop = 0; } }; vue.onMounted(() => { if (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 }); 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", states.scrollbarAlwaysOn ? "always-on" : "" ] }, [listContainer, scrollbar]); } }); }; var createList$1 = createList; const FixedSizeList = createList$1({ name: "ElFixedSizeList", getItemOffset: ({ itemSize }, index) => index * itemSize, getItemSize: ({ itemSize }) => itemSize, getEstimatedTotalSize: ({ total, itemSize }) => itemSize * total, getOffset: ({ height, total, itemSize, layout, width }, index, alignment, scrollOffset) => { const size = isHorizontal(layout) ? width : height; const lastItemOffset = Math.max(0, total * itemSize - size); const maxOffset = Math.min(lastItemOffset, index * itemSize); const minOffset = Math.max(0, (index + 1) * itemSize - size); if (alignment === SMART_ALIGNMENT) { if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) { alignment = AUTO_ALIGNMENT; } else { alignment = CENTERED_ALIGNMENT; } } switch (alignment) { case START_ALIGNMENT: { return maxOffset; } case END_ALIGNMENT: { return minOffset; } case CENTERED_ALIGNMENT: { const middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2); if (middleOffset < Math.ceil(size / 2)) { return 0; } else if (middleOffset > lastItemOffset + Math.floor(size / 2)) { return lastItemOffset; } else { return middleOffset; } } case AUTO_ALIGNMENT: default: { if (scrollOffset >= minOffset && scrollOffset <= maxOffset) { return scrollOffset; } else if (scrollOffset < minOffset) { return minOffset; } else { return maxOffset; } } } }, getStartIndexForOffset: ({ total, itemSize }, offset) => Math.max(0, Math.min(total - 1, Math.floor(offset / itemSize))), getStopIndexForStartIndex: ({ height, total, itemSize, layout, width }, startIndex, scrollOffset) => { const offset = startIndex * itemSize; const size = isHorizontal(layout) ? width : height; const numVisibleItems = Math.ceil((size + scrollOffset - offset) / itemSize); return Math.max(0, Math.min(total - 1, startIndex + numVisibleItems - 1)); }, initCache() { return void 0; }, clearCache: true, validateProps() { } }); var FixedSizeList$1 = FixedSizeList; const getItemFromCache$1 = (props, index, listCache) => { const { itemSize } = props; const { items, lastVisitedIndex } = listCache; if (index > lastVisitedIndex) { let offset = 0; if (lastVisitedIndex >= 0) { const item = items[lastVisitedIndex]; offset = item.offset + item.size; } for (let i = lastVisitedIndex + 1; i <= index; i++) { const size = itemSize(i); items[i] = { offset, size }; offset += size; } listCache.lastVisitedIndex = index; } return items[index]; }; const findItem$1 = (props, listCache, offset) => { const { items, lastVisitedIndex } = listCache; const lastVisitedOffset = lastVisitedIndex > 0 ? items[lastVisitedIndex].offset : 0; if (lastVisitedOffset >= offset) { return bs$1(props, listCache, 0, lastVisitedIndex, offset); } return es$1(props, listCache, Math.max(0, lastVisitedIndex), offset); }; const bs$1 = (props, listCache, low, high, offset) => { while (low <= high) { const mid = low + Math.floor((high - low) / 2); const currentOffset = getItemFromCache$1(props, mid, listCache).offset; if (currentOffset === offset) { return mid; } else if (currentOffset < offset) { low = mid + 1; } else if (currentOffset > offset) { high = mid - 1; } } return Math.max(0, low - 1); }; const es$1 = (props, listCache, index, offset) => { const { total } = props; let exponent = 1; while (index < total && getItemFromCache$1(props, index, listCache).offset < offset) { index += exponent; exponent *= 2; } return bs$1(props, listCache, Math.floor(index / 2), Math.min(index, total - 1), offset); }; const getEstimatedTotalSize = ({ total }, { items, estimatedItemSize, lastVisitedIndex }) => { let totalSizeOfMeasuredItems = 0; if (lastVisitedIndex >= total) { lastVisitedIndex = total - 1; } if (lastVisitedIndex >= 0) { const item = items[lastVisitedIndex]; totalSizeOfMeasuredItems = item.offset + item.size; } const numUnmeasuredItems = total - lastVisitedIndex - 1; const totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedItemSize; return totalSizeOfMeasuredItems + totalSizeOfUnmeasuredItems; }; const DynamicSizeList = createList$1({ name: "ElDynamicSizeList", getItemOffset: (props, index, listCache) => getItemFromCache$1(props, index, listCache).offset, getItemSize: (_, index, { items }) => items[index].size, getEstimatedTotalSize, getOffset: (props, index, alignment, scrollOffset, listCache) => { const { height, layout, width } = props; const size = isHorizontal(layout) ? width : height; const item = getItemFromCache$1(props, index, listCache); const estimatedTotalSize = getEstimatedTotalSize(props, listCache); const maxOffset = Math.max(0, Math.min(estimatedTotalSize - size, item.offset)); const minOffset = Math.max(0, item.offset - size + item.size); if (alignment === SMART_ALIGNMENT) { if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) { alignment = AUTO_ALIGNMENT; } else { alignment = CENTERED_ALIGNMENT; } } switch (alignment) { case START_ALIGNMENT: { return maxOffset; } case END_ALIGNMENT: { return minOffset; } case CENTERED_ALIGNMENT: { return Math.round(minOffset + (maxOffset - minOffset) / 2); } case AUTO_ALIGNMENT: default: { if (scrollOffset >= minOffset && scrollOffset <= maxOffset) { return scrollOffset; } else if (scrollOffset < minOffset) { return minOffset; } else { return maxOffset; } } } }, getStartIndexForOffset: (props, offset, listCache) => findItem$1(props, listCache, offset), getStopIndexForStartIndex: (props, startIndex, scrollOffset, listCache) => { const { height, total, layout, width } = props; const size = isHorizontal(layout) ? width : height; const item = getItemFromCache$1(props, startIndex, listCache); const maxOffset = scrollOffset + size; let offset = item.offset + item.size; let stopIndex = startIndex; while (stopIndex < total - 1 && offset < maxOffset) { stopIndex++; offset += getItemFromCache$1(props, stopIndex, listCache).size; } return stopIndex; }, initCache({ estimatedItemSize = DEFAULT_DYNAMIC_LIST_ITEM_SIZE }, instance) { const cache = { items: {}, estimatedItemSize, lastVisitedIndex: -1 }; cache.clearCacheAfterIndex = (index, forceUpdate = true) => { var _a, _b; cache.lastVisitedIndex = Math.min(cache.lastVisitedIndex, index - 1); (_a = instance.exposed) == null ? void 0 : _a.getItemStyleCache(-1); if (forceUpdate) { (_b = instance.proxy) == null ? void 0 : _b.$forceUpdate(); } }; return cache; }, clearCache: false, validateProps: ({ itemSize }) => { } }); var DynamicSizeList$1 = DynamicSizeList; const useGridWheel = ({ atXEndEdge, atXStartEdge, atYEndEdge, atYStartEdge }, onWheelDelta) => { let frameHandle = null; let xOffset = 0; let yOffset = 0; const hasReachedEdge = (x, y) => { const xEdgeReached = x < 0 && atXStartEdge.value || x > 0 && atXEndEdge.value; const yEdgeReached = y < 0 && atYStartEdge.value || y > 0 && atYEndEdge.value; return xEdgeReached && yEdgeReached; }; const onWheel = (e) => { cAF(frameHandle); const x = e.deltaX; const y = e.deltaY; if (hasReachedEdge(xOffset, yOffset) && hasReachedEdge(xOffset + x, yOffset + y)) return; xOffset += x; yOffset += y; if (!isFF) { e.preventDefault(); } frameHandle = rAF(() => { onWheelDelta(xOffset, yOffset); xOffset = 0; yOffset = 0; }); }; return { hasReachedEdge, onWheel }; }; const createGrid = ({ name, clearCache, getColumnPosition, getColumnStartIndexForOffset, getColumnStopIndexForStartIndex, getEstimatedTotalHeight, getEstimatedTotalWidth, getColumnOffset, getRowOffset, getRowPosition, getRowStartIndexForOffset, getRowStopIndexForStartIndex, initCache, validateProps }) => { return vue.defineComponent({ name: name != null ? name : "ElVirtualList", props: virtualizedGridProps, emits: [ITEM_RENDER_EVT, SCROLL_EVT], setup(props, { emit, expose, slots }) { validateProps(props); const instance = vue.getCurrentInstance(); const cache = vue.ref(initCache(props, instance)); const windowRef = vue.ref(); const hScrollbar = vue.ref(); const vScrollbar = vue.ref(); const innerRef = vue.ref(null); const states = vue.ref({ isScrolling: false, scrollLeft: isNumber(props.initScrollLeft) ? props.initScrollLeft : 0, scrollTop: isNumber(props.initScrollTop) ? props.initScrollTop : 0, updateRequested: false, xAxisScrollDir: FORWARD, yAxisScrollDir: FORWARD }); const getItemStyleCache = useCache(); const parsedHeight = vue.computed(() => parseInt(`${props.height}`, 10)); const parsedWidth = vue.computed(() => parseInt(`${props.width}`, 10)); const columnsToRender = vue.computed(() => { const { totalColumn, totalRow, columnCache } = props; const { isScrolling, xAxisScrollDir, scrollLeft } = vue.unref(states); if (totalColumn === 0 || totalRow === 0) { return [0, 0, 0, 0]; } const startIndex = getColumnStartIndexForOffset(props, scrollLeft, vue.unref(cache)); const stopIndex = getColumnStopIndexForStartIndex(props, startIndex, scrollLeft, vue.unref(cache)); const cacheBackward = !isScrolling || xAxisScrollDir === BACKWARD ? Math.max(1, columnCache) : 1; const cacheForward = !isScrolling || xAxisScrollDir === FORWARD ? Math.max(1, columnCache) : 1; return [ Math.max(0, startIndex - cacheBackward), Math.max(0, Math.min(totalColumn - 1, stopIndex + cacheForward)), startIndex, stopIndex ]; }); const rowsToRender = vue.computed(() => { const { totalColumn, totalRow, rowCache } = props; const { isScrolling, yAxisScrollDir, scrollTop } = vue.unref(states); if (totalColumn === 0 || totalRow === 0) { return [0, 0, 0, 0]; } const startIndex = getRowStartIndexForOffset(props, scrollTop, vue.unref(cache)); const stopIndex = getRowStopIndexForStartIndex(props, startIndex, scrollTop, vue.unref(cache)); const cacheBackward = !isScrolling || yAxisScrollDir === BACKWARD ? Math.max(1, rowCache) : 1; const cacheForward = !isScrolling || yAxisScrollDir === FORWARD ? Math.max(1, rowCache) : 1; return [ Math.max(0, startIndex - cacheBackward), Math.max(0, Math.min(totalRow - 1, stopIndex + cacheForward)), startIndex, stopIndex ]; }); const estimatedTotalHeight = vue.computed(() => getEstimatedTotalHeight(props, vue.unref(cache))); const estimatedTotalWidth = vue.computed(() => getEstimatedTotalWidth(props, vue.unref(cache))); const windowStyle = vue.computed(() => { var _a; return [ { position: "relative", overflow: "hidden", WebkitOverflowScrolling: "touch", willChange: "transform" }, { direction: props.direction, height: isNumber(props.height) ? `${props.height}px` : props.height, width: isNumber(props.width) ? `${props.width}px` : props.width }, (_a = props.style) != null ? _a : {} ]; }); const innerStyle = vue.computed(() => { const width = `${vue.unref(estimatedTotalWidth)}px`; const height = `${vue.unref(estimatedTotalHeight)}px`; return { height, pointerEvents: vue.unref(states).isScrolling ? "none" : void 0, width }; }); const emitEvents = () => { const { totalColumn, totalRow } = props; if (totalColumn > 0 && totalRow > 0) { const [ columnCacheStart, columnCacheEnd, columnVisibleStart, columnVisibleEnd ] = vue.unref(columnsToRender); const [rowCacheStart, rowCacheEnd, rowVisibleStart, rowVisibleEnd] = vue.unref(rowsToRender); emit(ITEM_RENDER_EVT, columnCacheStart, columnCacheEnd, rowCacheStart, rowCacheEnd, columnVisibleStart, columnVisibleEnd, rowVisibleStart, rowVisibleEnd); } const { scrollLeft, scrollTop, updateRequested, xAxisScrollDir, yAxisScrollDir } = vue.unref(states); emit(SCROLL_EVT, xAxisScrollDir, scrollLeft, yAxisScrollDir, scrollTop, updateRequested); }; const onScroll = (e) => { const { clientHeight, clientWidth, scrollHeight, scrollLeft, scrollTop, scrollWidth } = e.currentTarget; const _states = vue.unref(states); if (_states.scrollTop === scrollTop && _states.scrollLeft === scrollLeft) { return; } let _scrollLeft = scrollLeft; if (isRTL(props.direction)) { switch (getRTLOffsetType()) { case RTL_OFFSET_NAG: _scrollLeft = -scrollLeft; break; case RTL_OFFSET_POS_DESC: _scrollLeft = scrollWidth - clientWidth - scrollLeft; break; } } states.value = { ..._states, isScrolling: true, scrollLeft: _scrollLeft, scrollTop: Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight)), updateRequested: false, xAxisScrollDir: getScrollDir(_states.scrollLeft, _scrollLeft), yAxisScrollDir: getScrollDir(_states.scrollTop, scrollTop) }; vue.nextTick(resetIsScrolling); emitEvents(); }; const onVerticalScroll = (distance, totalSteps) => { const height = vue.unref(parsedHeight); const offset = (estimatedTotalHeight.value - height) / totalSteps * distance; scrollTo({ scrollTop: Math.min(estimatedTotalHeight.value - height, offset) }); }; const onHorizontalScroll = (distance, totalSteps) => { const width = vue.unref(parsedWidth); const offset = (estimatedTotalWidth.value - width) / totalSteps * distance; scrollTo({ scrollLeft: Math.min(estimatedTotalWidth.value - width, offset) }); }; const { onWheel } = useGridWheel({ atXStartEdge: vue.computed(() => states.value.scrollLeft <= 0), atXEndEdge: vue.computed(() => states.value.scrollLeft >= estimatedTotalWidth.value), atYStartEdge: vue.computed(() => states.value.scrollTop <= 0), atYEndEdge: vue.computed(() => states.value.scrollTop >= estimatedTotalHeight.value) }, (x, y) => { var _a, _b, _c, _d; (_b = (_a = hScrollbar.value) == null ? void 0 : _a.onMouseUp) == null ? void 0 : _b.call(_a); (_d = (_c = hScrollbar.value) == null ? void 0 : _c.onMouseUp) == null ? void 0 : _d.call(_c); const width = vue.unref(parsedWidth); const height = vue.unref(parsedHeight); scrollTo({ scrollLeft: Math.min(states.value.scrollLeft + x, estimatedTotalWidth.value - width), scrollTop: Math.min(states.value.scrollTop + y, estimatedTotalHeight.value - height) }); }); const scrollTo = ({ scrollLeft = states.value.scrollLeft, scrollTop = states.value.scrollTop }) => { scrollLeft = Math.max(scrollLeft, 0); scrollTop = Math.max(scrollTop, 0); const _states = vue.unref(states); if (scrollTop === _states.scrollTop && scrollLeft === _states.scrollLeft) { return; } states.value = { ..._states, xAxisScrollDir: getScrollDir(_states.scrollLeft, scrollLeft), yAxisScrollDir: getScrollDir(_states.scrollTop, scrollTop), scrollLeft, scrollTop, updateRequested: true }; vue.nextTick(resetIsScrolling); }; 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); } }); expose({ windowRef, innerRef, getItemStyleCache, scrollTo, scrollToItem, states }); const renderScrollbars = () => { const { totalColumn, totalRow } = props; const width = vue.unref(parsedWidth); const height = vue.unref(parsedHeight); const estimatedWidth = vue.unref(estimatedTotalWidth); const estimatedHeight = vue.unref(estimatedTotalHeight); const { scrollLeft, scrollTop } = vue.unref(states); const horizontalScrollbar = vue.h(Scrollbar, { ref: hScrollbar, clientSize: width, layout: "horizontal", onScroll: onHorizontalScroll, ratio: width * 100 / estimatedWidth, scrollFrom: scrollLeft / (estimatedWidth - width), total: totalRow, visible: true }); const verticalScrollbar = vue.h(Scrollbar, { ref: vScrollbar, clientSize: height, layout: "vertical", onScroll: onVerticalScroll, ratio: height * 100 / estimatedHeight, scrollFrom: scrollTop / (estimatedHeight - height), total: totalColumn, visible: true }); return { horizontalScrollbar, verticalScrollbar }; }; const renderItems = () => { var _a; const [columnStart, columnEnd] = vue.unref(columnsToRender); const [rowStart, rowEnd] = vue.unref(rowsToRender); const { data, totalColumn, totalRow, useIsScrolling } = props; const children = []; if (totalRow > 0 && totalColumn > 0) { for (let row = rowStart; row <= rowEnd; row++) { for (let column = columnStart; column <= columnEnd; column++) { children.push((_a = slots.default) == null ? void 0 : _a.call(slots, { columnIndex: column, data, key: column, isScrolling: useIsScrolling ? vue.unref(states).isScrolling : void 0, style: getItemStyle(row, column), rowIndex: row })); } } } return children; }; const renderInner = () => { const Inner = vue.resolveDynamicComponent(props.innerElement); const children = renderItems(); return [ vue.h(Inner, { style: vue.unref(innerStyle), ref: innerRef }, !isString$1(Inner) ? { default: () => children } : children) ]; }; const renderWindow = () => { const Container = vue.resolveDynamicComponent(props.containerElement); const { horizontalScrollbar, verticalScrollbar } = renderScrollbars(); const Inner = renderInner(); return vue.h("div", { key: 0, class: "el-vg__wrapper" }, [ vue.h(Container, { class: props.className, style: vue.unref(windowStyle), onScroll, onWheel, ref: windowRef }, !isString$1(Container) ? { default: () => Inner } : Inner), horizontalScrollbar, verticalScrollbar ]); }; return renderWindow; } }); }; 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$z = vue.defineComponent({ props: { item: { type: Object, required: true }, style: Object, height: Number } }); function render$t(_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$z.render = render$t; script$z.__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, Object], default: CircleClose }, 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" }, scrollbarAlwaysOn: { type: Boolean, default: false } }; const OptionProps = { data: Array, disabled: Boolean, hovering: Boolean, item: Object, index: Number, style: Object, selected: Boolean, created: Boolean }; var script$y = vue.defineComponent({ props: OptionProps, emits: ["select", "hover"], setup(props, { emit }) { const { hoverItem, selectOptionClick } = useOption(props, { emit }); return { hoverItem, selectOptionClick }; } }); const _hoisted_1$k = ["aria-selected"]; function render$s(_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$k); } script$y.render = render$s; script$y.__file = "packages/components/select-v2/src/option-item.vue"; const selectV2InjectionKey = "ElSelectV2Injection"; var script$x = 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$a(target)) { return arr.includes(target); } return arr && arr.some((item) => { return getValueByPath(item, valueKey) === getValueByPath(target, valueKey); }); }; const isEqual = (selected, target) => { if (!isObject$a(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$z, { item, style: scoped.style, height: isSized ? listProps.itemSize : listProps.estimatedSize }); } const selected = isItemSelected(modelValue, item); const itemDisabled = isItemDisabled(modelValue, selected); return vue.h(script$y, { ...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, { ref: "listRef", className: "el-select-dropdown__list", data, height, width, total: data.length, scrollbarAlwaysOn: selectProps.scrollbarAlwaysOn, 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$x.__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$6(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$3(handleInput)) { handleInput(event); } } }; return { handleCompositionStart, handleCompositionUpdate, handleCompositionEnd }; } 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$1(); 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 iconComponent = vue.computed(() => props.remote && props.filterable ? "" : ArrowUp); const iconReverse = vue.computed(() => iconComponent.value && expanded.value ? "is-reverse" : ""); 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$6(v.options)) { const filtered = v.options.filter(isValidOption); if (filtered.length > 0) { return { ...v, options: filtered }; } } else { if (props.remote || isValidOption(v)) { return v; } } return null; }).filter((v) => v !== null)); }); const optionsAllDisabled = vue.computed(() => filteredOptions.value.every((option) => option.disabled)); const selectSize = 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$6(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$2(onInputChange, debounce.value); const handleQueryChange = (val) => { if (states.previousQuery === val) { return; } states.previousQuery = val; if (props.filterable && isFunction$3(props.filterMethod)) { props.filterMethod(val); } else if (props.filterable && props.remote && isFunction$3(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$a(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$a(item) ? getValueByPath(item, props.valueKey) : item; }; const getLabel = (item) => { return isObject$a(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, getValueKey(option)); if (index > -1) { selectedOptions = [ ...selectedOptions.slice(0, index), ...selectedOptions.slice(index + 1) ]; states.cachedOptions.splice(index, 1); removeNewOption(option); } else if (props.multipleLimit <= 0 || selectedOptions.length < props.multipleLimit) { selectedOptions = [...selectedOptions, getValueKey(option)]; states.cachedOptions.push(option); selectNewOption(option); updateHoveringIndex(idx); } update(selectedOptions); if (option.created) { states.query = ""; handleQueryChange(""); states.inputLength = 20; } if (props.filterable) { (_b = (_a = inputRef.value).focus) == null ? void 0 : _b.call(_a); onUpdateInputValue(""); } if (props.filterable) { states.calculatedWidth = calculatorRef.value.getBoundingClientRect().width; } resetInputHeight(); setSoftFocus(); } else { selectedIndex.value = idx; states.selectedLabel = option.label; update(getValueKey(option)); expanded.value = false; states.isComposing = false; states.isSilentBlur = byClick; selectNewOption(option); if (!option.created) { clearAllNewOption(); } updateHoveringIndex(idx); } }; const deleteTag = (event, tag) => { const 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$6(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) => getValueKey(option) === selected); if (~itemIndex) { states.cachedOptions.push(filteredOptions.value[itemIndex]); if (!initHovering) { updateHoveringIndex(itemIndex); } initHovering = true; } }); } else { states.cachedOptions = []; } } else { if (props.modelValue) { const options = filteredOptions.value; const selectedItemIndex = options.findIndex((option) => getValueKey(option) === 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, iconComponent, iconReverse, 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 script$w = vue.defineComponent({ name: "ElSelectV2", components: { ElSelectMenu: script$x, ElTag, ElPopper, ElIcon: ElIcon$1 }, 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({ ...vue.toRefs(props), height: API.popupHeight }), onSelect: API.onSelect, onHover: API.onHover, onKeyboardNavigate: API.onKeyboardNavigate, onKeyboardSelect: API.onKeyboardSelect }); return API; } }); const _hoisted_1$j = { key: 0 }; const _hoisted_2$g = { key: 1, class: "el-select-v2__selection" }; const _hoisted_3$e = { 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$6 = { class: "el-select-v2__selected-item el-select-v2__input-wrapper" }; const _hoisted_7$4 = ["id", "aria-labelledby", "aria-expanded", "autocomplete", "disabled", "name", "readonly", "unselectable"]; const _hoisted_8$4 = ["textContent"]; const _hoisted_9$2 = { class: "el-select-v2__suffix" }; const _hoisted_10$2 = { class: "el-select-v2__empty" }; function render$r(_ctx, _cache, $props, $setup, $data, $options) { const _component_el_tag = vue.resolveComponent("el-tag"); const _component_el_icon = vue.resolveComponent("el-icon"); 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[24] || (_cache[24] = vue.withModifiers((...args) => _ctx.toggleMenu && _ctx.toggleMenu(...args), ["stop"])), onMouseenter: _cache[25] || (_cache[25] = ($event) => _ctx.states.comboBoxHovering = true), onMouseleave: _cache[26] || (_cache[26] = ($event) => _ctx.states.comboBoxHovering = false) }, [ vue.createVNode(_component_el_popper, { ref: "popper", visible: _ctx.dropdownMenuVisible, "onUpdate:visible": _cache[22] || (_cache[22] = ($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[23] || (_cache[23] = ($event) => _ctx.states.inputValue = _ctx.states.displayInputValue) }, { trigger: vue.withCtx(() => { var _a; return [ 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$j, [ vue.renderSlot(_ctx.$slots, "prefix") ])) : vue.createCommentVNode("v-if", true), _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$g, [ _ctx.collapseTags && _ctx.modelValue.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$e, [ vue.createVNode(_component_el_tag, { closable: !_ctx.selectDisabled && !((_a = _ctx.states.cachedOptions[0]) == null ? void 0 : _a.disable), size: _ctx.collapseTagSize, type: "info", "disable-transitions": "", onClose: _cache[0] || (_cache[0] = ($event) => _ctx.deleteTag($event, _ctx.states.cachedOptions[0])) }, { default: vue.withCtx(() => { var _a2; return [ vue.createElementVNode("span", { class: "el-select-v2__tags-text", style: vue.normalizeStyle({ maxWidth: `${_ctx.tagMaxWidth}px` }) }, vue.toDisplayString((_a2 = _ctx.states.cachedOptions[0]) == null ? void 0 : _a2.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$6, [ 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$4), [ [_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$4)) : 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$2, [ _ctx.iconComponent ? vue.withDirectives((vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0, class: vue.normalizeClass(["el-select-v2__caret", "el-input__icon", _ctx.iconReverse]) }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent))) ]), _: 1 }, 8, ["class"])), [ [vue.vShow, !_ctx.showClearBtn] ]) : vue.createCommentVNode("v-if", true), _ctx.showClearBtn && _ctx.clearIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 1, class: "el-select-v2__caret el-input__icon", onClick: vue.withModifiers(_ctx.handleClear, ["prevent", "stop"]) }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.clearIcon))) ]), _: 1 }, 8, ["onClick"])) : 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, "scrollbar-always-on": _ctx.scrollbarAlwaysOn }, { default: vue.withCtx((scope) => [ vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(scope))) ]), empty: vue.withCtx(() => [ vue.renderSlot(_ctx.$slots, "empty", {}, () => [ vue.createElementVNode("p", _hoisted_10$2, vue.toDisplayString(_ctx.emptyText ? _ctx.emptyText : ""), 1) ]) ]), _: 3 }, 8, ["data", "width", "hovering-index", "scrollbar-always-on"]) ]), _: 3 }, 8, ["visible", "append-to-body", "popper-class", "popper-options", "effect", "onBeforeEnter"]) ], 34)), [ [_directive_click_outside, _ctx.handleClickOutside, _ctx.popperRef] ]); } script$w.render = render$r; script$w.__file = "packages/components/select-v2/src/select.vue"; script$w.install = (app) => { app.component(script$w.name, script$w); }; const _Select = script$w; const ElSelectV2 = _Select; var script$v = vue.defineComponent({ name: "ImgPlaceholder" }); const _hoisted_1$i = { viewBox: "0 0 1024 1024", xmlns: "http://www.w3.org/2000/svg" }; const _hoisted_2$f = /* @__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$d = [ _hoisted_2$f ]; function render$q(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$i, _hoisted_3$d); } script$v.render = render$q; script$v.__file = "packages/components/skeleton/src/image-placeholder.vue"; var script$u = vue.defineComponent({ name: "ElSkeletonItem", components: { [script$v.name]: script$v }, props: { variant: { type: String, default: "text" } } }); function render$p(_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$u.render = render$p; script$u.__file = "packages/components/skeleton/src/item.vue"; var script$t = vue.defineComponent({ name: "ElSkeleton", components: { [script$u.name]: script$u }, 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$o(_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$t.render = render$o; script$t.__file = "packages/components/skeleton/src/index.vue"; const ElSkeleton = withInstall(script$t, { SkeletonItem: script$u }); const ElSkeletonItem = withNoopInstall(script$u); 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$2(() => { showTooltip.value && (tooltipVisible.value = true); }, 50); const hideTooltip = debounce$2(() => { 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 = async (newPosition) => { 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; } await 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$s = 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$n(_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$s.render = render$n; script$s.__file = "packages/components/slider/src/button.vue"; var script$r = 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$r.__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] })); }); }; 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 setFirstValue = (firstValue) => { initData.firstValue = firstValue; _emit(props.range ? [minValue.value, maxValue.value] : firstValue); }; const setSecondValue = (secondValue) => { initData.secondValue = secondValue; if (props.range) { _emit([minValue.value, maxValue.value]); } }; const _emit = (val) => { emit(UPDATE_MODEL_EVENT, val); emit(INPUT_EVENT, val); }; const emitChange = async () => { await vue.nextTick(); emit(CHANGE_EVENT, props.range ? [minValue.value, maxValue.value] : props.modelValue); }; const 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, setFirstValue, setSecondValue }; }; 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 script$q = vue.defineComponent({ name: "ElSlider", components: { ElInputNumber, SliderButton: script$s, SliderMarker: script$r }, 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, setFirstValue, setSecondValue } = 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", { ...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, setFirstValue, setSecondValue, 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(() => 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 () => { 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); await vue.nextTick(); resetSize(); }); vue.onBeforeUnmount(() => { off(window, "resize", resetSize); }); return { sliderWrapper }; }; const _hoisted_1$h = ["aria-valuemin", "aria-valuemax", "aria-orientation", "aria-disabled"]; const _hoisted_2$e = { key: 1 }; const _hoisted_3$c = { class: "el-slider__marks" }; function render$m(_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", "model-value": _ctx.firstValue, 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, "onUpdate:modelValue": _ctx.setFirstValue, onChange: _ctx.emitChange }, null, 8, ["model-value", "step", "disabled", "controls", "min", "max", "debounce", "size", "onUpdate:modelValue", "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[0] || (_cache[0] = (...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", "model-value": _ctx.firstValue, vertical: _ctx.vertical, "tooltip-class": _ctx.tooltipClass, "onUpdate:modelValue": _ctx.setFirstValue }, null, 8, ["model-value", "vertical", "tooltip-class", "onUpdate:modelValue"]), _ctx.range ? (vue.openBlock(), vue.createBlock(_component_slider_button, { key: 0, ref: "secondButton", "model-value": _ctx.secondValue, vertical: _ctx.vertical, "tooltip-class": _ctx.tooltipClass, "onUpdate:modelValue": _ctx.setSecondValue }, null, 8, ["model-value", "vertical", "tooltip-class", "onUpdate:modelValue"])) : vue.createCommentVNode("v-if", true), _ctx.showStops ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$e, [ (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$c, [ (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$h); } script$q.render = render$m; script$q.__file = "packages/components/slider/src/index.vue"; script$q.install = (app) => { app.component(script$q.name, script$q); }; const _Slider = script$q; const ElSlider = _Slider; const spaceItem = buildProps({ prefixCls: { type: String, default: "el-space" } }); var script$p = vue.defineComponent({ props: spaceItem, setup(props) { const classes = vue.computed(() => [`${props.prefixCls}__item`]); return { classes }; } }); function render$l(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createElementBlock("div", { class: vue.normalizeClass(_ctx.classes) }, [ vue.renderSlot(_ctx.$slots, "default") ], 2); } script$p.render = render$l; script$p.__file = "packages/components/space/src/item.vue"; const SIZE_MAP = { mini: 4, small: 8, medium: 12, large: 16 }; 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); const containerStyle = vue.computed(() => { const wrapKls = props.wrap || props.fill ? { flexWrap: "wrap", marginBottom: `-${verticalSize.value}px` } : {}; const alignment = { alignItems: props.alignment }; return [wrapKls, alignment, props.style]; }); const itemStyle = vue.computed(() => { const itemBaseStyle = { paddingBottom: `${verticalSize.value}px`, marginRight: `${horizontalSize.value}px` }; const fillStyle = props.fill ? { flexGrow: 1, minWidth: `${props.fillRatio}%` } : {}; return [itemBaseStyle, fillStyle]; }); vue.watchEffect(() => { const { size = "small", wrap, direction: dir, fill } = props; if (Array.isArray(size)) { const [h = 0, v = 0] = size; horizontalSize.value = h; verticalSize.value = v; } else { let val; if (isNumber(size)) { val = size; } else { val = SIZE_MAP[size] || SIZE_MAP.small; } if ((wrap || fill) && dir === "horizontal") { horizontalSize.value = verticalSize.value = val; } else { if (dir === "horizontal") { horizontalSize.value = val; verticalSize.value = 0; } else { verticalSize.value = val; horizontalSize.value = 0; } } } }); return { classes, containerStyle, itemStyle }; } const spaceProps = buildProps({ direction: { type: String, values: ["horizontal", "vertical"], default: "horizontal" }, class: { type: definePropType([ String, Object, Array ]), default: "" }, style: { type: definePropType([String, Array, Object]), default: "" }, alignment: { type: definePropType(String), default: "center" }, prefixCls: { type: String }, spacer: { type: definePropType([Object, String, Number, Array]), default: null, validator: (val) => vue.isVNode(val) || isNumber(val) || isString$1(val) }, wrap: { type: Boolean, default: false }, fill: { type: Boolean, default: false }, fillRatio: { type: Number, default: 100 }, size: { type: [String, Array, Number], values: componentSize, validator: (val) => { return isNumber(val) || isArray$6(val) && val.length === 2 && val.every((i) => isNumber(i)); } } }); var Space = vue.defineComponent({ name: "ElSpace", props: spaceProps, setup(props, { slots }) { const { classes, containerStyle, itemStyle } = useSpace(props); return () => { var _a; const { spacer, prefixCls, direction } = props; const children = vue.renderSlot(slots, "default", { key: 0 }, () => []); if (((_a = children.children) != null ? _a : []).length === 0) return null; if (isArray$6(children.children)) { let extractedChildren = []; children.children.forEach((child, loopKey) => { if (isFragment(child)) { if (isArray$6(child.children)) { child.children.forEach((nested, key) => { extractedChildren.push(vue.createVNode(script$p, { style: itemStyle.value, prefixCls, key: `nested-${key}` }, { default: () => [nested] }, PatchFlags.PROPS | PatchFlags.STYLE, ["style", "prefixCls"])); }); } } else if (isValidElementNode(child)) { extractedChildren.push(vue.createVNode(script$p, { style: itemStyle.value, 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) => { const children2 = [...acc, child]; if (idx !== len) { children2.push(vue.createVNode("span", { style: [ itemStyle.value, direction === "vertical" ? "width: 100%" : null ], key: idx }, [ vue.isVNode(spacer) ? spacer : vue.createTextVNode(spacer, PatchFlags.TEXT) ], PatchFlags.STYLE)); } return children2; }, []); } return vue.createVNode("div", { class: classes.value, style: containerStyle.value }, extractedChildren, PatchFlags.STYLE | PatchFlags.CLASS); } return children.children; }; } }); const ElSpace = withInstall(Space); var script$o = 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$k(_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$o.render = render$k; script$o.__file = "packages/components/steps/src/index.vue"; var script$n = vue.defineComponent({ name: "ElStep", components: { ElIcon, Close, Check }, props: { title: { type: String, default: "" }, icon: { type: [String, Object], 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$g = { class: "el-step__line" }; const _hoisted_2$d = { key: 1, class: "el-step__icon-inner" }; const _hoisted_3$b = { class: "el-step__main" }; const _hoisted_4$8 = { key: 0, class: "el-step__arrow" }; function render$j(_ctx, _cache, $props, $setup, $data, $options) { const _component_el_icon = vue.resolveComponent("el-icon"); const _component_check = vue.resolveComponent("check"); const _component_close = vue.resolveComponent("close"); 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$g, [ 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.createBlock(_component_el_icon, { key: 0, class: "el-step__icon-inner" }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon))) ]), _: 1 })) : vue.createCommentVNode("v-if", true), !_ctx.icon && !_ctx.isSimple ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$d, vue.toDisplayString(_ctx.index + 1), 1)) : vue.createCommentVNode("v-if", true) ]) : (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 1, class: "el-step__icon-inner is-status" }, { default: vue.withCtx(() => [ _ctx.currentStatus === "success" ? (vue.openBlock(), vue.createBlock(_component_check, { key: 0 })) : (vue.openBlock(), vue.createBlock(_component_close, { key: 1 })) ]), _: 1 })) ], 2) ], 2), vue.createCommentVNode(" title & description "), vue.createElementVNode("div", _hoisted_3$b, [ 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$n.render = render$j; script$n.__file = "packages/components/steps/src/item.vue"; const ElSteps = withInstall(script$o, { Step: script$n }); const ElStep = withNoopInstall(script$n); var script$m = vue.defineComponent({ name: "ElSwitch", components: { ElIcon: ElIcon$1, Loading: Loading$2 }, 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 }, inlinePrompt: { type: Boolean, default: false }, activeIcon: { type: [String, Object], default: "" }, inactiveIcon: { type: [String, Object], 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` 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$f = ["aria-checked", "aria-disabled"]; const _hoisted_2$c = ["id", "name", "true-value", "false-value", "disabled"]; const _hoisted_3$a = ["aria-hidden"]; const _hoisted_4$7 = { key: 0, class: "el-switch__inner" }; const _hoisted_5$6 = ["aria-hidden"]; const _hoisted_6$5 = ["aria-hidden"]; const _hoisted_7$3 = { class: "el-switch__action" }; const _hoisted_8$3 = ["aria-hidden"]; function render$i(_ctx, _cache, $props, $setup, $data, $options) { const _component_el_icon = vue.resolveComponent("el-icon"); const _component_loading = vue.resolveComponent("loading"); 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$c), !_ctx.inlinePrompt && (_ctx.inactiveIcon || _ctx.inactiveText) ? (vue.openBlock(), vue.createElementBlock("span", { key: 0, class: vue.normalizeClass([ "el-switch__label", "el-switch__label--left", !_ctx.checked ? "is-active" : "" ]) }, [ _ctx.inactiveIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0 }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.inactiveIcon))) ]), _: 1 })) : vue.createCommentVNode("v-if", true), !_ctx.inactiveIcon && _ctx.inactiveText ? (vue.openBlock(), vue.createElementBlock("span", { key: 1, "aria-hidden": _ctx.checked }, vue.toDisplayString(_ctx.inactiveText), 9, _hoisted_3$a)) : 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" }) }, [ _ctx.inlinePrompt ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$7, [ _ctx.activeIcon || _ctx.inactiveIcon ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [ _ctx.activeIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0, class: vue.normalizeClass(["is-icon", _ctx.checked ? "is-show" : "is-hide"]) }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.activeIcon))) ]), _: 1 }, 8, ["class"])) : vue.createCommentVNode("v-if", true), _ctx.inactiveIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 1, class: vue.normalizeClass(["is-icon", !_ctx.checked ? "is-show" : "is-hide"]) }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.inactiveIcon))) ]), _: 1 }, 8, ["class"])) : vue.createCommentVNode("v-if", true) ], 64)) : _ctx.activeText || _ctx.inactiveIcon ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [ _ctx.activeText ? (vue.openBlock(), vue.createElementBlock("span", { key: 0, class: vue.normalizeClass(["is-text", _ctx.checked ? "is-show" : "is-hide"]), "aria-hidden": !_ctx.checked }, vue.toDisplayString(_ctx.activeText.substr(0, 1)), 11, _hoisted_5$6)) : vue.createCommentVNode("v-if", true), _ctx.inactiveText ? (vue.openBlock(), vue.createElementBlock("span", { key: 1, class: vue.normalizeClass(["is-text", !_ctx.checked ? "is-show" : "is-hide"]), "aria-hidden": _ctx.checked }, vue.toDisplayString(_ctx.inactiveText.substr(0, 1)), 11, _hoisted_6$5)) : vue.createCommentVNode("v-if", true) ], 64)) : vue.createCommentVNode("v-if", true) ])) : vue.createCommentVNode("v-if", true), vue.createElementVNode("div", _hoisted_7$3, [ _ctx.loading ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0, class: "is-loading" }, { default: vue.withCtx(() => [ vue.createVNode(_component_loading) ]), _: 1 })) : vue.createCommentVNode("v-if", true) ]) ], 4), !_ctx.inlinePrompt && (_ctx.activeIcon || _ctx.activeText) ? (vue.openBlock(), vue.createElementBlock("span", { key: 1, class: vue.normalizeClass([ "el-switch__label", "el-switch__label--right", _ctx.checked ? "is-active" : "" ]) }, [ _ctx.activeIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0 }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.activeIcon))) ]), _: 1 })) : vue.createCommentVNode("v-if", true), !_ctx.activeIcon && _ctx.activeText ? (vue.openBlock(), vue.createElementBlock("span", { key: 1, "aria-hidden": !_ctx.checked }, vue.toDisplayString(_ctx.activeText), 9, _hoisted_8$3)) : vue.createCommentVNode("v-if", true) ], 2)) : vue.createCommentVNode("v-if", true) ], 10, _hoisted_1$f); } script$m.render = render$i; script$m.__file = "packages/components/switch/src/index.vue"; script$m.install = (app) => { app.component(script$m.name, script$m); }; const _Switch = script$m; const ElSwitch = _Switch; 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$3 = 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$3(value) && "$value" in value) value = value.$value; } return [isObject$3(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, { 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 } }; } function useTree$1(watcherData) { const expandRowKeys = vue.ref([]); const treeData = vue.ref({}); const indent = vue.ref(16); const lazy = vue.ref(false); const lazyTreeNodeMap = vue.ref({}); const lazyColumnIdentifier = vue.ref("hasChildren"); const childrenColumnName = vue.ref("children"); const instance = vue.getCurrentInstance(); const normalizedData = vue.computed(() => { if (!watcherData.rowKey.value) return {}; const data = watcherData.data.value || []; return normalize(data); }); const normalizedLazyNode = vue.computed(() => { const rowKey = watcherData.rowKey.value; const keys = Object.keys(lazyTreeNodeMap.value); const res = {}; if (!keys.length) return res; keys.forEach((key) => { if (lazyTreeNodeMap.value[key].length) { const item = { children: [] }; lazyTreeNodeMap.value[key].forEach((row) => { const currentRowKey = getRowIdentity(row, rowKey); item.children.push(currentRowKey); if (row[lazyColumnIdentifier.value] && !res[currentRowKey]) { res[currentRowKey] = { children: [] }; } }); res[key] = item; } }); return res; }); const normalize = (data) => { const rowKey = watcherData.rowKey.value; const res = {}; walkTreeNode(data, (parent, children, level) => { const parentId = getRowIdentity(parent, rowKey); if (Array.isArray(children)) { res[parentId] = { children: children.map((row) => getRowIdentity(row, rowKey)), level }; } else if (lazy.value) { res[parentId] = { children: [], lazy: true, level }; } }, childrenColumnName.value, lazyColumnIdentifier.value); return res; }; const updateTreeData = (ifChangeExpandRowKeys = false, ifExpandAll = ((_a) => (_a = instance.store) == null ? void 0 : _a.states.defaultExpandAll.value)()) => { var _a2; const nested = normalizedData.value; const normalizedLazyNode_ = normalizedLazyNode.value; const keys = Object.keys(nested); const newTreeData = {}; if (keys.length) { const oldTreeData = vue.unref(treeData); const rootLazyRowKeys = []; const getExpanded = (oldValue, key) => { if (ifChangeExpandRowKeys) { if (expandRowKeys.value) { return ifExpandAll || expandRowKeys.value.includes(key); } else { return !!(ifExpandAll || (oldValue == null ? void 0 : oldValue.expanded)); } } else { const included = ifExpandAll || expandRowKeys.value && expandRowKeys.value.includes(key); return !!((oldValue == null ? void 0 : oldValue.expanded) || included); } }; keys.forEach((key) => { const oldValue = oldTreeData[key]; const newValue = { ...nested[key] }; newValue.expanded = getExpanded(oldValue, key); if (newValue.lazy) { const { loaded = false, loading = false } = oldValue || {}; newValue.loaded = !!loaded; newValue.loading = !!loading; rootLazyRowKeys.push(key); } newTreeData[key] = newValue; }); const lazyKeys = Object.keys(normalizedLazyNode_); if (lazy.value && lazyKeys.length && rootLazyRowKeys.length) { lazyKeys.forEach((key) => { const oldValue = oldTreeData[key]; const lazyNodeChildren = normalizedLazyNode_[key].children; if (rootLazyRowKeys.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(() => expandRowKeys.value, () => { updateTreeData(true); }); vue.watch(() => normalizedData.value, () => { updateTreeData(); }); vue.watch(() => normalizedLazyNode.value, () => { updateTreeData(); }); const updateTreeExpandKeys = (value) => { expandRowKeys.value = value; updateTreeData(); }; const toggleTreeExpansion = (row, expanded) => { instance.store.assertRowKey(); const rowKey = watcherData.rowKey.value; const id = getRowIdentity(row, rowKey); const data = id && treeData.value[id]; if (id && data && "expanded" in data) { const oldExpanded = data.expanded; expanded = typeof expanded === "undefined" ? !data.expanded : expanded; treeData.value[id].expanded = expanded; if (oldExpanded !== expanded) { instance.emit("expand-change", row, expanded); } instance.store.updateTableScrollY(); } }; const loadOrToggle = (row) => { instance.store.assertRowKey(); const rowKey = watcherData.rowKey.value; const id = getRowIdentity(row, rowKey); const data = treeData.value[id]; if (lazy.value && data && "loaded" in data && !data.loaded) { loadData(row, id, data); } else { toggleTreeExpansion(row, void 0); } }; const loadData = (row, key, treeNode) => { const { load } = instance.props; if (load && !treeData.value[key].loaded) { treeData.value[key].loading = true; load(row, treeNode, (data) => { if (!Array.isArray(data)) { throw new 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 } }; } const sortData = (data, states) => { const sortingColumn = states.sortingColumn; if (!sortingColumn || typeof sortingColumn.sortable === "string") { return data; } return orderBy(data, states.sortProp, states.sortOrder, sortingColumn.sortMethod, sortingColumn.sortBy); }; const doFlattenColumns = (columns) => { const result = []; columns.forEach((column) => { if (column.children) { result.push.apply(result, doFlattenColumns(column.children)); } else { result.push(column); } }); return result; }; function useWatcher$1() { var _a; const instance = vue.getCurrentInstance(); const { size: tableSize } = vue.toRefs((_a = instance.proxy) == null ? void 0 : _a.$props); const rowKey = vue.ref(null); const data = vue.ref([]); const _data = vue.ref([]); const isComplex = vue.ref(false); const _columns = vue.ref([]); const originColumns = vue.ref([]); const columns = vue.ref([]); const fixedColumns = vue.ref([]); const rightFixedColumns = vue.ref([]); const leafColumns = vue.ref([]); const fixedLeafColumns = vue.ref([]); const rightFixedLeafColumns = vue.ref([]); const leafColumnsLength = vue.ref(0); const fixedLeafColumnsLength = vue.ref(0); const rightFixedLeafColumnsLength = vue.ref(0); const isAllSelected = vue.ref(false); const selection = vue.ref([]); const reserveSelection = vue.ref(false); const selectOnIndeterminate = vue.ref(false); const selectable = vue.ref(null); const filters = vue.ref({}); const filteredData = vue.ref(null); const sortingColumn = vue.ref(null); const sortProp = vue.ref(null); const sortOrder = vue.ref(null); const hoverRow = vue.ref(null); vue.watch(data, () => instance.state && scheduleLayout(false), { deep: true }); const assertRowKey = () => { if (!rowKey.value) throw new Error("[ElTable] prop row-key is required"); }; const 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()); } else { if (selection.value.length) { selection.value = []; instance.emit("selection-change", []); } } }; const toggleRowSelection = (row, selected = void 0, emitChange = true) => { const changed = toggleRowStatus(selection.value, row, selected); if (changed) { const newSelection = (selection.value || []).slice(); if (emitChange) { instance.emit("select", newSelection, row); } instance.emit("selection-change", newSelection); } }; const _toggleAllSelection = () => { var _a2, _b; const value = selectOnIndeterminate.value ? !isAllSelected.value : !(isAllSelected.value || selection.value.length); isAllSelected.value = value; let selectionChanged = false; let childrenCount = 0; const rowKey2 = (_b = (_a2 = instance == null ? void 0 : instance.store) == null ? void 0 : _a2.states) == null ? void 0 : _b.rowKey.value; data.value.forEach((row, index) => { const rowIndex = index + childrenCount; if (selectable.value) { if (selectable.value.call(null, row, rowIndex) && toggleRowStatus(selection.value, row, value)) { selectionChanged = true; } } else { if (toggleRowStatus(selection.value, row, value)) { selectionChanged = true; } } childrenCount += getChildrenCount(getRowIdentity(row, rowKey2)); }); if (selectionChanged) { instance.emit("selection-change", selection.value ? selection.value.slice() : []); } instance.emit("select-all", selection.value); }; const updateSelectionByRowKey = () => { const selectedMap = getKeysMap(selection.value, rowKey.value); data.value.forEach((row) => { const rowId = getRowIdentity(row, rowKey.value); const rowInfo = selectedMap[rowId]; if (rowInfo) { selection.value[rowInfo.index] = row; } }); }; const updateAllSelected = () => { var _a2, _b, _c; if (((_a2 = data.value) == null ? void 0 : _a2.length) === 0) { isAllSelected.value = false; return; } let selectedMap; if (rowKey.value) { selectedMap = getKeysMap(selection.value, rowKey.value); } const isSelected2 = function(row) { if (selectedMap) { return !!selectedMap[getRowIdentity(row, rowKey.value)]; } else { return selection.value.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 _a2; if (!instance || !instance.store) return 0; const { treeData } = instance.store.states; let count = 0; const children = (_a2 = treeData.value[rowKey2]) == null ? void 0 : _a2.children; if (children) { count += children.length; children.forEach((childKey) => { count += getChildrenCount(childKey); }); } return count; }; const updateFilters = (columns2, values) => { if (!Array.isArray(columns2)) { columns2 = [columns2]; } const filters_ = {}; columns2.forEach((col) => { filters.value[col.id] = values; filters_[col.columnKey || col.id] = values; }); return filters_; }; const updateSort = (column, prop, order) => { if (sortingColumn.value && sortingColumn.value !== column) { sortingColumn.value.order = null; } sortingColumn.value = column; sortProp.value = prop; sortOrder.value = order; }; const execFilter = () => { let sourceData = vue.unref(_data); Object.keys(filters.value).forEach((columnId) => { const values = filters.value[columnId]; if (!values || values.length === 0) return; const column = getColumnById({ columns: columns.value }, columnId); if (column && column.filterMethod) { sourceData = sourceData.filter((row) => { return values.some((value) => column.filterMethod.call(null, value, row, column)); }); } }); filteredData.value = sourceData; }; const execSort = () => { data.value = sortData(filteredData.value, { sortingColumn: sortingColumn.value, sortProp: sortProp.value, sortOrder: sortOrder.value }); }; const execQuery = (ignore = void 0) => { if (!(ignore && ignore.filter)) { execFilter(); } execSort(); }; const clearFilter = (columnKeys) => { const { 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$1({ 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: { tableSize, rowKey, data, _data, isComplex, _columns, originColumns, columns, fixedColumns, rightFixedColumns, leafColumns, fixedLeafColumns, rightFixedLeafColumns, leafColumnsLength, fixedLeafColumnsLength, rightFixedLeafColumnsLength, isAllSelected, selection, reserveSelection, selectOnIndeterminate, selectable, filters, filteredData, sortingColumn, sortProp, sortOrder, hoverRow, ...expandStates, ...treeStates, ...currentData } }; } function replaceColumn(array, column) { return array.map((item) => { var _a; if (item.id === column.id) { return column; } else if ((_a = item.children) == null ? void 0 : _a.length) { item.children = replaceColumn(item.children, column); } return item; }); } function sortColumn(array) { array.forEach((item) => { var _a, _b; item.no = (_a = item.getColumnIndex) == null ? void 0 : _a.call(item); if ((_b = item.children) == null ? void 0 : _b.length) { sortColumn(item.children); } }); array.sort((cur, pre) => cur.no - pre.no); } function useStore() { const instance = vue.getCurrentInstance(); const watcher = useWatcher$1(); const 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 { ...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$2(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$l = vue.defineComponent({ name: "ElTableFilterPanel", components: { ElCheckbox, ElCheckboxGroup, ElScrollbar, ElPopper, ElIcon, ArrowDown, ArrowUp }, 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$e = { key: 0 }; const _hoisted_2$b = { class: "el-table-filter__content" }; const _hoisted_3$9 = { class: "el-table-filter__bottom" }; const _hoisted_4$6 = ["disabled"]; const _hoisted_5$5 = { key: 1, class: "el-table-filter__list" }; const _hoisted_6$4 = ["label", "onClick"]; function render$h(_ctx, _cache, $props, $setup, $data, $options) { const _component_el_checkbox = vue.resolveComponent("el-checkbox"); const _component_el_checkbox_group = vue.resolveComponent("el-checkbox-group"); const _component_el_scrollbar = vue.resolveComponent("el-scrollbar"); const _component_arrow_up = vue.resolveComponent("arrow-up"); const _component_arrow_down = vue.resolveComponent("arrow-down"); const _component_el_icon = vue.resolveComponent("el-icon"); const _component_el_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$e, [ vue.createElementVNode("div", _hoisted_2$b, [ 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$9, [ 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$4); }), 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.createVNode(_component_el_icon, null, { default: vue.withCtx(() => [ _ctx.column.filterOpened ? (vue.openBlock(), vue.createBlock(_component_arrow_up, { key: 0 })) : (vue.openBlock(), vue.createBlock(_component_arrow_down, { key: 1 })) ]), _: 1 }) ], 512), [ [_directive_click_outside, _ctx.hideFilterPanel, _ctx.popperPaneRef] ]) ]), _: 1 }, 8, ["visible", "placement", "effect"]); } script$l.render = render$h; script$l.__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); requestAnimationFrame(() => { props.store.scheduleLayout(false, true); }); document.body.style.cursor = ""; dragging.value = false; draggingColumn.value = null; dragState.value = {}; emit("set-drag-visible", false); } document.removeEventListener("mousemove", handleMouseMove2); document.removeEventListener("mouseup", handleMouseUp); document.onselectstart = null; document.ondragstart = null; setTimeout(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$l, { 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$2(function(index) { props.store.commit("setHoverRow", index); }, 30); const handleMouseLeave = debounce$2(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 }; } 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 = { ...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 || ""; const tdChildren = cellChildren(cellIndex, column, data); 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, { ...row, tooltipEffect }), onMouseleave: handleCellMouseLeave }, [tdChildren]); })); }; const cellChildren = (cellIndex, column, data) => { return column.renderCell(data); }; const wrappedRowRender = (row, $index) => { const store = props.store; const { isRowExpanded, assertRowKey } = store; const { treeData, lazyTreeNodeMap, childrenColumnName, rowKey } = store.states; const 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 = { ...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 }; } function useStyle(props, layout, store, table) { const $ELEMENT = useGlobalConfig$1(); 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(); requestAnimationFrame(syncPostion); }; vue.onMounted(async () => { setScrollClass("is-scrolling-left"); store.updateColumns(); await vue.nextTick(); bindEvents(); requestAnimationFrame(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$k = 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$2(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$d = { ref: "hiddenColumns", class: "hidden-columns" }; const _hoisted_2$a = { key: 0, ref: "headerWrapper", class: "el-table__header-wrapper" }; const _hoisted_3$8 = { 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$3 = { 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$1 = { key: 1, ref: "rightFixedFooterWrapper", class: "el-table__fixed-footer-wrapper" }; const _hoisted_10$1 = { ref: "resizeProxy", class: "el-table__column-resize-proxy" }; function render$g(_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$d, [ vue.renderSlot(_ctx.$slots, "default") ], 512), _ctx.showHeader ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_2$a, [ 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$8, [ 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$3, [ 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$1, [ 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$1, null, 512), [ [vue.vShow, _ctx.resizeProxyVisible] ]) ], 38); } script$k.render = render$g; script$k.__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(), size: store.states.tableSize.value, indeterminate: store.states.selection.value.length > 0 && !store.states.isAllSelected.value, "onUpdate:modelValue": store.toggleAllSelection, modelValue: store.states.isAllSelected.value }); }, renderCell({ row, column, store, $index }) { return vue.h(ElCheckbox, { disabled: column.selectable ? !column.selectable.call(null, row, $index) : false, size: store.states.tableSize.value, onChange: () => { store.commit("rowSelectedChanged", row); }, onClick: (event) => event.stopPropagation(), modelValue: store.isSelected(row) }); }, sortable: false, resizable: false }, index: { renderHeader({ column }) { return column.label || "#"; }, renderCell({ column, $index }) { let i = $index + 1; const index = column.index; if (typeof index === "number") { i = $index + index; } else if (typeof index === "function") { i = index($index); } return vue.h("div", {}, [i]); }, sortable: false }, expand: { renderHeader({ column }) { return column.label || ""; }, renderCell({ row, store }) { 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 }, { default: () => { return [ vue.h(ElIcon, null, { default: () => { return [vue.h(ArrowRight)]; } }) ]; } }); }, 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 icon = ArrowRight; if (treeNode.loading) { icon = Loading$2; } ele.push(vue.h("div", { class: expandClasses, onClick: callback }, { default: () => { return [ vue.h(ElIcon, { class: { "is-loading": treeNode.loading } }, { default: () => [vue.h(icon)] }) ]; } })); } 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); } } }; let columnIdSeed = 1; var ElTableColumn$1 = vue.defineComponent({ name: "ElTableColumn", components: { ElCheckbox }, props: defaultProps, setup(props, { slots }) { const instance = vue.getCurrentInstance(); const columnConfig = vue.ref({}); const owner = vue.computed(() => { let parent2 = instance.parent; while (parent2 && !parent2.tableId) { parent2 = parent2.parent; } return parent2; }); const { registerNormalWatchers, registerComplexWatchers } = useWatcher(owner, props); const { columnId, isSubColumn, realHeaderAlign, columnOrTableParent, setColumnWidth, setColumnForcedProps, setColumnRenders, getPropsData, getColumnElIndex, realAlign } = useRender(props, slots, owner); const parent = columnOrTableParent.value; columnId.value = `${parent.tableId || parent.columnId}_column_${columnIdSeed++}`; vue.onBeforeMount(() => { isSubColumn.value = owner.value !== parent; const type = props.type || "default"; const sortable = props.sortable === "" ? true : props.sortable; const defaults = { ...cellStarts[type], id: columnId.value, type, property: props.prop || props.property, align: realAlign, headerAlign: realHeaderAlign, showOverflowTooltip: props.showOverflowTooltip || props.showTooltipWhenOverflow, filterable: props.filters || props.filterMethod, filteredValue: [], filterPlacement: "", isColumnGroup: false, 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" || childNode.shapeFlag & 2) { 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$k, { TableColumn: ElTableColumn$1 }); const ElTableColumn = withNoopInstall(ElTableColumn$1); var script$j = 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$f(_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$j.render = render$f; script$j.__file = "packages/components/tabs/src/tab-bar.vue"; var script$i = vue.defineComponent({ name: "ElTabNav", components: { TabBar: script$j }, 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(ElIcon, {}, { default: () => vue.h(ArrowLeft) })]), vue.h("span", { class: [ "el-tabs__nav-next", scrollable.next ? "" : "is-disabled" ], onClick: scrollNext }, [vue.h(ElIcon, {}, { default: () => vue.h(ArrowRight) })]) ] : 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(ElIcon, { class: "is-icon-close", onClick: (ev) => { onTabRemove(pane, ev); } }, { default: () => vue.h(Close) }) : 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$j, { tabs: [...panes] }) : null, tabs ]) ]) ]); } }); script$i.__file = "packages/components/tabs/src/tab-nav.vue"; var Tabs = vue.defineComponent({ name: "ElTabs", components: { TabNav: script$i }, 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(ElIcon$1, { class: "is-icon-plus" }, { default: () => vue.h(Plus) })]) : null; const header = vue.h("div", { class: ["el-tabs__header", `is-${tabPosition}`] }, [ newButton, vue.h(script$i, { 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$h = 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$c = ["id", "aria-hidden", "aria-labelledby"]; function render$e(_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$c)), [ [vue.vShow, _ctx.active] ]) : vue.createCommentVNode("v-if", true); } script$h.render = render$e; script$h.__file = "packages/components/tabs/src/tab-pane.vue"; const ElTabs = withInstall(Tabs, { TabPane: script$h }); const ElTabPane = withNoopInstall(script$h); 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$g = vue.defineComponent({ name: "ElTimeSelect", components: { ElSelect, ElOption, ElIcon: ElIcon$1 }, 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, Object], default: Clock }, clearIcon: { type: [String, Object], default: CircleClose } }, 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$d(_ctx, _cache, $props, $setup, $data, $options) { const _component_el_option = vue.resolveComponent("el-option"); const _component_el_icon = vue.resolveComponent("el-icon"); 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(() => [ _ctx.prefixIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0, class: "el-input__prefix-icon" }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.prefixIcon))) ]), _: 1 })) : vue.createCommentVNode("v-if", true) ]), 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$g.render = render$d; script$g.__file = "packages/components/time-select/src/time-select.vue"; script$g.install = (app) => { app.component(script$g.name, script$g); }; const _TimeSelect = script$g; const ElTimeSelect = _TimeSelect; var script$f = 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$f.__file = "packages/components/timeline/src/index.vue"; var script$e = vue.defineComponent({ name: "ElTimelineItem", components: { ElIcon }, 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, Object], default: "" }, hollow: { type: Boolean, default: false } }, setup() { vue.inject("timeline"); } }); const _hoisted_1$b = /* @__PURE__ */ vue.createElementVNode("div", { class: "el-timeline-item__tail" }, null, -1); const _hoisted_2$9 = { key: 1, class: "el-timeline-item__dot" }; const _hoisted_3$7 = { 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$2 = { key: 1, class: "el-timeline-item__timestamp is-bottom" }; function render$c(_ctx, _cache, $props, $setup, $data, $options) { const _component_el_icon = vue.resolveComponent("el-icon"); return vue.openBlock(), vue.createElementBlock("li", { class: vue.normalizeClass(["el-timeline-item", { "el-timeline-item__center": _ctx.center }]) }, [ _hoisted_1$b, !_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.createBlock(_component_el_icon, { key: 0, class: "el-timeline-item__icon" }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon))) ]), _: 1 })) : vue.createCommentVNode("v-if", true) ], 6)) : vue.createCommentVNode("v-if", true), _ctx.$slots.dot ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$9, [ vue.renderSlot(_ctx.$slots, "dot") ])) : vue.createCommentVNode("v-if", true), vue.createElementVNode("div", _hoisted_3$7, [ !_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$2, vue.toDisplayString(_ctx.timestamp), 1)) : vue.createCommentVNode("v-if", true) ]) ], 2); } script$e.render = render$c; script$e.__file = "packages/components/timeline/src/item.vue"; const ElTimeline = withInstall(script$f, { TimelineItem: script$e }); const ElTimelineItem = withNoopInstall(script$e); 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$1 = (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$d = vue.defineComponent({ name: "ElTransferPanel", components: { ElCheckboxGroup: ElCheckboxGroup$1, ElCheckbox, ElInput: ElInput$1, ElIcon: ElIcon$1, 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$1(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 ? CircleClose : Search; }); const hasFooter = vue.computed(() => !!slots.default()[0].children.length); const clearQuery = () => { if (inputIcon.value === CircleClose) { 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$a = { class: "el-transfer-panel" }; const _hoisted_2$8 = { class: "el-transfer-panel__header" }; const _hoisted_3$6 = { key: 0, class: "el-transfer-panel__footer" }; function render$b(_ctx, _cache, $props, $setup, $data, $options) { const _component_el_checkbox = vue.resolveComponent("el-checkbox"); const _component_el_icon = vue.resolveComponent("el-icon"); 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$a, [ vue.createElementVNode("p", _hoisted_2$8, [ 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[1] || (_cache[1] = ($event) => _ctx.query = $event), class: "el-transfer-panel__filter", size: "small", placeholder: _ctx.placeholder, onMouseenter: _cache[2] || (_cache[2] = ($event) => _ctx.inputHover = true), onMouseleave: _cache[3] || (_cache[3] = ($event) => _ctx.inputHover = false) }, { prefix: vue.withCtx(() => [ _ctx.inputIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0, class: "el-input__icon", onClick: _ctx.clearQuery }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.inputIcon))) ]), _: 1 }, 8, ["onClick"])) : vue.createCommentVNode("v-if", true) ]), _: 1 }, 8, ["modelValue", "placeholder"])) : vue.createCommentVNode("v-if", true), vue.withDirectives(vue.createVNode(_component_el_checkbox_group, { modelValue: _ctx.checked, "onUpdate:modelValue": _cache[4] || (_cache[4] = ($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$6, [ vue.renderSlot(_ctx.$slots, "default") ])) : vue.createCommentVNode("v-if", true) ]); } script$d.render = render$b; script$d.__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); if (props.targetOrder === "original") { currentValue = props.data.filter((item) => currentValue.includes(item[propsKey.value])).map((item) => item[propsKey.value]); } _emit(currentValue, "right", checkedState.leftChecked); }; return { addToLeft, addToRight }; }; var script$c = vue.defineComponent({ name: "ElTransfer", components: { TransferPanel: script$d, ElButton, ElIcon: ElIcon$1, ArrowLeft, ArrowRight }, 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 { sourceData, targetData, onSourceCheckedChange, onTargetCheckedChange, addToLeft, addToRight, ...vue.toRefs(checkedState), hasButtonTexts, leftPanelTitle, rightPanelTitle, panelFilterPlaceholder, clearQuery, optionRender }; } }); const _hoisted_1$9 = { class: "el-transfer" }; const _hoisted_2$7 = { class: "el-transfer__buttons" }; const _hoisted_3$5 = { key: 0 }; const _hoisted_4$3 = { key: 0 }; function render$a(_ctx, _cache, $props, $setup, $data, $options) { const _component_transfer_panel = vue.resolveComponent("transfer-panel"); const _component_arrow_left = vue.resolveComponent("arrow-left"); const _component_el_icon = vue.resolveComponent("el-icon"); const _component_el_button = vue.resolveComponent("el-button"); const _component_arrow_right = vue.resolveComponent("arrow-right"); return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [ 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$7, [ 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(() => [ vue.createVNode(_component_el_icon, null, { default: vue.withCtx(() => [ vue.createVNode(_component_arrow_left) ]), _: 1 }), _ctx.buttonTexts[0] !== void 0 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$5, 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_4$3, vue.toDisplayString(_ctx.buttonTexts[1]), 1)) : vue.createCommentVNode("v-if", true), vue.createVNode(_component_el_icon, null, { default: vue.withCtx(() => [ vue.createVNode(_component_arrow_right) ]), _: 1 }) ]), _: 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$c.render = render$a; script$c.__file = "packages/components/transfer/src/index.vue"; script$c.install = (app) => { app.component(script$c.name, script$c); }; const _Transfer = script$c; 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$1 { 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$1)) { 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$1(child)); if (child instanceof Node$1) { 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$2 = Node$1; 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$2({ 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$2) 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$b = 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$b.__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$a = vue.defineComponent({ name: "ElTreeNode", components: { ElCollapseTransition: _CollapseTransition, ElCheckbox, NodeContent: script$b, ElIcon, Loading: Loading$2 }, props: { node: { type: Node$2, 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 getNodeClass = (node) => { const nodeClassFunc = props.props.class; if (!nodeClassFunc) { return {}; } let className; if (isFunction$3(nodeClassFunc)) { const { data } = node; className = nodeClassFunc(data, node); } else { className = nodeClassFunc; } if (isString$1(className)) { return { [className]: true }; } else { return className; } }; const handleSelectChange = (checked, indeterminate) => { if (oldChecked.value !== checked || oldIndeterminate.value !== indeterminate) { tree.ctx.emit("check-change", props.node.data, checked, indeterminate); } oldChecked.value = checked; oldIndeterminate.value = indeterminate; }; const handleClick = () => { 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, getNodeClass, handleSelectChange, handleClick, handleContextMenu, handleExpandIconClick, handleCheckChange, handleChildNodeExpand, handleDragStart, handleDragOver, handleDrop, handleDragEnd, CaretRight }; } }); const _hoisted_1$8 = ["aria-expanded", "aria-disabled", "aria-checked", "draggable", "data-key"]; const _hoisted_2$6 = ["aria-expanded"]; function render$9(_ctx, _cache, $props, $setup, $data, $options) { const _component_el_icon = vue.resolveComponent("el-icon"); const _component_el_checkbox = vue.resolveComponent("el-checkbox"); const _component_loading = vue.resolveComponent("loading"); const _component_node_content = vue.resolveComponent("node-content"); const _component_el_tree_node = vue.resolveComponent("el-tree-node"); const _component_el_collapse_transition = vue.resolveComponent("el-collapse-transition"); return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", { ref: "node$", class: vue.normalizeClass(["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, ..._ctx.getNodeClass(_ctx.node) }]), role: "treeitem", tabindex: "-1", "aria-expanded": _ctx.expanded, "aria-disabled": _ctx.node.disabled, "aria-checked": _ctx.node.checked, draggable: _ctx.tree.props.draggable, "data-key": _ctx.getNodeKey(_ctx.node), onClick: _cache[1] || (_cache[1] = vue.withModifiers((...args) => _ctx.handleClick && _ctx.handleClick(...args), ["stop"])), onContextmenu: _cache[2] || (_cache[2] = (...args) => _ctx.handleContextMenu && _ctx.handleContextMenu(...args)), onDragstart: _cache[3] || (_cache[3] = vue.withModifiers((...args) => _ctx.handleDragStart && _ctx.handleDragStart(...args), ["stop"])), onDragover: _cache[4] || (_cache[4] = vue.withModifiers((...args) => _ctx.handleDragOver && _ctx.handleDragOver(...args), ["stop"])), onDragend: _cache[5] || (_cache[5] = vue.withModifiers((...args) => _ctx.handleDragEnd && _ctx.handleDragEnd(...args), ["stop"])), onDrop: _cache[6] || (_cache[6] = vue.withModifiers((...args) => _ctx.handleDrop && _ctx.handleDrop(...args), ["stop"])) }, [ vue.createElementVNode("div", { class: "el-tree-node__content", style: vue.normalizeStyle({ paddingLeft: (_ctx.node.level - 1) * _ctx.tree.props.indent + "px" }) }, [ _ctx.tree.props.icon || _ctx.CaretRight ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0, class: vue.normalizeClass([ { "is-leaf": _ctx.node.isLeaf, expanded: !_ctx.node.isLeaf && _ctx.expanded }, "el-tree-node__expand-icon" ]), onClick: vue.withModifiers(_ctx.handleExpandIconClick, ["stop"]) }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tree.props.icon || _ctx.CaretRight))) ]), _: 1 }, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true), _ctx.showCheckbox ? (vue.openBlock(), vue.createBlock(_component_el_checkbox, { key: 1, "model-value": _ctx.node.checked, indeterminate: _ctx.node.indeterminate, disabled: !!_ctx.node.disabled, onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => { }, ["stop"])), onChange: _ctx.handleCheckChange }, null, 8, ["model-value", "indeterminate", "disabled", "onChange"])) : vue.createCommentVNode("v-if", true), _ctx.node.loading ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 2, class: "el-tree-node__loading-icon is-loading" }, { default: vue.withCtx(() => [ vue.createVNode(_component_loading) ]), _: 1 })) : 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, props: _ctx.props, onNodeExpand: _ctx.handleChildNodeExpand }, null, 8, ["render-content", "render-after-expand", "show-checkbox", "node", "props", "onNodeExpand"]); }), 128)) ], 8, _hoisted_2$6)), [ [vue.vShow, _ctx.expanded] ]) : vue.createCommentVNode("v-if", true) ]), _: 1 }) ], 42, _hoisted_1$8)), [ [vue.vShow, _ctx.node.visible] ]); } script$a.render = render$9; script$a.__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$9 = vue.defineComponent({ name: "ElTree", components: { ElTreeNode: script$a }, props: { data: { type: Array, default: () => [] }, emptyText: { type: String }, renderAfterExpand: { type: Boolean, default: true }, nodeKey: String, checkStrictly: Boolean, defaultExpandAll: Boolean, expandOnClickNode: { type: Boolean, default: true }, checkOnClickNode: Boolean, checkDescendants: { type: Boolean, default: false }, autoExpandParent: { type: Boolean, default: true }, defaultCheckedKeys: Array, defaultExpandedKeys: Array, currentNodeKey: [String, Number], renderContent: Function, showCheckbox: { type: Boolean, default: false }, draggable: { type: Boolean, default: false }, allowDrag: Function, allowDrop: Function, props: { type: Object, default: () => ({ children: "children", label: "label", disabled: "disabled" }) }, lazy: { type: Boolean, default: false }, highlightCurrent: Boolean, load: Function, filterNodeMethod: Function, accordion: Boolean, indent: { type: Number, default: 18 }, icon: [String, Object] }, 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$7 = { key: 0, class: "el-tree__empty-block" }; const _hoisted_2$5 = { class: "el-tree__empty-text" }; const _hoisted_3$4 = { ref: "dropIndicator$", class: "el-tree__drop-indicator" }; function render$8(_ctx, _cache, $props, $setup, $data, $options) { var _a; const _component_el_tree_node = vue.resolveComponent("el-tree-node"); return vue.openBlock(), vue.createElementBlock("div", { ref: "el$", class: vue.normalizeClass(["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$7, [ vue.createElementVNode("span", _hoisted_2$5, vue.toDisplayString((_a = _ctx.emptyText) != null ? _a : _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$9.render = render$8; script$9.__file = "packages/components/tree/src/tree.vue"; script$9.install = (app) => { app.component(script$9.name, script$9); }; const _Tree = script$9; const ElTree = _Tree; const ROOT_TREE_INJECTION_KEY = Symbol(); const EMPTY_NODE = { key: -1, level: -1, data: {} }; var TreeOptionsEnum; (function(TreeOptionsEnum2) { TreeOptionsEnum2["KEY"] = "id"; TreeOptionsEnum2["LABEL"] = "label"; TreeOptionsEnum2["CHILDREN"] = "children"; TreeOptionsEnum2["DISABLED"] = "disabled"; })(TreeOptionsEnum || (TreeOptionsEnum = {})); var SetOperationEnum; (function(SetOperationEnum2) { SetOperationEnum2["ADD"] = "add"; SetOperationEnum2["DELETE"] = "delete"; })(SetOperationEnum || (SetOperationEnum = {})); const treeProps = buildProps({ data: { type: definePropType(Array), default: () => mutable([]) }, emptyText: { type: String }, height: { type: Number, default: 200 }, props: { type: definePropType(Object), default: () => mutable({ children: TreeOptionsEnum.CHILDREN, label: TreeOptionsEnum.LABEL, disabled: TreeOptionsEnum.DISABLED, value: TreeOptionsEnum.KEY }) }, highlightCurrent: { type: Boolean, default: false }, showCheckbox: { type: Boolean, default: false }, defaultCheckedKeys: { type: definePropType(Array), default: () => mutable([]) }, checkStrictly: { type: Boolean, default: false }, defaultExpandedKeys: { type: definePropType(Array), default: () => mutable([]) }, indent: { type: Number, default: 16 }, icon: { type: String }, expandOnClickNode: { type: Boolean, default: true }, checkOnClickNode: { type: Boolean, default: false }, currentNodeKey: { type: definePropType([String, Number]) }, accordion: { type: Boolean, default: false }, filterMethod: { type: definePropType(Function) }, perfMode: { type: Boolean, default: true } }); const treeNodeProps = buildProps({ node: { type: definePropType(Object), default: () => mutable(EMPTY_NODE) }, expanded: { type: Boolean, default: false }, checked: { type: Boolean, default: false }, indeterminate: { type: Boolean, default: false }, showCheckbox: { type: Boolean, default: false }, disabled: { type: Boolean, default: false }, current: { type: Boolean, default: false }, hiddenExpandIcon: { type: Boolean, default: false } }); const treeNodeContentProps = buildProps({ node: { type: definePropType(Object), required: true } }); const NODE_CLICK = "node-click"; const NODE_EXPAND = "node-expand"; const NODE_COLLAPSE = "node-collapse"; const CURRENT_CHANGE = "current-change"; const NODE_CHECK = "check"; const NODE_CHECK_CHANGE = "check-change"; const NODE_CONTEXTMENU = "node-contextmenu"; const treeEmits = { [NODE_CLICK]: (data, node) => data && node, [NODE_EXPAND]: (data, node) => data && node, [NODE_COLLAPSE]: (data, node) => data && node, [CURRENT_CHANGE]: (data, node) => data && node, [NODE_CHECK]: (data, checkedInfo) => data && checkedInfo, [NODE_CHECK_CHANGE]: (data, checked) => data && typeof checked === "boolean", [NODE_CONTEXTMENU]: (event, data, node) => event && data && node }; const treeNodeEmits = { click: (node) => !!node, toggle: (node) => !!node, check: (node, checked) => node && typeof checked === "boolean" }; function useCheck(props, tree) { const checkedKeys = vue.ref(new Set()); const indeterminateKeys = vue.ref(new Set()); const { emit } = vue.getCurrentInstance(); vue.watch(() => tree.value, () => { return vue.nextTick(() => { _setCheckedKeys(props.defaultCheckedKeys); }); }, { immediate: true }); const updateCheckedKeys = () => { if (!tree.value || !props.showCheckbox || props.checkStrictly) { return; } const { levelTreeNodeMap, maxLevel } = tree.value; const checkedKeySet = checkedKeys.value; const indeterminateKeySet = new Set(); for (let level = maxLevel - 1; level >= 1; --level) { const nodes = levelTreeNodeMap.get(level); if (!nodes) continue; nodes.forEach((node) => { const children = node.children; if (children) { let allChecked = true; let hasChecked = false; for (let i = 0; i < children.length; ++i) { const childNode = children[i]; const key = childNode.key; if (checkedKeySet.has(key)) { hasChecked = true; } else if (indeterminateKeySet.has(key)) { allChecked = false; hasChecked = true; break; } else { allChecked = false; } } if (allChecked) { checkedKeySet.add(node.key); } else if (hasChecked) { indeterminateKeySet.add(node.key); checkedKeySet.delete(node.key); } else { checkedKeySet.delete(node.key); indeterminateKeySet.delete(node.key); } } }); } indeterminateKeys.value = indeterminateKeySet; }; const isChecked = (node) => checkedKeys.value.has(node.key); const isIndeterminate = (node) => indeterminateKeys.value.has(node.key); const toggleCheckbox = (node, isChecked2, nodeClick = true) => { const checkedKeySet = checkedKeys.value; const toggle = (node2, checked) => { checkedKeySet[checked ? SetOperationEnum.ADD : SetOperationEnum.DELETE](node2.key); const children = node2.children; if (!props.checkStrictly && children) { children.forEach((childNode) => { if (!childNode.disabled) { toggle(childNode, checked); } }); } }; toggle(node, isChecked2); updateCheckedKeys(); if (nodeClick) { afterNodeCheck(node, isChecked2); } }; const afterNodeCheck = (node, checked) => { const { checkedNodes, checkedKeys: checkedKeys2 } = getChecked(); const { halfCheckedNodes, halfCheckedKeys } = getHalfChecked(); emit(NODE_CHECK, node.data, { checkedKeys: checkedKeys2, checkedNodes, halfCheckedKeys, halfCheckedNodes }); emit(NODE_CHECK_CHANGE, node.data, checked); }; function getCheckedKeys(leafOnly = false) { return getChecked(leafOnly).checkedKeys; } function getCheckedNodes(leafOnly = false) { return getChecked(leafOnly).checkedNodes; } function getHalfCheckedKeys() { return getHalfChecked().halfCheckedKeys; } function getHalfCheckedNodes() { return getHalfChecked().halfCheckedNodes; } function getChecked(leafOnly = false) { const checkedNodes = []; const keys = []; if ((tree == null ? void 0 : tree.value) && props.showCheckbox) { const { treeNodeMap } = tree.value; checkedKeys.value.forEach((key) => { const node = treeNodeMap.get(key); if (node && (!leafOnly || leafOnly && node.isLeaf)) { keys.push(key); checkedNodes.push(node.data); } }); } return { checkedKeys: keys, checkedNodes }; } function getHalfChecked() { const halfCheckedNodes = []; const halfCheckedKeys = []; if ((tree == null ? void 0 : tree.value) && props.showCheckbox) { const { treeNodeMap } = tree.value; indeterminateKeys.value.forEach((key) => { const node = treeNodeMap.get(key); if (node) { halfCheckedKeys.push(key); halfCheckedNodes.push(node.data); } }); } return { halfCheckedNodes, halfCheckedKeys }; } function setCheckedKeys(keys) { checkedKeys.value.clear(); _setCheckedKeys(keys); } function setChecked(key, isChecked2) { if ((tree == null ? void 0 : tree.value) && props.showCheckbox) { const node = tree.value.treeNodeMap.get(key); if (node) { toggleCheckbox(node, isChecked2, false); } } } function _setCheckedKeys(keys) { if (tree == null ? void 0 : tree.value) { const { treeNodeMap } = tree.value; if (props.showCheckbox && treeNodeMap && keys) { for (let i = 0; i < keys.length; ++i) { const key = keys[i]; const node = treeNodeMap.get(key); if (node && !isChecked(node)) { toggleCheckbox(node, true, false); } } } } } return { updateCheckedKeys, toggleCheckbox, isChecked, isIndeterminate, getCheckedKeys, getCheckedNodes, getHalfCheckedKeys, getHalfCheckedNodes, setChecked, setCheckedKeys }; } function useFilter(props, tree) { const hiddenNodeKeySet = vue.ref(new Set([])); const hiddenExpandIconKeySet = vue.ref(new Set([])); const filterable = vue.computed(() => { return isFunction$3(props.filterMethod); }); function doFilter(query) { var _a; if (!filterable.value) { return; } const expandKeySet = new Set(); const hiddenExpandIconKeys = hiddenExpandIconKeySet.value; const hiddenKeys = hiddenNodeKeySet.value; const family = []; const nodes = ((_a = tree.value) == null ? void 0 : _a.treeNodes) || []; const filter = props.filterMethod; hiddenKeys.clear(); function traverse(nodes2) { nodes2.forEach((node) => { family.push(node); if (filter == null ? void 0 : filter(query, node.data)) { family.forEach((member) => { expandKeySet.add(member.key); }); } else if (node.isLeaf) { hiddenKeys.add(node.key); } const children = node.children; if (children) { traverse(children); } if (!node.isLeaf) { if (!expandKeySet.has(node.key)) { hiddenKeys.add(node.key); } else if (children) { let allHidden = true; for (let i = 0; i < children.length; ++i) { const childNode = children[i]; if (!hiddenKeys.has(childNode.key)) { allHidden = false; break; } } if (allHidden) { hiddenExpandIconKeys.add(node.key); } else { hiddenExpandIconKeys.delete(node.key); } } } family.pop(); }); } traverse(nodes); return expandKeySet; } function isForceHiddenExpandIcon(node) { return hiddenExpandIconKeySet.value.has(node.key); } return { hiddenExpandIconKeySet, hiddenNodeKeySet, doFilter, isForceHiddenExpandIcon }; } function useTree(props, emit) { const expandedKeySet = vue.ref(new Set(props.defaultExpandedKeys)); const currentKey = vue.ref(); const tree = vue.shallowRef(); vue.watch(() => props.currentNodeKey, (key) => { currentKey.value = key; }, { immediate: true }); vue.watch(() => props.data, (data) => { setData(data); }, { immediate: true }); const { isIndeterminate, isChecked, toggleCheckbox, getCheckedKeys, getCheckedNodes, getHalfCheckedKeys, getHalfCheckedNodes, setChecked, setCheckedKeys } = useCheck(props, tree); const { doFilter, hiddenNodeKeySet, isForceHiddenExpandIcon } = useFilter(props, tree); const valueKey = vue.computed(() => { var _a; return ((_a = props.props) == null ? void 0 : _a.value) || TreeOptionsEnum.KEY; }); const childrenKey = vue.computed(() => { var _a; return ((_a = props.props) == null ? void 0 : _a.children) || TreeOptionsEnum.CHILDREN; }); const disabledKey = vue.computed(() => { var _a; return ((_a = props.props) == null ? void 0 : _a.disabled) || TreeOptionsEnum.DISABLED; }); const labelKey = vue.computed(() => { var _a; return ((_a = props.props) == null ? void 0 : _a.label) || TreeOptionsEnum.LABEL; }); const flattenTree = vue.computed(() => { const expandedKeys = expandedKeySet.value; const hiddenKeys = hiddenNodeKeySet.value; const flattenNodes = []; const nodes = tree.value && tree.value.treeNodes || []; function traverse() { const stack = []; for (let i = nodes.length - 1; i >= 0; --i) { stack.push(nodes[i]); } while (stack.length) { const node = stack.pop(); if (!node) continue; if (!hiddenKeys.has(node.key)) { flattenNodes.push(node); } if (expandedKeys.has(node.key)) { const children = node.children; if (children) { const length = children.length; for (let i = length - 1; i >= 0; --i) { stack.push(children[i]); } } } } } traverse(); return flattenNodes; }); const isNotEmpty = vue.computed(() => { return flattenTree.value.length > 0; }); function createTree(data) { const treeNodeMap = new Map(); const levelTreeNodeMap = new Map(); let maxLevel = 1; function traverse(nodes, level = 1, parent = void 0) { var _a; const siblings = []; for (let index = 0; index < nodes.length; ++index) { const rawNode = nodes[index]; const value = getKey(rawNode); const node = { level, key: value, data: rawNode }; node.label = getLabel(rawNode); node.parent = parent; const children = getChildren(rawNode); node.disabled = getDisabled(rawNode); node.isLeaf = !children || children.length === 0; if (children && children.length) { node.children = traverse(children, level + 1, node); } siblings.push(node); treeNodeMap.set(value, node); if (!levelTreeNodeMap.has(level)) { levelTreeNodeMap.set(level, []); } (_a = levelTreeNodeMap.get(level)) == null ? void 0 : _a.push(node); } if (level > maxLevel) { maxLevel = level; } return siblings; } const treeNodes = traverse(data); return { treeNodeMap, levelTreeNodeMap, maxLevel, treeNodes }; } function filter(query) { const keys = doFilter(query); if (keys) { expandedKeySet.value = keys; } } function getChildren(node) { return node[childrenKey.value]; } function getKey(node) { if (!node) { return ""; } return node[valueKey.value]; } function getDisabled(node) { return node[disabledKey.value]; } function getLabel(node) { return node[labelKey.value]; } function toggleExpand(node) { const expandedKeys = expandedKeySet.value; if (expandedKeys.has(node.key)) { collapse(node); } else { expand(node); } } function handleNodeClick(node) { emit(NODE_CLICK, node.data, node); handleCurrentChange(node); if (props.expandOnClickNode) { toggleExpand(node); } if (props.showCheckbox && props.checkOnClickNode && !node.disabled) { toggleCheckbox(node, !isChecked(node), true); } } function handleCurrentChange(node) { if (!isCurrent(node)) { currentKey.value = node.key; emit(CURRENT_CHANGE, node.data, node); } } function handleNodeCheck(node, checked) { toggleCheckbox(node, checked); } function expand(node) { const keySet = expandedKeySet.value; if ((tree == null ? void 0 : tree.value) && props.accordion) { const { treeNodeMap } = tree.value; keySet.forEach((key) => { const node2 = treeNodeMap.get(key); if (node2 && node2.level === node2.level) { keySet.delete(key); } }); } keySet.add(node.key); emit(NODE_EXPAND, node.data, node); } function collapse(node) { expandedKeySet.value.delete(node.key); emit(NODE_COLLAPSE, node.data, node); } function isExpanded(node) { return expandedKeySet.value.has(node.key); } function isDisabled(node) { return !!node.disabled; } function isCurrent(node) { const current = currentKey.value; return !!current && current === node.key; } function getCurrentNode() { var _a, _b; if (!currentKey.value) return void 0; return (_b = (_a = tree == null ? void 0 : tree.value) == null ? void 0 : _a.treeNodeMap.get(currentKey.value)) == null ? void 0 : _b.data; } function getCurrentKey() { return currentKey.value; } function setCurrentKey(key) { currentKey.value = key; } function setData(data) { vue.nextTick(() => tree.value = createTree(data)); } return { tree, flattenTree, isNotEmpty, getKey, getChildren, toggleExpand, toggleCheckbox, isExpanded, isChecked, isIndeterminate, isDisabled, isCurrent, isForceHiddenExpandIcon, handleNodeClick, handleNodeCheck, getCurrentNode, getCurrentKey, setCurrentKey, getCheckedKeys, getCheckedNodes, getHalfCheckedKeys, getHalfCheckedNodes, setChecked, setCheckedKeys, filter, setData }; } var ElNodeContent = vue.defineComponent({ name: "ElTreeNodeContent", props: treeNodeContentProps, setup(props) { const tree = vue.inject(ROOT_TREE_INJECTION_KEY); return () => { const node = props.node; const { data } = node; return (tree == null ? void 0 : tree.ctx.slots.default) ? tree.ctx.slots.default({ node, data }) : vue.h("span", { class: "el-tree-node__label" }, [node == null ? void 0 : node.label]); }; } }); const DEFAULT_ICON = "caret-right"; var script$8 = vue.defineComponent({ name: "ElTreeNode", components: { ElIcon: ElIcon$1, CaretRight, ElCheckbox, ElNodeContent }, props: treeNodeProps, emits: treeNodeEmits, setup(props, { emit }) { const tree = vue.inject(ROOT_TREE_INJECTION_KEY); const indent = vue.computed(() => { var _a; return (_a = tree == null ? void 0 : tree.props.indent) != null ? _a : 16; }); const icon = vue.computed(() => { var _a; return (_a = tree == null ? void 0 : tree.props.icon) != null ? _a : DEFAULT_ICON; }); const handleClick = () => { emit("click", props.node); }; const handleExpandIconClick = () => { emit("toggle", props.node); }; const handleCheckChange = (value) => { emit("check", props.node, value); }; const handleContextMenu = (event) => { var _a, _b, _c, _d; if ((_c = (_b = (_a = tree == null ? void 0 : tree.instance) == null ? void 0 : _a.vnode) == null ? void 0 : _b.props) == null ? void 0 : _c["onNodeContextmenu"]) { event.stopPropagation(); event.preventDefault(); } tree == null ? void 0 : tree.ctx.emit(NODE_CONTEXTMENU, event, (_d = props.node) == null ? void 0 : _d.data, props.node); }; return { indent, icon, handleClick, handleExpandIconClick, handleCheckChange, handleContextMenu }; } }); const _hoisted_1$6 = ["aria-expanded", "aria-disabled", "aria-checked", "data-key"]; function render$7(_ctx, _cache, $props, $setup, $data, $options) { var _a, _b, _c; const _component_el_icon = vue.resolveComponent("el-icon"); const _component_el_checkbox = vue.resolveComponent("el-checkbox"); const _component_el_node_content = vue.resolveComponent("el-node-content"); return vue.openBlock(), vue.createElementBlock("div", { ref: "node$", class: vue.normalizeClass(["el-tree-node", { "is-expanded": _ctx.expanded, "is-current": _ctx.current, "is-focusable": !_ctx.disabled, "is-checked": !_ctx.disabled && _ctx.checked }]), role: "treeitem", tabindex: "-1", "aria-expanded": _ctx.expanded, "aria-disabled": _ctx.disabled, "aria-checked": _ctx.checked, "data-key": (_a = _ctx.node) == null ? void 0 : _a.key, onClick: _cache[1] || (_cache[1] = vue.withModifiers((...args) => _ctx.handleClick && _ctx.handleClick(...args), ["stop"])), onContextmenu: _cache[2] || (_cache[2] = (...args) => _ctx.handleContextMenu && _ctx.handleContextMenu(...args)) }, [ vue.createElementVNode("div", { class: "el-tree-node__content", style: vue.normalizeStyle({ paddingLeft: `${(_ctx.node.level - 1) * _ctx.indent}px` }) }, [ _ctx.icon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0, class: vue.normalizeClass([ { "is-leaf": (_b = _ctx.node) == null ? void 0 : _b.isLeaf, "is-hidden": _ctx.hiddenExpandIcon, expanded: !((_c = _ctx.node) == null ? void 0 : _c.isLeaf) && _ctx.expanded }, "el-tree-node__expand-icon" ]), onClick: vue.withModifiers(_ctx.handleExpandIconClick, ["stop"]) }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon))) ]), _: 1 }, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true), _ctx.showCheckbox ? (vue.openBlock(), vue.createBlock(_component_el_checkbox, { key: 1, "model-value": _ctx.checked, indeterminate: _ctx.indeterminate, disabled: _ctx.disabled, onChange: _ctx.handleCheckChange, onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => { }, ["stop"])) }, null, 8, ["model-value", "indeterminate", "disabled", "onChange"])) : vue.createCommentVNode("v-if", true), vue.createVNode(_component_el_node_content, { node: _ctx.node }, null, 8, ["node"]) ], 4) ], 42, _hoisted_1$6); } script$8.render = render$7; script$8.__file = "packages/components/tree-v2/src/tree-node.vue"; var script$7 = vue.defineComponent({ name: "ElTreeV2", components: { ElTreeNode: script$8, FixedSizeList: FixedSizeList$1 }, props: treeProps, emits: treeEmits, setup(props, ctx) { vue.provide(ROOT_TREE_INJECTION_KEY, { ctx, props, instance: vue.getCurrentInstance() }); const { t } = useLocaleInject(); const { flattenTree, isNotEmpty, toggleExpand, isExpanded, isIndeterminate, isChecked, isDisabled, isCurrent, isForceHiddenExpandIcon, toggleCheckbox, handleNodeClick, handleNodeCheck, getCurrentNode, getCurrentKey, setCurrentKey, getCheckedKeys, getCheckedNodes, getHalfCheckedKeys, getHalfCheckedNodes, setChecked, setCheckedKeys, filter, setData } = useTree(props, ctx.emit); ctx.expose({ getCurrentNode, getCurrentKey, setCurrentKey, getCheckedKeys, getCheckedNodes, getHalfCheckedKeys, getHalfCheckedNodes, setChecked, setCheckedKeys, filter, setData }); return { t, flattenTree, itemSize: 26, isNotEmpty, toggleExpand, toggleCheckbox, isExpanded, isIndeterminate, isChecked, isDisabled, isCurrent, isForceHiddenExpandIcon, handleNodeClick, handleNodeCheck }; } }); const _hoisted_1$5 = { key: 1, class: "el-tree__empty-block" }; const _hoisted_2$4 = { class: "el-tree__empty-text" }; function render$6(_ctx, _cache, $props, $setup, $data, $options) { var _a; const _component_el_tree_node = vue.resolveComponent("el-tree-node"); const _component_fixed_size_list = vue.resolveComponent("fixed-size-list"); return vue.openBlock(), vue.createElementBlock("div", { class: vue.normalizeClass(["el-tree", { "el-tree--highlight-current": _ctx.highlightCurrent }]), role: "tree" }, [ _ctx.isNotEmpty ? (vue.openBlock(), vue.createBlock(_component_fixed_size_list, { key: 0, "class-name": "el-tree-virtual-list", data: _ctx.flattenTree, total: _ctx.flattenTree.length, height: _ctx.height, "item-size": _ctx.itemSize, "perf-mode": _ctx.perfMode }, { default: vue.withCtx(({ data, index, style }) => [ vue.createVNode(_component_el_tree_node, { key: data[index].key, style: vue.normalizeStyle(style), node: data[index], expanded: _ctx.isExpanded(data[index]), "show-checkbox": _ctx.showCheckbox, checked: _ctx.isChecked(data[index]), indeterminate: _ctx.isIndeterminate(data[index]), disabled: _ctx.isDisabled(data[index]), current: _ctx.isCurrent(data[index]), "hidden-expand-icon": _ctx.isForceHiddenExpandIcon(data[index]), onClick: _ctx.handleNodeClick, onToggle: _ctx.toggleExpand, onCheck: _ctx.handleNodeCheck }, null, 8, ["style", "node", "expanded", "show-checkbox", "checked", "indeterminate", "disabled", "current", "hidden-expand-icon", "onClick", "onToggle", "onCheck"]) ]), _: 1 }, 8, ["data", "total", "height", "item-size", "perf-mode"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [ vue.createElementVNode("span", _hoisted_2$4, vue.toDisplayString((_a = _ctx.emptyText) != null ? _a : _ctx.t("el.tree.emptyText")), 1) ])) ], 2); } script$7.render = render$6; script$7.__file = "packages/components/tree-v2/src/tree.vue"; const ElTreeV2 = withInstall(script$7); 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]); } } if (headers instanceof Headers) { headers.forEach((value, key) => { xhr.setRequestHeader(key, value); }); } xhr.send(formData); return xhr; } var script$6 = vue.defineComponent({ name: "ElUploadList", components: { ElProgress: _Progress, ElIcon, Document, Delete, Close, ZoomIn, Check, CircleCheck }, 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 = { class: "el-upload-list__item-status-label" }; const _hoisted_5$2 = { key: 2, class: "el-icon--close-tip" }; const _hoisted_6$1 = { key: 4, class: "el-upload-list__item-actions" }; const _hoisted_7$1 = ["onClick"]; const _hoisted_8$1 = ["onClick"]; function render$5(_ctx, _cache, $props, $setup, $data, $options) { const _component_document = vue.resolveComponent("document"); const _component_el_icon = vue.resolveComponent("el-icon"); const _component_circle_check = vue.resolveComponent("circle-check"); const _component_check = vue.resolveComponent("check"); const _component_close = vue.resolveComponent("close"); const _component_el_progress = vue.resolveComponent("el-progress"); const _component_zoom_in = vue.resolveComponent("zoom-in"); const _component_delete = vue.resolveComponent("delete"); 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) }, [ vue.createVNode(_component_el_icon, { class: "el-icon--document" }, { default: vue.withCtx(() => [ vue.createVNode(_component_document) ]), _: 1 }), vue.createTextVNode(" " + vue.toDisplayString(file.name), 1) ], 8, _hoisted_3$3), vue.createElementVNode("label", _hoisted_4$2, [ _ctx.listType === "text" ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0, class: "el-icon--upload-success el-icon--circle-check" }, { default: vue.withCtx(() => [ vue.createVNode(_component_circle_check) ]), _: 1 })) : ["picture-card", "picture"].includes(_ctx.listType) ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 1, class: "el-icon--upload-success el-icon--check" }, { default: vue.withCtx(() => [ vue.createVNode(_component_check) ]), _: 1 })) : vue.createCommentVNode("v-if", true) ]), !_ctx.disabled ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 1, class: "el-icon--close", onClick: ($event) => _ctx.handleRemove($event, file) }, { default: vue.withCtx(() => [ vue.createVNode(_component_close) ]), _: 2 }, 1032, ["onClick"])) : vue.createCommentVNode("v-if", true), vue.createCommentVNode(" Due to close btn only appears when li gets focused disappears after li gets blurred, thus keyboard navigation can never reach close btn"), vue.createCommentVNode(" This is a bug which needs to be fixed "), vue.createCommentVNode(" TODO: Fix the incorrect navigation interaction "), !_ctx.disabled ? (vue.openBlock(), vue.createElementBlock("i", _hoisted_5$2, 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_6$1, [ vue.createElementVNode("span", { class: "el-upload-list__item-preview", onClick: ($event) => _ctx.handlePreview(file) }, [ vue.createVNode(_component_el_icon, { class: "el-icon--zoom-in" }, { default: vue.withCtx(() => [ vue.createVNode(_component_zoom_in) ]), _: 1 }) ], 8, _hoisted_7$1), !_ctx.disabled ? (vue.openBlock(), vue.createElementBlock("span", { key: 0, class: "el-upload-list__item-delete", onClick: ($event) => _ctx.handleRemove($event, file) }, [ vue.createVNode(_component_el_icon, { class: "el-icon--delete" }, { default: vue.withCtx(() => [ vue.createVNode(_component_delete) ]), _: 1 }) ], 8, _hoisted_8$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$1(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$1; var defineProperty = _defineProperty; /** * 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$2(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$2; var baseAssignValue$1 = _baseAssignValue, eq = eq_1; /** 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$2(object, key, value) { var objValue = object[key]; if (!(hasOwnProperty$2.call(object, key) && eq(objValue, value)) || (value === undefined && !(key in object))) { baseAssignValue$1(object, key, value); } } var _assignValue = assignValue$2; var assignValue$1 = _assignValue, baseAssignValue = _baseAssignValue; /** * 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$4(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$1(object, key, newValue); } } return object; } var _copyObject = copyObject$4; var copyObject$3 = _copyObject, keys$1 = keys_1; /** * 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$1(object, source) { return object && copyObject$3(source, keys$1(source), object); } var _baseAssign = baseAssign$1; /** * 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$1(object) { var result = []; if (object != null) { for (var key in Object(object)) { result.push(key); } } return result; } var _nativeKeysIn = nativeKeysIn$1; var isObject$2 = isObject_1, isPrototype$1 = _isPrototype, 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$1(object) { if (!isObject$2(object)) { return nativeKeysIn(object); } var isProto = isPrototype$1(object), result = []; for (var key in object) { if (!(key == 'constructor' && (isProto || !hasOwnProperty$1.call(object, key)))) { result.push(key); } } return result; } var _baseKeysIn = baseKeysIn$1; var arrayLikeKeys = _arrayLikeKeys, baseKeysIn = _baseKeysIn, isArrayLike = isArrayLike_1; /** * 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$3(object) { return isArrayLike(object) ? arrayLikeKeys(object, true) : baseKeysIn(object); } var keysIn_1 = keysIn$3; var copyObject$2 = _copyObject, keysIn$2 = keysIn_1; /** * 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$1(object, source) { return object && copyObject$2(source, keysIn$2(source), object); } var _baseAssignIn = baseAssignIn$1; var _cloneBuffer = {exports: {}}; (function (module, exports) { var root = _root; /** 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; }(_cloneBuffer, _cloneBuffer.exports)); /** * 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$1(source, array) { var index = -1, length = source.length; array || (array = Array(length)); while (++index < length) { array[index] = source[index]; } return array; } var _copyArray = copyArray$1; var copyObject$1 = _copyObject, getSymbols$1 = _getSymbols; /** * 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$1(source, object) { return copyObject$1(source, getSymbols$1(source), object); } var _copySymbols = copySymbols$1; var overArg = _overArg; /** Built-in value references. */ var getPrototype$2 = overArg(Object.getPrototypeOf, Object); var _getPrototype = getPrototype$2; var arrayPush = _arrayPush, getPrototype$1 = _getPrototype, getSymbols = _getSymbols, stubArray = stubArray_1; /* 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$2 = !nativeGetSymbols ? stubArray : function(object) { var result = []; while (object) { arrayPush(result, getSymbols(object)); object = getPrototype$1(object); } return result; }; var _getSymbolsIn = getSymbolsIn$2; var copyObject = _copyObject, getSymbolsIn$1 = _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$1(source, object) { return copyObject(source, getSymbolsIn$1(source), object); } var _copySymbolsIn = copySymbolsIn$1; var baseGetAllKeys = _baseGetAllKeys, getSymbolsIn = _getSymbolsIn, keysIn$1 = keysIn_1; /** * 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$1(object) { return baseGetAllKeys(object, keysIn$1, getSymbolsIn); } var _getAllKeysIn = getAllKeysIn$1; /** 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$1(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$1; var Uint8Array = _Uint8Array; /** * Creates a clone of `arrayBuffer`. * * @private * @param {ArrayBuffer} arrayBuffer The array buffer to clone. * @returns {ArrayBuffer} Returns the cloned array buffer. */ function cloneArrayBuffer$3(arrayBuffer) { var result = new arrayBuffer.constructor(arrayBuffer.byteLength); new Uint8Array(result).set(new Uint8Array(arrayBuffer)); return result; } var _cloneArrayBuffer = cloneArrayBuffer$3; var cloneArrayBuffer$2 = _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$1(dataView, isDeep) { var buffer = isDeep ? cloneArrayBuffer$2(dataView.buffer) : dataView.buffer; return new dataView.constructor(buffer, dataView.byteOffset, dataView.byteLength); } var _cloneDataView = cloneDataView$1; /** 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$1(regexp) { var result = new regexp.constructor(regexp.source, reFlags.exec(regexp)); result.lastIndex = regexp.lastIndex; return result; } var _cloneRegExp = cloneRegExp$1; var Symbol$1 = _Symbol; /** Used to convert symbols to primitives and strings. */ var symbolProto = Symbol$1 ? Symbol$1.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$1(symbol) { return symbolValueOf ? Object(symbolValueOf.call(symbol)) : {}; } var _cloneSymbol = cloneSymbol$1; var cloneArrayBuffer$1 = _cloneArrayBuffer; /** * 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$1(typedArray, isDeep) { var buffer = isDeep ? cloneArrayBuffer$1(typedArray.buffer) : typedArray.buffer; return new typedArray.constructor(buffer, typedArray.byteOffset, typedArray.length); } var _cloneTypedArray = cloneTypedArray$1; var cloneArrayBuffer = _cloneArrayBuffer, cloneDataView = _cloneDataView, cloneRegExp = _cloneRegExp, cloneSymbol = _cloneSymbol, 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$1(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$1; var isObject$1 = isObject_1; /** 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$1 = (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$1; var baseCreate = _baseCreate, getPrototype = _getPrototype, isPrototype = _isPrototype; /** * Initializes an object clone. * * @private * @param {Object} object The object to clone. * @returns {Object} Returns the initialized clone. */ function initCloneObject$1(object) { return (typeof object.constructor == 'function' && !isPrototype(object)) ? baseCreate(getPrototype(object)) : {}; } var _initCloneObject = initCloneObject$1; var getTag$2 = _getTag, isObjectLike$1 = isObjectLike_1; /** `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$1(value) { return isObjectLike$1(value) && getTag$2(value) == mapTag$1; } var _baseIsMap = baseIsMap$1; var baseIsMap = _baseIsMap, baseUnary$1 = _baseUnary, nodeUtil$1 = _nodeUtil.exports; /* Node.js helper references. */ var nodeIsMap = nodeUtil$1 && nodeUtil$1.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$1 = nodeIsMap ? baseUnary$1(nodeIsMap) : baseIsMap; var isMap_1 = isMap$1; var getTag$1 = _getTag, isObjectLike = isObjectLike_1; /** `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$1(value) { return isObjectLike(value) && getTag$1(value) == setTag$1; } var _baseIsSet = baseIsSet$1; var baseIsSet = _baseIsSet, baseUnary = _baseUnary, nodeUtil = _nodeUtil.exports; /* 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$1 = nodeIsSet ? baseUnary(nodeIsSet) : baseIsSet; var isSet_1 = isSet$1; var Stack = _Stack, arrayEach = _arrayEach, assignValue = _assignValue, baseAssign = _baseAssign, baseAssignIn = _baseAssignIn, cloneBuffer = _cloneBuffer.exports, copyArray = _copyArray, copySymbols = _copySymbols, copySymbolsIn = _copySymbolsIn, getAllKeys = _getAllKeys, getAllKeysIn = _getAllKeysIn, getTag = _getTag, initCloneArray = _initCloneArray, initCloneByTag = _initCloneByTag, initCloneObject = _initCloneObject, isArray = isArray_1, isBuffer = isBuffer$3.exports, isMap = isMap_1, isObject = isObject_1, isSet = isSet_1, keys = keys_1, keysIn = keysIn_1; /** 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$1(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(value)) { return value; } var isArr = isArray(value); if (isArr) { result = initCloneArray(value); if (!isDeep) { return copyArray(value, result); } } else { var tag = getTag(value), isFunc = tag == funcTag || tag == genTag; if (isBuffer(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(value)) { value.forEach(function(subValue) { result.add(baseClone$1(subValue, bitmask, customizer, subValue, value, stack)); }); } else if (isMap(value)) { value.forEach(function(subValue, key) { result.set(key, baseClone$1(subValue, bitmask, customizer, key, value, stack)); }); } var keysFunc = isFull ? (isFlat ? getAllKeysIn : getAllKeys) : (isFlat ? keysIn : keys); 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$1(subValue, bitmask, customizer, key, value, stack)); }); return result; } var _baseClone = baseClone$1; 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; 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 { ...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$1, ElProgress, ElRadio, ElRadioButton, ElRadioGroup, ElRate, ElResult, ElRow, ElScrollbar$1, ElSelect, ElOption$1, ElOptionGroup, ElSelectV2, ElSkeleton, ElSkeletonItem, ElSlider, ElSpace, ElSteps, ElStep, ElSwitch, ElTable, ElTableColumn, ElTabs, ElTabPane, ElTag, ElTimePicker, ElTimeSelect, ElTimeline, ElTimelineItem, ElTooltip, ElTransfer, ElTree, ElTreeV2, ElUpload ]; const SCOPE = "ElInfiniteScroll"; const CHECK_INTERVAL = 50; const DEFAULT_DELAY = 200; const DEFAULT_DISTANCE = 0; const attributes = { delay: { type: Number, default: DEFAULT_DELAY }, distance: { type: Number, default: DEFAULT_DISTANCE }, disabled: { type: Boolean, default: false }, immediate: { type: Boolean, default: true } }; const getScrollOptions = (el, instance) => { return Object.entries(attributes).reduce((acm, [name, option]) => { var _a, _b; const { type, default: defaultValue } = option; const attrVal = el.getAttribute(`infinite-scroll-${name}`); let value = (_b = (_a = instance[attrVal]) != null ? _a : attrVal) != null ? _b : defaultValue; value = value === "false" ? false : value; value = type(value); acm[name] = Number.isNaN(value) ? defaultValue : value; return acm; }, {}); }; const destroyObserver = (el) => { const { observer } = el[SCOPE]; if (observer) { observer.disconnect(); delete el[SCOPE].observer; } }; const handleScroll = (el, cb) => { const { container, containerEl, instance, observer, lastScrollTop } = el[SCOPE]; const { disabled, distance } = getScrollOptions(el, instance); const { clientHeight, scrollHeight, scrollTop } = containerEl; const delta = scrollTop - lastScrollTop; el[SCOPE].lastScrollTop = scrollTop; if (observer || disabled || delta < 0) return; let shouldTrigger = false; if (container === el) { shouldTrigger = scrollHeight - (clientHeight + scrollTop) <= distance; } else { const { clientTop, scrollHeight: height } = el; const offsetTop = getOffsetTopDistance(el, containerEl); shouldTrigger = scrollTop + clientHeight >= offsetTop + clientTop + height - distance; } if (shouldTrigger) { cb.call(instance); } }; function checkFull(el, cb) { const { containerEl, instance } = el[SCOPE]; const { disabled } = getScrollOptions(el, instance); if (disabled) return; if (containerEl.scrollHeight <= containerEl.clientHeight) { cb.call(instance); } else { destroyObserver(el); } } const InfiniteScroll = { async mounted(el, binding) { const { instance, value: cb } = binding; if (!isFunction$3(cb)) { throwError(SCOPE, "'v-infinite-scroll' binding value must be a function"); } await vue.nextTick(); const { delay, immediate } = getScrollOptions(el, instance); const container = getScrollContainer(el, true); const containerEl = container === window ? document.documentElement : container; const onScroll = throttle$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); } }; var InfiniteScroll$1 = InfiniteScroll; const _InfiniteScroll = InfiniteScroll$1; _InfiniteScroll.install = (app) => { app.directive("InfiniteScroll", _InfiniteScroll); }; const ElInfiniteScroll = _InfiniteScroll; function createLoadingComponent({ options, globalLoadingOption }) { let vm = null; let afterLeaveTimer = null; const afterLeaveFlag = vue.ref(false); const data = vue.reactive({ ...options, originalPosition: "", originalOverflow: "", visible: false }); function setText(text) { data.text = text; } function destroySelf() { const target = data.parent; if (!target.vLoadingAddClassList) { let loadingNumber = target.getAttribute("loading-number"); loadingNumber = Number.parseInt(loadingNumber) - 1; if (!loadingNumber) { removeClass(target, "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 = { ...vue.toRefs(data), setText, close, handleAfterLeave }; const elLoadingComponent = { name: "ElLoading", setup() { return componentSetupConfig; }, render() { const svg = this.spinner || this.svg; const spinner = vue.h("svg", { class: "circular", viewBox: this.svgViewBox ? this.svgViewBox : "25 25 50 50", ...svg ? { innerHTML: svg } : {} }, [ vue.h("circle", { class: "path", cx: "50", cy: "50", r: "20", fill: "none" }) ]); 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" }, [spinner, this.text ? spinnerText : null]) ]), [[vue.vShow, this.visible]]) ]) }); } }; vm = vue.createVNode(elLoadingComponent); vue.render(vm, document.createElement("div")); return { ...componentSetupConfig, vm, get $el() { return vm.el; } }; } 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 = async (options, parent, instance) => { 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"); await 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 = { ...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; }; var Loading$1 = Loading; 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$1({ 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(); } }; var vLoading$1 = vLoading; const ElLoading = { install(app) { app.directive("loading", vLoading$1); app.config.globalProperties.$loading = Loading$1; }, directive: vLoading$1, service: Loading$1 }; const ElLoadingDirective = vLoading$1; const ElLoadingService = Loading$1; const messageTypes = ["success", "info", "warning", "error"]; const messageProps = buildProps({ customClass: { type: String, default: "" }, center: { type: Boolean, default: false }, dangerouslyUseHTMLString: { type: Boolean, default: false }, duration: { type: Number, default: 3e3 }, icon: { type: definePropType([String, Object]), default: "" }, id: { type: String, default: "" }, message: { type: definePropType([String, Object]), default: "" }, onClose: { type: definePropType(Function), required: false }, showClose: { type: Boolean, default: false }, type: { type: String, values: messageTypes, default: "info" }, offset: { type: Number, default: 20 }, zIndex: { type: Number, default: 0 }, grouping: { type: Boolean, default: false }, repeatNum: { type: Number, default: 1 } }); const messageEmits = { destroy: () => true }; var script$2 = vue.defineComponent({ name: "ElMessage", components: { ElBadge, ElIcon, ...TypeComponents }, props: messageProps, emits: messageEmits, setup(props) { const visible = vue.ref(false); let stopTimer = void 0; const typeClass = vue.computed(() => { const type = props.type; return type && TypeComponentsMap[type] ? `el-message-icon--${type}` : ""; }); const iconComponent = vue.computed(() => { return props.icon || TypeComponentsMap[props.type] || ""; }); const customStyle = vue.computed(() => ({ top: `${props.offset}px`, zIndex: props.zIndex })); function startTimer() { if (props.duration > 0) { ({ stop: stopTimer } = useTimeoutFn(() => { if (visible.value) close(); }, props.duration)); } } function clearTimer() { stopTimer == null ? void 0 : stopTimer(); } 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; }); vue.watch(() => props.repeatNum, () => { clearTimer(); startTimer(); }); useEventListener(document, "keydown", keydown); return { typeClass, iconComponent, 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) { const _component_el_badge = vue.resolveComponent("el-badge"); const _component_el_icon = vue.resolveComponent("el-icon"); const _component_close = vue.resolveComponent("close"); return vue.openBlock(), vue.createBlock(vue.Transition, { name: "el-message-fade", onBeforeLeave: _ctx.onClose, onAfterLeave: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("destroy")) }, { default: vue.withCtx(() => { var _a; return [ vue.withDirectives(vue.createElementVNode("div", { id: _ctx.id, class: vue.normalizeClass([ "el-message", _ctx.type && !_ctx.icon ? `el-message--${_ctx.type}` : "", _ctx.center ? "is-center" : "", _ctx.showClose ? "is-closable" : "", _ctx.customClass ]), style: vue.normalizeStyle(_ctx.customStyle), role: "alert", onMouseenter: _cache[0] || (_cache[0] = (...args) => _ctx.clearTimer && _ctx.clearTimer(...args)), onMouseleave: _cache[1] || (_cache[1] = (...args) => _ctx.startTimer && _ctx.startTimer(...args)) }, [ _ctx.repeatNum > 1 ? (vue.openBlock(), vue.createBlock(_component_el_badge, { key: 0, value: _ctx.repeatNum, type: (_a = _ctx.type) != null ? _a : "info", class: "el-message__badge" }, null, 8, ["value", "type"])) : vue.createCommentVNode("v-if", true), _ctx.iconComponent ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 1, class: vue.normalizeClass(["el-message__icon", _ctx.typeClass]) }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent))) ]), _: 1 }, 8, ["class"])) : 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.createBlock(_component_el_icon, { key: 2, class: "el-message__closeBtn", onClick: vue.withModifiers(_ctx.close, ["stop"]) }, { default: vue.withCtx(() => [ vue.createVNode(_component_close) ]), _: 1 }, 8, ["onClick"])) : 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"; const instances = []; let seed$1 = 1; const message = function(options = {}) { if (isServer) return { close: () => void 0 }; if (!vue.isVNode(options) && typeof options === "object" && options.grouping && !vue.isVNode(options.message) && instances.length) { const tempVm = instances.find((item) => { var _a, _b, _c; return `${(_b = (_a = item.vm.props) == null ? void 0 : _a.message) != null ? _b : ""}` === `${(_c = options.message) != null ? _c : ""}`; }); if (tempVm) { tempVm.vm.component.props.repeatNum += 1; tempVm.vm.component.props.type = options == null ? void 0 : options.type; return { close: () => vm.component.proxy.visible = false }; } } 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 = { zIndex: PopupManager.nextZIndex(), offset: verticalOffset, ...options, id, onClose: () => { close$1(id, userOnClose); } }; let appendTo = document.body; if (options.appendTo instanceof HTMLElement) { appendTo = options.appendTo; } else if (typeof options.appendTo === "string") { appendTo = document.querySelector(options.appendTo); } if (!(appendTo instanceof HTMLElement)) { appendTo = document.body; } 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 }); appendTo.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({ ...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; var Message = message; const ElMessage = withInstallFunction(Message, "$message"); var script$1 = vue.defineComponent({ name: "ElMessageBox", directives: { TrapFocus }, components: { ElButton, ElInput: ElInput$1, ElOverlay, ElIcon, ...TypeComponents }, inheritAttrs: false, props: { buttonSize: { type: String, validator: isValidComponentSize }, modal: { type: Boolean, default: true }, lockScroll: { type: Boolean, default: true }, showClose: { type: Boolean, default: true }, closeOnClickModal: { type: Boolean, default: true }, closeOnPressEscape: { type: Boolean, default: true }, closeOnHashChange: { type: Boolean, default: true }, center: Boolean, 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, icon: "", inputPattern: null, inputPlaceholder: "", inputType: "text", inputValue: null, inputValidator: null, inputErrorMessage: "", message: null, modalFade: true, modalClass: "", showCancelButton: false, showConfirmButton: true, type: "", title: void 0, showInput: false, action: "", confirmButtonLoading: false, cancelButtonLoading: false, confirmButtonDisabled: false, editorErrorMessage: "", validateError: false, zIndex: PopupManager.nextZIndex() }); const typeClass = vue.computed(() => { const type = state.type; return type && TypeComponentsMap[type] ? `el-message-box-icon--${type}` : ""; }); const iconComponent = vue.computed(() => state.icon || TypeComponentsMap[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, async (val) => { await 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 () => { await 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 { ...vue.toRefs(state), visible, hasMessage, typeClass, iconComponent, 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 = { class: "el-message-box__content" }; const _hoisted_5$1 = { class: "el-message-box__container" }; const _hoisted_6 = { key: 1, class: "el-message-box__message" }; const _hoisted_7 = { key: 0 }; const _hoisted_8 = ["innerHTML"]; const _hoisted_9 = { class: "el-message-box__input" }; const _hoisted_10 = { class: "el-message-box__btns" }; function render$1(_ctx, _cache, $props, $setup, $data, $options) { const _component_el_icon = vue.resolveComponent("el-icon"); const _component_close = vue.resolveComponent("close"); const _component_el_input = vue.resolveComponent("el-input"); const _component_el_button = vue.resolveComponent("el-button"); const _component_el_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.iconComponent && _ctx.center ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0, class: vue.normalizeClass(["el-message-box__status", _ctx.typeClass]) }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent))) ]), _: 1 }, 8, ["class"])) : vue.createCommentVNode("v-if", true), vue.createElementVNode("span", null, vue.toDisplayString(_ctx.title), 1) ]), _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"])) }, [ vue.createVNode(_component_el_icon, { class: "el-message-box__close" }, { default: vue.withCtx(() => [ vue.createVNode(_component_close) ]), _: 1 }) ], 32)) : vue.createCommentVNode("v-if", true) ])) : vue.createCommentVNode("v-if", true), vue.createElementVNode("div", _hoisted_4$1, [ vue.createElementVNode("div", _hoisted_5$1, [ _ctx.iconComponent && !_ctx.center && _ctx.hasMessage ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0, class: vue.normalizeClass(["el-message-box__status", _ctx.typeClass]) }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent))) ]), _: 1 }, 8, ["class"])) : vue.createCommentVNode("v-if", true), _ctx.hasMessage ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [ vue.renderSlot(_ctx.$slots, "default", {}, () => [ !_ctx.dangerouslyUseHTMLString ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_7, vue.toDisplayString(_ctx.message), 1)) : (vue.openBlock(), vue.createElementBlock("p", { key: 1, innerHTML: _ctx.message }, null, 8, _hoisted_8)) ]) ])) : vue.createCommentVNode("v-if", true) ]), vue.withDirectives(vue.createElementVNode("div", _hoisted_9, [ 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_10, [ _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 = buildProps({ customClass: { type: String, default: "" }, dangerouslyUseHTMLString: { type: Boolean, default: false }, duration: { type: Number, default: 4500 }, icon: { type: definePropType([String, Object]), default: "" }, id: { type: String, default: "" }, message: { type: definePropType([String, Object]), default: "" }, offset: { type: Number, default: 0 }, onClick: { type: definePropType(Function), default: () => void 0 }, onClose: { type: definePropType(Function), required: true }, position: { type: String, values: ["top-right", "top-left", "bottom-right", "bottom-left"], default: "top-right" }, showClose: { type: Boolean, default: true }, title: { type: String, default: "" }, type: { type: String, values: [...notificationTypes, ""], default: "" }, zIndex: { type: Number, default: 0 } }); const notificationEmits = { destroy: () => true }; var script = vue.defineComponent({ name: "ElNotification", components: { ElIcon, ...TypeComponents }, props: notificationProps, emits: notificationEmits, setup(props) { const visible = vue.ref(false); let timer = void 0; const typeClass = vue.computed(() => { const type = props.type; return type && TypeComponentsMap[props.type] ? `el-notification--${type}` : ""; }); const iconComponent = vue.computed(() => { return TypeComponentsMap[props.type] || props.icon || ""; }); const horizontalClass = vue.computed(() => props.position.endsWith("right") ? "right" : "left"); const verticalProperty = vue.computed(() => props.position.startsWith("top") ? "top" : "bottom"); const positionStyle = vue.computed(() => { return { [verticalProperty.value]: `${props.offset}px`, zIndex: props.zIndex }; }); function startTimer() { if (props.duration > 0) { ({ stop: timer } = useTimeoutFn(() => { if (visible.value) close(); }, props.duration)); } } function clearTimer() { timer == null ? void 0 : timer(); } function close() { visible.value = false; } function onKeydown({ code }) { if (code === EVENT_CODE.delete || code === EVENT_CODE.backspace) { clearTimer(); } else if (code === EVENT_CODE.esc) { if (visible.value) { close(); } } else { startTimer(); } } vue.onMounted(() => { startTimer(); visible.value = true; }); useEventListener(document, "keydown", onKeydown); return { horizontalClass, typeClass, iconComponent, positionStyle, visible, close, clearTimer, startTimer }; } }); const _hoisted_1 = ["id"]; const _hoisted_2 = { class: "el-notification__group" }; const _hoisted_3 = ["textContent"]; const _hoisted_4 = { key: 0 }; const _hoisted_5 = ["innerHTML"]; function render(_ctx, _cache, $props, $setup, $data, $options) { const _component_el_icon = vue.resolveComponent("el-icon"); const _component_close = vue.resolveComponent("close"); return vue.openBlock(), vue.createBlock(vue.Transition, { name: "el-notification-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-notification", _ctx.customClass, _ctx.horizontalClass]), style: vue.normalizeStyle(_ctx.positionStyle), role: "alert", onMouseenter: _cache[0] || (_cache[0] = (...args) => _ctx.clearTimer && _ctx.clearTimer(...args)), onMouseleave: _cache[1] || (_cache[1] = (...args) => _ctx.startTimer && _ctx.startTimer(...args)), onClick: _cache[2] || (_cache[2] = (...args) => _ctx.onClick && _ctx.onClick(...args)) }, [ _ctx.iconComponent ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0, class: vue.normalizeClass(["el-notification__icon", _ctx.typeClass]) }, { default: vue.withCtx(() => [ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent))) ]), _: 1 }, 8, ["class"])) : vue.createCommentVNode("v-if", true), vue.createElementVNode("div", _hoisted_2, [ vue.createElementVNode("h2", { class: "el-notification__title", textContent: vue.toDisplayString(_ctx.title) }, null, 8, _hoisted_3), 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_4, 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_5) ], 2112)) ]) ], 4), [ [vue.vShow, _ctx.message] ]), _ctx.showClose ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0, class: "el-notification__closeBtn", onClick: vue.withModifiers(_ctx.close, ["stop"]) }, { default: vue.withCtx(() => [ vue.createVNode(_component_close) ]), _: 1 }, 8, ["onClick"])) : vue.createCommentVNode("v-if", true) ]) ], 46, _hoisted_1), [ [vue.vShow, _ctx.visible] ]) ]), _: 3 }, 8, ["onBeforeLeave"]); } script.render = render; script.__file = "packages/components/notification/src/notification.vue"; 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 = { zIndex: PopupManager.nextZIndex(), offset: verticalOffset, ...options, id, onClose: () => { close(id, position, userOnClose); } }; let appendTo = document.body; if (options.appendTo instanceof HTMLElement) { appendTo = options.appendTo; } else if (typeof options.appendTo === "string") { appendTo = document.querySelector(options.appendTo); } if (!(appendTo instanceof HTMLElement)) { appendTo = document.body; } 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 }); appendTo.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({ ...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; var Notify = notify; const ElNotification = withInstallFunction(Notify, "$notify"); var Plugins = [ ElInfiniteScroll, ElLoading, ElMessage, ElMessageBox, ElNotification, ElPopoverDirective ]; var installer = makeInstaller$1([...Components, ...Plugins]); const install = installer.install; const version = installer.version; exports.BAR_MAP = BAR_MAP; exports.CASCADER_PANEL_INJECTION_KEY = CASCADER_PANEL_INJECTION_KEY; exports.CHANGE_EVENT = CHANGE_EVENT; exports.ClickOutside = ClickOutside; exports.CommonPicker = script$1K; 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$1; exports.ElProgress = ElProgress; exports.ElRadio = ElRadio; exports.ElRadioButton = ElRadioButton; exports.ElRadioGroup = ElRadioGroup; exports.ElRate = ElRate; exports.ElResult = ElResult; exports.ElRow = ElRow; exports.ElScrollbar = ElScrollbar$1; 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.ElTreeV2 = ElTreeV2; exports.ElUpload = ElUpload; exports.FixedSizeGrid = FixedSizeGrid$3; exports.FixedSizeList = FixedSizeList$1; exports.IconComponentMap = IconComponentMap; exports.IconMap = IconMap; exports.LIGHT_EFFECT = LIGHT_EFFECT; exports.LocaleInjectionKey = LocaleInjectionKey; exports.Mousewheel = Mousewheel; exports.RepeatClick = RepeatClick; exports.Resize = Resize; exports.TimePickPanel = script$1I; 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.colProps = colProps; exports.configProviderContextKey = configProviderContextKey; 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.imageEmits = imageEmits; exports.imageProps = imageProps; exports.imageViewerEmits = imageViewerEmits; exports.imageViewerProps = imageViewerProps; exports.inputEmits = inputEmits; exports.inputNumberEmits = inputNumberEmits; exports.inputNumberProps = inputNumberProps; exports.inputProps = inputProps; exports.install = install; exports.linkEmits = linkEmits; exports.linkProps = linkProps; exports.localeProviderMaker = localeProviderMaker; exports.makeInstaller = makeInstaller$1; exports.menuEmits = menuEmits; exports.menuItemEmits = menuItemEmits; exports.menuItemGroupProps = menuItemGroupProps; exports.menuItemProps = menuItemProps; exports.menuProps = menuProps; 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.radioButtonProps = radioButtonProps; exports.radioEmits = radioEmits; exports.radioGroupEmits = radioGroupEmits; exports.radioGroupKey = radioGroupKey; exports.radioGroupProps = radioGroupProps; exports.radioProps = radioProps; exports.radioPropsBase = radioPropsBase; exports.rangeArr = rangeArr; exports.rateEmits = rateEmits; exports.rateProps = rateProps; exports.renderArrow = renderArrow; exports.renderPopper = renderPopper; exports.renderThumbStyle = renderThumbStyle$1; exports.renderTrigger = renderTrigger; exports.resultProps = resultProps; exports.rowProps = rowProps; exports.selectGroupKey = selectGroupKey; exports.selectKey = selectKey; exports.selectV2InjectionKey = selectV2InjectionKey; exports.spaceProps = spaceProps; exports.subMenuProps = subMenuProps; 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; exports.useFocus = useFocus; exports.useFormItem = useFormItem; exports.useFormItemProps = useFormItemProps; exports.useGlobalConfig = useGlobalConfig; 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.useRadio = useRadio; exports.useRestoreActive = useRestoreActive; exports.useSameTarget = useSameTarget; exports.useSpace = useSpace; 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 }); }));