MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-19 14:53:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

TooltipWrapper

Browse Source
This commit is contained in:
pa
2026-01-07 01:22:21 +09:00
committed by Natsumi
parent c0cb01a117
commit cfd117fffe
3 changed files with 53 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/App.vue
View File

@@ -1,26 +1,29 @@
<template> <template>
<el-config-provider <TooltipProvider>
:locale="/** @type {import('element-plus/es/locale').Language} */ (messages[locale].elementPlus)"> <el-config-provider
<MacOSTitleBar></MacOSTitleBar> :locale="/** @type {import('element-plus/es/locale').Language} */ (messages[locale].elementPlus)">
<MacOSTitleBar></MacOSTitleBar>
<div <div
id="x-app" id="x-app"
class="x-app" class="x-app"
:class="{ 'with-macos-titlebar': isMacOS }" :class="{ 'with-macos-titlebar': isMacOS }"
ondragenter="event.preventDefault()" ondragenter="event.preventDefault()"
ondragover="event.preventDefault()" ondragover="event.preventDefault()"
ondrop="event.preventDefault()"> ondrop="event.preventDefault()">
<RouterView></RouterView> <RouterView></RouterView>
<VRCXUpdateDialog></VRCXUpdateDialog> <VRCXUpdateDialog></VRCXUpdateDialog>
</div> </div>
</el-config-provider> </el-config-provider>
</TooltipProvider>
</template> </template>
<script setup> <script setup>
import { computed, onBeforeMount, onMounted } from 'vue'; import { computed, onBeforeMount, onMounted } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { TooltipProvider } from './components/ui/tooltip';
import { createGlobalStores } from './stores'; import { createGlobalStores } from './stores';
import { initNoty } from './plugin/noty'; import { initNoty } from './plugin/noty';

35
src/components/ui/tooltip/TooltipWrapper.vue Normal file
View File

@@ -0,0 +1,35 @@
<script setup>
import { computed, useSlots } from 'vue';
import Tooltip from './Tooltip.vue';
import TooltipContent from './TooltipContent.vue';
import TooltipTrigger from './TooltipTrigger.vue';
const props = defineProps({
content: { type: [String, Number], required: false },
side: { type: null, required: false },
align: { type: null, required: false },
sideOffset: { type: Number, required: false },
delayDuration: { type: Number, required: false },
disableHoverableContent: { type: Boolean, required: false },
disabled: { type: Boolean, required: false },
triggerAsChild: { type: Boolean, required: false, default: true },
contentClass: { type: null, required: false }
});
const slots = useSlots();
const hasContent = computed(() => Boolean(slots.content) || props.content !== undefined);
</script>
<template>
<Tooltip :delay-duration="delayDuration" :disable-hoverable-content="disableHoverableContent" :disabled="disabled">
<TooltipTrigger :as-child="triggerAsChild">
<slot />
</TooltipTrigger>
<TooltipContent v-if="hasContent" :side="side" :align="align" :side-offset="sideOffset" :class="contentClass">
<slot name="content">
<span v-if="content !== undefined">{{ content }}</span>
</slot>
</TooltipContent>
</Tooltip>
</template>

1
src/components/ui/tooltip/index.js
View File

@@ -1,4 +1,5 @@
export { default as Tooltip } from './Tooltip.vue'; export { default as Tooltip } from './Tooltip.vue';
export { default as TooltipContent } from './TooltipContent.vue'; export { default as TooltipContent } from './TooltipContent.vue';
export { default as TooltipProvider } from './TooltipProvider.vue'; export { default as TooltipProvider } from './TooltipProvider.vue';
export { default as TooltipWrapper } from './TooltipWrapper.vue';
export { default as TooltipTrigger } from './TooltipTrigger.vue'; export { default as TooltipTrigger } from './TooltipTrigger.vue';