You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
9.7 KiB
1 line
9.7 KiB
{"ast":null,"code":"import { computed, unref, shallowRef, ref, watch, onBeforeUnmount } from 'vue';\nimport { createPopper } from '@popperjs/core';\nimport { fromPairs } from 'lodash-unified';\nconst usePopper = (referenceElementRef, popperElementRef, opts = {}) => {\n const stateUpdater = {\n name: \"updateState\",\n enabled: true,\n phase: \"write\",\n fn: ({\n state\n }) => {\n const derivedState = deriveState(state);\n Object.assign(states.value, derivedState);\n },\n requires: [\"computeStyles\"]\n };\n const options = computed(() => {\n const {\n onFirstUpdate,\n placement,\n strategy,\n modifiers\n } = unref(opts);\n return {\n onFirstUpdate,\n placement: placement || \"bottom\",\n strategy: strategy || \"absolute\",\n modifiers: [...(modifiers || []), stateUpdater, {\n name: \"applyStyles\",\n enabled: false\n }]\n };\n });\n const instanceRef = shallowRef();\n const states = ref({\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 const destroy = () => {\n if (!instanceRef.value) return;\n instanceRef.value.destroy();\n instanceRef.value = void 0;\n };\n watch(options, newOptions => {\n const instance = unref(instanceRef);\n if (instance) {\n instance.setOptions(newOptions);\n }\n }, {\n deep: true\n });\n watch([referenceElementRef, popperElementRef], ([referenceElement, popperElement]) => {\n destroy();\n if (!referenceElement || !popperElement) return;\n instanceRef.value = createPopper(referenceElement, popperElement, unref(options));\n });\n onBeforeUnmount(() => {\n destroy();\n });\n return {\n state: computed(() => {\n var _a;\n return {\n ...(((_a = unref(instanceRef)) == null ? void 0 : _a.state) || {})\n };\n }),\n styles: computed(() => unref(states).styles),\n attributes: computed(() => unref(states).attributes),\n update: () => {\n var _a;\n return (_a = unref(instanceRef)) == null ? void 0 : _a.update();\n },\n forceUpdate: () => {\n var _a;\n return (_a = unref(instanceRef)) == null ? void 0 : _a.forceUpdate();\n },\n instanceRef: computed(() => unref(instanceRef))\n };\n};\nfunction deriveState(state) {\n const elements = Object.keys(state.elements);\n const styles = fromPairs(elements.map(element => [element, state.styles[element] || {}]));\n const attributes = fromPairs(elements.map(element => [element, state.attributes[element]]));\n return {\n styles,\n attributes\n };\n}\nexport { usePopper };","map":{"version":3,"names":["usePopper","referenceElementRef","popperElementRef","opts","stateUpdater","name","enabled","phase","fn","state","derivedState","deriveState","Object","assign","states","value","requires","options","computed","onFirstUpdate","placement","strategy","modifiers","unref","instanceRef","shallowRef","ref","styles","popper","position","left","top","arrow","attributes","destroy","watch","newOptions","instance","setOptions","deep","referenceElement","popperElement","createPopper","onBeforeUnmount","_a","update","forceUpdate","elements","keys","fromPairs","map","element"],"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"],"mappings":"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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]} |