sard 1.0.0 → 1.0.2

package/components/read-more/read-more.js

@@ -0,0 +1,119 @@
+import { createBem } from "../../utils/bem.js";
+import { usePointerDown } from "../../use/usePointerDown.js";
+import { useTranslateWithPrefix } from "../../locale/index.js";
+import button_default from "../button/button.js";
+import { defaultReadMoreProps } from "./common.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, toDisplayString, unref, useTemplateRef, watch, withCtx } from "vue";
+import { Down, Up } from "@sard/icons";
+//#region packages/sard/components/read-more/read-more.vue
+var read_more_default = /*@__PURE__*/ defineComponent({
+	__name: "read-more",
+	props: /*@__PURE__*/ mergeDefaults({
+		maxHeight: {
+			type: Number,
+			required: false
+		},
+		hideClose: {
+			type: Boolean,
+			required: false
+		},
+		openText: {
+			type: String,
+			required: false
+		},
+		closeText: {
+			type: String,
+			required: false
+		},
+		visible: {
+			type: Boolean,
+			required: false
+		},
+		keepLocation: {
+			type: Boolean,
+			required: false
+		}
+	}, defaultReadMoreProps),
+	emits: [
+		"update:visible",
+		"open",
+		"close"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("read-more");
+		const { t } = useTranslateWithPrefix("readMore");
+		const innerVisible = ref(props.visible);
+		watch(() => props.visible, () => {
+			innerVisible.value = props.visible;
+		});
+		const handleClick = () => {
+			innerVisible.value = !innerVisible.value;
+			emit("update:visible", innerVisible.value);
+			if (innerVisible.value) emit("open");
+			else {
+				onClose();
+				emit("close");
+			}
+		};
+		const onButtonClick = () => {
+			handleClick();
+		};
+		const toggleText = computed(() => {
+			return innerVisible.value ? props.openText || t("fold") : props.closeText || t("unfold");
+		});
+		const hideToggle = computed(() => {
+			return innerVisible.value && props.hideClose;
+		});
+		const contentRef = useTemplateRef("content");
+		const toggleRef = useTemplateRef("toggle");
+		let scrollTop = 0;
+		const onTouchStart = (event) => {
+			if (props.keepLocation && innerVisible.value) {
+				const { clientY, pageY } = event.touches[0];
+				const contentRect = contentRef.value.getBoundingClientRect();
+				const toggleRect = toggleRef.value.getBoundingClientRect();
+				const closeContentHeight = Math.min(props.maxHeight, contentRect.height);
+				const openContentHeight = contentRect.height;
+				scrollTop = pageY - (clientY - toggleRect.top) - openContentHeight - (toggleRect.top - closeContentHeight);
+			}
+		};
+		const onPointerDown = usePointerDown(onTouchStart, void 0, void 0);
+		const onClose = () => {
+			if (props.keepLocation) window.scrollTo({
+				top: scrollTop,
+				behavior: "instant"
+			});
+		};
+		__expose({});
+		const readMoreClass = computed(() => {
+			return [bem.b(), bem.m("close", !innerVisible.value)];
+		});
+		const contentStyle = computed(() => {
+			return { maxHeight: innerVisible.value ? "none" : props.maxHeight + "px" };
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(readMoreClass.value) }, [createElementVNode("div", {
+				ref: "content",
+				class: normalizeClass(unref(bem).e("content")),
+				style: normalizeStyle(contentStyle.value)
+			}, [renderSlot(_ctx.$slots, "default"), createElementVNode("div", { class: normalizeClass(unref(bem).e("shadow")) }, null, 2)], 6), !hideToggle.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				ref: "toggle",
+				class: normalizeClass(unref(bem).e("toggle")),
+				onTouchstart: onTouchStart,
+				onPointerdown: _cache[0] || (_cache[0] = (...args) => unref(onPointerDown) && unref(onPointerDown)(...args))
+			}, [createVNode(button_default, {
+				class: normalizeClass(unref(bem).e("toggle-btn")),
+				variant: "link",
+				onClick: onButtonClick
+			}, {
+				default: withCtx(() => [createElementVNode("span", null, toDisplayString(toggleText.value), 1), innerVisible.value ? (openBlock(), createBlock(unref(Up), { key: 0 })) : (openBlock(), createBlock(unref(Down), { key: 1 }))]),
+				_: 1
+			}, 8, ["class"])], 34)) : createCommentVNode("v-if", true)], 2);
+		};
+	}
+});
+//#endregion
+export { read_more_default as default };

