| 1 |
- {"version":3,"file":"index.mjs","names":["isClient","arrowCore"],"sources":["../../../../../packages/hooks/use-floating/index.ts"],"sourcesContent":["import { isRef, onMounted, ref, unref, watchEffect } from 'vue'\nimport { unrefElement } from '@vueuse/core'\nimport { isNil } from 'lodash-unified'\nimport { arrow as arrowCore, computePosition } from '@floating-ui/dom'\nimport { buildProps, isClient, keysOf } from '@element-plus/utils'\n\nimport type { Ref, ToRefs } from 'vue'\nimport type {\n ComputePositionReturn,\n Middleware,\n Placement,\n SideObject,\n Strategy,\n VirtualElement,\n} from '@floating-ui/dom'\n\nexport const useFloatingProps = buildProps({} as const)\n\nexport type UseFloatingProps = ToRefs<{\n middleware: Array<Middleware>\n placement: Placement\n strategy: Strategy\n}>\n\ntype ElementRef = Parameters<typeof unrefElement>['0']\n\nconst unrefReference = (\n elRef: ElementRef | Ref<VirtualElement | undefined>\n) => {\n if (!isClient) return\n if (!elRef) return elRef\n const unrefEl = unrefElement(elRef as ElementRef)\n if (unrefEl) return unrefEl\n return isRef(elRef) ? unrefEl : (elRef as VirtualElement)\n}\n\nexport const getPositionDataWithUnit = <T extends Record<string, number>>(\n record: T | undefined,\n key: keyof T\n) => {\n const value = record?.[key]\n return isNil(value) ? '' : `${value}px`\n}\n\nexport const useFloating = ({\n middleware,\n placement,\n strategy,\n}: UseFloatingProps) => {\n const referenceRef = ref<HTMLElement | VirtualElement>()\n const contentRef = ref<HTMLElement>()\n const x = ref<number>()\n const y = ref<number>()\n const middlewareData = ref<ComputePositionReturn['middlewareData']>({})\n\n const states = {\n x,\n y,\n placement,\n strategy,\n middlewareData,\n } as const\n\n const update = async () => {\n if (!isClient) return\n\n const referenceEl = unrefReference(referenceRef)\n const contentEl = unrefElement(contentRef)\n if (!referenceEl || !contentEl) return\n\n const data = await computePosition(referenceEl, contentEl, {\n placement: unref(placement),\n strategy: unref(strategy),\n middleware: unref(middleware),\n })\n\n keysOf(states).forEach((key) => {\n states[key].value = data[key]\n })\n }\n\n onMounted(() => {\n watchEffect(() => {\n update()\n })\n })\n\n return {\n ...states,\n update,\n referenceRef,\n contentRef,\n }\n}\n\nexport type ArrowMiddlewareProps = {\n arrowRef: Ref<HTMLElement | null | undefined>\n padding?: number | SideObject\n}\n\nexport const arrowMiddleware = ({\n arrowRef,\n padding,\n}: ArrowMiddlewareProps): Middleware => {\n return {\n name: 'arrow',\n options: {\n element: arrowRef,\n padding,\n },\n\n fn(args) {\n const arrowEl = unref(arrowRef)\n if (!arrowEl) return {}\n\n return arrowCore({\n element: arrowEl,\n padding,\n }).fn(args)\n },\n }\n}\n"],"mappings":";;;;;;;;AAgBA,MAAa,mBAAmB,WAAW,CAAC,CAAU;AAUtD,MAAM,kBACJ,UACG;CACH,IAAI,CAACA,YAAU;CACf,IAAI,CAAC,OAAO,OAAO;CACnB,MAAM,UAAU,aAAa,KAAmB;CAChD,IAAI,SAAS,OAAO;CACpB,OAAO,MAAM,KAAK,IAAI,UAAW;AACnC;AAEA,MAAa,2BACX,QACA,QACG;CACH,MAAM,QAAQ,SAAS;CACvB,OAAO,MAAM,KAAK,IAAI,KAAK,GAAG,MAAM;AACtC;AAEA,MAAa,eAAe,EAC1B,YACA,WACA,eACsB;CACtB,MAAM,eAAe,IAAkC;CACvD,MAAM,aAAa,IAAiB;CAKpC,MAAM,SAAS;EACb,GALQ,IAKR;EACA,GALQ,IAKR;EACA;EACA;EACA,gBAPqB,IAA6C,CAAC,CAOtD;CACf;CAEA,MAAM,SAAS,YAAY;EACzB,IAAI,CAACA,YAAU;EAEf,MAAM,cAAc,eAAe,YAAY;EAC/C,MAAM,YAAY,aAAa,UAAU;EACzC,IAAI,CAAC,eAAe,CAAC,WAAW;EAEhC,MAAM,OAAO,MAAM,gBAAgB,aAAa,WAAW;GACzD,WAAW,MAAM,SAAS;GAC1B,UAAU,MAAM,QAAQ;GACxB,YAAY,MAAM,UAAU;EAC9B,CAAC;EAED,OAAO,MAAM,CAAC,CAAC,SAAS,QAAQ;GAC9B,OAAO,IAAI,CAAC,QAAQ,KAAK;EAC3B,CAAC;CACH;CAEA,gBAAgB;EACd,kBAAkB;GAChB,OAAO;EACT,CAAC;CACH,CAAC;CAED,OAAO;EACL,GAAG;EACH;EACA;EACA;CACF;AACF;AAOA,MAAa,mBAAmB,EAC9B,UACA,cACsC;CACtC,OAAO;EACL,MAAM;EACN,SAAS;GACP,SAAS;GACT;EACF;EAEA,GAAG,MAAM;GACP,MAAM,UAAU,MAAM,QAAQ;GAC9B,IAAI,CAAC,SAAS,OAAO,CAAC;GAEtB,OAAOC,MAAU;IACf,SAAS;IACT;GACF,CAAC,CAAC,CAAC,GAAG,IAAI;EACZ;CACF;AACF"}
|
