ckgl/node_modules/vant/es/number-keyboard/NumberKeyboard.mjs
2024-12-21 13:52:42 +08:00

236 lines
6.6 KiB
JavaScript

import { ref, watch, computed, Teleport, Transition, defineComponent, createVNode as _createVNode, vShow as _vShow, mergeProps as _mergeProps, withDirectives as _withDirectives } from "vue";
import { truthProp, numericProp, getZIndexStyle, makeStringProp, makeNumericProp, stopPropagation, createNamespace, HAPTICS_FEEDBACK } from "../utils/index.mjs";
import { useClickAway } from "@vant/use";
import NumberKeyboardKey from "./NumberKeyboardKey.mjs";
const [name, bem] = createNamespace("number-keyboard");
const numberKeyboardProps = {
show: Boolean,
title: String,
theme: makeStringProp("default"),
zIndex: numericProp,
teleport: [String, Object],
maxlength: makeNumericProp(Infinity),
modelValue: makeStringProp(""),
transition: truthProp,
blurOnClose: truthProp,
showDeleteKey: truthProp,
randomKeyOrder: Boolean,
closeButtonText: String,
deleteButtonText: String,
closeButtonLoading: Boolean,
hideOnClickOutside: truthProp,
safeAreaInsetBottom: truthProp,
extraKey: {
type: [String, Array],
default: ""
}
};
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
const temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
var stdin_default = defineComponent({
name,
inheritAttrs: false,
props: numberKeyboardProps,
emits: ["show", "hide", "blur", "input", "close", "delete", "update:modelValue"],
setup(props, {
emit,
slots,
attrs
}) {
const root = ref();
const genBasicKeys = () => {
const keys2 = Array(9).fill("").map((_, i) => ({
text: i + 1
}));
if (props.randomKeyOrder) {
shuffle(keys2);
}
return keys2;
};
const genDefaultKeys = () => [...genBasicKeys(), {
text: props.extraKey,
type: "extra"
}, {
text: 0
}, {
text: props.showDeleteKey ? props.deleteButtonText : "",
type: props.showDeleteKey ? "delete" : ""
}];
const genCustomKeys = () => {
const keys2 = genBasicKeys();
const {
extraKey
} = props;
const extraKeys = Array.isArray(extraKey) ? extraKey : [extraKey];
if (extraKeys.length === 0) {
keys2.push({
text: 0,
wider: true
});
} else if (extraKeys.length === 1) {
keys2.push({
text: 0,
wider: true
}, {
text: extraKeys[0],
type: "extra"
});
} else if (extraKeys.length === 2) {
keys2.push({
text: extraKeys[0],
type: "extra"
}, {
text: 0
}, {
text: extraKeys[1],
type: "extra"
});
}
return keys2;
};
const keys = computed(() => props.theme === "custom" ? genCustomKeys() : genDefaultKeys());
const onBlur = () => {
if (props.show) {
emit("blur");
}
};
const onClose = () => {
emit("close");
if (props.blurOnClose) {
onBlur();
}
};
const onAnimationEnd = () => emit(props.show ? "show" : "hide");
const onPress = (text, type) => {
if (text === "") {
if (type === "extra") {
onBlur();
}
return;
}
const value = props.modelValue;
if (type === "delete") {
emit("delete");
emit("update:modelValue", value.slice(0, value.length - 1));
} else if (type === "close") {
onClose();
} else if (value.length < +props.maxlength) {
emit("input", text);
emit("update:modelValue", value + text);
}
};
const renderTitle = () => {
const {
title,
theme,
closeButtonText
} = props;
const leftSlot = slots["title-left"];
const showClose = closeButtonText && theme === "default";
const showTitle = title || showClose || leftSlot;
if (!showTitle) {
return;
}
return _createVNode("div", {
"class": bem("header")
}, [leftSlot && _createVNode("span", {
"class": bem("title-left")
}, [leftSlot()]), title && _createVNode("h2", {
"class": bem("title")
}, [title]), showClose && _createVNode("button", {
"type": "button",
"class": [bem("close"), HAPTICS_FEEDBACK],
"onClick": onClose
}, [closeButtonText])]);
};
const renderKeys = () => keys.value.map((key) => {
const keySlots = {};
if (key.type === "delete") {
keySlots.default = slots.delete;
}
if (key.type === "extra") {
keySlots.default = slots["extra-key"];
}
return _createVNode(NumberKeyboardKey, {
"key": key.text,
"text": key.text,
"type": key.type,
"wider": key.wider,
"color": key.color,
"onPress": onPress
}, keySlots);
});
const renderSidebar = () => {
if (props.theme === "custom") {
return _createVNode("div", {
"class": bem("sidebar")
}, [props.showDeleteKey && _createVNode(NumberKeyboardKey, {
"large": true,
"text": props.deleteButtonText,
"type": "delete",
"onPress": onPress
}, {
default: slots.delete
}), _createVNode(NumberKeyboardKey, {
"large": true,
"text": props.closeButtonText,
"type": "close",
"color": "blue",
"loading": props.closeButtonLoading,
"onPress": onPress
}, null)]);
}
};
watch(() => props.show, (value) => {
if (!props.transition) {
emit(value ? "show" : "hide");
}
});
if (props.hideOnClickOutside) {
useClickAway(root, onBlur, {
eventName: "touchstart"
});
}
return () => {
const Title = renderTitle();
const Content = _createVNode(Transition, {
"name": props.transition ? "van-slide-up" : ""
}, {
default: () => [_withDirectives(_createVNode("div", _mergeProps({
"ref": root,
"style": getZIndexStyle(props.zIndex),
"class": bem({
unfit: !props.safeAreaInsetBottom,
"with-title": !!Title
}),
"onAnimationend": onAnimationEnd,
"onTouchstartPassive": stopPropagation
}, attrs), [Title, _createVNode("div", {
"class": bem("body")
}, [_createVNode("div", {
"class": bem("keys")
}, [renderKeys()]), renderSidebar()])]), [[_vShow, props.show]])]
});
if (props.teleport) {
return _createVNode(Teleport, {
"to": props.teleport
}, {
default: () => [Content]
});
}
return Content;
};
}
});
export {
stdin_default as default,
numberKeyboardProps
};