@hedou/admin-element-plus-theme

Import the theme CSS once, then pass the public Hedou install options to Element Plus so runtime overlays use the canonical modal z-index base.

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import App from './App.vue'
import '@hedou/admin-element-plus-theme'
import { hedouElementPlusConfig } from '@hedou/admin-element-plus-theme/config'

createApp(App).use(ElementPlus, hedouElementPlusConfig).mount('#app')

Element Plus renders Popper z-index and the Popconfirm icon color as inline styles. Bind the public component props to the Hedou overlay defaults.

<script setup lang="ts">
import { hedouElementPlusOverlayProps } from '@hedou/admin-element-plus-theme/config'
</script>

<template>
  <el-popover
    v-bind="hedouElementPlusOverlayProps.popover"
    content="Popover content"
  >
    <template #reference><button type="button">Open popover</button></template>
  </el-popover>

  <el-tooltip
    v-bind="hedouElementPlusOverlayProps.tooltip"
    content="Tooltip content"
  >
    <button type="button">Open tooltip</button>
  </el-tooltip>

  <el-popconfirm
    v-bind="hedouElementPlusOverlayProps.popconfirm"
    title="Continue?"
  >
    <template #reference><button type="button">Open confirm</button></template>
  </el-popconfirm>
</template>