sard 1.0.0 → 1.0.1

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

@@ -0,0 +1,168 @@
+import { isEmptyArray } from "../../utils/is.js";
+import { isEmptyBinding } from "../../utils/utils.js";
+import { toArray } from "../../utils/array.js";
+import { useOptionKeys } from "../../use/useOptionKeys.js";
+import "../../use/index.js";
+import "../../utils/index.js";
+import { getIndexesByValue, getOptionsByIndexes } from "../picker/common.js";
+import popout_input_default from "../popout-input/popout-input.js";
+import { partitionPopoutInputProps, usePopoutInput } from "../popout-input/usePopoutInput.js";
+import picker_popout_default from "../picker-popout/picker-popout.js";
+import { defaultPickerInputProps } from "./common.js";
+import { createBlock, createSlots, createVNode, defineComponent, guardReactiveProps, isRef, mergeDefaults, mergeProps, normalizeProps, openBlock, renderSlot, unref, useSlots, watch, withCtx } from "vue";
+//#region packages/sard/components/picker-input/picker-input.vue
+var picker_input_default = /*@__PURE__*/ defineComponent({
+	__name: "picker-input",
+	props: /*@__PURE__*/ mergeDefaults({
+		visible: {
+			type: Boolean,
+			required: false
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		resettable: {
+			type: Boolean,
+			required: false
+		},
+		validateEvent: {
+			type: Boolean,
+			required: false
+		},
+		showConfirm: {
+			type: Boolean,
+			required: false
+		},
+		columns: {
+			type: Array,
+			required: false
+		},
+		optionKeys: {
+			type: Object,
+			required: false
+		},
+		modelValue: {
+			type: null,
+			required: false
+		},
+		placeholder: {
+			type: String,
+			required: false
+		},
+		readonly: {
+			type: Boolean,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		clearable: {
+			type: Boolean,
+			required: false
+		},
+		loading: {
+			type: Boolean,
+			required: false
+		},
+		multiline: {
+			type: Boolean,
+			required: false
+		},
+		inputProps: {
+			type: Object,
+			required: false
+		},
+		valueOnClear: {
+			type: Function,
+			required: false
+		}
+	}, defaultPickerInputProps),
+	emits: [
+		"update:visible",
+		"update:modelValue",
+		"change",
+		"confirm",
+		"before-enter",
+		"enter",
+		"after-enter",
+		"enter-cancelled",
+		"before-leave",
+		"leave",
+		"after-leave",
+		"leave-cancelled",
+		"visible-hook"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const slots = useSlots();
+		const emit = __emit;
+		const useOptionKeysReturn = useOptionKeys(props);
+		const partitionedProps = partitionPopoutInputProps(props);
+		const { innerVisible, innerValue, inputValue, show, onChange, onClear, onVisibleHook } = usePopoutInput(props, emit);
+		const { getLabel } = useOptionKeysReturn;
+		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("/");
+		}
+		function getInputValue() {
+			if (isEmptyBinding(innerValue.value) || isEmptyArray(innerValue.value)) return "";
+			return getOutletText(props.columns, innerValue.value);
+		}
+		watch([innerValue, () => props.columns], () => {
+			inputValue.value = getInputValue();
+		}, { immediate: true });
+		const onConfirm = () => {
+			emit("confirm");
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(popout_input_default, mergeProps(unref(partitionedProps)[0], {
+				modelValue: unref(inputValue),
+				"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(inputValue) ? inputValue.value = $event : null),
+				onClear: unref(onClear),
+				onClick
+			}), createSlots({
+				default: withCtx(() => [createVNode(picker_popout_default, mergeProps(unref(partitionedProps)[1], {
+					visible: unref(innerVisible),
+					"onUpdate:visible": _cache[0] || (_cache[0] = ($event) => isRef(innerVisible) ? innerVisible.value = $event : null),
+					modelValue: unref(innerValue),
+					"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(innerValue) ? innerValue.value = $event : null),
+					onChange: unref(onChange),
+					onVisibleHook: unref(onVisibleHook),
+					onConfirm
+				}), createSlots({ _: 2 }, [slots.option ? {
+					name: "option",
+					fn: withCtx((optionProps) => [renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps(optionProps)))]),
+					key: "0"
+				} : void 0]), 1040, [
+					"visible",
+					"modelValue",
+					"onChange",
+					"onVisibleHook"
+				])]),
+				_: 2
+			}, [
+				slots.prepend ? {
+					name: "prepend",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "prepend")]),
+					key: "0"
+				} : void 0,
+				slots.append ? {
+					name: "append",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "append")]),
+					key: "1"
+				} : void 0,
+				slots.arrow ? {
+					name: "arrow",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "arrow")]),
+					key: "2"
+				} : void 0
+			]), 1040, ["modelValue", "onClear"]);
+		};
+	}
+});
+//#endregion
+export { picker_input_default as default };

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

