@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
1 lines • 4.04 kB
Source Map (JSON)
{"version":3,"file":"resize-observer.mjs","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","_b","_a","renderSlot"],"mappings":";;;;;AAcA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAOC;AAAA,EACP,MAAMC,GAAQ,EAAE,OAAAC,KAAS;AACjB,UAAAC,IAAQC,EAAS,kBAAkBH,GAAQ;AAAA,MAC/C,UAAU;AAAA,QACR,SAAS;AAAA,QACT,WAAW,CAAAI,MAAS,OAAOA,KAAU,aAAaA,IAAQ;AAAA,MAC5D;AAAA,MACA,UAAU;AAAA,IAAA,CACX,GAEK,EAAE,eAAAC,GAAe,iBAAAC,EAAgB,IAAIC,EAAU;AAErD,QAAIC,IAAW;AAEf,aAASC,EAAaC,GAA4B;AACtC,MAAAC,EAAAT,EAAM,UAAUQ,CAAK;AAAA,IAAA;AAGjC,UAAME,IAAiBV,EAAM,WACzBW,EAASJ,GAAc,OAAOP,EAAM,YAAa,YAAY,KAAKA,EAAM,QAAQ,IAChFO,GAEEK,IAAWC,EAAmB;AAEpC,IAAAC,EAAU,MAAM;AACd,MAAAC;AAAA,QACE,MAAMf,EAAM;AAAA,QACZ,CAASE,MAAA;AACC,UAAAA,IAAAc,MAAcC,EAAQ;AAAA,QAChC;AAAA,QACA,EAAE,WAAW,IAAM,OAAO,OAAO;AAAA,MACnC;AAAA,IAAA,CACD,GAEDC,EAAgB,MAAM;;AACpB,UAAIZ,GAAU;AACN,cAAAa,KAAKC,KAAAC,IAAAR,QAAA,gBAAAQ,EAAsB,UAAtB,gBAAAD,EAA6B;AAExC,QAAID,KAAA,QAAAA,EAAI,sBACNf,EAAgBe,EAAG,kBAAkB;AAAA,MACvC;AAAA,IACF,CACD;AAED,aAASF,IAAU;;AACjB,UAAIX,EAAU;AAER,YAAAa,KAAKE,IAAAT,KAAA,gBAAAA,EAAU,UAAV,gBAAAS,EAAiB;AAE5B,UAAIF,KAAA,QAAAA,EAAI,oBAAoB;AACtB,YAAAA,EAAG,uBAAuBA,EAAG,eAAeA,EAAG,aAAa,KAAKA,EAAG,cAAc;AACpF;AAGY,QAAAhB,EAAAgB,EAAG,oBAAoBT,CAAc,GACxCJ,IAAA;AAAA,MAAA;AAAA,IACb;AAGF,aAASU,IAAY;;AACnB,UAAIV,GAAU;AACN,cAAAa,KAAKE,IAAAT,KAAA,gBAAAA,EAAU,UAAV,gBAAAS,EAAiB;AAE5B,QAAIF,KAAA,QAAAA,EAAI,sBACNf,EAAgBe,EAAG,kBAAkB,GAG5Bb,IAAA;AAAA,MAAA;AAAA,IACb;AAGK,WAAA,MAAMgB,EAAWvB,GAAO,SAAS;AAAA,EAAA;AAE5C,CAAC;"}