sard 1.0.0 → 1.0.2

package/components/navbar-pit/index.css

@@ -0,0 +1 @@
+.s-navbar-pit__content{height:var(--s-navbar-height)}

package/components/navbar-pit/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _NavbarPit from './navbar-pit.vue';
+export declare const NavbarPit: EnhancedComponent<typeof _NavbarPit>;
+export default NavbarPit;
+export type { NavbarPitProps } from './common';

package/components/navbar-pit/index.js

@@ -0,0 +1,6 @@
+import { enhanceComponent } from "../../utils/component.js";
+import navbar_pit_default from "./navbar-pit.js";
+//#region packages/sard/components/navbar-pit/index.ts
+const NavbarPit = enhanceComponent(navbar_pit_default);
+//#endregion
+export { NavbarPit, NavbarPit as default };

package/components/navbar-pit/navbar-pit.d.ts

@@ -0,0 +1,4 @@
+import { type NavbarPitProps } from './common';
+declare const __VLS_export: import("vue").DefineComponent<NavbarPitProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavbarPitProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/components/navbar-pit/navbar-pit.js

@@ -0,0 +1,19 @@
+import { createBem } from "../../utils/bem.js";
+import status_bar_default from "../status-bar/status-bar.js";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, unref } from "vue";
+//#region packages/sard/components/navbar-pit/navbar-pit.vue
+var navbar_pit_default = /*@__PURE__*/ defineComponent({
+	__name: "navbar-pit",
+	props: { statusBar: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const bem = createBem("navbar-pit");
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(bem).b()) }, [__props.statusBar ? (openBlock(), createBlock(status_bar_default, { key: 0 })) : createCommentVNode("v-if", true), createElementVNode("div", { class: normalizeClass(unref(bem).e("content")) }, null, 2)], 2);
+		};
+	}
+});
+//#endregion
+export { navbar_pit_default as default };

package/components/notice-bar/common.d.ts

@@ -0,0 +1,25 @@
+import { type DefaultProps } from '../config';
+export interface NoticeBarProps {
+    color?: string;
+    background?: string;
+    hideLeftIcon?: boolean;
+    speed?: number;
+    scrollable?: 'auto' | 'never' | 'always';
+    wrap?: boolean;
+    closable?: boolean;
+    linkable?: boolean;
+    visible?: boolean;
+    vertical?: boolean;
+}
+export declare const defaultNoticeBarProps: DefaultProps<NoticeBarProps>;
+export interface NoticeBarSlots {
+    default?(props: Record<string, never>): any;
+    'left-icon'?(props: Record<string, never>): any;
+    'right-icon'?(props: Record<string, never>): any;
+}
+export interface NoticeBarEmits {
+    (e: 'click', event: MouseEvent): void;
+    (e: 'close'): void;
+}
+export interface NoticeBarExpose {
+}

package/components/notice-bar/common.js

@@ -0,0 +1,8 @@
+//#region packages/sard/components/notice-bar/common.ts
+const defaultNoticeBarProps = {
+	speed: 50,
+	scrollable: "auto",
+	visible: true
+};
+//#endregion
+export { defaultNoticeBarProps };

package/components/notice-bar/index.css

