UNPKG

element-plus

Version:

A Component Library for Vue 3

1 lines 6.53 kB
{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-popper/index.ts"],"sourcesContent":["import { computed, onBeforeUnmount, ref, shallowRef, unref, watch } from 'vue'\nimport { createPopper } from '@popperjs/core'\nimport { fromPairs } from 'lodash-unified'\n\nimport type { Ref } from 'vue'\nimport type {\n Instance,\n Modifier,\n Options,\n State,\n VirtualElement,\n} from '@popperjs/core'\n\ntype ElementType = HTMLElement | undefined\ntype ReferenceElement = ElementType | VirtualElement\nexport type PartialOptions = Partial<Options>\n\nexport const usePopper = (\n referenceElementRef: Ref<ReferenceElement>,\n popperElementRef: Ref<ElementType>,\n opts: Ref<PartialOptions> | PartialOptions = {} as PartialOptions\n) => {\n const stateUpdater = {\n name: 'updateState',\n enabled: true,\n phase: 'write',\n fn: ({ state }) => {\n const derivedState = deriveState(state)\n\n Object.assign(states.value, derivedState)\n },\n requires: ['computeStyles'],\n } as Modifier<'updateState', any>\n\n const options = computed<Options>(() => {\n const { onFirstUpdate, placement, strategy, modifiers } = unref(opts)\n\n return {\n onFirstUpdate,\n placement: placement || 'bottom',\n strategy: strategy || 'absolute',\n modifiers: [\n ...(modifiers || []),\n stateUpdater,\n { name: 'applyStyles', enabled: false },\n ],\n }\n })\n\n const instanceRef = shallowRef<Instance | undefined>()\n const states = ref<Pick<State, 'styles' | 'attributes'>>({\n styles: {\n popper: {\n position: unref(options).strategy,\n left: '0',\n top: '0',\n },\n arrow: {\n position: 'absolute',\n },\n },\n attributes: {},\n })\n\n const destroy = () => {\n if (!instanceRef.value) return\n\n instanceRef.value.destroy()\n instanceRef.value = undefined\n }\n\n watch(\n options,\n (newOptions) => {\n const instance = unref(instanceRef)\n if (instance) {\n instance.setOptions(newOptions)\n }\n },\n {\n deep: true,\n }\n )\n\n watch(\n [referenceElementRef, popperElementRef],\n ([referenceElement, popperElement]) => {\n destroy()\n if (!referenceElement || !popperElement) return\n\n instanceRef.value = createPopper(\n referenceElement,\n popperElement,\n unref(options)\n )\n }\n )\n\n onBeforeUnmount(() => {\n destroy()\n })\n\n return {\n state: computed(() => ({ ...(unref(instanceRef)?.state || {}) })),\n styles: computed(() => unref(states).styles),\n attributes: computed(() => unref(states).attributes),\n update: () => unref(instanceRef)?.update(),\n forceUpdate: () => unref(instanceRef)?.forceUpdate(),\n // Preventing end users from modifying the instance.\n instanceRef: computed(() => unref(instanceRef)),\n }\n}\n\nfunction deriveState(state: State) {\n const elements = Object.keys(state.elements) as unknown as Array<\n keyof State['elements']\n >\n\n const styles = fromPairs(\n elements.map(\n (element) =>\n [element, state.styles[element] || {}] as [\n string,\n State['styles'][keyof State['styles']],\n ]\n )\n )\n\n const attributes = fromPairs(\n elements.map(\n (element) =>\n [element, state.attributes[element]] as [\n string,\n State['attributes'][keyof State['attributes']],\n ]\n )\n )\n\n return {\n styles,\n attributes,\n }\n}\n\nexport type UsePopperReturn = ReturnType<typeof usePopper>\n"],"names":[],"mappings":"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"}