前端初始化
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 };
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
import { withInstallFunction } from "../../utils/vue/install.mjs";
|
||||
import { notificationEmits, notificationProps, notificationTypes } from "./src/notification.mjs";
|
||||
import notify from "./src/notify.mjs";
|
||||
//#region ../../packages/components/notification/index.ts
|
||||
const ElNotification = withInstallFunction(notify, "$notify");
|
||||
//#endregion
|
||||
export { ElNotification, ElNotification as default, notificationEmits, notificationProps, notificationTypes };
|
||||
|
||||
//# sourceMappingURL=index.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.mjs","names":["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,iBAAiB,oBAAoBA,QAAQ,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 };
|
||||
+147
@@ -0,0 +1,147 @@
|
||||
import { buildProps, definePropType } from "../../../utils/vue/props/runtime.mjs";
|
||||
import { iconPropType } from "../../../utils/vue/icon.mjs";
|
||||
import { Close } from "@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 = buildProps({
|
||||
/**
|
||||
* @description custom class name for Notification
|
||||
*/
|
||||
customClass: {
|
||||
type: 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: iconPropType },
|
||||
/**
|
||||
* @description notification dom id
|
||||
*/
|
||||
id: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
/**
|
||||
* @description description text
|
||||
*/
|
||||
message: {
|
||||
type: 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: definePropType(Function),
|
||||
default: () => void 0
|
||||
},
|
||||
/**
|
||||
* @description callback function when closed
|
||||
*/
|
||||
onClose: {
|
||||
type: 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: iconPropType,
|
||||
default: 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: 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
|
||||
export { notificationEmits, notificationProps, notificationTypes };
|
||||
|
||||
//# sourceMappingURL=notification.mjs.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
+184
@@ -0,0 +1,184 @@
|
||||
import { EVENT_CODE } from "../../../constants/aria.mjs";
|
||||
import { getEventCode } from "../../../utils/dom/event.mjs";
|
||||
import { TypeComponentsMap } from "../../../utils/vue/icon.mjs";
|
||||
import { ElIcon } from "../../icon/index.mjs";
|
||||
import { useGlobalComponentSettings } from "../../config-provider/src/hooks/use-global-config.mjs";
|
||||
import { ElProgress } from "../../progress/index.mjs";
|
||||
import { notificationEmits, notificationProps } from "./notification.mjs";
|
||||
import { useEventListener, useIntervalFn, useTimeoutFn } from "@vueuse/core";
|
||||
import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, vShow, withCtx, withDirectives, withModifiers } from "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__ */ defineComponent({
|
||||
name: "ElNotification",
|
||||
__name: "notification",
|
||||
props: notificationProps,
|
||||
emits: notificationEmits,
|
||||
setup(__props, { expose: __expose }) {
|
||||
const props = __props;
|
||||
const { ns, zIndex } = useGlobalComponentSettings("notification");
|
||||
const { nextZIndex, currentZIndex } = zIndex;
|
||||
const visible = ref(false);
|
||||
let timer = void 0;
|
||||
const percentage = ref(100);
|
||||
let elapsed = 0;
|
||||
let startedAt = 0;
|
||||
const typeClass = computed(() => {
|
||||
const type = props.type;
|
||||
return type && TypeComponentsMap[props.type] ? ns.m(type) : "";
|
||||
});
|
||||
const showProgressBar = computed(() => !!props.progress && props.duration > 0);
|
||||
const progressStatus = computed(() => {
|
||||
switch (props.type) {
|
||||
case "success": return "success";
|
||||
case "warning": return "warning";
|
||||
case "error": return "exception";
|
||||
default: return;
|
||||
}
|
||||
});
|
||||
const progressProps = computed(() => ({
|
||||
status: progressStatus.value,
|
||||
strokeWidth: 3,
|
||||
showText: false,
|
||||
...typeof props.progress === "object" ? props.progress : void 0
|
||||
}));
|
||||
const iconComponent = computed(() => {
|
||||
if (!props.type) return props.icon;
|
||||
return TypeComponentsMap[props.type] || props.icon;
|
||||
});
|
||||
const horizontalClass = computed(() => props.position.endsWith("right") ? "right" : "left");
|
||||
const verticalProperty = computed(() => props.position.startsWith("top") ? "top" : "bottom");
|
||||
const positionStyle = computed(() => {
|
||||
return {
|
||||
[verticalProperty.value]: `${props.offset}px`,
|
||||
zIndex: props.zIndex ?? currentZIndex.value
|
||||
};
|
||||
});
|
||||
const { pause: pauseProgress, resume: resumeProgress } = 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} = 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 (getEventCode(event)) {
|
||||
case EVENT_CODE.delete:
|
||||
case EVENT_CODE.backspace:
|
||||
clearTimer();
|
||||
break;
|
||||
case EVENT_CODE.esc:
|
||||
if (visible.value) close();
|
||||
break;
|
||||
default:
|
||||
if (isHovered && props.pauseOnHover) break;
|
||||
clearTimer();
|
||||
startTimer();
|
||||
break;
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
startTimer();
|
||||
nextZIndex();
|
||||
visible.value = true;
|
||||
});
|
||||
useEventListener(document, "keydown", onKeydown);
|
||||
__expose({
|
||||
visible,
|
||||
/** @description close notification */
|
||||
close
|
||||
});
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createBlock(Transition, {
|
||||
name: unref(ns).b("fade"),
|
||||
onBeforeLeave: __props.onClose,
|
||||
onAfterLeave: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("destroy")),
|
||||
persisted: ""
|
||||
}, {
|
||||
default: withCtx(() => [withDirectives(createElementVNode("div", {
|
||||
id: __props.id,
|
||||
class: normalizeClass([
|
||||
unref(ns).b(),
|
||||
__props.customClass,
|
||||
horizontalClass.value
|
||||
]),
|
||||
style: normalizeStyle(positionStyle.value),
|
||||
role: "alert",
|
||||
onMouseenter: onMouseEnter,
|
||||
onMouseleave: onMouseLeave,
|
||||
onClick: _cache[0] || (_cache[0] = (...args) => __props.onClick && __props.onClick(...args))
|
||||
}, [
|
||||
iconComponent.value ? (openBlock(), createBlock(unref(ElIcon), {
|
||||
key: 0,
|
||||
class: normalizeClass([unref(ns).e("icon"), typeClass.value])
|
||||
}, {
|
||||
default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(iconComponent.value)))]),
|
||||
_: 1
|
||||
}, 8, ["class"])) : createCommentVNode("v-if", true),
|
||||
createElementVNode("div", { class: normalizeClass(unref(ns).e("group")) }, [
|
||||
createElementVNode("h2", {
|
||||
class: normalizeClass(unref(ns).e("title")),
|
||||
textContent: toDisplayString(__props.title)
|
||||
}, null, 10, _hoisted_2),
|
||||
withDirectives(createElementVNode("div", {
|
||||
class: normalizeClass(unref(ns).e("content")),
|
||||
style: normalizeStyle(!!__props.title ? void 0 : { margin: 0 })
|
||||
}, [renderSlot(_ctx.$slots, "default", {}, () => [!__props.dangerouslyUseHTMLString ? (openBlock(), createElementBlock("p", _hoisted_3, toDisplayString(__props.message), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createCommentVNode(" Caution here, message could've been compromised, never use user's input as message "), createElementVNode("p", { innerHTML: __props.message }, null, 8, _hoisted_4)], 2112))])], 6), [[vShow, __props.message]]),
|
||||
__props.showClose ? (openBlock(), createBlock(unref(ElIcon), {
|
||||
key: 0,
|
||||
class: normalizeClass(unref(ns).e("closeBtn")),
|
||||
onClick: withModifiers(close, ["stop"])
|
||||
}, {
|
||||
default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(__props.closeIcon)))]),
|
||||
_: 1
|
||||
}, 8, ["class"])) : createCommentVNode("v-if", true)
|
||||
], 2),
|
||||
showProgressBar.value ? (openBlock(), createElementBlock("div", {
|
||||
key: 1,
|
||||
class: normalizeClass(unref(ns).e("progress")),
|
||||
"aria-hidden": "true"
|
||||
}, [createVNode(unref(ElProgress), mergeProps(progressProps.value, { percentage: percentage.value }), null, 16, ["percentage"])], 2)) : createCommentVNode("v-if", true)
|
||||
], 46, _hoisted_1), [[vShow, visible.value]])]),
|
||||
_: 3
|
||||
}, 8, ["name", "onBeforeLeave"]);
|
||||
};
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
export { notification_vue_vue_type_script_setup_true_lang_default as default };
|
||||
|
||||
//# sourceMappingURL=notification.vue_vue_type_script_setup_true_lang.mjs.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
+7
@@ -0,0 +1,7 @@
|
||||
import notification_vue_vue_type_script_setup_true_lang_default from "./notification.vue_vue_type_script_setup_true_lang.mjs";
|
||||
//#region ../../packages/components/notification/src/notification.vue
|
||||
var notification_default = notification_vue_vue_type_script_setup_true_lang_default;
|
||||
//#endregion
|
||||
export { notification_default as default };
|
||||
|
||||
//# sourceMappingURL=notification2.mjs.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 };
|
||||
+108
@@ -0,0 +1,108 @@
|
||||
import { isClient } from "../../../utils/browser.mjs";
|
||||
import { isElement, isFunction, isString, isUndefined } from "../../../utils/types.mjs";
|
||||
import { debugWarn } from "../../../utils/error.mjs";
|
||||
import { notificationTypes } from "./notification.mjs";
|
||||
import notification_default from "./notification2.mjs";
|
||||
import { createVNode, isVNode, render } from "vue";
|
||||
//#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 (!isClient) return { close: () => void 0 };
|
||||
if (isString(options) || 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 (isElement(options.appendTo)) appendTo = options.appendTo;
|
||||
else if (isString(options.appendTo)) appendTo = document.querySelector(options.appendTo);
|
||||
if (!isElement(appendTo)) {
|
||||
debugWarn("ElNotification", "the appendTo option is not an HTMLElement. Falling back to document.body.");
|
||||
appendTo = document.body;
|
||||
}
|
||||
const container = document.createElement("div");
|
||||
const vm = createVNode(notification_default, props, isFunction(props.message) ? props.message : isVNode(props.message) ? () => props.message : null);
|
||||
vm.appContext = isUndefined(context) ? notify._context : context;
|
||||
vm.props.onDestroy = () => {
|
||||
render(null, container);
|
||||
};
|
||||
render(vm, container);
|
||||
notifications[position].push({ vm });
|
||||
appendTo.appendChild(container.firstElementChild);
|
||||
return { close: () => {
|
||||
vm.component.exposed.close();
|
||||
} };
|
||||
};
|
||||
notificationTypes.forEach((type) => {
|
||||
notify[type] = (options = {}, appContext) => {
|
||||
if (isString(options) || 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
|
||||
export { close, closeAll, notify as default, updateOffsets };
|
||||
|
||||
//# sourceMappingURL=notify.mjs.map
|
||||
+1
File diff suppressed because one or more lines are too long
+3
@@ -0,0 +1,3 @@
|
||||
import "../../base/style/css.mjs";
|
||||
import "../../progress/style/css.mjs";
|
||||
import "element-plus/theme-chalk/el-notification.css";
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
import "../../base/style/index.mjs";
|
||||
import "../../progress/style/index.mjs";
|
||||
import "element-plus/theme-chalk/src/notification.scss";
|
||||
Reference in New Issue
Block a user