@@ -0,0 +1 @@
+:root{--s-notice-bar-min-height:var(--s-content-height-sm);--s-notice-bar-padding-x:var(--s-content-padding-x);--s-notice-bar-padding-y:var(--s-content-padding-y);--s-notice-bar-font-size:var(--s-font-size);--s-notice-bar-color:#f97316;--s-notice-bar-bg:rgba(var(--s-color-warning-rgb), var(--s-opacity-theme-bg));--s-notice-bar-wrap-line-height:var(--s-line-height-snug);--s-notice-bar-left-icon-size:var(--s-size-lg);--s-notice-bar-left-icon-margin-end:var(--s-size-xs);--s-notice-bar-right-icon-padding:var(--s-size-xs);--s-notice-bar-right-icon-size:var(--s-size);--s-notice-bar-right-icon-margin-start:0;--s-notice-bar-right-icon-margin-end:calc(var(--s-size-xs)*-1)}.s-notice-bar{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;min-height:var(--s-notice-bar-min-height);padding:0 var(--s-notice-bar-padding-x);background:var(--s-notice-bar-bg);color:var(--s-notice-bar-color)}.s-notice-bar--wrap{padding-top:var(--s-notice-bar-padding-y);padding-bottom:var(--s-notice-bar-padding-y)}.s-notice-bar--linkable{cursor:pointer}.s-notice-bar__left-icon{font-size:var(--s-notice-bar-left-icon-size);margin-inline-end:var(--s-notice-bar-left-icon-margin-end)}.s-notice-bar__content{flex:1;display:flex;flex-direction:row;overflow:hidden}.s-notice-bar__wrapper{font-size:var(--s-notice-bar-font-size);line-height:var(--s-notice-bar-wrap-line-height);white-space:nowrap;animation-duration:var(--duration);animation-timing-function:linear;animation-fill-mode:both;transform:translateX(var(--x))}:root[dir=rtl] .s-notice-bar__wrapper{transform:translateX(calc(var(--x) * -1))}.s-notice-bar__right-icon{font-size:var(--s-notice-bar-right-icon-size);padding:var(--s-notice-bar-right-icon-padding);margin-inline-start:var(--s-notice-bar-right-icon-margin-start);margin-inline-end:var(--s-notice-bar-right-icon-margin-end);cursor:pointer}.s-notice-bar--linkable{cursor:pointer}:root[dir=rtl] .s-notice-bar--linkable .s-notice-bar__right-icon{transform:rotateY(180deg)}.s-notice-bar--vertical .s-notice-bar__content{flex-direction:column}.s-notice-bar--scrollable .s-notice-bar__wrapper{animation-name:s-notice-bar-scroll}:root[dir=rtl] .s-notice-bar--scrollable .s-notice-bar__wrapper{animation-name:s-notice-bar-scroll-rtl}.s-notice-bar--infinite .s-notice-bar__wrapper{animation-name:s-notice-bar-scroll-infinite;animation-iteration-count:infinite}:root[dir=rtl] .s-notice-bar--infinite .s-notice-bar__wrapper{animation-name:s-notice-bar-scroll-infinite-rtl}@keyframes s-notice-bar-scroll{100%{transform:translate3d(-100%, 0, 0)}}@keyframes s-notice-bar-scroll-infinite{100%{transform:translate3d(-100%, 0, 0)}}@keyframes s-notice-bar-scroll-rtl{100%{transform:translate3d(100%, 0, 0)}}@keyframes s-notice-bar-scroll-infinite-rtl{100%{transform:translate3d(100%, 0, 0)}}.s-notice-bar--wrap .s-notice-bar__wrapper{white-space:normal}

package/components/notice-bar/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _NoticeBar from './notice-bar.vue';
+export declare const NoticeBar: EnhancedComponent<typeof _NoticeBar>;
+export default NoticeBar;
+export type { NoticeBarProps, NoticeBarSlots, NoticeBarEmits, NoticeBarExpose } from './common';

package/components/notice-bar/index.js

@@ -0,0 +1,6 @@
+import { enhanceComponent } from "../../utils/component.js";
+import notice_bar_default from "./notice-bar.js";
+//#region packages/sard/components/notice-bar/index.ts
+const NoticeBar = enhanceComponent(notice_bar_default);
+//#endregion
+export { NoticeBar, NoticeBar as default };

package/components/notice-bar/notice-bar.d.ts

@@ -0,0 +1,28 @@
+import { type NoticeBarProps, type NoticeBarSlots } from './common';
+type __VLS_Slots = NoticeBarSlots;
+declare const __VLS_base: import("vue").DefineComponent<NoticeBarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (event: MouseEvent) => any;
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<NoticeBarProps> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+    onClose?: (() => any) | undefined;
+}>, {
+    vertical: boolean;
+    background: string;
+    visible: boolean;
+    color: string;
+    closable: boolean;
+    wrap: boolean;
+    scrollable: "auto" | "never" | "always";
+    speed: number;
+    hideLeftIcon: boolean;
+    linkable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/notice-bar/notice-bar.js

@@ -0,0 +1,164 @@
+import { createBem } from "../../utils/bem.js";
+import { throttle } from "../../utils/utils.js";
+import { useResizeObserver } from "../../use/useResizeObserver.js";
+import { defaultNoticeBarProps } from "./common.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, unref, useTemplateRef } from "vue";
+import { Close, Right, VolumeUp } from "@sard/icons";
+//#region packages/sard/components/notice-bar/notice-bar.vue
+var notice_bar_default = /*@__PURE__*/ defineComponent({
+	__name: "notice-bar",
+	props: /*@__PURE__*/ mergeDefaults({
+		color: {
+			type: String,
+			required: false
+		},
+		background: {
+			type: String,
+			required: false
+		},
+		hideLeftIcon: {
+			type: Boolean,
+			required: false
+		},
+		speed: {
+			type: Number,
+			required: false
+		},
+		scrollable: {
+			type: String,
+			required: false
+		},
+		wrap: {
+			type: Boolean,
+			required: false
+		},
+		closable: {
+			type: Boolean,
+			required: false
+		},
+		linkable: {
+			type: Boolean,
+			required: false
+		},
+		visible: {
+			type: Boolean,
+			required: false
+		},
+		vertical: {
+			type: Boolean,
+			required: false
+		}
+	}, defaultNoticeBarProps),
+	emits: ["click", "close"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("notice-bar");
+		const contentRef = useTemplateRef("content");
+		const wrapperRef = useTemplateRef("wrapper");
+		const shouldScroll = ref(false);
+		const wrapperData = ref({
+			first: 0,
+			later: 0,
+			contentWidth: 0
+		});
+		const getWidth = (el) => {
+			return el.getBoundingClientRect().width;
+		};
+		const firstLap = ref(true);
+		const onAnimationEnd = (event) => {
+			if (event.target === wrapperRef.value) {
+				if (firstLap.value) firstLap.value = false;
+			}
+		};
+		const update = throttle(() => {
+			if (props.scrollable === "never") {
+				shouldScroll.value = false;
+				return;
+			}
+			const contentWidth = getWidth(contentRef.value);
+			const wrapperWidth = getWidth(wrapperRef.value);
+			const nextShouldScroll = props.scrollable === "always" || wrapperWidth > contentWidth;
+			if (nextShouldScroll) wrapperData.value = {
+				first: wrapperWidth / props.speed * 1e3,
+				later: (wrapperWidth + contentWidth) / props.speed * 1e3,
+				contentWidth
+			};
+			else firstLap.value = true;
+			shouldScroll.value = nextShouldScroll;
+		}, 50, { leading: false });
+		onMounted(() => {
+			update();
+		});
+		onBeforeUnmount(() => {
+			update.cancel();
+		});
+		useResizeObserver(wrapperRef, () => {
+			update();
+		});
+		useResizeObserver(contentRef, () => {
+			update();
+		});
+		const innerVisible = ref(props.visible);
+		const onRightIconClick = () => {
+			if (props.closable) {
+				innerVisible.value = false;
+				emit("close");
+			}
+		};
+		const onClick = (event) => {
+			emit("click", event);
+		};
+		const noticeBarClass = computed(() => {
+			return [
+				bem.b(),
+				bem.m("wrap", props.wrap),
+				bem.m("vertical", props.vertical),
+				bem.m("linkable", props.linkable),
+				bem.m("infinite", !firstLap.value),
+				bem.m("scrollable", shouldScroll.value)
+			];
+		});
+		const noticeBarStyle = computed(() => {
+			return {
+				color: props.color,
+				background: props.background,
+				display: innerVisible.value ? "" : "none"
+			};
+		});
+		const wrapperStyle = computed(() => {
+			return {
+				"--x": `${firstLap.value ? 0 : wrapperData.value.contentWidth}px`,
+				"--duration": `${firstLap.value ? wrapperData.value.first : wrapperData.value.later}ms`
+			};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(noticeBarClass.value),
+				style: normalizeStyle(noticeBarStyle.value),
+				onClick
+			}, [
+				!__props.hideLeftIcon ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(bem).e("left-icon"))
+				}, [renderSlot(_ctx.$slots, "left-icon", {}, () => [createVNode(unref(VolumeUp))])], 2)) : createCommentVNode("v-if", true),
+				createElementVNode("div", {
+					ref: "content",
+					class: normalizeClass(unref(bem).e("content"))
+				}, [createElementVNode("div", {
+					ref: "wrapper",
+					class: normalizeClass(unref(bem).e("wrapper")),
+					style: normalizeStyle(wrapperStyle.value),
+					onAnimationend: onAnimationEnd
+				}, [renderSlot(_ctx.$slots, "default")], 38)], 2),
+				__props.closable || __props.linkable ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(unref(bem).e("right-icon")),
+					onClick: onRightIconClick
+				}, [renderSlot(_ctx.$slots, "right-icon", {}, () => [__props.closable ? (openBlock(), createBlock(unref(Close), { key: 0 })) : __props.linkable ? (openBlock(), createBlock(unref(Right), { key: 1 })) : createCommentVNode("v-if", true)])], 2)) : createCommentVNode("v-if", true)
+			], 6);
+		};
+	}
+});
+//#endregion
+export { notice_bar_default as default };

