@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
1 lines • 4.58 kB
Source Map (JSON)
{"version":3,"file":"popper.vue2.mjs","sources":["../../../components/popper/popper.vue"],"sourcesContent":["<template>\r\n <Portal :to=\"props.to\">\r\n <Transition\r\n :name=\"props.transition\"\r\n :appear=\"props.appear\"\r\n @before-enter=\"emitHookEvent('be', $event)\"\r\n @enter=\"emitHookEvent('e', $event)\"\r\n @after-enter=\"emitHookEvent('ae', $event)\"\r\n @enter-cancelled=\"emitHookEvent('ec', $event)\"\r\n @before-leave=\"emitHookEvent('bl', $event)\"\r\n @leave=\"emitHookEvent('l', $event)\"\r\n @after-leave=\"emitHookEvent('al', $event)\"\r\n @leave-cancelled=\"emitHookEvent('lc', $event)\"\r\n >\r\n <div\r\n v-if=\"props.alive || props.visible\"\r\n v-show=\"!props.alive || props.visible\"\r\n ref=\"wrapper\"\r\n v-bind=\"$attrs\"\r\n :class=\"[nh.b(), props.to !== 'body' && nh.bm('inherit')]\"\r\n :role=\"props.role\"\r\n :style=\"{ zIndex: props.to && props.visible ? zIndex : undefined }\"\r\n >\r\n <slot></slot>\r\n </div>\r\n </Transition>\r\n </Portal>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { Portal } from '@/components/portal'\r\n\r\nimport { defineComponent, ref, watch } from 'vue'\r\n\r\nimport { emitEvent, useNameHelper, useProps, useZIndex } from '@vexip-ui/config'\r\nimport { popperProps } from './props'\r\n\r\nexport default defineComponent({\r\n name: 'Popper',\r\n components: {\r\n Portal,\r\n },\r\n inheritAttrs: false,\r\n props: popperProps,\r\n emits: [],\r\n setup(_props) {\r\n const nh = useNameHelper('popper')\r\n const props = useProps('popper', _props, {\r\n visible: false,\r\n alive: false,\r\n to: '',\r\n transition: () => nh.ns('drop'),\r\n appear: false,\r\n role: 'dialog',\r\n })\r\n const getIndex = useZIndex()\r\n\r\n const zIndex = ref(10)\r\n\r\n const wrapper = ref<HTMLElement>()\r\n\r\n watch(\r\n () => props.visible,\r\n value => {\r\n if (props.to && value) {\r\n zIndex.value = getIndex()\r\n }\r\n },\r\n { immediate: true },\r\n )\r\n\r\n function emitHookEvent(name: 'be' | 'e' | 'ae' | 'ec' | 'bl' | 'l' | 'al' | 'lc', el: Element) {\r\n switch (name) {\r\n case 'be':\r\n emitEvent(props.onBeforeEnter, el)\r\n break\r\n case 'e':\r\n emitEvent(props.onEnter, el)\r\n break\r\n case 'ae':\r\n emitEvent(props.onAfterEnter, el)\r\n break\r\n case 'ec':\r\n emitEvent(props.onEnterCancelled, el)\r\n break\r\n case 'bl':\r\n emitEvent(props.onBeforeLeave, el)\r\n break\r\n case 'l':\r\n emitEvent(props.onLeave, el)\r\n break\r\n case 'al':\r\n emitEvent(props.onAfterLeave, el)\r\n break\r\n case 'lc':\r\n emitEvent(props.onLeaveCancelled, el)\r\n break\r\n }\r\n }\r\n\r\n return {\r\n nh,\r\n props,\r\n zIndex,\r\n\r\n wrapper,\r\n\r\n emitHookEvent,\r\n }\r\n },\r\n})\r\n</script>\r\n"],"names":["_sfc_main","defineComponent","Portal","popperProps","_props","nh","useNameHelper","props","useProps","getIndex","useZIndex","zIndex","ref","wrapper","watch","value","emitHookEvent","name","el","emitEvent"],"mappings":";;;;;AAqCA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACVC,QAAAA;AAAAA,EACF;AAAA,EACA,cAAc;AAAA,EACd,OAAOC;AAAA,EACP,OAAO,CAAC;AAAA,EACR,MAAMC,GAAQ;AACN,UAAAC,IAAKC,EAAc,QAAQ,GAC3BC,IAAQC,EAAS,UAAUJ,GAAQ;AAAA,MACvC,SAAS;AAAA,MACT,OAAO;AAAA,MACP,IAAI;AAAA,MACJ,YAAY,MAAMC,EAAG,GAAG,MAAM;AAAA,MAC9B,QAAQ;AAAA,MACR,MAAM;AAAA,IAAA,CACP,GACKI,IAAWC,EAAU,GAErBC,IAASC,EAAI,EAAE,GAEfC,IAAUD,EAAiB;AAEjC,IAAAE;AAAA,MACE,MAAMP,EAAM;AAAA,MACZ,CAASQ,MAAA;AACH,QAAAR,EAAM,MAAMQ,MACdJ,EAAO,QAAQF,EAAS;AAAA,MAE5B;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IACpB;AAES,aAAAO,EAAcC,GAA2DC,GAAa;AAC7F,cAAQD,GAAM;AAAA,QACZ,KAAK;AACO,UAAAE,EAAAZ,EAAM,eAAeW,CAAE;AACjC;AAAA,QACF,KAAK;AACO,UAAAC,EAAAZ,EAAM,SAASW,CAAE;AAC3B;AAAA,QACF,KAAK;AACO,UAAAC,EAAAZ,EAAM,cAAcW,CAAE;AAChC;AAAA,QACF,KAAK;AACO,UAAAC,EAAAZ,EAAM,kBAAkBW,CAAE;AACpC;AAAA,QACF,KAAK;AACO,UAAAC,EAAAZ,EAAM,eAAeW,CAAE;AACjC;AAAA,QACF,KAAK;AACO,UAAAC,EAAAZ,EAAM,SAASW,CAAE;AAC3B;AAAA,QACF,KAAK;AACO,UAAAC,EAAAZ,EAAM,cAAcW,CAAE;AAChC;AAAA,QACF,KAAK;AACO,UAAAC,EAAAZ,EAAM,kBAAkBW,CAAE;AACpC;AAAA,MAAA;AAAA,IACJ;AAGK,WAAA;AAAA,MACL,IAAAb;AAAA,MACA,OAAAE;AAAA,MACA,QAAAI;AAAA,MAEA,SAAAE;AAAA,MAEA,eAAAG;AAAA,IACF;AAAA,EAAA;AAEJ,CAAC;"}