@@ -0,0 +1,17 @@
+import { type PickerSlots, type PickerProps } from '../picker/common';
+import { type DefaultProps } from '../config';
+import { type FormPopoutProps } from '../popout/useFormPopout';
+import type { MotionEmits } from '../motion';
+export interface PickerPopoutProps<T> extends FormPopoutProps, PickerProps<T> {
+}
+export declare const defaultPickerPopoutProps: DefaultProps<PickerPopoutProps<any>>;
+export interface PickerPopoutSlots<T> extends PickerSlots<T> {
+}
+export interface PickerPopoutEmits extends MotionEmits {
+    (e: 'update:visible', visible: boolean): void;
+    (e: 'update:modelValue', value: any): void;
+    (e: 'change', value: any): void;
+    (e: 'confirm'): void;
+}
+export interface PickerPopoutExpose {
+}

package/components/picker-popout/common.js

@@ -0,0 +1,8 @@
+import { defaultPickerProps } from "../picker/common.js";
+//#region packages/sard/components/picker-popout/common.ts
+const defaultPickerPopoutProps = {
+	...defaultPickerProps,
+	validateEvent: true
+};
+//#endregion
+export { defaultPickerPopoutProps };

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

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _PickerPopout from './picker-popout.vue';
+export declare const PickerPopout: EnhancedComponent<typeof _PickerPopout>;
+export default PickerPopout;
+export type { PickerPopoutProps, PickerPopoutSlots, PickerPopoutEmits, PickerPopoutExpose, } from './common';

package/components/picker-popout/index.js

@@ -0,0 +1,7 @@
+import { enhanceComponent } from "../../utils/component.js";
+import "../../utils/index.js";
+import picker_popout_default from "./picker-popout.js";
+//#region packages/sard/components/picker-popout/index.ts
+const PickerPopout = enhanceComponent(picker_popout_default);
+//#endregion
+export { PickerPopout, PickerPopout as default };

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