package/components/notify/common.d.ts

@@ -0,0 +1,24 @@
+import { type DefaultProps } from '../config';
+import type { MotionEmits } from '../motion';
+export interface NotifyProps {
+    type?: 'primary' | 'success' | 'warning' | 'error';
+    message?: string;
+    color?: string;
+    background?: string;
+    visible?: boolean;
+    position?: 'top' | 'bottom';
+    timeout?: number;
+    statusBar?: boolean;
+}
+export declare const defaultNotifyProps: DefaultProps<NotifyProps>;
+export interface NotifySlots {
+    default?(props: Record<string, never>): any;
+}
+export interface NotifyEmits extends MotionEmits {
+    (e: 'click', event: MouseEvent): void;
+    (e: 'update:visible', visible: boolean): void;
+}
+export interface NotifyExpose {
+    reHideLater: () => void;
+    cancelHide: () => void;
+}

package/components/notify/common.js

@@ -0,0 +1,9 @@
+//#region packages/sard/components/notify/common.ts
+const defaultNotifyProps = {
+	type: "primary",
+	position: "top",
+	timeout: 3e3,
+	statusBar: true
+};
+//#endregion
+export { defaultNotifyProps };

package/components/notify/imperative.d.ts

@@ -0,0 +1,18 @@
+import { type TransitionHookCallbacks } from '../popup/common';
+import { type NotifyProps } from './common';
+export interface NotifyOptions extends NotifyProps, TransitionHookCallbacks {
+}
+export interface NotifySimpleShowFunction {
+    (optionsOrMessage?: string | NotifyOptions, options?: NotifyOptions): void;
+}
+export interface NotifyShowFunction {
+    (optionsOrMessage?: string | NotifyOptions, options?: NotifyOptions, internalType?: NotifyOptions['type']): void;
+}
+export type NotifyFunction = NotifySimpleShowFunction & {
+    success: NotifySimpleShowFunction;
+    warning: NotifySimpleShowFunction;
+    error: NotifySimpleShowFunction;
+    hide: () => void;
+};
+export declare function createNotify(defaultOptions?: NotifyOptions): NotifyFunction;
+export declare const notify: NotifyFunction;

