sard 1.0.4 → 1.0.5

package/components/cascader/cascader.js

@@ -78,11 +78,11 @@ var cascader_default = /*@__PURE__*/ defineComponent({
 		const emit = __emit;
 		const bem = createBem("cascader");
 		const { t } = useTranslateWithPrefix("cascader");
-		const useOptionKeysReturn = useOptionKeys(props);
+		const optionKeys = useOptionKeys(props);
 		const innerValue = ref();
 		const { treeData, originalTreeData, loadStatus, toStateNodes, setSelectedByNode, updateChecked, setCheckedByNode, isLeaf, getCheckedLeaves, getCheckedNodes, getAncestors, initialize } = useCascaderTree(props, {
 			innerValue,
-			useOptionKeysReturn
+			optionKeys
 		});
 		initialize();
 		const { panels, currentTab, tabsOptions } = useCascaderTabs(props, { treeData });

package/components/cascader/common.d.ts

@@ -54,7 +54,7 @@ export interface CascaderPanel {
     nodes: CascaderStateNode[];
     selected: CascaderStateNode | null;
 }
-export declare function getSelectedOptionsByValue(options: CascaderOption[], value: CascaderValue, useOptionKeysReturn: UseOptionKeysReturn, multiple?: boolean): CascaderOption[] | CascaderOption[][] | undefined;
+export declare function getSelectedOptionsByValue(options: CascaderOption[], value: CascaderValue, optionKeys: UseOptionKeysReturn, multiple?: boolean): CascaderOption[] | CascaderOption[][] | undefined;
 interface CascaderOptionsContext {
     set: (options: CascaderOption[]) => void;
 }

package/components/cascader/common.js

@@ -1,10 +1,10 @@
 import { isNullish } from "../../utils/is.js";
 //#region packages/sard/components/cascader/common.ts
 const defaultCascaderProps = { options: () => [] };
-function getSelectedOptionsByValue(options, value, useOptionKeysReturn, multiple) {
-	const { getValue, getChildren } = useOptionKeysReturn;
+function getSelectedOptionsByValue(options, value, optionKeys, multiple) {
+	const { getValue, getChildren } = optionKeys;
 	if (multiple) {
-		if (Array.isArray(value)) return value.map((item) => getSelectedOptionsByValue(options, item, useOptionKeysReturn)).filter((item) => Array.isArray(item) ? item.length !== 0 : !isNullish(item));
+		if (Array.isArray(value)) return value.map((item) => getSelectedOptionsByValue(options, item, optionKeys)).filter((item) => Array.isArray(item) ? item.length !== 0 : !isNullish(item));
 	} else if (Array.isArray(value)) {
 		const selectedOptions = [];
 		let list = options;
@@ -18,7 +18,7 @@ function getSelectedOptionsByValue(options, value, useOptionKeysReturn, multiple
 		return selectedOptions;
 	} else for (const option of options) {
 		if (Array.isArray(getChildren(option))) {
-			const selectedOptions = getSelectedOptionsByValue(getChildren(option), value, useOptionKeysReturn, multiple);
+			const selectedOptions = getSelectedOptionsByValue(getChildren(option), value, optionKeys, multiple);
 			if (selectedOptions) return [option, ...selectedOptions];
 		}
 		if (getValue(option) === value) return [option];

package/components/cascader/useCascaderTree.d.ts

@@ -2,7 +2,7 @@ import { type Ref } from 'vue';
 import { type CascaderValue, type CascaderOption, type CascaderProps, type CascaderStateNode } from './common';
 import { type UseOptionKeysReturn } from '../../use';
 export declare function useCascaderTree(props: CascaderProps, config: {
-    useOptionKeysReturn: UseOptionKeysReturn;
+    optionKeys: UseOptionKeysReturn;
     innerValue: Ref<CascaderValue | undefined>;
 }): {
     treeData: Ref<{

package/components/cascader/useCascaderTree.js

@@ -4,7 +4,7 @@ import { cascaderOptionsContextKey } from "./common.js";
 import { computed, inject, reactive, ref, shallowRef, watch } from "vue";
 //#region packages/sard/components/cascader/useCascaderTree.ts
 function useCascaderTree(props, config) {
-	const { useOptionKeysReturn: { getValue, getLabel, getDisabled, getIsLeaf, getChildren }, innerValue } = config;
+	const { optionKeys: { getValue, getLabel, getDisabled, getIsLeaf, getChildren }, innerValue } = config;
 	const options = computed(() => props.options || []);
 	const treeData = ref([]);
 	const originalTreeData = shallowRef([]);

package/components/cascader-input/cascader-input.js

@@ -140,13 +140,13 @@ var cascader_input_default = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const slots = useSlots();
 		const emit = __emit;
-		const useOptionKeysReturn = useOptionKeys(props);
+		const optionKeys = useOptionKeys(props);
 		const partitionedProps = partitionPopoutInputProps(props);
 		const { innerVisible, innerValue, inputValue, show, onChange, onClear, onVisibleHook } = usePopoutInput(props, emit, { onClear(value) {
 			emit("update:modelValue", value, []);
 			emit("change", value, []);
 		} });
-		const { getLabel } = useOptionKeysReturn;
+		const { getLabel } = optionKeys;
 		const lazyOptions = shallowRef([]);
 		provide(cascaderOptionsContextKey, { set(options) {
 			lazyOptions.value = options;
@@ -155,7 +155,7 @@ var cascader_input_default = /*@__PURE__*/ defineComponent({
 			return props.lazy && !!props.load ? lazyOptions.value : props.options;
 		});
 		function getOutletText(options, value) {
-			const selectedOptions = getSelectedOptionsByValue(options, value, useOptionKeysReturn, props.multiple);
+			const selectedOptions = getSelectedOptionsByValue(options, value, optionKeys, props.multiple);
 			if (!selectedOptions || selectedOptions.length === 0) return getValueDisplay(value);
 			const labels = selectedOptions.map((option) => {
 				return Array.isArray(option) ? option.map((item) => getLabel(item)) : getLabel(option);

package/components/divider/index.css

@@ -1 +1 @@
-:root{--s-divider-margin-y:var(--s-size);--s-divider-margin-x:var(--s-size-xs);--s-divider-gap:var(--s-size);--s-divider-color:var(--s-text-color-tertiary);--s-divider-border-color:var(--s-border-color);--s-divider-left-width:10%;--s-divider-right-width:10%;--s-divider-vertical-height:1em}.s-divider{display:flex;align-items:center;margin:var(--s-divider-margin-y) 0;gap:var(--s-divider-gap);border-width:0;border-color:var(--s-divider-border-color);color:var(--s-divider-color)}.s-divider::before,.s-divider::after{display:block;flex:1;border-color:inherit;border-style:inherit;border-width:1px 0 0;content:""}.s-divider--only-line::after{display:none}.s-divider--left::before{max-width:var(--s-divider-left-width)}.s-divider--right::after{max-width:var(--s-divider-right-width)}.s-divider--vertical{display:inline-block;height:var(--s-divider-vertical-height);margin:0 var(--s-divider-margin-x);vertical-align:middle}.s-divider--vertical::before{height:100%;border-width:0 0 0 1px}.s-divider--vertical::after{display:none}.s-divider--hairline::before,.s-divider--hairline::after{transform:scaleY(0.5)}.s-divider--vertical.s-divider--hairline::before{transform:scaleX(0.5)}
+:root{--s-divider-margin-y:var(--s-size);--s-divider-margin-x:var(--s-size-xs);--s-divider-gap:var(--s-size);--s-divider-color:var(--s-text-color-fourth);--s-divider-font-size:var(--s-font-size-sm);--s-divider-border-color:var(--s-border-color);--s-divider-left-width:10%;--s-divider-right-width:10%;--s-divider-vertical-height:1em}.s-divider{display:flex;align-items:center;margin:var(--s-divider-margin-y) 0;gap:var(--s-divider-gap);border-width:0;border-color:var(--s-divider-border-color);color:var(--s-divider-color);font-size:var(--s-divider-font-size)}.s-divider::before,.s-divider::after{display:block;flex:1;border-color:inherit;border-style:inherit;border-width:1px 0 0;content:""}.s-divider--only-line::after{display:none}.s-divider--left::before{max-width:var(--s-divider-left-width)}.s-divider--right::after{max-width:var(--s-divider-right-width)}.s-divider--vertical{display:inline-block;height:var(--s-divider-vertical-height);margin:0 var(--s-divider-margin-x);vertical-align:middle}.s-divider--vertical::before{height:100%;border-width:0 0 0 1px}.s-divider--vertical::after{display:none}.s-divider--hairline::before,.s-divider--hairline::after{transform:scaleY(0.5)}.s-divider--vertical.s-divider--hairline::before{transform:scaleX(0.5)}

package/components/picker/common.d.ts

@@ -18,8 +18,8 @@ export interface PickerEmits<T> {
     (e: 'change', value: any, selectedOptions: T[], indexes: number[]): void;
 }
 export declare function getColumnsType<T>(columns: T[] | T[][], { getChildren }: UseOptionKeysReturn): "single" | "multi" | "cascader";
-export declare function getOptionsByIndexes<T>(indexes: number[], columns: T[] | T[][], useOptionKeysReturn: UseOptionKeysReturn): T[];
+export declare function getOptionsByIndexes<T>(indexes: number[], columns: T[] | T[][], optionKeys: UseOptionKeysReturn): T[];
 export declare function getCascaderValidIndexes<T>(indexes: number[], columns: T[] | T[][], { getChildren }: UseOptionKeysReturn): number[];
-export declare function getMaySingleValueByOptions<T>(options: T[], useOptionKeysReturn: UseOptionKeysReturn, columns: T[] | T[][]): any;
-export declare function getIndexesByValue<T>(value: any[], columns: T[] | T[][], useOptionKeysReturn: UseOptionKeysReturn): number[];
-export declare function getInitialValue<T>(columns: T[] | T[][], useOptionKeysReturn: UseOptionKeysReturn): any[];
+export declare function getMaySingleValueByOptions<T>(options: T[], optionKeys: UseOptionKeysReturn, columns: T[] | T[][]): any;
+export declare function getIndexesByValue<T>(value: any[], columns: T[] | T[][], optionKeys: UseOptionKeysReturn): number[];
+export declare function getInitialValue<T>(columns: T[] | T[][], optionKeys: UseOptionKeysReturn): any[];

package/components/picker/common.js

@@ -6,15 +6,15 @@ function getColumnsType(columns, { getChildren }) {
 	if (firstColumn && typeof firstColumn === "object" && Array.isArray(getChildren(firstColumn))) return "cascader";
 	return "single";
 }
-function getOptionsByIndexes(indexes, columns, useOptionKeysReturn) {
-	const { getChildren } = useOptionKeysReturn;
+function getOptionsByIndexes(indexes, columns, optionKeys) {
+	const { getChildren } = optionKeys;
 	function recurse(columns, i = 0) {
 		const option = columns[Math.min(indexes[i], columns.length - 1)];
 		const nextColumn = getChildren(option);
 		if (Array.isArray(nextColumn)) return [option, ...recurse(nextColumn, ++i)];
 		return [option];
 	}
-	switch (getColumnsType(columns, useOptionKeysReturn)) {
+	switch (getColumnsType(columns, optionKeys)) {
 		case "single": return [columns[indexes[0]]];
 		case "multi": return columns.map((column, i) => column[indexes[i]]);
 		case "cascader": return recurse(columns);
@@ -31,14 +31,14 @@ function getCascaderValidIndexes(indexes, columns, { getChildren }) {
 	}
 	return recurse(columns);
 }
-function getMaySingleValueByOptions(options, useOptionKeysReturn, columns) {
-	const { getValue } = useOptionKeysReturn;
+function getMaySingleValueByOptions(options, optionKeys, columns) {
+	const { getValue } = optionKeys;
 	const values = options.map((option) => getValue(option));
-	return getColumnsType(columns, useOptionKeysReturn) === "single" ? values[0] : values;
+	return getColumnsType(columns, optionKeys) === "single" ? values[0] : values;
 }
-function getIndexesByValue(value, columns, useOptionKeysReturn) {
-	const { getValue, getChildren } = useOptionKeysReturn;
-	const type = getColumnsType(columns, useOptionKeysReturn);
+function getIndexesByValue(value, columns, optionKeys) {
+	const { getValue, getChildren } = optionKeys;
+	const type = getColumnsType(columns, optionKeys);
 	function recurse(columns, i = 0) {
 		let index = columns.findIndex((option) => getValue(option) === value[i]);
 		if (index === -1) index = 0;
@@ -54,8 +54,8 @@ function getIndexesByValue(value, columns, useOptionKeysReturn) {
 		return Math.max(optionIndex, 0);
 	});
 }
-function getInitialValue(columns, useOptionKeysReturn) {
-	const { getChildren, getValue } = useOptionKeysReturn;
+function getInitialValue(columns, optionKeys) {
+	const { getChildren, getValue } = optionKeys;
 	function recurse(columns, options) {
 		const option = columns[0];
 		options.push(option);
@@ -63,7 +63,7 @@ function getInitialValue(columns, useOptionKeysReturn) {
 		if (Array.isArray(nextColumn) && nextColumn.length > 0) return recurse(nextColumn, options);
 		return option;
 	}
-	switch (getColumnsType(columns, useOptionKeysReturn)) {
+	switch (getColumnsType(columns, optionKeys)) {
 		case "single": return [getValue(columns[0]), [columns[0]]];
 		case "multi": return [columns.map((column) => getValue(column[0])), columns.map((column) => column[0])];
 		case "cascader": {

package/components/picker/picker.js

@@ -1,13 +1,11 @@
 import { createBem } from "../../utils/bem.js";
-import { isEmptyArray } from "../../utils/is.js";
-import { isEmptyBinding } from "../../utils/utils.js";
 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 { Fragment, computed, createBlock, createElementBlock, createTextVNode, createVNode, defineComponent, mergeDefaults, nextTick, normalizeClass, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useSlots, watch, withCtx } from "vue";
+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({
 	__name: "picker",
@@ -31,37 +29,34 @@ var picker_default = /*@__PURE__*/ defineComponent({
 		useSlots();
 		const emit = __emit;
 		const bem = createBem("picker");
-		const useOptionKeysReturn = useOptionKeys(props);
-		const { aliasProps, getLabel } = useOptionKeysReturn;
-		const columnsType = computed(() => {
-			return getColumnsType(props.columns, useOptionKeysReturn);
-		});
+		const optionKeys = useOptionKeys(props);
 		const innerValue = ref(props.modelValue);
 		watch(() => props.modelValue, () => {
 			innerValue.value = props.modelValue;
 		});
+		const columnsType = computed(() => {
+			return getColumnsType(props.columns, optionKeys);
+		});
 		const columnIndexes = ref([]);
-		const updateColumnIndexes = () => {
-			const indexes = getIndexesByValue(toArray(innerValue.value), props.columns, useOptionKeysReturn);
-			if (!arrayEqual(indexes, columnIndexes.value)) columnIndexes.value = indexes;
-		};
-		updateColumnIndexes();
 		watch([
 			innerValue,
 			() => props.columns,
-			aliasProps
+			optionKeys.aliasProps
 		], () => {
-			if (!isEmptyBinding(innerValue.value) && !isEmptyArray(innerValue.value)) updateColumnIndexes();
+			const indexes = getIndexesByValue(toArray(innerValue.value), props.columns, optionKeys);
+			if (!arrayEqual(indexes, columnIndexes.value)) columnIndexes.value = indexes;
+		}, { immediate: true });
+		const renderedColumns = computed(() => {
+			switch (columnsType.value) {
+				case "single": return [props.columns];
+				case "multi": return props.columns;
+				case "cascader": return nestedToMulti(props.columns, toArray(innerValue.value), optionKeys);
+				default: return [];
+			}
 		});
 		const onChange = (value) => {
 			if (!props.columns || props.columns.length === 0) return;
 			let indexes = value;
-			if (indexes.some((index) => index === Infinity)) {
-				nextTick(() => {
-					columnIndexes.value = isEmptyBinding(innerValue.value) || isEmptyArray(innerValue.value) ? columnIndexes.value.map(() => 0) : [...columnIndexes.value];
-				});
-				return;
-			}
 			indexes = renderedColumns.value.map((_, index) => indexes[index] || 0);
 			if (columnsType.value === "cascader") {
 				let startIndex = -1;
@@ -72,42 +67,22 @@ var picker_default = /*@__PURE__*/ defineComponent({
 				}
 				indexes = nextIndexes;
 				{
-					const validIndexes = getCascaderValidIndexes(indexes, props.columns, useOptionKeysReturn);
+					const validIndexes = getCascaderValidIndexes(indexes, props.columns, optionKeys);
 					if (!arrayEqual(indexes, validIndexes)) indexes = validIndexes;
 				}
 			}
-			const selectedOptions = getOptionsByIndexes(indexes, props.columns, useOptionKeysReturn);
+			const selectedOptions = getOptionsByIndexes(indexes, props.columns, optionKeys);
 			if (!arrayEqual(indexes, columnIndexes.value)) columnIndexes.value = indexes;
-			const nextValue = getMaySingleValueByOptions(selectedOptions, useOptionKeysReturn, props.columns);
+			const nextValue = getMaySingleValueByOptions(selectedOptions, optionKeys, props.columns);
 			innerValue.value = nextValue;
 			emit("update:modelValue", nextValue, selectedOptions, indexes);
 			emit("change", nextValue, selectedOptions, indexes);
 		};
-		const getRenderedColumns = () => {
-			switch (columnsType.value) {
-				case "single": return [props.columns];
-				case "multi": return props.columns;
-				case "cascader": return nestedToMulti(props.columns, toArray(innerValue.value), useOptionKeysReturn);
-				default: return [];
-			}
-		};
-		const renderedColumns = ref(getRenderedColumns());
-		const updateRenderedColumns = () => {
-			renderedColumns.value = getRenderedColumns();
-		};
-		watch([() => props.columns, innerValue], ([newColumns, newValue], [oldColumns, oldValue]) => {
-			if (newColumns !== oldColumns || newValue !== oldValue && columnsType.value === "cascader" && !isEmptyBinding(newValue) && !isEmptyArray(newValue)) updateRenderedColumns();
-		});
-		watch(() => props.modelValue, () => {
-			if (isEmptyBinding(props.modelValue) || isEmptyArray(props.modelValue)) {
-				updateColumnIndexes();
-				updateRenderedColumns();
-			}
-		});
+		const pickerClass = bem.b();
 		const pickerViewClass = bem.e("picker-view");
 		const indicatorClass = bem.e("indicator");
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(bem).b()) }, [createVNode(unref(picker_view_default), {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(pickerClass)) }, [createVNode(unref(picker_view_default), {
 				class: normalizeClass(unref(pickerViewClass)),
 				"indicator-class": unref(indicatorClass),
 				value: columnIndexes.value,
@@ -123,7 +98,7 @@ var picker_default = /*@__PURE__*/ defineComponent({
 								option,
 								rowIndex: j,
 								columnIndex: i
-							}, () => [createTextVNode(toDisplayString(unref(getLabel)(option)), 1)])], 2);
+							}, () => [createTextVNode(toDisplayString(unref(optionKeys).getLabel(option)), 1)])], 2);
 						}), 128))]),
 						_: 2
 					}, 1024);

package/components/picker-input/picker-input.js

@@ -96,15 +96,15 @@ var picker_input_default = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const slots = useSlots();
 		const emit = __emit;
-		const useOptionKeysReturn = useOptionKeys(props);
+		const optionKeys = useOptionKeys(props);
 		const partitionedProps = partitionPopoutInputProps(props);
 		const { innerVisible, innerValue, inputValue, show, onChange, onClear, onVisibleHook } = usePopoutInput(props, emit);
-		const { getLabel } = useOptionKeysReturn;
+		const { getLabel } = optionKeys;
 		const onClick = () => {
 			if (props.columns && props.columns.length > 0) show();
 		};
 		function getOutletText(columns, value) {
-			return getOptionsByIndexes(getIndexesByValue(toArray(value), columns || [], useOptionKeysReturn), columns || [], useOptionKeysReturn).map((option) => getLabel(option)).join("/");
+			return getOptionsByIndexes(getIndexesByValue(toArray(value), columns || [], optionKeys), columns || [], optionKeys).map((option) => getLabel(option)).join("/");
 		}
 		function getInputValue() {
 			if (isEmptyBinding(innerValue.value) || isEmptyArray(innerValue.value)) return "";

package/components/picker-popout/picker-popout.js

@@ -63,11 +63,11 @@ var picker_popout_default = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const slots = useSlots();
 		const emit = __emit;
-		const useOptionKeysReturn = useOptionKeys(props);
+		const optionKeys = useOptionKeys(props);
 		const omittedProps = omitFormPopoutProps(props);
 		const { innerVisible, innerValue, draftValue, onChange, onConfirm, onVisibleHook } = useFormPopout(props, emit, { onConfirmBefore() {
 			if (isEmptyBinding(draftValue.value) || isEmptyArray(draftValue.value)) {
-				const [initialValue, selectedOptions] = getInitialValue(props.columns, useOptionKeysReturn);
+				const [initialValue, selectedOptions] = getInitialValue(props.columns, optionKeys);
 				draftValue.value = initialValue;
 				return [selectedOptions];
 			}

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

@@ -46,7 +46,6 @@ export interface PickerViewContext {
     maskClass: any;
     indicatorClass: any;
     indicatorStyle: any;
-    height: number;
     getColumnValue: (ins: ComponentInternalInstance) => WritableComputedRef<number>;
 }
 export declare const pickerViewContextKey: InjectionKey<PickerViewContext>;

package/components/picker-view/picker-view-column.js

@@ -7,26 +7,26 @@ import { usePointerDown } from "../../use/usePointerDown.js";
 import { useResizeObserver } from "../../use/useResizeObserver.js";
 import { useScroller } from "../../utils/scroller/useScroller.js";
 import { pickerViewContextKey } from "./common.js";
-import { computed, createVNode, getCurrentInstance, inject, nextTick, onMounted, ref, useTemplateRef, watch } from "vue";
+import { computed, createVNode, getCurrentInstance, inject, ref, watch, watchPostEffect } from "vue";
 //#region packages/sard/components/picker-view/picker-view-column.tsx
 var picker_view_column_default = defineSetupFnComponent((_props, { slots }) => {
 	const bem = createBem("picker-view-column");
+	const instance = getCurrentInstance();
 	const rootRef = ref(null);
 	const contentRef = ref(null);
-	const instance = getCurrentInstance();
+	const indicatorRef = ref(null);
 	const context = inject(pickerViewContextKey);
 	const columnValue = context.getColumnValue(instance);
 	const itemCount = ref(0);
-	const indicatorHeight = ref(48);
-	useResizeObserver(useTemplateRef("indicator"), (size) => {
-		if (size.height > 0) indicatorHeight.value = size.height;
+	const rootSize = useResizeObserver(rootRef);
+	const contentSize = useResizeObserver(contentRef);
+	const indicatorSize = useResizeObserver(indicatorRef);
+	const maskSize = computed(() => (rootSize.height - indicatorSize.height) / 2);
+	const contentHeight = computed(() => {
+		return contentSize.height + maskSize.value * 2;
 	});
-	const maskSize = computed(() => (context.height - indicatorHeight.value) / 2);
-	const { update, scrollTo, isIdle, handleTouchStart, handleTouchMove, handleTouchEnd } = useScroller(contentRef, {
-		enableY: true,
-		enableX: false,
-		enableSnap: true,
-		itemSize: indicatorHeight.value,
+	const { position, update, scrollTo, isIdle, handleTouchStart, handleTouchMove, handleTouchEnd } = useScroller({
+		itemSize: indicatorSize.height,
 		friction: new Friction(1e-4),
 		spring: new Spring(2, 90, 20),
 		onSnap: (index) => {
@@ -36,27 +36,29 @@ var picker_view_column_default = defineSetupFnComponent((_props, { slots }) => {
 			handleTap(event);
 		}
 	});
-	let updatesScrollerRequest;
-	function updatesScroller() {
-		if (!updatesScrollerRequest && indicatorHeight.value) {
-			updatesScrollerRequest = true;
-			nextTick(() => {
-				updatesScrollerRequest = false;
-				const current = Math.max(Math.min(columnValue.value, itemCount.value - 1), 0);
-				update(current * indicatorHeight.value, void 0, indicatorHeight.value);
-			});
-		}
-	}
+	let updatePending = false;
 	watch([
-		indicatorHeight,
+		() => indicatorSize.height,
+		columnValue,
 		itemCount,
-		() => context.height,
-		columnValue
+		() => rootSize.height,
+		contentHeight
 	], () => {
-		updatesScroller();
-	});
-	onMounted(() => {
-		updatesScroller();
+		if (updatePending) return;
+		updatePending = true;
+		setTimeout(() => {
+			updatePending = false;
+			if (indicatorSize.height) {
+				const current = Math.max(Math.min(columnValue.value, itemCount.value - 1), 0);
+				update(current * indicatorSize.height, indicatorSize.height, rootSize.height, contentHeight.value);
+			}
+		});
+	}, { flush: "post" });
+	watchPostEffect(() => {
+		const el = contentRef.value;
+		if (!el) return;
+		const transform = "translateY(" + position.value + "px) translateZ(0)";
+		el.style.transform = transform;
 	});
 	let oldDeltaY = 0;
 	function handleWheel(event) {
@@ -65,21 +67,21 @@ var picker_view_column_default = defineSetupFnComponent((_props, { slots }) => {
 			oldDeltaY = 0;
 			let current = Math.min(columnValue.value + (deltaY < 0 ? -1 : 1), itemCount.value - 1);
 			columnValue.value = current = Math.max(current, 0);
-			scrollTo(current * indicatorHeight.value);
+			scrollTo(current * indicatorSize.height);
 		} else oldDeltaY = deltaY;
 		event.preventDefault();
 	}
 	function handleTap({ changedTouches: [{ clientY }] }) {
 		const el = rootRef.value;
 		if (isIdle()) {
-			const r = clientY - el.getBoundingClientRect().top - context.height / 2;
-			const o = indicatorHeight.value / 2;
+			const r = clientY - el.getBoundingClientRect().top - rootSize.height / 2;
+			const o = indicatorSize.height / 2;
 			if (!(Math.abs(r) <= o)) {
-				const a = Math.ceil((Math.abs(r) - o) / indicatorHeight.value);
+				const a = Math.ceil((Math.abs(r) - o) / indicatorSize.height);
 				const s = r < 0 ? -a : a;
 				let current = Math.min(columnValue.value + s, itemCount.value - 1);
 				columnValue.value = current = Math.max(current, 0);
-				scrollTo(current * indicatorHeight.value);
+				scrollTo(current * indicatorSize.height);
 			}
 		}
 	}
@@ -115,7 +117,7 @@ var picker_view_column_default = defineSetupFnComponent((_props, { slots }) => {
 				"style": [`background-size: 100% ${maskSize.value}px;`, context.maskStyle]
 			}, null),
 			createVNode("div", {
-				"ref": "indicator",
+				"ref": indicatorRef,
 				"class": [bem.e("indicator"), context.indicatorClass],
 				"style": context.indicatorStyle
 			}, null),
@@ -124,7 +126,7 @@ var picker_view_column_default = defineSetupFnComponent((_props, { slots }) => {
 				"class": [bem.e("content")],
 				"style": {
 					padding,
-					"--picker-view-indicator-height": `${indicatorHeight.value}px`
+					"--picker-view-indicator-height": `${indicatorSize.height}px`
 				}
 			}, [defaultSlots])
 		])]);

package/components/picker-view/picker-view.js

@@ -1,13 +1,11 @@
 import { createBem } from "../../utils/bem.js";
 import { flatVNode } from "../../utils/vnode.js";
 import { defineSetupFnComponent } from "../../utils/component.js";
-import { useResizeObserver } from "../../use/useResizeObserver.js";
 import { pickerViewContextKey, pickerViewProps } from "./common.js";
-import { computed, createVNode, provide, reactive, ref, toRef, useTemplateRef, watch } from "vue";
+import { computed, createVNode, provide, reactive, ref, toRef, watch } from "vue";
 //#region packages/sard/components/picker-view/picker-view.tsx
 var picker_view_default = defineSetupFnComponent((props, { slots, emit }) => {
 	const bem = createBem("picker-view");
-	const rootRef = useTemplateRef("root");
 	const innerValue = reactive([...props.value]);
 	watch(() => props.value, (value) => {
 		innerValue.length = value.length;
@@ -30,32 +28,24 @@ var picker_view_default = defineSetupFnComponent((props, { slots, emit }) => {
 				if (index < 0) return;
 				if (innerValue[index] !== current) {
 					innerValue[index] = current;
-					const value = innerValue.map((val) => val);
+					const value = [...innerValue];
 					emit("update:value", value);
 					emit("change", value);
 				}
 			}
 		});
 	};
-	const height = ref(48);
-	useResizeObserver(rootRef, (size) => {
-		height.value = size.height;
-	});
 	provide(pickerViewContextKey, reactive({
 		maskStyle: toRef(() => props.maskStyle),
 		maskClass: toRef(() => props.maskClass),
 		indicatorClass: toRef(() => props.indicatorClass),
 		indicatorStyle: toRef(() => props.indicatorStyle),
-		height,
 		getColumnValue
 	}));
 	return () => {
 		const defaultSlots = slots.default && slots.default();
 		columnsRef.value = flatVNode(defaultSlots);
-		return createVNode("div", {
-			"ref": "root",
-			"class": bem.b()
-		}, [createVNode("div", { "class": bem.e("wrapper") }, [defaultSlots])]);
+		return createVNode("div", { "class": bem.b() }, [createVNode("div", { "class": bem.e("wrapper") }, [defaultSlots])]);
 	};
 }, {
 	name: "PickerView",

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

@@ -1,6 +1,5 @@
 import type { DefaultProps } from '../config';
 export interface StatusBarProps {
-    reverse?: boolean;
 }
 export declare const defaultStatusBarProps: DefaultProps<StatusBarProps>;
 export interface StatusBarSlots {

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

@@ -1,8 +1,6 @@
 import { type StatusBarProps, type StatusBarSlots, type StatusBarExpose } from './common';
 type __VLS_Slots = StatusBarSlots;
-declare const __VLS_base: import("vue").DefineComponent<StatusBarProps, StatusBarExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<StatusBarProps> & Readonly<{}>, {
-    reverse: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<StatusBarProps, StatusBarExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<StatusBarProps> & 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;

package/components/status-bar/status-bar.js

@@ -1,23 +1,17 @@
 import { createBem } from "../../utils/bem.js";
 import { windowInfo } from "../config/windowInfo.js";
-import { defaultStatusBarProps } from "./common.js";
-import { computed, createElementBlock, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, openBlock, unref } from "vue";
+import { computed, createElementBlock, defineComponent, normalizeClass, normalizeStyle, openBlock, unref } from "vue";
 //#region packages/sard/components/status-bar/status-bar.vue
 var status_bar_default = /*@__PURE__*/ defineComponent({
 	__name: "status-bar",
-	props: /*@__PURE__*/ mergeDefaults({ reverse: {
-		type: Boolean,
-		required: false
-	} }, defaultStatusBarProps),
 	setup(__props, { expose: __expose }) {
-		const props = __props;
 		const bem = createBem("status-bar");
 		const statusBarHeight = computed(() => {
 			return windowInfo.statusBarHeight + "px";
 		});
 		__expose();
 		const statusBarStyle = computed(() => {
-			return [{ [props.reverse ? "width" : "height"]: statusBarHeight.value }];
+			return { height: statusBarHeight.value };
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {