| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180 |
- 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;
|