NumberKeyboard.js 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255
  1. var __create = Object.create;
  2. var __defProp = Object.defineProperty;
  3. var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
  4. var __getOwnPropNames = Object.getOwnPropertyNames;
  5. var __getProtoOf = Object.getPrototypeOf;
  6. var __hasOwnProp = Object.prototype.hasOwnProperty;
  7. var __export = (target, all) => {
  8. for (var name2 in all)
  9. __defProp(target, name2, { get: all[name2], enumerable: true });
  10. };
  11. var __copyProps = (to, from, except, desc) => {
  12. if (from && typeof from === "object" || typeof from === "function") {
  13. for (let key of __getOwnPropNames(from))
  14. if (!__hasOwnProp.call(to, key) && key !== except)
  15. __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  16. }
  17. return to;
  18. };
  19. var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  20. isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  21. mod
  22. ));
  23. var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
  24. var stdin_exports = {};
  25. __export(stdin_exports, {
  26. default: () => stdin_default
  27. });
  28. module.exports = __toCommonJS(stdin_exports);
  29. var import_vue = require("vue");
  30. var import_vue2 = require("vue");
  31. var import_utils = require("../utils");
  32. var import_use = require("@vant/use");
  33. var import_NumberKeyboardKey = __toESM(require("./NumberKeyboardKey"));
  34. const [name, bem] = (0, import_utils.createNamespace)("number-keyboard");
  35. const numberKeyboardProps = {
  36. show: Boolean,
  37. title: String,
  38. theme: (0, import_utils.makeStringProp)("default"),
  39. zIndex: import_utils.numericProp,
  40. teleport: [String, Object],
  41. maxlength: (0, import_utils.makeNumericProp)(Infinity),
  42. modelValue: (0, import_utils.makeStringProp)(""),
  43. transition: import_utils.truthProp,
  44. blurOnClose: import_utils.truthProp,
  45. showDeleteKey: import_utils.truthProp,
  46. randomKeyOrder: Boolean,
  47. closeButtonText: String,
  48. deleteButtonText: String,
  49. closeButtonLoading: Boolean,
  50. hideOnClickOutside: import_utils.truthProp,
  51. safeAreaInsetBottom: import_utils.truthProp,
  52. extraKey: {
  53. type: [String, Array],
  54. default: ""
  55. }
  56. };
  57. function shuffle(array) {
  58. for (let i = array.length - 1; i > 0; i--) {
  59. const j = Math.floor(Math.random() * (i + 1));
  60. const temp = array[i];
  61. array[i] = array[j];
  62. array[j] = temp;
  63. }
  64. return array;
  65. }
  66. var stdin_default = (0, import_vue2.defineComponent)({
  67. name,
  68. inheritAttrs: false,
  69. props: numberKeyboardProps,
  70. emits: ["show", "hide", "blur", "input", "close", "delete", "update:modelValue"],
  71. setup(props, {
  72. emit,
  73. slots,
  74. attrs
  75. }) {
  76. const root = (0, import_vue2.ref)();
  77. const genBasicKeys = () => {
  78. const keys2 = Array(9).fill("").map((_, i) => ({
  79. text: i + 1
  80. }));
  81. if (props.randomKeyOrder) {
  82. shuffle(keys2);
  83. }
  84. return keys2;
  85. };
  86. const genDefaultKeys = () => [...genBasicKeys(), {
  87. text: props.extraKey,
  88. type: "extra"
  89. }, {
  90. text: 0
  91. }, {
  92. text: props.showDeleteKey ? props.deleteButtonText : "",
  93. type: props.showDeleteKey ? "delete" : ""
  94. }];
  95. const genCustomKeys = () => {
  96. const keys2 = genBasicKeys();
  97. const {
  98. extraKey
  99. } = props;
  100. const extraKeys = Array.isArray(extraKey) ? extraKey : [extraKey];
  101. if (extraKeys.length === 1) {
  102. keys2.push({
  103. text: 0,
  104. wider: true
  105. }, {
  106. text: extraKeys[0],
  107. type: "extra"
  108. });
  109. } else if (extraKeys.length === 2) {
  110. keys2.push({
  111. text: extraKeys[0],
  112. type: "extra"
  113. }, {
  114. text: 0
  115. }, {
  116. text: extraKeys[1],
  117. type: "extra"
  118. });
  119. }
  120. return keys2;
  121. };
  122. const keys = (0, import_vue2.computed)(() => props.theme === "custom" ? genCustomKeys() : genDefaultKeys());
  123. const onBlur = () => {
  124. if (props.show) {
  125. emit("blur");
  126. }
  127. };
  128. const onClose = () => {
  129. emit("close");
  130. if (props.blurOnClose) {
  131. onBlur();
  132. }
  133. };
  134. const onAnimationEnd = () => emit(props.show ? "show" : "hide");
  135. const onPress = (text, type) => {
  136. if (text === "") {
  137. if (type === "extra") {
  138. onBlur();
  139. }
  140. return;
  141. }
  142. const value = props.modelValue;
  143. if (type === "delete") {
  144. emit("delete");
  145. emit("update:modelValue", value.slice(0, value.length - 1));
  146. } else if (type === "close") {
  147. onClose();
  148. } else if (value.length < props.maxlength) {
  149. emit("input", text);
  150. emit("update:modelValue", value + text);
  151. }
  152. };
  153. const renderTitle = () => {
  154. const {
  155. title,
  156. theme,
  157. closeButtonText
  158. } = props;
  159. const leftSlot = slots["title-left"];
  160. const showClose = closeButtonText && theme === "default";
  161. const showTitle = title || showClose || leftSlot;
  162. if (!showTitle) {
  163. return;
  164. }
  165. return (0, import_vue.createVNode)("div", {
  166. "class": bem("header")
  167. }, [leftSlot && (0, import_vue.createVNode)("span", {
  168. "class": bem("title-left")
  169. }, [leftSlot()]), title && (0, import_vue.createVNode)("h2", {
  170. "class": bem("title")
  171. }, [title]), showClose && (0, import_vue.createVNode)("button", {
  172. "type": "button",
  173. "class": [bem("close"), import_utils.HAPTICS_FEEDBACK],
  174. "onClick": onClose
  175. }, [closeButtonText])]);
  176. };
  177. const renderKeys = () => keys.value.map((key) => {
  178. const keySlots = {};
  179. if (key.type === "delete") {
  180. keySlots.default = slots.delete;
  181. }
  182. if (key.type === "extra") {
  183. keySlots.default = slots["extra-key"];
  184. }
  185. return (0, import_vue.createVNode)(import_NumberKeyboardKey.default, {
  186. "key": key.text,
  187. "text": key.text,
  188. "type": key.type,
  189. "wider": key.wider,
  190. "color": key.color,
  191. "onPress": onPress
  192. }, keySlots);
  193. });
  194. const renderSidebar = () => {
  195. if (props.theme === "custom") {
  196. return (0, import_vue.createVNode)("div", {
  197. "class": bem("sidebar")
  198. }, [props.showDeleteKey && (0, import_vue.createVNode)(import_NumberKeyboardKey.default, {
  199. "large": true,
  200. "text": props.deleteButtonText,
  201. "type": "delete",
  202. "onPress": onPress
  203. }, {
  204. delete: slots.delete
  205. }), (0, import_vue.createVNode)(import_NumberKeyboardKey.default, {
  206. "large": true,
  207. "text": props.closeButtonText,
  208. "type": "close",
  209. "color": "blue",
  210. "loading": props.closeButtonLoading,
  211. "onPress": onPress
  212. }, null)]);
  213. }
  214. };
  215. (0, import_vue2.watch)(() => props.show, (value) => {
  216. if (!props.transition) {
  217. emit(value ? "show" : "hide");
  218. }
  219. });
  220. if (props.hideOnClickOutside) {
  221. (0, import_use.useClickAway)(root, onBlur, {
  222. eventName: "touchstart"
  223. });
  224. }
  225. return () => {
  226. const Title = renderTitle();
  227. const Content = (0, import_vue.createVNode)(import_vue2.Transition, {
  228. "name": props.transition ? "van-slide-up" : ""
  229. }, {
  230. default: () => [(0, import_vue.withDirectives)((0, import_vue.createVNode)("div", (0, import_vue.mergeProps)({
  231. "ref": root,
  232. "style": (0, import_utils.getZIndexStyle)(props.zIndex),
  233. "class": bem({
  234. unfit: !props.safeAreaInsetBottom,
  235. "with-title": !!Title
  236. }),
  237. "onAnimationend": onAnimationEnd,
  238. "onTouchstartPassive": import_utils.stopPropagation
  239. }, attrs), [Title, (0, import_vue.createVNode)("div", {
  240. "class": bem("body")
  241. }, [(0, import_vue.createVNode)("div", {
  242. "class": bem("keys")
  243. }, [renderKeys()]), renderSidebar()])]), [[import_vue.vShow, props.show]])]
  244. });
  245. if (props.teleport) {
  246. return (0, import_vue.createVNode)(import_vue2.Teleport, {
  247. "to": props.teleport
  248. }, {
  249. default: () => [Content]
  250. });
  251. }
  252. return Content;
  253. };
  254. }
  255. });