NumberKeyboard.js 8.1 KB

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