NumberKeyboard.js 8.4 KB

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