@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
1 lines • 4.23 kB
Source Map (JSON)
{"version":3,"file":"resize-observer.mjs","sources":["../../../components/resize-observer/resize-observer.ts"],"sourcesContent":["import {\r\n defineComponent,\r\n getCurrentInstance,\r\n onBeforeUnmount,\r\n onMounted,\r\n renderSlot,\r\n watch,\r\n} from 'vue'\r\n\r\nimport { emitEvent, useProps } from '@vexip-ui/config'\r\nimport { useResize } from '@vexip-ui/hooks'\r\nimport { throttle } from '@vexip-ui/utils'\r\nimport { resizeObserverProps } from './props'\r\n\r\nexport default defineComponent({\r\n name: 'ResizeObserver',\r\n props: resizeObserverProps,\r\n setup(_props, { slots }) {\r\n const props = useProps('resizeObserver', _props, {\r\n throttle: {\r\n default: false,\r\n validator: value => typeof value === 'boolean' || value > 0,\r\n },\r\n disabled: false,\r\n })\r\n\r\n const { observeResize, unobserveResize } = useResize()\r\n\r\n let observed = false\r\n\r\n function handleResize(entry: ResizeObserverEntry) {\r\n emitEvent(props.onResize, entry)\r\n }\r\n\r\n const throttleResize = props.throttle\r\n ? throttle(handleResize, typeof props.throttle === 'boolean' ? 16 : props.throttle)\r\n : handleResize\r\n\r\n const instance = getCurrentInstance()\r\n\r\n onMounted(() => {\r\n watch(\r\n () => props.disabled,\r\n value => {\r\n value ? unobserve() : observe()\r\n },\r\n { immediate: true, flush: 'post' },\r\n )\r\n })\r\n\r\n onBeforeUnmount(() => {\r\n if (observed) {\r\n const el = getCurrentInstance()?.proxy?.$el as Element | null\r\n\r\n if (el?.nextElementSibling) {\r\n unobserveResize(el.nextElementSibling)\r\n }\r\n }\r\n })\r\n\r\n function observe() {\r\n if (observed) return\r\n\r\n const el = instance?.proxy?.$el as Element | null\r\n\r\n if (el?.nextElementSibling) {\r\n if (el.nextElementSibling !== el.nextSibling && el.nodeType === 3 && el.nodeValue !== '') {\r\n return\r\n }\r\n\r\n observeResize(el.nextElementSibling, throttleResize)\r\n observed = true\r\n }\r\n }\r\n\r\n function unobserve() {\r\n if (observed) {\r\n const el = instance?.proxy?.$el as Element | null\r\n\r\n if (el?.nextElementSibling) {\r\n unobserveResize(el.nextElementSibling)\r\n }\r\n\r\n observed = false\r\n }\r\n }\r\n\r\n return () => renderSlot(slots, 'default')\r\n },\r\n})\r\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;"}