UNPKG

element-plus

Version:

A Component Library for Vue 3

1 lines 3.71 kB
{"version":3,"file":"overlay.mjs","names":[],"sources":["../../../../../../packages/components/overlay/src/overlay.ts"],"sourcesContent":["import { createVNode, defineComponent, h, renderSlot } from 'vue'\nimport { PatchFlags, buildProps, definePropType } from '@element-plus/utils'\nimport { useNamespace, useSameTarget } from '@element-plus/hooks'\n\nimport type {\n CSSProperties,\n ExtractPropTypes,\n ExtractPublicPropTypes,\n} from 'vue'\nimport type { ZIndexType } from '@element-plus/utils'\n\nexport const overlayProps = buildProps({\n mask: {\n type: Boolean,\n default: true,\n },\n customMaskEvent: Boolean,\n overlayClass: {\n type: definePropType<string | string[] | Record<string, boolean>>([\n String,\n Array,\n Object,\n ]),\n },\n zIndex: {\n type: definePropType<ZIndexType>([String, Number]),\n },\n} as const)\nexport type OverlayProps = ExtractPropTypes<typeof overlayProps>\nexport type OverlayPropsPublic = ExtractPublicPropTypes<typeof overlayProps>\n\nexport const overlayEmits = {\n click: (evt: MouseEvent) => evt instanceof MouseEvent,\n}\nexport type OverlayEmits = typeof overlayEmits\n\nconst BLOCK = 'overlay'\n\nexport default defineComponent({\n name: 'ElOverlay',\n\n props: overlayProps,\n emits: overlayEmits,\n\n setup(props, { slots, emit }) {\n // No reactivity on this prop because when its rendering with a global\n // component, this will be a constant flag.\n const ns = useNamespace(BLOCK)\n\n const onMaskClick = (e: MouseEvent) => {\n emit('click', e)\n }\n\n const { onClick, onMousedown, onMouseup } = useSameTarget(\n props.customMaskEvent ? undefined : onMaskClick\n )\n\n // init here\n return () => {\n // when the vnode meets the same structure but with different change trigger\n // it will not automatically update, thus we simply use h function to manage updating\n return props.mask\n ? createVNode(\n 'div',\n {\n class: [ns.b(), props.overlayClass],\n style: {\n zIndex: props.zIndex,\n },\n onClick,\n onMousedown,\n onMouseup,\n },\n [renderSlot(slots, 'default')],\n PatchFlags.STYLE | PatchFlags.CLASS | PatchFlags.PROPS,\n ['onClick', 'onMouseup', 'onMousedown']\n )\n : h(\n 'div',\n {\n class: props.overlayClass,\n style: {\n zIndex: props.zIndex,\n position: 'fixed',\n top: '0px',\n right: '0px',\n bottom: '0px',\n left: '0px',\n } as CSSProperties,\n },\n [renderSlot(slots, 'default')]\n )\n }\n },\n})\n"],"mappings":";;;;;;;AAWA,MAAa,eAAe,WAAW;CACrC,MAAM;EACJ,MAAM;EACN,SAAS;EACV;CACD,iBAAiB;CACjB,cAAc,EACZ,MAAM,eAA4D;EAChE;EACA;EACA;EACD,CAAC,EACH;CACD,QAAQ,EACN,MAAM,eAA2B,CAAC,QAAQ,OAAO,CAAC,EACnD;CACF,CAAU;AAIX,MAAa,eAAe,EAC1B,QAAQ,QAAoB,eAAe,YAC5C;AAGD,MAAM,QAAQ;AAEd,sBAAe,gBAAgB;CAC7B,MAAM;CAEN,OAAO;CACP,OAAO;CAEP,MAAM,OAAO,EAAE,OAAO,QAAQ;EAG5B,MAAM,KAAK,aAAa,MAAM;EAE9B,MAAM,eAAe,MAAkB;AACrC,QAAK,SAAS,EAAE;;EAGlB,MAAM,EAAE,SAAS,aAAa,cAAc,cAC1C,MAAM,kBAAkB,SAAY,YACrC;AAGD,eAAa;AAGX,UAAO,MAAM,OACT,YACE,OACA;IACE,OAAO,CAAC,GAAG,GAAG,EAAE,MAAM,aAAa;IACnC,OAAO,EACL,QAAQ,MAAM,QACf;IACD;IACA;IACA;IACD,EACD,CAAC,WAAW,OAAO,UAAU,CAAC,EAC9B,WAAW,QAAQ,WAAW,QAAQ,WAAW,OACjD;IAAC;IAAW;IAAa;IAAc,CACxC,GACD,EACE,OACA;IACE,OAAO,MAAM;IACb,OAAO;KACL,QAAQ,MAAM;KACd,UAAU;KACV,KAAK;KACL,OAAO;KACP,QAAQ;KACR,MAAM;KACP;IACF,EACD,CAAC,WAAW,OAAO,UAAU,CAAC,CAC/B;;;CAGV,CAAC"}