sard 1.0.0 → 1.0.2

package/components/list/list.js

@@ -0,0 +1,60 @@
+import { createBem } from "../../utils/bem.js";
+import { isRenderVisible } from "../../utils/utils.js";
+import { listContextKey } from "./common.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, openBlock, provide, reactive, renderSlot, toDisplayString, toRef, unref, useSlots } from "vue";
+//#region packages/sard/components/list/list.vue
+var list_default = /*@__PURE__*/ defineComponent({
+	__name: "list",
+	props: {
+		title: {
+			type: [String, Number],
+			required: false
+		},
+		description: {
+			type: [String, Number],
+			required: false
+		},
+		inlaid: {
+			type: Boolean,
+			required: false
+		},
+		card: {
+			type: Boolean,
+			required: false
+		},
+		hideBorder: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const slots = useSlots();
+		const bem = createBem("list");
+		provide(listContextKey, reactive({ hideBorder: toRef(() => props.hideBorder) }));
+		const listClass = computed(() => {
+			return [
+				bem.b(),
+				bem.m("card", props.card),
+				bem.m("not-card", !props.card),
+				bem.m("inlaid", props.inlaid),
+				bem.m("borderless", props.hideBorder)
+			];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(listClass.value) }, [
+				unref(isRenderVisible)(slots.title || __props.title) ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(bem).e("title"))
+				}, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)])], 2)) : createCommentVNode("v-if", true),
+				createElementVNode("div", { class: normalizeClass(unref(bem).e("content")) }, [renderSlot(_ctx.$slots, "default")], 2),
+				unref(isRenderVisible)(slots.description || __props.description) ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(unref(bem).e("description"))
+				}, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])], 2)) : createCommentVNode("v-if", true)
+			], 2);
+		};
+	}
+});
+//#endregion
+export { list_default as default };

package/components/load-more/common.d.ts

@@ -0,0 +1,20 @@
+import { type DefaultProps } from '../config';
+export type LoadMoreStatus = 'incomplete' | 'loading' | 'complete' | 'error';
+export interface LoadMoreProps {
+    status?: LoadMoreStatus;
+    incompleteText?: string;
+    loadingText?: string;
+    completeText?: string;
+    errorText?: string;
+}
+export declare const defaultLoadMoreProps: DefaultProps<LoadMoreProps>;
+export interface LoadMoreSlots {
+    incomplete?(props: Record<string, never>): any;
+    loading?(props: Record<string, never>): any;
+    complete?(props: Record<string, never>): any;
+    error?(props: Record<string, never>): any;
+}
+export interface LoadMoreEmits {
+    (e: 'load-more'): void;
+    (e: 'reload'): void;
+}

package/components/load-more/common.js

@@ -0,0 +1,4 @@
+//#region packages/sard/components/load-more/common.ts
+const defaultLoadMoreProps = { status: "incomplete" };
+//#endregion
+export { defaultLoadMoreProps };

package/components/load-more/index.css

@@ -0,0 +1 @@
+:root{--s-load-more-height:var(--s-size-4xl);--s-load-more-font-size:var(--s-font-size-sm);--s-load-more-color:var(--s-text-color-tertiary)}.s-load-more{display:flex;align-items:center;justify-content:center;height:var(--s-load-more-height);font-size:var(--s-load-more-font-size);color:var(--s-load-more-color)}.s-load-more--incomplete,.s-load-more--error{cursor:pointer}

package/components/load-more/index.d.ts

@@ -0,0 +1,6 @@
+import { type EnhancedComponent } from '../../utils';
+import _LoadMore from './load-more.vue';
+export declare const LoadMore: EnhancedComponent<typeof _LoadMore>;
+export default LoadMore;
+export type { LoadMoreStatus, LoadMoreProps, LoadMoreSlots, LoadMoreEmits } from './common';
+export * from './useLoadMore';

package/components/load-more/index.js

@@ -0,0 +1,7 @@
+import { enhanceComponent } from "../../utils/component.js";
+import load_more_default from "./load-more.js";
+import { useLoadMore } from "./useLoadMore.js";
+//#region packages/sard/components/load-more/index.ts
+const LoadMore = enhanceComponent(load_more_default);
+//#endregion
+export { LoadMore, LoadMore as default, useLoadMore };

package/components/load-more/load-more.d.ts

