This commit is contained in:
2025-09-19 14:25:20 +08:00
parent 269893a435
commit fbf3f77229
24949 changed files with 2839404 additions and 0 deletions

View File

@@ -0,0 +1,16 @@
import Loading from './src/service';
import vLoading from './src/directive';
import type { App, AppContext, Directive } from 'vue';
import type { ElementLoading, LoadingBinding } from './src/directive';
export declare const ElLoading: {
install(app: App): void;
directive: Directive<ElementLoading, LoadingBinding>;
service: {
(options?: import("./src/types").LoadingOptions): import("./src/loading").LoadingInstance;
_context: AppContext | null;
};
};
export default ElLoading;
export { vLoading, vLoading as ElLoadingDirective, Loading as ElLoadingService };
export * from './src/types';
export type { LoadingInstance } from './src/loading';

View File

@@ -0,0 +1,24 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var service = require('./src/service.js');
var directive = require('./src/directive.js');
const ElLoading = {
install(app) {
service["default"]._context = app._context;
directive["default"]._context = app._context;
app.directive("loading", directive["default"]);
app.config.globalProperties.$loading = service["default"];
},
directive: directive["default"],
service: service["default"]
};
exports.ElLoadingService = service["default"];
exports.ElLoadingDirective = directive["default"];
exports.vLoading = directive["default"];
exports.ElLoading = ElLoading;
exports["default"] = ElLoading;
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.js","sources":["../../../../../packages/components/loading/index.ts"],"sourcesContent":["import Loading from './src/service'\nimport vLoading from './src/directive'\n\nimport type { App, AppContext, Directive } from 'vue'\nimport type { ElementLoading, LoadingBinding } from './src/directive'\n\n// installer and everything in all\nexport const ElLoading = {\n install(app: App) {\n Loading._context = app._context\n ;(\n vLoading as Directive<ElementLoading, LoadingBinding> & {\n _context: AppContext | null\n }\n )._context = app._context\n app.directive('loading', vLoading)\n app.config.globalProperties.$loading = Loading\n },\n directive: vLoading,\n service: Loading,\n}\n\nexport default ElLoading\nexport { vLoading, vLoading as ElLoadingDirective, Loading as ElLoadingService }\n\nexport * from './src/types'\nexport type { LoadingInstance } from './src/loading'\n"],"names":["Loading","vLoading"],"mappings":";;;;;;;AAEY,MAAC,SAAS,GAAG;AACzB,EAAE,OAAO,CAAC,GAAG,EAAE;AACf,IAAIA,kBAAO,CAAC,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AACpC,IAAIC,oBAAQ,CAAC,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AACrC,IAAI,GAAG,CAAC,SAAS,CAAC,SAAS,EAAEA,oBAAQ,CAAC,CAAC;AACvC,IAAI,GAAG,CAAC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,GAAGD,kBAAO,CAAC;AACnD,GAAG;AACH,EAAE,SAAS,EAAEC,oBAAQ;AACrB,EAAE,OAAO,EAAED,kBAAO;AAClB;;;;;;;;"}

View File

@@ -0,0 +1,13 @@
import type { Directive, UnwrapRef } from 'vue';
import type { LoadingOptions } from './types';
import type { LoadingInstance } from './loading';
declare const INSTANCE_KEY: unique symbol;
export type LoadingBinding = boolean | UnwrapRef<LoadingOptions>;
export interface ElementLoading extends HTMLElement {
[INSTANCE_KEY]?: {
instance: LoadingInstance;
options: LoadingOptions;
};
}
declare const vLoading: Directive<ElementLoading, LoadingBinding>;
export default vLoading;

View File

