Options.js 5.6 KB

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