前端初始化
This commit is contained in:
“hsc”
+6
@@ -0,0 +1,6 @@
|
||||
import { SFCInstallWithContext } from "../../utils/vue/typescript.js";
|
||||
import { NotificationEmits, NotificationExposed, NotificationHandle, NotificationInstance, NotificationOptions, NotificationOptionsTyped, NotificationParams, NotificationParamsTyped, NotificationPosition, NotificationProgress, NotificationProps, NotificationPropsPublic, NotificationQueue, NotificationQueueItem, NotificationType, Notify, NotifyFn, NotifyTypedFn, notificationEmits, notificationProps, notificationTypes } from "./src/notification.js";
|
||||
//#region ../../packages/components/notification/index.d.ts
|
||||
declare const ElNotification: SFCInstallWithContext<Notify>;
|
||||
//#endregion
|
||||
export { ElNotification, ElNotification as default, NotificationEmits, NotificationExposed, NotificationHandle, NotificationInstance, NotificationOptions, NotificationOptionsTyped, NotificationParams, NotificationParamsTyped, NotificationPosition, NotificationProgress, NotificationProps, NotificationPropsPublic, NotificationQueue, NotificationQueueItem, NotificationType, Notify, NotifyFn, NotifyTypedFn, notificationEmits, notificationProps, notificationTypes };
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
const require_install = require("../../utils/vue/install.js");
|
||||
const require_notification = require("./src/notification.js");
|
||||
const require_notify = require("./src/notify.js");
|
||||
//#region ../../packages/components/notification/index.ts
|
||||
const ElNotification = require_install.withInstallFunction(require_notify.default, "$notify");
|
||||
//#endregion
|
||||
exports.ElNotification = ElNotification;
|
||||
exports.default = ElNotification;
|
||||
exports.notificationEmits = require_notification.notificationEmits;
|
||||
exports.notificationProps = require_notification.notificationProps;
|
||||
exports.notificationTypes = require_notification.notificationTypes;
|
||||
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["withInstallFunction","Notify"],"sources":["../../../../../packages/components/notification/index.ts"],"sourcesContent":["import { withInstallFunction } from '@element-plus/utils'\nimport Notify from './src/notify'\n\nexport const ElNotification = withInstallFunction(Notify, '$notify')\nexport default ElNotification\n\nexport * from './src/notification'\n"],"mappings":";;;;;;;;AAGA,MAAa,iBAAiBA,gBAAAA,oBAAoBC,eAAAA,SAAQ,UAAU"}
|
||||
+185
@@ -0,0 +1,185 @@
|
||||
import { IconPropType } from "../../../utils/vue/icon.js";
|
||||
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
|
||||
import { ClassValue } from "../../../utils/typescript.js";
|
||||
import { ProgressProps } from "../../progress/src/progress.js";
|
||||
import _default from "./notification.vue.js";
|
||||
import * as _$vue from "vue";
|
||||
import { AppContext, ExtractPublicPropTypes, Ref, VNode } from "vue";
|
||||
|
||||
//#region ../../packages/components/notification/src/notification.d.ts
|
||||
declare const notificationTypes: readonly ["primary", "success", "info", "warning", "error"];
|
||||
type NotificationType = (typeof notificationTypes)[number] | '';
|
||||
type NotificationPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
|
||||
/**
|
||||
* Progress bar configuration. `percentage`, `type`, `duration`, `indeterminate`
|
||||
* and `width` are excluded: the bar is always a countdown-driven line.
|
||||
*/
|
||||
type NotificationProgress = Omit<Partial<ProgressProps>, 'percentage' | 'type' | 'duration' | 'indeterminate' | 'width'>;
|
||||
interface NotificationProps {
|
||||
/**
|
||||
* @description custom class name for Notification
|
||||
*/
|
||||
customClass?: ClassValue;
|
||||
/**
|
||||
* @description whether `message` is treated as HTML string
|
||||
*/
|
||||
dangerouslyUseHTMLString?: boolean;
|
||||
/**
|
||||
* @description duration before close. It will not automatically close if set 0
|
||||
*/
|
||||
duration?: number;
|
||||
/**
|
||||
* @description custom icon component. It will be overridden by `type`
|
||||
*/
|
||||
icon?: IconPropType;
|
||||
/**
|
||||
* @description notification dom id
|
||||
*/
|
||||
id?: string;
|
||||
/**
|
||||
* @description description text
|
||||
*/
|
||||
message?: string | VNode | (() => VNode);
|
||||
/**
|
||||
* @description offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset
|
||||
*/
|
||||
offset?: number;
|
||||
/**
|
||||
* @description callback function when notification clicked
|
||||
*/
|
||||
onClick?: () => void;
|
||||
/**
|
||||
* @description callback function when closed
|
||||
*/
|
||||
onClose: () => void;
|
||||
/**
|
||||
* @description custom position
|
||||
*/
|
||||
position?: NotificationPosition;
|
||||
/**
|
||||
* @description whether to show a close button
|
||||
*/
|
||||
showClose?: boolean;
|
||||
/**
|
||||
* @description title
|
||||
*/
|
||||
title?: string;
|
||||
/**
|
||||
* @description notification type
|
||||
*/
|
||||
type?: NotificationType;
|
||||
/**
|
||||
* @description initial zIndex
|
||||
*/
|
||||
zIndex?: number;
|
||||
/**
|
||||
* @description custom close icon, default is Close
|
||||
*/
|
||||
closeIcon?: IconPropType;
|
||||
/**
|
||||
* @description progress bar indicating auto-close countdown. Set `true` to show a default progress bar, or pass an object to customize it (options of `ElProgress`)
|
||||
*/
|
||||
progress?: boolean | NotificationProgress;
|
||||
/**
|
||||
* @description whether to pause the timer when hovering over the notification
|
||||
*/
|
||||
pauseOnHover?: boolean;
|
||||
}
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `NotificationProps` instead.
|
||||
*/
|
||||
declare const notificationProps: {
|
||||
readonly customClass: EpPropFinalized<(new (...args: any[]) => string | false | Record<string, any> | ClassValue[]) | (() => ClassValue) | (((new (...args: any[]) => string | false | Record<string, any> | ClassValue[]) | (() => ClassValue)) | null)[], unknown, unknown, "", boolean>;
|
||||
readonly dangerouslyUseHTMLString: BooleanConstructor;
|
||||
readonly duration: EpPropFinalized<NumberConstructor, unknown, unknown, 4500, boolean>;
|
||||
readonly icon: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => (string | _$vue.Component) & {}) | (() => string | _$vue.Component) | (((new (...args: any[]) => (string | _$vue.Component) & {}) | (() => string | _$vue.Component)) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly id: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
|
||||
readonly message: EpPropFinalized<(new (...args: any[]) => string | VNode<_$vue.RendererNode, _$vue.RendererElement, {
|
||||
[key: string]: any;
|
||||
}> | (() => VNode)) | (() => string | VNode<_$vue.RendererNode, _$vue.RendererElement, {
|
||||
[key: string]: any;
|
||||
}> | (() => VNode)) | (((new (...args: any[]) => string | VNode<_$vue.RendererNode, _$vue.RendererElement, {
|
||||
[key: string]: any;
|
||||
}> | (() => VNode)) | (() => string | VNode<_$vue.RendererNode, _$vue.RendererElement, {
|
||||
[key: string]: any;
|
||||
}> | (() => VNode))) | null)[], unknown, unknown, "", boolean>;
|
||||
readonly offset: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
|
||||
readonly onClick: EpPropFinalized<(new (...args: any[]) => () => void) | (() => () => void) | {
|
||||
(): () => void;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
} | (((new (...args: any[]) => () => void) | (() => () => void) | {
|
||||
(): () => void;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
}) | null)[], unknown, unknown, () => undefined, boolean>;
|
||||
readonly onClose: {
|
||||
readonly type: _$vue.PropType<() => void>;
|
||||
readonly required: true;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly position: EpPropFinalized<StringConstructor, "top-left" | "top-right" | "bottom-left" | "bottom-right", unknown, "top-right", boolean>;
|
||||
readonly showClose: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly title: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
|
||||
readonly type: EpPropFinalized<StringConstructor, "" | "primary" | "success" | "info" | "warning" | "error", unknown, "", boolean>;
|
||||
readonly zIndex: NumberConstructor;
|
||||
readonly closeIcon: EpPropFinalized<(new (...args: any[]) => (string | _$vue.Component) & {}) | (() => string | _$vue.Component) | (((new (...args: any[]) => (string | _$vue.Component) & {}) | (() => string | _$vue.Component)) | null)[], unknown, unknown, _$vue.DefineComponent<{}, void, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>, boolean>;
|
||||
readonly progress: EpPropFinalized<(new (...args: any[]) => boolean | NotificationProgress) | (() => boolean | NotificationProgress) | (((new (...args: any[]) => boolean | NotificationProgress) | (() => boolean | NotificationProgress)) | null)[], unknown, unknown, false, boolean>;
|
||||
readonly pauseOnHover: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
};
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `NotificationProps` instead.
|
||||
*/
|
||||
type NotificationPropsPublic = ExtractPublicPropTypes<typeof notificationProps>;
|
||||
declare const notificationEmits: {
|
||||
destroy: () => boolean;
|
||||
};
|
||||
type NotificationEmits = typeof notificationEmits;
|
||||
type NotificationInstance = InstanceType<typeof _default> & unknown;
|
||||
interface NotificationExposed {
|
||||
/** @description close notification */
|
||||
close: () => void;
|
||||
visible: Ref<boolean>;
|
||||
}
|
||||
type NotificationOptions = Omit<NotificationProps, 'id' | 'onClose'> & {
|
||||
/**
|
||||
* @description set the root element for the notification, default to `document.body`
|
||||
*/
|
||||
appendTo?: HTMLElement | string;
|
||||
/**
|
||||
* @description callback function when closed
|
||||
*/
|
||||
onClose?(vm: VNode): void;
|
||||
};
|
||||
type NotificationOptionsTyped = Omit<NotificationOptions, 'type'>;
|
||||
interface NotificationHandle {
|
||||
close: () => void;
|
||||
}
|
||||
type NotificationParams = Partial<NotificationOptions> | string | VNode;
|
||||
type NotificationParamsTyped = Partial<NotificationOptionsTyped> | string | VNode;
|
||||
interface NotifyFn {
|
||||
(options?: NotificationParams, appContext?: null | AppContext): NotificationHandle;
|
||||
closeAll(): void;
|
||||
updateOffsets(position?: NotificationOptions['position']): void;
|
||||
_context: AppContext | null;
|
||||
}
|
||||
type NotifyTypedFn = (options?: NotificationParamsTyped, appContext?: null | AppContext) => NotificationHandle;
|
||||
interface Notify extends NotifyFn {
|
||||
primary: NotifyTypedFn;
|
||||
success: NotifyTypedFn;
|
||||
warning: NotifyTypedFn;
|
||||
error: NotifyTypedFn;
|
||||
info: NotifyTypedFn;
|
||||
}
|
||||
interface NotificationQueueItem {
|
||||
vm: VNode;
|
||||
}
|
||||
type NotificationQueue = NotificationQueueItem[];
|
||||
//#endregion
|
||||
export { NotificationEmits, NotificationExposed, NotificationHandle, NotificationInstance, NotificationOptions, NotificationOptionsTyped, NotificationParams, NotificationParamsTyped, NotificationPosition, NotificationProgress, NotificationProps, NotificationPropsPublic, NotificationQueue, NotificationQueueItem, NotificationType, Notify, NotifyFn, NotifyTypedFn, notificationEmits, notificationProps, notificationTypes };
|
||||
+151
@@ -0,0 +1,151 @@
|
||||
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
||||
require("../../../_virtual/_rolldown/runtime.js");
|
||||
const require_runtime$1 = require("../../../utils/vue/props/runtime.js");
|
||||
const require_icon = require("../../../utils/vue/icon.js");
|
||||
let _element_plus_icons_vue = require("@element-plus/icons-vue");
|
||||
//#region ../../packages/components/notification/src/notification.ts
|
||||
const notificationTypes = [
|
||||
"primary",
|
||||
"success",
|
||||
"info",
|
||||
"warning",
|
||||
"error"
|
||||
];
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `NotificationProps` instead.
|
||||
*/
|
||||
const notificationProps = require_runtime$1.buildProps({
|
||||
/**
|
||||
* @description custom class name for Notification
|
||||
*/
|
||||
customClass: {
|
||||
type: require_runtime$1.definePropType([
|
||||
String,
|
||||
Array,
|
||||
Object,
|
||||
Boolean
|
||||
]),
|
||||
default: ""
|
||||
},
|
||||
/**
|
||||
* @description whether `message` is treated as HTML string
|
||||
*/
|
||||
dangerouslyUseHTMLString: Boolean,
|
||||
/**
|
||||
* @description duration before close. It will not automatically close if set 0
|
||||
*/
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 4500
|
||||
},
|
||||
/**
|
||||
* @description custom icon component. It will be overridden by `type`
|
||||
*/
|
||||
icon: { type: require_icon.iconPropType },
|
||||
/**
|
||||
* @description notification dom id
|
||||
*/
|
||||
id: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
/**
|
||||
* @description description text
|
||||
*/
|
||||
message: {
|
||||
type: require_runtime$1.definePropType([
|
||||
String,
|
||||
Object,
|
||||
Function
|
||||
]),
|
||||
default: ""
|
||||
},
|
||||
/**
|
||||
* @description offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset
|
||||
*/
|
||||
offset: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
/**
|
||||
* @description callback function when notification clicked
|
||||
*/
|
||||
onClick: {
|
||||
type: require_runtime$1.definePropType(Function),
|
||||
default: () => void 0
|
||||
},
|
||||
/**
|
||||
* @description callback function when closed
|
||||
*/
|
||||
onClose: {
|
||||
type: require_runtime$1.definePropType(Function),
|
||||
required: true
|
||||
},
|
||||
/**
|
||||
* @description custom position
|
||||
*/
|
||||
position: {
|
||||
type: String,
|
||||
values: [
|
||||
"top-right",
|
||||
"top-left",
|
||||
"bottom-right",
|
||||
"bottom-left"
|
||||
],
|
||||
default: "top-right"
|
||||
},
|
||||
/**
|
||||
* @description whether to show a close button
|
||||
*/
|
||||
showClose: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
/**
|
||||
* @description title
|
||||
*/
|
||||
title: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
/**
|
||||
* @description notification type
|
||||
*/
|
||||
type: {
|
||||
type: String,
|
||||
values: [...notificationTypes, ""],
|
||||
default: ""
|
||||
},
|
||||
/**
|
||||
* @description initial zIndex
|
||||
*/
|
||||
zIndex: Number,
|
||||
/**
|
||||
* @description custom close icon, default is Close
|
||||
*/
|
||||
closeIcon: {
|
||||
type: require_icon.iconPropType,
|
||||
default: _element_plus_icons_vue.Close
|
||||
},
|
||||
/**
|
||||
* @description progress bar indicating auto-close countdown. Set `true` to show a default progress bar, or pass an object to customize it (options of `ElProgress`)
|
||||
*/
|
||||
progress: {
|
||||
type: require_runtime$1.definePropType([Boolean, Object]),
|
||||
default: false
|
||||
},
|
||||
/**
|
||||
* @description whether to pause the timer when hovering over the notification
|
||||
*/
|
||||
pauseOnHover: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
});
|
||||
const notificationEmits = { destroy: () => true };
|
||||
//#endregion
|
||||
exports.notificationEmits = notificationEmits;
|
||||
exports.notificationProps = notificationProps;
|
||||
exports.notificationTypes = notificationTypes;
|
||||
|
||||
//# sourceMappingURL=notification.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+42
@@ -0,0 +1,42 @@
|
||||
import { IconPropType } from "../../../utils/vue/icon.js";
|
||||
import { ClassValue } from "../../../utils/typescript.js";
|
||||
import { NotificationPosition, NotificationProgress, NotificationProps, NotificationType } from "./notification.js";
|
||||
import * as _$vue from "vue";
|
||||
|
||||
//#region ../../packages/components/notification/src/notification.vue.d.ts
|
||||
declare function close(): void;
|
||||
declare var __VLS_21: {};
|
||||
type __VLS_Slots = {} & {
|
||||
default?: (props: typeof __VLS_21) => any;
|
||||
};
|
||||
declare const __VLS_base: _$vue.DefineComponent<NotificationProps, {
|
||||
visible: _$vue.Ref<boolean, boolean>; /** @description close notification */
|
||||
close: typeof close;
|
||||
}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
|
||||
destroy: () => void;
|
||||
}, string, _$vue.PublicProps, Readonly<NotificationProps> & Readonly<{
|
||||
onDestroy?: (() => any) | undefined;
|
||||
}>, {
|
||||
type: NotificationType;
|
||||
id: string;
|
||||
offset: number;
|
||||
progress: boolean | NotificationProgress;
|
||||
onClick: () => void;
|
||||
title: string;
|
||||
position: NotificationPosition;
|
||||
message: string | _$vue.VNode | (() => _$vue.VNode);
|
||||
duration: number;
|
||||
showClose: boolean;
|
||||
closeIcon: IconPropType;
|
||||
pauseOnHover: boolean;
|
||||
customClass: string | false | Record<string, any> | ClassValue[] | null;
|
||||
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
||||
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
type __VLS_WithSlots<T, S> = T & {
|
||||
new (): {
|
||||
$slots: S;
|
||||
};
|
||||
};
|
||||
//#endregion
|
||||
export { _default as default };
|
||||
Generated
Vendored
+185
@@ -0,0 +1,185 @@
|
||||
require("../../../_virtual/_rolldown/runtime.js");
|
||||
const require_aria = require("../../../constants/aria.js");
|
||||
const require_event = require("../../../utils/dom/event.js");
|
||||
const require_icon = require("../../../utils/vue/icon.js");
|
||||
const require_index = require("../../icon/index.js");
|
||||
const require_use_global_config = require("../../config-provider/src/hooks/use-global-config.js");
|
||||
const require_index$1 = require("../../progress/index.js");
|
||||
const require_notification = require("./notification.js");
|
||||
let _vueuse_core = require("@vueuse/core");
|
||||
let vue = require("vue");
|
||||
//#region ../../packages/components/notification/src/notification.vue?vue&type=script&setup=true&lang.ts
|
||||
const _hoisted_1 = ["id"];
|
||||
const _hoisted_2 = ["textContent"];
|
||||
const _hoisted_3 = { key: 0 };
|
||||
const _hoisted_4 = ["innerHTML"];
|
||||
var notification_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
||||
name: "ElNotification",
|
||||
__name: "notification",
|
||||
props: require_notification.notificationProps,
|
||||
emits: require_notification.notificationEmits,
|
||||
setup(__props, { expose: __expose }) {
|
||||
const props = __props;
|
||||
const { ns, zIndex } = require_use_global_config.useGlobalComponentSettings("notification");
|
||||
const { nextZIndex, currentZIndex } = zIndex;
|
||||
const visible = (0, vue.ref)(false);
|
||||
let timer = void 0;
|
||||
const percentage = (0, vue.ref)(100);
|
||||
let elapsed = 0;
|
||||
let startedAt = 0;
|
||||
const typeClass = (0, vue.computed)(() => {
|
||||
const type = props.type;
|
||||
return type && require_icon.TypeComponentsMap[props.type] ? ns.m(type) : "";
|
||||
});
|
||||
const showProgressBar = (0, vue.computed)(() => !!props.progress && props.duration > 0);
|
||||
const progressStatus = (0, vue.computed)(() => {
|
||||
switch (props.type) {
|
||||
case "success": return "success";
|
||||
case "warning": return "warning";
|
||||
case "error": return "exception";
|
||||
default: return;
|
||||
}
|
||||
});
|
||||
const progressProps = (0, vue.computed)(() => ({
|
||||
status: progressStatus.value,
|
||||
strokeWidth: 3,
|
||||
showText: false,
|
||||
...typeof props.progress === "object" ? props.progress : void 0
|
||||
}));
|
||||
const iconComponent = (0, vue.computed)(() => {
|
||||
if (!props.type) return props.icon;
|
||||
return require_icon.TypeComponentsMap[props.type] || props.icon;
|
||||
});
|
||||
const horizontalClass = (0, vue.computed)(() => props.position.endsWith("right") ? "right" : "left");
|
||||
const verticalProperty = (0, vue.computed)(() => props.position.startsWith("top") ? "top" : "bottom");
|
||||
const positionStyle = (0, vue.computed)(() => {
|
||||
return {
|
||||
[verticalProperty.value]: `${props.offset}px`,
|
||||
zIndex: props.zIndex ?? currentZIndex.value
|
||||
};
|
||||
});
|
||||
const { pause: pauseProgress, resume: resumeProgress } = (0, _vueuse_core.useIntervalFn)(() => {
|
||||
percentage.value = Math.max(0, 100 - (elapsed + Date.now() - startedAt) / props.duration * 100);
|
||||
}, 100, { immediate: false });
|
||||
function startTimer() {
|
||||
if (props.duration <= 0) return;
|
||||
timer?.();
|
||||
pauseProgress();
|
||||
startedAt = Date.now();
|
||||
const remaining = Math.max(0, props.duration - elapsed);
|
||||
({stop: timer} = (0, _vueuse_core.useTimeoutFn)(() => {
|
||||
if (visible.value) close();
|
||||
}, remaining));
|
||||
if (showProgressBar.value) {
|
||||
percentage.value = remaining / props.duration * 100;
|
||||
resumeProgress();
|
||||
}
|
||||
}
|
||||
function clearTimer() {
|
||||
timer?.();
|
||||
pauseProgress();
|
||||
if (startedAt > 0) {
|
||||
elapsed += Date.now() - startedAt;
|
||||
startedAt = 0;
|
||||
}
|
||||
}
|
||||
let isHovered = false;
|
||||
function onMouseEnter() {
|
||||
isHovered = true;
|
||||
if (props.pauseOnHover) clearTimer();
|
||||
}
|
||||
function onMouseLeave() {
|
||||
isHovered = false;
|
||||
if (props.pauseOnHover) startTimer();
|
||||
}
|
||||
function close() {
|
||||
visible.value = false;
|
||||
clearTimer();
|
||||
}
|
||||
function onKeydown(event) {
|
||||
switch (require_event.getEventCode(event)) {
|
||||
case require_aria.EVENT_CODE.delete:
|
||||
case require_aria.EVENT_CODE.backspace:
|
||||
clearTimer();
|
||||
break;
|
||||
case require_aria.EVENT_CODE.esc:
|
||||
if (visible.value) close();
|
||||
break;
|
||||
default:
|
||||
if (isHovered && props.pauseOnHover) break;
|
||||
clearTimer();
|
||||
startTimer();
|
||||
break;
|
||||
}
|
||||
}
|
||||
(0, vue.onMounted)(() => {
|
||||
startTimer();
|
||||
nextZIndex();
|
||||
visible.value = true;
|
||||
});
|
||||
(0, _vueuse_core.useEventListener)(document, "keydown", onKeydown);
|
||||
__expose({
|
||||
visible,
|
||||
/** @description close notification */
|
||||
close
|
||||
});
|
||||
return (_ctx, _cache) => {
|
||||
return (0, vue.openBlock)(), (0, vue.createBlock)(vue.Transition, {
|
||||
name: (0, vue.unref)(ns).b("fade"),
|
||||
onBeforeLeave: __props.onClose,
|
||||
onAfterLeave: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("destroy")),
|
||||
persisted: ""
|
||||
}, {
|
||||
default: (0, vue.withCtx)(() => [(0, vue.withDirectives)((0, vue.createElementVNode)("div", {
|
||||
id: __props.id,
|
||||
class: (0, vue.normalizeClass)([
|
||||
(0, vue.unref)(ns).b(),
|
||||
__props.customClass,
|
||||
horizontalClass.value
|
||||
]),
|
||||
style: (0, vue.normalizeStyle)(positionStyle.value),
|
||||
role: "alert",
|
||||
onMouseenter: onMouseEnter,
|
||||
onMouseleave: onMouseLeave,
|
||||
onClick: _cache[0] || (_cache[0] = (...args) => __props.onClick && __props.onClick(...args))
|
||||
}, [
|
||||
iconComponent.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index.ElIcon), {
|
||||
key: 0,
|
||||
class: (0, vue.normalizeClass)([(0, vue.unref)(ns).e("icon"), typeClass.value])
|
||||
}, {
|
||||
default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(iconComponent.value)))]),
|
||||
_: 1
|
||||
}, 8, ["class"])) : (0, vue.createCommentVNode)("v-if", true),
|
||||
(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("group")) }, [
|
||||
(0, vue.createElementVNode)("h2", {
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("title")),
|
||||
textContent: (0, vue.toDisplayString)(__props.title)
|
||||
}, null, 10, _hoisted_2),
|
||||
(0, vue.withDirectives)((0, vue.createElementVNode)("div", {
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("content")),
|
||||
style: (0, vue.normalizeStyle)(!!__props.title ? void 0 : { margin: 0 })
|
||||
}, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [!__props.dangerouslyUseHTMLString ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("p", _hoisted_3, (0, vue.toDisplayString)(__props.message), 1)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createCommentVNode)(" Caution here, message could've been compromised, never use user's input as message "), (0, vue.createElementVNode)("p", { innerHTML: __props.message }, null, 8, _hoisted_4)], 2112))])], 6), [[vue.vShow, __props.message]]),
|
||||
__props.showClose ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index.ElIcon), {
|
||||
key: 0,
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("closeBtn")),
|
||||
onClick: (0, vue.withModifiers)(close, ["stop"])
|
||||
}, {
|
||||
default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(__props.closeIcon)))]),
|
||||
_: 1
|
||||
}, 8, ["class"])) : (0, vue.createCommentVNode)("v-if", true)
|
||||
], 2),
|
||||
showProgressBar.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
||||
key: 1,
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("progress")),
|
||||
"aria-hidden": "true"
|
||||
}, [(0, vue.createVNode)((0, vue.unref)(require_index$1.ElProgress), (0, vue.mergeProps)(progressProps.value, { percentage: percentage.value }), null, 16, ["percentage"])], 2)) : (0, vue.createCommentVNode)("v-if", true)
|
||||
], 46, _hoisted_1), [[vue.vShow, visible.value]])]),
|
||||
_: 3
|
||||
}, 8, ["name", "onBeforeLeave"]);
|
||||
};
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
exports.default = notification_vue_vue_type_script_setup_true_lang_default;
|
||||
|
||||
//# sourceMappingURL=notification.vue_vue_type_script_setup_true_lang.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
+10
@@ -0,0 +1,10 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
//#region ../../packages/components/notification/src/notification.vue
|
||||
var notification_default = require("./notification.vue_vue_type_script_setup_true_lang.js").default;
|
||||
//#endregion
|
||||
exports.default = notification_default;
|
||||
|
||||
//# sourceMappingURL=notification2.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+18
@@ -0,0 +1,18 @@
|
||||
import { NotificationPosition, Notify } from "./notification.js";
|
||||
import { VNode } from "vue";
|
||||
|
||||
//#region ../../packages/components/notification/src/notify.d.ts
|
||||
/**
|
||||
* This function gets called when user click `x` button or press `esc` or the time reached its limitation.
|
||||
* Emitted by transition@before-leave event so that we can fetch the current notification.offsetHeight, if this was called
|
||||
* by @after-leave the DOM element will be removed from the page thus we can no longer fetch the offsetHeight.
|
||||
* @param {String} id notification id to be closed
|
||||
* @param {Position} position the positioning strategy
|
||||
* @param {Function} userOnClose the callback called when close passed by user
|
||||
*/
|
||||
declare function close(id: string, position: NotificationPosition, userOnClose?: (vm: VNode) => void): void;
|
||||
declare function closeAll(): void;
|
||||
declare function updateOffsets(position?: NotificationPosition): void;
|
||||
declare const _default: Notify;
|
||||
//#endregion
|
||||
export { close, closeAll, _default as default, updateOffsets };
|
||||
+117
@@ -0,0 +1,117 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
require("../../../_virtual/_rolldown/runtime.js");
|
||||
const require_types = require("../../../utils/types.js");
|
||||
const require_error = require("../../../utils/error.js");
|
||||
const require_notification = require("./notification.js");
|
||||
const require_notification$1 = require("./notification2.js");
|
||||
let vue = require("vue");
|
||||
let _vueuse_core = require("@vueuse/core");
|
||||
let _vue_shared = require("@vue/shared");
|
||||
//#region ../../packages/components/notification/src/notify.ts
|
||||
const notifications = {
|
||||
"top-left": [],
|
||||
"top-right": [],
|
||||
"bottom-left": [],
|
||||
"bottom-right": []
|
||||
};
|
||||
const GAP_SIZE = 16;
|
||||
let seed = 1;
|
||||
const notify = function(options = {}, context) {
|
||||
if (!_vueuse_core.isClient) return { close: () => void 0 };
|
||||
if ((0, _vue_shared.isString)(options) || (0, vue.isVNode)(options)) options = { message: options };
|
||||
const position = options.position || "top-right";
|
||||
let verticalOffset = options.offset || 0;
|
||||
notifications[position].forEach(({ vm }) => {
|
||||
verticalOffset += (vm.el?.offsetHeight || 0) + GAP_SIZE;
|
||||
});
|
||||
verticalOffset += GAP_SIZE;
|
||||
const id = `notification_${seed++}`;
|
||||
const userOnClose = options.onClose;
|
||||
const props = {
|
||||
...options,
|
||||
offset: verticalOffset,
|
||||
id,
|
||||
onClose: () => {
|
||||
close(id, position, userOnClose);
|
||||
}
|
||||
};
|
||||
let appendTo = document.body;
|
||||
if (require_types.isElement(options.appendTo)) appendTo = options.appendTo;
|
||||
else if ((0, _vue_shared.isString)(options.appendTo)) appendTo = document.querySelector(options.appendTo);
|
||||
if (!require_types.isElement(appendTo)) {
|
||||
require_error.debugWarn("ElNotification", "the appendTo option is not an HTMLElement. Falling back to document.body.");
|
||||
appendTo = document.body;
|
||||
}
|
||||
const container = document.createElement("div");
|
||||
const vm = (0, vue.createVNode)(require_notification$1.default, props, (0, _vue_shared.isFunction)(props.message) ? props.message : (0, vue.isVNode)(props.message) ? () => props.message : null);
|
||||
vm.appContext = require_types.isUndefined(context) ? notify._context : context;
|
||||
vm.props.onDestroy = () => {
|
||||
(0, vue.render)(null, container);
|
||||
};
|
||||
(0, vue.render)(vm, container);
|
||||
notifications[position].push({ vm });
|
||||
appendTo.appendChild(container.firstElementChild);
|
||||
return { close: () => {
|
||||
vm.component.exposed.close();
|
||||
} };
|
||||
};
|
||||
require_notification.notificationTypes.forEach((type) => {
|
||||
notify[type] = (options = {}, appContext) => {
|
||||
if ((0, _vue_shared.isString)(options) || (0, vue.isVNode)(options)) options = { message: options };
|
||||
return notify({
|
||||
...options,
|
||||
type
|
||||
}, appContext);
|
||||
};
|
||||
});
|
||||
/**
|
||||
* This function gets called when user click `x` button or press `esc` or the time reached its limitation.
|
||||
* Emitted by transition@before-leave event so that we can fetch the current notification.offsetHeight, if this was called
|
||||
* by @after-leave the DOM element will be removed from the page thus we can no longer fetch the offsetHeight.
|
||||
* @param {String} id notification id to be closed
|
||||
* @param {Position} position the positioning strategy
|
||||
* @param {Function} userOnClose the callback called when close passed by user
|
||||
*/
|
||||
function close(id, position, userOnClose) {
|
||||
const orientedNotifications = notifications[position];
|
||||
const idx = orientedNotifications.findIndex(({ vm }) => vm.component?.props.id === id);
|
||||
if (idx === -1) return;
|
||||
const { vm } = orientedNotifications[idx];
|
||||
if (!vm) return;
|
||||
userOnClose?.(vm);
|
||||
const removedHeight = vm.el.offsetHeight;
|
||||
const verticalPos = position.split("-")[0];
|
||||
orientedNotifications.splice(idx, 1);
|
||||
const len = orientedNotifications.length;
|
||||
if (len < 1) return;
|
||||
for (let i = idx; i < len; i++) {
|
||||
const { el, component } = orientedNotifications[i].vm;
|
||||
const pos = Number.parseInt(el.style[verticalPos], 10) - removedHeight - GAP_SIZE;
|
||||
component.props.offset = pos;
|
||||
}
|
||||
}
|
||||
function closeAll() {
|
||||
for (const orientedNotifications of Object.values(notifications)) orientedNotifications.forEach(({ vm }) => {
|
||||
vm.component.exposed.close();
|
||||
});
|
||||
}
|
||||
function updateOffsets(position = "top-right") {
|
||||
let verticalOffset = notifications[position][0]?.vm.component?.props?.offset || 0;
|
||||
for (const { vm } of notifications[position]) {
|
||||
vm.component.props.offset = verticalOffset;
|
||||
verticalOffset += (vm.el?.offsetHeight || 0) + GAP_SIZE;
|
||||
}
|
||||
}
|
||||
notify.closeAll = closeAll;
|
||||
notify.updateOffsets = updateOffsets;
|
||||
notify._context = null;
|
||||
//#endregion
|
||||
exports.close = close;
|
||||
exports.closeAll = closeAll;
|
||||
exports.default = notify;
|
||||
exports.updateOffsets = updateOffsets;
|
||||
|
||||
//# sourceMappingURL=notify.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+4
@@ -0,0 +1,4 @@
|
||||
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
||||
require("../../base/style/css.js");
|
||||
require("../../progress/style/css.js");
|
||||
require("element-plus/theme-chalk/el-notification.css");
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
||||
require("../../base/style/index.js");
|
||||
require("../../progress/style/index.js");
|
||||
require("element-plus/theme-chalk/src/notification.scss");
|
||||
Reference in New Issue
Block a user