2025-03-11 13:57:38 +08:00
|
|
|
import { defineComponent, ref, computed, provide, renderSlot, unref, getCurrentInstance, watch, inject, withDirectives, cloneVNode, Fragment, Text, Comment, createVNode, createBlock, createCommentVNode, openBlock, mergeProps, withCtx, toRef, normalizeClass, shallowRef, createElementBlock, Transition, vShow, normalizeStyle, readonly, toDisplayString, nextTick, useAttrs as useAttrs$1, useSlots, createElementVNode, resolveDynamicComponent, withModifiers, reactive } from 'vue';
|
2025-04-27 18:19:25 +08:00
|
|
|
import { b as buildProps, _ as _export_sfc, w as withInstall, ad as getNative, a7 as eq, O as isObject, am as castPath, an as toKey, ao as baseGet, a9 as isObjectLike, aa as baseGetTag, a8 as isArray, a6 as Symbol$1, d as definePropType, E as EVENT_CODE, ap as buildProp, aq as fromPairs, q as isUndefined, x as ElFocusTrap, v as ElTeleport, ar as tryFocus, U as UPDATE_MODEL_EVENT, y as mutable, i as iconPropType, S as useSizeProp, as as useGlobalSize, ag as debugWarn, at as ValidateComponentsMap, au as view_default, av as hide_default, aw as isNil, n as ElIcon, V as circle_close_default, s as useDeprecated, p as useGlobalConfig, P as loading_default, ax as withNoopInstall } from './config-provider.mjs';
|
2025-03-11 13:57:38 +08:00
|
|
|
import { x as tryOnScopeDispose, q as isNumber, s as shared_cjs_prodExports, i as isBoolean, y as isClient, e as useNamespace, z as isString, A as noop, B as resolveUnref, C as tryOnMounted, D as identity$1, E as useGetDerivedNamespace, F as useIdInjection, g as useZIndex, k as useId } from './server.mjs';
|
2025-02-20 19:30:25 +08:00
|
|
|
import { placements, createPopper } from '@popperjs/core';
|
|
|
|
|
2025-03-11 13:57:38 +08:00
|
|
|
const POPPER_INJECTION_KEY = Symbol("popper");
|
|
|
|
const POPPER_CONTENT_INJECTION_KEY = Symbol("popperContent");
|
|
|
|
|
|
|
|
const roleTypes = [
|
|
|
|
"dialog",
|
|
|
|
"grid",
|
|
|
|
"group",
|
|
|
|
"listbox",
|
|
|
|
"menu",
|
|
|
|
"navigation",
|
|
|
|
"tooltip",
|
|
|
|
"tree"
|
|
|
|
];
|
|
|
|
const popperProps = buildProps({
|
|
|
|
role: {
|
|
|
|
type: String,
|
|
|
|
values: roleTypes,
|
|
|
|
default: "tooltip"
|
2025-02-20 19:30:25 +08:00
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
const __default__$9 = defineComponent({
|
|
|
|
name: "ElPopper",
|
|
|
|
inheritAttrs: false
|
|
|
|
});
|
|
|
|
const _sfc_main$9 = /* @__PURE__ */ defineComponent({
|
|
|
|
...__default__$9,
|
|
|
|
props: popperProps,
|
|
|
|
setup(__props, { expose }) {
|
|
|
|
const props = __props;
|
|
|
|
const triggerRef = ref();
|
|
|
|
const popperInstanceRef = ref();
|
|
|
|
const contentRef = ref();
|
|
|
|
const referenceRef = ref();
|
|
|
|
const role = computed(() => props.role);
|
|
|
|
const popperProvides = {
|
|
|
|
triggerRef,
|
|
|
|
popperInstanceRef,
|
|
|
|
contentRef,
|
|
|
|
referenceRef,
|
|
|
|
role
|
|
|
|
};
|
|
|
|
expose(popperProvides);
|
|
|
|
provide(POPPER_INJECTION_KEY, popperProvides);
|
|
|
|
return (_ctx, _cache) => {
|
|
|
|
return renderSlot(_ctx.$slots, "default");
|
|
|
|
};
|
|
|
|
}
|
|
|
|
});
|
|
|
|
var Popper = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__file", "popper.vue"]]);
|
|
|
|
|
|
|
|
const ElPopper = withInstall(Popper);
|
|
|
|
|
|
|
|
const TOOLTIP_INJECTION_KEY = Symbol("elTooltip");
|
|
|
|
|
|
|
|
function useTimeout() {
|
|
|
|
let timeoutHandle;
|
|
|
|
const registerTimeout = (fn, delay) => {
|
|
|
|
cancelTimeout();
|
|
|
|
timeoutHandle = (void 0).setTimeout(fn, delay);
|
2025-02-20 19:30:25 +08:00
|
|
|
};
|
2025-03-11 13:57:38 +08:00
|
|
|
const cancelTimeout = () => (void 0).clearTimeout(timeoutHandle);
|
|
|
|
tryOnScopeDispose(() => cancelTimeout());
|
|
|
|
return {
|
|
|
|
registerTimeout,
|
|
|
|
cancelTimeout
|
2025-02-20 19:30:25 +08:00
|
|
|
};
|
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
|
|
|
|
const useDelayedToggleProps = buildProps({
|
|
|
|
showAfter: {
|
|
|
|
type: Number,
|
|
|
|
default: 0
|
|
|
|
},
|
|
|
|
hideAfter: {
|
|
|
|
type: Number,
|
|
|
|
default: 200
|
|
|
|
},
|
|
|
|
autoClose: {
|
|
|
|
type: Number,
|
|
|
|
default: 0
|
|
|
|
}
|
|
|
|
});
|
|
|
|
const useDelayedToggle = ({
|
|
|
|
showAfter,
|
|
|
|
hideAfter,
|
|
|
|
autoClose,
|
|
|
|
open,
|
|
|
|
close
|
|
|
|
}) => {
|
|
|
|
const { registerTimeout } = useTimeout();
|
|
|
|
const {
|
|
|
|
registerTimeout: registerTimeoutForAutoClose,
|
|
|
|
cancelTimeout: cancelTimeoutForAutoClose
|
|
|
|
} = useTimeout();
|
|
|
|
const onOpen = (event) => {
|
|
|
|
registerTimeout(() => {
|
|
|
|
open(event);
|
|
|
|
const _autoClose = unref(autoClose);
|
|
|
|
if (isNumber(_autoClose) && _autoClose > 0) {
|
|
|
|
registerTimeoutForAutoClose(() => {
|
|
|
|
close(event);
|
|
|
|
}, _autoClose);
|
2025-02-20 19:30:25 +08:00
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
}, unref(showAfter));
|
2025-02-20 19:30:25 +08:00
|
|
|
};
|
2025-03-11 13:57:38 +08:00
|
|
|
const onClose = (event) => {
|
|
|
|
cancelTimeoutForAutoClose();
|
|
|
|
registerTimeout(() => {
|
|
|
|
close(event);
|
|
|
|
}, unref(hideAfter));
|
2025-02-20 19:30:25 +08:00
|
|
|
};
|
|
|
|
return {
|
2025-03-11 13:57:38 +08:00
|
|
|
onOpen,
|
|
|
|
onClose
|
2025-02-20 19:30:25 +08:00
|
|
|
};
|
|
|
|
};
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
var defineProperty = function() {
|
|
|
|
try {
|
|
|
|
var func = getNative(Object, "defineProperty");
|
|
|
|
func({}, "", {});
|
|
|
|
return func;
|
|
|
|
} catch (e) {
|
|
|
|
}
|
|
|
|
}();
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
function baseAssignValue(object, key, value) {
|
|
|
|
if (key == "__proto__" && defineProperty) {
|
|
|
|
defineProperty(object, key, {
|
|
|
|
"configurable": true,
|
|
|
|
"enumerable": true,
|
|
|
|
"value": value,
|
|
|
|
"writable": true
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
object[key] = value;
|
|
|
|
}
|
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
var objectProto$1 = Object.prototype;
|
|
|
|
var hasOwnProperty$1 = objectProto$1.hasOwnProperty;
|
|
|
|
function assignValue(object, key, value) {
|
|
|
|
var objValue = object[key];
|
|
|
|
if (!(hasOwnProperty$1.call(object, key) && eq(objValue, value)) || value === void 0 && !(key in object)) {
|
|
|
|
baseAssignValue(object, key, value);
|
|
|
|
}
|
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
|
|
|
|
var MAX_SAFE_INTEGER$1 = 9007199254740991;
|
|
|
|
var reIsUint = /^(?:0|[1-9]\d*)$/;
|
|
|
|
function isIndex(value, length) {
|
|
|
|
var type = typeof value;
|
|
|
|
length = length == null ? MAX_SAFE_INTEGER$1 : length;
|
|
|
|
return !!length && (type == "number" || type != "symbol" && reIsUint.test(value)) && (value > -1 && value % 1 == 0 && value < length);
|
|
|
|
}
|
|
|
|
|
|
|
|
function baseSet(object, path, value, customizer) {
|
|
|
|
if (!isObject(object)) {
|
|
|
|
return object;
|
|
|
|
}
|
|
|
|
path = castPath(path, object);
|
|
|
|
var index = -1, length = path.length, lastIndex = length - 1, nested = object;
|
|
|
|
while (nested != null && ++index < length) {
|
|
|
|
var key = toKey(path[index]), newValue = value;
|
|
|
|
if (key === "__proto__" || key === "constructor" || key === "prototype") {
|
|
|
|
return object;
|
2025-02-20 19:30:25 +08:00
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
if (index != lastIndex) {
|
|
|
|
var objValue = nested[key];
|
|
|
|
newValue = void 0;
|
|
|
|
if (newValue === void 0) {
|
|
|
|
newValue = isObject(objValue) ? objValue : isIndex(path[index + 1]) ? [] : {};
|
|
|
|
}
|
2025-02-20 19:30:25 +08:00
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
assignValue(nested, key, newValue);
|
|
|
|
nested = nested[key];
|
|
|
|
}
|
|
|
|
return object;
|
2025-02-20 19:30:25 +08:00
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
|
|
|
|
function basePickBy(object, paths, predicate) {
|
|
|
|
var index = -1, length = paths.length, result = {};
|
|
|
|
while (++index < length) {
|
|
|
|
var path = paths[index], value = baseGet(object, path);
|
|
|
|
if (predicate(value, path)) {
|
|
|
|
baseSet(result, castPath(path, object), value);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return result;
|
|
|
|
}
|
|
|
|
|
|
|
|
function baseHasIn(object, key) {
|
|
|
|
return object != null && key in Object(object);
|
2025-02-20 19:30:25 +08:00
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
var argsTag = "[object Arguments]";
|
|
|
|
function baseIsArguments(value) {
|
|
|
|
return isObjectLike(value) && baseGetTag(value) == argsTag;
|
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
var objectProto = Object.prototype;
|
|
|
|
var hasOwnProperty = objectProto.hasOwnProperty;
|
|
|
|
var propertyIsEnumerable = objectProto.propertyIsEnumerable;
|
|
|
|
var isArguments = baseIsArguments(/* @__PURE__ */ function() {
|
|
|
|
return arguments;
|
|
|
|
}()) ? baseIsArguments : function(value) {
|
|
|
|
return isObjectLike(value) && hasOwnProperty.call(value, "callee") && !propertyIsEnumerable.call(value, "callee");
|
|
|
|
};
|
2025-03-11 13:57:38 +08:00
|
|
|
|
|
|
|
var MAX_SAFE_INTEGER = 9007199254740991;
|
|
|
|
function isLength(value) {
|
|
|
|
return typeof value == "number" && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
|
|
|
|
}
|
|
|
|
|
|
|
|
function hasPath(object, path, hasFunc) {
|
|
|
|
path = castPath(path, object);
|
|
|
|
var index = -1, length = path.length, result = false;
|
|
|
|
while (++index < length) {
|
|
|
|
var key = toKey(path[index]);
|
|
|
|
if (!(result = object != null && hasFunc(object, key))) {
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
object = object[key];
|
|
|
|
}
|
|
|
|
if (result || ++index != length) {
|
|
|
|
return result;
|
|
|
|
}
|
|
|
|
length = object == null ? 0 : object.length;
|
|
|
|
return !!length && isLength(length) && isIndex(key, length) && (isArray(object) || isArguments(object));
|
|
|
|
}
|
|
|
|
|
|
|
|
function hasIn(object, path) {
|
|
|
|
return object != null && hasPath(object, path, baseHasIn);
|
|
|
|
}
|
|
|
|
|
|
|
|
function basePick(object, paths) {
|
|
|
|
return basePickBy(object, paths, function(value, path) {
|
|
|
|
return hasIn(object, path);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
function arrayPush(array, values) {
|
|
|
|
var index = -1, length = values.length, offset = array.length;
|
|
|
|
while (++index < length) {
|
|
|
|
array[offset + index] = values[index];
|
|
|
|
}
|
|
|
|
return array;
|
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
var spreadableSymbol = Symbol$1 ? Symbol$1.isConcatSpreadable : void 0;
|
|
|
|
function isFlattenable(value) {
|
|
|
|
return isArray(value) || isArguments(value) || !!(spreadableSymbol && value && value[spreadableSymbol]);
|
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
function baseFlatten(array, depth, predicate, isStrict, result) {
|
|
|
|
var index = -1, length = array.length;
|
|
|
|
predicate || (predicate = isFlattenable);
|
|
|
|
result || (result = []);
|
|
|
|
while (++index < length) {
|
|
|
|
var value = array[index];
|
|
|
|
if (predicate(value)) {
|
|
|
|
{
|
|
|
|
arrayPush(result, value);
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
result[result.length] = value;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return result;
|
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
function flatten(array) {
|
|
|
|
var length = array == null ? 0 : array.length;
|
|
|
|
return length ? baseFlatten(array) : [];
|
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
|
|
|
|
function apply(func, thisArg, args) {
|
|
|
|
switch (args.length) {
|
|
|
|
case 0:
|
|
|
|
return func.call(thisArg);
|
|
|
|
case 1:
|
|
|
|
return func.call(thisArg, args[0]);
|
|
|
|
case 2:
|
|
|
|
return func.call(thisArg, args[0], args[1]);
|
|
|
|
case 3:
|
|
|
|
return func.call(thisArg, args[0], args[1], args[2]);
|
2025-02-20 19:30:25 +08:00
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
return func.apply(thisArg, args);
|
2025-02-20 19:30:25 +08:00
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
|
|
|
|
var nativeMax = Math.max;
|
|
|
|
function overRest(func, start, transform) {
|
|
|
|
start = nativeMax(start === void 0 ? 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];
|
2025-02-20 19:30:25 +08:00
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
index = -1;
|
|
|
|
var otherArgs = Array(start + 1);
|
|
|
|
while (++index < start) {
|
|
|
|
otherArgs[index] = args[index];
|
2025-02-20 19:30:25 +08:00
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
otherArgs[start] = transform(array);
|
|
|
|
return apply(func, this, otherArgs);
|
|
|
|
};
|
2025-02-20 19:30:25 +08:00
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
|
|
|
|
function constant(value) {
|
|
|
|
return function() {
|
|
|
|
return value;
|
|
|
|
};
|
2025-02-20 19:30:25 +08:00
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
|
|
|
|
function identity(value) {
|
|
|
|
return value;
|
|
|
|
}
|
|
|
|
|
|
|
|
var baseSetToString = !defineProperty ? identity : function(func, string) {
|
|
|
|
return defineProperty(func, "toString", {
|
|
|
|
"configurable": true,
|
|
|
|
"enumerable": false,
|
|
|
|
"value": constant(string),
|
|
|
|
"writable": true
|
2025-02-20 19:30:25 +08:00
|
|
|
});
|
2025-03-11 13:57:38 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
var HOT_COUNT = 800, HOT_SPAN = 16;
|
|
|
|
var nativeNow = Date.now;
|
|
|
|
function shortOut(func) {
|
|
|
|
var count = 0, lastCalled = 0;
|
|
|
|
return function() {
|
|
|
|
var stamp = nativeNow(), remaining = HOT_SPAN - (stamp - lastCalled);
|
|
|
|
lastCalled = stamp;
|
|
|
|
if (remaining > 0) {
|
|
|
|
if (++count >= HOT_COUNT) {
|
|
|
|
return arguments[0];
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
count = 0;
|
|
|
|
}
|
|
|
|
return func.apply(void 0, arguments);
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
var setToString = shortOut(baseSetToString);
|
|
|
|
|
|
|
|
function flatRest(func) {
|
|
|
|
return setToString(overRest(func, void 0, flatten), func + "");
|
2025-02-20 19:30:25 +08:00
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
var pick = flatRest(function(object, paths) {
|
|
|
|
return object == null ? {} : basePick(object, paths);
|
|
|
|
});
|
2025-03-11 13:57:38 +08:00
|
|
|
|
|
|
|
const ariaProps = buildProps({
|
|
|
|
ariaLabel: String,
|
|
|
|
ariaOrientation: {
|
2025-02-20 19:30:25 +08:00
|
|
|
type: String,
|
2025-03-11 13:57:38 +08:00
|
|
|
values: ["horizontal", "vertical", "undefined"]
|
|
|
|
},
|
|
|
|
ariaControls: String
|
2025-02-20 19:30:25 +08:00
|
|
|
});
|
2025-03-11 13:57:38 +08:00
|
|
|
const useAriaProps = (arias) => {
|
|
|
|
return pick(ariaProps, arias);
|
|
|
|
};
|
|
|
|
|
|
|
|
const POSITIONING_STRATEGIES = ["fixed", "absolute"];
|
|
|
|
const popperCoreConfigProps = buildProps({
|
|
|
|
boundariesPadding: {
|
2025-02-20 19:30:25 +08:00
|
|
|
type: Number,
|
2025-03-11 13:57:38 +08:00
|
|
|
default: 0
|
|
|
|
},
|
|
|
|
fallbackPlacements: {
|
|
|
|
type: definePropType(Array),
|
|
|
|
default: void 0
|
|
|
|
},
|
|
|
|
gpuAcceleration: {
|
|
|
|
type: Boolean,
|
|
|
|
default: true
|
|
|
|
},
|
|
|
|
offset: {
|
|
|
|
type: Number,
|
|
|
|
default: 12
|
|
|
|
},
|
|
|
|
placement: {
|
|
|
|
type: String,
|
|
|
|
values: placements,
|
|
|
|
default: "bottom"
|
|
|
|
},
|
|
|
|
popperOptions: {
|
|
|
|
type: definePropType(Object),
|
|
|
|
default: () => ({})
|
|
|
|
},
|
|
|
|
strategy: {
|
|
|
|
type: String,
|
|
|
|
values: POSITIONING_STRATEGIES,
|
|
|
|
default: "absolute"
|
2025-02-20 19:30:25 +08:00
|
|
|
}
|
|
|
|
});
|
2025-03-11 13:57:38 +08:00
|
|
|
const popperContentProps = buildProps({
|
|
|
|
...popperCoreConfigProps,
|
|
|
|
id: String,
|
|
|
|
style: {
|
|
|
|
type: definePropType([String, Array, Object])
|
|
|
|
},
|
|
|
|
className: {
|
|
|
|
type: definePropType([String, Array, Object])
|
|
|
|
},
|
|
|
|
effect: {
|
|
|
|
type: definePropType(String),
|
|
|
|
default: "dark"
|
|
|
|
},
|
|
|
|
visible: Boolean,
|
|
|
|
enterable: {
|
|
|
|
type: Boolean,
|
|
|
|
default: true
|
|
|
|
},
|
|
|
|
pure: Boolean,
|
|
|
|
focusOnShow: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false
|
|
|
|
},
|
|
|
|
trapping: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false
|
|
|
|
},
|
|
|
|
popperClass: {
|
|
|
|
type: definePropType([String, Array, Object])
|
|
|
|
},
|
|
|
|
popperStyle: {
|
|
|
|
type: definePropType([String, Array, Object])
|
|
|
|
},
|
|
|
|
referenceEl: {
|
|
|
|
type: definePropType(Object)
|
|
|
|
},
|
|
|
|
triggerTargetEl: {
|
|
|
|
type: definePropType(Object)
|
|
|
|
},
|
|
|
|
stopPopperMouseEvent: {
|
|
|
|
type: Boolean,
|
|
|
|
default: true
|
|
|
|
},
|
|
|
|
virtualTriggering: Boolean,
|
|
|
|
zIndex: Number,
|
|
|
|
...useAriaProps(["ariaLabel"])
|
2025-02-20 19:30:25 +08:00
|
|
|
});
|
2025-03-11 13:57:38 +08:00
|
|
|
const popperContentEmits = {
|
|
|
|
mouseenter: (evt) => evt instanceof MouseEvent,
|
|
|
|
mouseleave: (evt) => evt instanceof MouseEvent,
|
|
|
|
focus: () => true,
|
|
|
|
blur: () => true,
|
|
|
|
close: () => true
|
|
|
|
};
|
|
|
|
|
|
|
|
const useTooltipContentProps = buildProps({
|
|
|
|
...useDelayedToggleProps,
|
|
|
|
...popperContentProps,
|
|
|
|
appendTo: {
|
|
|
|
type: definePropType([String, Object])
|
|
|
|
},
|
|
|
|
content: {
|
|
|
|
type: String,
|
|
|
|
default: ""
|
|
|
|
},
|
|
|
|
rawContent: Boolean,
|
|
|
|
persistent: Boolean,
|
|
|
|
visible: {
|
|
|
|
type: definePropType(Boolean),
|
|
|
|
default: null
|
|
|
|
},
|
|
|
|
transition: String,
|
|
|
|
teleported: {
|
|
|
|
type: Boolean,
|
|
|
|
default: true
|
|
|
|
},
|
|
|
|
disabled: Boolean,
|
|
|
|
...useAriaProps(["ariaLabel"])
|
2025-02-20 19:30:25 +08:00
|
|
|
});
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
const popperTriggerProps = buildProps({
|
|
|
|
virtualRef: {
|
|
|
|
type: definePropType(Object)
|
|
|
|
},
|
|
|
|
virtualTriggering: Boolean,
|
|
|
|
onMouseenter: {
|
|
|
|
type: definePropType(Function)
|
|
|
|
},
|
|
|
|
onMouseleave: {
|
|
|
|
type: definePropType(Function)
|
|
|
|
},
|
|
|
|
onClick: {
|
|
|
|
type: definePropType(Function)
|
|
|
|
},
|
|
|
|
onKeydown: {
|
|
|
|
type: definePropType(Function)
|
|
|
|
},
|
|
|
|
onFocus: {
|
|
|
|
type: definePropType(Function)
|
|
|
|
},
|
|
|
|
onBlur: {
|
|
|
|
type: definePropType(Function)
|
|
|
|
},
|
|
|
|
onContextmenu: {
|
|
|
|
type: definePropType(Function)
|
|
|
|
},
|
|
|
|
id: String,
|
|
|
|
open: Boolean
|
|
|
|
});
|
2025-03-11 13:57:38 +08:00
|
|
|
|
|
|
|
const useTooltipTriggerProps = buildProps({
|
|
|
|
...popperTriggerProps,
|
|
|
|
disabled: Boolean,
|
|
|
|
trigger: {
|
|
|
|
type: definePropType([String, Array]),
|
|
|
|
default: "hover"
|
|
|
|
},
|
|
|
|
triggerKeys: {
|
|
|
|
type: definePropType(Array),
|
|
|
|
default: () => [EVENT_CODE.enter, EVENT_CODE.numpadEnter, EVENT_CODE.space]
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
const popperArrowProps = buildProps({
|
|
|
|
arrowOffset: {
|
|
|
|
type: Number,
|
|
|
|
default: 5
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
const _prop = buildProp({
|
|
|
|
type: definePropType(Boolean),
|
|
|
|
default: null
|
|
|
|
});
|
|
|
|
const _event = buildProp({
|
|
|
|
type: definePropType(Function)
|
|
|
|
});
|
|
|
|
const createModelToggleComposable = (name) => {
|
|
|
|
const updateEventKey = `update:${name}`;
|
|
|
|
const updateEventKeyRaw = `onUpdate:${name}`;
|
|
|
|
const useModelToggleEmits2 = [updateEventKey];
|
|
|
|
const useModelToggleProps2 = {
|
|
|
|
[name]: _prop,
|
|
|
|
[updateEventKeyRaw]: _event
|
|
|
|
};
|
|
|
|
const useModelToggle2 = ({
|
|
|
|
indicator,
|
|
|
|
toggleReason,
|
|
|
|
shouldHideWhenRouteChanges,
|
|
|
|
shouldProceed,
|
|
|
|
onShow,
|
|
|
|
onHide
|
|
|
|
}) => {
|
|
|
|
const instance = getCurrentInstance();
|
|
|
|
const { emit } = instance;
|
|
|
|
const props = instance.props;
|
|
|
|
const hasUpdateHandler = computed(() => shared_cjs_prodExports.isFunction(props[updateEventKeyRaw]));
|
|
|
|
const isModelBindingAbsent = computed(() => props[name] === null);
|
|
|
|
const doShow = (event) => {
|
|
|
|
if (indicator.value === true) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
indicator.value = true;
|
|
|
|
if (toggleReason) {
|
|
|
|
toggleReason.value = event;
|
|
|
|
}
|
|
|
|
if (shared_cjs_prodExports.isFunction(onShow)) {
|
|
|
|
onShow(event);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
const doHide = (event) => {
|
|
|
|
if (indicator.value === false) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
indicator.value = false;
|
|
|
|
if (toggleReason) {
|
|
|
|
toggleReason.value = event;
|
|
|
|
}
|
|
|
|
if (shared_cjs_prodExports.isFunction(onHide)) {
|
|
|
|
onHide(event);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
const show = (event) => {
|
|
|
|
if (props.disabled === true || shared_cjs_prodExports.isFunction(shouldProceed) && !shouldProceed())
|
|
|
|
return;
|
|
|
|
hasUpdateHandler.value && isClient;
|
|
|
|
if (isModelBindingAbsent.value || true) {
|
|
|
|
doShow(event);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
const hide = (event) => {
|
|
|
|
if (props.disabled === true || true)
|
|
|
|
return;
|
|
|
|
};
|
|
|
|
const onChange = (val) => {
|
|
|
|
if (!isBoolean(val))
|
|
|
|
return;
|
|
|
|
if (props.disabled && val) {
|
|
|
|
if (hasUpdateHandler.value) {
|
|
|
|
emit(updateEventKey, false);
|
|
|
|
}
|
|
|
|
} else if (indicator.value !== val) {
|
|
|
|
if (val) {
|
|
|
|
doShow();
|
|
|
|
} else {
|
|
|
|
doHide();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
const toggle = () => {
|
|
|
|
if (indicator.value) {
|
|
|
|
hide();
|
|
|
|
} else {
|
|
|
|
show();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
watch(() => props[name], onChange);
|
|
|
|
if (shouldHideWhenRouteChanges && instance.appContext.config.globalProperties.$route !== void 0) {
|
|
|
|
watch(() => ({
|
|
|
|
...instance.proxy.$route
|
|
|
|
}), () => {
|
|
|
|
if (shouldHideWhenRouteChanges.value && indicator.value) {
|
|
|
|
hide();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
return {
|
|
|
|
hide,
|
|
|
|
show,
|
|
|
|
toggle,
|
|
|
|
hasUpdateHandler
|
|
|
|
};
|
|
|
|
};
|
|
|
|
return {
|
|
|
|
useModelToggle: useModelToggle2,
|
|
|
|
useModelToggleProps: useModelToggleProps2,
|
|
|
|
useModelToggleEmits: useModelToggleEmits2
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
const {
|
|
|
|
useModelToggleProps: useTooltipModelToggleProps,
|
|
|
|
useModelToggleEmits: useTooltipModelToggleEmits,
|
|
|
|
useModelToggle: useTooltipModelToggle
|
|
|
|
} = createModelToggleComposable("visible");
|
|
|
|
const useTooltipProps = buildProps({
|
|
|
|
...popperProps,
|
|
|
|
...useTooltipModelToggleProps,
|
|
|
|
...useTooltipContentProps,
|
|
|
|
...useTooltipTriggerProps,
|
|
|
|
...popperArrowProps,
|
|
|
|
showArrow: {
|
|
|
|
type: Boolean,
|
|
|
|
default: true
|
|
|
|
}
|
|
|
|
});
|
|
|
|
const tooltipEmits = [
|
|
|
|
...useTooltipModelToggleEmits,
|
|
|
|
"before-show",
|
|
|
|
"before-hide",
|
|
|
|
"show",
|
|
|
|
"hide",
|
|
|
|
"open",
|
|
|
|
"close"
|
|
|
|
];
|
|
|
|
|
|
|
|
const isTriggerType = (trigger, type) => {
|
|
|
|
if (shared_cjs_prodExports.isArray(trigger)) {
|
|
|
|
return trigger.includes(type);
|
|
|
|
}
|
|
|
|
return trigger === type;
|
|
|
|
};
|
|
|
|
const whenTrigger = (trigger, type, handler) => {
|
|
|
|
return (e) => {
|
|
|
|
isTriggerType(unref(trigger), type) && handler(e);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
const FORWARD_REF_INJECTION_KEY = Symbol("elForwardRef");
|
|
|
|
const useForwardRef = (forwardRef) => {
|
|
|
|
const setForwardRef = (el) => {
|
2025-02-20 19:30:25 +08:00
|
|
|
forwardRef.value = el;
|
|
|
|
};
|
|
|
|
provide(FORWARD_REF_INJECTION_KEY, {
|
|
|
|
setForwardRef
|
|
|
|
});
|
|
|
|
};
|
|
|
|
const useForwardRefDirective = (setForwardRef) => {
|
|
|
|
return {
|
|
|
|
mounted(el) {
|
|
|
|
setForwardRef(el);
|
|
|
|
},
|
|
|
|
updated(el) {
|
|
|
|
setForwardRef(el);
|
|
|
|
},
|
|
|
|
unmounted() {
|
|
|
|
setForwardRef(null);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
const NAME = "ElOnlyChild";
|
|
|
|
const OnlyChild = defineComponent({
|
|
|
|
name: NAME,
|
|
|
|
setup(_, {
|
|
|
|
slots,
|
|
|
|
attrs
|
|
|
|
}) {
|
|
|
|
var _a;
|
|
|
|
const forwardRefInjection = inject(FORWARD_REF_INJECTION_KEY);
|
|
|
|
const forwardRefDirective = useForwardRefDirective((_a = forwardRefInjection == null ? void 0 : forwardRefInjection.setForwardRef) != null ? _a : shared_cjs_prodExports.NOOP);
|
|
|
|
return () => {
|
|
|
|
var _a2;
|
|
|
|
const defaultSlot = (_a2 = slots.default) == null ? void 0 : _a2.call(slots, attrs);
|
|
|
|
if (!defaultSlot)
|
|
|
|
return null;
|
|
|
|
if (defaultSlot.length > 1) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
const firstLegitNode = findFirstLegitChild(defaultSlot);
|
|
|
|
if (!firstLegitNode) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
return withDirectives(cloneVNode(firstLegitNode, attrs), [[forwardRefDirective]]);
|
|
|
|
};
|
|
|
|
}
|
|
|
|
});
|
|
|
|
function findFirstLegitChild(node) {
|
|
|
|
if (!node)
|
|
|
|
return null;
|
|
|
|
const children = node;
|
|
|
|
for (const child of children) {
|
|
|
|
if (shared_cjs_prodExports.isObject(child)) {
|
|
|
|
switch (child.type) {
|
|
|
|
case Comment:
|
|
|
|
continue;
|
|
|
|
case Text:
|
|
|
|
case "svg":
|
|
|
|
return wrapTextContent(child);
|
|
|
|
case Fragment:
|
|
|
|
return findFirstLegitChild(child.children);
|
|
|
|
default:
|
|
|
|
return child;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return wrapTextContent(child);
|
|
|
|
}
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
function wrapTextContent(s) {
|
|
|
|
const ns = useNamespace("only-child");
|
|
|
|
return createVNode("span", {
|
|
|
|
"class": ns.e("content")
|
|
|
|
}, [s]);
|
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
|
|
|
|
const __default__$8 = defineComponent({
|
2025-02-20 19:30:25 +08:00
|
|
|
name: "ElPopperTrigger",
|
|
|
|
inheritAttrs: false
|
|
|
|
});
|
2025-03-11 13:57:38 +08:00
|
|
|
const _sfc_main$8 = /* @__PURE__ */ defineComponent({
|
|
|
|
...__default__$8,
|
2025-02-20 19:30:25 +08:00
|
|
|
props: popperTriggerProps,
|
|
|
|
setup(__props, { expose }) {
|
|
|
|
const props = __props;
|
|
|
|
const { role, triggerRef } = inject(POPPER_INJECTION_KEY, void 0);
|
|
|
|
useForwardRef(triggerRef);
|
|
|
|
const ariaControls = computed(() => {
|
|
|
|
return ariaHaspopup.value ? props.id : void 0;
|
|
|
|
});
|
|
|
|
const ariaDescribedby = computed(() => {
|
|
|
|
if (role && role.value === "tooltip") {
|
|
|
|
return props.open && props.id ? props.id : void 0;
|
|
|
|
}
|
|
|
|
return void 0;
|
|
|
|
});
|
|
|
|
const ariaHaspopup = computed(() => {
|
|
|
|
if (role && role.value !== "tooltip") {
|
|
|
|
return role.value;
|
|
|
|
}
|
|
|
|
return void 0;
|
|
|
|
});
|
|
|
|
const ariaExpanded = computed(() => {
|
|
|
|
return ariaHaspopup.value ? `${props.open}` : void 0;
|
|
|
|
});
|
|
|
|
expose({
|
|
|
|
triggerRef
|
|
|
|
});
|
|
|
|
return (_ctx, _cache) => {
|
|
|
|
return !_ctx.virtualTriggering ? (openBlock(), createBlock(unref(OnlyChild), mergeProps({ key: 0 }, _ctx.$attrs, {
|
|
|
|
"aria-controls": unref(ariaControls),
|
|
|
|
"aria-describedby": unref(ariaDescribedby),
|
|
|
|
"aria-expanded": unref(ariaExpanded),
|
|
|
|
"aria-haspopup": unref(ariaHaspopup)
|
|
|
|
}), {
|
|
|
|
default: withCtx(() => [
|
|
|
|
renderSlot(_ctx.$slots, "default")
|
|
|
|
]),
|
|
|
|
_: 3
|
|
|
|
}, 16, ["aria-controls", "aria-describedby", "aria-expanded", "aria-haspopup"])) : createCommentVNode("v-if", true);
|
|
|
|
};
|
|
|
|
}
|
|
|
|
});
|
2025-03-11 13:57:38 +08:00
|
|
|
var ElPopperTrigger = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__file", "trigger.vue"]]);
|
|
|
|
|
|
|
|
const composeEventHandlers = (theirsHandler, oursHandler, { checkForDefaultPrevented = true } = {}) => {
|
|
|
|
const handleEvent = (event) => {
|
|
|
|
const shouldPrevent = theirsHandler == null ? void 0 : theirsHandler(event);
|
|
|
|
if (checkForDefaultPrevented === false || !shouldPrevent) {
|
|
|
|
return oursHandler == null ? void 0 : oursHandler(event);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
return handleEvent;
|
2025-02-20 19:30:25 +08:00
|
|
|
};
|
2025-03-11 13:57:38 +08:00
|
|
|
|
|
|
|
const __default__$7 = defineComponent({
|
|
|
|
name: "ElTooltipTrigger"
|
2025-02-20 19:30:25 +08:00
|
|
|
});
|
2025-03-11 13:57:38 +08:00
|
|
|
const _sfc_main$7 = /* @__PURE__ */ defineComponent({
|
|
|
|
...__default__$7,
|
|
|
|
props: useTooltipTriggerProps,
|
|
|
|
setup(__props, { expose }) {
|
|
|
|
const props = __props;
|
|
|
|
const ns = useNamespace("tooltip");
|
|
|
|
const { controlled, id, open, onOpen, onClose, onToggle } = inject(TOOLTIP_INJECTION_KEY, void 0);
|
|
|
|
const triggerRef = ref(null);
|
|
|
|
const stopWhenControlledOrDisabled = () => {
|
|
|
|
if (unref(controlled) || props.disabled) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
const trigger = toRef(props, "trigger");
|
|
|
|
const onMouseenter = composeEventHandlers(stopWhenControlledOrDisabled, whenTrigger(trigger, "hover", onOpen));
|
|
|
|
const onMouseleave = composeEventHandlers(stopWhenControlledOrDisabled, whenTrigger(trigger, "hover", onClose));
|
|
|
|
const onClick = composeEventHandlers(stopWhenControlledOrDisabled, whenTrigger(trigger, "click", (e) => {
|
|
|
|
if (e.button === 0) {
|
|
|
|
onToggle(e);
|
|
|
|
}
|
|
|
|
}));
|
|
|
|
const onFocus = composeEventHandlers(stopWhenControlledOrDisabled, whenTrigger(trigger, "focus", onOpen));
|
|
|
|
const onBlur = composeEventHandlers(stopWhenControlledOrDisabled, whenTrigger(trigger, "focus", onClose));
|
|
|
|
const onContextMenu = composeEventHandlers(stopWhenControlledOrDisabled, whenTrigger(trigger, "contextmenu", (e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
onToggle(e);
|
|
|
|
}));
|
|
|
|
const onKeydown = composeEventHandlers(stopWhenControlledOrDisabled, (e) => {
|
|
|
|
const { code } = e;
|
|
|
|
if (props.triggerKeys.includes(code)) {
|
|
|
|
e.preventDefault();
|
|
|
|
onToggle(e);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
expose({
|
|
|
|
triggerRef
|
|
|
|
});
|
|
|
|
return (_ctx, _cache) => {
|
|
|
|
return openBlock(), createBlock(unref(ElPopperTrigger), {
|
|
|
|
id: unref(id),
|
|
|
|
"virtual-ref": _ctx.virtualRef,
|
|
|
|
open: unref(open),
|
|
|
|
"virtual-triggering": _ctx.virtualTriggering,
|
|
|
|
class: normalizeClass(unref(ns).e("trigger")),
|
|
|
|
onBlur: unref(onBlur),
|
|
|
|
onClick: unref(onClick),
|
|
|
|
onContextmenu: unref(onContextMenu),
|
|
|
|
onFocus: unref(onFocus),
|
|
|
|
onMouseenter: unref(onMouseenter),
|
|
|
|
onMouseleave: unref(onMouseleave),
|
|
|
|
onKeydown: unref(onKeydown)
|
|
|
|
}, {
|
|
|
|
default: withCtx(() => [
|
|
|
|
renderSlot(_ctx.$slots, "default")
|
|
|
|
]),
|
|
|
|
_: 3
|
|
|
|
}, 8, ["id", "virtual-ref", "open", "virtual-triggering", "class", "onBlur", "onClick", "onContextmenu", "onFocus", "onMouseenter", "onMouseleave", "onKeydown"]);
|
|
|
|
};
|
|
|
|
}
|
2025-02-20 19:30:25 +08:00
|
|
|
});
|
2025-03-11 13:57:38 +08:00
|
|
|
var ElTooltipTrigger = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__file", "trigger.vue"]]);
|
|
|
|
|
|
|
|
function unrefElement(elRef) {
|
|
|
|
var _a;
|
|
|
|
const plain = resolveUnref(elRef);
|
|
|
|
return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
|
|
|
|
}
|
|
|
|
const defaultWindow = void 0;
|
|
|
|
function useEventListener(...args) {
|
|
|
|
let target;
|
|
|
|
let events2;
|
|
|
|
let listeners;
|
|
|
|
let options;
|
|
|
|
if (isString(args[0]) || Array.isArray(args[0])) {
|
|
|
|
[events2, listeners, options] = args;
|
|
|
|
target = defaultWindow;
|
|
|
|
} else {
|
|
|
|
[target, events2, listeners, options] = args;
|
|
|
|
}
|
|
|
|
if (!target)
|
|
|
|
return noop;
|
|
|
|
if (!Array.isArray(events2))
|
|
|
|
events2 = [events2];
|
|
|
|
if (!Array.isArray(listeners))
|
|
|
|
listeners = [listeners];
|
|
|
|
const cleanups = [];
|
|
|
|
const cleanup = () => {
|
|
|
|
cleanups.forEach((fn) => fn());
|
|
|
|
cleanups.length = 0;
|
2025-02-20 19:30:25 +08:00
|
|
|
};
|
2025-03-11 13:57:38 +08:00
|
|
|
const register = (el, event, listener, options2) => {
|
|
|
|
el.addEventListener(event, listener, options2);
|
|
|
|
return () => el.removeEventListener(event, listener, options2);
|
2025-02-20 19:30:25 +08:00
|
|
|
};
|
2025-03-11 13:57:38 +08:00
|
|
|
const stopWatch = watch(() => [unrefElement(target), resolveUnref(options)], ([el, options2]) => {
|
|
|
|
cleanup();
|
|
|
|
if (!el)
|
|
|
|
return;
|
|
|
|
cleanups.push(...events2.flatMap((event) => {
|
|
|
|
return listeners.map((listener) => register(el, event, listener, options2));
|
|
|
|
}));
|
|
|
|
}, { immediate: true, flush: "post" });
|
|
|
|
const stop = () => {
|
|
|
|
stopWatch();
|
|
|
|
cleanup();
|
2025-02-20 19:30:25 +08:00
|
|
|
};
|
2025-03-11 13:57:38 +08:00
|
|
|
tryOnScopeDispose(stop);
|
|
|
|
return stop;
|
|
|
|
}
|
|
|
|
function onClickOutside(target, handler, options = {}) {
|
|
|
|
const { window: window2 = defaultWindow, ignore = [], capture = true, detectIframe = false } = options;
|
|
|
|
if (!window2)
|
|
|
|
return;
|
|
|
|
let shouldListen = true;
|
|
|
|
const shouldIgnore = (event) => {
|
|
|
|
return ignore.some((target2) => {
|
|
|
|
if (typeof target2 === "string") {
|
|
|
|
return Array.from(window2.document.querySelectorAll(target2)).some((el) => el === event.target || event.composedPath().includes(el));
|
|
|
|
} else {
|
|
|
|
const el = unrefElement(target2);
|
|
|
|
return el && (event.target === el || event.composedPath().includes(el));
|
2025-02-20 19:30:25 +08:00
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
});
|
2025-02-20 19:30:25 +08:00
|
|
|
};
|
2025-03-11 13:57:38 +08:00
|
|
|
const listener = (event) => {
|
|
|
|
const el = unrefElement(target);
|
|
|
|
if (!el || el === event.target || event.composedPath().includes(el))
|
|
|
|
return;
|
|
|
|
if (event.detail === 0)
|
|
|
|
shouldListen = !shouldIgnore(event);
|
|
|
|
if (!shouldListen) {
|
|
|
|
shouldListen = true;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
handler(event);
|
2025-02-20 19:30:25 +08:00
|
|
|
};
|
2025-03-11 13:57:38 +08:00
|
|
|
const cleanup = [
|
|
|
|
useEventListener(window2, "click", listener, { passive: true, capture }),
|
|
|
|
useEventListener(window2, "pointerdown", (e) => {
|
|
|
|
const el = unrefElement(target);
|
|
|
|
if (el)
|
|
|
|
shouldListen = !e.composedPath().includes(el) && !shouldIgnore(e);
|
|
|
|
}, { passive: true }),
|
|
|
|
detectIframe && useEventListener(window2, "blur", (event) => {
|
|
|
|
var _a;
|
|
|
|
const el = unrefElement(target);
|
|
|
|
if (((_a = window2.document.activeElement) == null ? void 0 : _a.tagName) === "IFRAME" && !(el == null ? void 0 : el.contains(window2.document.activeElement)))
|
|
|
|
handler(event);
|
|
|
|
})
|
|
|
|
].filter(Boolean);
|
|
|
|
const stop = () => cleanup.forEach((fn) => fn());
|
|
|
|
return stop;
|
|
|
|
}
|
|
|
|
function useSupported(callback, sync = false) {
|
|
|
|
const isSupported = ref();
|
|
|
|
const update = () => isSupported.value = Boolean(callback());
|
|
|
|
update();
|
|
|
|
tryOnMounted(update, sync);
|
|
|
|
return isSupported;
|
|
|
|
}
|
|
|
|
const _global = typeof globalThis !== "undefined" ? globalThis : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
|
|
|
|
const globalKey = "__vueuse_ssr_handlers__";
|
|
|
|
_global[globalKey] = _global[globalKey] || {};
|
|
|
|
var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
|
|
|
|
var __hasOwnProp$g = Object.prototype.hasOwnProperty;
|
|
|
|
var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
|
|
|
|
var __objRest$2 = (source, exclude) => {
|
|
|
|
var target = {};
|
|
|
|
for (var prop in source)
|
|
|
|
if (__hasOwnProp$g.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
|
|
target[prop] = source[prop];
|
|
|
|
if (source != null && __getOwnPropSymbols$g)
|
|
|
|
for (var prop of __getOwnPropSymbols$g(source)) {
|
|
|
|
if (exclude.indexOf(prop) < 0 && __propIsEnum$g.call(source, prop))
|
|
|
|
target[prop] = source[prop];
|
|
|
|
}
|
|
|
|
return target;
|
2025-02-20 19:30:25 +08:00
|
|
|
};
|
2025-03-11 13:57:38 +08:00
|
|
|
function useResizeObserver(target, callback, options = {}) {
|
|
|
|
const _a = options, { window: window2 = defaultWindow } = _a, observerOptions = __objRest$2(_a, ["window"]);
|
|
|
|
let observer;
|
|
|
|
const isSupported = useSupported(() => window2 && "ResizeObserver" in window2);
|
|
|
|
const cleanup = () => {
|
|
|
|
if (observer) {
|
|
|
|
observer.disconnect();
|
|
|
|
observer = void 0;
|
|
|
|
}
|
2025-02-20 19:30:25 +08:00
|
|
|
};
|
2025-03-11 13:57:38 +08:00
|
|
|
const stopWatch = watch(() => unrefElement(target), (el) => {
|
|
|
|
cleanup();
|
|
|
|
if (isSupported.value && window2 && el) {
|
|
|
|
observer = new ResizeObserver(callback);
|
|
|
|
observer.observe(el, observerOptions);
|
|
|
|
}
|
|
|
|
}, { immediate: true, flush: "post" });
|
|
|
|
const stop = () => {
|
|
|
|
cleanup();
|
|
|
|
stopWatch();
|
2025-02-20 19:30:25 +08:00
|
|
|
};
|
2025-03-11 13:57:38 +08:00
|
|
|
tryOnScopeDispose(stop);
|
2025-02-20 19:30:25 +08:00
|
|
|
return {
|
2025-03-11 13:57:38 +08:00
|
|
|
isSupported,
|
|
|
|
stop
|
2025-02-20 19:30:25 +08:00
|
|
|
};
|
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
var SwipeDirection;
|
|
|
|
(function(SwipeDirection2) {
|
|
|
|
SwipeDirection2["UP"] = "UP";
|
|
|
|
SwipeDirection2["RIGHT"] = "RIGHT";
|
|
|
|
SwipeDirection2["DOWN"] = "DOWN";
|
|
|
|
SwipeDirection2["LEFT"] = "LEFT";
|
|
|
|
SwipeDirection2["NONE"] = "NONE";
|
|
|
|
})(SwipeDirection || (SwipeDirection = {}));
|
|
|
|
var __defProp = Object.defineProperty;
|
|
|
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
|
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
|
|
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
|
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
|
|
var __spreadValues = (a, b) => {
|
|
|
|
for (var prop in b || (b = {}))
|
|
|
|
if (__hasOwnProp.call(b, prop))
|
|
|
|
__defNormalProp(a, prop, b[prop]);
|
|
|
|
if (__getOwnPropSymbols)
|
|
|
|
for (var prop of __getOwnPropSymbols(b)) {
|
|
|
|
if (__propIsEnum.call(b, prop))
|
|
|
|
__defNormalProp(a, prop, b[prop]);
|
|
|
|
}
|
|
|
|
return a;
|
|
|
|
};
|
|
|
|
const _TransitionPresets = {
|
|
|
|
easeInSine: [0.12, 0, 0.39, 0],
|
|
|
|
easeOutSine: [0.61, 1, 0.88, 1],
|
|
|
|
easeInOutSine: [0.37, 0, 0.63, 1],
|
|
|
|
easeInQuad: [0.11, 0, 0.5, 0],
|
|
|
|
easeOutQuad: [0.5, 1, 0.89, 1],
|
|
|
|
easeInOutQuad: [0.45, 0, 0.55, 1],
|
|
|
|
easeInCubic: [0.32, 0, 0.67, 0],
|
|
|
|
easeOutCubic: [0.33, 1, 0.68, 1],
|
|
|
|
easeInOutCubic: [0.65, 0, 0.35, 1],
|
|
|
|
easeInQuart: [0.5, 0, 0.75, 0],
|
|
|
|
easeOutQuart: [0.25, 1, 0.5, 1],
|
|
|
|
easeInOutQuart: [0.76, 0, 0.24, 1],
|
|
|
|
easeInQuint: [0.64, 0, 0.78, 0],
|
|
|
|
easeOutQuint: [0.22, 1, 0.36, 1],
|
|
|
|
easeInOutQuint: [0.83, 0, 0.17, 1],
|
|
|
|
easeInExpo: [0.7, 0, 0.84, 0],
|
|
|
|
easeOutExpo: [0.16, 1, 0.3, 1],
|
|
|
|
easeInOutExpo: [0.87, 0, 0.13, 1],
|
|
|
|
easeInCirc: [0.55, 0, 1, 0.45],
|
|
|
|
easeOutCirc: [0, 0.55, 0.45, 1],
|
|
|
|
easeInOutCirc: [0.85, 0, 0.15, 1],
|
|
|
|
easeInBack: [0.36, 0, 0.66, -0.56],
|
|
|
|
easeOutBack: [0.34, 1.56, 0.64, 1],
|
|
|
|
easeInOutBack: [0.68, -0.6, 0.32, 1.6]
|
|
|
|
};
|
|
|
|
__spreadValues({
|
|
|
|
linear: identity$1
|
|
|
|
}, _TransitionPresets);
|
|
|
|
|
|
|
|
const usePopperContainerId = () => {
|
|
|
|
const namespace = useGetDerivedNamespace();
|
|
|
|
const idInjection = useIdInjection();
|
|
|
|
const id = computed(() => {
|
|
|
|
return `${namespace.value}-popper-container-${idInjection.prefix}`;
|
|
|
|
});
|
|
|
|
const selector = computed(() => `#${id.value}`);
|
|
|
|
return {
|
|
|
|
id,
|
|
|
|
selector
|
2025-02-20 19:30:25 +08:00
|
|
|
};
|
2025-03-11 13:57:38 +08:00
|
|
|
};
|
|
|
|
const usePopperContainer = () => {
|
|
|
|
const { id, selector } = usePopperContainerId();
|
2025-02-20 19:30:25 +08:00
|
|
|
return {
|
2025-03-11 13:57:38 +08:00
|
|
|
id,
|
|
|
|
selector
|
2025-02-20 19:30:25 +08:00
|
|
|
};
|
|
|
|
};
|
2025-03-11 13:57:38 +08:00
|
|
|
|
|
|
|
const usePopperContentFocusTrap = (props, emit) => {
|
|
|
|
const trapped = ref(false);
|
|
|
|
const focusStartRef = ref();
|
|
|
|
const onFocusAfterTrapped = () => {
|
|
|
|
emit("focus");
|
2025-02-20 19:30:25 +08:00
|
|
|
};
|
2025-03-11 13:57:38 +08:00
|
|
|
const onFocusAfterReleased = (event) => {
|
|
|
|
var _a;
|
|
|
|
if (((_a = event.detail) == null ? void 0 : _a.focusReason) !== "pointer") {
|
|
|
|
focusStartRef.value = "first";
|
|
|
|
emit("blur");
|
|
|
|
}
|
|
|
|
};
|
|
|
|
const onFocusInTrap = (event) => {
|
|
|
|
if (props.visible && !trapped.value) {
|
|
|
|
if (event.target) {
|
|
|
|
focusStartRef.value = event.target;
|
2025-02-20 19:30:25 +08:00
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
trapped.value = true;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
const onFocusoutPrevented = (event) => {
|
|
|
|
if (!props.trapping) {
|
|
|
|
if (event.detail.focusReason === "pointer") {
|
|
|
|
event.preventDefault();
|
2025-02-20 19:30:25 +08:00
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
trapped.value = false;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
const onReleaseRequested = () => {
|
|
|
|
trapped.value = false;
|
|
|
|
emit("close");
|
|
|
|
};
|
|
|
|
return {
|
|
|
|
focusStartRef,
|
|
|
|
trapped,
|
|
|
|
onFocusAfterReleased,
|
|
|
|
onFocusAfterTrapped,
|
|
|
|
onFocusInTrap,
|
|
|
|
onFocusoutPrevented,
|
|
|
|
onReleaseRequested
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
const buildPopperOptions = (props, modifiers = []) => {
|
|
|
|
const { placement, strategy, popperOptions } = props;
|
|
|
|
const options = {
|
|
|
|
placement,
|
|
|
|
strategy,
|
|
|
|
...popperOptions,
|
|
|
|
modifiers: [...genModifiers(props), ...modifiers]
|
|
|
|
};
|
|
|
|
deriveExtraModifiers(options, popperOptions == null ? void 0 : popperOptions.modifiers);
|
|
|
|
return options;
|
|
|
|
};
|
|
|
|
const unwrapMeasurableEl = ($el) => {
|
|
|
|
return;
|
|
|
|
};
|
|
|
|
function genModifiers(options) {
|
|
|
|
const { offset, gpuAcceleration, fallbackPlacements } = options;
|
|
|
|
return [
|
|
|
|
{
|
|
|
|
name: "offset",
|
|
|
|
options: {
|
|
|
|
offset: [0, offset != null ? offset : 12]
|
2025-02-20 19:30:25 +08:00
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "preventOverflow",
|
|
|
|
options: {
|
|
|
|
padding: {
|
|
|
|
top: 2,
|
|
|
|
bottom: 2,
|
|
|
|
left: 5,
|
|
|
|
right: 5
|
|
|
|
}
|
2025-02-20 19:30:25 +08:00
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "flip",
|
|
|
|
options: {
|
|
|
|
padding: 5,
|
|
|
|
fallbackPlacements
|
2025-02-20 19:30:25 +08:00
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "computeStyles",
|
|
|
|
options: {
|
|
|
|
gpuAcceleration
|
2025-02-20 19:30:25 +08:00
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
}
|
|
|
|
];
|
|
|
|
}
|
|
|
|
function deriveExtraModifiers(options, modifiers) {
|
|
|
|
if (modifiers) {
|
|
|
|
options.modifiers = [...options.modifiers, ...modifiers != null ? modifiers : []];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const usePopper = (referenceElementRef, popperElementRef, opts = {}) => {
|
|
|
|
const stateUpdater = {
|
|
|
|
name: "updateState",
|
|
|
|
enabled: true,
|
|
|
|
phase: "write",
|
|
|
|
fn: ({ state }) => {
|
|
|
|
const derivedState = deriveState(state);
|
|
|
|
Object.assign(states.value, derivedState);
|
|
|
|
},
|
|
|
|
requires: ["computeStyles"]
|
|
|
|
};
|
|
|
|
const options = computed(() => {
|
|
|
|
const { onFirstUpdate, placement, strategy, modifiers } = unref(opts);
|
|
|
|
return {
|
|
|
|
onFirstUpdate,
|
|
|
|
placement: placement || "bottom",
|
|
|
|
strategy: strategy || "absolute",
|
|
|
|
modifiers: [
|
|
|
|
...modifiers || [],
|
|
|
|
stateUpdater,
|
|
|
|
{ name: "applyStyles", enabled: false }
|
|
|
|
]
|
2025-02-20 19:30:25 +08:00
|
|
|
};
|
2025-03-11 13:57:38 +08:00
|
|
|
});
|
|
|
|
const instanceRef = shallowRef();
|
|
|
|
const states = ref({
|
|
|
|
styles: {
|
|
|
|
popper: {
|
|
|
|
position: unref(options).strategy,
|
|
|
|
left: "0",
|
|
|
|
top: "0"
|
|
|
|
},
|
|
|
|
arrow: {
|
|
|
|
position: "absolute"
|
2025-02-20 19:30:25 +08:00
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
},
|
|
|
|
attributes: {}
|
|
|
|
});
|
|
|
|
const destroy = () => {
|
|
|
|
if (!instanceRef.value)
|
|
|
|
return;
|
|
|
|
instanceRef.value.destroy();
|
|
|
|
instanceRef.value = void 0;
|
|
|
|
};
|
|
|
|
watch(options, (newOptions) => {
|
|
|
|
const instance = unref(instanceRef);
|
|
|
|
if (instance) {
|
|
|
|
instance.setOptions(newOptions);
|
|
|
|
}
|
|
|
|
}, {
|
|
|
|
deep: true
|
|
|
|
});
|
|
|
|
watch([referenceElementRef, popperElementRef], ([referenceElement, popperElement]) => {
|
|
|
|
destroy();
|
|
|
|
if (!referenceElement || !popperElement)
|
|
|
|
return;
|
|
|
|
instanceRef.value = createPopper(referenceElement, popperElement, unref(options));
|
|
|
|
});
|
|
|
|
return {
|
|
|
|
state: computed(() => {
|
|
|
|
var _a;
|
|
|
|
return { ...((_a = unref(instanceRef)) == null ? void 0 : _a.state) || {} };
|
|
|
|
}),
|
|
|
|
styles: computed(() => unref(states).styles),
|
|
|
|
attributes: computed(() => unref(states).attributes),
|
|
|
|
update: () => {
|
|
|
|
var _a;
|
|
|
|
return (_a = unref(instanceRef)) == null ? void 0 : _a.update();
|
|
|
|
},
|
|
|
|
forceUpdate: () => {
|
|
|
|
var _a;
|
|
|
|
return (_a = unref(instanceRef)) == null ? void 0 : _a.forceUpdate();
|
|
|
|
},
|
|
|
|
instanceRef: computed(() => unref(instanceRef))
|
|
|
|
};
|
|
|
|
};
|
|
|
|
function deriveState(state) {
|
|
|
|
const elements = Object.keys(state.elements);
|
|
|
|
const styles = fromPairs(elements.map((element) => [element, state.styles[element] || {}]));
|
|
|
|
const attributes = fromPairs(elements.map((element) => [element, state.attributes[element]]));
|
|
|
|
return {
|
|
|
|
styles,
|
|
|
|
attributes
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
const DEFAULT_ARROW_OFFSET = 0;
|
|
|
|
const usePopperContent = (props) => {
|
|
|
|
const { popperInstanceRef, contentRef, triggerRef, role } = inject(POPPER_INJECTION_KEY, void 0);
|
|
|
|
const arrowRef = ref();
|
|
|
|
const arrowOffset = ref();
|
|
|
|
const eventListenerModifier = computed(() => {
|
|
|
|
return {
|
|
|
|
name: "eventListeners",
|
|
|
|
enabled: !!props.visible
|
2025-02-20 19:30:25 +08:00
|
|
|
};
|
2025-03-11 13:57:38 +08:00
|
|
|
});
|
|
|
|
const arrowModifier = computed(() => {
|
|
|
|
var _a;
|
|
|
|
const arrowEl = unref(arrowRef);
|
|
|
|
const offset = (_a = unref(arrowOffset)) != null ? _a : DEFAULT_ARROW_OFFSET;
|
|
|
|
return {
|
|
|
|
name: "arrow",
|
|
|
|
enabled: !isUndefined(arrowEl),
|
|
|
|
options: {
|
|
|
|
element: arrowEl,
|
|
|
|
padding: offset
|
2025-02-20 19:30:25 +08:00
|
|
|
}
|
|
|
|
};
|
2025-03-11 13:57:38 +08:00
|
|
|
});
|
|
|
|
const options = computed(() => {
|
2025-02-20 19:30:25 +08:00
|
|
|
return {
|
2025-03-11 13:57:38 +08:00
|
|
|
onFirstUpdate: () => {
|
|
|
|
update();
|
|
|
|
},
|
|
|
|
...buildPopperOptions(props, [
|
|
|
|
unref(arrowModifier),
|
|
|
|
unref(eventListenerModifier)
|
|
|
|
])
|
2025-02-20 19:30:25 +08:00
|
|
|
};
|
2025-03-11 13:57:38 +08:00
|
|
|
});
|
|
|
|
const computedReference = computed(() => unwrapMeasurableEl(props.referenceEl) || unref(triggerRef));
|
|
|
|
const { attributes, state, styles, update, forceUpdate, instanceRef } = usePopper(computedReference, contentRef, options);
|
|
|
|
watch(instanceRef, (instance) => popperInstanceRef.value = instance);
|
2025-02-20 19:30:25 +08:00
|
|
|
return {
|
2025-03-11 13:57:38 +08:00
|
|
|
attributes,
|
|
|
|
arrowRef,
|
|
|
|
contentRef,
|
|
|
|
instanceRef,
|
|
|
|
state,
|
|
|
|
styles,
|
|
|
|
role,
|
|
|
|
forceUpdate,
|
|
|
|
update
|
2025-02-20 19:30:25 +08:00
|
|
|
};
|
|
|
|
};
|
2025-03-11 13:57:38 +08:00
|
|
|
|
|
|
|
const usePopperContentDOM = (props, {
|
|
|
|
attributes,
|
|
|
|
styles,
|
|
|
|
role
|
|
|
|
}) => {
|
|
|
|
const { nextZIndex } = useZIndex();
|
|
|
|
const ns = useNamespace("popper");
|
|
|
|
const contentAttrs = computed(() => unref(attributes).popper);
|
|
|
|
const contentZIndex = ref(isNumber(props.zIndex) ? props.zIndex : nextZIndex());
|
|
|
|
const contentClass = computed(() => [
|
|
|
|
ns.b(),
|
|
|
|
ns.is("pure", props.pure),
|
|
|
|
ns.is(props.effect),
|
|
|
|
props.popperClass
|
|
|
|
]);
|
|
|
|
const contentStyle = computed(() => {
|
|
|
|
return [
|
|
|
|
{ zIndex: unref(contentZIndex) },
|
|
|
|
unref(styles).popper,
|
|
|
|
props.popperStyle || {}
|
|
|
|
];
|
|
|
|
});
|
|
|
|
const ariaModal = computed(() => role.value === "dialog" ? "false" : void 0);
|
|
|
|
const arrowStyle = computed(() => unref(styles).arrow || {});
|
|
|
|
const updateZIndex = () => {
|
|
|
|
contentZIndex.value = isNumber(props.zIndex) ? props.zIndex : nextZIndex();
|
2025-02-20 19:30:25 +08:00
|
|
|
};
|
2025-03-11 13:57:38 +08:00
|
|
|
return {
|
|
|
|
ariaModal,
|
|
|
|
arrowStyle,
|
|
|
|
contentAttrs,
|
|
|
|
contentClass,
|
|
|
|
contentStyle,
|
|
|
|
contentZIndex,
|
|
|
|
updateZIndex
|
2025-02-20 19:30:25 +08:00
|
|
|
};
|
|
|
|
};
|
2025-03-11 13:57:38 +08:00
|
|
|
|
|
|
|
const formContextKey = Symbol("formContextKey");
|
|
|
|
const formItemContextKey = Symbol("formItemContextKey");
|
|
|
|
|
|
|
|
const __default__$6 = defineComponent({
|
|
|
|
name: "ElPopperContent"
|
2025-02-20 19:30:25 +08:00
|
|
|
});
|
2025-03-11 13:57:38 +08:00
|
|
|
const _sfc_main$6 = /* @__PURE__ */ defineComponent({
|
|
|
|
...__default__$6,
|
|
|
|
props: popperContentProps,
|
|
|
|
emits: popperContentEmits,
|
|
|
|
setup(__props, { expose, emit }) {
|
2025-02-20 19:30:25 +08:00
|
|
|
const props = __props;
|
2025-03-11 13:57:38 +08:00
|
|
|
const {
|
|
|
|
focusStartRef,
|
|
|
|
trapped,
|
|
|
|
onFocusAfterReleased,
|
|
|
|
onFocusAfterTrapped,
|
|
|
|
onFocusInTrap,
|
|
|
|
onFocusoutPrevented,
|
|
|
|
onReleaseRequested
|
|
|
|
} = usePopperContentFocusTrap(props, emit);
|
|
|
|
const { attributes, arrowRef, contentRef, styles, instanceRef, role, update } = usePopperContent(props);
|
|
|
|
const {
|
|
|
|
arrowStyle,
|
|
|
|
contentAttrs,
|
|
|
|
contentClass,
|
|
|
|
contentStyle,
|
|
|
|
updateZIndex
|
|
|
|
} = usePopperContentDOM(props, {
|
|
|
|
styles,
|
|
|
|
attributes,
|
|
|
|
role
|
|
|
|
});
|
|
|
|
const formItemContext = inject(formItemContextKey, void 0);
|
|
|
|
const arrowOffset = ref();
|
|
|
|
provide(POPPER_CONTENT_INJECTION_KEY, {
|
|
|
|
arrowStyle,
|
|
|
|
arrowRef,
|
|
|
|
arrowOffset
|
2025-02-20 19:30:25 +08:00
|
|
|
});
|
2025-03-11 13:57:38 +08:00
|
|
|
if (formItemContext) {
|
|
|
|
provide(formItemContextKey, {
|
|
|
|
...formItemContext,
|
|
|
|
addInputId: shared_cjs_prodExports.NOOP,
|
|
|
|
removeInputId: shared_cjs_prodExports.NOOP
|
|
|
|
});
|
|
|
|
}
|
|
|
|
const updatePopper = (shouldUpdateZIndex = true) => {
|
|
|
|
update();
|
|
|
|
shouldUpdateZIndex && updateZIndex();
|
|
|
|
};
|
2025-02-20 19:30:25 +08:00
|
|
|
expose({
|
2025-03-11 13:57:38 +08:00
|
|
|
popperContentRef: contentRef,
|
|
|
|
popperInstanceRef: instanceRef,
|
|
|
|
updatePopper,
|
|
|
|
contentStyle
|
2025-02-20 19:30:25 +08:00
|
|
|
});
|
|
|
|
return (_ctx, _cache) => {
|
2025-03-11 13:57:38 +08:00
|
|
|
return openBlock(), createElementBlock("div", mergeProps({
|
|
|
|
ref_key: "contentRef",
|
|
|
|
ref: contentRef
|
|
|
|
}, unref(contentAttrs), {
|
|
|
|
style: unref(contentStyle),
|
|
|
|
class: unref(contentClass),
|
|
|
|
tabindex: "-1",
|
|
|
|
onMouseenter: (e) => _ctx.$emit("mouseenter", e),
|
|
|
|
onMouseleave: (e) => _ctx.$emit("mouseleave", e)
|
|
|
|
}), [
|
|
|
|
createVNode(unref(ElFocusTrap), {
|
|
|
|
trapped: unref(trapped),
|
|
|
|
"trap-on-focus-in": true,
|
|
|
|
"focus-trap-el": unref(contentRef),
|
|
|
|
"focus-start-el": unref(focusStartRef),
|
|
|
|
onFocusAfterTrapped: unref(onFocusAfterTrapped),
|
|
|
|
onFocusAfterReleased: unref(onFocusAfterReleased),
|
|
|
|
onFocusin: unref(onFocusInTrap),
|
|
|
|
onFocusoutPrevented: unref(onFocusoutPrevented),
|
|
|
|
onReleaseRequested: unref(onReleaseRequested)
|
|
|
|
}, {
|
|
|
|
default: withCtx(() => [
|
|
|
|
renderSlot(_ctx.$slots, "default")
|
|
|
|
]),
|
|
|
|
_: 3
|
|
|
|
}, 8, ["trapped", "focus-trap-el", "focus-start-el", "onFocusAfterTrapped", "onFocusAfterReleased", "onFocusin", "onFocusoutPrevented", "onReleaseRequested"])
|
|
|
|
], 16, ["onMouseenter", "onMouseleave"]);
|
2025-02-20 19:30:25 +08:00
|
|
|
};
|
|
|
|
}
|
|
|
|
});
|
2025-03-11 13:57:38 +08:00
|
|
|
var ElPopperContent = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__file", "content.vue"]]);
|
|
|
|
|
|
|
|
const __default__$5 = defineComponent({
|
2025-02-20 19:30:25 +08:00
|
|
|
name: "ElTooltipContent",
|
|
|
|
inheritAttrs: false
|
|
|
|
});
|
2025-03-11 13:57:38 +08:00
|
|
|
const _sfc_main$5 = /* @__PURE__ */ defineComponent({
|
|
|
|
...__default__$5,
|
2025-02-20 19:30:25 +08:00
|
|
|
props: useTooltipContentProps,
|
|
|
|
setup(__props, { expose }) {
|
|
|
|
const props = __props;
|
|
|
|
const { selector } = usePopperContainerId();
|
|
|
|
const ns = useNamespace("tooltip");
|
|
|
|
const contentRef = ref();
|
|
|
|
let stopHandle;
|
|
|
|
const {
|
|
|
|
controlled,
|
|
|
|
id,
|
|
|
|
open,
|
|
|
|
trigger,
|
|
|
|
onClose,
|
|
|
|
onOpen,
|
|
|
|
onShow,
|
|
|
|
onHide,
|
|
|
|
onBeforeShow,
|
|
|
|
onBeforeHide
|
|
|
|
} = inject(TOOLTIP_INJECTION_KEY, void 0);
|
|
|
|
const transitionClass = computed(() => {
|
|
|
|
return props.transition || `${ns.namespace.value}-fade-in-linear`;
|
|
|
|
});
|
|
|
|
const persistentRef = computed(() => {
|
|
|
|
return props.persistent;
|
|
|
|
});
|
|
|
|
const shouldRender = computed(() => {
|
|
|
|
return unref(persistentRef) ? true : unref(open);
|
|
|
|
});
|
|
|
|
const shouldShow = computed(() => {
|
|
|
|
return props.disabled ? false : unref(open);
|
|
|
|
});
|
|
|
|
const appendTo = computed(() => {
|
|
|
|
return props.appendTo || selector.value;
|
|
|
|
});
|
|
|
|
const contentStyle = computed(() => {
|
|
|
|
var _a;
|
|
|
|
return (_a = props.style) != null ? _a : {};
|
|
|
|
});
|
|
|
|
const ariaHidden = ref(true);
|
|
|
|
const onTransitionLeave = () => {
|
|
|
|
onHide();
|
|
|
|
isFocusInsideContent() && tryFocus((void 0).body);
|
|
|
|
ariaHidden.value = true;
|
|
|
|
};
|
|
|
|
const stopWhenControlled = () => {
|
|
|
|
if (unref(controlled))
|
|
|
|
return true;
|
|
|
|
};
|
|
|
|
const onContentEnter = composeEventHandlers(stopWhenControlled, () => {
|
|
|
|
if (props.enterable && unref(trigger) === "hover") {
|
|
|
|
onOpen();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
const onContentLeave = composeEventHandlers(stopWhenControlled, () => {
|
|
|
|
if (unref(trigger) === "hover") {
|
|
|
|
onClose();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
const onBeforeEnter = () => {
|
|
|
|
var _a, _b;
|
|
|
|
(_b = (_a = contentRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
|
|
|
|
onBeforeShow == null ? void 0 : onBeforeShow();
|
|
|
|
};
|
|
|
|
const onBeforeLeave = () => {
|
|
|
|
onBeforeHide == null ? void 0 : onBeforeHide();
|
|
|
|
};
|
|
|
|
const onAfterShow = () => {
|
|
|
|
onShow();
|
|
|
|
stopHandle = onClickOutside(computed(() => {
|
|
|
|
var _a;
|
|
|
|
return (_a = contentRef.value) == null ? void 0 : _a.popperContentRef;
|
|
|
|
}), () => {
|
|
|
|
if (unref(controlled))
|
|
|
|
return;
|
|
|
|
const $trigger = unref(trigger);
|
|
|
|
if ($trigger !== "hover") {
|
|
|
|
onClose();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
const onBlur = () => {
|
|
|
|
if (!props.virtualTriggering) {
|
|
|
|
onClose();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
const isFocusInsideContent = (event) => {
|
|
|
|
var _a;
|
|
|
|
const popperContent = (_a = contentRef.value) == null ? void 0 : _a.popperContentRef;
|
|
|
|
const activeElement = (event == null ? void 0 : event.relatedTarget) || (void 0).activeElement;
|
|
|
|
return popperContent == null ? void 0 : popperContent.contains(activeElement);
|
|
|
|
};
|
|
|
|
watch(() => unref(open), (val) => {
|
|
|
|
if (!val) {
|
|
|
|
stopHandle == null ? void 0 : stopHandle();
|
|
|
|
} else {
|
|
|
|
ariaHidden.value = false;
|
|
|
|
}
|
|
|
|
}, {
|
|
|
|
flush: "post"
|
|
|
|
});
|
|
|
|
watch(() => props.content, () => {
|
|
|
|
var _a, _b;
|
|
|
|
(_b = (_a = contentRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
|
|
|
|
});
|
|
|
|
expose({
|
|
|
|
contentRef,
|
|
|
|
isFocusInsideContent
|
|
|
|
});
|
|
|
|
return (_ctx, _cache) => {
|
|
|
|
return openBlock(), createBlock(unref(ElTeleport), {
|
|
|
|
disabled: !_ctx.teleported,
|
|
|
|
to: unref(appendTo)
|
|
|
|
}, {
|
|
|
|
default: withCtx(() => [
|
|
|
|
createVNode(Transition, {
|
|
|
|
name: unref(transitionClass),
|
|
|
|
onAfterLeave: onTransitionLeave,
|
|
|
|
onBeforeEnter,
|
|
|
|
onAfterEnter: onAfterShow,
|
|
|
|
onBeforeLeave
|
|
|
|
}, {
|
|
|
|
default: withCtx(() => [
|
|
|
|
unref(shouldRender) ? withDirectives((openBlock(), createBlock(unref(ElPopperContent), mergeProps({
|
|
|
|
key: 0,
|
|
|
|
id: unref(id),
|
|
|
|
ref_key: "contentRef",
|
|
|
|
ref: contentRef
|
|
|
|
}, _ctx.$attrs, {
|
|
|
|
"aria-label": _ctx.ariaLabel,
|
|
|
|
"aria-hidden": ariaHidden.value,
|
|
|
|
"boundaries-padding": _ctx.boundariesPadding,
|
|
|
|
"fallback-placements": _ctx.fallbackPlacements,
|
|
|
|
"gpu-acceleration": _ctx.gpuAcceleration,
|
|
|
|
offset: _ctx.offset,
|
|
|
|
placement: _ctx.placement,
|
|
|
|
"popper-options": _ctx.popperOptions,
|
|
|
|
strategy: _ctx.strategy,
|
|
|
|
effect: _ctx.effect,
|
|
|
|
enterable: _ctx.enterable,
|
|
|
|
pure: _ctx.pure,
|
|
|
|
"popper-class": _ctx.popperClass,
|
|
|
|
"popper-style": [_ctx.popperStyle, unref(contentStyle)],
|
|
|
|
"reference-el": _ctx.referenceEl,
|
|
|
|
"trigger-target-el": _ctx.triggerTargetEl,
|
|
|
|
visible: unref(shouldShow),
|
|
|
|
"z-index": _ctx.zIndex,
|
|
|
|
onMouseenter: unref(onContentEnter),
|
|
|
|
onMouseleave: unref(onContentLeave),
|
|
|
|
onBlur,
|
|
|
|
onClose: unref(onClose)
|
|
|
|
}), {
|
|
|
|
default: withCtx(() => [
|
|
|
|
renderSlot(_ctx.$slots, "default")
|
|
|
|
]),
|
|
|
|
_: 3
|
|
|
|
}, 16, ["id", "aria-label", "aria-hidden", "boundaries-padding", "fallback-placements", "gpu-acceleration", "offset", "placement", "popper-options", "strategy", "effect", "enterable", "pure", "popper-class", "popper-style", "reference-el", "trigger-target-el", "visible", "z-index", "onMouseenter", "onMouseleave", "onClose"])), [
|
|
|
|
[vShow, unref(shouldShow)]
|
|
|
|
]) : createCommentVNode("v-if", true)
|
|
|
|
]),
|
|
|
|
_: 3
|
|
|
|
}, 8, ["name"])
|
|
|
|
]),
|
|
|
|
_: 3
|
|
|
|
}, 8, ["disabled", "to"]);
|
|
|
|
};
|
|
|
|
}
|
|
|
|
});
|
2025-03-11 13:57:38 +08:00
|
|
|
var ElTooltipContent = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__file", "content.vue"]]);
|
|
|
|
|
|
|
|
const __default__$4 = defineComponent({
|
|
|
|
name: "ElPopperArrow",
|
|
|
|
inheritAttrs: false
|
|
|
|
});
|
|
|
|
const _sfc_main$4 = /* @__PURE__ */ defineComponent({
|
|
|
|
...__default__$4,
|
|
|
|
props: popperArrowProps,
|
|
|
|
setup(__props, { expose }) {
|
|
|
|
const props = __props;
|
|
|
|
const ns = useNamespace("popper");
|
|
|
|
const { arrowOffset, arrowRef, arrowStyle } = inject(POPPER_CONTENT_INJECTION_KEY, void 0);
|
|
|
|
watch(() => props.arrowOffset, (val) => {
|
|
|
|
arrowOffset.value = val;
|
|
|
|
});
|
|
|
|
expose({
|
|
|
|
arrowRef
|
|
|
|
});
|
|
|
|
return (_ctx, _cache) => {
|
|
|
|
return openBlock(), createElementBlock("span", {
|
|
|
|
ref_key: "arrowRef",
|
|
|
|
ref: arrowRef,
|
|
|
|
class: normalizeClass(unref(ns).e("arrow")),
|
|
|
|
style: normalizeStyle(unref(arrowStyle)),
|
|
|
|
"data-popper-arrow": ""
|
|
|
|
}, null, 6);
|
|
|
|
};
|
|
|
|
}
|
|
|
|
});
|
|
|
|
var ElPopperArrow = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__file", "arrow.vue"]]);
|
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
const __default__$3 = defineComponent({
|
|
|
|
name: "ElTooltip"
|
|
|
|
});
|
|
|
|
const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
|
...__default__$3,
|
|
|
|
props: useTooltipProps,
|
|
|
|
emits: tooltipEmits,
|
|
|
|
setup(__props, { expose, emit }) {
|
|
|
|
const props = __props;
|
|
|
|
usePopperContainer();
|
|
|
|
const id = useId();
|
|
|
|
const popperRef = ref();
|
|
|
|
const contentRef = ref();
|
|
|
|
const updatePopper = () => {
|
|
|
|
var _a;
|
|
|
|
const popperComponent = unref(popperRef);
|
|
|
|
if (popperComponent) {
|
|
|
|
(_a = popperComponent.popperInstanceRef) == null ? void 0 : _a.update();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
const open = ref(false);
|
|
|
|
const toggleReason = ref();
|
|
|
|
const { show, hide, hasUpdateHandler } = useTooltipModelToggle({
|
|
|
|
indicator: open,
|
|
|
|
toggleReason
|
|
|
|
});
|
|
|
|
const { onOpen, onClose } = useDelayedToggle({
|
|
|
|
showAfter: toRef(props, "showAfter"),
|
|
|
|
hideAfter: toRef(props, "hideAfter"),
|
|
|
|
autoClose: toRef(props, "autoClose"),
|
|
|
|
open: show,
|
|
|
|
close: hide
|
|
|
|
});
|
|
|
|
const controlled = computed(() => isBoolean(props.visible) && !hasUpdateHandler.value);
|
|
|
|
provide(TOOLTIP_INJECTION_KEY, {
|
|
|
|
controlled,
|
|
|
|
id,
|
|
|
|
open: readonly(open),
|
|
|
|
trigger: toRef(props, "trigger"),
|
|
|
|
onOpen: (event) => {
|
|
|
|
onOpen(event);
|
|
|
|
},
|
|
|
|
onClose: (event) => {
|
|
|
|
onClose(event);
|
|
|
|
},
|
|
|
|
onToggle: (event) => {
|
|
|
|
if (unref(open)) {
|
|
|
|
onClose(event);
|
|
|
|
} else {
|
|
|
|
onOpen(event);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
onShow: () => {
|
|
|
|
emit("show", toggleReason.value);
|
|
|
|
},
|
|
|
|
onHide: () => {
|
|
|
|
emit("hide", toggleReason.value);
|
|
|
|
},
|
|
|
|
onBeforeShow: () => {
|
|
|
|
emit("before-show", toggleReason.value);
|
|
|
|
},
|
|
|
|
onBeforeHide: () => {
|
|
|
|
emit("before-hide", toggleReason.value);
|
|
|
|
},
|
|
|
|
updatePopper
|
|
|
|
});
|
|
|
|
watch(() => props.disabled, (disabled) => {
|
|
|
|
if (disabled && open.value) {
|
|
|
|
open.value = false;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
const isFocusInsideContent = (event) => {
|
|
|
|
var _a;
|
|
|
|
return (_a = contentRef.value) == null ? void 0 : _a.isFocusInsideContent(event);
|
|
|
|
};
|
|
|
|
expose({
|
|
|
|
popperRef,
|
|
|
|
contentRef,
|
|
|
|
isFocusInsideContent,
|
|
|
|
updatePopper,
|
|
|
|
onOpen,
|
|
|
|
onClose,
|
|
|
|
hide
|
|
|
|
});
|
|
|
|
return (_ctx, _cache) => {
|
|
|
|
return openBlock(), createBlock(unref(ElPopper), {
|
|
|
|
ref_key: "popperRef",
|
|
|
|
ref: popperRef,
|
|
|
|
role: _ctx.role
|
|
|
|
}, {
|
|
|
|
default: withCtx(() => [
|
|
|
|
createVNode(ElTooltipTrigger, {
|
|
|
|
disabled: _ctx.disabled,
|
|
|
|
trigger: _ctx.trigger,
|
|
|
|
"trigger-keys": _ctx.triggerKeys,
|
|
|
|
"virtual-ref": _ctx.virtualRef,
|
|
|
|
"virtual-triggering": _ctx.virtualTriggering
|
|
|
|
}, {
|
|
|
|
default: withCtx(() => [
|
|
|
|
_ctx.$slots.default ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("v-if", true)
|
|
|
|
]),
|
|
|
|
_: 3
|
|
|
|
}, 8, ["disabled", "trigger", "trigger-keys", "virtual-ref", "virtual-triggering"]),
|
|
|
|
createVNode(ElTooltipContent, {
|
|
|
|
ref_key: "contentRef",
|
|
|
|
ref: contentRef,
|
|
|
|
"aria-label": _ctx.ariaLabel,
|
|
|
|
"boundaries-padding": _ctx.boundariesPadding,
|
|
|
|
content: _ctx.content,
|
|
|
|
disabled: _ctx.disabled,
|
|
|
|
effect: _ctx.effect,
|
|
|
|
enterable: _ctx.enterable,
|
|
|
|
"fallback-placements": _ctx.fallbackPlacements,
|
|
|
|
"hide-after": _ctx.hideAfter,
|
|
|
|
"gpu-acceleration": _ctx.gpuAcceleration,
|
|
|
|
offset: _ctx.offset,
|
|
|
|
persistent: _ctx.persistent,
|
|
|
|
"popper-class": _ctx.popperClass,
|
|
|
|
"popper-style": _ctx.popperStyle,
|
|
|
|
placement: _ctx.placement,
|
|
|
|
"popper-options": _ctx.popperOptions,
|
|
|
|
pure: _ctx.pure,
|
|
|
|
"raw-content": _ctx.rawContent,
|
|
|
|
"reference-el": _ctx.referenceEl,
|
|
|
|
"trigger-target-el": _ctx.triggerTargetEl,
|
|
|
|
"show-after": _ctx.showAfter,
|
|
|
|
strategy: _ctx.strategy,
|
|
|
|
teleported: _ctx.teleported,
|
|
|
|
transition: _ctx.transition,
|
|
|
|
"virtual-triggering": _ctx.virtualTriggering,
|
|
|
|
"z-index": _ctx.zIndex,
|
|
|
|
"append-to": _ctx.appendTo
|
|
|
|
}, {
|
|
|
|
default: withCtx(() => [
|
|
|
|
renderSlot(_ctx.$slots, "content", {}, () => [
|
|
|
|
_ctx.rawContent ? (openBlock(), createElementBlock("span", {
|
|
|
|
key: 0,
|
|
|
|
innerHTML: _ctx.content
|
|
|
|
}, null, 8, ["innerHTML"])) : (openBlock(), createElementBlock("span", { key: 1 }, toDisplayString(_ctx.content), 1))
|
|
|
|
]),
|
|
|
|
_ctx.showArrow ? (openBlock(), createBlock(unref(ElPopperArrow), {
|
|
|
|
key: 0,
|
|
|
|
"arrow-offset": _ctx.arrowOffset
|
|
|
|
}, null, 8, ["arrow-offset"])) : createCommentVNode("v-if", true)
|
|
|
|
]),
|
|
|
|
_: 3
|
|
|
|
}, 8, ["aria-label", "boundaries-padding", "content", "disabled", "effect", "enterable", "fallback-placements", "hide-after", "gpu-acceleration", "offset", "persistent", "popper-class", "popper-style", "placement", "popper-options", "pure", "raw-content", "reference-el", "trigger-target-el", "show-after", "strategy", "teleported", "transition", "virtual-triggering", "z-index", "append-to"])
|
|
|
|
]),
|
|
|
|
_: 3
|
|
|
|
}, 8, ["role"]);
|
|
|
|
};
|
|
|
|
}
|
|
|
|
});
|
|
|
|
var Tooltip = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__file", "tooltip.vue"]]);
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
const ElTooltip = withInstall(Tooltip);
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
const inputProps = buildProps({
|
|
|
|
id: {
|
|
|
|
type: String,
|
|
|
|
default: void 0
|
|
|
|
},
|
|
|
|
size: useSizeProp,
|
|
|
|
disabled: Boolean,
|
|
|
|
modelValue: {
|
|
|
|
type: definePropType([
|
|
|
|
String,
|
|
|
|
Number,
|
|
|
|
Object
|
|
|
|
]),
|
|
|
|
default: ""
|
|
|
|
},
|
|
|
|
maxlength: {
|
|
|
|
type: [String, Number]
|
|
|
|
},
|
|
|
|
minlength: {
|
|
|
|
type: [String, Number]
|
|
|
|
},
|
|
|
|
type: {
|
|
|
|
type: String,
|
|
|
|
default: "text"
|
|
|
|
},
|
|
|
|
resize: {
|
|
|
|
type: String,
|
|
|
|
values: ["none", "both", "horizontal", "vertical"]
|
|
|
|
},
|
|
|
|
autosize: {
|
|
|
|
type: definePropType([Boolean, Object]),
|
|
|
|
default: false
|
|
|
|
},
|
|
|
|
autocomplete: {
|
|
|
|
type: String,
|
|
|
|
default: "off"
|
|
|
|
},
|
|
|
|
formatter: {
|
|
|
|
type: Function
|
|
|
|
},
|
|
|
|
parser: {
|
|
|
|
type: Function
|
|
|
|
},
|
|
|
|
placeholder: {
|
|
|
|
type: String
|
|
|
|
},
|
|
|
|
form: {
|
|
|
|
type: String
|
|
|
|
},
|
|
|
|
readonly: Boolean,
|
|
|
|
clearable: Boolean,
|
|
|
|
showPassword: Boolean,
|
|
|
|
showWordLimit: Boolean,
|
|
|
|
suffixIcon: {
|
|
|
|
type: iconPropType
|
|
|
|
},
|
|
|
|
prefixIcon: {
|
|
|
|
type: iconPropType
|
|
|
|
},
|
|
|
|
containerRole: {
|
|
|
|
type: String,
|
|
|
|
default: void 0
|
|
|
|
},
|
|
|
|
tabindex: {
|
|
|
|
type: [String, Number],
|
|
|
|
default: 0
|
|
|
|
},
|
|
|
|
validateEvent: {
|
|
|
|
type: Boolean,
|
|
|
|
default: true
|
|
|
|
},
|
|
|
|
inputStyle: {
|
|
|
|
type: definePropType([Object, Array, String]),
|
|
|
|
default: () => mutable({})
|
|
|
|
},
|
|
|
|
autofocus: Boolean,
|
|
|
|
rows: {
|
|
|
|
type: Number,
|
|
|
|
default: 2
|
|
|
|
},
|
|
|
|
...useAriaProps(["ariaLabel"])
|
|
|
|
});
|
|
|
|
const inputEmits = {
|
|
|
|
[UPDATE_MODEL_EVENT]: (value) => shared_cjs_prodExports.isString(value),
|
|
|
|
input: (value) => shared_cjs_prodExports.isString(value),
|
|
|
|
change: (value) => shared_cjs_prodExports.isString(value),
|
|
|
|
focus: (evt) => evt instanceof FocusEvent,
|
|
|
|
blur: (evt) => evt instanceof FocusEvent,
|
|
|
|
clear: () => true,
|
|
|
|
mouseleave: (evt) => evt instanceof MouseEvent,
|
|
|
|
mouseenter: (evt) => evt instanceof MouseEvent,
|
|
|
|
keydown: (evt) => evt instanceof Event,
|
|
|
|
compositionstart: (evt) => evt instanceof CompositionEvent,
|
|
|
|
compositionupdate: (evt) => evt instanceof CompositionEvent,
|
|
|
|
compositionend: (evt) => evt instanceof CompositionEvent
|
|
|
|
};
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
const DEFAULT_EXCLUDE_KEYS = ["class", "style"];
|
|
|
|
const LISTENER_PREFIX = /^on[A-Z]/;
|
|
|
|
const useAttrs = (params = {}) => {
|
|
|
|
const { excludeListeners = false, excludeKeys } = params;
|
|
|
|
const allExcludeKeys = computed(() => {
|
|
|
|
return ((excludeKeys == null ? void 0 : excludeKeys.value) || []).concat(DEFAULT_EXCLUDE_KEYS);
|
|
|
|
});
|
|
|
|
const instance = getCurrentInstance();
|
|
|
|
if (!instance) {
|
|
|
|
return computed(() => ({}));
|
|
|
|
}
|
|
|
|
return computed(() => {
|
|
|
|
var _a;
|
|
|
|
return fromPairs(Object.entries((_a = instance.proxy) == null ? void 0 : _a.$attrs).filter(([key]) => !allExcludeKeys.value.includes(key) && !(excludeListeners && LISTENER_PREFIX.test(key))));
|
|
|
|
});
|
|
|
|
};
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
const useFormItem = () => {
|
|
|
|
const form = inject(formContextKey, void 0);
|
|
|
|
const formItem = inject(formItemContextKey, void 0);
|
|
|
|
return {
|
|
|
|
form,
|
|
|
|
formItem
|
|
|
|
};
|
|
|
|
};
|
|
|
|
const useFormItemInputId = (props, {
|
|
|
|
formItemContext,
|
|
|
|
disableIdGeneration,
|
|
|
|
disableIdManagement
|
|
|
|
}) => {
|
|
|
|
if (!disableIdGeneration) {
|
|
|
|
disableIdGeneration = ref(false);
|
|
|
|
}
|
|
|
|
if (!disableIdManagement) {
|
|
|
|
disableIdManagement = ref(false);
|
|
|
|
}
|
|
|
|
const inputId = ref();
|
|
|
|
const isLabeledByFormItem = computed(() => {
|
|
|
|
var _a;
|
|
|
|
return !!(!(props.label || props.ariaLabel) && formItemContext && formItemContext.inputIds && ((_a = formItemContext.inputIds) == null ? void 0 : _a.length) <= 1);
|
|
|
|
});
|
|
|
|
return {
|
|
|
|
isLabeledByFormItem,
|
|
|
|
inputId
|
|
|
|
};
|
|
|
|
};
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
const useProp = (name) => {
|
|
|
|
const vm = getCurrentInstance();
|
|
|
|
return computed(() => {
|
|
|
|
var _a, _b;
|
|
|
|
return (_b = (_a = vm == null ? void 0 : vm.proxy) == null ? void 0 : _a.$props) == null ? void 0 : _b[name];
|
|
|
|
});
|
|
|
|
};
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
const useFormSize = (fallback, ignore = {}) => {
|
|
|
|
const emptyRef = ref(void 0);
|
|
|
|
const size = ignore.prop ? emptyRef : useProp("size");
|
|
|
|
const globalConfig = ignore.global ? emptyRef : useGlobalSize();
|
|
|
|
const form = ignore.form ? { size: void 0 } : inject(formContextKey, void 0);
|
|
|
|
const formItem = ignore.formItem ? { size: void 0 } : inject(formItemContextKey, void 0);
|
|
|
|
return computed(() => size.value || unref(fallback) || (formItem == null ? void 0 : formItem.size) || (form == null ? void 0 : form.size) || globalConfig.value || "");
|
|
|
|
};
|
|
|
|
const useFormDisabled = (fallback) => {
|
|
|
|
const disabled = useProp("disabled");
|
|
|
|
const form = inject(formContextKey, void 0);
|
|
|
|
return computed(() => disabled.value || unref(fallback) || (form == null ? void 0 : form.disabled) || false);
|
|
|
|
};
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
function useFocusController(target, {
|
|
|
|
beforeFocus,
|
|
|
|
afterFocus,
|
|
|
|
beforeBlur,
|
|
|
|
afterBlur
|
|
|
|
} = {}) {
|
|
|
|
const instance = getCurrentInstance();
|
|
|
|
const { emit } = instance;
|
|
|
|
const wrapperRef = shallowRef();
|
|
|
|
const isFocused = ref(false);
|
|
|
|
const handleFocus = (event) => {
|
|
|
|
const cancelFocus = shared_cjs_prodExports.isFunction(beforeFocus) ? beforeFocus(event) : false;
|
|
|
|
if (cancelFocus || isFocused.value)
|
|
|
|
return;
|
|
|
|
isFocused.value = true;
|
|
|
|
emit("focus", event);
|
|
|
|
afterFocus == null ? void 0 : afterFocus();
|
|
|
|
};
|
|
|
|
const handleBlur = (event) => {
|
|
|
|
var _a;
|
|
|
|
const cancelBlur = shared_cjs_prodExports.isFunction(beforeBlur) ? beforeBlur(event) : false;
|
|
|
|
if (cancelBlur || event.relatedTarget && ((_a = wrapperRef.value) == null ? void 0 : _a.contains(event.relatedTarget)))
|
|
|
|
return;
|
|
|
|
isFocused.value = false;
|
|
|
|
emit("blur", event);
|
|
|
|
afterBlur == null ? void 0 : afterBlur();
|
|
|
|
};
|
|
|
|
const handleClick = () => {
|
|
|
|
var _a, _b;
|
|
|
|
if (((_a = wrapperRef.value) == null ? void 0 : _a.contains((void 0).activeElement)) && wrapperRef.value !== (void 0).activeElement)
|
|
|
|
return;
|
|
|
|
(_b = target.value) == null ? void 0 : _b.focus();
|
|
|
|
};
|
|
|
|
watch(wrapperRef, (el) => {
|
|
|
|
if (el) {
|
|
|
|
el.setAttribute("tabindex", "-1");
|
|
|
|
}
|
|
|
|
});
|
|
|
|
useEventListener(wrapperRef, "focus", handleFocus, true);
|
|
|
|
useEventListener(wrapperRef, "blur", handleBlur, true);
|
|
|
|
useEventListener(wrapperRef, "click", handleClick, true);
|
|
|
|
return {
|
|
|
|
isFocused,
|
|
|
|
wrapperRef,
|
|
|
|
handleFocus,
|
|
|
|
handleBlur
|
|
|
|
};
|
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
const isKorean = (text) => /([\uAC00-\uD7AF\u3130-\u318F])+/gi.test(text);
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
function useComposition({
|
|
|
|
afterComposition,
|
|
|
|
emit
|
|
|
|
}) {
|
|
|
|
const isComposing = ref(false);
|
|
|
|
const handleCompositionStart = (event) => {
|
|
|
|
emit == null ? void 0 : emit("compositionstart", event);
|
|
|
|
isComposing.value = true;
|
|
|
|
};
|
|
|
|
const handleCompositionUpdate = (event) => {
|
|
|
|
var _a;
|
|
|
|
emit == null ? void 0 : emit("compositionupdate", event);
|
|
|
|
const text = (_a = event.target) == null ? void 0 : _a.value;
|
|
|
|
const lastCharacter = text[text.length - 1] || "";
|
|
|
|
isComposing.value = !isKorean(lastCharacter);
|
|
|
|
};
|
|
|
|
const handleCompositionEnd = (event) => {
|
|
|
|
emit == null ? void 0 : emit("compositionend", event);
|
|
|
|
if (isComposing.value) {
|
|
|
|
isComposing.value = false;
|
|
|
|
nextTick(() => afterComposition(event));
|
|
|
|
}
|
|
|
|
};
|
|
|
|
const handleComposition = (event) => {
|
|
|
|
event.type === "compositionend" ? handleCompositionEnd(event) : handleCompositionUpdate(event);
|
|
|
|
};
|
|
|
|
return {
|
|
|
|
isComposing,
|
|
|
|
handleComposition,
|
|
|
|
handleCompositionStart,
|
|
|
|
handleCompositionUpdate,
|
|
|
|
handleCompositionEnd
|
|
|
|
};
|
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
function useCursor(input) {
|
|
|
|
let selectionInfo;
|
|
|
|
function recordCursor() {
|
|
|
|
if (input.value == void 0)
|
|
|
|
return;
|
|
|
|
const { selectionStart, selectionEnd, value } = input.value;
|
|
|
|
if (selectionStart == null || selectionEnd == null)
|
|
|
|
return;
|
|
|
|
const beforeTxt = value.slice(0, Math.max(0, selectionStart));
|
|
|
|
const afterTxt = value.slice(Math.max(0, selectionEnd));
|
|
|
|
selectionInfo = {
|
|
|
|
selectionStart,
|
|
|
|
selectionEnd,
|
|
|
|
value,
|
|
|
|
beforeTxt,
|
|
|
|
afterTxt
|
|
|
|
};
|
|
|
|
}
|
|
|
|
function setCursor() {
|
|
|
|
if (input.value == void 0 || selectionInfo == void 0)
|
|
|
|
return;
|
|
|
|
const { value } = input.value;
|
|
|
|
const { beforeTxt, afterTxt, selectionStart } = selectionInfo;
|
|
|
|
if (beforeTxt == void 0 || afterTxt == void 0 || selectionStart == void 0)
|
|
|
|
return;
|
|
|
|
let startPos = value.length;
|
|
|
|
if (value.endsWith(afterTxt)) {
|
|
|
|
startPos = value.length - afterTxt.length;
|
|
|
|
} else if (value.startsWith(beforeTxt)) {
|
|
|
|
startPos = beforeTxt.length;
|
|
|
|
} else {
|
|
|
|
const beforeLastChar = beforeTxt[selectionStart - 1];
|
|
|
|
const newIndex = value.indexOf(beforeLastChar, selectionStart - 1);
|
|
|
|
if (newIndex !== -1) {
|
|
|
|
startPos = newIndex + 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
input.value.setSelectionRange(startPos, startPos);
|
|
|
|
}
|
|
|
|
return [recordCursor, setCursor];
|
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
const __default__$2 = defineComponent({
|
|
|
|
name: "ElInput",
|
|
|
|
inheritAttrs: false
|
|
|
|
});
|
|
|
|
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
|
|
...__default__$2,
|
|
|
|
props: inputProps,
|
|
|
|
emits: inputEmits,
|
|
|
|
setup(__props, { expose, emit }) {
|
|
|
|
const props = __props;
|
|
|
|
const rawAttrs = useAttrs$1();
|
|
|
|
const attrs = useAttrs();
|
|
|
|
const slots = useSlots();
|
|
|
|
const containerKls = computed(() => [
|
|
|
|
props.type === "textarea" ? nsTextarea.b() : nsInput.b(),
|
|
|
|
nsInput.m(inputSize.value),
|
|
|
|
nsInput.is("disabled", inputDisabled.value),
|
|
|
|
nsInput.is("exceed", inputExceed.value),
|
|
|
|
{
|
|
|
|
[nsInput.b("group")]: slots.prepend || slots.append,
|
|
|
|
[nsInput.m("prefix")]: slots.prefix || props.prefixIcon,
|
|
|
|
[nsInput.m("suffix")]: slots.suffix || props.suffixIcon || props.clearable || props.showPassword,
|
|
|
|
[nsInput.bm("suffix", "password-clear")]: showClear.value && showPwdVisible.value,
|
|
|
|
[nsInput.b("hidden")]: props.type === "hidden"
|
|
|
|
},
|
|
|
|
rawAttrs.class
|
|
|
|
]);
|
|
|
|
const wrapperKls = computed(() => [
|
|
|
|
nsInput.e("wrapper"),
|
|
|
|
nsInput.is("focus", isFocused.value)
|
|
|
|
]);
|
|
|
|
const { form: elForm, formItem: elFormItem } = useFormItem();
|
|
|
|
const { inputId } = useFormItemInputId(props, {
|
|
|
|
formItemContext: elFormItem
|
|
|
|
});
|
|
|
|
const inputSize = useFormSize();
|
|
|
|
const inputDisabled = useFormDisabled();
|
|
|
|
const nsInput = useNamespace("input");
|
|
|
|
const nsTextarea = useNamespace("textarea");
|
|
|
|
const input = shallowRef();
|
|
|
|
const textarea = shallowRef();
|
|
|
|
const hovering = ref(false);
|
|
|
|
const passwordVisible = ref(false);
|
|
|
|
const countStyle = ref();
|
|
|
|
const textareaCalcStyle = shallowRef(props.inputStyle);
|
|
|
|
const _ref = computed(() => input.value || textarea.value);
|
|
|
|
const { wrapperRef, isFocused, handleFocus, handleBlur } = useFocusController(_ref, {
|
|
|
|
beforeFocus() {
|
|
|
|
return inputDisabled.value;
|
|
|
|
},
|
|
|
|
afterBlur() {
|
|
|
|
var _a;
|
|
|
|
if (props.validateEvent) {
|
|
|
|
(_a = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "blur").catch((err) => debugWarn());
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
const needStatusIcon = computed(() => {
|
|
|
|
var _a;
|
|
|
|
return (_a = elForm == null ? void 0 : elForm.statusIcon) != null ? _a : false;
|
|
|
|
});
|
|
|
|
const validateState = computed(() => (elFormItem == null ? void 0 : elFormItem.validateState) || "");
|
|
|
|
const validateIcon = computed(() => validateState.value && ValidateComponentsMap[validateState.value]);
|
|
|
|
const passwordIcon = computed(() => passwordVisible.value ? view_default : hide_default);
|
|
|
|
const containerStyle = computed(() => [
|
|
|
|
rawAttrs.style
|
|
|
|
]);
|
|
|
|
const textareaStyle = computed(() => [
|
|
|
|
props.inputStyle,
|
|
|
|
textareaCalcStyle.value,
|
|
|
|
{ resize: props.resize }
|
|
|
|
]);
|
|
|
|
const nativeInputValue = computed(() => isNil(props.modelValue) ? "" : String(props.modelValue));
|
|
|
|
const showClear = computed(() => props.clearable && !inputDisabled.value && !props.readonly && !!nativeInputValue.value && (isFocused.value || hovering.value));
|
|
|
|
const showPwdVisible = computed(() => props.showPassword && !inputDisabled.value && !!nativeInputValue.value && (!!nativeInputValue.value || isFocused.value));
|
|
|
|
const isWordLimitVisible = computed(() => props.showWordLimit && !!props.maxlength && (props.type === "text" || props.type === "textarea") && !inputDisabled.value && !props.readonly && !props.showPassword);
|
|
|
|
const textLength = computed(() => nativeInputValue.value.length);
|
|
|
|
const inputExceed = computed(() => !!isWordLimitVisible.value && textLength.value > Number(props.maxlength));
|
|
|
|
const suffixVisible = computed(() => !!slots.suffix || !!props.suffixIcon || showClear.value || props.showPassword || isWordLimitVisible.value || !!validateState.value && needStatusIcon.value);
|
|
|
|
const [recordCursor, setCursor] = useCursor(input);
|
|
|
|
useResizeObserver(textarea, (entries) => {
|
|
|
|
onceInitSizeTextarea();
|
|
|
|
if (!isWordLimitVisible.value || props.resize !== "both")
|
|
|
|
return;
|
|
|
|
const entry = entries[0];
|
|
|
|
const { width } = entry.contentRect;
|
|
|
|
countStyle.value = {
|
|
|
|
right: `calc(100% - ${width + 15 + 6}px)`
|
|
|
|
};
|
|
|
|
});
|
|
|
|
const resizeTextarea = () => {
|
|
|
|
const { type, autosize } = props;
|
|
|
|
return;
|
|
|
|
};
|
|
|
|
const createOnceInitResize = (resizeTextarea2) => {
|
|
|
|
let isInit = false;
|
|
|
|
return () => {
|
|
|
|
var _a;
|
|
|
|
if (isInit || !props.autosize)
|
|
|
|
return;
|
|
|
|
const isElHidden = ((_a = textarea.value) == null ? void 0 : _a.offsetParent) === null;
|
|
|
|
if (!isElHidden) {
|
|
|
|
resizeTextarea2();
|
|
|
|
isInit = true;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
const onceInitSizeTextarea = createOnceInitResize(resizeTextarea);
|
|
|
|
const setNativeInputValue = () => {
|
|
|
|
const input2 = _ref.value;
|
|
|
|
const formatterValue = props.formatter ? props.formatter(nativeInputValue.value) : nativeInputValue.value;
|
|
|
|
if (!input2 || input2.value === formatterValue)
|
|
|
|
return;
|
|
|
|
input2.value = formatterValue;
|
|
|
|
};
|
|
|
|
const handleInput = async (event) => {
|
|
|
|
recordCursor();
|
|
|
|
let { value } = event.target;
|
2025-03-11 13:57:38 +08:00
|
|
|
if (props.formatter && props.parser) {
|
|
|
|
value = props.parser(value);
|
2025-02-20 19:30:25 +08:00
|
|
|
}
|
|
|
|
if (isComposing.value)
|
|
|
|
return;
|
|
|
|
if (value === nativeInputValue.value) {
|
|
|
|
setNativeInputValue();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
emit(UPDATE_MODEL_EVENT, value);
|
|
|
|
emit("input", value);
|
|
|
|
await nextTick();
|
|
|
|
setNativeInputValue();
|
|
|
|
setCursor();
|
|
|
|
};
|
|
|
|
const handleChange = (event) => {
|
2025-03-11 13:57:38 +08:00
|
|
|
let { value } = event.target;
|
|
|
|
if (props.formatter && props.parser) {
|
|
|
|
value = props.parser(value);
|
|
|
|
}
|
|
|
|
emit("change", value);
|
2025-02-20 19:30:25 +08:00
|
|
|
};
|
|
|
|
const {
|
|
|
|
isComposing,
|
|
|
|
handleCompositionStart,
|
|
|
|
handleCompositionUpdate,
|
|
|
|
handleCompositionEnd
|
|
|
|
} = useComposition({ emit, afterComposition: handleInput });
|
|
|
|
const handlePasswordVisible = () => {
|
|
|
|
recordCursor();
|
|
|
|
passwordVisible.value = !passwordVisible.value;
|
|
|
|
setTimeout(setCursor);
|
|
|
|
};
|
|
|
|
const focus = () => {
|
|
|
|
var _a;
|
|
|
|
return (_a = _ref.value) == null ? void 0 : _a.focus();
|
|
|
|
};
|
|
|
|
const blur = () => {
|
|
|
|
var _a;
|
|
|
|
return (_a = _ref.value) == null ? void 0 : _a.blur();
|
|
|
|
};
|
|
|
|
const handleMouseLeave = (evt) => {
|
|
|
|
hovering.value = false;
|
|
|
|
emit("mouseleave", evt);
|
|
|
|
};
|
|
|
|
const handleMouseEnter = (evt) => {
|
|
|
|
hovering.value = true;
|
|
|
|
emit("mouseenter", evt);
|
|
|
|
};
|
|
|
|
const handleKeydown = (evt) => {
|
|
|
|
emit("keydown", evt);
|
|
|
|
};
|
|
|
|
const select = () => {
|
|
|
|
var _a;
|
|
|
|
(_a = _ref.value) == null ? void 0 : _a.select();
|
|
|
|
};
|
|
|
|
const clear = () => {
|
|
|
|
emit(UPDATE_MODEL_EVENT, "");
|
|
|
|
emit("change", "");
|
|
|
|
emit("clear");
|
|
|
|
emit("input", "");
|
|
|
|
};
|
|
|
|
watch(() => props.modelValue, () => {
|
|
|
|
var _a;
|
|
|
|
nextTick(() => resizeTextarea());
|
|
|
|
if (props.validateEvent) {
|
|
|
|
(_a = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change").catch((err) => debugWarn());
|
|
|
|
}
|
|
|
|
});
|
|
|
|
watch(nativeInputValue, () => setNativeInputValue());
|
|
|
|
watch(() => props.type, async () => {
|
|
|
|
await nextTick();
|
|
|
|
setNativeInputValue();
|
|
|
|
resizeTextarea();
|
|
|
|
});
|
|
|
|
expose({
|
|
|
|
input,
|
|
|
|
textarea,
|
|
|
|
ref: _ref,
|
|
|
|
textareaStyle,
|
|
|
|
autosize: toRef(props, "autosize"),
|
|
|
|
isComposing,
|
|
|
|
focus,
|
|
|
|
blur,
|
|
|
|
select,
|
|
|
|
clear,
|
|
|
|
resizeTextarea
|
|
|
|
});
|
|
|
|
return (_ctx, _cache) => {
|
|
|
|
return openBlock(), createElementBlock("div", {
|
|
|
|
class: normalizeClass([
|
|
|
|
unref(containerKls),
|
|
|
|
{
|
|
|
|
[unref(nsInput).bm("group", "append")]: _ctx.$slots.append,
|
|
|
|
[unref(nsInput).bm("group", "prepend")]: _ctx.$slots.prepend
|
|
|
|
}
|
|
|
|
]),
|
|
|
|
style: normalizeStyle(unref(containerStyle)),
|
|
|
|
onMouseenter: handleMouseEnter,
|
|
|
|
onMouseleave: handleMouseLeave
|
|
|
|
}, [
|
|
|
|
createCommentVNode(" input "),
|
|
|
|
_ctx.type !== "textarea" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
|
|
createCommentVNode(" prepend slot "),
|
|
|
|
_ctx.$slots.prepend ? (openBlock(), createElementBlock("div", {
|
|
|
|
key: 0,
|
|
|
|
class: normalizeClass(unref(nsInput).be("group", "prepend"))
|
|
|
|
}, [
|
|
|
|
renderSlot(_ctx.$slots, "prepend")
|
|
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
|
|
createElementVNode("div", {
|
|
|
|
ref_key: "wrapperRef",
|
|
|
|
ref: wrapperRef,
|
|
|
|
class: normalizeClass(unref(wrapperKls))
|
|
|
|
}, [
|
|
|
|
createCommentVNode(" prefix slot "),
|
|
|
|
_ctx.$slots.prefix || _ctx.prefixIcon ? (openBlock(), createElementBlock("span", {
|
|
|
|
key: 0,
|
|
|
|
class: normalizeClass(unref(nsInput).e("prefix"))
|
|
|
|
}, [
|
|
|
|
createElementVNode("span", {
|
|
|
|
class: normalizeClass(unref(nsInput).e("prefix-inner"))
|
|
|
|
}, [
|
|
|
|
renderSlot(_ctx.$slots, "prefix"),
|
|
|
|
_ctx.prefixIcon ? (openBlock(), createBlock(unref(ElIcon), {
|
|
|
|
key: 0,
|
|
|
|
class: normalizeClass(unref(nsInput).e("icon"))
|
|
|
|
}, {
|
|
|
|
default: withCtx(() => [
|
|
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.prefixIcon)))
|
|
|
|
]),
|
|
|
|
_: 1
|
|
|
|
}, 8, ["class"])) : createCommentVNode("v-if", true)
|
|
|
|
], 2)
|
|
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
|
|
createElementVNode("input", mergeProps({
|
|
|
|
id: unref(inputId),
|
|
|
|
ref_key: "input",
|
|
|
|
ref: input,
|
|
|
|
class: unref(nsInput).e("inner")
|
|
|
|
}, unref(attrs), {
|
|
|
|
minlength: _ctx.minlength,
|
|
|
|
maxlength: _ctx.maxlength,
|
|
|
|
type: _ctx.showPassword ? passwordVisible.value ? "text" : "password" : _ctx.type,
|
|
|
|
disabled: unref(inputDisabled),
|
|
|
|
readonly: _ctx.readonly,
|
|
|
|
autocomplete: _ctx.autocomplete,
|
|
|
|
tabindex: _ctx.tabindex,
|
|
|
|
"aria-label": _ctx.ariaLabel,
|
|
|
|
placeholder: _ctx.placeholder,
|
|
|
|
style: _ctx.inputStyle,
|
|
|
|
form: _ctx.form,
|
|
|
|
autofocus: _ctx.autofocus,
|
|
|
|
role: _ctx.containerRole,
|
|
|
|
onCompositionstart: unref(handleCompositionStart),
|
|
|
|
onCompositionupdate: unref(handleCompositionUpdate),
|
|
|
|
onCompositionend: unref(handleCompositionEnd),
|
|
|
|
onInput: handleInput,
|
|
|
|
onChange: handleChange,
|
|
|
|
onKeydown: handleKeydown
|
|
|
|
}), null, 16, ["id", "minlength", "maxlength", "type", "disabled", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder", "form", "autofocus", "role", "onCompositionstart", "onCompositionupdate", "onCompositionend"]),
|
|
|
|
createCommentVNode(" suffix slot "),
|
|
|
|
unref(suffixVisible) ? (openBlock(), createElementBlock("span", {
|
|
|
|
key: 1,
|
|
|
|
class: normalizeClass(unref(nsInput).e("suffix"))
|
|
|
|
}, [
|
|
|
|
createElementVNode("span", {
|
|
|
|
class: normalizeClass(unref(nsInput).e("suffix-inner"))
|
|
|
|
}, [
|
|
|
|
!unref(showClear) || !unref(showPwdVisible) || !unref(isWordLimitVisible) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
|
|
renderSlot(_ctx.$slots, "suffix"),
|
|
|
|
_ctx.suffixIcon ? (openBlock(), createBlock(unref(ElIcon), {
|
|
|
|
key: 0,
|
|
|
|
class: normalizeClass(unref(nsInput).e("icon"))
|
|
|
|
}, {
|
|
|
|
default: withCtx(() => [
|
|
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.suffixIcon)))
|
|
|
|
]),
|
|
|
|
_: 1
|
|
|
|
}, 8, ["class"])) : createCommentVNode("v-if", true)
|
|
|
|
], 64)) : createCommentVNode("v-if", true),
|
|
|
|
unref(showClear) ? (openBlock(), createBlock(unref(ElIcon), {
|
|
|
|
key: 1,
|
|
|
|
class: normalizeClass([unref(nsInput).e("icon"), unref(nsInput).e("clear")]),
|
|
|
|
onMousedown: withModifiers(unref(shared_cjs_prodExports.NOOP), ["prevent"]),
|
|
|
|
onClick: clear
|
|
|
|
}, {
|
|
|
|
default: withCtx(() => [
|
|
|
|
createVNode(unref(circle_close_default))
|
|
|
|
]),
|
|
|
|
_: 1
|
|
|
|
}, 8, ["class", "onMousedown"])) : createCommentVNode("v-if", true),
|
|
|
|
unref(showPwdVisible) ? (openBlock(), createBlock(unref(ElIcon), {
|
|
|
|
key: 2,
|
|
|
|
class: normalizeClass([unref(nsInput).e("icon"), unref(nsInput).e("password")]),
|
|
|
|
onClick: handlePasswordVisible
|
|
|
|
}, {
|
|
|
|
default: withCtx(() => [
|
|
|
|
(openBlock(), createBlock(resolveDynamicComponent(unref(passwordIcon))))
|
|
|
|
]),
|
|
|
|
_: 1
|
|
|
|
}, 8, ["class"])) : createCommentVNode("v-if", true),
|
|
|
|
unref(isWordLimitVisible) ? (openBlock(), createElementBlock("span", {
|
|
|
|
key: 3,
|
|
|
|
class: normalizeClass(unref(nsInput).e("count"))
|
|
|
|
}, [
|
|
|
|
createElementVNode("span", {
|
|
|
|
class: normalizeClass(unref(nsInput).e("count-inner"))
|
|
|
|
}, toDisplayString(unref(textLength)) + " / " + toDisplayString(_ctx.maxlength), 3)
|
|
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
|
|
unref(validateState) && unref(validateIcon) && unref(needStatusIcon) ? (openBlock(), createBlock(unref(ElIcon), {
|
|
|
|
key: 4,
|
|
|
|
class: normalizeClass([
|
|
|
|
unref(nsInput).e("icon"),
|
|
|
|
unref(nsInput).e("validateIcon"),
|
|
|
|
unref(nsInput).is("loading", unref(validateState) === "validating")
|
|
|
|
])
|
|
|
|
}, {
|
|
|
|
default: withCtx(() => [
|
|
|
|
(openBlock(), createBlock(resolveDynamicComponent(unref(validateIcon))))
|
|
|
|
]),
|
|
|
|
_: 1
|
|
|
|
}, 8, ["class"])) : createCommentVNode("v-if", true)
|
|
|
|
], 2)
|
|
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
|
|
], 2),
|
|
|
|
createCommentVNode(" append slot "),
|
|
|
|
_ctx.$slots.append ? (openBlock(), createElementBlock("div", {
|
|
|
|
key: 1,
|
|
|
|
class: normalizeClass(unref(nsInput).be("group", "append"))
|
|
|
|
}, [
|
|
|
|
renderSlot(_ctx.$slots, "append")
|
|
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
|
|
], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
|
|
createCommentVNode(" textarea "),
|
|
|
|
createElementVNode("textarea", mergeProps({
|
|
|
|
id: unref(inputId),
|
|
|
|
ref_key: "textarea",
|
|
|
|
ref: textarea,
|
|
|
|
class: [unref(nsTextarea).e("inner"), unref(nsInput).is("focus", unref(isFocused))]
|
|
|
|
}, unref(attrs), {
|
|
|
|
minlength: _ctx.minlength,
|
|
|
|
maxlength: _ctx.maxlength,
|
|
|
|
tabindex: _ctx.tabindex,
|
|
|
|
disabled: unref(inputDisabled),
|
|
|
|
readonly: _ctx.readonly,
|
|
|
|
autocomplete: _ctx.autocomplete,
|
|
|
|
style: unref(textareaStyle),
|
|
|
|
"aria-label": _ctx.ariaLabel,
|
|
|
|
placeholder: _ctx.placeholder,
|
|
|
|
form: _ctx.form,
|
|
|
|
autofocus: _ctx.autofocus,
|
|
|
|
rows: _ctx.rows,
|
|
|
|
role: _ctx.containerRole,
|
|
|
|
onCompositionstart: unref(handleCompositionStart),
|
|
|
|
onCompositionupdate: unref(handleCompositionUpdate),
|
|
|
|
onCompositionend: unref(handleCompositionEnd),
|
|
|
|
onInput: handleInput,
|
|
|
|
onFocus: unref(handleFocus),
|
|
|
|
onBlur: unref(handleBlur),
|
|
|
|
onChange: handleChange,
|
|
|
|
onKeydown: handleKeydown
|
|
|
|
}), null, 16, ["id", "minlength", "maxlength", "tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder", "form", "autofocus", "rows", "role", "onCompositionstart", "onCompositionupdate", "onCompositionend", "onFocus", "onBlur"]),
|
|
|
|
unref(isWordLimitVisible) ? (openBlock(), createElementBlock("span", {
|
|
|
|
key: 0,
|
|
|
|
style: normalizeStyle(countStyle.value),
|
|
|
|
class: normalizeClass(unref(nsInput).e("count"))
|
|
|
|
}, toDisplayString(unref(textLength)) + " / " + toDisplayString(_ctx.maxlength), 7)) : createCommentVNode("v-if", true)
|
|
|
|
], 64))
|
|
|
|
], 38);
|
|
|
|
};
|
|
|
|
}
|
|
|
|
});
|
|
|
|
var Input = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__file", "input.vue"]]);
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
const ElInput = withInstall(Input);
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
const buttonGroupContextKey = Symbol("buttonGroupContextKey");
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
const useButton = (props, emit) => {
|
|
|
|
useDeprecated({
|
|
|
|
from: "type.text",
|
|
|
|
replacement: "link",
|
|
|
|
version: "3.0.0",
|
|
|
|
scope: "props",
|
|
|
|
ref: "https://element-plus.org/en-US/component/button.html#button-attributes"
|
|
|
|
}, computed(() => props.type === "text"));
|
|
|
|
const buttonGroupContext = inject(buttonGroupContextKey, void 0);
|
|
|
|
const globalConfig = useGlobalConfig("button");
|
|
|
|
const { form } = useFormItem();
|
|
|
|
const _size = useFormSize(computed(() => buttonGroupContext == null ? void 0 : buttonGroupContext.size));
|
|
|
|
const _disabled = useFormDisabled();
|
|
|
|
const _ref = ref();
|
|
|
|
const slots = useSlots();
|
|
|
|
const _type = computed(() => props.type || (buttonGroupContext == null ? void 0 : buttonGroupContext.type) || "");
|
|
|
|
const autoInsertSpace = computed(() => {
|
|
|
|
var _a, _b, _c;
|
|
|
|
return (_c = (_b = props.autoInsertSpace) != null ? _b : (_a = globalConfig.value) == null ? void 0 : _a.autoInsertSpace) != null ? _c : false;
|
|
|
|
});
|
|
|
|
const _props = computed(() => {
|
|
|
|
if (props.tag === "button") {
|
|
|
|
return {
|
|
|
|
ariaDisabled: _disabled.value || props.loading,
|
|
|
|
disabled: _disabled.value || props.loading,
|
|
|
|
autofocus: props.autofocus,
|
|
|
|
type: props.nativeType
|
|
|
|
};
|
|
|
|
}
|
|
|
|
return {};
|
|
|
|
});
|
|
|
|
const shouldAddSpace = computed(() => {
|
|
|
|
var _a;
|
|
|
|
const defaultSlot = (_a = slots.default) == null ? void 0 : _a.call(slots);
|
|
|
|
if (autoInsertSpace.value && (defaultSlot == null ? void 0 : defaultSlot.length) === 1) {
|
|
|
|
const slot = defaultSlot[0];
|
|
|
|
if ((slot == null ? void 0 : slot.type) === Text) {
|
|
|
|
const text = slot.children;
|
|
|
|
return new RegExp("^\\p{Unified_Ideograph}{2}$", "u").test(text.trim());
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return false;
|
|
|
|
});
|
|
|
|
const handleClick = (evt) => {
|
|
|
|
if (_disabled.value || props.loading) {
|
|
|
|
evt.stopPropagation();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (props.nativeType === "reset") {
|
|
|
|
form == null ? void 0 : form.resetFields();
|
|
|
|
}
|
|
|
|
emit("click", evt);
|
|
|
|
};
|
|
|
|
return {
|
|
|
|
_disabled,
|
|
|
|
_size,
|
|
|
|
_type,
|
|
|
|
_ref,
|
|
|
|
_props,
|
|
|
|
shouldAddSpace,
|
|
|
|
handleClick
|
|
|
|
};
|
|
|
|
};
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
const buttonTypes = [
|
|
|
|
"default",
|
|
|
|
"primary",
|
|
|
|
"success",
|
|
|
|
"warning",
|
|
|
|
"info",
|
|
|
|
"danger",
|
|
|
|
"text",
|
|
|
|
""
|
|
|
|
];
|
|
|
|
const buttonNativeTypes = ["button", "submit", "reset"];
|
|
|
|
const buttonProps = buildProps({
|
|
|
|
size: useSizeProp,
|
|
|
|
disabled: Boolean,
|
|
|
|
type: {
|
|
|
|
type: String,
|
|
|
|
values: buttonTypes,
|
|
|
|
default: ""
|
|
|
|
},
|
|
|
|
icon: {
|
|
|
|
type: iconPropType
|
|
|
|
},
|
|
|
|
nativeType: {
|
|
|
|
type: String,
|
|
|
|
values: buttonNativeTypes,
|
|
|
|
default: "button"
|
|
|
|
},
|
|
|
|
loading: Boolean,
|
|
|
|
loadingIcon: {
|
|
|
|
type: iconPropType,
|
|
|
|
default: () => loading_default
|
|
|
|
},
|
|
|
|
plain: Boolean,
|
|
|
|
text: Boolean,
|
|
|
|
link: Boolean,
|
|
|
|
bg: Boolean,
|
|
|
|
autofocus: Boolean,
|
|
|
|
round: Boolean,
|
|
|
|
circle: Boolean,
|
|
|
|
color: String,
|
|
|
|
dark: Boolean,
|
|
|
|
autoInsertSpace: {
|
|
|
|
type: Boolean,
|
|
|
|
default: void 0
|
|
|
|
},
|
|
|
|
tag: {
|
|
|
|
type: definePropType([String, Object]),
|
|
|
|
default: "button"
|
|
|
|
}
|
|
|
|
});
|
|
|
|
const buttonEmits = {
|
|
|
|
click: (evt) => evt instanceof MouseEvent
|
|
|
|
};
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
function bound01(n, max) {
|
|
|
|
if (isOnePointZero(n)) {
|
|
|
|
n = "100%";
|
|
|
|
}
|
|
|
|
var isPercent = isPercentage(n);
|
|
|
|
n = max === 360 ? n : Math.min(max, Math.max(0, parseFloat(n)));
|
|
|
|
if (isPercent) {
|
|
|
|
n = parseInt(String(n * max), 10) / 100;
|
|
|
|
}
|
|
|
|
if (Math.abs(n - max) < 1e-6) {
|
|
|
|
return 1;
|
|
|
|
}
|
|
|
|
if (max === 360) {
|
|
|
|
n = (n < 0 ? n % max + max : n % max) / parseFloat(String(max));
|
|
|
|
} else {
|
|
|
|
n = n % max / parseFloat(String(max));
|
|
|
|
}
|
|
|
|
return n;
|
|
|
|
}
|
|
|
|
function clamp01(val) {
|
|
|
|
return Math.min(1, Math.max(0, val));
|
|
|
|
}
|
|
|
|
function isOnePointZero(n) {
|
|
|
|
return typeof n === "string" && n.indexOf(".") !== -1 && parseFloat(n) === 1;
|
|
|
|
}
|
|
|
|
function isPercentage(n) {
|
|
|
|
return typeof n === "string" && n.indexOf("%") !== -1;
|
|
|
|
}
|
|
|
|
function boundAlpha(a) {
|
|
|
|
a = parseFloat(a);
|
|
|
|
if (isNaN(a) || a < 0 || a > 1) {
|
|
|
|
a = 1;
|
|
|
|
}
|
|
|
|
return a;
|
|
|
|
}
|
|
|
|
function convertToPercentage(n) {
|
|
|
|
if (n <= 1) {
|
|
|
|
return "".concat(Number(n) * 100, "%");
|
|
|
|
}
|
|
|
|
return n;
|
|
|
|
}
|
|
|
|
function pad2(c) {
|
|
|
|
return c.length === 1 ? "0" + c : String(c);
|
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
function rgbToRgb(r, g, b) {
|
|
|
|
return {
|
|
|
|
r: bound01(r, 255) * 255,
|
|
|
|
g: bound01(g, 255) * 255,
|
|
|
|
b: bound01(b, 255) * 255
|
|
|
|
};
|
|
|
|
}
|
|
|
|
function rgbToHsl(r, g, b) {
|
|
|
|
r = bound01(r, 255);
|
|
|
|
g = bound01(g, 255);
|
|
|
|
b = bound01(b, 255);
|
|
|
|
var max = Math.max(r, g, b);
|
|
|
|
var min = Math.min(r, g, b);
|
|
|
|
var h = 0;
|
|
|
|
var s = 0;
|
|
|
|
var l = (max + min) / 2;
|
|
|
|
if (max === min) {
|
|
|
|
s = 0;
|
|
|
|
h = 0;
|
|
|
|
} else {
|
|
|
|
var d = max - min;
|
|
|
|
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
|
|
|
switch (max) {
|
|
|
|
case r:
|
|
|
|
h = (g - b) / d + (g < b ? 6 : 0);
|
|
|
|
break;
|
|
|
|
case g:
|
|
|
|
h = (b - r) / d + 2;
|
|
|
|
break;
|
|
|
|
case b:
|
|
|
|
h = (r - g) / d + 4;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
h /= 6;
|
|
|
|
}
|
|
|
|
return { h, s, l };
|
|
|
|
}
|
|
|
|
function hue2rgb(p, q, t) {
|
|
|
|
if (t < 0) {
|
|
|
|
t += 1;
|
|
|
|
}
|
|
|
|
if (t > 1) {
|
|
|
|
t -= 1;
|
|
|
|
}
|
|
|
|
if (t < 1 / 6) {
|
|
|
|
return p + (q - p) * (6 * t);
|
|
|
|
}
|
|
|
|
if (t < 1 / 2) {
|
|
|
|
return q;
|
|
|
|
}
|
|
|
|
if (t < 2 / 3) {
|
|
|
|
return p + (q - p) * (2 / 3 - t) * 6;
|
|
|
|
}
|
|
|
|
return p;
|
|
|
|
}
|
|
|
|
function hslToRgb(h, s, l) {
|
|
|
|
var r;
|
|
|
|
var g;
|
|
|
|
var b;
|
|
|
|
h = bound01(h, 360);
|
|
|
|
s = bound01(s, 100);
|
|
|
|
l = bound01(l, 100);
|
|
|
|
if (s === 0) {
|
|
|
|
g = l;
|
|
|
|
b = l;
|
|
|
|
r = l;
|
|
|
|
} else {
|
|
|
|
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
|
|
|
var p = 2 * l - q;
|
|
|
|
r = hue2rgb(p, q, h + 1 / 3);
|
|
|
|
g = hue2rgb(p, q, h);
|
|
|
|
b = hue2rgb(p, q, h - 1 / 3);
|
|
|
|
}
|
|
|
|
return { r: r * 255, g: g * 255, b: b * 255 };
|
|
|
|
}
|
|
|
|
function rgbToHsv(r, g, b) {
|
|
|
|
r = bound01(r, 255);
|
|
|
|
g = bound01(g, 255);
|
|
|
|
b = bound01(b, 255);
|
|
|
|
var max = Math.max(r, g, b);
|
|
|
|
var min = Math.min(r, g, b);
|
|
|
|
var h = 0;
|
|
|
|
var v = max;
|
|
|
|
var d = max - min;
|
|
|
|
var s = max === 0 ? 0 : d / max;
|
|
|
|
if (max === min) {
|
|
|
|
h = 0;
|
|
|
|
} else {
|
|
|
|
switch (max) {
|
|
|
|
case r:
|
|
|
|
h = (g - b) / d + (g < b ? 6 : 0);
|
|
|
|
break;
|
|
|
|
case g:
|
|
|
|
h = (b - r) / d + 2;
|
|
|
|
break;
|
|
|
|
case b:
|
|
|
|
h = (r - g) / d + 4;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
h /= 6;
|
|
|
|
}
|
|
|
|
return { h, s, v };
|
|
|
|
}
|
|
|
|
function hsvToRgb(h, s, v) {
|
|
|
|
h = bound01(h, 360) * 6;
|
|
|
|
s = bound01(s, 100);
|
|
|
|
v = bound01(v, 100);
|
|
|
|
var i = Math.floor(h);
|
|
|
|
var f = h - i;
|
|
|
|
var p = v * (1 - s);
|
|
|
|
var q = v * (1 - f * s);
|
|
|
|
var t = v * (1 - (1 - f) * s);
|
|
|
|
var mod = i % 6;
|
|
|
|
var r = [v, q, p, p, t, v][mod];
|
|
|
|
var g = [t, v, v, q, p, p][mod];
|
|
|
|
var b = [p, p, t, v, v, q][mod];
|
|
|
|
return { r: r * 255, g: g * 255, b: b * 255 };
|
|
|
|
}
|
|
|
|
function rgbToHex(r, g, b, allow3Char) {
|
|
|
|
var hex = [
|
|
|
|
pad2(Math.round(r).toString(16)),
|
|
|
|
pad2(Math.round(g).toString(16)),
|
|
|
|
pad2(Math.round(b).toString(16))
|
|
|
|
];
|
|
|
|
if (allow3Char && hex[0].startsWith(hex[0].charAt(1)) && hex[1].startsWith(hex[1].charAt(1)) && hex[2].startsWith(hex[2].charAt(1))) {
|
|
|
|
return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
|
|
|
|
}
|
|
|
|
return hex.join("");
|
|
|
|
}
|
|
|
|
function rgbaToHex(r, g, b, a, allow4Char) {
|
|
|
|
var hex = [
|
|
|
|
pad2(Math.round(r).toString(16)),
|
|
|
|
pad2(Math.round(g).toString(16)),
|
|
|
|
pad2(Math.round(b).toString(16)),
|
|
|
|
pad2(convertDecimalToHex(a))
|
|
|
|
];
|
|
|
|
if (allow4Char && hex[0].startsWith(hex[0].charAt(1)) && hex[1].startsWith(hex[1].charAt(1)) && hex[2].startsWith(hex[2].charAt(1)) && hex[3].startsWith(hex[3].charAt(1))) {
|
|
|
|
return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0);
|
|
|
|
}
|
|
|
|
return hex.join("");
|
|
|
|
}
|
|
|
|
function convertDecimalToHex(d) {
|
|
|
|
return Math.round(parseFloat(d) * 255).toString(16);
|
|
|
|
}
|
|
|
|
function convertHexToDecimal(h) {
|
|
|
|
return parseIntFromHex(h) / 255;
|
|
|
|
}
|
|
|
|
function parseIntFromHex(val) {
|
|
|
|
return parseInt(val, 16);
|
|
|
|
}
|
|
|
|
function numberInputToObject(color) {
|
|
|
|
return {
|
|
|
|
r: color >> 16,
|
|
|
|
g: (color & 65280) >> 8,
|
|
|
|
b: color & 255
|
|
|
|
};
|
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
var names = {
|
|
|
|
aliceblue: "#f0f8ff",
|
|
|
|
antiquewhite: "#faebd7",
|
|
|
|
aqua: "#00ffff",
|
|
|
|
aquamarine: "#7fffd4",
|
|
|
|
azure: "#f0ffff",
|
|
|
|
beige: "#f5f5dc",
|
|
|
|
bisque: "#ffe4c4",
|
|
|
|
black: "#000000",
|
|
|
|
blanchedalmond: "#ffebcd",
|
|
|
|
blue: "#0000ff",
|
|
|
|
blueviolet: "#8a2be2",
|
|
|
|
brown: "#a52a2a",
|
|
|
|
burlywood: "#deb887",
|
|
|
|
cadetblue: "#5f9ea0",
|
|
|
|
chartreuse: "#7fff00",
|
|
|
|
chocolate: "#d2691e",
|
|
|
|
coral: "#ff7f50",
|
|
|
|
cornflowerblue: "#6495ed",
|
|
|
|
cornsilk: "#fff8dc",
|
|
|
|
crimson: "#dc143c",
|
|
|
|
cyan: "#00ffff",
|
|
|
|
darkblue: "#00008b",
|
|
|
|
darkcyan: "#008b8b",
|
|
|
|
darkgoldenrod: "#b8860b",
|
|
|
|
darkgray: "#a9a9a9",
|
|
|
|
darkgreen: "#006400",
|
|
|
|
darkgrey: "#a9a9a9",
|
|
|
|
darkkhaki: "#bdb76b",
|
|
|
|
darkmagenta: "#8b008b",
|
|
|
|
darkolivegreen: "#556b2f",
|
|
|
|
darkorange: "#ff8c00",
|
|
|
|
darkorchid: "#9932cc",
|
|
|
|
darkred: "#8b0000",
|
|
|
|
darksalmon: "#e9967a",
|
|
|
|
darkseagreen: "#8fbc8f",
|
|
|
|
darkslateblue: "#483d8b",
|
|
|
|
darkslategray: "#2f4f4f",
|
|
|
|
darkslategrey: "#2f4f4f",
|
|
|
|
darkturquoise: "#00ced1",
|
|
|
|
darkviolet: "#9400d3",
|
|
|
|
deeppink: "#ff1493",
|
|
|
|
deepskyblue: "#00bfff",
|
|
|
|
dimgray: "#696969",
|
|
|
|
dimgrey: "#696969",
|
|
|
|
dodgerblue: "#1e90ff",
|
|
|
|
firebrick: "#b22222",
|
|
|
|
floralwhite: "#fffaf0",
|
|
|
|
forestgreen: "#228b22",
|
|
|
|
fuchsia: "#ff00ff",
|
|
|
|
gainsboro: "#dcdcdc",
|
|
|
|
ghostwhite: "#f8f8ff",
|
|
|
|
goldenrod: "#daa520",
|
|
|
|
gold: "#ffd700",
|
|
|
|
gray: "#808080",
|
|
|
|
green: "#008000",
|
|
|
|
greenyellow: "#adff2f",
|
|
|
|
grey: "#808080",
|
|
|
|
honeydew: "#f0fff0",
|
|
|
|
hotpink: "#ff69b4",
|
|
|
|
indianred: "#cd5c5c",
|
|
|
|
indigo: "#4b0082",
|
|
|
|
ivory: "#fffff0",
|
|
|
|
khaki: "#f0e68c",
|
|
|
|
lavenderblush: "#fff0f5",
|
|
|
|
lavender: "#e6e6fa",
|
|
|
|
lawngreen: "#7cfc00",
|
|
|
|
lemonchiffon: "#fffacd",
|
|
|
|
lightblue: "#add8e6",
|
|
|
|
lightcoral: "#f08080",
|
|
|
|
lightcyan: "#e0ffff",
|
|
|
|
lightgoldenrodyellow: "#fafad2",
|
|
|
|
lightgray: "#d3d3d3",
|
|
|
|
lightgreen: "#90ee90",
|
|
|
|
lightgrey: "#d3d3d3",
|
|
|
|
lightpink: "#ffb6c1",
|
|
|
|
lightsalmon: "#ffa07a",
|
|
|
|
lightseagreen: "#20b2aa",
|
|
|
|
lightskyblue: "#87cefa",
|
|
|
|
lightslategray: "#778899",
|
|
|
|
lightslategrey: "#778899",
|
|
|
|
lightsteelblue: "#b0c4de",
|
|
|
|
lightyellow: "#ffffe0",
|
|
|
|
lime: "#00ff00",
|
|
|
|
limegreen: "#32cd32",
|
|
|
|
linen: "#faf0e6",
|
|
|
|
magenta: "#ff00ff",
|
|
|
|
maroon: "#800000",
|
|
|
|
mediumaquamarine: "#66cdaa",
|
|
|
|
mediumblue: "#0000cd",
|
|
|
|
mediumorchid: "#ba55d3",
|
|
|
|
mediumpurple: "#9370db",
|
|
|
|
mediumseagreen: "#3cb371",
|
|
|
|
mediumslateblue: "#7b68ee",
|
|
|
|
mediumspringgreen: "#00fa9a",
|
|
|
|
mediumturquoise: "#48d1cc",
|
|
|
|
mediumvioletred: "#c71585",
|
|
|
|
midnightblue: "#191970",
|
|
|
|
mintcream: "#f5fffa",
|
|
|
|
mistyrose: "#ffe4e1",
|
|
|
|
moccasin: "#ffe4b5",
|
|
|
|
navajowhite: "#ffdead",
|
|
|
|
navy: "#000080",
|
|
|
|
oldlace: "#fdf5e6",
|
|
|
|
olive: "#808000",
|
|
|
|
olivedrab: "#6b8e23",
|
|
|
|
orange: "#ffa500",
|
|
|
|
orangered: "#ff4500",
|
|
|
|
orchid: "#da70d6",
|
|
|
|
palegoldenrod: "#eee8aa",
|
|
|
|
palegreen: "#98fb98",
|
|
|
|
paleturquoise: "#afeeee",
|
|
|
|
palevioletred: "#db7093",
|
|
|
|
papayawhip: "#ffefd5",
|
|
|
|
peachpuff: "#ffdab9",
|
|
|
|
peru: "#cd853f",
|
|
|
|
pink: "#ffc0cb",
|
|
|
|
plum: "#dda0dd",
|
|
|
|
powderblue: "#b0e0e6",
|
|
|
|
purple: "#800080",
|
|
|
|
rebeccapurple: "#663399",
|
|
|
|
red: "#ff0000",
|
|
|
|
rosybrown: "#bc8f8f",
|
|
|
|
royalblue: "#4169e1",
|
|
|
|
saddlebrown: "#8b4513",
|
|
|
|
salmon: "#fa8072",
|
|
|
|
sandybrown: "#f4a460",
|
|
|
|
seagreen: "#2e8b57",
|
|
|
|
seashell: "#fff5ee",
|
|
|
|
sienna: "#a0522d",
|
|
|
|
silver: "#c0c0c0",
|
|
|
|
skyblue: "#87ceeb",
|
|
|
|
slateblue: "#6a5acd",
|
|
|
|
slategray: "#708090",
|
|
|
|
slategrey: "#708090",
|
|
|
|
snow: "#fffafa",
|
|
|
|
springgreen: "#00ff7f",
|
|
|
|
steelblue: "#4682b4",
|
|
|
|
tan: "#d2b48c",
|
|
|
|
teal: "#008080",
|
|
|
|
thistle: "#d8bfd8",
|
|
|
|
tomato: "#ff6347",
|
|
|
|
turquoise: "#40e0d0",
|
|
|
|
violet: "#ee82ee",
|
|
|
|
wheat: "#f5deb3",
|
|
|
|
white: "#ffffff",
|
|
|
|
whitesmoke: "#f5f5f5",
|
|
|
|
yellow: "#ffff00",
|
|
|
|
yellowgreen: "#9acd32"
|
|
|
|
};
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
function inputToRGB(color) {
|
|
|
|
var rgb = { r: 0, g: 0, b: 0 };
|
|
|
|
var a = 1;
|
|
|
|
var s = null;
|
|
|
|
var v = null;
|
|
|
|
var l = null;
|
|
|
|
var ok = false;
|
|
|
|
var format = false;
|
|
|
|
if (typeof color === "string") {
|
|
|
|
color = stringInputToObject(color);
|
|
|
|
}
|
|
|
|
if (typeof color === "object") {
|
|
|
|
if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
|
|
|
|
rgb = rgbToRgb(color.r, color.g, color.b);
|
|
|
|
ok = true;
|
|
|
|
format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb";
|
|
|
|
} else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
|
|
|
|
s = convertToPercentage(color.s);
|
|
|
|
v = convertToPercentage(color.v);
|
|
|
|
rgb = hsvToRgb(color.h, s, v);
|
|
|
|
ok = true;
|
|
|
|
format = "hsv";
|
|
|
|
} else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {
|
|
|
|
s = convertToPercentage(color.s);
|
|
|
|
l = convertToPercentage(color.l);
|
|
|
|
rgb = hslToRgb(color.h, s, l);
|
|
|
|
ok = true;
|
|
|
|
format = "hsl";
|
|
|
|
}
|
|
|
|
if (Object.prototype.hasOwnProperty.call(color, "a")) {
|
|
|
|
a = color.a;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
a = boundAlpha(a);
|
|
|
|
return {
|
|
|
|
ok,
|
|
|
|
format: color.format || format,
|
|
|
|
r: Math.min(255, Math.max(rgb.r, 0)),
|
|
|
|
g: Math.min(255, Math.max(rgb.g, 0)),
|
|
|
|
b: Math.min(255, Math.max(rgb.b, 0)),
|
|
|
|
a
|
|
|
|
};
|
|
|
|
}
|
|
|
|
var CSS_INTEGER = "[-\\+]?\\d+%?";
|
|
|
|
var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?";
|
|
|
|
var CSS_UNIT = "(?:".concat(CSS_NUMBER, ")|(?:").concat(CSS_INTEGER, ")");
|
|
|
|
var PERMISSIVE_MATCH3 = "[\\s|\\(]+(".concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")\\s*\\)?");
|
|
|
|
var PERMISSIVE_MATCH4 = "[\\s|\\(]+(".concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")\\s*\\)?");
|
|
|
|
var matchers = {
|
|
|
|
CSS_UNIT: new RegExp(CSS_UNIT),
|
|
|
|
rgb: new RegExp("rgb" + PERMISSIVE_MATCH3),
|
|
|
|
rgba: new RegExp("rgba" + PERMISSIVE_MATCH4),
|
|
|
|
hsl: new RegExp("hsl" + PERMISSIVE_MATCH3),
|
|
|
|
hsla: new RegExp("hsla" + PERMISSIVE_MATCH4),
|
|
|
|
hsv: new RegExp("hsv" + PERMISSIVE_MATCH3),
|
|
|
|
hsva: new RegExp("hsva" + PERMISSIVE_MATCH4),
|
|
|
|
hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
|
|
|
|
hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
|
|
|
|
hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
|
|
|
|
hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
|
|
|
|
};
|
|
|
|
function stringInputToObject(color) {
|
|
|
|
color = color.trim().toLowerCase();
|
|
|
|
if (color.length === 0) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
var named = false;
|
|
|
|
if (names[color]) {
|
|
|
|
color = names[color];
|
|
|
|
named = true;
|
|
|
|
} else if (color === "transparent") {
|
|
|
|
return { r: 0, g: 0, b: 0, a: 0, format: "name" };
|
|
|
|
}
|
|
|
|
var match = matchers.rgb.exec(color);
|
|
|
|
if (match) {
|
|
|
|
return { r: match[1], g: match[2], b: match[3] };
|
|
|
|
}
|
|
|
|
match = matchers.rgba.exec(color);
|
|
|
|
if (match) {
|
|
|
|
return { r: match[1], g: match[2], b: match[3], a: match[4] };
|
|
|
|
}
|
|
|
|
match = matchers.hsl.exec(color);
|
|
|
|
if (match) {
|
|
|
|
return { h: match[1], s: match[2], l: match[3] };
|
|
|
|
}
|
|
|
|
match = matchers.hsla.exec(color);
|
|
|
|
if (match) {
|
|
|
|
return { h: match[1], s: match[2], l: match[3], a: match[4] };
|
|
|
|
}
|
|
|
|
match = matchers.hsv.exec(color);
|
|
|
|
if (match) {
|
|
|
|
return { h: match[1], s: match[2], v: match[3] };
|
|
|
|
}
|
|
|
|
match = matchers.hsva.exec(color);
|
|
|
|
if (match) {
|
|
|
|
return { h: match[1], s: match[2], v: match[3], a: match[4] };
|
|
|
|
}
|
|
|
|
match = matchers.hex8.exec(color);
|
|
|
|
if (match) {
|
|
|
|
return {
|
|
|
|
r: parseIntFromHex(match[1]),
|
|
|
|
g: parseIntFromHex(match[2]),
|
|
|
|
b: parseIntFromHex(match[3]),
|
|
|
|
a: convertHexToDecimal(match[4]),
|
|
|
|
format: named ? "name" : "hex8"
|
|
|
|
};
|
|
|
|
}
|
|
|
|
match = matchers.hex6.exec(color);
|
|
|
|
if (match) {
|
|
|
|
return {
|
|
|
|
r: parseIntFromHex(match[1]),
|
|
|
|
g: parseIntFromHex(match[2]),
|
|
|
|
b: parseIntFromHex(match[3]),
|
|
|
|
format: named ? "name" : "hex"
|
|
|
|
};
|
|
|
|
}
|
|
|
|
match = matchers.hex4.exec(color);
|
|
|
|
if (match) {
|
|
|
|
return {
|
|
|
|
r: parseIntFromHex(match[1] + match[1]),
|
|
|
|
g: parseIntFromHex(match[2] + match[2]),
|
|
|
|
b: parseIntFromHex(match[3] + match[3]),
|
|
|
|
a: convertHexToDecimal(match[4] + match[4]),
|
|
|
|
format: named ? "name" : "hex8"
|
|
|
|
};
|
|
|
|
}
|
|
|
|
match = matchers.hex3.exec(color);
|
|
|
|
if (match) {
|
|
|
|
return {
|
|
|
|
r: parseIntFromHex(match[1] + match[1]),
|
|
|
|
g: parseIntFromHex(match[2] + match[2]),
|
|
|
|
b: parseIntFromHex(match[3] + match[3]),
|
|
|
|
format: named ? "name" : "hex"
|
|
|
|
};
|
|
|
|
}
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
function isValidCSSUnit(color) {
|
|
|
|
return Boolean(matchers.CSS_UNIT.exec(String(color)));
|
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
var TinyColor = (
|
|
|
|
/** @class */
|
|
|
|
function() {
|
|
|
|
function TinyColor2(color, opts) {
|
|
|
|
if (color === void 0) {
|
|
|
|
color = "";
|
|
|
|
}
|
|
|
|
if (opts === void 0) {
|
|
|
|
opts = {};
|
|
|
|
}
|
|
|
|
var _a;
|
|
|
|
if (color instanceof TinyColor2) {
|
|
|
|
return color;
|
|
|
|
}
|
|
|
|
if (typeof color === "number") {
|
|
|
|
color = numberInputToObject(color);
|
|
|
|
}
|
|
|
|
this.originalInput = color;
|
|
|
|
var rgb = inputToRGB(color);
|
|
|
|
this.originalInput = color;
|
|
|
|
this.r = rgb.r;
|
|
|
|
this.g = rgb.g;
|
|
|
|
this.b = rgb.b;
|
|
|
|
this.a = rgb.a;
|
|
|
|
this.roundA = Math.round(100 * this.a) / 100;
|
|
|
|
this.format = (_a = opts.format) !== null && _a !== void 0 ? _a : rgb.format;
|
|
|
|
this.gradientType = opts.gradientType;
|
|
|
|
if (this.r < 1) {
|
|
|
|
this.r = Math.round(this.r);
|
|
|
|
}
|
|
|
|
if (this.g < 1) {
|
|
|
|
this.g = Math.round(this.g);
|
|
|
|
}
|
|
|
|
if (this.b < 1) {
|
|
|
|
this.b = Math.round(this.b);
|
|
|
|
}
|
|
|
|
this.isValid = rgb.ok;
|
|
|
|
}
|
|
|
|
TinyColor2.prototype.isDark = function() {
|
|
|
|
return this.getBrightness() < 128;
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.isLight = function() {
|
|
|
|
return !this.isDark();
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.getBrightness = function() {
|
|
|
|
var rgb = this.toRgb();
|
|
|
|
return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1e3;
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.getLuminance = function() {
|
|
|
|
var rgb = this.toRgb();
|
|
|
|
var R;
|
|
|
|
var G;
|
|
|
|
var B;
|
|
|
|
var RsRGB = rgb.r / 255;
|
|
|
|
var GsRGB = rgb.g / 255;
|
|
|
|
var BsRGB = rgb.b / 255;
|
|
|
|
if (RsRGB <= 0.03928) {
|
|
|
|
R = RsRGB / 12.92;
|
|
|
|
} else {
|
|
|
|
R = Math.pow((RsRGB + 0.055) / 1.055, 2.4);
|
|
|
|
}
|
|
|
|
if (GsRGB <= 0.03928) {
|
|
|
|
G = GsRGB / 12.92;
|
|
|
|
} else {
|
|
|
|
G = Math.pow((GsRGB + 0.055) / 1.055, 2.4);
|
|
|
|
}
|
|
|
|
if (BsRGB <= 0.03928) {
|
|
|
|
B = BsRGB / 12.92;
|
|
|
|
} else {
|
|
|
|
B = Math.pow((BsRGB + 0.055) / 1.055, 2.4);
|
|
|
|
}
|
|
|
|
return 0.2126 * R + 0.7152 * G + 0.0722 * B;
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.getAlpha = function() {
|
|
|
|
return this.a;
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.setAlpha = function(alpha) {
|
|
|
|
this.a = boundAlpha(alpha);
|
|
|
|
this.roundA = Math.round(100 * this.a) / 100;
|
|
|
|
return this;
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.isMonochrome = function() {
|
|
|
|
var s = this.toHsl().s;
|
|
|
|
return s === 0;
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.toHsv = function() {
|
|
|
|
var hsv = rgbToHsv(this.r, this.g, this.b);
|
|
|
|
return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this.a };
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.toHsvString = function() {
|
|
|
|
var hsv = rgbToHsv(this.r, this.g, this.b);
|
|
|
|
var h = Math.round(hsv.h * 360);
|
|
|
|
var s = Math.round(hsv.s * 100);
|
|
|
|
var v = Math.round(hsv.v * 100);
|
|
|
|
return this.a === 1 ? "hsv(".concat(h, ", ").concat(s, "%, ").concat(v, "%)") : "hsva(".concat(h, ", ").concat(s, "%, ").concat(v, "%, ").concat(this.roundA, ")");
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.toHsl = function() {
|
|
|
|
var hsl = rgbToHsl(this.r, this.g, this.b);
|
|
|
|
return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this.a };
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.toHslString = function() {
|
|
|
|
var hsl = rgbToHsl(this.r, this.g, this.b);
|
|
|
|
var h = Math.round(hsl.h * 360);
|
|
|
|
var s = Math.round(hsl.s * 100);
|
|
|
|
var l = Math.round(hsl.l * 100);
|
|
|
|
return this.a === 1 ? "hsl(".concat(h, ", ").concat(s, "%, ").concat(l, "%)") : "hsla(".concat(h, ", ").concat(s, "%, ").concat(l, "%, ").concat(this.roundA, ")");
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.toHex = function(allow3Char) {
|
|
|
|
if (allow3Char === void 0) {
|
|
|
|
allow3Char = false;
|
|
|
|
}
|
|
|
|
return rgbToHex(this.r, this.g, this.b, allow3Char);
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.toHexString = function(allow3Char) {
|
|
|
|
if (allow3Char === void 0) {
|
|
|
|
allow3Char = false;
|
|
|
|
}
|
|
|
|
return "#" + this.toHex(allow3Char);
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.toHex8 = function(allow4Char) {
|
|
|
|
if (allow4Char === void 0) {
|
|
|
|
allow4Char = false;
|
|
|
|
}
|
|
|
|
return rgbaToHex(this.r, this.g, this.b, this.a, allow4Char);
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.toHex8String = function(allow4Char) {
|
|
|
|
if (allow4Char === void 0) {
|
|
|
|
allow4Char = false;
|
|
|
|
}
|
|
|
|
return "#" + this.toHex8(allow4Char);
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.toHexShortString = function(allowShortChar) {
|
|
|
|
if (allowShortChar === void 0) {
|
|
|
|
allowShortChar = false;
|
|
|
|
}
|
|
|
|
return this.a === 1 ? this.toHexString(allowShortChar) : this.toHex8String(allowShortChar);
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.toRgb = function() {
|
|
|
|
return {
|
|
|
|
r: Math.round(this.r),
|
|
|
|
g: Math.round(this.g),
|
|
|
|
b: Math.round(this.b),
|
|
|
|
a: this.a
|
|
|
|
};
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.toRgbString = function() {
|
|
|
|
var r = Math.round(this.r);
|
|
|
|
var g = Math.round(this.g);
|
|
|
|
var b = Math.round(this.b);
|
|
|
|
return this.a === 1 ? "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ")") : "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(this.roundA, ")");
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.toPercentageRgb = function() {
|
|
|
|
var fmt = function(x) {
|
|
|
|
return "".concat(Math.round(bound01(x, 255) * 100), "%");
|
|
|
|
};
|
|
|
|
return {
|
|
|
|
r: fmt(this.r),
|
|
|
|
g: fmt(this.g),
|
|
|
|
b: fmt(this.b),
|
|
|
|
a: this.a
|
|
|
|
};
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.toPercentageRgbString = function() {
|
|
|
|
var rnd = function(x) {
|
|
|
|
return Math.round(bound01(x, 255) * 100);
|
|
|
|
};
|
|
|
|
return this.a === 1 ? "rgb(".concat(rnd(this.r), "%, ").concat(rnd(this.g), "%, ").concat(rnd(this.b), "%)") : "rgba(".concat(rnd(this.r), "%, ").concat(rnd(this.g), "%, ").concat(rnd(this.b), "%, ").concat(this.roundA, ")");
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.toName = function() {
|
|
|
|
if (this.a === 0) {
|
|
|
|
return "transparent";
|
|
|
|
}
|
|
|
|
if (this.a < 1) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
var hex = "#" + rgbToHex(this.r, this.g, this.b, false);
|
|
|
|
for (var _i = 0, _a = Object.entries(names); _i < _a.length; _i++) {
|
|
|
|
var _b = _a[_i], key = _b[0], value = _b[1];
|
|
|
|
if (hex === value) {
|
|
|
|
return key;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return false;
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.toString = function(format) {
|
|
|
|
var formatSet = Boolean(format);
|
|
|
|
format = format !== null && format !== void 0 ? format : this.format;
|
|
|
|
var formattedString = false;
|
|
|
|
var hasAlpha = this.a < 1 && this.a >= 0;
|
|
|
|
var needsAlphaFormat = !formatSet && hasAlpha && (format.startsWith("hex") || format === "name");
|
|
|
|
if (needsAlphaFormat) {
|
|
|
|
if (format === "name" && this.a === 0) {
|
|
|
|
return this.toName();
|
|
|
|
}
|
|
|
|
return this.toRgbString();
|
|
|
|
}
|
|
|
|
if (format === "rgb") {
|
|
|
|
formattedString = this.toRgbString();
|
|
|
|
}
|
|
|
|
if (format === "prgb") {
|
|
|
|
formattedString = this.toPercentageRgbString();
|
|
|
|
}
|
|
|
|
if (format === "hex" || format === "hex6") {
|
|
|
|
formattedString = this.toHexString();
|
|
|
|
}
|
|
|
|
if (format === "hex3") {
|
|
|
|
formattedString = this.toHexString(true);
|
|
|
|
}
|
|
|
|
if (format === "hex4") {
|
|
|
|
formattedString = this.toHex8String(true);
|
|
|
|
}
|
|
|
|
if (format === "hex8") {
|
|
|
|
formattedString = this.toHex8String();
|
|
|
|
}
|
|
|
|
if (format === "name") {
|
|
|
|
formattedString = this.toName();
|
|
|
|
}
|
|
|
|
if (format === "hsl") {
|
|
|
|
formattedString = this.toHslString();
|
|
|
|
}
|
|
|
|
if (format === "hsv") {
|
|
|
|
formattedString = this.toHsvString();
|
|
|
|
}
|
|
|
|
return formattedString || this.toHexString();
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.toNumber = function() {
|
|
|
|
return (Math.round(this.r) << 16) + (Math.round(this.g) << 8) + Math.round(this.b);
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.clone = function() {
|
|
|
|
return new TinyColor2(this.toString());
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.lighten = function(amount) {
|
|
|
|
if (amount === void 0) {
|
|
|
|
amount = 10;
|
|
|
|
}
|
|
|
|
var hsl = this.toHsl();
|
|
|
|
hsl.l += amount / 100;
|
|
|
|
hsl.l = clamp01(hsl.l);
|
|
|
|
return new TinyColor2(hsl);
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.brighten = function(amount) {
|
|
|
|
if (amount === void 0) {
|
|
|
|
amount = 10;
|
|
|
|
}
|
|
|
|
var rgb = this.toRgb();
|
|
|
|
rgb.r = Math.max(0, Math.min(255, rgb.r - Math.round(255 * -(amount / 100))));
|
|
|
|
rgb.g = Math.max(0, Math.min(255, rgb.g - Math.round(255 * -(amount / 100))));
|
|
|
|
rgb.b = Math.max(0, Math.min(255, rgb.b - Math.round(255 * -(amount / 100))));
|
|
|
|
return new TinyColor2(rgb);
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.darken = function(amount) {
|
|
|
|
if (amount === void 0) {
|
|
|
|
amount = 10;
|
|
|
|
}
|
|
|
|
var hsl = this.toHsl();
|
|
|
|
hsl.l -= amount / 100;
|
|
|
|
hsl.l = clamp01(hsl.l);
|
|
|
|
return new TinyColor2(hsl);
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.tint = function(amount) {
|
|
|
|
if (amount === void 0) {
|
|
|
|
amount = 10;
|
|
|
|
}
|
|
|
|
return this.mix("white", amount);
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.shade = function(amount) {
|
|
|
|
if (amount === void 0) {
|
|
|
|
amount = 10;
|
|
|
|
}
|
|
|
|
return this.mix("black", amount);
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.desaturate = function(amount) {
|
|
|
|
if (amount === void 0) {
|
|
|
|
amount = 10;
|
|
|
|
}
|
|
|
|
var hsl = this.toHsl();
|
|
|
|
hsl.s -= amount / 100;
|
|
|
|
hsl.s = clamp01(hsl.s);
|
|
|
|
return new TinyColor2(hsl);
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.saturate = function(amount) {
|
|
|
|
if (amount === void 0) {
|
|
|
|
amount = 10;
|
|
|
|
}
|
|
|
|
var hsl = this.toHsl();
|
|
|
|
hsl.s += amount / 100;
|
|
|
|
hsl.s = clamp01(hsl.s);
|
|
|
|
return new TinyColor2(hsl);
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.greyscale = function() {
|
|
|
|
return this.desaturate(100);
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.spin = function(amount) {
|
|
|
|
var hsl = this.toHsl();
|
|
|
|
var hue = (hsl.h + amount) % 360;
|
|
|
|
hsl.h = hue < 0 ? 360 + hue : hue;
|
|
|
|
return new TinyColor2(hsl);
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.mix = function(color, amount) {
|
|
|
|
if (amount === void 0) {
|
|
|
|
amount = 50;
|
|
|
|
}
|
|
|
|
var rgb1 = this.toRgb();
|
|
|
|
var rgb2 = new TinyColor2(color).toRgb();
|
|
|
|
var p = amount / 100;
|
|
|
|
var rgba = {
|
|
|
|
r: (rgb2.r - rgb1.r) * p + rgb1.r,
|
|
|
|
g: (rgb2.g - rgb1.g) * p + rgb1.g,
|
|
|
|
b: (rgb2.b - rgb1.b) * p + rgb1.b,
|
|
|
|
a: (rgb2.a - rgb1.a) * p + rgb1.a
|
|
|
|
};
|
|
|
|
return new TinyColor2(rgba);
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.analogous = function(results, slices) {
|
|
|
|
if (results === void 0) {
|
|
|
|
results = 6;
|
|
|
|
}
|
|
|
|
if (slices === void 0) {
|
|
|
|
slices = 30;
|
|
|
|
}
|
|
|
|
var hsl = this.toHsl();
|
|
|
|
var part = 360 / slices;
|
|
|
|
var ret = [this];
|
|
|
|
for (hsl.h = (hsl.h - (part * results >> 1) + 720) % 360; --results; ) {
|
|
|
|
hsl.h = (hsl.h + part) % 360;
|
|
|
|
ret.push(new TinyColor2(hsl));
|
|
|
|
}
|
|
|
|
return ret;
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.complement = function() {
|
|
|
|
var hsl = this.toHsl();
|
|
|
|
hsl.h = (hsl.h + 180) % 360;
|
|
|
|
return new TinyColor2(hsl);
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.monochromatic = function(results) {
|
|
|
|
if (results === void 0) {
|
|
|
|
results = 6;
|
|
|
|
}
|
|
|
|
var hsv = this.toHsv();
|
|
|
|
var h = hsv.h;
|
|
|
|
var s = hsv.s;
|
|
|
|
var v = hsv.v;
|
|
|
|
var res = [];
|
|
|
|
var modification = 1 / results;
|
|
|
|
while (results--) {
|
|
|
|
res.push(new TinyColor2({ h, s, v }));
|
|
|
|
v = (v + modification) % 1;
|
|
|
|
}
|
|
|
|
return res;
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.splitcomplement = function() {
|
|
|
|
var hsl = this.toHsl();
|
|
|
|
var h = hsl.h;
|
|
|
|
return [
|
|
|
|
this,
|
|
|
|
new TinyColor2({ h: (h + 72) % 360, s: hsl.s, l: hsl.l }),
|
|
|
|
new TinyColor2({ h: (h + 216) % 360, s: hsl.s, l: hsl.l })
|
|
|
|
];
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.onBackground = function(background) {
|
|
|
|
var fg = this.toRgb();
|
|
|
|
var bg = new TinyColor2(background).toRgb();
|
|
|
|
var alpha = fg.a + bg.a * (1 - fg.a);
|
|
|
|
return new TinyColor2({
|
|
|
|
r: (fg.r * fg.a + bg.r * bg.a * (1 - fg.a)) / alpha,
|
|
|
|
g: (fg.g * fg.a + bg.g * bg.a * (1 - fg.a)) / alpha,
|
|
|
|
b: (fg.b * fg.a + bg.b * bg.a * (1 - fg.a)) / alpha,
|
|
|
|
a: alpha
|
|
|
|
});
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.triad = function() {
|
|
|
|
return this.polyad(3);
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.tetrad = function() {
|
|
|
|
return this.polyad(4);
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.polyad = function(n) {
|
|
|
|
var hsl = this.toHsl();
|
|
|
|
var h = hsl.h;
|
|
|
|
var result = [this];
|
|
|
|
var increment = 360 / n;
|
|
|
|
for (var i = 1; i < n; i++) {
|
|
|
|
result.push(new TinyColor2({ h: (h + i * increment) % 360, s: hsl.s, l: hsl.l }));
|
|
|
|
}
|
|
|
|
return result;
|
|
|
|
};
|
|
|
|
TinyColor2.prototype.equals = function(color) {
|
|
|
|
return this.toRgbString() === new TinyColor2(color).toRgbString();
|
|
|
|
};
|
|
|
|
return TinyColor2;
|
|
|
|
}()
|
|
|
|
);
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
function darken(color, amount = 20) {
|
|
|
|
return color.mix("#141414", amount).toString();
|
|
|
|
}
|
|
|
|
function useButtonCustomStyle(props) {
|
|
|
|
const _disabled = useFormDisabled();
|
|
|
|
const ns = useNamespace("button");
|
|
|
|
return computed(() => {
|
|
|
|
let styles = {};
|
|
|
|
let buttonColor = props.color;
|
|
|
|
if (buttonColor) {
|
|
|
|
const match = buttonColor.match(/var\((.*?)\)/);
|
|
|
|
if (match) {
|
|
|
|
buttonColor = (void 0).getComputedStyle((void 0).document.documentElement).getPropertyValue(match[1]);
|
|
|
|
}
|
|
|
|
const color = new TinyColor(buttonColor);
|
|
|
|
const activeBgColor = props.dark ? color.tint(20).toString() : darken(color, 20);
|
|
|
|
if (props.plain) {
|
|
|
|
styles = ns.cssVarBlock({
|
|
|
|
"bg-color": props.dark ? darken(color, 90) : color.tint(90).toString(),
|
|
|
|
"text-color": buttonColor,
|
|
|
|
"border-color": props.dark ? darken(color, 50) : color.tint(50).toString(),
|
|
|
|
"hover-text-color": `var(${ns.cssVarName("color-white")})`,
|
|
|
|
"hover-bg-color": buttonColor,
|
|
|
|
"hover-border-color": buttonColor,
|
|
|
|
"active-bg-color": activeBgColor,
|
|
|
|
"active-text-color": `var(${ns.cssVarName("color-white")})`,
|
|
|
|
"active-border-color": activeBgColor
|
|
|
|
});
|
|
|
|
if (_disabled.value) {
|
|
|
|
styles[ns.cssVarBlockName("disabled-bg-color")] = props.dark ? darken(color, 90) : color.tint(90).toString();
|
|
|
|
styles[ns.cssVarBlockName("disabled-text-color")] = props.dark ? darken(color, 50) : color.tint(50).toString();
|
|
|
|
styles[ns.cssVarBlockName("disabled-border-color")] = props.dark ? darken(color, 80) : color.tint(80).toString();
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
const hoverBgColor = props.dark ? darken(color, 30) : color.tint(30).toString();
|
|
|
|
const textColor = color.isDark() ? `var(${ns.cssVarName("color-white")})` : `var(${ns.cssVarName("color-black")})`;
|
|
|
|
styles = ns.cssVarBlock({
|
|
|
|
"bg-color": buttonColor,
|
|
|
|
"text-color": textColor,
|
|
|
|
"border-color": buttonColor,
|
|
|
|
"hover-bg-color": hoverBgColor,
|
|
|
|
"hover-text-color": textColor,
|
|
|
|
"hover-border-color": hoverBgColor,
|
|
|
|
"active-bg-color": activeBgColor,
|
|
|
|
"active-border-color": activeBgColor
|
|
|
|
});
|
|
|
|
if (_disabled.value) {
|
|
|
|
const disabledButtonColor = props.dark ? darken(color, 50) : color.tint(50).toString();
|
|
|
|
styles[ns.cssVarBlockName("disabled-bg-color")] = disabledButtonColor;
|
|
|
|
styles[ns.cssVarBlockName("disabled-text-color")] = props.dark ? "rgba(255, 255, 255, 0.5)" : `var(${ns.cssVarName("color-white")})`;
|
|
|
|
styles[ns.cssVarBlockName("disabled-border-color")] = disabledButtonColor;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return styles;
|
|
|
|
});
|
|
|
|
}
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
const __default__$1 = defineComponent({
|
|
|
|
name: "ElButton"
|
|
|
|
});
|
|
|
|
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
|
...__default__$1,
|
|
|
|
props: buttonProps,
|
|
|
|
emits: buttonEmits,
|
|
|
|
setup(__props, { expose, emit }) {
|
|
|
|
const props = __props;
|
|
|
|
const buttonStyle = useButtonCustomStyle(props);
|
|
|
|
const ns = useNamespace("button");
|
|
|
|
const { _ref, _size, _type, _disabled, _props, shouldAddSpace, handleClick } = useButton(props, emit);
|
|
|
|
const buttonKls = computed(() => [
|
|
|
|
ns.b(),
|
|
|
|
ns.m(_type.value),
|
|
|
|
ns.m(_size.value),
|
|
|
|
ns.is("disabled", _disabled.value),
|
|
|
|
ns.is("loading", props.loading),
|
|
|
|
ns.is("plain", props.plain),
|
|
|
|
ns.is("round", props.round),
|
|
|
|
ns.is("circle", props.circle),
|
|
|
|
ns.is("text", props.text),
|
|
|
|
ns.is("link", props.link),
|
|
|
|
ns.is("has-bg", props.bg)
|
|
|
|
]);
|
|
|
|
expose({
|
|
|
|
ref: _ref,
|
|
|
|
size: _size,
|
|
|
|
type: _type,
|
|
|
|
disabled: _disabled,
|
|
|
|
shouldAddSpace
|
|
|
|
});
|
|
|
|
return (_ctx, _cache) => {
|
|
|
|
return openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), mergeProps({
|
|
|
|
ref_key: "_ref",
|
|
|
|
ref: _ref
|
|
|
|
}, unref(_props), {
|
|
|
|
class: unref(buttonKls),
|
|
|
|
style: unref(buttonStyle),
|
|
|
|
onClick: unref(handleClick)
|
|
|
|
}), {
|
|
|
|
default: withCtx(() => [
|
|
|
|
_ctx.loading ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
|
|
_ctx.$slots.loading ? renderSlot(_ctx.$slots, "loading", { key: 0 }) : (openBlock(), createBlock(unref(ElIcon), {
|
|
|
|
key: 1,
|
|
|
|
class: normalizeClass(unref(ns).is("loading"))
|
|
|
|
}, {
|
|
|
|
default: withCtx(() => [
|
|
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.loadingIcon)))
|
|
|
|
]),
|
|
|
|
_: 1
|
|
|
|
}, 8, ["class"]))
|
|
|
|
], 64)) : _ctx.icon || _ctx.$slots.icon ? (openBlock(), createBlock(unref(ElIcon), { key: 1 }, {
|
|
|
|
default: withCtx(() => [
|
|
|
|
_ctx.icon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon), { key: 0 })) : renderSlot(_ctx.$slots, "icon", { key: 1 })
|
|
|
|
]),
|
|
|
|
_: 3
|
|
|
|
})) : createCommentVNode("v-if", true),
|
|
|
|
_ctx.$slots.default ? (openBlock(), createElementBlock("span", {
|
|
|
|
key: 2,
|
|
|
|
class: normalizeClass({ [unref(ns).em("text", "expand")]: unref(shouldAddSpace) })
|
|
|
|
}, [
|
|
|
|
renderSlot(_ctx.$slots, "default")
|
|
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
|
|
]),
|
|
|
|
_: 3
|
|
|
|
}, 16, ["class", "style", "onClick"]);
|
|
|
|
};
|
|
|
|
}
|
|
|
|
});
|
|
|
|
var Button = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__file", "button.vue"]]);
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
const buttonGroupProps = {
|
|
|
|
size: buttonProps.size,
|
|
|
|
type: buttonProps.type
|
|
|
|
};
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
const __default__ = defineComponent({
|
|
|
|
name: "ElButtonGroup"
|
|
|
|
});
|
|
|
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
|
...__default__,
|
|
|
|
props: buttonGroupProps,
|
|
|
|
setup(__props) {
|
|
|
|
const props = __props;
|
|
|
|
provide(buttonGroupContextKey, reactive({
|
|
|
|
size: toRef(props, "size"),
|
|
|
|
type: toRef(props, "type")
|
|
|
|
}));
|
|
|
|
const ns = useNamespace("button");
|
|
|
|
return (_ctx, _cache) => {
|
|
|
|
return openBlock(), createElementBlock("div", {
|
|
|
|
class: normalizeClass(unref(ns).b("group"))
|
|
|
|
}, [
|
|
|
|
renderSlot(_ctx.$slots, "default")
|
|
|
|
], 2);
|
|
|
|
};
|
|
|
|
}
|
|
|
|
});
|
|
|
|
var ButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "button-group.vue"]]);
|
2025-03-11 13:57:38 +08:00
|
|
|
|
2025-02-20 19:30:25 +08:00
|
|
|
const ElButton = withInstall(Button, {
|
|
|
|
ButtonGroup
|
|
|
|
});
|
|
|
|
withNoopInstall(ButtonGroup);
|
|
|
|
|
2025-03-11 13:57:38 +08:00
|
|
|
export { ElTooltip as E, TOOLTIP_INJECTION_KEY as T, useTooltipTriggerProps as a, ElInput as b, ElButton as c, useEventListener as d, useAriaProps as e, useResizeObserver as f, useAttrs as g, useFormDisabled as h, flatten as i, useFocusController as j, arrayPush as k, isLength as l, isArguments as m, isIndex as n, onClickOutside as o, useFormItem as p, useFormSize as q, roleTypes as r, unrefElement as s, useTooltipContentProps as u };
|
|
|
|
//# sourceMappingURL=index.mjs.map
|