sard 1.0.0 → 1.0.2

package/components/overlay/overlay.js

@@ -0,0 +1,57 @@
+import { createBem } from "../../utils/bem.js";
+import { defaultOverlayProps } from "./common.js";
+import motion_default from "../motion/motion.js";
+import { computed, createBlock, createElementVNode, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, openBlock, renderSlot, vShow, withCtx, withDirectives, withModifiers } from "vue";
+//#region packages/sard/components/overlay/overlay.vue
+var overlay_default = /*@__PURE__*/ defineComponent({
+	__name: "overlay",
+	props: /*@__PURE__*/ mergeDefaults({
+		visible: {
+			type: Boolean,
+			required: false
+		},
+		zIndex: {
+			type: Number,
+			required: false
+		},
+		background: {
+			type: String,
+			required: false
+		},
+		transparent: {
+			type: Boolean,
+			required: false
+		}
+	}, defaultOverlayProps),
+	emits: ["click"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("overlay");
+		const onClick = (event) => {
+			emit("click", event);
+		};
+		const overlayClass = computed(() => {
+			return [bem.b(), bem.m("transparent", props.transparent)];
+		});
+		const overlayStyle = computed(() => {
+			return {
+				zIndex: props.zIndex,
+				backgroundColor: props.background
+			};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(motion_default, { name: "fade" }, {
+				default: withCtx(() => [withDirectives(createElementVNode("div", {
+					class: normalizeClass(overlayClass.value),
+					style: normalizeStyle(overlayStyle.value),
+					onClick,
+					onTouchmove: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop", "prevent"]))
+				}, [renderSlot(_ctx.$slots, "default")], 38), [[vShow, __props.visible]])]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+export { overlay_default as default };

package/components/pagination/common.d.ts

@@ -0,0 +1,28 @@
+import { type DefaultProps } from '../config';
+export interface PaginationProps {
+    total?: number;
+    pageSize?: number;
+    current?: number;
+    pageCount?: number;
+    pageButtonCount?: number;
+    type?: 'simple' | 'multi';
+    ellipsis?: boolean;
+    multiCount?: number;
+}
+export declare const defaultPaginationProps: DefaultProps<PaginationProps>;
+export interface PaginationSlots {
+    prev?(props: Record<string, never>): any;
+    next?(props: Record<string, never>): any;
+}
+export interface PaginationEmits {
+    (e: 'update:current', page: number): void;
+    (e: 'change', page: number): void;
+}
+/**
+ * @description: 获取页面范围
+ * @param {number} current 当前页码
+ * @param {number} pageCount 总页数
+ * @param {number} pageItemCount 要展示的页数
+ * @return {[number, number]}
+ */
+export declare function getPageRange(current: number, pageCount: number, pageItemCount: number): number[];

package/components/pagination/common.js

@@ -0,0 +1,29 @@
+//#region packages/sard/components/pagination/common.ts
+const defaultPaginationProps = {
+	total: 0,
+	pageSize: 10,
+	current: 1,
+	pageButtonCount: 5,
+	type: "multi",
+	multiCount: 5
+};
+/**
+* @description: 获取页面范围
+* @param {number} current 当前页码
+* @param {number} pageCount 总页数
+* @param {number} pageItemCount 要展示的页数
+* @return {[number, number]}
+*/
+function getPageRange(current, pageCount, pageItemCount) {
+	let min = current - Math.ceil((pageItemCount - 1) / 2);
+	let max = current + Math.floor((pageItemCount - 1) / 2);
+	const minLack = 1 - min;
+	const maxLack = max - pageCount;
+	if (maxLack > 0) min -= maxLack;
+	if (min < 1) min = 1;
+	if (minLack > 0) max += minLack;
+	if (max > pageCount) max = pageCount;
+	return [min, max];
+}
+//#endregion
+export { defaultPaginationProps, getPageRange };

package/components/pagination/index.css

@@ -0,0 +1 @@
+:root{--s-pagination-radius:var(--s-border-radius);--s-pagination-border-color:var(--s-border-color);--s-pagination-item-height:var(--s-content-height-sm);--s-pagination-item-min-width:var(--s-content-height-sm);--s-pagination-item-padding-x:var(--s-size-xs);--s-pagination-item-font-size:var(--s-font-size);--s-pagination-item-color:var(--s-color-primary);--s-pagination-item-bg-active:var(--s-bg-color-active);--s-pagination-item-color-current:var(--s-white);--s-pagination-border-color-current:var(--s-color-primary);--s-pagination-item-bg-current:var(--s-color-primary);--s-pagination-ratio-height:var(--s-content-height-sm);--s-pagination-ratio-font-size:var(--s-font-size)}.s-pagination{display:flex;align-items:center;justify-content:flex-start}.s-pagination__item{position:relative;display:flex;flex:none;justify-content:center;align-items:center;height:var(--s-pagination-item-height);min-width:var(--s-pagination-item-min-width);padding:0 var(--s-pagination-item-padding-x);font-size:var(--s-pagination-item-font-size);color:var(--s-pagination-item-color);cursor:pointer}.s-pagination__item::after{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-color:var(--s-pagination-border-color)}.s-pagination__item:is(.is-current){z-index:3;color:var(--s-pagination-item-color-current);background:var(--s-pagination-item-bg-current);border-color:var(--s-pagination-border-color-current)}.s-pagination__item:is(.is-disabled){color:var(--s-text-color-disabled);cursor:var(--s-cursor-disabled)}.s-pagination__item:not(.is-disabled,.is-current):active{background:var(--s-pagination-item-bg-active)}.s-pagination__prev,.s-pagination__next{display:flex;flex:1 0 auto}.s-pagination__ratio{flex:1;display:flex;align-items:center;justify-content:center;height:var(--s-pagination-ratio-height);font-size:var(--s-pagination-ratio-font-size)}.s-pagination--multi .s-pagination__item:not(:first-child)::after{border-inline-start-width:0}:root:not([dir=rtl]) .s-pagination--multi .s-pagination__item:first-child{border-top-left-radius:var(--s-pagination-radius);border-bottom-left-radius:var(--s-pagination-radius)}:root:not([dir=rtl]) .s-pagination--multi .s-pagination__item:first-child::after{border-top-left-radius:calc(var(--s-pagination-radius)*2);border-bottom-left-radius:calc(var(--s-pagination-radius)*2)}:root[dir=rtl] .s-pagination--multi .s-pagination__item:first-child{border-top-right-radius:var(--s-pagination-radius);border-bottom-right-radius:var(--s-pagination-radius)}:root[dir=rtl] .s-pagination--multi .s-pagination__item:first-child::after{border-top-right-radius:calc(var(--s-pagination-radius)*2);border-bottom-right-radius:calc(var(--s-pagination-radius)*2)}:root:not([dir=rtl]) .s-pagination--multi .s-pagination__item:last-child{border-top-right-radius:var(--s-pagination-radius);border-bottom-right-radius:var(--s-pagination-radius)}:root:not([dir=rtl]) .s-pagination--multi .s-pagination__item:last-child::after{border-top-right-radius:calc(var(--s-pagination-radius)*2);border-bottom-right-radius:calc(var(--s-pagination-radius)*2)}:root[dir=rtl] .s-pagination--multi .s-pagination__item:last-child{border-top-left-radius:var(--s-pagination-radius);border-bottom-left-radius:var(--s-pagination-radius)}:root[dir=rtl] .s-pagination--multi .s-pagination__item:last-child::after{border-top-left-radius:calc(var(--s-pagination-radius)*2);border-bottom-left-radius:calc(var(--s-pagination-radius)*2)}.s-pagination--simple .s-pagination__item{border-radius:var(--s-pagination-radius)}.s-pagination--simple .s-pagination__item::after{border-radius:calc(var(--s-pagination-radius)*2)}.s-pagination--simple .s-pagination__prev,.s-pagination--simple .s-pagination__next{flex:1;padding:0;border-radius:var(--s-pagination-radius)}

package/components/pagination/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _Pagination from './pagination.vue';
+export declare const Pagination: EnhancedComponent<typeof _Pagination>;
+export default Pagination;
+export type { PaginationProps, PaginationSlots, PaginationEmits } from './common';

package/components/pagination/index.js

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

package/components/pagination/pagination.d.ts

@@ -0,0 +1,26 @@
+import { type PaginationProps, type PaginationSlots } from './common';
+type __VLS_Slots = PaginationSlots;
+declare const __VLS_base: import("vue").DefineComponent<PaginationProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    change: (page: number) => any;
+    "update:current": (page: number) => any;
+}, string, import("vue").PublicProps, Readonly<PaginationProps> & Readonly<{
+    onChange?: ((page: number) => any) | undefined;
+    "onUpdate:current"?: ((page: number) => any) | undefined;
+}>, {
+    type: "simple" | "multi";
+    total: number;
+    ellipsis: boolean;
+    current: number;
+    pageSize: number;
+    pageCount: number;
+    pageButtonCount: number;
+    multiCount: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/pagination/pagination.js

@@ -0,0 +1,129 @@
+import { createBem } from "../../utils/bem.js";
+import { clamp } from "../../utils/number.js";
+import { useTranslateWithPrefix } from "../../locale/index.js";
+import { defaultPaginationProps, getPageRange } from "./common.js";
+import { Fragment, computed, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeDefaults, normalizeClass, openBlock, ref, renderList, renderSlot, toDisplayString, unref, watch } from "vue";
+//#region packages/sard/components/pagination/pagination.vue
+const _hoisted_1 = ["onClick"];
+var pagination_default = /*@__PURE__*/ defineComponent({
+	__name: "pagination",
+	props: /*@__PURE__*/ mergeDefaults({
+		total: {
+			type: Number,
+			required: false
+		},
+		pageSize: {
+			type: Number,
+			required: false
+		},
+		current: {
+			type: Number,
+			required: false
+		},
+		pageCount: {
+			type: Number,
+			required: false
+		},
+		pageButtonCount: {
+			type: Number,
+			required: false
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		ellipsis: {
+			type: Boolean,
+			required: false
+		},
+		multiCount: {
+			type: Number,
+			required: false
+		}
+	}, defaultPaginationProps),
+	emits: ["update:current", "change"],
+	setup(__props, { emit: __emit }) {
+		const { t } = useTranslateWithPrefix("pagination");
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("pagination");
+		const innerPageCount = computed(() => {
+			return (props.pageCount ?? Math.ceil(props.total / props.pageSize)) || 1;
+		});
+		const innerCurrent = ref(props.current);
+		watch(() => props.current, () => {
+			innerCurrent.value = props.current;
+		});
+		const range = computed(() => {
+			return getPageRange(innerCurrent.value, innerPageCount.value, props.pageButtonCount);
+		});
+		const onPrevClick = () => {
+			if (innerCurrent.value > 1) changeTo(innerCurrent.value - 1);
+		};
+		const onNextClick = () => {
+			if (innerCurrent.value < innerPageCount.value) changeTo(innerCurrent.value + 1);
+		};
+		const onItemClick = (page) => {
+			changeTo(page);
+		};
+		const changeTo = (page) => {
+			if (page !== innerCurrent.value) {
+				innerCurrent.value = page;
+				emit("update:current", page);
+				emit("change", page);
+			}
+		};
+		const multiItems = computed(() => {
+			if (props.type === "simple") return [];
+			const length = range.value[1] - range.value[0] + 1;
+			return Array(length).fill(0).map((_, i) => {
+				let page = i + range.value[0];
+				const isPrevMulti = i === 0 && page !== 1;
+				const isNextMulti = i === length - 1 && page !== innerPageCount.value;
+				const type = isPrevMulti ? -1 : isNextMulti ? 1 : 0;
+				page = type === 0 ? page : clamp(innerCurrent.value + type * props.multiCount, 1, innerPageCount.value);
+				return {
+					active: innerCurrent.value === page,
+					page,
+					key: i,
+					text: props.ellipsis && (isPrevMulti || isNextMulti) ? "..." : page
+				};
+			});
+		});
+		const paginationClass = computed(() => {
+			return [bem.b(), bem.m(props.type)];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(paginationClass.value) }, [
+				createElementVNode("div", {
+					class: normalizeClass([
+						unref(bem).e("item"),
+						unref(bem).is("disabled", innerCurrent.value === 1),
+						unref(bem).e("prev")
+					]),
+					onClick: onPrevClick
+				}, [renderSlot(_ctx.$slots, "prev", {}, () => [createTextVNode(toDisplayString(unref(t)("previous")), 1)])], 2),
+				__props.type === "simple" ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(bem).e("ratio"))
+				}, toDisplayString(innerCurrent.value) + "/" + toDisplayString(innerPageCount.value), 3)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(multiItems.value, (item) => {
+					return openBlock(), createElementBlock("div", {
+						key: item.key,
+						class: normalizeClass([unref(bem).e("item"), unref(bem).is("current", item.active)]),
+						onClick: ($event) => onItemClick(item.page)
+					}, toDisplayString(item.text), 11, _hoisted_1);
+				}), 128)),
+				createElementVNode("div", {
+					class: normalizeClass([
+						unref(bem).e("item"),
+						unref(bem).is("disabled", innerCurrent.value === innerPageCount.value),
+						unref(bem).e("next")
+					]),
+					onClick: onNextClick
+				}, [renderSlot(_ctx.$slots, "next", {}, () => [createTextVNode(toDisplayString(unref(t)("next")), 1)])], 2)
+			], 2);
+		};
+	}
+});
+//#endregion
+export { pagination_default as default };

package/components/password-input/common.d.ts

@@ -0,0 +1,21 @@
+import { type DefaultProps } from '../config';
+export interface PasswordInputProps {
+    modelValue?: string;
+    length?: number;
+    type?: 'bordered' | 'underlined';
+    gap?: number | string;
+    plainText?: boolean;
+    focused?: boolean;
+    customKeyboard?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    validateEvent?: boolean;
+}
+export declare const defaultPasswordInputProps: DefaultProps<PasswordInputProps>;
+export interface PasswordInputEmits {
+    (e: 'update:modelValue', value: string): void;
+    (e: 'change', value: string): void;
+    (e: 'update:focused', focused: boolean): void;
+    (e: 'focus', event: FocusEvent): void;
+    (e: 'blur', event: FocusEvent): void;
+}

package/components/password-input/common.js

@@ -0,0 +1,8 @@
+//#region packages/sard/components/password-input/common.ts
+const defaultPasswordInputProps = {
+	length: 6,
+	type: "bordered",
+	validateEvent: true
+};
+//#endregion
+export { defaultPasswordInputProps };

package/components/password-input/index.css

@@ -0,0 +1 @@
+:root{--s-password-input-gap:10px;--s-password-input-border-color:var(--s-border-color);--s-password-input-border-radius:var(--s-border-radius);--s-password-input-border-color-active:var(--s-color-primary);--s-password-input-height:var(--s-content-height-lg);--s-password-input-ciphertext-size:10px;--s-password-input-ciphertext-bg:var(--s-text-color-primary);--s-password-input-plaintext-font-size:20px;--s-password-input-cursor-width:1px;--s-password-input-cursor-height:20px;--s-password-input-cursor-color:var(--s-text-color-primary)}.s-password-input{position:relative;display:flex;align-items:center;justify-content:center;height:var(--s-password-input-height);gap:var(--s-password-input-gap);-webkit-user-select:none;user-select:none}.s-password-input__item{position:relative;display:flex;align-items:center;justify-content:center;flex:1;height:100%}.s-password-input__plaintext{font-size:var(--s-password-input-plaintext-font-size)}.s-password-input__ciphertext{width:var(--s-password-input-ciphertext-size);height:var(--s-password-input-ciphertext-size);border-radius:var(--s-border-radius-full);background:var(--s-password-input-ciphertext-bg)}.s-password-input__cursor{width:var(--s-password-input-cursor-width);height:var(--s-password-input-cursor-height);background:var(--s-password-input-cursor-color);animation:1s s-password-input-cursor-flicker infinite}@keyframes s-password-input-cursor-flicker{0%{opacity:0}50%{opacity:1}100%{opacity:0}}.s-password-input__input-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;overflow:hidden}.s-password-input__input{position:absolute;top:0;left:-100%;width:200%;height:100%;margin:0;padding:0;border:0;opacity:0}.s-password-input--bordered .s-password-input__item{border-radius:var(--s-password-input-border-radius)}.s-password-input--bordered .s-password-input__item::after{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-color:var(--s-password-input-border-color);border-radius:calc(var(--s-password-input-border-radius)*2)}.s-password-input--underlined .s-password-input__item::after{position:absolute;z-index:1;pointer-events:none;touch-action:none;opacity:1;content:"";left:0;right:0;transform:scaleY(0.5);bottom:0;border-bottom:var(--s-border-width) var(--s-border-style) var(--s-password-input-border-color);transform-origin:bottom center}.s-password-input--tight-bordered .s-password-input__item::after{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-color:var(--s-password-input-border-color);border-inline-start-color:rgba(0,0,0,0)}.s-password-input--tight-bordered .s-password-input__item:first-child::after{border-inline-start-color:var(--s-password-input-border-color)}.s-password-input--bordered .s-password-input__item--active::after,.s-password-input--underlined .s-password-input__item--active::after,.s-password-input--tight-bordered .s-password-input__item--active::after{border-color:var(--s-password-input-border-color-active)}.s-password-input--tight-bordered .s-password-input__item--active:first-child::after{border-inline-start-color:var(--s-password-input-border-color-active)}.s-password-input--disabled{color:var(--s-text-color-disabled)}.s-password-input--disabled .s-password-input__item{background:var(--s-bg-color-disabled)}.s-password-input--disabled .s-password-input__ciphertext{background:var(--s-text-color-disabled)}

package/components/password-input/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _PasswordInput from './password-input.vue';
+export declare const PasswordInput: EnhancedComponent<typeof _PasswordInput>;
+export default PasswordInput;
+export type { PasswordInputProps, PasswordInputEmits } from './common';

package/components/password-input/index.js

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

package/components/password-input/password-input.d.ts

@@ -0,0 +1,27 @@
+import { type PasswordInputProps } from './common';
+declare const __VLS_export: import("vue").DefineComponent<PasswordInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    blur: (event: FocusEvent) => any;
+    change: (value: string) => any;
+    focus: (event: FocusEvent) => any;
+    "update:modelValue": (value: string) => any;
+    "update:focused": (focused: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<PasswordInputProps> & Readonly<{
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onChange?: ((value: string) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
+}>, {
+    length: number;
+    readonly: boolean;
+    type: "bordered" | "underlined";
+    disabled: boolean;
+    modelValue: string;
+    gap: number | string;
+    focused: boolean;
+    validateEvent: boolean;
+    plainText: boolean;
+    customKeyboard: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/components/password-input/password-input.js

@@ -0,0 +1,188 @@
+import { createBem } from "../../utils/bem.js";
+import { isNullish } from "../../utils/is.js";
+import { useFormContext, useFormItemContext } from "../form/common.js";
+import { defaultPasswordInputProps } from "./common.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeDefaults, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, toDisplayString, unref, useTemplateRef, watch } from "vue";
+//#region packages/sard/components/password-input/password-input.vue
+const _hoisted_1 = ["disabled", "maxlength"];
+var password_input_default = /*@__PURE__*/ defineComponent({
+	__name: "password-input",
+	props: /*@__PURE__*/ mergeDefaults({
+		modelValue: {
+			type: String,
+			required: false
+		},
+		length: {
+			type: Number,
+			required: false
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		gap: {
+			type: [Number, String],
+			required: false
+		},
+		plainText: {
+			type: Boolean,
+			required: false
+		},
+		focused: {
+			type: Boolean,
+			required: false
+		},
+		customKeyboard: {
+			type: Boolean,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		readonly: {
+			type: Boolean,
+			required: false
+		},
+		validateEvent: {
+			type: Boolean,
+			required: false
+		}
+	}, defaultPasswordInputProps),
+	emits: [
+		"update:modelValue",
+		"change",
+		"update:focused",
+		"focus",
+		"blur"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("password-input");
+		const formContext = useFormContext();
+		const formItemContext = useFormItemContext();
+		const isDisabled = computed(() => {
+			return formContext?.disabled || props.disabled;
+		});
+		const isReadonly = computed(() => {
+			return formContext?.readonly || props.readonly;
+		});
+		const inputRef = useTemplateRef("input");
+		const normalizeInputValue = (value) => {
+			return value.replace(/[^\d]/g, "");
+		};
+		const toEnd = () => {
+			const el = inputRef.value;
+			el.setSelectionRange(el.value.length, el.value.length);
+		};
+		const nativeInputValue = computed(() => isNullish(props.modelValue) ? "" : normalizeInputValue(String(props.modelValue)));
+		const setNativeInputValue = () => {
+			const input = inputRef.value;
+			if (!input || input.value === nativeInputValue.value) return;
+			input.value = nativeInputValue.value;
+		};
+		const onInput = (event) => {
+			let { value } = event.target;
+			value = normalizeInputValue(value);
+			if (value === nativeInputValue.value) {
+				setNativeInputValue();
+				return;
+			}
+			emit("update:modelValue", value);
+			emit("change", value);
+			nextTick(() => {
+				setNativeInputValue();
+			});
+		};
+		onMounted(() => {
+			setNativeInputValue();
+		});
+		watch(nativeInputValue, () => {
+			nextTick(() => {
+				setNativeInputValue();
+			});
+		});
+		watch(() => props.modelValue, () => {
+			if (props.validateEvent) formItemContext?.onChange();
+		});
+		const innerFocused = ref(props.focused);
+		watch(() => props.focused, () => {
+			innerFocused.value = props.focused;
+		});
+		const onFocus = (event) => {
+			toEnd();
+			innerFocused.value = true;
+			emit("update:focused", true);
+			emit("focus", event);
+		};
+		const onBlur = (event) => {
+			innerFocused.value = false;
+			emit("update:focused", false);
+			emit("blur", event);
+			if (props.validateEvent) formItemContext?.onBlur();
+		};
+		const items = computed(() => {
+			const valueLength = nativeInputValue.value.length;
+			return Array(props.length).fill(0).map((_, i) => {
+				return {
+					index: i,
+					active: innerFocused.value && (i === valueLength || i === valueLength - 1 && i === props.length - 1)
+				};
+			});
+		});
+		const isTight = computed(() => {
+			return props.gap === 0 || typeof props.gap === "string" && parseInt(props.gap) === 0;
+		});
+		const passwordInputClass = computed(() => {
+			return [
+				bem.b(),
+				bem.m("readonly", isReadonly.value),
+				bem.m("disabled", isDisabled.value),
+				bem.m(props.type, !isTight.value),
+				bem.m(`tight-${props.type}`, isTight.value)
+			];
+		});
+		const passwordInputStyle = computed(() => {
+			return { gap: props.gap };
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(passwordInputClass.value),
+				style: normalizeStyle(passwordInputStyle.value)
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (item) => {
+				return openBlock(), createElementBlock("div", {
+					key: item.index,
+					class: normalizeClass([unref(bem).e("item"), unref(bem).em("item", "active", item.active)])
+				}, [item.index < nativeInputValue.value.length ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [__props.plainText ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(bem).e("plaintext"))
+				}, toDisplayString(nativeInputValue.value[item.index]), 3)) : (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(unref(bem).e("ciphertext"))
+				}, null, 2))], 64)) : createCommentVNode("v-if", true), innerFocused.value && item.index === nativeInputValue.value.length ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(unref(bem).e("cursor"))
+				}, null, 2)) : createCommentVNode("v-if", true)], 2);
+			}), 128)), !__props.customKeyboard ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(unref(bem).e("input-wrapper"))
+			}, [createElementVNode("input", {
+				ref: "input",
+				type: "text",
+				inputmode: "numeric",
+				class: normalizeClass(unref(bem).e("input")),
+				disabled: isDisabled.value || isReadonly.value,
+				maxlength: __props.length,
+				onInput,
+				onFocus,
+				onBlur,
+				onClick: toEnd,
+				onKeyup: toEnd,
+				onSelect: toEnd
+			}, null, 42, _hoisted_1)], 2)) : createCommentVNode("v-if", true)], 6);
+		};
+	}
+});
+//#endregion
+export { password_input_default as default };

