sard 1.1.0 → 1.2.1

package/components/ellipsis/ellipsis.vue.js

@@ -1,8 +1,9 @@
 import { createBem } from "../../utils/bem.js";
 import { useResizeObserver } from "../../use/useResizeObserver.js";
 import { defaultEllipsisProps } from "./common.js";
-import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeDefaults, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, toDisplayString, unref, useModel, useTemplateRef, watch } from "vue";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, onMounted, openBlock, ref, toDisplayString, unref, useModel, useTemplateRef, watch } from "vue";
 //#region packages/sard/components/ellipsis/ellipsis.vue
+const HEIGHT_TOLERANCE = .5;
 var ellipsis_default = /*@__PURE__*/ defineComponent({
 	__name: "ellipsis",
 	props: /*@__PURE__*/ mergeDefaults({
@@ -40,6 +41,10 @@ var ellipsis_default = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const bem = createBem("ellipsis");
+		const measureClass = bem.e("measure");
+		const actionClass = bem.e("action");
+		/** 测量层里的按钮占位：只负责排版占位，不带 __action 类，避免同一个类名在 DOM 里出现两次 */
+		const measureActionClass = bem.e("measure-action");
 		const innerExpanded = useModel(props, "expanded");
 		const onToggle = () => {
 			const expanded = !innerExpanded.value;
@@ -53,58 +58,73 @@ var ellipsis_default = /*@__PURE__*/ defineComponent({
 			return innerExpanded.value ? props.collapseText : props.expandText;
 		});
 		const rootRef = useTemplateRef("root");
-		const fullRef = useTemplateRef("full");
-		const lineRef = useTemplateRef("line");
-		const calcRef = useTemplateRef("calc");
+		const measureRef = useTemplateRef("measure");
 		const isOverflow = ref(false);
 		const truncatedContent = ref(props.content);
-		const measureContent = ref(props.content);
 		const resizeWidth = ref(0);
-		const initialized = ref(false);
 		const isMeasuring = ref(true);
-		let updateToken = 0;
+		/** 一轮探测的判定容差（px） */
 		const getCharacters = (content) => {
 			return Array.from(content);
 		};
-		const buildEllipsisText = (content, keepCount, position, dots) => {
-			const characters = getCharacters(content);
-			if (keepCount >= characters.length) return content;
+		const buildEllipsisText = (characters, keepCount, position, dots) => {
+			const total = characters.length;
+			if (keepCount >= total) return characters.join("");
 			if (keepCount <= 0) return dots;
-			if (position === "start") return dots + characters.slice(characters.length - keepCount).join("");
+			if (position === "start") return dots + characters.slice(total - keepCount).join("");
 			if (position === "middle") {
 				const leftCount = Math.ceil(keepCount / 2);
 				const rightCount = Math.floor(keepCount / 2);
-				return characters.slice(0, leftCount).join("") + dots + characters.slice(characters.length - rightCount).join("");
+				return characters.slice(0, leftCount).join("") + dots + characters.slice(total - rightCount).join("");
 			}
 			return characters.slice(0, keepCount).join("") + dots;
 		};
-		const getHeight = (el) => {
-			return el.getBoundingClientRect().height;
-		};
-		const update = async () => {
-			const token = ++updateToken;
+		/**
+		* 测量层里的两个节点，挂载后建一次就复用。
+		* 不用模板声明是因为 `white-space: pre-wrap` 会把模板的换行缩进变成真实空格/空行，
+		* 量高度时全算进去。
+		*/
+		let measureText;
+		let measureAction;
+		function ensureMeasureDom(measure) {
+			if (measureText?.parentElement === measure) return;
+			measureText = document.createElement("span");
+			measureAction = document.createElement("span");
+			measureAction.className = measureActionClass;
+			measure.replaceChildren(measureText, measureAction);
+		}
+		/**
+		* 写入一轮要测量的内容。
+		* withAction 为 false 时把按钮藏起来，用来量「纯正文」到底占几行。
+		*/
+		function writeMeasure(text, withAction) {
+			if (!measureText || !measureAction) return;
+			measureText.textContent = text;
+			measureAction.textContent = ` ${props.expandText ?? ""}`;
+			measureAction.style.display = withAction && hasAction.value ? "" : "none";
+		}
+		const measureHeight = () => measureRef.value?.getBoundingClientRect().height ?? 0;
+		const update = () => {
 			const content = props.content || "";
+			const measure = measureRef.value;
+			if (!measure) return;
+			ensureMeasureDom(measure);
 			isMeasuring.value = true;
 			if (!content) {
-				truncatedContent.value = content;
-				measureContent.value = content;
+				truncatedContent.value = "";
 				isOverflow.value = false;
-				initialized.value = true;
-				if (token === updateToken) isMeasuring.value = false;
+				isMeasuring.value = false;
 				return;
 			}
-			measureContent.value = content;
-			await nextTick();
-			if (token !== updateToken) return;
-			const fullHeight = getHeight(fullRef.value);
-			const lineHeight = getHeight(lineRef.value);
-			if (token !== updateToken) return;
+			writeMeasure(content, false);
+			measure.style.whiteSpace = "nowrap";
+			const lineHeight = measureHeight();
+			measure.style.whiteSpace = "";
 			const clampHeight = lineHeight * props.rows;
-			if (!(fullHeight - clampHeight > .5)) {
+			if (measureHeight() - clampHeight <= HEIGHT_TOLERANCE) {
 				truncatedContent.value = content;
 				isOverflow.value = false;
-				initialized.value = true;
-				if (token === updateToken) isMeasuring.value = false;
+				isMeasuring.value = false;
 				return;
 			}
 			const characters = getCharacters(content);
@@ -113,23 +133,15 @@ var ellipsis_default = /*@__PURE__*/ defineComponent({
 			let best = 0;
 			while (low <= high) {
 				const middle = Math.floor((low + high) / 2);
-				const nextText = buildEllipsisText(content, middle, props.position, props.dots);
-				measureContent.value = nextText;
-				await nextTick();
-				if (token !== updateToken) return;
-				const height = getHeight(calcRef.value);
-				if (token !== updateToken) return;
-				if (height <= clampHeight + .5) {
+				writeMeasure(buildEllipsisText(characters, middle, props.position, props.dots), true);
+				if (measureHeight() <= clampHeight + HEIGHT_TOLERANCE) {
 					best = middle;
 					low = middle + 1;
 				} else high = middle - 1;
 			}
-			const nextTruncatedContent = buildEllipsisText(content, best, props.position, props.dots);
-			if (token !== updateToken) return;
-			truncatedContent.value = nextTruncatedContent;
+			truncatedContent.value = buildEllipsisText(characters, best, props.position, props.dots);
 			isOverflow.value = true;
-			initialized.value = true;
-			if (token === updateToken) isMeasuring.value = false;
+			isMeasuring.value = false;
 		};
 		useResizeObserver(rootRef, (size) => {
 			if (resizeWidth.value && Math.abs(size.width - resizeWidth.value) <= .5) return;
@@ -140,7 +152,8 @@ var ellipsis_default = /*@__PURE__*/ defineComponent({
 			() => props.content,
 			() => props.rows,
 			() => props.position,
-			() => props.dots
+			() => props.dots,
+			() => props.expandText
 		], () => {
 			update();
 		});
@@ -177,24 +190,15 @@ var ellipsis_default = /*@__PURE__*/ defineComponent({
 					style: normalizeStyle(contentStyle.value)
 				}, [createTextVNode(toDisplayString(displayContent.value) + " ", 1), showAction.value ? (openBlock(), createElementBlock("span", {
 					key: 0,
-					class: normalizeClass(unref(bem).e("action")),
+					class: normalizeClass(unref(actionClass)),
 					onClick: onToggle
 				}, toDisplayString(actionText.value), 3)) : createCommentVNode("v-if", true)], 6),
+				createCommentVNode(" 唯一的测量层：整段高度、单行高度、二分候选都在这一块里量。\n         内容是空的，两个 span（正文 + 展开按钮）由 JS 建、由 JS 直接改 textContent，\n         每轮探测只有「一次写入 + 一次读取」，不触发组件重渲染。\n         绝对定位 + contain，测量引起的布局失效既不会撑开可见布局，也不会传到祖先链。 "),
 				createElementVNode("div", {
-					ref: "full",
-					class: normalizeClass(unref(bem).e("measure"))
-				}, toDisplayString(props.content), 3),
-				createElementVNode("div", {
-					ref: "line",
-					class: normalizeClass([unref(bem).e("measure"), unref(bem).em("measure", "line")])
-				}, toDisplayString(props.content), 3),
-				createElementVNode("div", {
-					ref: "calc",
-					class: normalizeClass(unref(bem).e("measure"))
-				}, [createTextVNode(toDisplayString(measureContent.value) + " ", 1), hasAction.value ? (openBlock(), createElementBlock("span", {
-					key: 0,
-					class: normalizeClass(unref(bem).e("action"))
-				}, toDisplayString(props.expandText), 3)) : createCommentVNode("v-if", true)], 2)
+					ref: "measure",
+					class: normalizeClass(unref(measureClass)),
+					"aria-hidden": "true"
+				}, null, 2)
 			], 2);
 		};
 	}

package/components/ellipsis/index.css

@@ -1 +1 @@
-:root{--s-ellipsis-action-margin-start:var(--s-size-2xs);--s-ellipsis-action-color:var(--s-color-primary)}.s-ellipsis{position:relative}.s-ellipsis__content{display:block;white-space:pre-wrap;word-break:break-all}.s-ellipsis__content--clamp{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.s-ellipsis__action{position:relative;display:inline;margin-inline-start:var(--s-ellipsis-action-margin-start);color:var(--s-ellipsis-action-color);line-height:inherit;cursor:pointer;vertical-align:bottom;white-space:nowrap}.s-ellipsis__measure{position:absolute;display:block;left:0;top:0;z-index:-1;width:100%;opacity:0;pointer-events:none;white-space:pre-wrap;word-break:break-all}.s-ellipsis__measure--line{white-space:nowrap}
+:root{--s-ellipsis-action-margin-start:var(--s-size-2xs);--s-ellipsis-action-color:var(--s-color-primary)}.s-ellipsis{position:relative}.s-ellipsis__content{display:block;white-space:pre-wrap;word-break:break-all}.s-ellipsis__content--clamp{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.s-ellipsis__action{position:relative;display:inline;margin-inline-start:var(--s-ellipsis-action-margin-start);color:var(--s-ellipsis-action-color);line-height:inherit;cursor:pointer;vertical-align:bottom;white-space:nowrap}.s-ellipsis__measure-action{margin-inline-start:var(--s-ellipsis-action-margin-start);line-height:inherit;vertical-align:bottom;white-space:nowrap}.s-ellipsis__measure{position:absolute;display:block;left:0;top:0;z-index:-1;width:100%;opacity:0;pointer-events:none;white-space:pre-wrap;word-break:break-all;contain:layout style}

package/components/image/image.vue.d.ts

@@ -12,9 +12,9 @@ declare const __VLS_base: import("vue").DefineComponent<ImageProps, ImageExpose,
     width: string;
     height: string;
     background: string;
-    mode: import("./common").ImageMode;
     fade: boolean;
     loading: "eager" | "lazy";
+    mode: import("./common").ImageMode;
     shape: "circle" | "square";
     src: string;
     showError: boolean;

package/components/index.d.ts

@@ -114,6 +114,7 @@ export * from './table';
 export * from './tabs';
 export * from './tag';
 export * from './text';
+export * from './text-shrink';
 export * from './timeline';
 export * from './toast';
 export * from './tree';

package/components/index.js

@@ -134,6 +134,7 @@ import { Table } from "./table/index.js";
 import { Tab, Tabs } from "./tabs/index.js";
 import { Tag } from "./tag/index.js";
 import { Text } from "./text/index.js";
+import { TextShrink } from "./text-shrink/index.js";
 import { Timeline, TimelineItem } from "./timeline/index.js";
 import { createToast, toast } from "./toast/imperative.js";
 import { Toast } from "./toast/index.js";
@@ -141,4 +142,4 @@ import { Tree, TreeBranch, TreeNode } from "./tree/index.js";
 import { Upload, UploadPreview } from "./upload/index.js";
 import { Waterfall, WaterfallItem, WaterfallLoad } from "./waterfall/index.js";
 import { Watermark } from "./watermark/index.js";
-export { ADD_SWIPER_CONTEXT_KEY, Accordion, AccordionItem, ActionSheet, ActionSheetItem, Alert, Avatar, AvatarGroup, BackTop, Badge, Barcode, Button, Calendar, CalendarInput, CalendarPopout, CancelError, Card, Cascader, CascaderInput, CascaderPopout, Checkbox, CheckboxGroup, CheckboxInput, CheckboxPopout, Col, Collapse, ColorPicker, ColorPickerInput, ColorPickerPopout, Compact, CoolIcon, CountDown, CountTo, CropImage, Danmaku, DateStrip, DatetimePicker, DatetimePickerInput, DatetimePickerPopout, DatetimeRangePicker, DatetimeRangePickerInput, DatetimeRangePickerPopout, Descriptions, DescriptionsItem, Dialog, Divider, Dnd, DndHandle, DndItem, Dropdown, DropdownItem, Ellipsis, Empty, Fab, FabItem, Flex, FloatingBubble, FloatingPanel, Form, FormItem, FormItemPlain, FormPlain, Grid, GridItem, Image, Indexes, IndexesAnchor, IndexesNav, Input, Keyboard, KeyboardPopout, List, ListItem, LoadMore, LoadMoreStatus, Loading, Marquee, Menu, MenuItem, Motion, Navbar, NavbarItem, NavbarPit, NoticeBar, Notify, Overlay, Pagination, PasswordInput, Picker, PickerInput, PickerPopout, PickerView, PickerViewColumn, Popout, PopoutInput, Popover, Popup, PreviewImage, ProgressBar, ProgressCircle, PullDownRefresh, PuzzleVerify, Qrcode, REMOVE_SWIPER_CONTEXT_KEY, Radio, RadioGroup, RadioInput, RadioPopout, Rate, ReadMore, Result, RotateVerify, Row, SWIPER_AUTO_HEIGHT_KEY, ScrollList, ScrollSpy, ScrollSpyAnchor, Search, Segmented, SegmentedItem, Select, SelectInput, SelectOption, SelectOptionGroup, SelectPopout, ShareSheet, ShareSheetIcon, ShareSheetItem, ShareSheetRow, Sidebar, SidebarItem, Signature, Skeleton, SkeletonAvatar, SkeletonBlock, SkeletonParagraph, SkeletonTitle, SlideVerify, Slider, StatusBar, Step, Stepper, Steps, Sticky, StickyBox, SwipeAction, Swiper, SwiperItem, Switch, Tab, Tabbar, TabbarItem, TabbarPit, Table, Tabs, Tag, Text, Timeline, TimelineItem, Toast, Tree, TreeBranch, TreeNode, Upload, UploadPreview, Waterfall, WaterfallItem, WaterfallLoad, Watermark, actionSheet, createActionSheet, createCropImage, createDialog, createNotify, createPreviewImage, createToast, cropImage, dialog, flexGap, formatTime, getCurrentTime, isCancelError, notify, omitFormPopoutProps, partitionPopoutInputProps, plateEnglishLetterKeys, plateProvinceKeys, plateSuffixKeys, popupManager, previewImage, safeAreaInsets, toast, useCountDown, useElementBackTop, useFormContext, useFormItem, useFormItemContext, useFormPopout, useInPopup, useMotioning, usePageBackTop, usePopoutInput, usePopupEnter, usePopupVisibleHookProvide, windowInfo };
+export { ADD_SWIPER_CONTEXT_KEY, Accordion, AccordionItem, ActionSheet, ActionSheetItem, Alert, Avatar, AvatarGroup, BackTop, Badge, Barcode, Button, Calendar, CalendarInput, CalendarPopout, CancelError, Card, Cascader, CascaderInput, CascaderPopout, Checkbox, CheckboxGroup, CheckboxInput, CheckboxPopout, Col, Collapse, ColorPicker, ColorPickerInput, ColorPickerPopout, Compact, CoolIcon, CountDown, CountTo, CropImage, Danmaku, DateStrip, DatetimePicker, DatetimePickerInput, DatetimePickerPopout, DatetimeRangePicker, DatetimeRangePickerInput, DatetimeRangePickerPopout, Descriptions, DescriptionsItem, Dialog, Divider, Dnd, DndHandle, DndItem, Dropdown, DropdownItem, Ellipsis, Empty, Fab, FabItem, Flex, FloatingBubble, FloatingPanel, Form, FormItem, FormItemPlain, FormPlain, Grid, GridItem, Image, Indexes, IndexesAnchor, IndexesNav, Input, Keyboard, KeyboardPopout, List, ListItem, LoadMore, LoadMoreStatus, Loading, Marquee, Menu, MenuItem, Motion, Navbar, NavbarItem, NavbarPit, NoticeBar, Notify, Overlay, Pagination, PasswordInput, Picker, PickerInput, PickerPopout, PickerView, PickerViewColumn, Popout, PopoutInput, Popover, Popup, PreviewImage, ProgressBar, ProgressCircle, PullDownRefresh, PuzzleVerify, Qrcode, REMOVE_SWIPER_CONTEXT_KEY, Radio, RadioGroup, RadioInput, RadioPopout, Rate, ReadMore, Result, RotateVerify, Row, SWIPER_AUTO_HEIGHT_KEY, ScrollList, ScrollSpy, ScrollSpyAnchor, Search, Segmented, SegmentedItem, Select, SelectInput, SelectOption, SelectOptionGroup, SelectPopout, ShareSheet, ShareSheetIcon, ShareSheetItem, ShareSheetRow, Sidebar, SidebarItem, Signature, Skeleton, SkeletonAvatar, SkeletonBlock, SkeletonParagraph, SkeletonTitle, SlideVerify, Slider, StatusBar, Step, Stepper, Steps, Sticky, StickyBox, SwipeAction, Swiper, SwiperItem, Switch, Tab, Tabbar, TabbarItem, TabbarPit, Table, Tabs, Tag, Text, TextShrink, Timeline, TimelineItem, Toast, Tree, TreeBranch, TreeNode, Upload, UploadPreview, Waterfall, WaterfallItem, WaterfallLoad, Watermark, actionSheet, createActionSheet, createCropImage, createDialog, createNotify, createPreviewImage, createToast, cropImage, dialog, flexGap, formatTime, getCurrentTime, isCancelError, notify, omitFormPopoutProps, partitionPopoutInputProps, plateEnglishLetterKeys, plateProvinceKeys, plateSuffixKeys, popupManager, previewImage, safeAreaInsets, toast, useCountDown, useElementBackTop, useFormContext, useFormItem, useFormItemContext, useFormPopout, useInPopup, useMotioning, usePageBackTop, usePopoutInput, usePopupEnter, usePopupVisibleHookProvide, windowInfo };

package/components/keyboard/keyboard.vue.d.ts

@@ -9,8 +9,8 @@ declare const __VLS_base: import("vue").DefineComponent<KeyboardProps, KeyBoardE
     onDelete?: (() => any) | undefined;
     "onUpdate:mode"?: ((mode: KeyboardPlateMode) => any) | undefined;
 }>, {
-    mode: KeyboardPlateMode;
     type: "number" | "digit" | "idcard" | "random" | "plate";
+    mode: KeyboardPlateMode;
     disabledKey: (key: string) => boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/components/keyboard-popout/common.d.ts

@@ -1,6 +1,6 @@
 import { type DefaultProps } from '../config';
 import { type KeyboardProps, type KeyboardPlateMode, type KeyBoardExpose } from '../keyboard/common';
-import type { MotionEmits } from '../motion';
+import type { MotionEmits } from '../motion/common';
 export interface KeyboardPopoutProps extends KeyboardProps {
     visible?: boolean;
     title?: string;

package/components/keyboard-popout/keyboard-popout.vue.d.ts

@@ -39,10 +39,10 @@ declare const __VLS_base: import("vue").DefineComponent<KeyboardPopoutProps, Key
     "onUpdate:mode"?: ((mode: import("../index.ts").KeyboardPlateMode) => any) | undefined;
 }>, {
     title: string;
-    mode: import("../index.ts").KeyboardPlateMode;
     type: "number" | "digit" | "idcard" | "random" | "plate";
     visible: boolean;
     transparent: boolean;
+    mode: import("../index.ts").KeyboardPlateMode;
     showCancel: boolean;
     showConfirm: boolean;
     showShadow: boolean;

package/components/list/index.css

@@ -1 +1 @@
-:root{--s-list-border-color:var(--s-border-color);--s-list-title-margin-x:var(--s-size);--s-list-title-margin-top:var(--s-size-2xl);--s-list-title-margin-bottom:var(--s-size-xs);--s-list-title-font-size:var(--s-font-size-sm);--s-list-title-line-height:var(--s-line-height-snug);--s-list-title-color:var(--s-text-color-tertiary);--s-list-description-margin-x:var(--s-size);--s-list-description-margin-top:var(--s-size-xs);--s-list-description-font-size:var(--s-font-size-sm);--s-list-description-line-height:var(--s-line-height-snug);--s-list-description-color:var(--s-text-color-tertiary);--s-list-card-border-radius:var(--s-border-radius-lg);--s-list-item-min-height:var(--s-content-height);--s-list-item-padding-x:var(--s-content-padding-x);--s-list-item-padding-y:var(--s-content-padding-y);--s-list-item-bg:var(--s-bg-color-container);--s-list-item-bg-active:var(--s-bg-color-active);--s-list-item-opacity-disabled:var(--s-opacity-disabled);--s-list-item-icon-size:var(--s-size-lg);--s-list-item-icon-margin-end:var(--s-size-sm);--s-list-item-title-font-size:var(--s-font-size);--s-list-item-title-line-height:var(--s-line-height-snug);--s-list-item-value-font-size:var(--s-font-size);--s-list-item-value-line-height:var(--s-line-height-snug);--s-list-item-value-color:var(--s-text-color-tertiary);--s-list-item-description-margin-top:var(--s-size-2xs);--s-list-item-description-font-size:var(--s-font-size-sm);--s-list-item-description-line-height:var(--s-line-height-snug);--s-list-item-description-color:var(--s-text-color-tertiary);--s-list-item-arrow-margin-start:var(--s-size-xs);--s-list-item-arrow-font-size:var(--s-font-size);--s-list-item-arrow-color:var(--s-text-color-tertiary);--s-list-divider-start:var(--s-list-item-padding-x);--s-list-divider-end:var(--s-list-item-padding-x)}.s-list__title{margin-inline-start:var(--s-list-title-margin-x);margin-inline-end:var(--s-list-title-margin-x);margin-top:var(--s-list-title-margin-top);margin-bottom:var(--s-list-title-margin-bottom);font-size:var(--s-list-title-font-size);line-height:var(--s-list-title-line-height);color:var(--s-list-title-color)}.s-list__content{position:relative}.s-list__content::before{position:absolute;top:0;left:0;z-index:1;width:200%;height:200%;border:var(--s-border-width) var(--s-border-style) rgba(0,0,0,0);transform:scale(0.5);transform-origin:0 0;pointer-events:none;touch-action:none;content:"";border-top-color:var(--s-list-border-color);border-bottom-color:var(--s-list-border-color)}.s-list--borderless .s-list__content::before{display:none}.s-list__description{margin-inline-start:var(--s-list-description-margin-x);margin-inline-end:var(--s-list-description-margin-x);margin-top:var(--s-list-description-margin-top);font-size:var(--s-list-description-font-size);line-height:var(--s-list-description-line-height);color:var(--s-list-description-color)}.s-list--card .s-list__content{border-radius:var(--s-list-card-border-radius)}.s-list--not-card .s-list__content{border-radius:0}.s-list--card .s-list__content::before,.s-list--inlaid .s-list__content::before{display:none}.s-list-item{position:relative;display:flex;flex-wrap:nowrap;overflow:hidden;min-height:var(--s-list-item-min-height);padding:var(--s-list-item-padding-y) var(--s-list-item-padding-x);background:var(--s-list-item-bg)}.s-list-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.s-list-item:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.s-list-item::before{position:absolute;z-index:1;pointer-events:none;touch-action:none;opacity:1;content:"";left:0;right:0;transform:scaleY(0.5);top:0;border-top:var(--s-border-width) var(--s-border-style) var(--s-border-color);transform-origin:top center;inset-inline-start:var(--s-list-divider-start);inset-inline-end:var(--s-list-divider-end)}.s-list-item--borderless::before{display:none}.s-list-item:first-child::before{display:none}.s-list-item--hover{cursor:pointer}.s-list-item--hover:active{background:var(--s-list-item-bg-active)}.s-list-item--custom{flex-direction:column}.s-list-item__icon{display:flex;justify-content:center;align-items:center;flex:none;margin-inline-end:var(--s-list-item-icon-margin-end);font-size:var(--s-list-item-icon-size)}.s-list-item__title{display:flex;flex-direction:column;justify-content:center;flex:auto;font-size:var(--s-list-item-title-font-size);line-height:var(--s-list-item-title-line-height);word-break:break-all}.s-list-item__description{margin-top:var(--s-list-item-description-margin-top);font-size:var(--s-list-item-description-font-size);line-height:var(--s-list-item-description-line-height);color:var(--s-list-item-description-color);word-break:break-all}.s-list-item__value{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;flex:auto;font-size:var(--s-list-item-value-font-size);line-height:var(--s-list-item-value-line-height);color:var(--s-list-item-value-color);text-align:right;word-break:break-all}.s-list-item__arrow{display:flex;align-items:center;justify-content:center;margin-inline-start:var(--s-list-item-arrow-margin-start);font-size:var(--s-list-item-arrow-font-size);color:var(--s-list-item-arrow-color)}:root[dir=rtl] .s-list-item__arrow{transform:scaleX(-1)}
+:root{--s-list-border-color:var(--s-border-color);--s-list-title-margin-x:var(--s-size);--s-list-title-margin-top:var(--s-size-2xl);--s-list-title-margin-bottom:var(--s-size-xs);--s-list-title-font-size:var(--s-font-size-sm);--s-list-title-line-height:var(--s-line-height-snug);--s-list-title-color:var(--s-text-color-tertiary);--s-list-description-margin-x:var(--s-size);--s-list-description-margin-top:var(--s-size-xs);--s-list-description-font-size:var(--s-font-size-sm);--s-list-description-line-height:var(--s-line-height-snug);--s-list-description-color:var(--s-text-color-tertiary);--s-list-card-border-radius:var(--s-border-radius-lg);--s-list-item-min-height:var(--s-content-height);--s-list-item-padding-x:var(--s-content-padding-x);--s-list-item-padding-y:var(--s-content-padding-y);--s-list-item-bg:var(--s-bg-color-container);--s-list-item-bg-active:var(--s-bg-color-active);--s-list-item-opacity-disabled:var(--s-opacity-disabled);--s-list-item-icon-size:var(--s-size-lg);--s-list-item-icon-margin-end:var(--s-size-sm);--s-list-item-title-font-size:var(--s-font-size);--s-list-item-title-line-height:var(--s-line-height-snug);--s-list-item-value-font-size:var(--s-font-size);--s-list-item-value-line-height:var(--s-line-height-snug);--s-list-item-value-color:var(--s-text-color-tertiary);--s-list-item-description-margin-top:var(--s-size-2xs);--s-list-item-description-font-size:var(--s-font-size-sm);--s-list-item-description-line-height:var(--s-line-height-snug);--s-list-item-description-color:var(--s-text-color-tertiary);--s-list-item-arrow-margin-start:var(--s-size-xs);--s-list-item-arrow-font-size:var(--s-font-size);--s-list-item-arrow-color:var(--s-text-color-tertiary);--s-list-divider-start:var(--s-list-item-padding-x);--s-list-divider-end:var(--s-list-item-padding-x)}.s-list__title{margin-inline-start:var(--s-list-title-margin-x);margin-inline-end:var(--s-list-title-margin-x);margin-top:var(--s-list-title-margin-top);margin-bottom:var(--s-list-title-margin-bottom);font-size:var(--s-list-title-font-size);line-height:var(--s-list-title-line-height);color:var(--s-list-title-color)}.s-list__content{position:relative}.s-list__content::before{position:absolute;top:0;left:0;z-index:1;width:200%;height:200%;border:var(--s-border-width) var(--s-border-style) rgba(0,0,0,0);transform:scale(0.5);transform-origin:0 0;pointer-events:none;touch-action:none;content:"";border-top-color:var(--s-list-border-color);border-bottom-color:var(--s-list-border-color)}.s-list__content>:not(.s-list-item)>.s-list-item{border-radius:0}.s-list__content>:not(.s-list-item)>.s-list-item:not(.s-list-item--borderless)::before{display:block}.s-list__content>:not(.s-list-item):first-child>.s-list-item{border-top-left-radius:inherit;border-top-right-radius:inherit}.s-list__content>:not(.s-list-item):first-child>.s-list-item::before{display:none}.s-list__content>:not(.s-list-item):last-child>.s-list-item{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.s-list--borderless .s-list__content::before{display:none}.s-list__description{margin-inline-start:var(--s-list-description-margin-x);margin-inline-end:var(--s-list-description-margin-x);margin-top:var(--s-list-description-margin-top);font-size:var(--s-list-description-font-size);line-height:var(--s-list-description-line-height);color:var(--s-list-description-color)}.s-list--card .s-list__content{border-radius:var(--s-list-card-border-radius)}.s-list--not-card .s-list__content{border-radius:0}.s-list--card .s-list__content::before,.s-list--inlaid .s-list__content::before{display:none}.s-list-item{position:relative;display:flex;flex-wrap:nowrap;overflow:hidden;min-height:var(--s-list-item-min-height);padding:var(--s-list-item-padding-y) var(--s-list-item-padding-x);background:var(--s-list-item-bg)}.s-list-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.s-list-item:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.s-list-item::before{position:absolute;z-index:1;pointer-events:none;touch-action:none;opacity:1;content:"";left:0;right:0;transform:scaleY(0.5);top:0;border-top:var(--s-border-width) var(--s-border-style) var(--s-border-color);transform-origin:top center;inset-inline-start:var(--s-list-divider-start);inset-inline-end:var(--s-list-divider-end)}.s-list-item--borderless::before{display:none}.s-list-item:first-child::before{display:none}.s-list-item--hover{cursor:pointer}.s-list-item--hover:active{background:var(--s-list-item-bg-active)}.s-list-item--custom{flex-direction:column}.s-list-item__icon{display:flex;justify-content:center;align-items:center;flex:none;margin-inline-end:var(--s-list-item-icon-margin-end);font-size:var(--s-list-item-icon-size)}.s-list-item__title{display:flex;flex-direction:column;justify-content:center;flex:auto;font-size:var(--s-list-item-title-font-size);line-height:var(--s-list-item-title-line-height);word-break:break-all}.s-list-item__description{margin-top:var(--s-list-item-description-margin-top);font-size:var(--s-list-item-description-font-size);line-height:var(--s-list-item-description-line-height);color:var(--s-list-item-description-color);word-break:break-all}.s-list-item__value{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;flex:auto;font-size:var(--s-list-item-value-font-size);line-height:var(--s-list-item-value-line-height);color:var(--s-list-item-value-color);text-align:right;word-break:break-all}.s-list-item__arrow{display:flex;align-items:center;justify-content:center;margin-inline-start:var(--s-list-item-arrow-margin-start);font-size:var(--s-list-item-arrow-font-size);color:var(--s-list-item-arrow-color)}:root[dir=rtl] .s-list-item__arrow{transform:scaleX(-1)}

package/components/load-more/load-more.vue.js

@@ -81,10 +81,10 @@ var load_more_default = /*@__PURE__*/ defineComponent({
 				ref: "loadMore",
 				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, {
+			}, [__props.status === "incomplete" ? renderSlot(_ctx.$slots, "incomplete", {}, () => [createTextVNode(toDisplayString(__props.incompleteText || unref(t)("incompleteText")), 1)], void 0, 0) : __props.status === "loading" ? renderSlot(_ctx.$slots, "loading", {}, () => [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);
+			})], void 0, 1) : __props.status === "complete" ? renderSlot(_ctx.$slots, "complete", {}, () => [createTextVNode(toDisplayString(__props.completeText || unref(t)("completeText")), 1)], void 0, 2) : __props.status === "error" ? renderSlot(_ctx.$slots, "error", {}, () => [createTextVNode(toDisplayString(__props.errorText || unref(t)("errorText")), 1)], void 0, 3) : createCommentVNode("v-if", true)], 2);
 		};
 	}
 });

package/components/loading/loading.vue.js

@@ -76,7 +76,7 @@ var loading_default = /*@__PURE__*/ defineComponent({
 			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(8, (i) => {
+			}, [__props.type === "circular" ? renderSlot(_ctx.$slots, "circular", {}, () => [createElementVNode("div", { class: normalizeClass(unref(bem).e("spinner")) }, null, 2)], void 0, 0) : __props.type === "clock" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, renderList(8, (i) => {
 				return createElementVNode("div", {
 					key: i,
 					class: normalizeClass([

package/components/motion/motion.vue.js

@@ -65,7 +65,7 @@ var motion_default = /*@__PURE__*/ defineComponent({
 			onVisibleHook("leave-cancelled", el);
 		};
 		return (_ctx, _cache) => {
-			return __props.disalbed ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(), createBlock(Transition, {
+			return __props.disalbed ? renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 0) : (openBlock(), createBlock(Transition, {
 				key: 1,
 				type: __props.type,
 				name: mergedName.value,

package/components/notify/common.d.ts

@@ -1,5 +1,5 @@
 import { type DefaultProps } from '../config';
-import type { MotionEmits } from '../motion';
+import type { MotionEmits } from '../motion/common';
 export interface NotifyProps {
     type?: 'primary' | 'success' | 'warning' | 'error';
     message?: string;

package/components/overlay/overlay.vue.js

@@ -1,9 +1,10 @@
 import { createBem } from "../../utils/bem.js";
 import { defaultOverlayProps } from "./common.js";
 import motion_default from "../motion/motion.vue.js";
-import { computed, createBlock, createElementVNode, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, openBlock, renderSlot, vShow, withCtx, withDirectives, withModifiers } from "vue";
+import { computed, createBlock, createElementVNode, defineComponent, mergeDefaults, mergeProps, openBlock, renderSlot, vShow, withCtx, withDirectives, withModifiers } from "vue";
 //#region packages/sard/components/overlay/overlay.vue
 var overlay_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
 	__name: "overlay",
 	props: /*@__PURE__*/ mergeDefaults({
 		visible: {
@@ -42,12 +43,12 @@ var overlay_default = /*@__PURE__*/ defineComponent({
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(motion_default, { name: "fade" }, {
-				default: withCtx(() => [withDirectives(createElementVNode("div", {
-					class: normalizeClass(overlayClass.value),
-					style: normalizeStyle(overlayStyle.value),
+				default: withCtx(() => [withDirectives(createElementVNode("div", mergeProps(_ctx.$attrs, {
+					class: overlayClass.value,
+					style: overlayStyle.value,
 					onClick,
 					onTouchmove: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop", "prevent"]))
-				}, [renderSlot(_ctx.$slots, "default")], 38), [[vShow, __props.visible]])]),
+				}), [renderSlot(_ctx.$slots, "default")], 16), [[vShow, __props.visible]])]),
 				_: 3
 			});
 		};

package/components/picker/picker.vue.js

@@ -3,8 +3,8 @@ import { nestedToMulti } from "../../utils/object.js";
 import { arrayEqual, toArray } from "../../utils/array.js";
 import { useOptionKeys } from "../../use/useOptionKeys.js";
 import { defaultPickerProps, getCascaderValidIndexes, getColumnsType, getIndexesByValue, getMaySingleValueByOptions, getOptionsByIndexes } from "./common.js";
-import picker_view_default from "../picker-view/picker-view.js";
-import picker_view_column_default from "../picker-view/picker-view-column.js";
+import picker_view_default from "../picker-view/picker-view.vue.js";
+import picker_view_column_default from "../picker-view/picker-view-column.vue.js";
 import { Fragment, computed, createBlock, createElementBlock, createTextVNode, createVNode, defineComponent, mergeDefaults, normalizeClass, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useSlots, watch, withCtx } from "vue";
 //#region packages/sard/components/picker/picker.vue
 var picker_default = /*@__PURE__*/ defineComponent({
@@ -82,14 +82,17 @@ var picker_default = /*@__PURE__*/ defineComponent({
 		const pickerViewClass = bem.e("picker-view");
 		const indicatorClass = bem.e("indicator");
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(pickerClass)) }, [createVNode(unref(picker_view_default), {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(pickerClass)) }, [createVNode(picker_view_default, {
 				class: normalizeClass(unref(pickerViewClass)),
 				"indicator-class": unref(indicatorClass),
 				value: columnIndexes.value,
 				onChange
 			}, {
 				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(renderedColumns.value, (column, i) => {
-					return openBlock(), createBlock(unref(picker_view_column_default), { key: i }, {
+					return openBlock(), createBlock(picker_view_column_default, {
+						key: i,
+						"item-count": column.length
+					}, {
 						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(column, (option, j) => {
 							return openBlock(), createElementBlock("div", {
 								key: j,
@@ -101,7 +104,7 @@ var picker_default = /*@__PURE__*/ defineComponent({
 							}, () => [createTextVNode(toDisplayString(unref(optionKeys).getLabel(option)), 1)])], 2);
 						}), 128))]),
 						_: 2
-					}, 1024);
+					}, 1032, ["item-count"]);
 				}), 128))]),
 				_: 3
 			}, 8, [

package/components/picker-popout/common.d.ts

@@ -1,7 +1,7 @@
 import { type PickerSlots, type PickerProps } from '../picker/common';
 import { type DefaultProps } from '../config';
 import { type FormPopoutProps } from '../popout/useFormPopout';
-import type { MotionEmits } from '../motion';
+import type { MotionEmits } from '../motion/common';
 export interface PickerPopoutProps<T> extends FormPopoutProps, PickerProps<T> {
 }
 export declare const defaultPickerPopoutProps: DefaultProps<PickerPopoutProps<any>>;

package/components/picker-view/common.d.ts

@@ -1,4 +1,4 @@
-import type { ClassValue, ComponentInternalInstance, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, StyleValue, WritableComputedRef } from 'vue';
+import type { ClassValue, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, StyleValue, WritableComputedRef } from 'vue';
 import { type DefaultProps } from '../config';
 export declare const pickerViewProps: {
     value: {
@@ -32,6 +32,12 @@ export interface PickerViewEmits {
 export interface PickerViewExpose {
 }
 export interface PickerViewColumnProps {
+    /**
+     * 选项数量。**推荐由知道数据的那一层传入**（如 Picker 会传 `column.length`）：不传时
+     * 回落到观察 DOM 子节点数，而整列重建时 DOM 会有中间态（少到 1 个），会被按列数夹取
+     * 的逻辑误判成 0，导致整列跳回第一行。
+     */
+    itemCount?: number;
 }
 export declare const defaultPickerViewColumnProps: DefaultProps<PickerViewColumnProps>;
 export interface PickerViewColumnSlots {
@@ -41,11 +47,25 @@ export interface PickerViewColumnEmits {
 }
 export interface PickerViewColumnExpose {
 }
+/**
+ * 列的身份句柄：由 `PickerViewColumn` 在 setup 里自建一个普通对象，交给 PickerView
+ * 按登记顺序定位「当前位于第几列」。
+ *
+ * ⚠️ 不要用组件实例（`getCurrentInstance()`）代替它：vapor 渲染子组件期间，它返回的是
+ * **发起本次渲染的组件**（实测三列 PickerViewColumn 都拿到页面组件的实例），据此定位会
+ * 把所有列都算成第 0 列，导致所有列共用同一个 `innerValue[0]`：滚动第一列后取值/写值
+ * 互相串列，级联 Picker 会因此把值夹取到 0（回到第一行）。
+ */
+export interface PickerViewColumnHandle {
+    readonly __pickerViewColumn: true;
+}
 export interface PickerViewContext {
     maskStyle: any;
     maskClass: any;
     indicatorClass: any;
     indicatorStyle: any;
-    getColumnValue: (ins: ComponentInternalInstance) => WritableComputedRef<number>;
+    registerColumn: (handle: PickerViewColumnHandle) => void;
+    unregisterColumn: (handle: PickerViewColumnHandle) => void;
+    getColumnValue: (handle: PickerViewColumnHandle) => WritableComputedRef<number>;
 }
 export declare const pickerViewContextKey: InjectionKey<PickerViewContext>;

package/components/picker-view/index.d.ts

@@ -1,6 +1,6 @@
 import { type EnhancedComponent } from '../../utils';
-import _PickerView from './picker-view';
-import _PickerViewColumn from './picker-view-column';
+import _PickerView from './picker-view.vue';
+import _PickerViewColumn from './picker-view-column.vue';
 export declare const PickerView: EnhancedComponent<typeof _PickerView>;
 export declare const PickerViewColumn: EnhancedComponent<typeof _PickerViewColumn>;
 export default PickerView;

package/components/picker-view/index.js

@@ -1,6 +1,6 @@
 import { enhanceComponent } from "../../utils/component.js";
-import picker_view_default from "./picker-view.js";
-import picker_view_column_default from "./picker-view-column.js";
+import picker_view_default from "./picker-view.vue.js";
+import picker_view_column_default from "./picker-view-column.vue.js";
 //#region packages/sard/components/picker-view/index.ts
 const PickerView = enhanceComponent(picker_view_default);
 const PickerViewColumn = enhanceComponent(picker_view_column_default);

package/components/picker-view/picker-view-column.vue.d.ts

@@ -0,0 +1,19 @@
+import { type PickerViewColumnSlots } from './common';
+type __VLS_Props = {
+    /**
+     * 选项数量。**推荐由知道数据的那一层传入**（如 Picker 会传 `column.length`）：
+     * 不传时回落到观察 DOM 子节点数，但整列重建时 DOM 会有中间态（少到 1 个），
+     * 会被下文的「按列数夹取」误判成 0，导致整列跳回第一行。
+     */
+    itemCount?: number;
+};
+type __VLS_Slots = PickerViewColumnSlots;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & 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;
+    };
+};