element-plus
Version:
A Component Library for Vue 3
1 lines • 3.79 kB
Source Map (JSON)
{"version":3,"file":"popconfirm2.mjs","names":[],"sources":["../../../../../../packages/components/popconfirm/src/popconfirm.vue"],"sourcesContent":["<template>\n <el-tooltip\n ref=\"tooltipRef\"\n trigger=\"click\"\n :effect=\"effect\"\n v-bind=\"$attrs\"\n :virtual-triggering=\"virtualTriggering\"\n :virtual-ref=\"virtualRef\"\n :popper-class=\"`${ns.namespace.value}-popover`\"\n :popper-style=\"style\"\n :teleported=\"teleported\"\n :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n :hide-after=\"hideAfter\"\n :persistent=\"persistent\"\n loop\n @show=\"showPopper\"\n >\n <template #content>\n <div ref=\"rootRef\" tabindex=\"-1\" :class=\"ns.b()\">\n <div :class=\"ns.e('main')\">\n <el-icon\n v-if=\"!hideIcon && icon\"\n :class=\"ns.e('icon')\"\n :style=\"{ color: iconColor }\"\n >\n <component :is=\"icon\" />\n </el-icon>\n {{ title }}\n </div>\n <div :class=\"ns.e('action')\">\n <slot name=\"actions\" :confirm=\"confirm\" :cancel=\"cancel\">\n <el-button\n size=\"small\"\n :type=\"cancelButtonType === 'text' ? '' : cancelButtonType\"\n :text=\"cancelButtonType === 'text'\"\n @click=\"cancel\"\n >\n {{ finalCancelButtonText }}\n </el-button>\n <el-button\n size=\"small\"\n :type=\"confirmButtonType === 'text' ? '' : confirmButtonType\"\n :text=\"confirmButtonType === 'text'\"\n @click=\"confirm\"\n >\n {{ finalConfirmButtonText }}\n </el-button>\n </slot>\n </div>\n </div>\n </template>\n <template v-if=\"$slots.reference\">\n <slot name=\"reference\" />\n </template>\n </el-tooltip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, ref, unref } from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElIcon from '@element-plus/components/icon'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { addUnit } from '@element-plus/utils'\nimport { QuestionFilled } from '@element-plus/icons-vue'\nimport { popconfirmEmits } from './popconfirm'\n\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\nimport type { PopconfirmProps } from './popconfirm'\n\ndefineOptions({\n name: 'ElPopconfirm',\n})\n\nconst props = withDefaults(defineProps<PopconfirmProps>(), {\n confirmButtonType: 'primary',\n cancelButtonType: 'text',\n icon: () => QuestionFilled,\n iconColor: '#f90',\n hideAfter: 200,\n effect: 'light',\n teleported: true,\n width: 150,\n})\nconst emit = defineEmits(popconfirmEmits)\n\nconst { t } = useLocale()\nconst ns = useNamespace('popconfirm')\nconst tooltipRef = ref<TooltipInstance>()\nconst rootRef = ref<HTMLElement>()\n\nconst popperRef = computed(() => {\n return unref(tooltipRef)?.popperRef\n})\n\nconst showPopper = () => {\n rootRef.value?.focus?.()\n}\n\nconst hidePopper = () => {\n tooltipRef.value?.onClose?.()\n}\n\nconst style = computed(() => {\n return {\n width: addUnit(props.width),\n }\n})\n\nconst confirm = (e: MouseEvent) => {\n emit('confirm', e)\n hidePopper()\n}\nconst cancel = (e: MouseEvent) => {\n emit('cancel', e)\n hidePopper()\n}\n\nconst finalConfirmButtonText = computed(\n () => props.confirmButtonText || t('el.popconfirm.confirmButtonText')\n)\nconst finalCancelButtonText = computed(\n () => props.cancelButtonText || t('el.popconfirm.cancelButtonText')\n)\n\ndefineExpose({\n popperRef,\n hide: hidePopper,\n})\n</script>\n"],"mappings":""}