package/components/result/common.d.ts

@@ -0,0 +1,13 @@
+import { type DefaultProps } from '../config';
+export interface ResultProps {
+    status?: 'success' | 'info' | 'warning' | 'error' | 'question';
+    title?: string;
+    description?: string;
+}
+export declare const defaultResultProps: DefaultProps<ResultProps>;
+export interface ResultSlots {
+    default?(props: Record<string, never>): any;
+    title?(props: Record<string, never>): any;
+    description?(props: Record<string, never>): any;
+    icon?(props: Record<string, never>): any;
+}

package/components/result/common.js

@@ -0,0 +1,4 @@
+//#region packages/sard/components/result/common.ts
+const defaultResultProps = { status: "info" };
+//#endregion
+export { defaultResultProps };

package/components/result/index.css

@@ -0,0 +1 @@
+:root{--s-result-icon-font-size:var(--s-size-4xl);--s-result-color-success:var(--s-color-success);--s-result-color-info:var(--s-color-primary);--s-result-color-warning:var(--s-color-warning);--s-result-color-error:var(--s-color-danger);--s-result-color-question:var(--s-color-primary);--s-result-title-margin-top:var(--s-size);--s-result-title-font-size:var(--s-font-size-xl);--s-result-description-margin-top:var(--s-size-2xs);--s-result-description-font-size:var(--s-font-size);--s-result-description-color:var(--s-text-color-tertiary);--s-result-extra-margin-top:var(--s-size)}.s-result{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.s-result__icon{display:flex;font-size:var(--s-result-icon-font-size);line-height:var(--s-line-height-none);text-align:center}.s-result__icon--success{color:var(--s-result-color-success)}.s-result__icon--info{color:var(--s-result-color-info)}.s-result__icon--warning{color:var(--s-result-color-warning)}.s-result__icon--error{color:var(--s-result-color-error)}.s-result__icon--question{color:var(--s-result-color-question)}.s-result__title{margin-top:var(--s-result-title-margin-top);font-size:var(--s-result-title-font-size);text-align:center}.s-result__description{margin-top:var(--s-result-description-margin-top);font-size:var(--s-result-description-font-size);color:var(--s-result-description-color);text-align:center}.s-result__extra{margin-top:var(--s-result-extra-margin-top)}

package/components/result/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _Result from './result.vue';
+export declare const Result: EnhancedComponent<typeof _Result>;
+export default Result;
+export type { ResultProps, ResultSlots } from './common';

package/components/result/index.js

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

package/components/result/result.d.ts

@@ -0,0 +1,15 @@
+import { type ResultProps, type ResultSlots } from './common';
+type __VLS_Slots = ResultSlots;
+declare const __VLS_base: import("vue").DefineComponent<ResultProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ResultProps> & Readonly<{}>, {
+    title: string;
+    description: string;
+    status: "success" | "info" | "warning" | "error" | "question";
+}, {}, {}, {}, 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/result/result.js

@@ -0,0 +1,49 @@
+import { createBem } from "../../utils/bem.js";
+import { defaultResultProps } from "./common.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeDefaults, normalizeClass, openBlock, renderSlot, toDisplayString, unref, useSlots } from "vue";
+import { CheckCircleFill, InfoCircleFill, QuestionCircleFill, WarningFill, XOctagonFill } from "@sard/icons";
+//#region packages/sard/components/result/result.vue
+var result_default = /*@__PURE__*/ defineComponent({
+	__name: "result",
+	props: /*@__PURE__*/ mergeDefaults({
+		status: {
+			type: String,
+			required: false
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		description: {
+			type: String,
+			required: false
+		}
+	}, defaultResultProps),
+	setup(__props) {
+		const props = __props;
+		const slots = useSlots();
+		const bem = createBem("result");
+		const iconClass = computed(() => {
+			return [bem.e("icon"), bem.em("icon", props.status)];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(bem).b()) }, [
+				createElementVNode("div", { class: normalizeClass(iconClass.value) }, [renderSlot(_ctx.$slots, "icon", {}, () => [__props.status === "success" ? (openBlock(), createBlock(unref(CheckCircleFill), { key: 0 })) : __props.status === "info" ? (openBlock(), createBlock(unref(InfoCircleFill), { key: 1 })) : __props.status === "warning" ? (openBlock(), createBlock(unref(WarningFill), { key: 2 })) : __props.status === "error" ? (openBlock(), createBlock(unref(XOctagonFill), { key: 3 })) : __props.status === "question" ? (openBlock(), createBlock(unref(QuestionCircleFill), { key: 4 })) : createCommentVNode("v-if", true)])], 2),
+				__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),
+				__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),
+				slots.default ? (openBlock(), createElementBlock("div", {
+					key: 2,
+					class: normalizeClass(unref(bem).e("extra"))
+				}, [renderSlot(_ctx.$slots, "default")], 2)) : createCommentVNode("v-if", true)
+			], 2);
+		};
+	}
+});
+//#endregion
+export { result_default as default };

