Options.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = void 0;
  7. var _vue = require("vue");
  8. var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));
  9. var _KeyCode = _interopRequireDefault(require("./KeyCode"));
  10. var _BaseInput = _interopRequireDefault(require("../_util/BaseInput"));
  11. var _default = exports.default = (0, _vue.defineComponent)({
  12. compatConfig: {
  13. MODE: 3
  14. },
  15. props: {
  16. disabled: {
  17. type: Boolean,
  18. default: undefined
  19. },
  20. changeSize: Function,
  21. quickGo: Function,
  22. selectComponentClass: _vueTypes.default.any,
  23. current: Number,
  24. pageSizeOptions: _vueTypes.default.array.def(['10', '20', '50', '100']),
  25. pageSize: Number,
  26. buildOptionText: Function,
  27. locale: _vueTypes.default.object,
  28. rootPrefixCls: String,
  29. selectPrefixCls: String,
  30. goButton: _vueTypes.default.any
  31. },
  32. setup(props) {
  33. const goInputText = (0, _vue.ref)('');
  34. const validValue = (0, _vue.computed)(() => {
  35. return !goInputText.value || isNaN(goInputText.value) ? undefined : Number(goInputText.value);
  36. });
  37. const defaultBuildOptionText = opt => {
  38. return `${opt.value} ${props.locale.items_per_page}`;
  39. };
  40. const handleChange = e => {
  41. const {
  42. value
  43. } = e.target;
  44. if (goInputText.value === value) return;
  45. goInputText.value = value;
  46. };
  47. const handleBlur = e => {
  48. const {
  49. goButton,
  50. quickGo,
  51. rootPrefixCls
  52. } = props;
  53. if (goButton || goInputText.value === '') {
  54. return;
  55. }
  56. if (e.relatedTarget && (e.relatedTarget.className.indexOf(`${rootPrefixCls}-item-link`) >= 0 || e.relatedTarget.className.indexOf(`${rootPrefixCls}-item`) >= 0)) {
  57. goInputText.value = '';
  58. return;
  59. } else {
  60. quickGo(validValue.value);
  61. goInputText.value = '';
  62. }
  63. };
  64. const go = e => {
  65. if (goInputText.value === '') {
  66. return;
  67. }
  68. if (e.keyCode === _KeyCode.default.ENTER || e.type === 'click') {
  69. // https://github.com/vueComponent/ant-design-vue/issues/1316
  70. props.quickGo(validValue.value);
  71. goInputText.value = '';
  72. }
  73. };
  74. const pageSizeOptions = (0, _vue.computed)(() => {
  75. const {
  76. pageSize,
  77. pageSizeOptions
  78. } = props;
  79. if (pageSizeOptions.some(option => option.toString() === pageSize.toString())) {
  80. return pageSizeOptions;
  81. }
  82. return pageSizeOptions.concat([pageSize.toString()]).sort((a, b) => {
  83. // eslint-disable-next-line no-restricted-globals
  84. const numberA = isNaN(Number(a)) ? 0 : Number(a);
  85. // eslint-disable-next-line no-restricted-globals
  86. const numberB = isNaN(Number(b)) ? 0 : Number(b);
  87. return numberA - numberB;
  88. });
  89. });
  90. return () => {
  91. const {
  92. rootPrefixCls,
  93. locale,
  94. changeSize,
  95. quickGo,
  96. goButton,
  97. selectComponentClass: Select,
  98. selectPrefixCls,
  99. pageSize,
  100. disabled
  101. } = props;
  102. const prefixCls = `${rootPrefixCls}-options`;
  103. let changeSelect = null;
  104. let goInput = null;
  105. let gotoButton = null;
  106. if (!changeSize && !quickGo) {
  107. return null;
  108. }
  109. if (changeSize && Select) {
  110. const buildOptionText = props.buildOptionText || defaultBuildOptionText;
  111. const options = pageSizeOptions.value.map((opt, i) => (0, _vue.createVNode)(Select.Option, {
  112. "key": i,
  113. "value": opt
  114. }, {
  115. default: () => [buildOptionText({
  116. value: opt
  117. })]
  118. }));
  119. changeSelect = (0, _vue.createVNode)(Select, {
  120. "disabled": disabled,
  121. "prefixCls": selectPrefixCls,
  122. "showSearch": false,
  123. "class": `${prefixCls}-size-changer`,
  124. "optionLabelProp": "children",
  125. "value": (pageSize || pageSizeOptions.value[0]).toString(),
  126. "onChange": value => changeSize(Number(value)),
  127. "getPopupContainer": triggerNode => triggerNode.parentNode
  128. }, {
  129. default: () => [options]
  130. });
  131. }
  132. if (quickGo) {
  133. if (goButton) {
  134. gotoButton = typeof goButton === 'boolean' ? (0, _vue.createVNode)("button", {
  135. "type": "button",
  136. "onClick": go,
  137. "onKeyup": go,
  138. "disabled": disabled,
  139. "class": `${prefixCls}-quick-jumper-button`
  140. }, [locale.jump_to_confirm]) : (0, _vue.createVNode)("span", {
  141. "onClick": go,
  142. "onKeyup": go
  143. }, [goButton]);
  144. }
  145. goInput = (0, _vue.createVNode)("div", {
  146. "class": `${prefixCls}-quick-jumper`
  147. }, [locale.jump_to, (0, _vue.createVNode)(_BaseInput.default, {
  148. "disabled": disabled,
  149. "type": "text",
  150. "value": goInputText.value,
  151. "onInput": handleChange,
  152. "onChange": handleChange,
  153. "onKeyup": go,
  154. "onBlur": handleBlur
  155. }, null), locale.page, gotoButton]);
  156. }
  157. return (0, _vue.createVNode)("li", {
  158. "class": `${prefixCls}`
  159. }, [changeSelect, goInput]);
  160. };
  161. }
  162. });