sard 1.0.0 → 1.0.2

package/components/input/input.js

@@ -0,0 +1,387 @@
+import { createBem } from "../../utils/bem.js";
+import { clamp, formatNumber } from "../../utils/number.js";
+import { isNullish } from "../../utils/is.js";
+import { usePointerDown } from "../../use/usePointerDown.js";
+import { useSimulatedClick } from "../../use/useSimulatedClick.js";
+import { useComposition } from "../../use/useComposition.js";
+import { useFormContext, useFormItemContext } from "../form/common.js";
+import { compactContextKey } from "../compact/common.js";
+import { defaultInputProps } from "./common.js";
+import { mapInputType, resizeTextarea } from "./utils.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, inject, mergeDefaults, mergeProps, nextTick, normalizeClass, onMounted, openBlock, ref, renderSlot, toDisplayString, unref, useSlots, useTemplateRef, vShow, watch, withDirectives, withModifiers } from "vue";
+import { Eye, EyeSlash, XCircleFill } from "@sard/icons";
+//#region packages/sard/components/input/input.vue
+const _hoisted_1 = ["type", "inputmode"];
+const _hoisted_2 = ["inputmode", "rows"];
+var input_default = /*@__PURE__*/ defineComponent({
+	__name: "input",
+	props: /*@__PURE__*/ mergeDefaults({
+		modelValue: {
+			type: [
+				String,
+				Number,
+				null
+			],
+			required: false
+		},
+		modelModifiers: {
+			type: Object,
+			required: false
+		},
+		clearable: {
+			type: Boolean,
+			required: false
+		},
+		showClearOnlyFocus: {
+			type: Boolean,
+			required: false
+		},
+		showCount: {
+			type: Boolean,
+			required: false
+		},
+		inlaid: {
+			type: Boolean,
+			required: false
+		},
+		borderless: {
+			type: Boolean,
+			required: false
+		},
+		focused: {
+			type: Boolean,
+			required: false
+		},
+		autoHeight: {
+			type: [Boolean, Object],
+			required: false
+		},
+		validateEvent: {
+			type: Boolean,
+			required: false
+		},
+		showEye: {
+			type: Boolean,
+			required: false
+		},
+		precision: {
+			type: Number,
+			required: false
+		},
+		formatter: {
+			type: Function,
+			required: false
+		},
+		type: {
+			type: [String, Object],
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		readonly: {
+			type: Boolean,
+			required: false
+		},
+		maxlength: {
+			type: [Number, String],
+			required: false
+		},
+		min: {
+			type: Number,
+			required: false
+		},
+		max: {
+			type: Number,
+			required: false
+		},
+		rows: {
+			type: [String, Number],
+			required: false
+		},
+		placeholder: {
+			type: String,
+			required: false
+		},
+		autofocus: {
+			type: Boolean,
+			required: false
+		},
+		autocomplete: {
+			type: String,
+			required: false
+		},
+		inputmode: {
+			type: null,
+			required: false
+		},
+		enterkeyhint: {
+			type: null,
+			required: false
+		},
+		spellcheck: {
+			type: [Boolean, String],
+			required: false,
+			skipCheck: true
+		},
+		autocorrect: {
+			type: String,
+			required: false
+		},
+		autocapitalize: {
+			type: String,
+			required: false
+		}
+	}, defaultInputProps),
+	emits: [
+		"input",
+		"update:modelValue",
+		"change",
+		"clear",
+		"blur",
+		"focus",
+		"compositionstart",
+		"compositionupdate",
+		"compositionend"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const slots = useSlots();
+		const emit = __emit;
+		const bem = createBem("input");
+		const formContext = useFormContext();
+		const formItemContext = useFormItemContext();
+		const compactContext = inject(compactContextKey, null);
+		const isDisabled = computed(() => {
+			return formContext?.disabled || props.disabled;
+		});
+		const isReadonly = computed(() => {
+			return formContext?.readonly || props.readonly;
+		});
+		const inputRef = useTemplateRef("input");
+		const textareaRef = useTemplateRef("textarea");
+		const controlRef = computed(() => inputRef.value || textareaRef.value);
+		const inputType = computed(() => mapInputType(props.type, props.inputmode));
+		const nativeInputValue = computed(() => isNullish(props.modelValue) ? "" : String(props.modelValue));
+		const hasModelModifiers = computed(() => !!Object.keys(props.modelModifiers).length);
+		const setNativeInputValue = () => {
+			const control = controlRef.value;
+			if (!control || control.value === nativeInputValue.value) return;
+			control.value = nativeInputValue.value;
+		};
+		watch(() => props.modelValue, () => {
+			nextTick(adjustTextareaSize);
+			if (props.validateEvent) formItemContext?.onChange();
+		});
+		const isNumber = computed(() => {
+			return props.modelModifiers.number || props.type === "number" || props.type === "digit";
+		});
+		const normalizeInputValue = (value, trigger) => {
+			const { trim } = props.modelModifiers;
+			if (trim || isNumber.value) value = value.trim();
+			if (isNumber.value) {
+				const isDecimal = props.type === "number";
+				value = formatNumber(value, isDecimal, isDecimal);
+				if (trigger === "change" && value !== "") {
+					if (props.min !== void 0 || props.max !== void 0) {
+						const adjustedValue = clamp(+value, props.min ?? -Infinity, props.max ?? Infinity);
+						if (+value !== adjustedValue) value = adjustedValue.toString();
+					}
+					if (props.precision !== void 0) value = (+value || 0).toFixed(props.precision);
+				}
+			}
+			if (props.formatter) value = props.formatter(value, trigger);
+			return value;
+		};
+		const onInput = (event) => {
+			if (isComposing.value) return;
+			const { lazy } = props.modelModifiers;
+			let { value } = event.target;
+			if (lazy) {
+				emit("input", value);
+				return;
+			}
+			value = normalizeInputValue(value, "input");
+			if (value === nativeInputValue.value) {
+				setNativeInputValue();
+				return;
+			}
+			emit("update:modelValue", value);
+			emit("input", value);
+			nextTick(() => {
+				if (!hasModelModifiers.value) setNativeInputValue();
+			});
+		};
+		const onChange = (event) => {
+			let { value } = event.target;
+			value = normalizeInputValue(value, "change");
+			if (props.modelModifiers.lazy || value !== nativeInputValue.value) emit("update:modelValue", value);
+			emit("change", value);
+			nextTick(() => {
+				setNativeInputValue();
+			});
+		};
+		const { isComposing, onCompositionStart, onCompositionUpdate, onCompositionEnd } = useComposition({
+			emit,
+			afterComposition: onInput
+		});
+		onMounted(() => {
+			setNativeInputValue();
+			nextTick(adjustTextareaSize);
+		});
+		watch(nativeInputValue, () => {
+			setNativeInputValue();
+		});
+		watch(() => props.type, () => {
+			nextTick(() => {
+				setNativeInputValue();
+				adjustTextareaSize();
+			});
+		});
+		const textLength = computed(() => nativeInputValue.value.length);
+		const countVisible = computed(() => props.showCount && !!props.maxlength && (props.type === "text" || props.type === "textarea") && !isDisabled.value && !isReadonly.value && !props.showEye);
+		const adjustTextareaSize = () => {
+			const textarea = textareaRef.value;
+			if (props.type === "textarea" && textarea && props.autoHeight) resizeTextarea(textarea, props.autoHeight);
+		};
+		const innerFocused = ref(props.focused);
+		watch([() => props.focused], () => {
+			innerFocused.value = props.focused;
+		});
+		const onFocus = (event) => {
+			innerFocused.value = true;
+			emit("focus", event);
+		};
+		const onBlur = (event) => {
+			innerFocused.value = false;
+			emit("blur", event);
+			if (props.validateEvent) formItemContext?.onBlur();
+		};
+		const clearVisible = computed(() => {
+			const visibleBase = props.clearable && nativeInputValue.value && !isDisabled.value && !isReadonly.value;
+			return props.showClearOnlyFocus ? holdupClear.value || innerFocused.value && visibleBase : visibleBase;
+		});
+		const holdupClear = ref(false);
+		const [onClearTouchStart, onClearTouchEnd] = useSimulatedClick({
+			onTouchStart() {
+				holdupClear.value = true;
+			},
+			onTouchEnd() {
+				holdupClear.value = false;
+			},
+			onClick(event) {
+				event.preventDefault();
+				clear();
+			}
+		});
+		const onClearPointerDown = usePointerDown(onClearTouchStart, void 0, onClearTouchEnd);
+		const clear = () => {
+			emit("update:modelValue", "");
+			emit("change", "");
+			emit("clear");
+			emit("input", "");
+		};
+		const isPlainText = ref(false);
+		const onEyeClick = () => {
+			isPlainText.value = !isPlainText.value;
+		};
+		const mergedInputType = computed(() => {
+			if (props.type !== "password") return inputType.value.type;
+			return isPlainText.value ? "text" : "password";
+		});
+		const mergedShowEye = computed(() => props.type === "password" && props.showEye);
+		const showAppend = computed(() => {
+			return !!slots.append || props.clearable || mergedShowEye.value || countVisible.value;
+		});
+		const inputClass = computed(() => {
+			return [
+				bem.b(),
+				bem.m(props.type),
+				bem.m("inlaid", props.inlaid),
+				bem.m("borderless", props.borderless),
+				bem.is("disabled", isDisabled.value),
+				bem.is("readonly", isReadonly.value),
+				bem.is("focused", innerFocused.value),
+				bem.m(`compact-${compactContext?.direction}`, compactContext),
+				bem.m("compact-block", compactContext?.block)
+			];
+		});
+		const commonProps = computed(() => {
+			return {
+				class: bem.e("control"),
+				disabled: isDisabled.value,
+				readonly: isReadonly.value,
+				maxlength: props.maxlength,
+				onFocus,
+				onBlur,
+				onInput,
+				onChange,
+				onCompositionstart: onCompositionStart,
+				onCompositionupdate: onCompositionUpdate,
+				onCompositionend: onCompositionEnd,
+				placeholder: props.placeholder,
+				autofocus: props.autofocus,
+				autocomplete: props.autocomplete,
+				enterkeyhint: props.enterkeyhint,
+				spellcheck: props.spellcheck,
+				autocorrect: props.autocorrect,
+				autocapitalize: props.autocapitalize
+			};
+		});
+		__expose({
+			focus() {
+				controlRef.value?.focus();
+			},
+			blur() {
+				controlRef.value?.blur();
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(inputClass.value) }, [
+				slots.prepend ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(bem).e("prepend"))
+				}, [renderSlot(_ctx.$slots, "prepend")], 2)) : createCommentVNode("v-if", true),
+				__props.type !== "textarea" ? (openBlock(), createElementBlock("input", mergeProps({
+					key: 1,
+					ref: "input"
+				}, commonProps.value, {
+					type: mergedInputType.value,
+					inputmode: inputType.value.inputmode
+				}), null, 16, _hoisted_1)) : (openBlock(), createElementBlock("textarea", mergeProps({
+					key: 2,
+					ref: "textarea"
+				}, commonProps.value, {
+					inputmode: __props.inputmode,
+					rows: __props.rows
+				}), null, 16, _hoisted_2)),
+				showAppend.value ? (openBlock(), createElementBlock("div", {
+					key: 3,
+					class: normalizeClass(unref(bem).e("append"))
+				}, [
+					__props.clearable ? withDirectives((openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass(unref(bem).e("clear")),
+						onPointerdown: _cache[0] || (_cache[0] = (...args) => unref(onClearPointerDown) && unref(onClearPointerDown)(...args)),
+						onTouchstart: _cache[1] || (_cache[1] = (...args) => unref(onClearTouchStart) && unref(onClearTouchStart)(...args)),
+						onTouchend: _cache[2] || (_cache[2] = (...args) => unref(onClearTouchEnd) && unref(onClearTouchEnd)(...args)),
+						onTouchcancel: _cache[3] || (_cache[3] = (...args) => unref(onClearTouchEnd) && unref(onClearTouchEnd)(...args))
+					}, [createVNode(unref(XCircleFill))], 34)), [[vShow, clearVisible.value]]) : createCommentVNode("v-if", true),
+					mergedShowEye.value ? (openBlock(), createElementBlock("div", {
+						key: 1,
+						class: normalizeClass(unref(bem).e("eye")),
+						onClick: withModifiers(onEyeClick, ["stop"])
+					}, [isPlainText.value ? (openBlock(), createBlock(unref(Eye), { key: 0 })) : (openBlock(), createBlock(unref(EyeSlash), { key: 1 }))], 2)) : createCommentVNode("v-if", true),
+					renderSlot(_ctx.$slots, "append"),
+					countVisible.value ? (openBlock(), createElementBlock("div", {
+						key: 2,
+						class: normalizeClass(unref(bem).e("count"))
+					}, toDisplayString(textLength.value) + " / " + toDisplayString(__props.maxlength), 3)) : createCommentVNode("v-if", true)
+				], 2)) : createCommentVNode("v-if", true)
+			], 2);
+		};
+	}
+});
+//#endregion
+export { input_default as default };