package/components/rotate-verify/common.d.ts

@@ -0,0 +1,12 @@
+import { type DefaultProps } from '../config';
+import { type SlideVerifySlots, type SlideVerifyProps, type SlideVerifyExpose, type SlideVerifyEmits } from '../slide-verify/common';
+export interface RotateVerifyProps extends SlideVerifyProps {
+    src?: string;
+}
+export declare const defaultRotateVerifyProps: DefaultProps<RotateVerifyProps>;
+export interface RotateVerifySlots extends SlideVerifySlots {
+}
+export interface RotateVerifyEmits extends SlideVerifyEmits {
+}
+export interface RotateVerifyExpose extends SlideVerifyExpose {
+}

package/components/rotate-verify/common.js

@@ -0,0 +1,4 @@
+//#region packages/sard/components/rotate-verify/common.ts
+const defaultRotateVerifyProps = { resetWhenError: true };
+//#endregion
+export { defaultRotateVerifyProps };

package/components/rotate-verify/index.css

@@ -0,0 +1 @@
+:root{--s-rotate-verify-image-size:128px;--s-rotate-verify-image-margin-bottom:var(--s-size-lg)}.s-rotate-verify__image{display:flex;width:var(--s-rotate-verify-image-size);height:var(--s-rotate-verify-image-size);margin:0 auto var(--s-rotate-verify-image-margin-bottom);border-radius:50%;overflow:hidden;object-fit:cover}

package/components/rotate-verify/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _RotateVerify from './rotate-verify.vue';
+export declare const RotateVerify: EnhancedComponent<typeof _RotateVerify>;
+export default RotateVerify;
+export type { RotateVerifyProps, RotateVerifySlots, RotateVerifyEmits, RotateVerifyExpose, } from './common';

package/components/rotate-verify/index.js

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

package/components/rotate-verify/rotate-verify.d.ts