package/components/notify/imperative.js

@@ -0,0 +1,43 @@
+import { isConfigObject } from "../../utils/is.js";
+import { createImperativeComponent } from "../../utils/createImperativeComponent.js";
+import notify_default from "./notify.js";
+//#region packages/sard/components/notify/imperative.ts
+function createNotify(defaultOptions) {
+	const imperative = createImperativeComponent(notify_default, defaultOptions, {
+		onShow(expose) {
+			expose.reHideLater();
+		},
+		onHide(expose) {
+			expose.cancelHide();
+		}
+	});
+	const show = (optionsOrMessage, options = {}, internalType) => {
+		if (isConfigObject(optionsOrMessage)) options = optionsOrMessage;
+		else options.message = optionsOrMessage;
+		options.type = internalType;
+		imperative.show(options);
+	};
+	const notify = (optionsOrMessage, options) => {
+		show(optionsOrMessage, options, "primary");
+	};
+	const success = (optionsOrMessage, options) => {
+		show(optionsOrMessage, options, "success");
+	};
+	const warning = (optionsOrMessage, options) => {
+		show(optionsOrMessage, options, "warning");
+	};
+	const error = (optionsOrMessage, options) => {
+		show(optionsOrMessage, options, "error");
+	};
+	const hide = () => {
+		imperative.hide();
+	};
+	notify.success = success;
+	notify.warning = warning;
+	notify.error = error;
+	notify.hide = hide;
+	return notify;
+}
+const notify = createNotify();
+//#endregion
+export { createNotify, notify };

package/components/notify/index.css