package/components/input/utils.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes, InputHTMLAttributes } from 'vue';
+import type { InputAutoHeight, InputType } from './common';
+export declare function resizeTextarea(el: HTMLTextAreaElement, autoHeight?: InputAutoHeight): void;
+export declare function mapInputType(type: InputType, inputmode?: HTMLAttributes['inputmode']): {
+    type: InputHTMLAttributes['type'];
+    inputmode?: HTMLAttributes['inputmode'];
+};

package/components/input/utils.js

@@ -0,0 +1,36 @@
+import { isObject } from "../../utils/is.js";
+//#region packages/sard/components/input/utils.ts
+function resizeTextarea(el, autoHeight) {
+	if (!autoHeight) return;
+	const scrollTop = window.scrollY;
+	el.style.height = "auto";
+	let height = el.scrollHeight;
+	if (isObject(autoHeight)) {
+		const { maxHeight, minHeight } = autoHeight;
+		if (maxHeight !== void 0) height = Math.min(height, maxHeight);
+		if (minHeight !== void 0) height = Math.max(height, minHeight);
+	}
+	if (height) {
+		el.style.height = `${height}px`;
+		window.scrollTo({
+			top: scrollTop,
+			behavior: "instant"
+		});
+	}
+}
+function mapInputType(type, inputmode) {
+	if (type === "number") {
+		type = "text";
+		inputmode ??= "decimal";
+	}
+	if (type === "digit") {
+		type = "tel";
+		inputmode ??= "numeric";
+	}
+	return {
+		type,
+		inputmode
+	};
+}
+//#endregion
+export { mapInputType, resizeTextarea };

