vexip-ui/es/components/overflow/overflow.mjs.map

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

{"version":3,"file":"overflow.mjs","sources":["../../../components/overflow/overflow.tsx"],"sourcesContent":["import { ResizeObserver } from '@/components/resize-observer'\n\nimport {\n  Fragment,\n  computed,\n  createTextVNode,\n  defineComponent,\n  nextTick,\n  onMounted,\n  ref,\n  watch,\n} from 'vue'\n\nimport { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'\nimport { isDefined } from '@vexip-ui/utils'\nimport { overflowProps } from './props'\n\nconst TEXT_VNODE = createTextVNode('').type\n\nexport default defineComponent({\n  name: 'Overflow',\n  inheritAttrs: false,\n  props: overflowProps,\n  emits: [],\n  setup(_props, { attrs, slots, expose }) {\n    const props = useProps('overflow', _props, {\n      items: {\n        default: null,\n        static: true,\n      },\n      tag: 'div',\n      attrFlag: false,\n      static: false,\n      maxCount: 0,\n    })\n\n    const nh = useNameHelper('overflow')\n    const restCount = ref(0)\n\n    const wrapper = ref<HTMLElement>()\n    const counter = ref<HTMLElement>()\n    const suffix = ref<HTMLElement>()\n\n    const className = computed(() => {\n      return [\n        nh.b(),\n        nh.bs('vars'),\n        {\n          [nh.bm('inherit')]: props.inherit,\n          [nh.bm('manual')]: props.maxCount > 0,\n        },\n      ]\n    })\n    const hiddenFlag = computed(() => {\n      return props.attrFlag ? (props.attrFlag === true ? 'hidden' : props.attrFlag) : false\n    })\n\n    watch([() => props.items?.length, () => props.maxCount], () => {\n      nextTick(refresh)\n    })\n\n    expose({ refresh })\n\n    onMounted(refresh)\n\n    function toggleDisplay(el: HTMLElement, show: boolean) {\n      if (hiddenFlag.value) {\n        show ? el.removeAttribute(hiddenFlag.value) : el.setAttribute(hiddenFlag.value, '')\n      } else {\n        if (show) {\n          el.style.display = ''\n        } else {\n          el.style.display = 'none'\n        }\n      }\n    }\n\n    function computeHorizontalMargin(el: HTMLElement) {\n      const style = getComputedStyle(el)\n      const marginLeft = parseFloat(style.marginLeft) || 0\n      const marginRight = parseFloat(style.marginRight) || 0\n\n      return marginLeft + marginRight\n    }\n\n    function computeHorizontalPadding(elOrStyle: HTMLElement | CSSStyleDeclaration) {\n      const style = elOrStyle instanceof Element ? getComputedStyle(elOrStyle) : elOrStyle\n      const paddingLeft = parseFloat(style.paddingLeft) || 0\n      const paddingRight = parseFloat(style.paddingRight) || 0\n\n      return paddingLeft + paddingRight\n    }\n\n    function computeOuterWidth(el: HTMLElement) {\n      return el.offsetWidth + computeHorizontalMargin(el)\n    }\n\n    let lastOverflow = false\n    let lastRestCount = restCount.value\n\n    function refresh() {\n      const counterEl = counter.value\n\n      if (!wrapper.value || !counterEl) return\n\n      toggleDisplay(counterEl, true)\n\n      const children = wrapper.value.children\n      const childCount = children.length\n\n      let overflow = false\n\n      if (props.maxCount > 0) {\n        for (let i = 0, len = childCount - 1; i < len; ++i) {\n          const child = children[i] as HTMLElement\n\n          child.style.display = i < props.maxCount ? '' : 'none'\n        }\n\n        if (props.maxCount > childCount - 1) {\n          toggleDisplay(counterEl, false)\n\n          restCount.value = 0\n        } else {\n          restCount.value = childCount - 1 - props.maxCount - (slots.suffix ? 1 : 0)\n          overflow = restCount.value > 0\n        }\n\n        postRefresh(overflow)\n        return\n      }\n\n      const suffixEl = suffix.value\n      const style = getComputedStyle(wrapper.value)\n      const wrapperWidth = wrapper.value.offsetWidth - computeHorizontalPadding(style)\n      const gap = parseFloat(style.columnGap) || 0\n      const childWidths: number[] = []\n\n      let totalWidth = suffixEl ? suffixEl.offsetWidth + computeHorizontalMargin(suffixEl) + gap : 0\n\n      const counterMargin = computeHorizontalMargin(counterEl)\n      const length = childCount - (suffixEl ? 2 : 1)\n\n      for (let i = 0; i < length; ++i) {\n        if (i < 0) continue\n\n        const child = children[i] as HTMLElement\n\n        if (overflow) {\n          toggleDisplay(child, false)\n          continue\n        } else {\n          toggleDisplay(child, true)\n        }\n\n        const childWidth = computeOuterWidth(child) + gap\n\n        totalWidth += childWidth\n        childWidths[i] = childWidth\n\n        if (totalWidth > wrapperWidth) {\n          for (let j = i; j >= 0; --j) {\n            restCount.value = length - j\n            totalWidth -= childWidths[j]\n\n            if (totalWidth + counterEl.offsetWidth + counterMargin <= wrapperWidth || !j) {\n              overflow = true\n              i = j - 1\n\n              if (suffixEl) {\n                suffixEl.style.maxWidth =\n                  i === -1 ? `${wrapperWidth - counterEl.offsetWidth}px` : ''\n              }\n\n              break\n            }\n          }\n        }\n      }\n\n      postRefresh(overflow)\n    }\n\n    function postRefresh(overflow: boolean) {\n      if (lastRestCount !== restCount.value) {\n        lastRestCount = restCount.value\n        emitEvent(props.onRestChange, restCount.value)\n      }\n\n      counter.value && toggleDisplay(counter.value, overflow)\n\n      if (overflow !== lastOverflow) {\n        lastOverflow = overflow\n        emitEvent(props.onToggle, overflow)\n      }\n    }\n\n    function syncCounterRef(el?: HTMLElement | null) {\n      if (el) {\n        counter.value = el.nextElementSibling as HTMLElement | undefined\n      } else {\n        counter.value = undefined\n      }\n    }\n\n    return () => {\n      const CustomTag = (props.tag || 'div') as any\n      const itemSlot = slots.default\n      const staticItem = props.static\n      const counterVNode = slots.counter?.({ count: restCount.value })[0] || null\n\n      const renderCounter = () =>\n        counterVNode?.type === TEXT_VNODE ? <span>{counterVNode}</span> : counterVNode\n      const render = () => (\n        <CustomTag {...attrs} ref={wrapper} class={className.value}>\n          {itemSlot && isDefined(props.items)\n            ? props.items.map((item, index) => {\n              const vnode = itemSlot({ item, index })[0]\n\n              if (staticItem) {\n                vnode.key = index\n\n                return vnode\n              }\n\n              return (\n                <ResizeObserver key={index} onResize={refresh}>\n                  {() => vnode}\n                </ResizeObserver>\n              )\n            })\n            : itemSlot?.()}\n          {counterVNode ? (\n            <Fragment ref={syncCounterRef as any}>{renderCounter()}</Fragment>\n          ) : (\n            <span ref={counter} style={{ display: 'inline-block' }}></span>\n          )}\n          {slots.suffix ? (\n            <ResizeObserver onResize={refresh}>\n              <div ref={suffix} class={nh.be('suffix')}>\n                {slots.suffix()}\n              </div>\n            </ResizeObserver>\n          ) : null}\n        </CustomTag>\n      )\n\n      if (import.meta.env.MODE === 'test') {\n        // It is difficult to test ResizeObserver in vitest, so directly rendering all items\n        return render()\n      }\n\n      return <ResizeObserver onResize={refresh}>{render()}</ResizeObserver>\n    }\n  },\n})\n"],"names":["_isSlot","s","Object","prototype","toString","call","_isVNode","TEXT_VNODE","createTextVNode","type","defineComponent","name","inheritAttrs","props","overflowProps","emits","setup","_props","attrs","slots","expose","useProps","items","default","static","tag","attrFlag","maxCount","nh","useNameHelper","restCount","ref","wrapper","counter","suffix","className","computed","b","bs","bm","inherit","hiddenFlag","watch","length","nextTick","refresh","onMounted","toggleDisplay","el","show","value","removeAttribute","setAttribute","style","display","computeHorizontalMargin","getComputedStyle","marginLeft","parseFloat","marginRight","computeHorizontalPadding","elOrStyle","Element","paddingLeft","paddingRight","computeOuterWidth","offsetWidth","lastOverflow","lastRestCount","counterEl","children","childCount","overflow","i","len","child","postRefresh","suffixEl","wrapperWidth","gap","columnGap","childWidths","totalWidth","counterMargin","childWidth","j","maxWidth","onRestChange","onToggle","syncCounterRef","nextElementSibling","undefined","_slot","CustomTag","itemSlot","staticItem","counterVNode","count","renderCounter","_createVNode","ResizeObserver","_mergeProps","isDefined","map","item","index","vnode","key","_Fragment","be"],"mappings":"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"}