vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
1 lines • 4.35 kB
Source Map (JSON)
{"version":3,"file":"popper.vue.cjs","sources":["../../../components/popper/popper.vue"],"sourcesContent":["<template>\n <Portal :to=\"props.to\">\n <Transition\n :name=\"props.transition\"\n :appear=\"props.appear\"\n @before-enter=\"emitHookEvent('be', $event)\"\n @enter=\"emitHookEvent('e', $event)\"\n @after-enter=\"emitHookEvent('ae', $event)\"\n @enter-cancelled=\"emitHookEvent('ec', $event)\"\n @before-leave=\"emitHookEvent('bl', $event)\"\n @leave=\"emitHookEvent('l', $event)\"\n @after-leave=\"emitHookEvent('al', $event)\"\n @leave-cancelled=\"emitHookEvent('lc', $event)\"\n >\n <div\n v-if=\"props.alive || props.visible\"\n v-show=\"!props.alive || props.visible\"\n ref=\"wrapper\"\n v-bind=\"$attrs\"\n :class=\"[nh.b(), props.to !== 'body' && nh.bm('inherit')]\"\n :role=\"props.role\"\n :style=\"{ zIndex: props.to && props.visible ? zIndex : undefined }\"\n >\n <slot></slot>\n </div>\n </Transition>\n </Portal>\n</template>\n\n<script lang=\"ts\">\nimport { Portal } from '@/components/portal'\n\nimport { defineComponent, ref, watch } from 'vue'\n\nimport { emitEvent, useNameHelper, useProps, useZIndex } from '@vexip-ui/config'\nimport { popperProps } from './props'\n\nexport default defineComponent({\n name: 'Popper',\n components: {\n Portal,\n },\n inheritAttrs: false,\n props: popperProps,\n emits: [],\n setup(_props) {\n const nh = useNameHelper('popper')\n const props = useProps('popper', _props, {\n visible: false,\n alive: false,\n to: '',\n transition: () => nh.ns('drop'),\n appear: false,\n role: 'dialog',\n })\n const getIndex = useZIndex()\n\n const zIndex = ref(10)\n\n const wrapper = ref<HTMLElement>()\n\n watch(\n () => props.visible,\n value => {\n if (props.to && value) {\n zIndex.value = getIndex()\n }\n },\n { immediate: true },\n )\n\n function emitHookEvent(name: 'be' | 'e' | 'ae' | 'ec' | 'bl' | 'l' | 'al' | 'lc', el: Element) {\n switch (name) {\n case 'be':\n emitEvent(props.onBeforeEnter, el)\n break\n case 'e':\n emitEvent(props.onEnter, el)\n break\n case 'ae':\n emitEvent(props.onAfterEnter, el)\n break\n case 'ec':\n emitEvent(props.onEnterCancelled, el)\n break\n case 'bl':\n emitEvent(props.onBeforeLeave, el)\n break\n case 'l':\n emitEvent(props.onLeave, el)\n break\n case 'al':\n emitEvent(props.onAfterLeave, el)\n break\n case 'lc':\n emitEvent(props.onLeaveCancelled, el)\n break\n }\n }\n\n return {\n nh,\n props,\n zIndex,\n\n wrapper,\n\n emitHookEvent,\n }\n },\n})\n</script>\n"],"names":["_createBlock","_component_Portal","_ctx","_createVNode","_Transition","_cache","$event","_withDirectives","_openBlock","_createElementBlock","_mergeProps","_renderSlot","_hoisted_1","_createCommentVNode"],"mappings":"0NACEA,EAyBS,YAAAC,EAAA,CAzBA,GAAIC,EAAM,MAAA,EAAA,EAAA,mBACjB,IAuBa,CAvBbC,EAAAA,YAuBaC,EAAAA,WAAA,CAtBV,KAAMF,EAAM,MAAA,WACZ,OAAQA,EAAM,MAAA,OACd,cAAYG,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAEJ,EAAa,cAAA,KAAOI,CAAM,GACxC,QAAKD,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAEJ,EAAa,cAAA,IAAMI,CAAM,GAChC,aAAWD,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAEJ,EAAa,cAAA,KAAOI,CAAM,GACvC,iBAAeD,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAEJ,EAAa,cAAA,KAAOI,CAAM,GAC3C,cAAYD,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAEJ,EAAa,cAAA,KAAOI,CAAM,GACxC,QAAKD,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAEJ,EAAa,cAAA,IAAMI,CAAM,GAChC,aAAWD,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAEJ,EAAa,cAAA,KAAOI,CAAM,GACvC,iBAAeD,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAEJ,EAAa,cAAA,KAAOI,CAAM,EAAA,EAAA,mBAE5C,IAUM,CATEJ,QAAM,OAASA,EAAA,MAAM,QAD7BK,EAAA,gBAAAC,YAAA,EAAAC,qBAUM,MAVNC,EAAAA,WAUM,CAAA,IAAA,EAPJ,IAAI,SAAA,EACIR,EAAM,OAAA,CACb,MAAK,CAAGA,EAAG,GAAA,EAAA,EAAKA,EAAM,MAAA,KAAE,QAAeA,EAAA,GAAG,GAAE,SAAA,CAAA,EAC5C,KAAMA,EAAM,MAAA,KACZ,MAAK,CAAY,OAAAA,EAAA,MAAM,IAAMA,EAAM,MAAA,QAAUA,SAAS,MAAS,CAAA,CAAA,EAAA,CAEhES,aAAaT,EAAA,OAAA,SAAA,CAAA,EAAA,GAAAU,CAAA,GAAA,WAPJV,EAAM,MAAA,OAASA,QAAM,OAAO,CAAA,CAAA,EAAAW,EAAAA,mBAAA,GAAA,EAAA"}