package/components/keyboard/common.d.ts

@@ -0,0 +1,28 @@
+import { type DefaultProps } from '../config';
+export type KeyboardPlateMode = 'chinese' | 'english';
+export interface KeyboardProps {
+    type?: 'number' | 'digit' | 'idcard' | 'random' | 'plate';
+    mode?: KeyboardPlateMode;
+    disabledKey?: (key: string) => boolean;
+}
+export declare const defaultKeyboardProps: DefaultProps<KeyboardProps>;
+export interface KeyboardSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface KeyboardEmits {
+    (e: 'input', key: string): void;
+    (e: 'delete'): void;
+    (e: 'update:mode', mode: KeyboardPlateMode): void;
+}
+export interface KeyBoardExpose {
+    shuffle: () => void;
+}
+export declare const plateProvinceKeys: string[];
+export declare const plateSuffixKeys: string[];
+export declare const plateEnglishLetterKeys: string[];
+export declare const numberKeys: string[];
+export declare const digitKeys: string[];
+export declare const idcardKeys: string[];
+export declare const chineseKeys: string[];
+export declare const englishKeys: string[];
+export declare function getRandomKeys(): string[];

package/components/keyboard/common.js

@@ -0,0 +1,34 @@
+import { shuffle } from "../../utils/array.js";
+//#region packages/sard/components/keyboard/common.ts
+const defaultKeyboardProps = {
+	type: "number",
+	mode: "chinese"
+};
+const oneToNineChars = "123456789";
+const oneToZeroChars = "1234567890";
+const provinceChars = "京津渝沪冀晋辽吉黑苏浙皖闽赣鲁豫鄂湘粤琼川贵云陕甘青蒙桂宁新藏";
+const suffixChars = "使领警学港澳";
+const englishChars = "QWERTYUIOPASDFGHJKLZXCVBNM";
+const plateProvinceKeys = provinceChars.split("");
+const plateSuffixKeys = suffixChars.split("");
+const plateEnglishLetterKeys = englishChars.split("");
+const numberOneToNine = oneToNineChars.split("");
+const numberOneToZero = oneToZeroChars.split("");
+const numberKeys = numberOneToZero;
+const digitKeys = [
+	...numberOneToNine,
+	".",
+	"0"
+];
+const idcardKeys = [
+	...numberOneToNine,
+	"X",
+	"0"
+];
+const chineseKeys = [...plateProvinceKeys, ...plateSuffixKeys];
+const englishKeys = [...numberOneToZero, ...plateEnglishLetterKeys];
+function getRandomKeys() {
+	return shuffle(numberKeys.slice());
+}
+//#endregion
+export { chineseKeys, defaultKeyboardProps, digitKeys, englishKeys, getRandomKeys, idcardKeys, numberKeys, plateEnglishLetterKeys, plateProvinceKeys, plateSuffixKeys };