@@ -0,0 +1,83 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var service = require('./service.js');
var shared = require('@vue/shared');
const INSTANCE_KEY = Symbol("ElLoading");
const getAttributeName = (name) => {
return `element-loading-${shared.hyphenate(name)}`;
};
const createInstance = (el, binding) => {
var _a, _b, _c, _d;
const vm = binding.instance;
const getBindingProp = (key) => shared.isObject(binding.value) ? binding.value[key] : void 0;
const resolveExpression = (key) => {
const data = shared.isString(key) && (vm == null ? void 0 : vm[key]) || key;
return vue.ref(data);
};
const getProp = (name) => resolveExpression(getBindingProp(name) || el.getAttribute(getAttributeName(name)));
const fullscreen = (_a = getBindingProp("fullscreen")) != null ? _a : binding.modifiers.fullscreen;
const options = {
text: getProp("text"),
svg: getProp("svg"),
svgViewBox: getProp("svgViewBox"),
spinner: getProp("spinner"),
background: getProp("background"),
customClass: getProp("customClass"),
fullscreen,
target: (_b = getBindingProp("target")) != null ? _b : fullscreen ? void 0 : el,
body: (_c = getBindingProp("body")) != null ? _c : binding.modifiers.body,
lock: (_d = getBindingProp("lock")) != null ? _d : binding.modifiers.lock
};
const instance = service["default"](options);
instance._context = vLoading._context;
el[INSTANCE_KEY] = {
options,
instance
};
};
const updateOptions = (originalOptions, newOptions) => {
for (const key of Object.keys(originalOptions)) {
if (vue.isRef(originalOptions[key]))
originalOptions[key].value = newOptions[key];
}
};
const vLoading = {
mounted(el, binding) {
if (binding.value) {
createInstance(el, binding);
}
},
updated(el, binding) {
const instance = el[INSTANCE_KEY];
if (!binding.value) {
instance == null ? void 0 : instance.instance.close();
el[INSTANCE_KEY] = null;
return;
}
if (!instance)
createInstance(el, binding);
else {
updateOptions(instance.options, shared.isObject(binding.value) ? binding.value : {
text: el.getAttribute(getAttributeName("text")),
svg: el.getAttribute(getAttributeName("svg")),
svgViewBox: el.getAttribute(getAttributeName("svgViewBox")),
spinner: el.getAttribute(getAttributeName("spinner")),
background: el.getAttribute(getAttributeName("background")),
customClass: el.getAttribute(getAttributeName("customClass"))
});
}
},
unmounted(el) {
var _a;
(_a = el[INSTANCE_KEY]) == null ? void 0 : _a.instance.close();
el[INSTANCE_KEY] = null;
}
};
vLoading._context = null;
exports["default"] = vLoading;
//# sourceMappingURL=directive.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,30 @@
import type { AppContext } from 'vue';
import type { LoadingOptionsResolved } from './types';
export declare function createLoadingComponent(options: LoadingOptionsResolved, appContext: AppContext | null): {
setText: (text: string) => void;
removeElLoadingChild: () => void;
close: () => void;
handleAfterLeave: () => void;
vm: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
$el: HTMLElement;
originalPosition: import("vue").Ref<string>;
originalOverflow: import("vue").Ref<string>;
visible: import("vue").Ref<boolean>;
parent: import("vue").Ref<import("./types").LoadingParentElement>;
background: import("vue").Ref<string>;
svg: import("vue").Ref<string>;
svgViewBox: import("vue").Ref<string>;
spinner: import("vue").Ref<string | boolean>;
text: import("vue").Ref<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>[]>;
fullscreen: import("vue").Ref<boolean>;
lock: import("vue").Ref<boolean>;
customClass: import("vue").Ref<string>;
target: import("vue").Ref<HTMLElement>;
beforeClose?: import("vue").Ref<(() => boolean) | undefined> | undefined;
closed?: import("vue").Ref<(() => void) | undefined> | undefined;
};
export type LoadingInstance = ReturnType<typeof createLoadingComponent>;

View File