@@ -0,0 +1,33 @@
+import { type PickerPopoutProps, type PickerPopoutSlots, type PickerPopoutEmits } from './common';
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<PickerPopoutProps<T> & {
+        onChange?: ((value: any) => any) | undefined;
+        "onBefore-enter"?: ((el: Element) => any) | undefined;
+        onEnter?: ((el: Element) => any) | undefined;
+        "onAfter-enter"?: ((el: Element) => any) | undefined;
+        "onEnter-cancelled"?: ((el: Element) => any) | undefined;
+        "onBefore-leave"?: ((el: Element) => any) | undefined;
+        onLeave?: ((el: Element) => any) | undefined;
+        "onAfter-leave"?: ((el: Element) => any) | undefined;
+        "onLeave-cancelled"?: ((el: Element) => any) | undefined;
+        "onVisible-hook"?: ((name: import("../index.ts").MotionHookName, el: Element) => any) | undefined;
+        "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+        onConfirm?: (() => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: PickerPopoutSlots<T>;
+    emit: PickerPopoutEmits;
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -0,0 +1,108 @@
+import { isEmptyArray } from "../../utils/is.js";
+import { isEmptyBinding } from "../../utils/utils.js";
+import { useOptionKeys } from "../../use/useOptionKeys.js";
+import "../../use/index.js";
+import "../../utils/index.js";
+import popout_default from "../popout/popout.js";
+import { getInitialValue } from "../picker/common.js";
+import picker_default from "../picker/picker.js";
+import { omitFormPopoutProps, useFormPopout } from "../popout/useFormPopout.js";
+import { defaultPickerPopoutProps } from "./common.js";
+import { createBlock, createSlots, createVNode, defineComponent, guardReactiveProps, isRef, mergeDefaults, mergeProps, normalizeProps, openBlock, renderSlot, unref, useSlots, withCtx } from "vue";
+//#region packages/sard/components/picker-popout/picker-popout.vue
+var picker_popout_default = /*@__PURE__*/ defineComponent({
+	__name: "picker-popout",
+	props: /*@__PURE__*/ mergeDefaults({
+		visible: {
+			type: Boolean,
+			required: false
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		resettable: {
+			type: Boolean,
+			required: false
+		},
+		validateEvent: {
+			type: Boolean,
+			required: false
+		},
+		showConfirm: {
+			type: Boolean,
+			required: false
+		},
+		columns: {
+			type: Array,
+			required: false
+		},
+		optionKeys: {
+			type: Object,
+			required: false
+		},
+		modelValue: {
+			type: null,
+			required: false
+		}
+	}, defaultPickerPopoutProps),
+	emits: [
+		"update:visible",
+		"update:modelValue",
+		"change",
+		"confirm",
+		"before-enter",
+		"enter",
+		"after-enter",
+		"enter-cancelled",
+		"before-leave",
+		"leave",
+		"after-leave",
+		"leave-cancelled",
+		"visible-hook"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const slots = useSlots();
+		const emit = __emit;
+		const useOptionKeysReturn = 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);
+				draftValue.value = initialValue;
+				return [selectedOptions];
+			}
+		} });
+		const onEnter = () => {
+			if (!isEmptyBinding(innerValue.value) && !isEmptyArray(innerValue.value) && draftValue.value !== innerValue.value) draftValue.value = innerValue.value;
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(popout_default, {
+				visible: unref(innerVisible),
+				"onUpdate:visible": _cache[0] || (_cache[0] = ($event) => isRef(innerVisible) ? innerVisible.value = $event : null),
+				title: __props.title,
+				onConfirm: unref(onConfirm),
+				onEnter,
+				onVisibleHook: unref(onVisibleHook)
+			}, {
+				default: withCtx(() => [createVNode(picker_default, mergeProps(unref(omittedProps), {
+					"model-value": unref(draftValue),
+					onChange: unref(onChange)
+				}), createSlots({ _: 2 }, [slots.option ? {
+					name: "option",
+					fn: withCtx((optionProps) => [renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps(optionProps)))]),
+					key: "0"
+				} : void 0]), 1040, ["model-value", "onChange"])]),
+				_: 3
+			}, 8, [
+				"visible",
+				"title",
+				"onConfirm",
+				"onVisibleHook"
+			]);
+		};
+	}
+});
+//#endregion
+export { picker_popout_default as default };

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

@@ -0,0 +1,52 @@
+import type { ClassValue, ComponentInternalInstance, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, StyleValue, WritableComputedRef } from 'vue';
+import { type DefaultProps } from '../config';
+export declare const pickerViewProps: {
+    value: {
+        type: PropType<number[]>;
+        default(): never[];
+        validator(val: any): boolean;
+    };
+    indicatorStyle: {
+        type: PropType<StyleValue>;
+    };
+    indicatorClass: {
+        type: PropType<ClassValue>;
+    };
+    maskStyle: {
+        type: PropType<StyleValue>;
+    };
+    maskClass: {
+        type: PropType<ClassValue>;
+    };
+};
+export type PickerViewPrivateProps = ExtractPropTypes<typeof pickerViewProps>;
+export type PickerViewProps = ExtractPublicPropTypes<typeof pickerViewProps>;
+export declare const defaultPickerViewProps: DefaultProps<PickerViewProps>;
+export interface PickerViewSlots {
+    default?(): any;
+}
+export interface PickerViewEmits {
+    (e: 'update:value', value: number[]): void;
+    (e: 'change', value: number[]): void;
+}
+export interface PickerViewExpose {
+}
+export interface PickerViewColumnProps {
+}
+export declare const defaultPickerViewColumnProps: DefaultProps<PickerViewColumnProps>;
+export interface PickerViewColumnSlots {
+    default?(): any;
+}
+export interface PickerViewColumnEmits {
+}
+export interface PickerViewColumnExpose {
+}
+export interface PickerViewContext {
+    maskStyle: any;
+    maskClass: any;
+    indicatorClass: any;
+    indicatorStyle: any;
+    height: number;
+    getColumnValue: (ins: ComponentInternalInstance) => WritableComputedRef<number>;
+}
+export declare const pickerViewContextKey: InjectionKey<PickerViewContext>;

