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 {\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","render","_mergeProps","isDefined","map","item","index","vnode","key","ResizeObserver","_Fragment","be"],"mappings":"0NAeuC,SAAAA,EAAAC,EAAA,CAAA,OAAA,OAAAA,GAAA,YAAAC,OAAAC,UAAAC,SAAAC,KAAAJ,CAAA,IAAAK,mBAAAA,CAAAA,EAAAA,QAAAL,CAAA,CAAA,CAEvC,MAAMM,EAAaC,EAAAA,gBAAgB,EAAE,EAAEC,OAERC,kBAAA,CAC7BC,KAAM,WACNC,aAAc,GACdC,MAAOC,EAAAA,cACPC,MAAO,CAAE,EACTC,MAAMC,EAAQ,CAAEC,MAAAA,EAAOC,MAAAA,EAAOC,OAAAA,CAAAA,EAAU,CAChCP,MAAAA,EAAQQ,EAAAA,SAAS,WAAYJ,EAAQ,CACzCK,MAAO,CACLC,QAAS,KACTC,OAAQ,EACV,EACAC,IAAK,MACLC,SAAU,GACVF,OAAQ,GACRG,SAAU,CAAA,CACX,EAEKC,EAAKC,gBAAc,UAAU,EAC7BC,EAAYC,MAAI,CAAC,EAEjBC,EAAUD,EAAAA,IAAiB,EAC3BE,EAAUF,EAAAA,IAAiB,EAC3BG,EAASH,EAAAA,IAAiB,EAE1BI,EAAYC,EAAAA,SAAS,IAClB,CACLR,EAAGS,EAAAA,EACHT,EAAGU,GAAG,MAAM,EACZ,CACE,CAACV,EAAGW,GAAG,SAAS,CAAC,EAAG1B,EAAM2B,QAC1B,CAACZ,EAAGW,GAAG,QAAQ,CAAC,EAAG1B,EAAMc,SAAW,CAAA,CACrC,CAEJ,EACKc,EAAaL,EAAAA,SAAS,IACnBvB,EAAMa,SAAYb,EAAMa,WAAa,GAAO,SAAWb,EAAMa,SAAY,EACjF,EAEKgB,QAAA,CAAC,IAAM7B,OAAAA,OAAAA,EAAAA,EAAMS,QAANT,YAAAA,EAAa8B,QAAQ,IAAM9B,EAAMc,QAAQ,EAAG,IAAM,CAC7DiB,EAAAA,SAASC,CAAO,CAAA,CACjB,EAEMzB,EAAA,CAAEyB,QAAAA,CAAAA,CAAS,EAElBC,EAAAA,UAAUD,CAAO,EAERE,SAAAA,EAAcC,EAAiBC,EAAe,CACjDR,EAAWS,MACNF,EAAAA,EAAGG,gBAAgBV,EAAWS,KAAK,EAAIF,EAAGI,aAAaX,EAAWS,MAAO,EAAE,EAE9ED,EACFD,EAAGK,MAAMC,QAAU,GAEnBN,EAAGK,MAAMC,QAAU,MAEvB,CAGF,SAASC,EAAwBP,EAAiB,CAC1CK,MAAAA,EAAQG,iBAAiBR,CAAE,EAC3BS,EAAaC,WAAWL,EAAMI,UAAU,GAAK,EAC7CE,EAAcD,WAAWL,EAAMM,WAAW,GAAK,EAErD,OAAOF,EAAaE,CAAAA,CAGtB,SAASC,EAAyBC,EAA8C,CAC9E,MAAMR,EAAQQ,aAAqBC,QAAUN,iBAAiBK,CAAS,EAAIA,EACrEE,EAAcL,WAAWL,EAAMU,WAAW,GAAK,EAC/CC,EAAeN,WAAWL,EAAMW,YAAY,GAAK,EAEvD,OAAOD,EAAcC,CAAAA,CAGvB,SAASC,EAAkBjB,EAAiB,CACnCA,OAAAA,EAAGkB,YAAcX,EAAwBP,CAAE,CAAA,CAGpD,IAAImB,EAAe,GACfC,EAAgBtC,EAAUoB,MAE9B,SAASL,GAAU,CACjB,MAAMwB,EAAYpC,EAAQiB,MAE1B,GAAI,CAAClB,EAAQkB,OAAS,CAACmB,EAAW,OAElCtB,EAAcsB,EAAW,EAAI,EAEvBC,MAAAA,EAAWtC,EAAQkB,MAAMoB,SACzBC,EAAaD,EAAS3B,OAE5B,IAAI6B,EAAW,GAEX3D,GAAAA,EAAMc,SAAW,EAAG,CACb8C,QAAAA,EAAI,EAAGC,EAAMH,EAAa,EAAGE,EAAIC,EAAK,EAAED,EAAG,CAC5CE,MAAAA,EAAQL,EAASG,CAAC,EAExBE,EAAMtB,MAAMC,QAAUmB,EAAI5D,EAAMc,SAAW,GAAK,MAAA,CAG9Cd,EAAMc,SAAW4C,EAAa,GAChCxB,EAAcsB,EAAW,EAAK,EAE9BvC,EAAUoB,MAAQ,IAElBpB,EAAUoB,MAAQqB,EAAa,EAAI1D,EAAMc,UAAYR,EAAMe,OAAS,EAAI,GACxEsC,EAAW1C,EAAUoB,MAAQ,GAG/B0B,EAAYJ,CAAQ,EACpB,MAAA,CAGF,MAAMK,EAAW3C,EAAOgB,MAClBG,EAAQG,iBAAiBxB,EAAQkB,KAAK,EACtC4B,EAAe9C,EAAQkB,MAAMgB,YAAcN,EAAyBP,CAAK,EACzE0B,EAAMrB,WAAWL,EAAM2B,SAAS,GAAK,EACrCC,EAAwB,CAAE,EAEhC,IAAIC,EAAaL,EAAWA,EAASX,YAAcX,EAAwBsB,CAAQ,EAAIE,EAAM,EAEvFI,MAAAA,EAAgB5B,EAAwBc,CAAS,EACjD1B,EAAS4B,GAAcM,EAAW,EAAI,GAE5C,QAASJ,EAAI,EAAGA,EAAI9B,EAAQ,EAAE8B,EAAG,CAC/B,GAAIA,EAAI,EAAG,SAELE,MAAAA,EAAQL,EAASG,CAAC,EAExB,GAAID,EAAU,CACZzB,EAAc4B,EAAO,EAAK,EAC1B,QAAA,MAEA5B,EAAc4B,EAAO,EAAI,EAGrBS,MAAAA,EAAanB,EAAkBU,CAAK,EAAII,EAK9C,GAHcK,GAAAA,EACdH,EAAYR,CAAC,EAAIW,EAEbF,EAAaJ,GACf,QAASO,EAAIZ,EAAGY,GAAK,EAAG,EAAEA,EAIxB,GAHAvD,EAAUoB,MAAQP,EAAS0C,EAC3BH,GAAcD,EAAYI,CAAC,EAEvBH,EAAab,EAAUH,YAAciB,GAAiBL,GAAgB,CAACO,EAAG,CACjEb,EAAA,GACXC,EAAIY,EAAI,EAEJR,IACOxB,EAAAA,MAAMiC,SACbb,IAAM,GAAK,GAAGK,EAAeT,EAAUH,WAAW,KAAO,IAG7D,KAAA,EAGN,CAGFU,EAAYJ,CAAQ,CAAA,CAGtB,SAASI,EAAYJ,EAAmB,CAClCJ,IAAkBtC,EAAUoB,QAC9BkB,EAAgBtC,EAAUoB,MAChBrC,EAAAA,UAAAA,EAAM0E,aAAczD,EAAUoB,KAAK,GAG/CjB,EAAQiB,OAASH,EAAcd,EAAQiB,MAAOsB,CAAQ,EAElDA,IAAaL,IACAK,EAAAA,EACL3D,YAAAA,EAAM2E,SAAUhB,CAAQ,EACpC,CAGF,SAASiB,EAAezC,EAAyB,CAC3CA,EACFf,EAAQiB,MAAQF,EAAG0C,mBAEnBzD,EAAQiB,MAAQyC,MAClB,CAGF,MAAO,IAAM,OAAAC,IAAAA,EACLC,MAAAA,EAAahF,EAAMY,KAAO,MAC1BqE,EAAW3E,EAAMI,QACjBwE,EAAalF,EAAMW,OACnBwE,IAAe7E,EAAAA,EAAMc,UAANd,YAAAA,EAAAA,KAAAA,EAAgB,CAAE8E,MAAOnE,EAAUoB,KAAAA,GAAS,KAAM,KAEjEgD,EAAgBA,KACpBF,GAAAA,YAAAA,EAAcvF,QAASF,EAAU4F,cAAUH,OAAAA,KAAAA,CAAAA,CAAY,GAAWA,EAC9DI,EAASA,IAAAD,EAAAA,YAAAN,EAAAQ,EAAAA,WACEnF,EAAK,CAAA,IAAOc,EAAO,MAASG,EAAUe,KAAAA,CAAK,EAAA,CAAA3B,QAAAA,IACvDuE,CAAAA,GAAYQ,EAAAA,UAAUzF,EAAMS,KAAK,EAC9BT,EAAMS,MAAMiF,IAAI,CAACC,EAAMC,IAAU,CACjC,MAAMC,EAAQZ,EAAS,CAAEU,KAAAA,EAAMC,MAAAA,CAAO,CAAA,EAAE,CAAC,EAEzC,OAAIV,GACFW,EAAMC,IAAMF,EAELC,GAGTP,EAAAA,YAAAS,EAAA,CAAA,IACuBH,EAAK,SAAY5D,CAAAA,EAAO,CAAAtB,QAC1CA,IAAMmF,CAAAA,CAAK,CAGjB,CAAA,EACCZ,GAAAA,YAAAA,IACHE,EAAYG,EAAAA,YAAAU,EAAAA,SAAA,CAAA,IACIpB,GAAc,CAAUS,EAAe,CAAA,CAAA,EAAAC,EAAAA,YAAA,OAAA,CAAA,IAE3ClE,EAAO,MAAS,CAAEqB,QAAS,cAAA,GAAgB,IAAA,EAEvDnC,EAAMe,OAAMiE,EAAAA,YAAAS,EAAA,CAAA,SACe/D,CAAAA,EAAO,CAAAtB,QAAAA,IAAA,CAAA4E,EAAAA,YAAA,MAAA,CAAA,IACrBjE,EAAM,MAASN,EAAGkF,GAAG,QAAQ,CAAA,EAAC,CACrC3F,EAAMe,OAAO,CAAC,CAAA,CAAA,CAAA,CAAA,EAGjB,IAAI,CAAA,CAEX,EAOD,OAAAiE,EAAAA,YAAAS,EAAA,CAAA,SAAiC/D,GAAO7C,EAAA4F,EAAGQ,EAAQ,CAAA,EAAAR,EAAA,CAAArE,QAAAA,IAAA,CAAAqE,CAAA,CAAA,CAAA,CACrD,CAAA,CAEJ,CAAC"}