vexip-ui/lib/components/resize-observer/resize-observer.cjs.map

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

{"version":3,"file":"resize-observer.cjs","sources":["../../../components/resize-observer/resize-observer.ts"],"sourcesContent":["import {\n  defineComponent,\n  getCurrentInstance,\n  onBeforeUnmount,\n  onMounted,\n  renderSlot,\n  watch,\n} from 'vue'\n\nimport { emitEvent, useProps } from '@vexip-ui/config'\nimport { useResize } from '@vexip-ui/hooks'\nimport { throttle } from '@vexip-ui/utils'\nimport { resizeObserverProps } from './props'\n\nexport default defineComponent({\n  name: 'ResizeObserver',\n  props: resizeObserverProps,\n  setup(_props, { slots }) {\n    const props = useProps('resizeObserver', _props, {\n      throttle: {\n        default: false,\n        validator: value => typeof value === 'boolean' || value > 0,\n      },\n      disabled: false,\n    })\n\n    const { observeResize, unobserveResize } = useResize()\n\n    let observed = false\n\n    function handleResize(entry: ResizeObserverEntry) {\n      emitEvent(props.onResize, entry)\n    }\n\n    const throttleResize = props.throttle\n      ? throttle(handleResize, typeof props.throttle === 'boolean' ? 16 : props.throttle)\n      : handleResize\n\n    const instance = getCurrentInstance()\n\n    onMounted(() => {\n      watch(\n        () => props.disabled,\n        value => {\n          value ? unobserve() : observe()\n        },\n        { immediate: true, flush: 'post' },\n      )\n    })\n\n    onBeforeUnmount(() => {\n      if (observed) {\n        const el = getCurrentInstance()?.proxy?.$el as Element | null\n\n        if (el?.nextElementSibling) {\n          unobserveResize(el.nextElementSibling)\n        }\n      }\n    })\n\n    function observe() {\n      if (observed) return\n\n      const el = instance?.proxy?.$el as Element | null\n\n      if (el?.nextElementSibling) {\n        if (el.nextElementSibling !== el.nextSibling && el.nodeType === 3 && el.nodeValue !== '') {\n          return\n        }\n\n        observeResize(el.nextElementSibling, throttleResize)\n        observed = true\n      }\n    }\n\n    function unobserve() {\n      if (observed) {\n        const el = instance?.proxy?.$el as Element | null\n\n        if (el?.nextElementSibling) {\n          unobserveResize(el.nextElementSibling)\n        }\n\n        observed = false\n      }\n    }\n\n    return () => renderSlot(slots, 'default')\n  },\n})\n"],"names":["ResizeObserver","defineComponent","resizeObserverProps","_props","slots","props","useProps","value","observeResize","unobserveResize","useResize","observed","handleResize","entry","emitEvent","throttleResize","throttle","instance","getCurrentInstance","onMounted","watch","unobserve","observe","onBeforeUnmount","el","_a","renderSlot"],"mappings":"qJAcAA,EAAeC,kBAAgB,CAC7B,KAAM,iBACN,MAAOC,EAAA,oBACP,MAAMC,EAAQ,CAAE,MAAAC,GAAS,CACjB,MAAAC,EAAQC,EAAAA,SAAS,iBAAkBH,EAAQ,CAC/C,SAAU,CACR,QAAS,GACT,UAAWI,GAAS,OAAOA,GAAU,WAAaA,EAAQ,CAC5D,EACA,SAAU,EAAA,CACX,EAEK,CAAE,cAAAC,EAAe,gBAAAC,CAAgB,EAAIC,YAAU,EAErD,IAAIC,EAAW,GAEf,SAASC,EAAaC,EAA4B,CACtCC,YAAAT,EAAM,SAAUQ,CAAK,CAAA,CAGjC,MAAME,EAAiBV,EAAM,SACzBW,EAAAA,SAASJ,EAAc,OAAOP,EAAM,UAAa,UAAY,GAAKA,EAAM,QAAQ,EAChFO,EAEEK,EAAWC,EAAAA,mBAAmB,EAEpCC,EAAAA,UAAU,IAAM,CACdC,EAAA,MACE,IAAMf,EAAM,SACHE,GAAA,CACCA,EAAAc,IAAcC,EAAQ,CAChC,EACA,CAAE,UAAW,GAAM,MAAO,MAAO,CACnC,CAAA,CACD,EAEDC,EAAAA,gBAAgB,IAAM,SACpB,GAAIZ,EAAU,CACN,MAAAa,GAAKN,GAAAA,EAAAA,EAAAA,uBAAAA,YAAAA,EAAsB,QAAtBA,YAAAA,EAA6B,IAEpCM,GAAA,MAAAA,EAAI,oBACNf,EAAgBe,EAAG,kBAAkB,CACvC,CACF,CACD,EAED,SAASF,GAAU,OACjB,GAAIX,EAAU,OAER,MAAAa,GAAKC,EAAAR,GAAA,YAAAA,EAAU,QAAV,YAAAQ,EAAiB,IAE5B,GAAID,GAAA,MAAAA,EAAI,mBAAoB,CACtB,GAAAA,EAAG,qBAAuBA,EAAG,aAAeA,EAAG,WAAa,GAAKA,EAAG,YAAc,GACpF,OAGYhB,EAAAgB,EAAG,mBAAoBT,CAAc,EACxCJ,EAAA,EAAA,CACb,CAGF,SAASU,GAAY,OACnB,GAAIV,EAAU,CACN,MAAAa,GAAKC,EAAAR,GAAA,YAAAA,EAAU,QAAV,YAAAQ,EAAiB,IAExBD,GAAA,MAAAA,EAAI,oBACNf,EAAgBe,EAAG,kBAAkB,EAG5Bb,EAAA,EAAA,CACb,CAGK,MAAA,IAAMe,EAAAA,WAAWtB,EAAO,SAAS,CAAA,CAE5C,CAAC"}