@@ -0,0 +1,23 @@
+import { type LoadMoreProps, type LoadMoreSlots } from './common';
+type __VLS_Slots = LoadMoreSlots;
+declare const __VLS_base: import("vue").DefineComponent<LoadMoreProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "load-more": () => any;
+    reload: () => any;
+}, string, import("vue").PublicProps, Readonly<LoadMoreProps> & Readonly<{
+    "onLoad-more"?: (() => any) | undefined;
+    onReload?: (() => any) | undefined;
+}>, {
+    status: import("./common").LoadMoreStatus;
+    incompleteText: string;
+    loadingText: string;
+    completeText: string;
+    errorText: string;
+}, {}, {}, {}, 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/load-more/load-more.js

@@ -0,0 +1,56 @@
+import { createBem } from "../../utils/bem.js";
+import loading_default from "../loading/loading.js";
+import { useTranslateWithPrefix } from "../../locale/index.js";
+import { defaultLoadMoreProps } from "./common.js";
+import { computed, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, mergeDefaults, normalizeClass, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
+//#region packages/sard/components/load-more/load-more.vue
+var load_more_default = /*@__PURE__*/ defineComponent({
+	__name: "load-more",
+	props: /*@__PURE__*/ mergeDefaults({
+		status: {
+			type: String,
+			required: false
+		},
+		incompleteText: {
+			type: String,
+			required: false
+		},
+		loadingText: {
+			type: String,
+			required: false
+		},
+		completeText: {
+			type: String,
+			required: false
+		},
+		errorText: {
+			type: String,
+			required: false
+		}
+	}, defaultLoadMoreProps),
+	emits: ["load-more", "reload"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("load-more");
+		const { t } = useTranslateWithPrefix("loadMore");
+		const onClick = () => {
+			if (props.status === "incomplete") emit("load-more");
+			else if (props.status === "error") emit("reload");
+		};
+		const loadMoreClass = computed(() => {
+			return [bem.b(), bem.m(props.status)];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(loadMoreClass.value),
+				onClick
+			}, [__props.status === "incomplete" ? renderSlot(_ctx.$slots, "incomplete", { key: 0 }, () => [createTextVNode(toDisplayString(__props.incompleteText || unref(t)("incompleteText")), 1)]) : __props.status === "loading" ? renderSlot(_ctx.$slots, "loading", { key: 1 }, () => [createVNode(loading_default, null, {
+				default: withCtx(() => [createTextVNode(toDisplayString(__props.loadingText || unref(t)("loadingText")), 1)]),
+				_: 1
+			})]) : __props.status === "complete" ? renderSlot(_ctx.$slots, "complete", { key: 2 }, () => [createTextVNode(toDisplayString(__props.completeText || unref(t)("completeText")), 1)]) : __props.status === "error" ? renderSlot(_ctx.$slots, "error", { key: 3 }, () => [createTextVNode(toDisplayString(__props.errorText || unref(t)("errorText")), 1)]) : createCommentVNode("v-if", true)], 2);
+		};
+	}
+});
+//#endregion
+export { load_more_default as default };

package/components/load-more/useLoadMore.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 以 hook 的方式组织 LoadMore 的逻辑
+ */
+import { type ComputedRef, type MaybeRefOrGetter, type Ref } from 'vue';
+import type { LoadMoreStatus } from './common';
+export interface UseLoadMoreOptions {
+    request: (page: number, isRefresh: boolean) => Promise<boolean>;
+    rootMargin?: MaybeRefOrGetter<string>;
+    root?: MaybeRefOrGetter<Element | Document | null>;
+    target?: MaybeRefOrGetter<Element | null>;
+    disabled?: MaybeRefOrGetter<boolean>;
+}
+export interface UseLoadMoreReturn {
+    status: Ref<LoadMoreStatus>;
+    isLoading: ComputedRef<boolean>;
+    isRefreshing: ComputedRef<boolean>;
+    onLoadMore: () => void;
+    onReload: () => void;
+    currentPage: Ref<number, number>;
+    refresh: () => Promise<void | null>;
+}
+export declare function useLoadMore(options: UseLoadMoreOptions): UseLoadMoreReturn;

package/components/load-more/useLoadMore.js

