UNPKG

ant-design-vue

Version:

An enterprise-class UI design language and Vue-based implementation

260 lines 11.1 kB
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, ref, defineComponent } from 'vue'; import VcTreeSelect, { TreeNode, SHOW_ALL, SHOW_PARENT, SHOW_CHILD, treeSelectProps as vcTreeSelectProps } from '../vc-tree-select'; import classNames from '../_util/classNames'; import initDefaultProps from '../_util/props-util/initDefaultProps'; import omit from '../_util/omit'; import PropTypes from '../_util/vue-types'; import useConfigInject from '../config-provider/hooks/useConfigInject'; import devWarning from '../vc-util/devWarning'; import getIcons from '../select/utils/iconUtil'; import renderSwitcherIcon from '../tree/utils/iconUtil'; import { warning } from '../vc-util/warning'; import { flattenChildren } from '../_util/props-util'; import { FormItemInputContext, useInjectFormItemContext } from '../form/FormItemContext'; import { getTransitionDirection } from '../_util/transition'; import { getStatusClassNames, getMergedStatus } from '../_util/statusUtils'; import { booleanType, stringType, objectType, someType, functionType } from '../_util/type'; // CSSINJS import useSelectStyle from '../select/style'; import useStyle from './style'; import { useCompactItemContext } from '../space/Compact'; import { useInjectDisabled } from '../config-provider/DisabledContext'; const getTransitionName = (rootPrefixCls, motion, transitionName) => { if (transitionName !== undefined) { return transitionName; } return `${rootPrefixCls}-${motion}`; }; export function treeSelectProps() { return _extends(_extends({}, omit(vcTreeSelectProps(), ['showTreeIcon', 'treeMotion', 'inputIcon', 'getInputElement', 'treeLine', 'customSlots'])), { suffixIcon: PropTypes.any, size: stringType(), bordered: booleanType(), treeLine: someType([Boolean, Object]), replaceFields: objectType(), placement: stringType(), status: stringType(), popupClassName: String, /** @deprecated Please use `popupClassName` instead */ dropdownClassName: String, 'onUpdate:value': functionType(), 'onUpdate:treeExpandedKeys': functionType(), 'onUpdate:searchValue': functionType() }); } const TreeSelect = defineComponent({ compatConfig: { MODE: 3 }, name: 'ATreeSelect', inheritAttrs: false, props: initDefaultProps(treeSelectProps(), { choiceTransitionName: '', listHeight: 256, treeIcon: false, listItemHeight: 26, bordered: true }), slots: Object, setup(props, _ref) { let { attrs, slots, expose, emit } = _ref; warning(!(props.treeData === undefined && slots.default), '`children` of TreeSelect is deprecated. Please use `treeData` instead.'); devWarning(props.multiple !== false || !props.treeCheckable, 'TreeSelect', '`multiple` will always be `true` when `treeCheckable` is true'); devWarning(props.replaceFields === undefined, 'TreeSelect', '`replaceFields` is deprecated, please use fieldNames instead'); devWarning(!props.dropdownClassName, 'TreeSelect', '`dropdownClassName` is deprecated. Please use `popupClassName` instead.'); const formItemContext = useInjectFormItemContext(); const formItemInputContext = FormItemInputContext.useInject(); const mergedStatus = computed(() => getMergedStatus(formItemInputContext.status, props.status)); const { prefixCls, renderEmpty, direction, virtual, dropdownMatchSelectWidth, size: contextSize, getPopupContainer, getPrefixCls, disabled } = 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; }); 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 choiceTransitionName = computed(() => getTransitionName(rootPrefixCls.value, '', props.choiceTransitionName)); const treePrefixCls = computed(() => getPrefixCls('select-tree', props.prefixCls)); const treeSelectPrefixCls = computed(() => getPrefixCls('tree-select', props.prefixCls)); // style const [wrapSelectSSR, hashId] = useSelectStyle(prefixCls); const [wrapTreeSelectSSR] = useStyle(treeSelectPrefixCls, treePrefixCls); const mergedDropdownClassName = computed(() => classNames(props.popupClassName || props.dropdownClassName, `${treeSelectPrefixCls.value}-dropdown`, { [`${treeSelectPrefixCls.value}-dropdown-rtl`]: direction.value === 'rtl' }, hashId.value)); const isMultiple = computed(() => !!(props.treeCheckable || props.multiple)); const mergedShowArrow = computed(() => props.showArrow !== undefined ? props.showArrow : props.loading || !isMultiple.value); const treeSelectRef = ref(); expose({ focus() { var _a, _b; (_b = (_a = treeSelectRef.value).focus) === null || _b === void 0 ? void 0 : _b.call(_a); }, blur() { var _a, _b; (_b = (_a = treeSelectRef.value).blur) === null || _b === void 0 ? void 0 : _b.call(_a); } }); const handleChange = 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 handleTreeExpand = keys => { emit('update:treeExpandedKeys', keys); emit('treeExpand', keys); }; const handleSearch = value => { emit('update:searchValue', value); emit('search', value); }; const handleBlur = e => { emit('blur', e); formItemContext.onFieldBlur(); }; return () => { var _a, _b, _c; const { notFoundContent = (_a = slots.notFoundContent) === null || _a === void 0 ? void 0 : _a.call(slots), prefixCls: customizePrefixCls, bordered, listHeight, listItemHeight, multiple, treeIcon, treeLine, showArrow, switcherIcon = (_b = slots.switcherIcon) === null || _b === void 0 ? void 0 : _b.call(slots), fieldNames = props.replaceFields, id = formItemContext.id.value, placeholder = (_c = slots.placeholder) === null || _c === void 0 ? void 0 : _c.call(slots) } = props; const { isFormItemInput, hasFeedback, feedbackIcon } = formItemInputContext; // ===================== Icons ===================== const { suffixIcon, removeIcon, clearIcon } = getIcons(_extends(_extends({}, props), { multiple: isMultiple.value, showArrow: mergedShowArrow.value, hasFeedback, feedbackIcon, prefixCls: prefixCls.value }), slots); // ===================== Empty ===================== let mergedNotFound; if (notFoundContent !== undefined) { mergedNotFound = notFoundContent; } else { mergedNotFound = renderEmpty('Select'); } // ==================== Render ===================== const selectProps = omit(props, ['suffixIcon', 'itemIcon', 'removeIcon', 'clearIcon', 'switcherIcon', 'bordered', 'status', 'onUpdate:value', 'onUpdate:treeExpandedKeys', 'onUpdate:searchValue']); const mergedClassName = classNames(!customizePrefixCls && treeSelectPrefixCls.value, { [`${prefixCls.value}-lg`]: mergedSize.value === 'large', [`${prefixCls.value}-sm`]: mergedSize.value === 'small', [`${prefixCls.value}-rtl`]: direction.value === 'rtl', [`${prefixCls.value}-borderless`]: !bordered, [`${prefixCls.value}-in-form-item`]: isFormItemInput }, getStatusClassNames(prefixCls.value, mergedStatus.value, hasFeedback), compactItemClassnames.value, attrs.class, hashId.value); const otherProps = {}; if (props.treeData === undefined && slots.default) { otherProps.children = flattenChildren(slots.default()); } return wrapSelectSSR(wrapTreeSelectSSR(_createVNode(VcTreeSelect, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, attrs), selectProps), {}, { "disabled": mergedDisabled.value, "virtual": virtual.value, "dropdownMatchSelectWidth": dropdownMatchSelectWidth.value, "id": id, "fieldNames": fieldNames, "ref": treeSelectRef, "prefixCls": prefixCls.value, "class": mergedClassName, "listHeight": listHeight, "listItemHeight": listItemHeight, "treeLine": !!treeLine, "inputIcon": suffixIcon, "multiple": multiple, "removeIcon": removeIcon, "clearIcon": clearIcon, "switcherIcon": nodeProps => renderSwitcherIcon(treePrefixCls.value, switcherIcon, nodeProps, slots.leafIcon, treeLine), "showTreeIcon": treeIcon, "notFoundContent": mergedNotFound, "getPopupContainer": getPopupContainer === null || getPopupContainer === void 0 ? void 0 : getPopupContainer.value, "treeMotion": null, "dropdownClassName": mergedDropdownClassName.value, "choiceTransitionName": choiceTransitionName.value, "onChange": handleChange, "onBlur": handleBlur, "onSearch": handleSearch, "onTreeExpand": handleTreeExpand }, otherProps), {}, { "transitionName": transitionName.value, "customSlots": _extends(_extends({}, slots), { treeCheckable: () => _createVNode("span", { "class": `${prefixCls.value}-tree-checkbox-inner` }, null) }), "maxTagPlaceholder": props.maxTagPlaceholder || slots.maxTagPlaceholder, "placement": placement.value, "showArrow": hasFeedback || showArrow, "placeholder": placeholder }), _extends(_extends({}, slots), { treeCheckable: () => _createVNode("span", { "class": `${prefixCls.value}-tree-checkbox-inner` }, null) })))); }; } }); /* istanbul ignore next */ export const TreeSelectNode = TreeNode; export default _extends(TreeSelect, { TreeNode, SHOW_ALL: SHOW_ALL, SHOW_PARENT: SHOW_PARENT, SHOW_CHILD: SHOW_CHILD, install: app => { app.component(TreeSelect.name, TreeSelect); app.component(TreeSelectNode.displayName, TreeSelectNode); return app; } });