@@ -0,0 +1,31 @@
+import { type RotateVerifyProps, type RotateVerifySlots, type RotateVerifyExpose } from './common';
+type __VLS_Slots = RotateVerifySlots;
+declare const __VLS_base: import("vue").DefineComponent<RotateVerifyProps, RotateVerifyExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    start: (event: any) => any;
+    end: (event: any) => any;
+    change: (percent: number) => any;
+    move: (event: any) => any;
+}, string, import("vue").PublicProps, Readonly<RotateVerifyProps> & Readonly<{
+    onStart?: ((event: any) => any) | undefined;
+    onEnd?: ((event: any) => any) | undefined;
+    onChange?: ((percent: number) => any) | undefined;
+    onMove?: ((event: any) => any) | undefined;
+}>, {
+    text: string;
+    disabled: boolean;
+    src: string;
+    errorText: string;
+    targetPos: number;
+    successText: string;
+    resetWhenError: boolean;
+    showTarget: boolean;
+    verify: (result: import("../index.ts").SlideVerifyResult) => Promise<boolean> | 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/rotate-verify/rotate-verify.js

@@ -0,0 +1,106 @@
+import { createBem } from "../../utils/bem.js";
+import slide_verify_default from "../slide-verify/slide-verify.js";
+import { defaultRotateVerifyProps } from "./common.js";
+import { computed, createElementBlock, createElementVNode, createVNode, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, openBlock, ref, unref } from "vue";
+//#region packages/sard/components/rotate-verify/rotate-verify.vue
+const _hoisted_1 = ["src"];
+var rotate_verify_default = /*@__PURE__*/ defineComponent({
+	__name: "rotate-verify",
+	props: /*@__PURE__*/ mergeDefaults({
+		src: {
+			type: String,
+			required: false
+		},
+		targetPos: {
+			type: Number,
+			required: false
+		},
+		text: {
+			type: String,
+			required: false
+		},
+		successText: {
+			type: String,
+			required: false
+		},
+		errorText: {
+			type: String,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		resetWhenError: {
+			type: Boolean,
+			required: false
+		},
+		showTarget: {
+			type: Boolean,
+			required: false
+		},
+		verify: {
+			type: Function,
+			required: false
+		}
+	}, defaultRotateVerifyProps),
+	emits: [
+		"start",
+		"move",
+		"end",
+		"change"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("rotate-verify");
+		const percent = ref(0);
+		const targetDegree = computed(() => (props.targetPos ?? 100) / 100 * 360);
+		const slideDegree = computed(() => percent.value / 100 * 360);
+		const onChange = (value) => {
+			percent.value = value;
+			emit("change", value);
+		};
+		const slideVerifyRef = ref();
+		const reset = () => {
+			slideVerifyRef.value?.reset();
+		};
+		__expose({ reset });
+		const imageStyle = computed(() => {
+			return { transform: `rotate(${targetDegree.value}deg) rotate(${-slideDegree.value}deg)` };
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(bem).b()) }, [createElementVNode("img", {
+				class: normalizeClass(unref(bem).e("image")),
+				style: normalizeStyle(imageStyle.value),
+				src: __props.src
+			}, null, 14, _hoisted_1), createVNode(slide_verify_default, {
+				ref_key: "slideVerifyRef",
+				ref: slideVerifyRef,
+				"target-pos": __props.targetPos,
+				text: __props.text,
+				"success-text": __props.successText,
+				"error-text": __props.errorText,
+				disabled: __props.disabled,
+				"reset-when-error": __props.resetWhenError,
+				"show-target": __props.showTarget,
+				verify: __props.verify,
+				onStart: _cache[0] || (_cache[0] = ($event) => emit("start", $event)),
+				onMove: _cache[1] || (_cache[1] = ($event) => emit("move", $event)),
+				onEnd: _cache[2] || (_cache[2] = ($event) => emit("end", $event)),
+				onChange
+			}, null, 8, [
+				"target-pos",
+				"text",
+				"success-text",
+				"error-text",
+				"disabled",
+				"reset-when-error",
+				"show-target",
+				"verify"
+			])], 2);
+		};
+	}
+});
+//#endregion
+export { rotate_verify_default as default };

package/components/scroll-list/common.d.ts

@@ -0,0 +1,15 @@
+import type { DefaultProps } from '../config';
+export interface ScrollListProps {
+    scrollbarBg?: string;
+    scrollbarWidth?: number;
+    thumbBg?: string;
+}
+export declare const defaultScrollListProps: DefaultProps<ScrollListProps>;
+export interface ScrollListSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface ScrollListEmits {
+    (e: 'scroll', event: Event): void;
+}
+export interface ScrollListExpose {
+}

package/components/scroll-list/common.js

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

package/components/scroll-list/index.css

@@ -0,0 +1 @@
+:root{--s-scroll-list-scrollbar-width:50px;--s-scroll-list-scrollbar-height:4px;--s-scroll-list-scrollbar-margin-top:var(--s-size);--s-scroll-list-scrollbar-bg:var(--s-fill-color-secondary);--s-scroll-list-scrollbar-thumb-bg:var(--s-color-primary)}.s-scroll-list__scroll{overflow-x:auto;overflow-y:hidden}.s-scroll-list__wrapper{display:inline-flex}.s-scroll-list__scrollbar{position:relative;width:var(--s-scroll-list-scrollbar-width);height:var(--s-scroll-list-scrollbar-height);margin-top:var(--s-scroll-list-scrollbar-margin-top);margin-inline-start:auto;margin-inline-end:auto;border-radius:var(--s-border-radius-full);background:var(--s-scroll-list-scrollbar-bg)}.s-scroll-list__scrollbar-thumb{position:absolute;top:0;left:0;width:0;height:100%;border-radius:var(--s-border-radius-full);background:var(--s-scroll-list-scrollbar-thumb-bg)}