@@ -0,0 +1,71 @@
+import { useIntersectionObserver } from "../../use/useIntersectionObserver.js";
+import { computed, ref, toValue, watch } from "vue";
+//#region packages/sard/components/load-more/useLoadMore.ts
+/**
+* 以 hook 的方式组织 LoadMore 的逻辑
+*/
+function useLoadMore(options) {
+	const status = ref("incomplete");
+	const currentPage = ref(1);
+	const isRefreshing = ref(false);
+	const disabled = computed(() => toValue(options.disabled));
+	const { rootMargin = "0px 0px 100px", root, target } = options;
+	let firstTime = false;
+	let currentPromise = null;
+	const loadMoreFetch = async (page) => {
+		if (status.value === "loading") return currentPromise;
+		firstTime = true;
+		status.value = "loading";
+		currentPage.value = page;
+		return currentPromise = options.request(page, isRefreshing.value).then((loaded) => {
+			isRefreshing.value = false;
+			status.value = loaded ? "complete" : "incomplete";
+			if (!loaded) setTimeout(() => {
+				if (status.value === "incomplete" && isIntersecting.value) onLoadMore();
+			}, 30);
+		}).catch(() => {
+			isRefreshing.value = false;
+			status.value = "error";
+		});
+	};
+	const refresh = async () => {
+		if (!disabled.value) {
+			if (status.value !== "loading") {
+				isRefreshing.value = true;
+				return loadMoreFetch(1);
+			}
+		}
+	};
+	const onLoadMore = () => {
+		if (!disabled.value) loadMoreFetch(currentPage.value + 1);
+	};
+	const onReload = () => {
+		if (!disabled.value) loadMoreFetch(currentPage.value);
+	};
+	const { isIntersecting } = useIntersectionObserver({
+		root,
+		rootMargin,
+		threshold: 0,
+		target
+	});
+	watch([
+		disabled,
+		status,
+		isIntersecting
+	], () => {
+		setTimeout(() => {
+			if (!disabled.value && status.value === "incomplete" && isIntersecting.value) loadMoreFetch(firstTime ? currentPage.value + 1 : currentPage.value);
+		}, 30);
+	});
+	return {
+		status,
+		isLoading: computed(() => status.value === "loading"),
+		isRefreshing: computed(() => isRefreshing.value),
+		onLoadMore,
+		onReload,
+		currentPage,
+		refresh
+	};
+}
+//#endregion
+export { useLoadMore };

package/components/loading/common.d.ts

@@ -0,0 +1,17 @@
+import { type DefaultProps } from '../config';
+export interface LoadingProps {
+    type?: 'clock' | 'circular';
+    color?: string;
+    size?: string;
+    text?: string;
+    textColor?: string;
+    textSize?: string;
+    vertical?: boolean;
+    animated?: boolean;
+    progress?: number;
+}
+export declare const defaultLoadingProps: DefaultProps<LoadingProps>;
+export interface LoadingSlots {
+    default?(props: Record<string, never>): any;
+    circular?(props: Record<string, never>): any;
+}

package/components/loading/common.js

@@ -0,0 +1,8 @@
+//#region packages/sard/components/loading/common.ts
+const defaultLoadingProps = {
+	type: "circular",
+	animated: true,
+	progress: 1
+};
+//#endregion
+export { defaultLoadingProps };

package/components/loading/index.css