@@ -0,0 +1 @@
+:root{--s-notify-padding-x:var(--s-content-padding-x);--s-notify-padding-y:var(--s-content-padding-y);--s-notify-font-size:var(--s-font-size);--s-notify-color:var(--s-white)}.s-notify--primary{background-color:var(--s-color-primary)}.s-notify--success{background-color:var(--s-color-success)}.s-notify--warning{background-color:var(--s-color-warning)}.s-notify--error{background-color:var(--s-color-danger)}.s-notify__content{padding:var(--s-notify-padding-y) var(--s-notify-padding-x);font-size:var(--s-notify-font-size);text-align:center;color:var(--s-white)}.s-notify--bottom .s-notify__content{padding-bottom:calc(var(--s-notify-padding-y) + var(--s-safe-bottom))}

package/components/notify/index.d.ts

@@ -0,0 +1,6 @@
+import { type EnhancedComponent } from '../../utils';
+import _Notify from './notify.vue';
+export declare const Notify: EnhancedComponent<typeof _Notify>;
+export default Notify;
+export type { NotifyProps, NotifySlots, NotifyEmits, NotifyExpose } from './common';
+export * from './imperative';

package/components/notify/index.js

@@ -0,0 +1,7 @@
+import { enhanceComponent } from "../../utils/component.js";
+import notify_default from "./notify.js";
+import { createNotify, notify } from "./imperative.js";
+//#region packages/sard/components/notify/index.ts
+const Notify = enhanceComponent(notify_default);
+//#endregion
+export { Notify, Notify as default, createNotify, notify };

package/components/notify/notify.d.ts

@@ -0,0 +1,45 @@
+import { type NotifyExpose, type NotifyProps, type NotifySlots } from './common';
+import type { MotionHookName } from '../motion/common';
+type __VLS_Slots = NotifySlots;
+declare const __VLS_base: import("vue").DefineComponent<NotifyProps, NotifyExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (event: MouseEvent) => any;
+    "before-enter": (el: Element) => any;
+    enter: (el: Element) => any;
+    "after-enter": (el: Element) => any;
+    "enter-cancelled": (el: Element) => any;
+    "before-leave": (el: Element) => any;
+    leave: (el: Element) => any;
+    "after-leave": (el: Element) => any;
+    "leave-cancelled": (el: Element) => any;
+    "visible-hook": (name: MotionHookName, el: Element) => any;
+    "update:visible": (visible: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<NotifyProps> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+    "onBefore-enter"?: ((el: Element) => any) | undefined;
+    onEnter?: ((el: Element) => any) | undefined;
+    "onAfter-enter"?: ((el: Element) => any) | undefined;
+    "onEnter-cancelled"?: ((el: Element) => any) | undefined;
+    "onBefore-leave"?: ((el: Element) => any) | undefined;
+    onLeave?: ((el: Element) => any) | undefined;
+    "onAfter-leave"?: ((el: Element) => any) | undefined;
+    "onLeave-cancelled"?: ((el: Element) => any) | undefined;
+    "onVisible-hook"?: ((name: MotionHookName, el: Element) => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+}>, {
+    position: "top" | "bottom";
+    background: string;
+    type: "primary" | "success" | "warning" | "error";
+    visible: boolean;
+    message: string;
+    color: string;
+    statusBar: boolean;
+    timeout: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/notify/notify.js

@@ -0,0 +1,131 @@
+import { createBem } from "../../utils/bem.js";
+import { useTimeout } from "../../use/useTimeout.js";
+import popup_default from "../popup/popup.js";
+import status_bar_default from "../status-bar/status-bar.js";
+import { defaultNotifyProps } from "./common.js";
+import { computed, createBlock, createCommentVNode, createElementVNode, createTextVNode, defineComponent, mergeDefaults, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, toDisplayString, unref, useSlots, watch, withCtx } from "vue";
+//#region packages/sard/components/notify/notify.vue
+var notify_default = /*@__PURE__*/ defineComponent({
+	__name: "notify",
+	props: /*@__PURE__*/ mergeDefaults({
+		type: {
+			type: String,
+			required: false
+		},
+		message: {
+			type: String,
+			required: false
+		},
+		color: {
+			type: String,
+			required: false
+		},
+		background: {
+			type: String,
+			required: false
+		},
+		visible: {
+			type: Boolean,
+			required: false
+		},
+		position: {
+			type: String,
+			required: false
+		},
+		timeout: {
+			type: Number,
+			required: false
+		},
+		statusBar: {
+			type: Boolean,
+			required: false
+		}
+	}, defaultNotifyProps),
+	emits: [
+		"click",
+		"update:visible",
+		"before-enter",
+		"enter",
+		"after-enter",
+		"enter-cancelled",
+		"before-leave",
+		"leave",
+		"after-leave",
+		"leave-cancelled",
+		"visible-hook"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		useSlots();
+		const emit = __emit;
+		const bem = createBem("notify");
+		const effect = computed(() => {
+			return {
+				top: "slide-top",
+				bottom: "slide-bottom"
+			}[props.position];
+		});
+		const innerVisible = ref(props.visible);
+		const hideTimer = useTimeout();
+		const hide = () => {
+			innerVisible.value = false;
+			emit("update:visible", false);
+		};
+		const reHideLater = () => {
+			hideTimer.clear();
+			nextTick(() => {
+				if (props.timeout > 0) hideTimer.set(hide, props.timeout);
+			});
+		};
+		watch(() => props.visible, () => {
+			innerVisible.value = props.visible;
+			if (props.visible) {
+				if (props.timeout > 0) hideTimer.set(hide, props.timeout);
+			}
+		});
+		const onVisibleHook = (name, el) => {
+			emit("visible-hook", name, el);
+			emit(name, el);
+		};
+		const onClick = (event) => {
+			emit("click", event);
+		};
+		__expose({
+			reHideLater,
+			cancelHide: () => {
+				hideTimer.clear();
+			}
+		});
+		const notifyClass = computed(() => {
+			return [
+				bem.b(),
+				bem.m(props.type),
+				bem.m(props.position)
+			];
+		});
+		const notifyStyle = computed(() => {
+			return {
+				backgroundColor: props.background,
+				color: props.color
+			};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(popup_default, {
+				visible: innerVisible.value,
+				overlay: false,
+				effect: effect.value,
+				"lock-scroll": false,
+				onVisibleHook
+			}, {
+				default: withCtx(() => [createElementVNode("div", {
+					class: normalizeClass(notifyClass.value),
+					style: normalizeStyle(notifyStyle.value),
+					onClick
+				}, [__props.position === "top" && __props.statusBar ? (openBlock(), createBlock(status_bar_default, { key: 0 })) : createCommentVNode("v-if", true), createElementVNode("div", { class: normalizeClass(unref(bem).e("content")) }, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.message), 1)])], 2)], 6)]),
+				_: 3
+			}, 8, ["visible", "effect"]);
+		};
+	}
+});
+//#endregion
+export { notify_default as default };

