| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247 |
- import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
- import _extends from "@babel/runtime/helpers/esm/extends";
- import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
- import { computed, defineComponent, ref } from 'vue';
- import classNames from '../_util/classNames';
- import RcSelect, { selectProps as vcSelectProps, Option, OptGroup } from '../vc-select';
- import getIcons from './utils/iconUtil';
- import PropTypes from '../_util/vue-types';
- import useConfigInject from '../config-provider/hooks/useConfigInject';
- import { DefaultRenderEmpty } from '../config-provider/renderEmpty';
- import omit from '../_util/omit';
- import { FormItemInputContext, useInjectFormItemContext } from '../form/FormItemContext';
- import { getTransitionDirection, getTransitionName } from '../_util/transition';
- import { initDefaultProps } from '../_util/props-util';
- import { getStatusClassNames, getMergedStatus } from '../_util/statusUtils';
- import { stringType, someType, functionType, booleanType } from '../_util/type';
- import { useCompactItemContext } from '../space/Compact';
- // CSSINJS
- import useStyle from './style';
- import { useInjectDisabled } from '../config-provider/DisabledContext';
- import devWarning from '../vc-util/devWarning';
- export const selectProps = () => _extends(_extends({}, omit(vcSelectProps(), ['inputIcon', 'mode', 'getInputElement', 'getRawInputElement', 'backfill'])), {
- value: someType([Array, Object, String, Number]),
- defaultValue: someType([Array, Object, String, Number]),
- notFoundContent: PropTypes.any,
- suffixIcon: PropTypes.any,
- itemIcon: PropTypes.any,
- size: stringType(),
- mode: stringType(),
- bordered: booleanType(true),
- transitionName: String,
- choiceTransitionName: stringType(''),
- popupClassName: String,
- /** @deprecated Please use `popupClassName` instead */
- dropdownClassName: String,
- placement: stringType(),
- status: stringType(),
- 'onUpdate:value': functionType()
- });
- const SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
- const Select = defineComponent({
- compatConfig: {
- MODE: 3
- },
- name: 'ASelect',
- Option,
- OptGroup,
- inheritAttrs: false,
- props: initDefaultProps(selectProps(), {
- listHeight: 256,
- listItemHeight: 24
- }),
- SECRET_COMBOBOX_MODE_DO_NOT_USE,
- slots: Object,
- setup(props, _ref) {
- let {
- attrs,
- emit,
- slots,
- expose
- } = _ref;
- const selectRef = ref();
- const formItemContext = useInjectFormItemContext();
- const formItemInputContext = FormItemInputContext.useInject();
- const mergedStatus = computed(() => getMergedStatus(formItemInputContext.status, props.status));
- const focus = () => {
- var _a;
- (_a = selectRef.value) === null || _a === void 0 ? void 0 : _a.focus();
- };
- const blur = () => {
- var _a;
- (_a = selectRef.value) === null || _a === void 0 ? void 0 : _a.blur();
- };
- const scrollTo = arg => {
- var _a;
- (_a = selectRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo(arg);
- };
- const mode = computed(() => {
- const {
- mode
- } = props;
- if (mode === 'combobox') {
- return undefined;
- }
- if (mode === SECRET_COMBOBOX_MODE_DO_NOT_USE) {
- return 'combobox';
- }
- return mode;
- });
- // ====================== Warning ======================
- if (process.env.NODE_ENV !== 'production') {
- devWarning(!props.dropdownClassName, 'Select', '`dropdownClassName` is deprecated. Please use `popupClassName` instead.');
- }
- const {
- prefixCls,
- direction,
- configProvider,
- renderEmpty,
- size: contextSize,
- getPrefixCls,
- getPopupContainer,
- disabled,
- select
- } = useConfigInject('select', props);
- const {
- compactSize,
- compactItemClassnames
- } = useCompactItemContext(prefixCls, direction);
- const mergedSize = computed(() => compactSize.value || contextSize.value);
- const contextDisabled = useInjectDisabled();
- const mergedDisabled = computed(() => {
- var _a;
- return (_a = disabled.value) !== null && _a !== void 0 ? _a : contextDisabled.value;
- });
- // style
- const [wrapSSR, hashId] = useStyle(prefixCls);
- const rootPrefixCls = computed(() => getPrefixCls());
- // ===================== Placement =====================
- const placement = computed(() => {
- if (props.placement !== undefined) {
- return props.placement;
- }
- return direction.value === 'rtl' ? 'bottomRight' : 'bottomLeft';
- });
- const transitionName = computed(() => getTransitionName(rootPrefixCls.value, getTransitionDirection(placement.value), props.transitionName));
- const mergedClassName = computed(() => classNames({
- [`${prefixCls.value}-lg`]: mergedSize.value === 'large',
- [`${prefixCls.value}-sm`]: mergedSize.value === 'small',
- [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
- [`${prefixCls.value}-borderless`]: !props.bordered,
- [`${prefixCls.value}-in-form-item`]: formItemInputContext.isFormItemInput
- }, getStatusClassNames(prefixCls.value, mergedStatus.value, formItemInputContext.hasFeedback), compactItemClassnames.value, hashId.value));
- const triggerChange = function () {
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
- args[_key] = arguments[_key];
- }
- emit('update:value', args[0]);
- emit('change', ...args);
- formItemContext.onFieldChange();
- };
- const handleBlur = e => {
- emit('blur', e);
- formItemContext.onFieldBlur();
- };
- expose({
- blur,
- focus,
- scrollTo
- });
- const isMultiple = computed(() => mode.value === 'multiple' || mode.value === 'tags');
- const mergedShowArrow = computed(() => props.showArrow !== undefined ? props.showArrow : props.loading || !(isMultiple.value || mode.value === 'combobox'));
- return () => {
- var _a, _b, _c, _d;
- const {
- notFoundContent,
- listHeight = 256,
- listItemHeight = 24,
- popupClassName,
- dropdownClassName,
- virtual,
- dropdownMatchSelectWidth,
- id = formItemContext.id.value,
- placeholder = (_a = slots.placeholder) === null || _a === void 0 ? void 0 : _a.call(slots),
- showArrow
- } = props;
- const {
- hasFeedback,
- feedbackIcon
- } = formItemInputContext;
- const {} = configProvider;
- // ===================== Empty =====================
- let mergedNotFound;
- if (notFoundContent !== undefined) {
- mergedNotFound = notFoundContent;
- } else if (slots.notFoundContent) {
- mergedNotFound = slots.notFoundContent();
- } else if (mode.value === 'combobox') {
- mergedNotFound = null;
- } else {
- mergedNotFound = (renderEmpty === null || renderEmpty === void 0 ? void 0 : renderEmpty('Select')) || _createVNode(DefaultRenderEmpty, {
- "componentName": "Select"
- }, null);
- }
- // ===================== Icons =====================
- const {
- suffixIcon,
- itemIcon,
- removeIcon,
- clearIcon
- } = getIcons(_extends(_extends({}, props), {
- multiple: isMultiple.value,
- prefixCls: prefixCls.value,
- hasFeedback,
- feedbackIcon,
- showArrow: mergedShowArrow.value
- }), slots);
- const selectProps = omit(props, ['prefixCls', 'suffixIcon', 'itemIcon', 'removeIcon', 'clearIcon', 'size', 'bordered', 'status']);
- const rcSelectRtlDropdownClassName = classNames(popupClassName || dropdownClassName, {
- [`${prefixCls.value}-dropdown-${direction.value}`]: direction.value === 'rtl'
- }, hashId.value);
- return wrapSSR(_createVNode(RcSelect, _objectSpread(_objectSpread(_objectSpread({
- "ref": selectRef,
- "virtual": virtual,
- "dropdownMatchSelectWidth": dropdownMatchSelectWidth
- }, selectProps), attrs), {}, {
- "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,
- "placeholder": placeholder,
- "listHeight": listHeight,
- "listItemHeight": listItemHeight,
- "mode": mode.value,
- "prefixCls": prefixCls.value,
- "direction": direction.value,
- "inputIcon": suffixIcon,
- "menuItemSelectedIcon": itemIcon,
- "removeIcon": removeIcon,
- "clearIcon": clearIcon,
- "notFoundContent": mergedNotFound,
- "class": [mergedClassName.value, attrs.class],
- "getPopupContainer": getPopupContainer === null || getPopupContainer === void 0 ? void 0 : getPopupContainer.value,
- "dropdownClassName": rcSelectRtlDropdownClassName,
- "onChange": triggerChange,
- "onBlur": handleBlur,
- "id": id,
- "dropdownRender": selectProps.dropdownRender || slots.dropdownRender,
- "transitionName": transitionName.value,
- "children": (_d = slots.default) === null || _d === void 0 ? void 0 : _d.call(slots),
- "tagRender": props.tagRender || slots.tagRender,
- "optionLabelRender": slots.optionLabel,
- "maxTagPlaceholder": props.maxTagPlaceholder || slots.maxTagPlaceholder,
- "showArrow": hasFeedback || showArrow,
- "disabled": mergedDisabled.value
- }), {
- option: slots.option
- }));
- };
- }
- });
- /* istanbul ignore next */
- Select.install = function (app) {
- app.component(Select.name, Select);
- app.component(Select.Option.displayName, Select.Option);
- app.component(Select.OptGroup.displayName, Select.OptGroup);
- return app;
- };
- export const SelectOption = Select.Option;
- export const SelectOptGroup = Select.OptGroup;
- export default Select;
|