package/components/picker-view/common.js

@@ -0,0 +1,21 @@
+//#region packages/sard/components/picker-view/common.ts
+const pickerViewProps = {
+	value: {
+		type: Array,
+		default() {
+			return [];
+		},
+		validator(val) {
+			return Array.isArray(val) && val.filter((val) => typeof val === "number").length === val.length;
+		}
+	},
+	indicatorStyle: { type: null },
+	indicatorClass: { type: null },
+	maskStyle: { type: null },
+	maskClass: { type: null }
+};
+const defaultPickerViewProps = {};
+const defaultPickerViewColumnProps = {};
+const pickerViewContextKey = Symbol("formContext");
+//#endregion
+export { defaultPickerViewColumnProps, defaultPickerViewProps, pickerViewContextKey, pickerViewProps };

package/components/picker-view/index.css

@@ -0,0 +1 @@
+:root{--s-picker-view-height:240px;--s-picker-item-font-size:var(--s-font-size-lg);--s-picker-item-color:var(--s-text-color-primary);--s-picker-view-indicator-height:var(--s-content-height-lg);--s-picker-view-indicator-border-color:var(--s-border-color);--s-picker-view-mask-bg-image:linear-gradient(to bottom, rgba(var(--s-bg-color-elevated-rgb), 0.95), rgba(var(--s-bg-color-elevated-rgb), 0.6)),linear-gradient(to top, rgba(var(--s-bg-color-elevated-rgb), 0.95), rgba(var(--s-bg-color-elevated-rgb), 0.6))}.s-picker-view{height:var(--s-picker-view-height);-webkit-user-select:none;user-select:none;touch-action:none}.s-picker-view__wrapper{display:flex;position:relative;overflow:hidden;height:100%}.s-picker-view-column{flex:1;position:relative;height:100%;overflow:hidden}.s-picker-view-column__group{height:100%;overflow:hidden}.s-picker-view-column__indicator,.s-picker-view-column__mask{position:absolute;left:0;width:100%;z-index:3;pointer-events:none}.s-picker-view-column__mask{top:0;height:100%;margin:0 auto;background-image:var(--s-picker-view-mask-bg-image);background-position:top,bottom;background-size:100% 102px;background-repeat:no-repeat;transform:translateZ(0)}.s-picker-view-column__indicator{height:var(--s-picker-view-indicator-height);top:50%;transform:translateY(-50%)}.s-picker-view-column__indicator::before,.s-picker-view-column__indicator::after{content:" ";position:absolute;left:0;right:0;height:1px}.s-picker-view-column__indicator::before{top:0;border-top:1px solid var(--s-picker-view-indicator-border-color);transform-origin:0 0;transform:scaleY(0.5)}.s-picker-view-column__indicator::after{bottom:0;border-bottom:1px solid var(--s-picker-view-indicator-border-color);transform-origin:0 100%;transform:scaleY(0.5)}.s-picker-view-column__content{position:absolute;top:0;left:0;width:100%;will-change:transform;padding:102px 0;cursor:pointer}.s-picker-view-column__content>*{height:var(--picker-view-indicator-height);overflow:hidden}

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

@@ -0,0 +1,7 @@
+import { type EnhancedComponent } from '../../utils';
+import _PickerView from './picker-view';
+import _PickerViewColumn from './picker-view-column';
+export declare const PickerView: EnhancedComponent<typeof _PickerView>;
+export declare const PickerViewColumn: EnhancedComponent<typeof _PickerViewColumn>;
+export default PickerView;
+export type { PickerViewProps, PickerViewSlots, PickerViewEmits, PickerViewExpose, PickerViewColumnProps, PickerViewColumnSlots, PickerViewColumnEmits, PickerViewColumnExpose, } from './common';

package/components/picker-view/index.js

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

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

@@ -0,0 +1,3 @@
+import { type PickerViewColumnSlots } from './common';
+declare const _default: import("vue").DefineSetupFnComponent<import("vue").ExtractPublicPropTypes<unknown>, {}, PickerViewColumnSlots>;
+export default _default;

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