package/components/scroll-list/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _ScrollList from './scroll-list.vue';
+export declare const ScrollList: EnhancedComponent<typeof _ScrollList>;
+export default ScrollList;
+export type { ScrollListProps, ScrollListSlots, ScrollListEmits, ScrollListExpose } from './common';

package/components/scroll-list/index.js

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

package/components/scroll-list/scroll-list.d.ts

@@ -0,0 +1,19 @@
+import { type ScrollListProps, type ScrollListSlots } from './common';
+type __VLS_Slots = ScrollListSlots;
+declare const __VLS_base: import("vue").DefineComponent<ScrollListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    scroll: (event: Event) => any;
+}, string, import("vue").PublicProps, Readonly<ScrollListProps> & Readonly<{
+    onScroll?: ((event: Event) => any) | undefined;
+}>, {
+    scrollbarBg: string;
+    scrollbarWidth: number;
+    thumbBg: 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/scroll-list/scroll-list.js

@@ -0,0 +1,87 @@
+import { createBem } from "../../utils/bem.js";
+import { useResizeObserver } from "../../use/useResizeObserver.js";
+import { defaultScrollListProps } from "./common.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, unref, useTemplateRef } from "vue";
+//#region packages/sard/components/scroll-list/scroll-list.vue
+var scroll_list_default = /*@__PURE__*/ defineComponent({
+	__name: "scroll-list",
+	props: /*@__PURE__*/ mergeDefaults({
+		scrollbarBg: {
+			type: String,
+			required: false
+		},
+		scrollbarWidth: {
+			type: Number,
+			required: false
+		},
+		thumbBg: {
+			type: String,
+			required: false
+		}
+	}, defaultScrollListProps),
+	emits: ["scroll"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("scroll-list");
+		const scrollRef = useTemplateRef("scroll");
+		const wrapperRef = useTemplateRef("wrapper");
+		const scrollLeft = ref(0);
+		const scrollWidth = ref(0);
+		const clientWidth = ref(0);
+		const update = () => {
+			clientWidth.value = scrollRef.value.clientWidth;
+			scrollWidth.value = scrollRef.value.scrollWidth;
+		};
+		useResizeObserver(wrapperRef, () => {
+			update();
+		});
+		useResizeObserver(scrollRef, () => {
+			update();
+		});
+		const onScroll = (event) => {
+			scrollLeft.value = scrollRef.value.scrollLeft;
+			emit("scroll", event);
+		};
+		const scrollbarStyle = computed(() => {
+			return {
+				width: props.scrollbarWidth || "",
+				backgroundColor: props.scrollbarBg
+			};
+		});
+		const thumbWidth = computed(() => {
+			let width = clientWidth.value / scrollWidth.value;
+			if (!Number.isFinite(width)) width = 0;
+			return width;
+		});
+		const hideScrollbar = computed(() => thumbWidth.value >= 1);
+		const thumbStyle = computed(() => {
+			let offset = Math.abs(scrollLeft.value) / scrollWidth.value;
+			if (!Number.isFinite(offset)) offset = 0;
+			return {
+				insetInlineStart: offset * 100 + "%",
+				width: thumbWidth.value * 100 + "%",
+				backgroundColor: props.thumbBg
+			};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(bem).b()) }, [createElementVNode("div", {
+				ref: "scroll",
+				class: normalizeClass(unref(bem).e("scroll")),
+				onScroll
+			}, [createElementVNode("div", {
+				ref: "wrapper",
+				class: normalizeClass(unref(bem).e("wrapper"))
+			}, [renderSlot(_ctx.$slots, "default")], 2)], 34), !hideScrollbar.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(unref(bem).e("scrollbar")),
+				style: normalizeStyle(scrollbarStyle.value)
+			}, [createElementVNode("div", {
+				class: normalizeClass(unref(bem).e("scrollbar-thumb")),
+				style: normalizeStyle(thumbStyle.value)
+			}, null, 6)], 6)) : createCommentVNode("v-if", true)], 2);
+		};
+	}
+});
+//#endregion
+export { scroll_list_default as default };

package/components/scroll-spy/common.d.ts

@@ -0,0 +1,32 @@
+import type { InjectionKey } from 'vue';
+export interface ScrollSpyProps {
+    modelValue?: string | number;
+    offset?: number;
+    disabled?: boolean;
+}
+export interface ScrollSpySlots {
+    default?(props: Record<string, never>): any;
+}
+export interface ScrollSpyEmits {
+    (e: 'update:modelValue', value: number | string): void;
+    (e: 'change', value: number | string): void;
+}
+export interface ScrollSpyExpose {
+    scrollTo: (name: string | number) => void;
+    update: () => void;
+}
+export interface ScrollSpyContext {
+    register: (name: string | number, getRect: () => DOMRect) => void;
+    unregister: (name: string | number) => void;
+}
+export declare const scrollSpyContextKey: InjectionKey<ScrollSpyContext>;
+export interface ScrollSpyAnchorProps {
+    name: string | number;
+}
+export interface ScrollSpyAnchorSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface ScrollSpyAnchorEmits {
+}
+export interface ScrollSpyAnchorExpose {
+}

package/components/scroll-spy/common.js

@@ -0,0 +1,4 @@
+//#region packages/sard/components/scroll-spy/common.ts
+const scrollSpyContextKey = Symbol("scrollSpyContext");
+//#endregion
+export { scrollSpyContextKey };

package/components/scroll-spy/index.css

@@ -0,0 +1 @@
+.s-scroll-spy{overflow-x:hidden;overflow-y:auto}.s-scroll-spy:is(.is-disabled){overflow-y:hidden}

package/components/scroll-spy/index.d.ts

@@ -0,0 +1,7 @@
+import { type EnhancedComponent } from '../../utils';
+import _ScrollSpy from './scroll-spy.vue';
+import _ScrollSpyAnchor from './scroll-spy-anchor.vue';
+export declare const ScrollSpy: EnhancedComponent<typeof _ScrollSpy>;
+export declare const ScrollSpyAnchor: EnhancedComponent<typeof _ScrollSpyAnchor>;
+export default ScrollSpy;
+export type { ScrollSpyProps, ScrollSpySlots, ScrollSpyEmits, ScrollSpyExpose, ScrollSpyAnchorProps, ScrollSpyAnchorSlots, ScrollSpyAnchorEmits, ScrollSpyAnchorExpose, } from './common';

package/components/scroll-spy/index.js

@@ -0,0 +1,8 @@
+import { enhanceComponent } from "../../utils/component.js";
+import scroll_spy_default from "./scroll-spy.js";
+import scroll_spy_anchor_default from "./scroll-spy-anchor.js";
+//#region packages/sard/components/scroll-spy/index.ts
+const ScrollSpy = enhanceComponent(scroll_spy_default);
+const ScrollSpyAnchor = enhanceComponent(scroll_spy_anchor_default);
+//#endregion
+export { ScrollSpy, ScrollSpy as default, ScrollSpyAnchor };

package/components/scroll-spy/scroll-spy-anchor.d.ts

@@ -0,0 +1,11 @@
+import { type ScrollSpyAnchorProps, type ScrollSpyAnchorSlots } from './common';
+type __VLS_Slots = ScrollSpyAnchorSlots;
+declare const __VLS_base: import("vue").DefineComponent<ScrollSpyAnchorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ScrollSpyAnchorProps> & Readonly<{}>, {}, {}, {}, {}, 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/scroll-spy/scroll-spy-anchor.js

@@ -0,0 +1,28 @@
+import { scrollSpyContextKey } from "./common.js";
+import { createElementBlock, defineComponent, inject, onBeforeMount, openBlock, renderSlot, useTemplateRef } from "vue";
+//#region packages/sard/components/scroll-spy/scroll-spy-anchor.vue
+const _hoisted_1 = { ref: "anchor" };
+var scroll_spy_anchor_default = /*@__PURE__*/ defineComponent({
+	__name: "scroll-spy-anchor",
+	props: { name: {
+		type: [String, Number],
+		required: true
+	} },
+	setup(__props) {
+		const props = __props;
+		const context = inject(scrollSpyContextKey, null);
+		if (!context) throw new Error("ScrollSpyAnchor must be included in ScrollSpy.");
+		const anchorRef = useTemplateRef("anchor");
+		const getRect = () => {
+			return anchorRef.value.getBoundingClientRect();
+		};
+		onBeforeMount(() => {
+			context.register(props.name, getRect);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")], 512);
+		};
+	}
+});
+//#endregion
+export { scroll_spy_anchor_default as default };