index.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.selectProps = exports.default = exports.SelectOption = exports.SelectOptGroup = void 0;
  7. var _vue = require("vue");
  8. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  9. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  10. var _classNames = _interopRequireDefault(require("../_util/classNames"));
  11. var _vcSelect = _interopRequireWildcard(require("../vc-select"));
  12. var _iconUtil = _interopRequireDefault(require("./utils/iconUtil"));
  13. var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));
  14. var _useConfigInject = _interopRequireDefault(require("../config-provider/hooks/useConfigInject"));
  15. var _renderEmpty = require("../config-provider/renderEmpty");
  16. var _omit = _interopRequireDefault(require("../_util/omit"));
  17. var _FormItemContext = require("../form/FormItemContext");
  18. var _transition = require("../_util/transition");
  19. var _propsUtil = require("../_util/props-util");
  20. var _statusUtils = require("../_util/statusUtils");
  21. var _type = require("../_util/type");
  22. var _Compact = require("../space/Compact");
  23. var _style = _interopRequireDefault(require("./style"));
  24. var _DisabledContext = require("../config-provider/DisabledContext");
  25. var _devWarning = _interopRequireDefault(require("../vc-util/devWarning"));
  26. function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
  27. function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
  28. // CSSINJS
  29. const selectProps = () => (0, _extends2.default)((0, _extends2.default)({}, (0, _omit.default)((0, _vcSelect.selectProps)(), ['inputIcon', 'mode', 'getInputElement', 'getRawInputElement', 'backfill'])), {
  30. value: (0, _type.someType)([Array, Object, String, Number]),
  31. defaultValue: (0, _type.someType)([Array, Object, String, Number]),
  32. notFoundContent: _vueTypes.default.any,
  33. suffixIcon: _vueTypes.default.any,
  34. itemIcon: _vueTypes.default.any,
  35. size: (0, _type.stringType)(),
  36. mode: (0, _type.stringType)(),
  37. bordered: (0, _type.booleanType)(true),
  38. transitionName: String,
  39. choiceTransitionName: (0, _type.stringType)(''),
  40. popupClassName: String,
  41. /** @deprecated Please use `popupClassName` instead */
  42. dropdownClassName: String,
  43. placement: (0, _type.stringType)(),
  44. status: (0, _type.stringType)(),
  45. 'onUpdate:value': (0, _type.functionType)()
  46. });
  47. exports.selectProps = selectProps;
  48. const SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
  49. const Select = (0, _vue.defineComponent)({
  50. compatConfig: {
  51. MODE: 3
  52. },
  53. name: 'ASelect',
  54. Option: _vcSelect.Option,
  55. OptGroup: _vcSelect.OptGroup,
  56. inheritAttrs: false,
  57. props: (0, _propsUtil.initDefaultProps)(selectProps(), {
  58. listHeight: 256,
  59. listItemHeight: 24
  60. }),
  61. SECRET_COMBOBOX_MODE_DO_NOT_USE,
  62. slots: Object,
  63. setup(props, _ref) {
  64. let {
  65. attrs,
  66. emit,
  67. slots,
  68. expose
  69. } = _ref;
  70. const selectRef = (0, _vue.ref)();
  71. const formItemContext = (0, _FormItemContext.useInjectFormItemContext)();
  72. const formItemInputContext = _FormItemContext.FormItemInputContext.useInject();
  73. const mergedStatus = (0, _vue.computed)(() => (0, _statusUtils.getMergedStatus)(formItemInputContext.status, props.status));
  74. const focus = () => {
  75. var _a;
  76. (_a = selectRef.value) === null || _a === void 0 ? void 0 : _a.focus();
  77. };
  78. const blur = () => {
  79. var _a;
  80. (_a = selectRef.value) === null || _a === void 0 ? void 0 : _a.blur();
  81. };
  82. const scrollTo = arg => {
  83. var _a;
  84. (_a = selectRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo(arg);
  85. };
  86. const mode = (0, _vue.computed)(() => {
  87. const {
  88. mode
  89. } = props;
  90. if (mode === 'combobox') {
  91. return undefined;
  92. }
  93. if (mode === SECRET_COMBOBOX_MODE_DO_NOT_USE) {
  94. return 'combobox';
  95. }
  96. return mode;
  97. });
  98. // ====================== Warning ======================
  99. if (process.env.NODE_ENV !== 'production') {
  100. (0, _devWarning.default)(!props.dropdownClassName, 'Select', '`dropdownClassName` is deprecated. Please use `popupClassName` instead.');
  101. }
  102. const {
  103. prefixCls,
  104. direction,
  105. configProvider,
  106. renderEmpty,
  107. size: contextSize,
  108. getPrefixCls,
  109. getPopupContainer,
  110. disabled,
  111. select
  112. } = (0, _useConfigInject.default)('select', props);
  113. const {
  114. compactSize,
  115. compactItemClassnames
  116. } = (0, _Compact.useCompactItemContext)(prefixCls, direction);
  117. const mergedSize = (0, _vue.computed)(() => compactSize.value || contextSize.value);
  118. const contextDisabled = (0, _DisabledContext.useInjectDisabled)();
  119. const mergedDisabled = (0, _vue.computed)(() => {
  120. var _a;
  121. return (_a = disabled.value) !== null && _a !== void 0 ? _a : contextDisabled.value;
  122. });
  123. // style
  124. const [wrapSSR, hashId] = (0, _style.default)(prefixCls);
  125. const rootPrefixCls = (0, _vue.computed)(() => getPrefixCls());
  126. // ===================== Placement =====================
  127. const placement = (0, _vue.computed)(() => {
  128. if (props.placement !== undefined) {
  129. return props.placement;
  130. }
  131. return direction.value === 'rtl' ? 'bottomRight' : 'bottomLeft';
  132. });
  133. const transitionName = (0, _vue.computed)(() => (0, _transition.getTransitionName)(rootPrefixCls.value, (0, _transition.getTransitionDirection)(placement.value), props.transitionName));
  134. const mergedClassName = (0, _vue.computed)(() => (0, _classNames.default)({
  135. [`${prefixCls.value}-lg`]: mergedSize.value === 'large',
  136. [`${prefixCls.value}-sm`]: mergedSize.value === 'small',
  137. [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
  138. [`${prefixCls.value}-borderless`]: !props.bordered,
  139. [`${prefixCls.value}-in-form-item`]: formItemInputContext.isFormItemInput
  140. }, (0, _statusUtils.getStatusClassNames)(prefixCls.value, mergedStatus.value, formItemInputContext.hasFeedback), compactItemClassnames.value, hashId.value));
  141. const triggerChange = function () {
  142. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  143. args[_key] = arguments[_key];
  144. }
  145. emit('update:value', args[0]);
  146. emit('change', ...args);
  147. formItemContext.onFieldChange();
  148. };
  149. const handleBlur = e => {
  150. emit('blur', e);
  151. formItemContext.onFieldBlur();
  152. };
  153. expose({
  154. blur,
  155. focus,
  156. scrollTo
  157. });
  158. const isMultiple = (0, _vue.computed)(() => mode.value === 'multiple' || mode.value === 'tags');
  159. const mergedShowArrow = (0, _vue.computed)(() => props.showArrow !== undefined ? props.showArrow : props.loading || !(isMultiple.value || mode.value === 'combobox'));
  160. return () => {
  161. var _a, _b, _c, _d;
  162. const {
  163. notFoundContent,
  164. listHeight = 256,
  165. listItemHeight = 24,
  166. popupClassName,
  167. dropdownClassName,
  168. virtual,
  169. dropdownMatchSelectWidth,
  170. id = formItemContext.id.value,
  171. placeholder = (_a = slots.placeholder) === null || _a === void 0 ? void 0 : _a.call(slots),
  172. showArrow
  173. } = props;
  174. const {
  175. hasFeedback,
  176. feedbackIcon
  177. } = formItemInputContext;
  178. const {} = configProvider;
  179. // ===================== Empty =====================
  180. let mergedNotFound;
  181. if (notFoundContent !== undefined) {
  182. mergedNotFound = notFoundContent;
  183. } else if (slots.notFoundContent) {
  184. mergedNotFound = slots.notFoundContent();
  185. } else if (mode.value === 'combobox') {
  186. mergedNotFound = null;
  187. } else {
  188. mergedNotFound = (renderEmpty === null || renderEmpty === void 0 ? void 0 : renderEmpty('Select')) || (0, _vue.createVNode)(_renderEmpty.DefaultRenderEmpty, {
  189. "componentName": "Select"
  190. }, null);
  191. }
  192. // ===================== Icons =====================
  193. const {
  194. suffixIcon,
  195. itemIcon,
  196. removeIcon,
  197. clearIcon
  198. } = (0, _iconUtil.default)((0, _extends2.default)((0, _extends2.default)({}, props), {
  199. multiple: isMultiple.value,
  200. prefixCls: prefixCls.value,
  201. hasFeedback,
  202. feedbackIcon,
  203. showArrow: mergedShowArrow.value
  204. }), slots);
  205. const selectProps = (0, _omit.default)(props, ['prefixCls', 'suffixIcon', 'itemIcon', 'removeIcon', 'clearIcon', 'size', 'bordered', 'status']);
  206. const rcSelectRtlDropdownClassName = (0, _classNames.default)(popupClassName || dropdownClassName, {
  207. [`${prefixCls.value}-dropdown-${direction.value}`]: direction.value === 'rtl'
  208. }, hashId.value);
  209. return wrapSSR((0, _vue.createVNode)(_vcSelect.default, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
  210. "ref": selectRef,
  211. "virtual": virtual,
  212. "dropdownMatchSelectWidth": dropdownMatchSelectWidth
  213. }, selectProps), attrs), {}, {
  214. "showSearch": (_b = props.showSearch) !== null && _b !== void 0 ? _b : (_c = select === null || select === void 0 ? void 0 : select.value) === null || _c === void 0 ? void 0 : _c.showSearch,
  215. "placeholder": placeholder,
  216. "listHeight": listHeight,
  217. "listItemHeight": listItemHeight,
  218. "mode": mode.value,
  219. "prefixCls": prefixCls.value,
  220. "direction": direction.value,
  221. "inputIcon": suffixIcon,
  222. "menuItemSelectedIcon": itemIcon,
  223. "removeIcon": removeIcon,
  224. "clearIcon": clearIcon,
  225. "notFoundContent": mergedNotFound,
  226. "class": [mergedClassName.value, attrs.class],
  227. "getPopupContainer": getPopupContainer === null || getPopupContainer === void 0 ? void 0 : getPopupContainer.value,
  228. "dropdownClassName": rcSelectRtlDropdownClassName,
  229. "onChange": triggerChange,
  230. "onBlur": handleBlur,
  231. "id": id,
  232. "dropdownRender": selectProps.dropdownRender || slots.dropdownRender,
  233. "transitionName": transitionName.value,
  234. "children": (_d = slots.default) === null || _d === void 0 ? void 0 : _d.call(slots),
  235. "tagRender": props.tagRender || slots.tagRender,
  236. "optionLabelRender": slots.optionLabel,
  237. "maxTagPlaceholder": props.maxTagPlaceholder || slots.maxTagPlaceholder,
  238. "showArrow": hasFeedback || showArrow,
  239. "disabled": mergedDisabled.value
  240. }), {
  241. option: slots.option
  242. }));
  243. };
  244. }
  245. });
  246. /* istanbul ignore next */
  247. Select.install = function (app) {
  248. app.component(Select.name, Select);
  249. app.component(Select.Option.displayName, Select.Option);
  250. app.component(Select.OptGroup.displayName, Select.OptGroup);
  251. return app;
  252. };
  253. const SelectOption = exports.SelectOption = Select.Option;
  254. const SelectOptGroup = exports.SelectOptGroup = Select.OptGroup;
  255. var _default = exports.default = Select;