label-print-design/es/components/my/popover/my-popover.vue2.mjs.map

操作简单，组件丰富的一站式打印解决方案打印设计器

{"version":3,"file":"my-popover.vue2.mjs","sources":["../../../../../../src/components/my/popover/my-popover.vue"],"sourcesContent":["<template>\n    <div class=\"my-popover_reference\"\n         :class=\"[props.class]\"\n         ref=\"referenceRef\"\n         @mouseenter=\"mouseenter\"\n         @mouseleave=\"mouseleave\"\n         @click.stop.prevent=\"togglePopperShow\">\n        <slot name=\"reference\"></slot>\n    </div>\n    <teleport to=\".my-popover_container\">\n        <div class=\"my-popover_content\"\n             ref=\"contentRef\"\n             :style=\"styles\"\n             v-show=\"data.visible\">\n            <slot></slot>\n        </div>\n    </teleport>\n</template>\n\n<script setup lang=\"ts\">\nimport { nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue-demi';\nimport { createPopper, detectOverflow, Modifier, State } from '@popperjs/core';\nimport { onClickOutside } from '@vueuse/core';\n//@ts-ignore\nimport { Placement } from '@popperjs/core/lib/enums';\nimport { fromPairs } from 'lodash';\n\ndefineExpose({ close });\nconst emit = defineEmits(['show']);\n\nconst props = withDefaults(defineProps<{\n    disabled?: boolean\n    placement?: Placement\n    trigger?: 'hover' | 'click'\n    class?: string\n}>(), {\n    placement: 'top',\n    trigger: 'hover'\n});\n\nconst data = reactive({\n    visible: false\n});\n\nconst referenceRef = ref<HTMLElement>();\nconst contentRef = ref<HTMLElement>();\nlet popperInstance: any = null;\nconst styles = ref({});\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\nconst stateUpdater = {\n    name: 'updateState',\n    enabled: true,\n    phase: 'write',\n    fn: ({ state }) => {\n        if (!data.visible) {\n            return;\n        }\n        \n        const sss = detectOverflow(state, {\n            // elementContext: 'reference', // 'popper' by default\n        });\n        console.log(sss);\n        const derivedState = deriveState(state);\n        // console.log(derivedState);\n        Object.assign(styles.value, derivedState.styles.popper);\n        // console.log(state.elements.popper);\n        // const rect = state.elements.popper.getBoundingClientRect();\n        // console.log(styles.value);\n        // console.log(state.elements.popper.offsetLeft);\n        // const scroll = state.scrollParents.reference[0];\n        // console.log(scroll);\n        // const scrollElementRect = (scroll as Element).getBoundingClientRect();\n        // console.log(scrollElementRect);\n        // console.log(document.body.clientWidth, rect.x + rect.width, styles.value.transform, rect);\n        // console.log(scrollElementRect.right, rect.right);\n        // if (scrollElementRect.right < rect.right) {\n        //     //\n        //     console.log(scrollElementRect.right);\n        //\n        //     // styles.value['transform'] = `translate3d(0px, 309px, 0)`;\n        // }\n        //\n        \n        // console.log(derivedState);\n        // Object.assign(states.value, derivedState)\n    },\n    requires: ['computeStyles']\n} as Modifier<'updateState', any>;\n\n// 创建 popper 实例\nconst createPopperInstance = () => {\n    popperInstance = createPopper(referenceRef.value!, contentRef.value!, {\n        modifiers: [\n            {\n                name: 'preventOverflow',\n                options: {\n                    altAxis: true,\n                    mainAxis: true,\n                    tether: false\n                    // boundary: document, // true by default\n                    // rootBoundary: document // true by default\n                }\n            },\n            {\n                name: 'flip',\n                enabled: false,\n                options: {\n                    fallbackPlacements: ['top', 'right']\n                }\n            },\n            {\n                name: 'offset',\n                options: {\n                    // 偏移值 左右，上下\n                    offset: [0, 10]\n                }\n            },\n            // stateUpdater,\n            {\n                name: 'arrow',\n                options: {\n                    element: '.popper-arrow'\n                }\n            }\n            // { name: 'applyStyles', enabled: false }\n        \n        ],\n        placement: props.placement\n    });\n    nextTick(() => {\n        // 异步更新\n        if (popperInstance != null) {\n            popperInstance.update();\n        }\n    });\n};\n\n\n// 销毁 popper 实例\nconst destroyPopperInstance = () => {\n    popperInstance?.destroy?.();\n    popperInstance = null;\n};\n\nwatch(() => data.visible, (visible, _o) => {\n    if (visible) {\n        createPopperInstance();\n        // emit('show');\n    } else {\n        // emit('hide');\n    }\n});\n\nonMounted(() => {\n    createPopperInstance();\n    // contentRef.value!.style.minWidth = referenceRef.value!.offsetWidth + 'px';\n});\n\nonUnmounted(() => {\n    destroyPopperInstance();\n});\nlet stopHandle: ReturnType<typeof onClickOutside>;\n\nfunction mouseenter() {\n    if (props.trigger != 'hover') {\n        return;\n    }\n    show();\n}\n\nfunction mouseleave() {\n    if (props.trigger != 'hover') {\n        return;\n    }\n    close();\n}\n\nconst togglePopperShow = () => {\n    if (props.trigger != 'click') {\n        return;\n    }\n    if (props.disabled) {\n        return;\n    }\n    \n    if (data.visible) {\n        // close\n        onClose();\n    } else {\n        if (stopHandle == null) {\n            stopHandle = onClickOutside(contentRef, () => {\n                close();\n            }, {\n                ignore: [referenceRef]\n            });\n        }\n        show();\n    }\n};\n\nfunction onClose() {\n    stopHandle?.();\n    stopHandle = null! as any;\n    data.visible = false;\n}\n\nfunction close() {\n    onClose();\n}\n\nfunction show() {\n    emit('show');\n    data.visible = true;\n}\n\nwatch(\n    () => data.visible,\n    (val) => {\n        if (!val) {\n            onClose();\n        }\n    },\n    {\n        flush: 'post'\n    }\n);\n</script>\n"],"names":["styles"],"mappings":"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"}