xdesign-vue-next/es/table/ellipsis.mjs.map

XDesign Component for vue-next

{"version":3,"file":"ellipsis.mjs","sources":["../../src/table/ellipsis.tsx"],"sourcesContent":["/** 超出省略显示 */\nimport { defineComponent, PropType, ref, computed } from 'vue';\nimport debounce from 'lodash/debounce';\nimport { AttachNode, TNode } from '../common';\nimport { renderContent } from '../utils/render-tnode';\nimport { isNodeOverflow } from '../utils/dom';\nimport TTooltip, { TooltipProps } from '../tooltip';\n\nexport interface EllipsisProps {\n  content: string | TNode;\n  default: string | TNode;\n  tooltipContent: string | number | TNode;\n  placement: TooltipProps['placement'];\n  attach?: AttachNode;\n  tooltipProps: TooltipProps;\n  zIndex: number;\n}\n\nexport default defineComponent({\n  name: 'XEllipsis',\n\n  props: {\n    /** 内容 */\n    content: {\n      type: [String, Function] as PropType<EllipsisProps['content']>,\n    },\n    /** 内容，同 content */\n    default: {\n      type: [String, Function] as PropType<EllipsisProps['default']>,\n    },\n    /** 内容，同 content，可以单独自定义浮层内容，无需和触发元素保持一致 */\n    tooltipContent: {\n      type: [String, Number, Function] as PropType<EllipsisProps['tooltipContent']>,\n    },\n    /** 浮层位置 */\n    placement: String as PropType<EllipsisProps['placement']>,\n    /** 挂载元素 */\n    attach: [String, Function] as PropType<EllipsisProps['attach']>,\n    /** 透传 Tooltip 组件属性 */\n    tooltipProps: Object as PropType<EllipsisProps['tooltipProps']>,\n    zIndex: Number,\n    overlayClassName: String,\n    classPrefix: {\n      type: String,\n      default: 'x',\n    },\n  },\n\n  setup(props) {\n    const root = ref();\n    const isOverflow = ref(false);\n\n    const ellipsisClasses = computed(() => [\n      `${props.classPrefix}-table__ellipsis`,\n      `${props.classPrefix}-text-ellipsis`,\n    ]);\n\n    const innerEllipsisClassName = computed<TooltipProps['overlayClassName']>(() => [\n      `${props.classPrefix}-table__ellipsis-content`,\n      props.overlayClassName,\n    ]);\n\n    // 当表格数据量大时，不希望默认渲染全量的 Tooltip，期望在用户 mouseenter 的时候再显示\n    const onTriggerMouseenter = () => {\n      if (!root.value) return;\n      isOverflow.value = isNodeOverflow(root.value);\n    };\n\n    const onTriggerMouseleave = () => {\n      if (!root.value) return;\n      isOverflow.value = isNodeOverflow(root.value);\n    };\n\n    // 使用 debounce 有两个原因：1. 避免 safari/firefox 等浏览器不显示省略浮层；2. 避免省略列快速滚动时，出现一堆的省略浮层\n    const onMouseAround = debounce((e: MouseEvent) => {\n      e.type === 'mouseleave' ? onTriggerMouseleave() : onTriggerMouseenter();\n    }, 80);\n\n    return {\n      root,\n      isOverflow,\n      ellipsisClasses,\n      innerEllipsisClassName,\n      onMouseAround,\n    };\n  },\n\n  render() {\n    const cellNode = renderContent(this, 'default', 'content');\n    const ellipsisContent = (\n      <div ref=\"root\" class={this.ellipsisClasses} onMouseenter={this.onMouseAround} onMouseleave={this.onMouseAround}>\n        {cellNode}\n      </div>\n    );\n    let content = null;\n    const tooltipProps = this.tooltipProps as EllipsisProps['tooltipProps'];\n    if (this.isOverflow) {\n      const rProps = {\n        content: (this.tooltipContent as string) || (() => cellNode),\n        destroyOnClose: true,\n        zIndex: this.zIndex,\n        attach: this.attach,\n        placement: this.placement,\n        overlayClassName: tooltipProps?.overlayClassName\n          ? this.innerEllipsisClassName.concat(tooltipProps.overlayClassName)\n          : this.innerEllipsisClassName,\n        ...tooltipProps,\n      };\n      content = <TTooltip {...rProps}>{ellipsisContent}</TTooltip>;\n    } else {\n      content = ellipsisContent;\n    }\n    return content;\n  },\n});\n"],"names":["_isVNode","name","props","content","type","tooltipContent","placement","attach","tooltipProps","zIndex","overlayClassName","classPrefix","debounce","root","isOverflow","ellipsisClasses","innerEllipsisClassName","onMouseAround","destroyOnClose"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMuC,SAAA,OAAA,CAAA,CAAA,EAAA;AAAA,EAAA,OAAA,OAAA,CAAA,KAAA,UAAA,IAAA,MAAA,CAAA,SAAA,CAAA,QAAA,CAAA,IAAA,CAAA,CAAA,CAAA,KAAA,iBAAA,IAAA,CAAAA,OAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA;AAYvC,gBAAA,eAAA,CAAA;AACEC,EAAAA,IAAAA,EAAAA,WAAAA;AAEAC,EAAAA,KAAAA,EAAAA;AAEEC,IAAAA,OAAAA,EAAAA;AACEC,MAAAA,IAAAA,EAAAA,CAAAA,MAAAA,EAAAA,QAAAA,CAAAA;;;AAIAA,MAAAA,IAAAA,EAAAA,CAAAA,MAAAA,EAAAA,QAAAA,CAAAA;;AAGFC,IAAAA,cAAAA,EAAAA;AACED,MAAAA,IAAAA,EAAAA,CAAAA,MAAAA,EAAAA,MAAAA,EAAAA,QAAAA,CAAAA;;AAGFE,IAAAA,SAAAA,EAAAA,MAAAA;AAEAC,IAAAA,MAAAA,EAAAA,CAAAA,MAAAA,EAAAA,QAAAA,CAAAA;AAEAC,IAAAA,YAAAA,EAAAA,MAAAA;AACAC,IAAAA,MAAAA,EAAAA,MAAAA;AACAC,IAAAA,gBAAAA,EAAAA,MAAAA;AACAC,IAAAA,WAAAA,EAAAA;AACEP,MAAAA,IAAAA,EAAAA,MAAAA;;AAEF,KAAA;;;AAIA,IAAA,IAAA,IAAA,GAAA,GAAA,EAAA,CAAA;AACM,IAAA,IAAA,UAAA,GAAA,GAAA,CAAA,KAAA,CAAA,CAAA;;AAE2B,MAAA,OAAA,CAAA,EAAA,CAAA,MAAA,CAAA,KAAA,CAAA,WAAA,EAAA,kBAAA,CAAA,EAAA,EAAA,CAAA,MAAA,CAAA,KAAA,CAAA,WAAA,EAAA,gBAAA,CAAA,CAAA,CAAA;;;;;AAWjC,IAAA,IAAA,mBAAA,GAAA,SAAA,mBAAA,GAAA;AACE,MAAA,IAAA,CAAA,IAAA,CAAA,KAAA,EAAA,OAAA;;;AAIF,IAAA,IAAA,mBAAA,GAAA,SAAA,mBAAA,GAAA;AACE,MAAA,IAAA,CAAA,IAAA,CAAA,KAAA,EAAA,OAAA;;;AAKI,IAAA,IAAA,aAAA,GAAAQ,UAAA,CAAA,UAAA,CAAA,EAAA;;;;AAKJC,MAAAA,IAAAA,EAAAA,IAAAA;AACAC,MAAAA,UAAAA,EAAAA,UAAAA;AACAC,MAAAA,eAAAA,EAAAA,eAAAA;AACAC,MAAAA,sBAAAA,EAAAA,sBAAAA;AACAC,MAAAA,aAAAA,EAAAA,aAAAA;;;;;;AAOA,MAAA,KAAA,EAAA,MAAA;;;AAA+E,MAAA,cAAA,EAAA,IAAA,CAAA,aAAA;AAAmB,KAAA,EAAA,CAAA,QAAA,CAAA,CAAA,CAAA;;AAKpG,IAAA,IAAA,YAAA,GAAA,IAAA,CAAA,YAAA,CAAA;;;AAGId,QAAAA,OAAAA,EAAAA,IAAAA,CAAAA,cAAAA,IAAAA,YAAAA;AAA6C,UAAA,OAAA,QAAA,CAAA;;AAC7Ce,QAAAA,cAAAA,EAAAA,IAAAA;;;;;AAMS,OAAA,EAAA,YAAA,CAAA,CAAA;;AAGsB,QAAA,SAAA,EAAA,SAAA,QAAA,GAAA;AAAA,UAAA,OAAA,CAAA,eAAA,CAAA,CAAA;AAAA,SAAA;;AACnC,KAAA,MAAA;AACYf,MAAAA,OAAAA,GAAAA,eAAAA,CAAAA;AACZ,KAAA;AACO,IAAA,OAAA,OAAA,CAAA;AACT,GAAA;AACF,CAAA,CAAA;;;;"}