@@ -0,0 +1 @@
+:root{--s-loading-text-margin-start:var(--s-size-xs);--s-loading-text-vertical-margin-top:var(--s-size-xs)}.s-loading{display:inline-flex;justify-content:center;align-items:center}.s-loading--vertical{flex-direction:column}.s-loading__icon{position:relative;display:flex;line-height:1}.s-loading__icon--circular,.s-loading__icon--clock{align-items:center;justify-content:center;width:1em;height:1em}.s-loading__icon--circular.s-loading__icon--animated{animation:s-loading-rotate .8s linear infinite}.s-loading__icon--clock.s-loading__icon--animated{animation:s-loading-rotate .8s steps(12) infinite}@keyframes s-loading-rotate{from{transform:rotate(0deg)}to{transform:rotate(1turn)}}.s-loading__spinner{width:100%;height:100%;border-radius:100%;background:conic-gradient(rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0) 60deg, currentColor 330deg, rgba(255, 255, 255, 0) 360deg);-webkit-mask:radial-gradient(transparent calc(55% - 1px), var(--s-white) 55%)}.s-loading__scale{position:absolute;top:0;left:0;width:100%;height:100%}.s-loading__scale::before{display:flex;width:9.38%;min-width:2px;transform:scaleX(0.75);height:28%;margin:0 auto;border-radius:40%;content:"";background-color:currentColor}.s-loading__scale--1{opacity:.0833;transform:rotate(30deg)}.s-loading__scale--2{opacity:.1667;transform:rotate(60deg)}.s-loading__scale--3{opacity:.25;transform:rotate(90deg)}.s-loading__scale--4{opacity:.3333;transform:rotate(120deg)}.s-loading__scale--5{opacity:.4167;transform:rotate(150deg)}.s-loading__scale--6{opacity:.5;transform:rotate(180deg)}.s-loading__scale--7{opacity:.5833;transform:rotate(210deg)}.s-loading__scale--8{opacity:.6667;transform:rotate(240deg)}.s-loading__scale--9{opacity:.75;transform:rotate(270deg)}.s-loading__scale--10{opacity:.8333;transform:rotate(300deg)}.s-loading__scale--11{opacity:.9167;transform:rotate(330deg)}.s-loading__scale--12{opacity:1;transform:rotate(360deg)}.s-loading__scale--hidden{opacity:0}.s-loading__text{margin-inline-start:var(--s-loading-text-margin-start)}.s-loading--vertical .s-loading__text{margin-inline-start:0;margin-top:var(--s-loading-text-vertical-margin-top)}

package/components/loading/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _Loading from './loading.vue';
+export declare const Loading: EnhancedComponent<typeof _Loading>;
+export default Loading;
+export type { LoadingProps, LoadingSlots } from './common';

package/components/loading/index.js

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

package/components/loading/loading.d.ts

@@ -0,0 +1,21 @@
+import { type LoadingProps, type LoadingSlots } from './common';
+type __VLS_Slots = LoadingSlots;
+declare const __VLS_base: import("vue").DefineComponent<LoadingProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LoadingProps> & Readonly<{}>, {
+    text: string;
+    progress: number;
+    animated: boolean;
+    vertical: boolean;
+    size: string;
+    type: "clock" | "circular";
+    color: string;
+    textColor: string;
+    textSize: string;
+}, {}, {}, {}, 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/loading/loading.js

@@ -0,0 +1,97 @@
+import { createBem } from "../../utils/bem.js";
+import { isRenderVisible } from "../../utils/utils.js";
+import { defaultLoadingProps } from "./common.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, openBlock, renderList, renderSlot, toDisplayString, unref, useSlots } from "vue";
+//#region packages/sard/components/loading/loading.vue
+var loading_default = /*@__PURE__*/ defineComponent({
+	__name: "loading",
+	props: /*@__PURE__*/ mergeDefaults({
+		type: {
+			type: String,
+			required: false
+		},
+		color: {
+			type: String,
+			required: false
+		},
+		size: {
+			type: String,
+			required: false
+		},
+		text: {
+			type: String,
+			required: false
+		},
+		textColor: {
+			type: String,
+			required: false
+		},
+		textSize: {
+			type: String,
+			required: false
+		},
+		vertical: {
+			type: Boolean,
+			required: false
+		},
+		animated: {
+			type: Boolean,
+			required: false
+		},
+		progress: {
+			type: Number,
+			required: false
+		}
+	}, defaultLoadingProps),
+	setup(__props) {
+		const props = __props;
+		const slots = useSlots();
+		const bem = createBem("loading");
+		const scaleShowNum = computed(() => {
+			return Math.max(Math.floor(props.progress * 12), 1);
+		});
+		const loadingClass = computed(() => {
+			return [bem.b(), bem.m("vertical", props.vertical)];
+		});
+		const iconClass = computed(() => {
+			return [
+				bem.e("icon"),
+				bem.em("icon", props.type),
+				bem.em("icon", "animated", props.animated)
+			];
+		});
+		const iconStyle = computed(() => {
+			return [{
+				color: props.color,
+				fontSize: props.size
+			}, props.type === "circular" && !props.animated ? { transform: `rotate(${props.progress * 360}deg)` } : null];
+		});
+		const loadingTextStyle = computed(() => {
+			return {
+				color: props.textColor,
+				fontSize: props.textSize
+			};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(loadingClass.value) }, [createElementVNode("div", {
+				class: normalizeClass(iconClass.value),
+				style: normalizeStyle(iconStyle.value)
+			}, [__props.type === "circular" ? renderSlot(_ctx.$slots, "circular", { key: 0 }, () => [createElementVNode("div", { class: normalizeClass(unref(bem).e("spinner")) }, null, 2)]) : __props.type === "clock" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, renderList(12, (i) => {
+				return createElementVNode("div", {
+					key: i,
+					class: normalizeClass([
+						unref(bem).e("scale"),
+						unref(bem).em("scale", i),
+						!props.animated ? { [unref(bem).em("scale", "hidden")]: i > scaleShowNum.value } : null
+					])
+				}, null, 2);
+			}), 64)) : createCommentVNode("v-if", true)], 6), unref(isRenderVisible)(slots.default || __props.text) ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(unref(bem).e("text")),
+				style: normalizeStyle(loadingTextStyle.value)
+			}, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.text), 1)])], 6)) : createCommentVNode("v-if", true)], 2);
+		};
+	}
+});
+//#endregion
+export { loading_default as default };