@@ -0,0 +1,125 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var useGlobalConfig = require('../../config-provider/src/hooks/use-global-config.js');
var style = require('../../../utils/dom/style.js');
function createLoadingComponent(options, appContext) {
let afterLeaveTimer;
const afterLeaveFlag = vue.ref(false);
const data = vue.reactive({
...options,
originalPosition: "",
originalOverflow: "",
visible: false
});
function setText(text) {
data.text = text;
}
function destroySelf() {
const target = data.parent;
const ns = vm.ns;
if (!target.vLoadingAddClassList) {
let loadingNumber = target.getAttribute("loading-number");
loadingNumber = Number.parseInt(loadingNumber) - 1;
if (!loadingNumber) {
style.removeClass(target, ns.bm("parent", "relative"));
target.removeAttribute("loading-number");
} else {
target.setAttribute("loading-number", loadingNumber.toString());
}
style.removeClass(target, ns.bm("parent", "hidden"));
}
removeElLoadingChild();
loadingInstance.unmount();
}
function removeElLoadingChild() {
var _a, _b;
(_b = (_a = vm.$el) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.removeChild(vm.$el);
}
function close() {
var _a;
if (options.beforeClose && !options.beforeClose())
return;
afterLeaveFlag.value = true;
clearTimeout(afterLeaveTimer);
afterLeaveTimer = setTimeout(handleAfterLeave, 400);
data.visible = false;
(_a = options.closed) == null ? void 0 : _a.call(options);
}
function handleAfterLeave() {
if (!afterLeaveFlag.value)
return;
const target = data.parent;
afterLeaveFlag.value = false;
target.vLoadingAddClassList = void 0;
destroySelf();
}
const elLoadingComponent = vue.defineComponent({
name: "ElLoading",
setup(_, { expose }) {
const { ns, zIndex } = useGlobalConfig.useGlobalComponentSettings("loading");
expose({
ns,
zIndex
});
return () => {
const svg = data.spinner || data.svg;
const spinner = vue.h("svg", {
class: "circular",
viewBox: data.svgViewBox ? data.svgViewBox : "0 0 50 50",
...svg ? { innerHTML: svg } : {}
}, [
vue.h("circle", {
class: "path",
cx: "25",
cy: "25",
r: "20",
fill: "none"
})
]);
const spinnerText = data.text ? vue.h("p", { class: ns.b("text") }, [data.text]) : void 0;
return vue.h(vue.Transition, {
name: ns.b("fade"),
onAfterLeave: handleAfterLeave
}, {
default: vue.withCtx(() => [
vue.withDirectives(vue.createVNode("div", {
style: {
backgroundColor: data.background || ""
},
class: [
ns.b("mask"),
data.customClass,
data.fullscreen ? "is-fullscreen" : ""
]
}, [
vue.h("div", {
class: ns.b("spinner")
}, [spinner, spinnerText])
]), [[vue.vShow, data.visible]])
])
});
};
}
});
const loadingInstance = vue.createApp(elLoadingComponent);
Object.assign(loadingInstance._context, appContext != null ? appContext : {});
const vm = loadingInstance.mount(document.createElement("div"));
return {
...vue.toRefs(data),
setText,
removeElLoadingChild,
close,
handleAfterLeave,
vm,
get $el() {
return vm.$el;
}
};
}
exports.createLoadingComponent = createLoadingComponent;
//# sourceMappingURL=loading.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,8 @@
import type { LoadingInstance } from './loading';
import type { LoadingOptions } from './types';
import type { AppContext } from 'vue';
declare const Loading: {
(options?: LoadingOptions): LoadingInstance;
_context: AppContext | null;
};
export default Loading;

View File

@@ -0,0 +1,109 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var loading = require('./loading.js');
var core = require('@vueuse/core');
var shared = require('@vue/shared');
var style = require('../../../utils/dom/style.js');
let fullscreenInstance = void 0;
const Loading = function(options = {}) {
if (!core.isClient)
return void 0;
const resolved = resolveOptions(options);
if (resolved.fullscreen && fullscreenInstance) {
return fullscreenInstance;
}
const instance = loading.createLoadingComponent({
...resolved,
closed: () => {
var _a;
(_a = resolved.closed) == null ? void 0 : _a.call(resolved);
if (resolved.fullscreen)
fullscreenInstance = void 0;
}
}, Loading._context);
addStyle(resolved, resolved.parent, instance);
addClassList(resolved, resolved.parent, instance);
resolved.parent.vLoadingAddClassList = () => addClassList(resolved, resolved.parent, instance);
let loadingNumber = resolved.parent.getAttribute("loading-number");
if (!loadingNumber) {
loadingNumber = "1";
} else {
loadingNumber = `${Number.parseInt(loadingNumber) + 1}`;
}
resolved.parent.setAttribute("loading-number", loadingNumber);
resolved.parent.appendChild(instance.$el);
vue.nextTick(() => instance.visible.value = resolved.visible);
if (resolved.fullscreen) {
fullscreenInstance = instance;
}
return instance;
};
const resolveOptions = (options) => {
var _a, _b, _c, _d;
let target;
if (shared.isString(options.target)) {
target = (_a = document.querySelector(options.target)) != null ? _a : document.body;
} else {
target = options.target || document.body;
}
return {
parent: target === document.body || options.body ? document.body : target,
background: options.background || "",
svg: options.svg || "",
svgViewBox: options.svgViewBox || "",
spinner: options.spinner || false,
text: options.text || "",
fullscreen: target === document.body && ((_b = options.fullscreen) != null ? _b : true),
lock: (_c = options.lock) != null ? _c : false,
customClass: options.customClass || "",
visible: (_d = options.visible) != null ? _d : true,
beforeClose: options.beforeClose,
closed: options.closed,
target
};
};
const addStyle = async (options, parent, instance) => {
const { nextZIndex } = instance.vm.zIndex || instance.vm._.exposed.zIndex;
const maskStyle = {};
if (options.fullscreen) {
instance.originalPosition.value = style.getStyle(document.body, "position");
instance.originalOverflow.value = style.getStyle(document.body, "overflow");
maskStyle.zIndex = nextZIndex();
} else if (options.parent === document.body) {
instance.originalPosition.value = style.getStyle(document.body, "position");
await vue.nextTick();
for (const property of ["top", "left"]) {
const scroll = property === "top" ? "scrollTop" : "scrollLeft";
maskStyle[property] = `${options.target.getBoundingClientRect()[property] + document.body[scroll] + document.documentElement[scroll] - Number.parseInt(style.getStyle(document.body, `margin-${property}`), 10)}px`;
}
for (const property of ["height", "width"]) {
maskStyle[property] = `${options.target.getBoundingClientRect()[property]}px`;
}
} else {
instance.originalPosition.value = style.getStyle(parent, "position");
}
for (const [key, value] of Object.entries(maskStyle)) {
instance.$el.style[key] = value;
}
};
const addClassList = (options, parent, instance) => {
const ns = instance.vm.ns || instance.vm._.exposed.ns;
if (!["absolute", "fixed", "sticky"].includes(instance.originalPosition.value)) {
style.addClass(parent, ns.bm("parent", "relative"));
} else {
style.removeClass(parent, ns.bm("parent", "relative"));
}
if (options.fullscreen && options.lock) {
style.addClass(parent, ns.bm("parent", "hidden"));
} else {
style.removeClass(parent, ns.bm("parent", "hidden"));
}
};
Loading._context = null;
exports["default"] = Loading;
//# sourceMappingURL=service.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,48 @@
import type { VNode } from 'vue';
import type { MaybeRef } from '@vueuse/core';
export type LoadingOptionsResolved = {
parent: LoadingParentElement;
/**
* @description background color of the mask
*/
background: MaybeRef<string>;
svg: MaybeRef<string>;
svgViewBox: MaybeRef<string>;
/**
* @description class name of the custom spinner
*/
spinner: MaybeRef<boolean | string>;
/**
* @description loading text that displays under the spinner
*/
text: MaybeRef<string | VNode | VNode[]>;
/**
* @description same as the `fullscreen` modifier of `v-loading`
*/
fullscreen: boolean;
/**
* @description same as the `lock` modifier of `v-loading`
*/
lock: boolean;
/**
* @description custom class name for Loading
*/
customClass: MaybeRef<string>;
visible: boolean;
target: HTMLElement;
beforeClose?: () => boolean;
closed?: () => void;
};
export type LoadingOptions = Partial<Omit<LoadingOptionsResolved, 'parent' | 'target'> & {
/**
* @description the DOM node Loading needs to cover. Accepts a DOM object or a string. If it's a string, it will be passed to `document.querySelector` to get the corresponding DOM node
*/
target: HTMLElement | string;
/**
* @description same as the `body` modifier of `v-loading`
*/
body: boolean;
}>;
export interface LoadingParentElement extends HTMLElement {
vLoadingAddClassList?: () => void;
}

View File

@@ -0,0 +1,3 @@
'use strict';
//# sourceMappingURL=types.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

View File

@@ -0,0 +1,2 @@
import 'element-plus/es/components/base/style/css';
import 'element-plus/theme-chalk/el-loading.css';

View File

@@ -0,0 +1,6 @@
'use strict';
require('../../base/style/css.js');
require('element-plus/theme-chalk/el-loading.css');
//# sourceMappingURL=css.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

View File

@@ -0,0 +1,2 @@
import 'element-plus/es/components/base/style';
import 'element-plus/theme-chalk/src/loading.scss';

View File

@@ -0,0 +1,6 @@
'use strict';
require('../../base/style/index.js');
require('element-plus/theme-chalk/src/loading.scss');
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}