180 lines
5.2 KiB
JavaScript
180 lines
5.2 KiB
JavaScript
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";
|
|
var __rest = this && this.__rest || function (s, e) {
|
|
var t = {};
|
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
}
|
|
return t;
|
|
};
|
|
import Trigger from '../vc-trigger';
|
|
import PropTypes from '../_util/vue-types';
|
|
import classNames from '../_util/classNames';
|
|
import { computed, ref, defineComponent } from 'vue';
|
|
const getBuiltInPlacements = dropdownMatchSelectWidth => {
|
|
// Enable horizontal overflow auto-adjustment when a custom dropdown width is provided
|
|
const adjustX = dropdownMatchSelectWidth === true ? 0 : 1;
|
|
return {
|
|
bottomLeft: {
|
|
points: ['tl', 'bl'],
|
|
offset: [0, 4],
|
|
overflow: {
|
|
adjustX,
|
|
adjustY: 1
|
|
}
|
|
},
|
|
bottomRight: {
|
|
points: ['tr', 'br'],
|
|
offset: [0, 4],
|
|
overflow: {
|
|
adjustX,
|
|
adjustY: 1
|
|
}
|
|
},
|
|
topLeft: {
|
|
points: ['bl', 'tl'],
|
|
offset: [0, -4],
|
|
overflow: {
|
|
adjustX,
|
|
adjustY: 1
|
|
}
|
|
},
|
|
topRight: {
|
|
points: ['br', 'tr'],
|
|
offset: [0, -4],
|
|
overflow: {
|
|
adjustX,
|
|
adjustY: 1
|
|
}
|
|
}
|
|
};
|
|
};
|
|
const SelectTrigger = defineComponent({
|
|
name: 'SelectTrigger',
|
|
inheritAttrs: false,
|
|
props: {
|
|
dropdownAlign: Object,
|
|
visible: {
|
|
type: Boolean,
|
|
default: undefined
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: undefined
|
|
},
|
|
dropdownClassName: String,
|
|
dropdownStyle: PropTypes.object,
|
|
placement: String,
|
|
empty: {
|
|
type: Boolean,
|
|
default: undefined
|
|
},
|
|
prefixCls: String,
|
|
popupClassName: String,
|
|
animation: String,
|
|
transitionName: String,
|
|
getPopupContainer: Function,
|
|
dropdownRender: Function,
|
|
containerWidth: Number,
|
|
dropdownMatchSelectWidth: PropTypes.oneOfType([Number, Boolean]).def(true),
|
|
popupElement: PropTypes.any,
|
|
direction: String,
|
|
getTriggerDOMNode: Function,
|
|
onPopupVisibleChange: Function,
|
|
onPopupMouseEnter: Function,
|
|
onPopupFocusin: Function,
|
|
onPopupFocusout: Function
|
|
},
|
|
setup(props, _ref) {
|
|
let {
|
|
slots,
|
|
attrs,
|
|
expose
|
|
} = _ref;
|
|
const builtInPlacements = computed(() => {
|
|
const {
|
|
dropdownMatchSelectWidth
|
|
} = props;
|
|
return getBuiltInPlacements(dropdownMatchSelectWidth);
|
|
});
|
|
const popupRef = ref();
|
|
expose({
|
|
getPopupElement: () => {
|
|
return popupRef.value;
|
|
}
|
|
});
|
|
return () => {
|
|
const _a = _extends(_extends({}, props), attrs),
|
|
{
|
|
empty = false
|
|
} = _a,
|
|
restProps = __rest(_a, ["empty"]);
|
|
const {
|
|
visible,
|
|
dropdownAlign,
|
|
prefixCls,
|
|
popupElement,
|
|
dropdownClassName,
|
|
dropdownStyle,
|
|
direction = 'ltr',
|
|
placement,
|
|
dropdownMatchSelectWidth,
|
|
containerWidth,
|
|
dropdownRender,
|
|
animation,
|
|
transitionName,
|
|
getPopupContainer,
|
|
getTriggerDOMNode,
|
|
onPopupVisibleChange,
|
|
onPopupMouseEnter,
|
|
onPopupFocusin,
|
|
onPopupFocusout
|
|
} = restProps;
|
|
const dropdownPrefixCls = `${prefixCls}-dropdown`;
|
|
let popupNode = popupElement;
|
|
if (dropdownRender) {
|
|
popupNode = dropdownRender({
|
|
menuNode: popupElement,
|
|
props
|
|
});
|
|
}
|
|
const mergedTransitionName = animation ? `${dropdownPrefixCls}-${animation}` : transitionName;
|
|
const popupStyle = _extends({
|
|
minWidth: `${containerWidth}px`
|
|
}, dropdownStyle);
|
|
if (typeof dropdownMatchSelectWidth === 'number') {
|
|
popupStyle.width = `${dropdownMatchSelectWidth}px`;
|
|
} else if (dropdownMatchSelectWidth) {
|
|
popupStyle.width = `${containerWidth}px`;
|
|
}
|
|
return _createVNode(Trigger, _objectSpread(_objectSpread({}, props), {}, {
|
|
"showAction": onPopupVisibleChange ? ['click'] : [],
|
|
"hideAction": onPopupVisibleChange ? ['click'] : [],
|
|
"popupPlacement": placement || (direction === 'rtl' ? 'bottomRight' : 'bottomLeft'),
|
|
"builtinPlacements": builtInPlacements.value,
|
|
"prefixCls": dropdownPrefixCls,
|
|
"popupTransitionName": mergedTransitionName,
|
|
"popupAlign": dropdownAlign,
|
|
"popupVisible": visible,
|
|
"getPopupContainer": getPopupContainer,
|
|
"popupClassName": classNames(dropdownClassName, {
|
|
[`${dropdownPrefixCls}-empty`]: empty
|
|
}),
|
|
"popupStyle": popupStyle,
|
|
"getTriggerDOMNode": getTriggerDOMNode,
|
|
"onPopupVisibleChange": onPopupVisibleChange
|
|
}), {
|
|
default: slots.default,
|
|
popup: () => _createVNode("div", {
|
|
"ref": popupRef,
|
|
"onMouseenter": onPopupMouseEnter,
|
|
"onFocusin": onPopupFocusin,
|
|
"onFocusout": onPopupFocusout
|
|
}, [popupNode])
|
|
});
|
|
};
|
|
}
|
|
});
|
|
export default SelectTrigger; |