package/components/marquee/common.d.ts

@@ -0,0 +1,11 @@
+import { type DefaultProps } from '../config';
+export interface MarqueeProps {
+    direction?: 'vertical' | 'horizontal';
+    speed?: number;
+}
+export declare const defaultMarqueeProps: DefaultProps<MarqueeProps>;
+export interface MarqueeSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface MarqueeExpose {
+}

package/components/marquee/common.js

@@ -0,0 +1,7 @@
+//#region packages/sard/components/marquee/common.ts
+const defaultMarqueeProps = {
+	direction: "vertical",
+	speed: 50
+};
+//#endregion
+export { defaultMarqueeProps };

package/components/marquee/index.css

@@ -0,0 +1 @@
+.s-marquee{overflow:hidden}.s-marquee__wrapper{flex:none;animation-timing-function:linear;animation-iteration-count:infinite;animation-play-state:paused}.s-marquee--vertical{display:block}.s-marquee--vertical .s-marquee__wrapper{display:flex;flex-direction:column;animation-name:s-marquee-scroll-vertical}.s-marquee--vertical .s-marquee__content{display:flex;flex-direction:column}.s-marquee--horizontal{display:flex}.s-marquee--horizontal .s-marquee__wrapper{display:inline-flex;animation-name:s-marquee-scroll-horizontal}:root[dir=rtl] .s-marquee--horizontal .s-marquee__wrapper{animation-name:s-marquee-scroll-horizontal-rtl}.s-marquee--horizontal .s-marquee__content{display:inline-flex}@keyframes s-marquee-scroll-vertical{100%{transform:translate3d(0, -50%, 0)}}@keyframes s-marquee-scroll-horizontal{100%{transform:translate3d(-50%, 0, 0)}}@keyframes s-marquee-scroll-horizontal-rtl{100%{transform:translate3d(50%, 0, 0)}}

package/components/marquee/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _Marquee from './marquee.vue';
+export declare const Marquee: EnhancedComponent<typeof _Marquee>;
+export default Marquee;
+export type { MarqueeProps, MarqueeSlots, MarqueeExpose } from './common';

package/components/marquee/index.js

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

package/components/marquee/marquee.d.ts

