index.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.SelectProps = exports.SelectValue = exports.AbstractSelectProps = undefined;
  6. var _babelHelperVueJsxMergeProps = require('babel-helper-vue-jsx-merge-props');
  7. var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);
  8. var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
  9. var _defineProperty3 = _interopRequireDefault(_defineProperty2);
  10. var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
  11. var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
  12. var _extends2 = require('babel-runtime/helpers/extends');
  13. var _extends3 = _interopRequireDefault(_extends2);
  14. var _warning = require('../_util/warning');
  15. var _warning2 = _interopRequireDefault(_warning);
  16. var _omit = require('omit.js');
  17. var _omit2 = _interopRequireDefault(_omit);
  18. var _vueTypes = require('../_util/vue-types');
  19. var _vueTypes2 = _interopRequireDefault(_vueTypes);
  20. var _vcSelect = require('../vc-select');
  21. var _configConsumerProps = require('../config-provider/configConsumerProps');
  22. var _propsUtil = require('../_util/props-util');
  23. var _icon = require('../icon');
  24. var _icon2 = _interopRequireDefault(_icon);
  25. var _vnode = require('../_util/vnode');
  26. var _base = require('../base');
  27. var _base2 = _interopRequireDefault(_base);
  28. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  29. var AbstractSelectProps = function AbstractSelectProps() {
  30. return {
  31. prefixCls: _vueTypes2['default'].string,
  32. size: _vueTypes2['default'].oneOf(['small', 'large', 'default']),
  33. showAction: _vueTypes2['default'].oneOfType([_vueTypes2['default'].string, _vueTypes2['default'].arrayOf(String)]),
  34. notFoundContent: _vueTypes2['default'].any,
  35. transitionName: _vueTypes2['default'].string,
  36. choiceTransitionName: _vueTypes2['default'].string,
  37. showSearch: _vueTypes2['default'].bool,
  38. allowClear: _vueTypes2['default'].bool,
  39. disabled: _vueTypes2['default'].bool,
  40. tabIndex: _vueTypes2['default'].number,
  41. placeholder: _vueTypes2['default'].any,
  42. defaultActiveFirstOption: _vueTypes2['default'].bool,
  43. dropdownClassName: _vueTypes2['default'].string,
  44. dropdownStyle: _vueTypes2['default'].any,
  45. dropdownMenuStyle: _vueTypes2['default'].any,
  46. dropdownMatchSelectWidth: _vueTypes2['default'].bool,
  47. // onSearch: (value: string) => any,
  48. filterOption: _vueTypes2['default'].oneOfType([_vueTypes2['default'].bool, _vueTypes2['default'].func]),
  49. autoFocus: _vueTypes2['default'].bool,
  50. backfill: _vueTypes2['default'].bool,
  51. showArrow: _vueTypes2['default'].bool,
  52. getPopupContainer: _vueTypes2['default'].func,
  53. open: _vueTypes2['default'].bool,
  54. defaultOpen: _vueTypes2['default'].bool,
  55. autoClearSearchValue: _vueTypes2['default'].bool,
  56. dropdownRender: _vueTypes2['default'].func,
  57. loading: _vueTypes2['default'].bool
  58. };
  59. };
  60. var Value = _vueTypes2['default'].shape({
  61. key: _vueTypes2['default'].oneOfType([_vueTypes2['default'].string, _vueTypes2['default'].number])
  62. }).loose;
  63. var SelectValue = _vueTypes2['default'].oneOfType([_vueTypes2['default'].string, _vueTypes2['default'].number, _vueTypes2['default'].arrayOf(_vueTypes2['default'].oneOfType([Value, _vueTypes2['default'].string, _vueTypes2['default'].number])), Value]);
  64. var SelectProps = (0, _extends3['default'])({}, AbstractSelectProps(), {
  65. value: SelectValue,
  66. defaultValue: SelectValue,
  67. // mode: PropTypes.oneOf(['default', 'multiple', 'tags', 'combobox']),
  68. mode: _vueTypes2['default'].string,
  69. optionLabelProp: _vueTypes2['default'].string,
  70. firstActiveValue: _vueTypes2['default'].oneOfType([String, _vueTypes2['default'].arrayOf(String)]),
  71. maxTagCount: _vueTypes2['default'].number,
  72. maxTagPlaceholder: _vueTypes2['default'].any,
  73. maxTagTextLength: _vueTypes2['default'].number,
  74. dropdownMatchSelectWidth: _vueTypes2['default'].bool,
  75. optionFilterProp: _vueTypes2['default'].string,
  76. labelInValue: _vueTypes2['default'].boolean,
  77. getPopupContainer: _vueTypes2['default'].func,
  78. tokenSeparators: _vueTypes2['default'].arrayOf(_vueTypes2['default'].string),
  79. getInputElement: _vueTypes2['default'].func,
  80. options: _vueTypes2['default'].array,
  81. suffixIcon: _vueTypes2['default'].any,
  82. removeIcon: _vueTypes2['default'].any,
  83. clearIcon: _vueTypes2['default'].any,
  84. menuItemSelectedIcon: _vueTypes2['default'].any
  85. });
  86. var SelectPropTypes = {
  87. prefixCls: _vueTypes2['default'].string,
  88. size: _vueTypes2['default'].oneOf(['default', 'large', 'small']),
  89. // combobox: PropTypes.bool,
  90. notFoundContent: _vueTypes2['default'].any,
  91. showSearch: _vueTypes2['default'].bool,
  92. optionLabelProp: _vueTypes2['default'].string,
  93. transitionName: _vueTypes2['default'].string,
  94. choiceTransitionName: _vueTypes2['default'].string
  95. };
  96. exports.AbstractSelectProps = AbstractSelectProps;
  97. exports.SelectValue = SelectValue;
  98. exports.SelectProps = SelectProps;
  99. var SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
  100. var Select = {
  101. SECRET_COMBOBOX_MODE_DO_NOT_USE: SECRET_COMBOBOX_MODE_DO_NOT_USE,
  102. Option: (0, _extends3['default'])({}, _vcSelect.Option, { name: 'ASelectOption' }),
  103. OptGroup: (0, _extends3['default'])({}, _vcSelect.OptGroup, { name: 'ASelectOptGroup' }),
  104. name: 'ASelect',
  105. props: (0, _extends3['default'])({}, SelectProps, {
  106. showSearch: _vueTypes2['default'].bool.def(false),
  107. transitionName: _vueTypes2['default'].string.def('slide-up'),
  108. choiceTransitionName: _vueTypes2['default'].string.def('zoom')
  109. }),
  110. propTypes: SelectPropTypes,
  111. model: {
  112. prop: 'value',
  113. event: 'change'
  114. },
  115. provide: function provide() {
  116. return {
  117. savePopupRef: this.savePopupRef
  118. };
  119. },
  120. inject: {
  121. configProvider: { 'default': function _default() {
  122. return _configConsumerProps.ConfigConsumerProps;
  123. } }
  124. },
  125. created: function created() {
  126. (0, _warning2['default'])(this.$props.mode !== 'combobox', 'Select', 'The combobox mode of Select is deprecated,' + 'it will be removed in next major version,' + 'please use AutoComplete instead');
  127. },
  128. methods: {
  129. getNotFoundContent: function getNotFoundContent(renderEmpty) {
  130. var h = this.$createElement;
  131. var notFoundContent = (0, _propsUtil.getComponentFromProp)(this, 'notFoundContent');
  132. if (notFoundContent !== undefined) {
  133. return notFoundContent;
  134. }
  135. if (this.isCombobox()) {
  136. return null;
  137. }
  138. return renderEmpty(h, 'Select');
  139. },
  140. savePopupRef: function savePopupRef(ref) {
  141. this.popupRef = ref;
  142. },
  143. focus: function focus() {
  144. this.$refs.vcSelect.focus();
  145. },
  146. blur: function blur() {
  147. this.$refs.vcSelect.blur();
  148. },
  149. isCombobox: function isCombobox() {
  150. var mode = this.mode;
  151. return mode === 'combobox' || mode === SECRET_COMBOBOX_MODE_DO_NOT_USE;
  152. },
  153. renderSuffixIcon: function renderSuffixIcon(prefixCls) {
  154. var h = this.$createElement;
  155. var loading = this.$props.loading;
  156. var suffixIcon = (0, _propsUtil.getComponentFromProp)(this, 'suffixIcon');
  157. suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
  158. if (suffixIcon) {
  159. return (0, _propsUtil.isValidElement)(suffixIcon) ? (0, _vnode.cloneElement)(suffixIcon, { 'class': prefixCls + '-arrow-icon' }) : suffixIcon;
  160. }
  161. if (loading) {
  162. return h(_icon2['default'], {
  163. attrs: { type: 'loading' }
  164. });
  165. }
  166. return h(_icon2['default'], {
  167. attrs: { type: 'down' },
  168. 'class': prefixCls + '-arrow-icon' });
  169. }
  170. },
  171. render: function render() {
  172. var _cls;
  173. var h = arguments[0];
  174. var _getOptionProps = (0, _propsUtil.getOptionProps)(this),
  175. customizePrefixCls = _getOptionProps.prefixCls,
  176. size = _getOptionProps.size,
  177. mode = _getOptionProps.mode,
  178. options = _getOptionProps.options,
  179. getPopupContainer = _getOptionProps.getPopupContainer,
  180. showArrow = _getOptionProps.showArrow,
  181. restProps = (0, _objectWithoutProperties3['default'])(_getOptionProps, ['prefixCls', 'size', 'mode', 'options', 'getPopupContainer', 'showArrow']);
  182. var getPrefixCls = this.configProvider.getPrefixCls;
  183. var renderEmpty = this.configProvider.renderEmpty;
  184. var prefixCls = getPrefixCls('select', customizePrefixCls);
  185. var getContextPopupContainer = this.configProvider.getPopupContainer;
  186. var removeIcon = (0, _propsUtil.getComponentFromProp)(this, 'removeIcon');
  187. removeIcon = Array.isArray(removeIcon) ? removeIcon[0] : removeIcon;
  188. var clearIcon = (0, _propsUtil.getComponentFromProp)(this, 'clearIcon');
  189. clearIcon = Array.isArray(clearIcon) ? clearIcon[0] : clearIcon;
  190. var menuItemSelectedIcon = (0, _propsUtil.getComponentFromProp)(this, 'menuItemSelectedIcon');
  191. menuItemSelectedIcon = Array.isArray(menuItemSelectedIcon) ? menuItemSelectedIcon[0] : menuItemSelectedIcon;
  192. var rest = (0, _omit2['default'])(restProps, ['inputIcon', 'removeIcon', 'clearIcon', 'suffixIcon', 'menuItemSelectedIcon']);
  193. var cls = (_cls = {}, (0, _defineProperty3['default'])(_cls, prefixCls + '-lg', size === 'large'), (0, _defineProperty3['default'])(_cls, prefixCls + '-sm', size === 'small'), (0, _defineProperty3['default'])(_cls, prefixCls + '-show-arrow', showArrow), _cls);
  194. var optionLabelProp = this.$props.optionLabelProp;
  195. if (this.isCombobox()) {
  196. // children 带 dom 结构时,无法填入输入框
  197. optionLabelProp = optionLabelProp || 'value';
  198. }
  199. var modeConfig = {
  200. multiple: mode === 'multiple',
  201. tags: mode === 'tags',
  202. combobox: this.isCombobox()
  203. };
  204. var finalRemoveIcon = removeIcon && ((0, _propsUtil.isValidElement)(removeIcon) ? (0, _vnode.cloneElement)(removeIcon, { 'class': prefixCls + '-remove-icon' }) : removeIcon) || h(_icon2['default'], {
  205. attrs: { type: 'close' },
  206. 'class': prefixCls + '-remove-icon' });
  207. var finalClearIcon = clearIcon && ((0, _propsUtil.isValidElement)(clearIcon) ? (0, _vnode.cloneElement)(clearIcon, { 'class': prefixCls + '-clear-icon' }) : clearIcon) || h(_icon2['default'], {
  208. attrs: { type: 'close-circle', theme: 'filled' },
  209. 'class': prefixCls + '-clear-icon' });
  210. var finalMenuItemSelectedIcon = menuItemSelectedIcon && ((0, _propsUtil.isValidElement)(menuItemSelectedIcon) ? (0, _vnode.cloneElement)(menuItemSelectedIcon, { 'class': prefixCls + '-selected-icon' }) : menuItemSelectedIcon) || h(_icon2['default'], {
  211. attrs: { type: 'check' },
  212. 'class': prefixCls + '-selected-icon' });
  213. var selectProps = {
  214. props: (0, _extends3['default'])({
  215. inputIcon: this.renderSuffixIcon(prefixCls),
  216. removeIcon: finalRemoveIcon,
  217. clearIcon: finalClearIcon,
  218. menuItemSelectedIcon: finalMenuItemSelectedIcon,
  219. showArrow: showArrow
  220. }, rest, modeConfig, {
  221. prefixCls: prefixCls,
  222. optionLabelProp: optionLabelProp || 'children',
  223. notFoundContent: this.getNotFoundContent(renderEmpty),
  224. maxTagPlaceholder: (0, _propsUtil.getComponentFromProp)(this, 'maxTagPlaceholder'),
  225. placeholder: (0, _propsUtil.getComponentFromProp)(this, 'placeholder'),
  226. children: options ? options.map(function (option) {
  227. var key = option.key,
  228. _option$label = option.label,
  229. label = _option$label === undefined ? option.title : _option$label,
  230. on = option.on,
  231. cls = option['class'],
  232. style = option.style,
  233. restOption = (0, _objectWithoutProperties3['default'])(option, ['key', 'label', 'on', 'class', 'style']);
  234. return h(
  235. _vcSelect.Option,
  236. (0, _babelHelperVueJsxMergeProps2['default'])([{ key: key }, { props: restOption, on: on, 'class': cls, style: style }]),
  237. [label]
  238. );
  239. }) : (0, _propsUtil.filterEmpty)(this.$slots['default']),
  240. __propsSymbol__: Symbol(),
  241. dropdownRender: (0, _propsUtil.getComponentFromProp)(this, 'dropdownRender', {}, false),
  242. getPopupContainer: getPopupContainer || getContextPopupContainer
  243. }),
  244. on: (0, _propsUtil.getListeners)(this),
  245. 'class': cls,
  246. ref: 'vcSelect'
  247. };
  248. return h(_vcSelect.Select, selectProps);
  249. }
  250. };
  251. /* istanbul ignore next */
  252. Select.install = function (Vue) {
  253. Vue.use(_base2['default']);
  254. Vue.component(Select.name, Select);
  255. Vue.component(Select.Option.name, Select.Option);
  256. Vue.component(Select.OptGroup.name, Select.OptGroup);
  257. };
  258. exports['default'] = Select;