index.js 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  2. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  3. import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
  4. import { computed, defineComponent, ref } from 'vue';
  5. import classNames from '../_util/classNames';
  6. import RcSelect, { selectProps as vcSelectProps, Option, OptGroup } from '../vc-select';
  7. import getIcons from './utils/iconUtil';
  8. import PropTypes from '../_util/vue-types';
  9. import useConfigInject from '../_util/hooks/useConfigInject';
  10. import omit from '../_util/omit';
  11. import { useInjectFormItemContext } from '../form/FormItemContext';
  12. import { getTransitionName } from '../_util/transition';
  13. import { initDefaultProps } from '../_util/props-util';
  14. export var selectProps = function selectProps() {
  15. return _objectSpread(_objectSpread({}, omit(vcSelectProps(), ['inputIcon', 'mode', 'getInputElement', 'getRawInputElement', 'backfill'])), {}, {
  16. value: {
  17. type: [Array, Object, String, Number]
  18. },
  19. defaultValue: {
  20. type: [Array, Object, String, Number]
  21. },
  22. notFoundContent: PropTypes.any,
  23. suffixIcon: PropTypes.any,
  24. itemIcon: PropTypes.any,
  25. size: String,
  26. mode: String,
  27. bordered: {
  28. type: Boolean,
  29. default: true
  30. },
  31. transitionName: String,
  32. choiceTransitionName: {
  33. type: String,
  34. default: ''
  35. },
  36. 'onUpdate:value': Function
  37. });
  38. };
  39. var SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
  40. var Select = defineComponent({
  41. compatConfig: {
  42. MODE: 3
  43. },
  44. name: 'ASelect',
  45. Option: Option,
  46. OptGroup: OptGroup,
  47. inheritAttrs: false,
  48. props: initDefaultProps(selectProps(), {
  49. listHeight: 256,
  50. listItemHeight: 24
  51. }),
  52. SECRET_COMBOBOX_MODE_DO_NOT_USE: SECRET_COMBOBOX_MODE_DO_NOT_USE,
  53. // emits: ['change', 'update:value', 'blur'],
  54. slots: ['notFoundContent', 'suffixIcon', 'itemIcon', 'removeIcon', 'clearIcon', 'dropdownRender', 'option', 'placeholder', 'tagRender', 'maxTagPlaceholder', 'optionLabel' // donot use, maybe remove it
  55. ],
  56. setup: function setup(props, _ref) {
  57. var attrs = _ref.attrs,
  58. emit = _ref.emit,
  59. slots = _ref.slots,
  60. expose = _ref.expose;
  61. var selectRef = ref();
  62. var formItemContext = useInjectFormItemContext();
  63. var focus = function focus() {
  64. var _selectRef$value;
  65. (_selectRef$value = selectRef.value) === null || _selectRef$value === void 0 ? void 0 : _selectRef$value.focus();
  66. };
  67. var blur = function blur() {
  68. var _selectRef$value2;
  69. (_selectRef$value2 = selectRef.value) === null || _selectRef$value2 === void 0 ? void 0 : _selectRef$value2.blur();
  70. };
  71. var scrollTo = function scrollTo(arg) {
  72. var _selectRef$value3;
  73. (_selectRef$value3 = selectRef.value) === null || _selectRef$value3 === void 0 ? void 0 : _selectRef$value3.scrollTo(arg);
  74. };
  75. var mode = computed(function () {
  76. var mode = props.mode;
  77. if (mode === 'combobox') {
  78. return undefined;
  79. }
  80. if (mode === SECRET_COMBOBOX_MODE_DO_NOT_USE) {
  81. return 'combobox';
  82. }
  83. return mode;
  84. });
  85. var _useConfigInject = useConfigInject('select', props),
  86. prefixCls = _useConfigInject.prefixCls,
  87. direction = _useConfigInject.direction,
  88. configProvider = _useConfigInject.configProvider,
  89. size = _useConfigInject.size,
  90. getPrefixCls = _useConfigInject.getPrefixCls;
  91. var rootPrefixCls = computed(function () {
  92. return getPrefixCls();
  93. });
  94. var transitionName = computed(function () {
  95. return getTransitionName(rootPrefixCls.value, 'slide-up', props.transitionName);
  96. });
  97. var mergedClassName = computed(function () {
  98. var _classNames;
  99. return classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls.value, "-lg"), size.value === 'large'), _defineProperty(_classNames, "".concat(prefixCls.value, "-sm"), size.value === 'small'), _defineProperty(_classNames, "".concat(prefixCls.value, "-rtl"), direction.value === 'rtl'), _defineProperty(_classNames, "".concat(prefixCls.value, "-borderless"), !props.bordered), _classNames));
  100. });
  101. var triggerChange = function triggerChange() {
  102. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  103. args[_key] = arguments[_key];
  104. }
  105. emit('update:value', args[0]);
  106. emit.apply(void 0, ['change'].concat(args));
  107. formItemContext.onFieldChange();
  108. };
  109. var handleBlur = function handleBlur(e) {
  110. emit('blur', e);
  111. formItemContext.onFieldBlur();
  112. };
  113. expose({
  114. blur: blur,
  115. focus: focus,
  116. scrollTo: scrollTo
  117. });
  118. var isMultiple = computed(function () {
  119. return mode.value === 'multiple' || mode.value === 'tags';
  120. });
  121. return function () {
  122. var _slots$placeholder, _slots$default;
  123. var notFoundContent = props.notFoundContent,
  124. _props$listHeight = props.listHeight,
  125. listHeight = _props$listHeight === void 0 ? 256 : _props$listHeight,
  126. _props$listItemHeight = props.listItemHeight,
  127. listItemHeight = _props$listItemHeight === void 0 ? 24 : _props$listItemHeight,
  128. getPopupContainer = props.getPopupContainer,
  129. dropdownClassName = props.dropdownClassName,
  130. virtual = props.virtual,
  131. dropdownMatchSelectWidth = props.dropdownMatchSelectWidth,
  132. _props$id = props.id,
  133. id = _props$id === void 0 ? formItemContext.id.value : _props$id,
  134. _props$placeholder = props.placeholder,
  135. placeholder = _props$placeholder === void 0 ? (_slots$placeholder = slots.placeholder) === null || _slots$placeholder === void 0 ? void 0 : _slots$placeholder.call(slots) : _props$placeholder;
  136. var renderEmpty = configProvider.renderEmpty,
  137. getContextPopupContainer = configProvider.getPopupContainer;
  138. // ===================== Empty =====================
  139. var mergedNotFound;
  140. if (notFoundContent !== undefined) {
  141. mergedNotFound = notFoundContent;
  142. } else if (slots.notFoundContent) {
  143. mergedNotFound = slots.notFoundContent();
  144. } else if (mode.value === 'combobox') {
  145. mergedNotFound = null;
  146. } else {
  147. mergedNotFound = renderEmpty('Select');
  148. }
  149. // ===================== Icons =====================
  150. var _getIcons = getIcons(_objectSpread(_objectSpread({}, props), {}, {
  151. multiple: isMultiple.value,
  152. prefixCls: prefixCls.value
  153. }), slots),
  154. suffixIcon = _getIcons.suffixIcon,
  155. itemIcon = _getIcons.itemIcon,
  156. removeIcon = _getIcons.removeIcon,
  157. clearIcon = _getIcons.clearIcon;
  158. var selectProps = omit(props, ['prefixCls', 'suffixIcon', 'itemIcon', 'removeIcon', 'clearIcon', 'size', 'bordered']);
  159. var rcSelectRtlDropDownClassName = classNames(dropdownClassName, _defineProperty({}, "".concat(prefixCls.value, "-dropdown-").concat(direction.value), direction.value === 'rtl'));
  160. return _createVNode(RcSelect, _objectSpread(_objectSpread(_objectSpread({
  161. "ref": selectRef,
  162. "virtual": virtual,
  163. "dropdownMatchSelectWidth": dropdownMatchSelectWidth
  164. }, selectProps), attrs), {}, {
  165. "placeholder": placeholder,
  166. "listHeight": listHeight,
  167. "listItemHeight": listItemHeight,
  168. "mode": mode.value,
  169. "prefixCls": prefixCls.value,
  170. "direction": direction.value,
  171. "inputIcon": suffixIcon,
  172. "menuItemSelectedIcon": itemIcon,
  173. "removeIcon": removeIcon,
  174. "clearIcon": clearIcon,
  175. "notFoundContent": mergedNotFound,
  176. "class": [mergedClassName.value, attrs.class],
  177. "getPopupContainer": getPopupContainer || getContextPopupContainer,
  178. "dropdownClassName": rcSelectRtlDropDownClassName,
  179. "onChange": triggerChange,
  180. "onBlur": handleBlur,
  181. "id": id,
  182. "dropdownRender": selectProps.dropdownRender || slots.dropdownRender,
  183. "transitionName": transitionName.value,
  184. "children": (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots),
  185. "tagRender": props.tagRender || slots.tagRender,
  186. "optionLabelRender": slots.optionLabel,
  187. "maxTagPlaceholder": props.maxTagPlaceholder || slots.maxTagPlaceholder
  188. }), {
  189. option: slots.option
  190. });
  191. };
  192. }
  193. });
  194. /* istanbul ignore next */
  195. Select.install = function (app) {
  196. app.component(Select.name, Select);
  197. app.component(Select.Option.displayName, Select.Option);
  198. app.component(Select.OptGroup.displayName, Select.OptGroup);
  199. return app;
  200. };
  201. export var SelectOption = Select.Option;
  202. export var SelectOptGroup = Select.OptGroup;
  203. export default Select;