vexip-ui/lib/components/overflow/overflow.cjs.map

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

{"version":3,"file":"overflow.cjs","sources":["../../../components/overflow/overflow.tsx"],"sourcesContent":["import { ResizeObserver } from '@/components/resize-observer'\n\nimport { computed, defineComponent, nextTick, onMounted, ref, watch } from 'vue'\n\nimport { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'\nimport { isDefined } from '@vexip-ui/utils'\nimport { overflowProps } from './props'\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      const suffixEl = suffix.value\n      const length = childCount - (suffixEl ? 2 : 1)\n\n      let overflow = false\n\n      if (props.maxCount > 0) {\n        for (let i = 0; i < length; ++i) {\n          const child = children[i] as HTMLElement\n\n          child.style.display = i < props.maxCount ? '' : 'none'\n        }\n\n        if (props.maxCount >= length) {\n          toggleDisplay(counterEl, false)\n\n          restCount.value = 0\n        } else {\n          restCount.value = length - props.maxCount\n          overflow = restCount.value > 0\n        }\n\n        postRefresh(overflow)\n        return\n      }\n\n      const style = getComputedStyle(wrapper.value)\n      const wrapperWidth = wrapper.value.offsetWidth - computeHorizontalPadding(style)\n      const gap = parseFloat(style.columnGap) || 0\n      const counterMargin = computeHorizontalMargin(counterEl)\n      const childWidths: number[] = []\n\n      let totalWidth = suffixEl ? suffixEl.offsetWidth + computeHorizontalMargin(suffixEl) + gap : 0\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    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 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          {<span ref={counter}>{counterVNode}</span>}\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","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","suffixEl","overflow","i","child","postRefresh","wrapperWidth","gap","columnGap","counterMargin","childWidths","totalWidth","childWidth","j","maxWidth","onRestChange","onToggle","_slot","CustomTag","itemSlot","staticItem","counterVNode","count","render","_createVNode","_mergeProps","isDefined","map","item","index","vnode","key","ResizeObserver","be"],"mappings":"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"}