@@ -0,0 +1,14 @@
+import { type MarqueeProps, type MarqueeSlots } from './common';
+type __VLS_Slots = MarqueeSlots;
+declare const __VLS_base: import("vue").DefineComponent<MarqueeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MarqueeProps> & Readonly<{}>, {
+    direction: "vertical" | "horizontal";
+    speed: 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/marquee/marquee.js

@@ -0,0 +1,75 @@
+import { createBem } from "../../utils/bem.js";
+import { throttle } from "../../utils/utils.js";
+import { useResizeObserver } from "../../use/useResizeObserver.js";
+import { defaultMarqueeProps } from "./common.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, unref, useTemplateRef } from "vue";
+//#region packages/sard/components/marquee/marquee.vue
+var marquee_default = /*@__PURE__*/ defineComponent({
+	__name: "marquee",
+	props: /*@__PURE__*/ mergeDefaults({
+		direction: {
+			type: String,
+			required: false
+		},
+		speed: {
+			type: Number,
+			required: false
+		}
+	}, defaultMarqueeProps),
+	setup(__props) {
+		const props = __props;
+		const bem = createBem("marquee");
+		const scrollRef = useTemplateRef("scroll");
+		const contentRef = useTemplateRef("content");
+		const duration = ref(0);
+		const overflowed = ref(false);
+		const update = throttle(() => {
+			const scrollRect = scrollRef.value.getBoundingClientRect();
+			const contentRect = contentRef.value.getBoundingClientRect();
+			const scrollSize = props.direction === "vertical" ? scrollRect.height : scrollRect.width;
+			const contentSize = props.direction === "vertical" ? contentRect.height : contentRect.width;
+			const wrapperSize = contentSize * 2;
+			overflowed.value = contentSize > scrollSize;
+			duration.value = overflowed.value ? wrapperSize / props.speed * 1e3 : 0;
+		}, 50, { leading: false });
+		onMounted(() => {
+			update();
+		});
+		onBeforeUnmount(() => {
+			update.cancel();
+		});
+		useResizeObserver(scrollRef, () => {
+			update();
+		});
+		useResizeObserver(contentRef, () => {
+			update();
+		});
+		const marqueeClass = computed(() => {
+			return [bem.b(), bem.m(props.direction)];
+		});
+		const wrapperStyle = computed(() => {
+			return {
+				animationName: overflowed.value ? "" : "none",
+				animationDuration: `${duration.value}ms`,
+				animationPlayState: overflowed.value ? "running" : "paused"
+			};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref: "scroll",
+				class: normalizeClass(marqueeClass.value)
+			}, [createElementVNode("div", {
+				class: normalizeClass(unref(bem).e("wrapper")),
+				style: normalizeStyle(wrapperStyle.value)
+			}, [createElementVNode("div", {
+				ref: "content",
+				class: normalizeClass(unref(bem).e("content"))
+			}, [renderSlot(_ctx.$slots, "default")], 2), overflowed.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(unref(bem).e("content"))
+			}, [renderSlot(_ctx.$slots, "default")], 2)) : createCommentVNode("v-if", true)], 6)], 2);
+		};
+	}
+});
+//#endregion
+export { marquee_default as default };

package/components/menu/common.d.ts

@@ -0,0 +1,24 @@
+import type { DefaultProps } from '../config';
+export interface MenuProps {
+    direction?: 'vertical' | 'horizontal';
+    theme?: 'dark' | 'light';
+}
+export declare const defaultMenuProps: DefaultProps<MenuProps>;
+export interface MenuSlots {
+    default?(): any;
+}
+export interface MenuEmits {
+    (e: 'select', item: any): void;
+}
+export interface MenuItemProps<T = any> {
+    label?: string | number;
+    value?: T;
+    disabled?: boolean;
+}
+export interface MenuItemSlots {
+    default?(): any;
+    icon?(): any;
+}
+export interface MenuItemEmits {
+    (e: 'click', event: MouseEvent): void;
+}

package/components/menu/common.js

@@ -0,0 +1,7 @@
+//#region packages/sard/components/menu/common.ts
+const defaultMenuProps = {
+	direction: "vertical",
+	theme: "light"
+};
+//#endregion
+export { defaultMenuProps };

package/components/menu/context.d.ts

@@ -0,0 +1,23 @@
+import { type InjectionKey, type Ref, type ComputedRef } from 'vue';
+import { type MenuItemProps, type MenuProps } from './common';
+export interface MenuMember {
+    props: MenuItemProps;
+    hasIconSlot: boolean;
+}
+export interface MenuContext {
+    hasIcon: ComputedRef<boolean>;
+    direction: Readonly<Ref<MenuProps['direction']>>;
+    select: (memer: MenuMember) => void;
+    addMember: (memer: MenuMember) => void;
+    removeMember: (memer: MenuMember) => void;
+}
+export declare const menuContextKey: InjectionKey<MenuContext>;
+export declare function useMenu(options: {
+    props: MenuProps;
+    onSelect: (item: MenuMember) => void;
+}): MenuContext;
+export declare function useMenuItem(props: MenuItemProps, hasIconSlot: Ref<boolean>): {
+    select: () => void;
+    hasIcon: ComputedRef<boolean>;
+    direction: Readonly<Ref<"vertical" | "horizontal" | undefined, "vertical" | "horizontal" | undefined>>;
+};