package/components/keyboard/index.css

@@ -0,0 +1 @@
+:root{--s-keyboard-bg:var(--s-gray-200);--s-keyboard-padding:6px;--s-keyboard-key-gap:6px;--s-keyboard-key-color:var(--s-text-color-primary);--s-keyboard-key-bg:var(--s-white);--s-keyboard-key-bg-active:var(--s-gray-300);--s-keyboard-key-height:var(--s-size-4xl);--s-keyboard-key-radius:var(--s-border-radius);--s-keyboard-key-font-size:var(--s-font-size-xl);--s-keyboard-key-plate-height:var(--s-size-3xl);--s-keyboard-key-plate-radius:var(--s-border-radius-sm);--s-keyboard-key-plate-font-size:var(--s-font-size);--s-keyboard-key-plate-backspace-font-size:var(--s-size);--s-keyboard-key-plate-bg:var(--s-gray-300);--s-keyboard-key-plate-bg-active:var(--s-gray-400)}.dark{--s-keyboard-bg:var(--s-gray-800);--s-keyboard-key-color:var(--s-white);--s-keyboard-key-bg:var(--s-gray-600);--s-keyboard-key-bg-active:var(--s-gray-500);--s-keyboard-key-plate-bg:var(--s-gray-600);--s-keyboard-key-plate-bg-active:var(--s-gray-500)}.s-keyboard{display:grid;gap:var(--s-keyboard-key-gap);padding:var(--s-keyboard-padding);background:var(--s-keyboard-bg)}.s-keyboard--number,.s-keyboard--digit,.s-keyboard--idcard,.s-keyboard--random{grid-template-columns:repeat(3, 1fr)}.s-keyboard--number .s-keyboard__key:nth-child(10),.s-keyboard--random .s-keyboard__key:nth-child(10){grid-column:1/3}.s-keyboard__key{display:flex;align-items:center;justify-content:center;height:var(--s-keyboard-key-height);border-radius:var(--s-keyboard-key-radius);font-size:var(--s-keyboard-key-font-size);color:var(--s-keyboard-key-color);background:var(--s-keyboard-key-bg);cursor:pointer;-webkit-user-select:none;user-select:none}.s-keyboard__key:active{background:var(--s-keyboard-key-bg-active)}.s-keyboard__key:is(.is-disabled){opacity:.4;pointer-events:none}.s-keyboard--plate{grid-template-columns:repeat(20, 1fr)}.s-keyboard--plate .s-keyboard__key{grid-column:span 2;height:var(--s-keyboard-key-plate-height);border-radius:var(--s-keyboard-key-plate-radius);font-size:var(--s-keyboard-key-plate-font-size)}.s-keyboard--plate .s-keyboard__key--A{grid-column:2/4}.s-keyboard--plate .s-keyboard__key--I,.s-keyboard--plate .s-keyboard__key--O{opacity:.4;pointer-events:none}.s-keyboard--plate .s-keyboard__key--backspace,.s-keyboard--plate .s-keyboard__key--toggle{grid-column:span 3;background:var(--s-keyboard-key-plate-bg)}.s-keyboard--plate .s-keyboard__key--backspace:active,.s-keyboard--plate .s-keyboard__key--toggle:active{background:var(--s-keyboard-key-plate-bg-active)}.s-keyboard--plate .s-keyboard__key--backspace{font-size:var(--s-keyboard-key-plate-backspace-font-size)}:root[dir=rtl] .s-keyboard__delete-icon{transform:rotateY(180deg)}