package/components/picker/common.d.ts

@@ -0,0 +1,25 @@
+import { type DefaultProps } from '../config';
+import { type OptionKeys, type UseOptionKeysReturn } from '../../use';
+export interface PickerProps<T> {
+    columns?: T[] | T[][];
+    optionKeys?: OptionKeys;
+    modelValue?: any;
+}
+export declare const defaultPickerProps: DefaultProps<PickerProps<any>>;
+export interface PickerSlots<T> {
+    option?(props: {
+        option: T;
+        rowIndex: number;
+        columnIndex: number;
+    }): any;
+}
+export interface PickerEmits<T> {
+    (e: 'update:modelValue', value: any, selectedOptions: T[], indexes: number[]): void;
+    (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 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[];

package/components/picker/common.js

@@ -0,0 +1,77 @@
+//#region packages/sard/components/picker/common.ts
+const defaultPickerProps = { columns: () => [] };
+function getColumnsType(columns, { getChildren }) {
+	const firstColumn = columns[0];
+	if (Array.isArray(firstColumn)) return "multi";
+	if (firstColumn && typeof firstColumn === "object" && Array.isArray(getChildren(firstColumn))) return "cascader";
+	return "single";
+}
+function getOptionsByIndexes(indexes, columns, useOptionKeysReturn) {
+	const { getChildren } = useOptionKeysReturn;
+	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)) {
+		case "single": return [columns[indexes[0]]];
+		case "multi": return columns.map((column, i) => column[indexes[i]]);
+		case "cascader": return recurse(columns);
+	}
+}
+function getCascaderValidIndexes(indexes, columns, { getChildren }) {
+	function recurse(columns, i = 0) {
+		let index = Math.min(indexes[i], columns.length - 1);
+		const option = columns[index];
+		if (!option) index = 0;
+		const nextColumn = getChildren(option);
+		if (Array.isArray(nextColumn)) return [index, ...recurse(nextColumn, ++i)];
+		return [index];
+	}
+	return recurse(columns);
+}
+function getMaySingleValueByOptions(options, useOptionKeysReturn, columns) {
+	const { getValue } = useOptionKeysReturn;
+	const values = options.map((option) => getValue(option));
+	return getColumnsType(columns, useOptionKeysReturn) === "single" ? values[0] : values;
+}
+function getIndexesByValue(value, columns, useOptionKeysReturn) {
+	const { getValue, getChildren } = useOptionKeysReturn;
+	const type = getColumnsType(columns, useOptionKeysReturn);
+	function recurse(columns, i = 0) {
+		let index = columns.findIndex((option) => getValue(option) === value[i]);
+		if (index === -1) index = 0;
+		const option = columns[index];
+		const nextColumn = getChildren(option);
+		if (Array.isArray(nextColumn)) return [index, ...recurse(nextColumn, ++i)];
+		return [index];
+	}
+	if (type === "cascader") return recurse(columns);
+	if (type === "single") columns = [columns];
+	return columns.map((column, index) => {
+		const optionIndex = column.findIndex((option) => getValue(option) === value[index]);
+		return Math.max(optionIndex, 0);
+	});
+}
+function getInitialValue(columns, useOptionKeysReturn) {
+	const { getChildren, getValue } = useOptionKeysReturn;
+	function recurse(columns, options) {
+		const option = columns[0];
+		options.push(option);
+		const nextColumn = getChildren(option);
+		if (Array.isArray(nextColumn) && nextColumn.length > 0) return recurse(nextColumn, options);
+		return option;
+	}
+	switch (getColumnsType(columns, useOptionKeysReturn)) {
+		case "single": return [getValue(columns[0]), [columns[0]]];
+		case "multi": return [columns.map((column) => getValue(column[0])), columns.map((column) => column[0])];
+		case "cascader": {
+			const options = [];
+			recurse(columns, options);
+			return [options.map((option) => getValue(option)), options];
+		}
+	}
+}
+//#endregion
+export { defaultPickerProps, getCascaderValidIndexes, getColumnsType, getIndexesByValue, getInitialValue, getMaySingleValueByOptions, getOptionsByIndexes };