123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230 |
- import { withDirectives as _withDirectives, mergeProps as _mergeProps, vShow as _vShow, createVNode as _createVNode } from "vue";
- import { ref, watch, computed, Teleport, Transition, defineComponent } 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 === 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
- }, {
- delete: 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
- };
|