xdesign-vue-next/es/select-input/useOverlayInnerStyle.mjs.map

XDesign Component for vue-next

{"version":3,"file":"useOverlayInnerStyle.mjs","sources":["../../src/select-input/useOverlayInnerStyle.ts"],"sourcesContent":["import { ref, toRefs, computed, CSSProperties } from 'vue';\nimport isObject from 'lodash/isObject';\nimport isFunction from 'lodash/isFunction';\nimport { TdSelectInputProps } from './type';\nimport { TdPopupProps, PopupVisibleChangeContext } from '../popup';\nimport { useFormDisabled } from '../form/hooks';\n\nexport type overlayInnerStyleProps = Pick<\n  TdSelectInputProps,\n  'popupProps' | 'autoWidth' | 'readonly' | 'onPopupVisibleChange' | 'disabled' | 'allowInput' | 'popupVisible'\n>;\n\n// 单位：px\nconst MAX_POPUP_WIDTH = 1000;\n// 避免因滚动条出现文本省略，预留宽度 8\nconst RESERVE_WIDTH = 0;\n\nexport default function useOverlayInnerStyle(props: overlayInnerStyleProps) {\n  const { popupProps, autoWidth } = toRefs(props);\n  const innerPopupVisible = ref(false);\n  const disable = useFormDisabled();\n\n  const matchWidthFunc = (triggerElement: HTMLElement, popupElement: HTMLElement) => {\n    const SCROLLBAR_WIDTH = popupElement.scrollHeight > popupElement.offsetHeight ? RESERVE_WIDTH : 0;\n    const width =\n      popupElement.offsetWidth + SCROLLBAR_WIDTH >= triggerElement.offsetWidth\n        ? popupElement.offsetWidth\n        : triggerElement.offsetWidth;\n    let otherOverlayInnerStyle: CSSProperties = {};\n    if (\n      popupProps.value &&\n      typeof popupProps.value.overlayInnerStyle === 'object' &&\n      !popupProps.value.overlayInnerStyle.width\n    ) {\n      otherOverlayInnerStyle = popupProps.value.overlayInnerStyle;\n    }\n    return {\n      width: `${Math.min(width, MAX_POPUP_WIDTH)}px`,\n      ...otherOverlayInnerStyle,\n    };\n  };\n\n  const onInnerPopupVisibleChange = (visible: boolean, context: PopupVisibleChangeContext) => {\n    if (disable.value || props.readonly) return;\n    // 如果点击触发元素（输入框）且为可输入状态，则继续显示下拉框\n    const newVisible = context.trigger === 'trigger-element-click' && props.allowInput ? true : visible;\n    // 重复点击触发元素时，下拉框展示状态不变，不重复触发事件\n    if (props.popupVisible !== newVisible) {\n      innerPopupVisible.value = newVisible;\n      props.onPopupVisibleChange?.(newVisible, context);\n    }\n  };\n\n  const getAutoWidthPopupStyleWidth = (triggerElement: HTMLElement, popupElement: HTMLElement) => {\n    return {\n      width: `${Math.max(triggerElement.offsetWidth, popupElement.offsetWidth)}px`,\n      ...popupProps.value?.overlayInnerStyle,\n    };\n  };\n\n  const tOverlayInnerStyle = computed(() => {\n    let result: TdPopupProps['overlayInnerStyle'] = {};\n    const overlayInnerStyle = popupProps.value?.overlayInnerStyle || {};\n    if (isFunction(overlayInnerStyle) || (isObject(overlayInnerStyle) && overlayInnerStyle.width)) {\n      result = overlayInnerStyle;\n    } else {\n      if (autoWidth.value) {\n        result = getAutoWidthPopupStyleWidth;\n      } else {\n        result = matchWidthFunc;\n      }\n    }\n    return result;\n  });\n\n  return {\n    tOverlayInnerStyle,\n    innerPopupVisible,\n    onInnerPopupVisibleChange,\n  };\n}\n"],"names":["otherOverlayInnerStyle","width","isFunction","isObject","result","tOverlayInnerStyle","innerPopupVisible","onInnerPopupVisibleChange"],"mappings":";;;;;;;;;;;;;;;;;AAaA,IAAA,eAAA,GAAA,GAAA,CAAA;AAEA,IAAA,aAAA,GAAA,CAAA,CAAA;AAEA,SAAA,oBAAA,CAAA,KAAA,EAAA;AACE,EAAA,IAAA,OAAA,GAAA,MAAA,CAAA,KAAA,CAAA;;;AACM,EAAA,IAAA,iBAAA,GAAA,GAAA,CAAA,KAAA,CAAA,CAAA;AACN,EAAA,IAAA,OAAA,GAAA,eAAA,EAAA,CAAA;;AAGE,IAAA,IAAA,eAAA,GAAA,YAAA,CAAA,YAAA,GAAA,YAAA,CAAA,YAAA,GAAA,aAAA,GAAA,CAAA,CAAA;AACM,IAAA,IAAA,KAAA,GAAA,YAAA,CAAA,WAAA,GAAA,eAAA,IAAA,cAAA,CAAA,WAAA,GAAA,YAAA,CAAA,WAAA,GAAA,cAAA,CAAA,WAAA,CAAA;;;AAUJA,MAAAA,sBAAAA,GAAAA,UAAAA,CAAAA,KAAAA,CAAAA,iBAAAA,CAAAA;AACF,KAAA;AACO,IAAA,OAAA,aAAA,CAAA;;AACoC,KAAA,EAAA,sBAAA,CAAA,CAAA;;;AAMvC,IAAA,IAAA,OAAA,CAAA,KAAA,IAAA,KAAA,CAAA,QAAA,EAAA,OAAA;AAEJ,IAAA,IAAA,UAAA,GAAA,OAAA,CAAA,OAAA,KAAA,uBAAA,IAAA,KAAA,CAAA,UAAA,GAAA,IAAA,GAAA,OAAA,CAAA;AAEI,IAAA,IAAA,KAAA,CAAA,YAAA,KAAA,UAAA,EAAA;AAAmC,MAAA,IAAA,qBAAA,CAAA;;AAE/B,MAAA,CAAA,qBAAA,GAAA,KAAA,CAAA,oBAAA,MAAA,IAAA,IAAA,qBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,qBAAA,CAAA,IAAA,CAAA,KAAA,EAAA,UAAA,EAAA,OAAA,CAAA,CAAA;AACR,KAAA;;;AAG8F,IAAA,IAAA,iBAAA,CAAA;AACvF,IAAA,OAAA,aAAA,CAAA;AACLC,MAAAA,KAAAA,EAAAA,EAAAA,CAAAA,MAAAA,CAAAA,IAAAA,CAAAA,GAAAA,CAAAA,cAAAA,CAAAA,WAAAA,EAAAA,YAAAA,CAAAA,WAAAA,CAAAA,EAAAA,IAAAA,CAAAA;;;AAKE,EAAA,IAAA,kBAAA,GAAA,QAAA,CAAA,YAAA;AAAoC,IAAA,IAAA,kBAAA,CAAA;;AAExC,IAAA,IAAA,iBAAA,GAAA,CAAA,CAAA,kBAAA,GAAA,UAAA,CAAA,KAAA,MAAA,IAAA,IAAA,kBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,kBAAA,CAAA,iBAAA,KAAA,EAAA,CAAA;AACA,IAAA,IAAAC,YAAA,CAAA,iBAAA,CAAA,IAAAC,UAAA,CAAA,iBAAA,CAAA,IAAA,iBAAA,CAAA,KAAA,EAAA;AACWC,MAAAA,MAAAA,GAAAA,iBAAAA,CAAAA;AACX,KAAA,MAAA;;AAEaA,QAAAA,MAAAA,GAAAA,2BAAAA,CAAAA;AACX,OAAA,MAAA;AACWA,QAAAA,MAAAA,GAAAA,cAAAA,CAAAA;AACX,OAAA;AACF,KAAA;AACO,IAAA,OAAA,MAAA,CAAA;AACT,GAAA,CAAA,CAAA;;AAGEC,IAAAA,kBAAAA,EAAAA,kBAAAA;AACAC,IAAAA,iBAAAA,EAAAA,iBAAAA;AACAC,IAAAA,yBAAAA,EAAAA,yBAAAA;;AAEJ;;;;"}