package/components/overlay/common.d.ts

@@ -0,0 +1,14 @@
+import { type DefaultProps } from '../config';
+export interface OverlayProps {
+    visible?: boolean;
+    zIndex?: number;
+    background?: string;
+    transparent?: boolean;
+}
+export declare const defaultOverlayProps: DefaultProps<OverlayProps>;
+export interface OverlaySlots {
+    default?(props: Record<string, never>): any;
+}
+export interface OverlayEmits {
+    (e: 'click', event: MouseEvent): void;
+}

package/components/overlay/common.js

@@ -0,0 +1,4 @@
+//#region packages/sard/components/overlay/common.ts
+const defaultOverlayProps = {};
+//#endregion
+export { defaultOverlayProps };

package/components/overlay/index.css

@@ -0,0 +1 @@
+.s-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--s-overlay);touch-action:none}.s-overlay--transparent{background-color:rgba(0,0,0,0)}

package/components/overlay/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _Overlay from './overlay.vue';
+export declare const Overlay: EnhancedComponent<typeof _Overlay>;
+export default Overlay;
+export type { OverlayProps, OverlaySlots, OverlayEmits } from './common';

package/components/overlay/index.js

@@ -0,0 +1,6 @@
+import { enhanceComponent } from "../../utils/component.js";
+import overlay_default from "./overlay.js";
+//#region packages/sard/components/overlay/index.ts
+const Overlay = enhanceComponent(overlay_default);
+//#endregion
+export { Overlay, Overlay as default };

package/components/overlay/overlay.d.ts

@@ -0,0 +1,20 @@
+import { type OverlayProps, type OverlaySlots } from './common';
+type __VLS_Slots = OverlaySlots;
+declare const __VLS_base: import("vue").DefineComponent<OverlayProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<OverlayProps> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    background: string;
+    visible: boolean;
+    transparent: boolean;
+    zIndex: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};