package/components/keyboard/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _Keyboard from './keyboard.vue';
+export declare const Keyboard: EnhancedComponent<typeof _Keyboard>;
+export default Keyboard;
+export { type KeyboardProps, type KeyboardSlots, type KeyboardEmits, type KeyBoardExpose, type KeyboardPlateMode, plateProvinceKeys, plateSuffixKeys, plateEnglishLetterKeys, } from './common';

package/components/keyboard/index.js

@@ -0,0 +1,7 @@
+import { enhanceComponent } from "../../utils/component.js";
+import { plateEnglishLetterKeys, plateProvinceKeys, plateSuffixKeys } from "./common.js";
+import keyboard_default from "./keyboard.js";
+//#region packages/sard/components/keyboard/index.ts
+const Keyboard = enhanceComponent(keyboard_default);
+//#endregion
+export { Keyboard, Keyboard as default, plateEnglishLetterKeys, plateProvinceKeys, plateSuffixKeys };

package/components/keyboard/keyboard.d.ts

@@ -0,0 +1,23 @@
+import { type KeyboardProps, type KeyboardSlots, type KeyBoardExpose, type KeyboardPlateMode } from './common';
+type __VLS_Slots = KeyboardSlots;
+declare const __VLS_base: import("vue").DefineComponent<KeyboardProps, KeyBoardExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    input: (key: string) => any;
+    delete: () => any;
+    "update:mode": (mode: KeyboardPlateMode) => any;
+}, string, import("vue").PublicProps, Readonly<KeyboardProps> & Readonly<{
+    onInput?: ((key: string) => any) | undefined;
+    onDelete?: (() => any) | undefined;
+    "onUpdate:mode"?: ((mode: KeyboardPlateMode) => any) | undefined;
+}>, {
+    mode: KeyboardPlateMode;
+    type: "number" | "digit" | "idcard" | "random" | "plate";
+    disabledKey: (key: string) => boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/keyboard/keyboard.js

@@ -0,0 +1,139 @@
+import { createBem } from "../../utils/bem.js";
+import { chineseKeys, defaultKeyboardProps, digitKeys, englishKeys, getRandomKeys, idcardKeys, numberKeys } from "./common.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, openBlock, ref, renderList, toDisplayString, unref, useModel, watch } from "vue";
+import { Backspace } from "@sard/icons";
+//#region packages/sard/components/keyboard/keyboard.vue
+const _hoisted_1 = ["onClick"];
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = ["onClick"];
+const _hoisted_5 = ["onClick"];
+const _hoisted_6 = ["onClick"];
+var keyboard_default = /*@__PURE__*/ defineComponent({
+	__name: "keyboard",
+	props: /*@__PURE__*/ mergeDefaults({
+		type: {
+			type: String,
+			required: false
+		},
+		mode: {
+			type: String,
+			required: false
+		},
+		disabledKey: {
+			type: Function,
+			required: false
+		}
+	}, defaultKeyboardProps),
+	emits: [
+		"input",
+		"delete",
+		"update:mode"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("keyboard");
+		const onKeyClick = (key) => {
+			if (props.type === "plate") {
+				if (key === "I" || key === "O") return;
+				if (chineseKeys.includes(key)) toggle();
+			}
+			emit("input", key);
+		};
+		const onBackspace = () => {
+			emit("delete");
+		};
+		const randomKeys = ref([]);
+		watch(() => props.type, () => {
+			if (props.type === "random") randomKeys.value = getRandomKeys();
+		}, { immediate: true });
+		const innerMode = useModel(props, "mode");
+		const toggleKey = computed(() => {
+			return {
+				chinese: "ABC",
+				english: "省份"
+			}[innerMode.value];
+		});
+		const interceptOrder = computed(() => {
+			if (innerMode.value === "english") return englishKeys.length - 8;
+			const overflow = chineseKeys.length % 10;
+			return chineseKeys.length - (overflow > 7 ? 0 : overflow + 1);
+		});
+		const toggle = () => {
+			const nextMode = innerMode.value === "chinese" ? "english" : "chinese";
+			innerMode.value = nextMode;
+		};
+		__expose({ shuffle() {
+			randomKeys.value = getRandomKeys();
+		} });
+		const getKeyClass = (key) => {
+			return [
+				bem.e("key"),
+				bem.em("key", key),
+				bem.is("disabled", props.disabledKey?.(key))
+			];
+		};
+		const keyboardClass = computed(() => {
+			return [bem.b(), bem.m(props.type)];
+		});
+		const backspaceClass = computed(() => {
+			return [bem.e("key"), bem.em("key", "backspace")];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(keyboardClass.value) }, [__props.type === "number" ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(numberKeys), (key) => {
+				return openBlock(), createElementBlock("div", {
+					key,
+					class: normalizeClass(getKeyClass(key)),
+					onClick: ($event) => onKeyClick(key)
+				}, toDisplayString(key), 11, _hoisted_1);
+			}), 128)) : __props.type === "digit" ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(digitKeys), (key) => {
+				return openBlock(), createElementBlock("div", {
+					key,
+					class: normalizeClass(getKeyClass(key)),
+					onClick: ($event) => onKeyClick(key)
+				}, toDisplayString(key), 11, _hoisted_2);
+			}), 128)) : __props.type === "idcard" ? (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(unref(idcardKeys), (key) => {
+				return openBlock(), createElementBlock("div", {
+					key,
+					class: normalizeClass(getKeyClass(key)),
+					onClick: ($event) => onKeyClick(key)
+				}, toDisplayString(key), 11, _hoisted_3);
+			}), 128)) : __props.type === "random" ? (openBlock(true), createElementBlock(Fragment, { key: 3 }, renderList(randomKeys.value, (key) => {
+				return openBlock(), createElementBlock("div", {
+					key,
+					class: normalizeClass(getKeyClass(key)),
+					onClick: ($event) => onKeyClick(key)
+				}, toDisplayString(key), 11, _hoisted_4);
+			}), 128)) : __props.type === "plate" ? (openBlock(), createElementBlock(Fragment, { key: 4 }, [
+				unref(innerMode) === "chinese" ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(chineseKeys), (key, i) => {
+					return openBlock(), createElementBlock("div", {
+						key,
+						class: normalizeClass(getKeyClass(key)),
+						style: normalizeStyle(`order: ${i}`),
+						onClick: ($event) => onKeyClick(key)
+					}, toDisplayString(key), 15, _hoisted_5);
+				}), 128)) : createCommentVNode("v-if", true),
+				unref(innerMode) === "english" ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(englishKeys), (key, i) => {
+					return openBlock(), createElementBlock("div", {
+						key,
+						style: normalizeStyle(`order: ${i}`),
+						class: normalizeClass(getKeyClass(key)),
+						onClick: ($event) => onKeyClick(key)
+					}, toDisplayString(key), 15, _hoisted_6);
+				}), 128)) : createCommentVNode("v-if", true),
+				createElementVNode("div", {
+					class: normalizeClass(getKeyClass("toggle")),
+					style: normalizeStyle(`order: ${interceptOrder.value}`),
+					onClick: _cache[0] || (_cache[0] = ($event) => toggle())
+				}, toDisplayString(toggleKey.value), 7)
+			], 64)) : createCommentVNode("v-if", true), createElementVNode("div", {
+				class: normalizeClass(backspaceClass.value),
+				style: { "order": "100" },
+				onClick: onBackspace
+			}, [createVNode(unref(Backspace), { class: normalizeClass(unref(bem).e("delete-icon")) }, null, 8, ["class"])], 2)], 2);
+		};
+	}
+});
+//#endregion
+export { keyboard_default as default };