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 { 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","_createVNode","ResizeObserver","_mergeProps","isDefined","map","item","index","vnode","key","be"],"mappings":"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"}