@@ -0,0 +1,139 @@
+import { createBem } from "../../utils/bem.js";
+import { flatVNode } from "../../utils/vnode.js";
+import { defineSetupFnComponent } from "../../utils/component.js";
+import { Friction } from "../../utils/scroller/Friction.js";
+import { Spring } from "../../utils/scroller/Spring.js";
+import { usePointerDown } from "../../use/usePointerDown.js";
+import { useResizeObserver } from "../../use/useResizeObserver.js";
+import "../../use/index.js";
+import { useScroller } from "../../utils/scroller/useScroller.js";
+import "../../utils/index.js";
+import { pickerViewContextKey } from "./common.js";
+import { computed, createVNode, getCurrentInstance, inject, nextTick, onMounted, ref, useTemplateRef, watch } 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 rootRef = ref(null);
+	const contentRef = ref(null);
+	const instance = getCurrentInstance();
+	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 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,
+		friction: new Friction(1e-4),
+		spring: new Spring(2, 90, 20),
+		onSnap: (index) => {
+			if (!isNaN(index) && index !== columnValue.value) columnValue.value = index;
+		},
+		onTap: (event) => {
+			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);
+			});
+		}
+	}
+	watch([
+		indicatorHeight,
+		itemCount,
+		() => context.height,
+		columnValue
+	], () => {
+		updatesScroller();
+	});
+	onMounted(() => {
+		updatesScroller();
+	});
+	let oldDeltaY = 0;
+	function handleWheel(event) {
+		const deltaY = oldDeltaY + event.deltaY;
+		if (Math.abs(deltaY) > 10) {
+			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);
+		} 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;
+			if (!(Math.abs(r) <= o)) {
+				const a = Math.ceil((Math.abs(r) - o) / indicatorHeight.value);
+				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);
+			}
+		}
+	}
+	const onTouchStart = (event) => {
+		handleTouchStart(event);
+	};
+	const onTouchMove = (event) => {
+		handleTouchMove(event);
+		event.stopPropagation();
+	};
+	const onTouchEnd = (event) => {
+		handleTouchEnd(event);
+	};
+	const onPointerDown = usePointerDown(onTouchStart, onTouchMove, onTouchEnd);
+	return () => {
+		const defaultSlots = slots.default?.();
+		itemCount.value = flatVNode(defaultSlots).length;
+		const padding = `${maskSize.value}px 0`;
+		return createVNode("div", {
+			"ref": rootRef,
+			"class": bem.b(),
+			"onTouchstart": onTouchStart,
+			"onTouchmove": onTouchMove,
+			"onTouchend": onTouchEnd,
+			"onTouchcancel": onTouchEnd,
+			"onPointerdown": onPointerDown
+		}, [createVNode("div", {
+			"class": bem.e("group"),
+			"onWheel": handleWheel
+		}, [
+			createVNode("div", {
+				"class": [bem.e("mask"), context.maskClass],
+				"style": [`background-size: 100% ${maskSize.value}px;`, context.maskStyle]
+			}, null),
+			createVNode("div", {
+				"ref": "indicator",
+				"class": [bem.e("indicator"), context.indicatorClass],
+				"style": context.indicatorStyle
+			}, null),
+			createVNode("div", {
+				"ref": contentRef,
+				"class": [bem.e("content")],
+				"style": {
+					padding,
+					"--picker-view-indicator-height": `${indicatorHeight.value}px`
+				}
+			}, [defaultSlots])
+		])]);
+	};
+}, {
+	name: "PickerViewColumn",
+	slots: null
+});
+//#endregion
+export { picker_view_column_default as default };

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

@@ -0,0 +1,21 @@
+import { type PickerViewEmits, type PickerViewSlots } from './common';
+declare const _default: import("vue").DefineSetupFnComponent<import("vue").ExtractPublicPropTypes<{
+    value: {
+        type: import("vue").PropType<number[]>;
+        default(): never[];
+        validator(val: any): boolean;
+    };
+    indicatorStyle: {
+        type: import("vue").PropType<import("vue").StyleValue>;
+    };
+    indicatorClass: {
+        type: import("vue").PropType<import("vue").ClassValue>;
+    };
+    maskStyle: {
+        type: import("vue").PropType<import("vue").StyleValue>;
+    };
+    maskClass: {
+        type: import("vue").PropType<import("vue").ClassValue>;
+    };
+}>, PickerViewEmits, PickerViewSlots>;
+export default _default;