element-plus
Version:
A Component Library for Vue 3
1 lines • 4.96 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","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"],"names":["arrowCore"],"mappings":";;;;;;;AAgBO,MAAM,gBAAA,GAAmB,UAAA,CAAW,EAAW;AAUtD,MAAM,cAAA,GAAiB,CACrB,KAAA,KACG;AACH,EAAA,IAAI,CAAC,QAAA,EAAU;AACf,EAAA,IAAI,CAAC,OAAO,OAAO,KAAA;AACnB,EAAA,MAAM,OAAA,GAAU,aAAa,KAAmB,CAAA;AAChD,EAAA,IAAI,SAAS,OAAO,OAAA;AACpB,EAAA,OAAO,KAAA,CAAM,KAAK,CAAA,GAAI,OAAA,GAAW,KAAA;AACnC,CAAA;AAEO,MAAM,uBAAA,GAA0B,CACrC,MAAA,EACA,GAAA,KACG;AACH,EAAA,MAAM,QAAQ,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAS,GAAA,CAAA;AACvB,EAAA,OAAO,KAAA,CAAM,KAAK,CAAA,GAAI,EAAA,GAAK,GAAG,KAAK,CAAA,EAAA,CAAA;AACrC;AAEO,MAAM,cAAc,CAAC;AAAA,EAC1B,UAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,KAAwB;AACtB,EAAA,MAAM,eAAe,GAAA,EAAkC;AACvD,EAAA,MAAM,aAAa,GAAA,EAAiB;AACpC,EAAA,MAAM,IAAI,GAAA,EAAY;AACtB,EAAA,MAAM,IAAI,GAAA,EAAY;AACtB,EAAA,MAAM,cAAA,GAAiB,GAAA,CAA6C,EAAE,CAAA;AAEtE,EAAA,MAAM,MAAA,GAAS;AAAA,IACb,CAAA;AAAA,IACA,CAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,MAAM,SAAS,YAAY;AACzB,IAAA,IAAI,CAAC,QAAA,EAAU;AAEf,IAAA,MAAM,WAAA,GAAc,eAAe,YAAY,CAAA;AAC/C,IAAA,MAAM,SAAA,GAAY,aAAa,UAAU,CAAA;AACzC,IAAA,IAAI,CAAC,WAAA,IAAe,CAAC,SAAA,EAAW;AAEhC,IAAA,MAAM,IAAA,GAAO,MAAM,eAAA,CAAgB,WAAA,EAAa,SAAA,EAAW;AAAA,MACzD,SAAA,EAAW,MAAM,SAAS,CAAA;AAAA,MAC1B,QAAA,EAAU,MAAM,QAAQ,CAAA;AAAA,MACxB,UAAA,EAAY,MAAM,UAAU;AAAA,KAC7B,CAAA;AAED,IAAA,MAAA,CAAO,MAAM,CAAA,CAAE,OAAA,CAAQ,CAAC,GAAA,KAAQ;AAC9B,MAAA,MAAA,CAAO,GAAG,CAAA,CAAE,KAAA,GAAQ,IAAA,CAAK,GAAG,CAAA;AAAA,IAC9B,CAAC,CAAA;AAAA,EACH,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,WAAA,CAAY,MAAM;AAChB,MAAA,MAAA,EAAO;AAAA,IACT,CAAC,CAAA;AAAA,EACH,CAAC,CAAA;AAED,EAAA,OAAO;AAAA,IACL,GAAG,MAAA;AAAA,IACH,MAAA;AAAA,IACA,YAAA;AAAA,IACA;AAAA,GACF;AACF;AAOO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,QAAA;AAAA,EACA;AACF,CAAA,KAAwC;AACtC,EAAA,OAAO;AAAA,IACL,IAAA,EAAM,OAAA;AAAA,IACN,OAAA,EAAS;AAAA,MACP,OAAA,EAAS,QAAA;AAAA,MACT;AAAA,KACF;AAAA,IAEA,GAAG,IAAA,EAAM;AACP,MAAA,MAAM,OAAA,GAAU,MAAM,QAAQ,CAAA;AAC9B,MAAA,IAAI,CAAC,OAAA,EAAS,OAAO,EAAC;AAEtB,MAAA,OAAOA,KAAA,CAAU;AAAA,QACf,OAAA,EAAS,OAAA;AAAA,QACT;AAAA,OACD,CAAA,CAAE,EAAA,CAAG,IAAI,CAAA;AAAA,IACZ;AAAA,GACF;AACF;;;;"}