vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

PTViewer improvements - 2

pull/6416/head
tugcekucukoglu 2024-09-16 11:24:54 +03:00
parent 095ee3d213
commit b68bda798e
1 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
apps/showcase/components/doc/DocPTViewer.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<div ref="container" class="card flex flex-col md:flex-row !p-0"> <div ref="container" class="doc-ptviewerwrapper card">
<div class="flex items-center justify-center md:border-r border-b md:border-b-0 border-surface md:w-3/4 w-full p-4"> <div class="doc-ptviewer">
<slot /> <slot />
</div> </div>
<div class="flex flex-col gap-2 p-8 md:p-2 md:w-1/4 w-full max-h-[720px] overflow-y-auto"> <div class="doc-ptoptions">
<template v-if="docs[0].data"> <template v-if="docs[0].data">
<template v-for="doc of docs" :key="doc.key"> <template v-for="doc of docs" :key="doc.key">
<div v-for="item of handleData(doc.data)" :key="item.value" class="flex flex-col p-2 cursor-pointer hover:bg-emphasis" @mouseenter="enterSection(item, doc.key)" @mouseleave="leaveSection"> <div v-for="item of handleData(doc.data)" :key="item.value" class="doc-ptoption" @mouseenter="enterSection(item, doc.key)" @mouseleave="leaveSection">
<span>{{ item.label }}</span> <span>{{ item.label }}</span>
<span class="text-muted-color text-sm">{{ item.label }} element of {{ doc.key }} component</span> <span class="doc-ptoption-text">{{ item.label }} element of {{ doc.key }} component</span>
</div> </div>
</template> </template>
</template> </template>
@ -36,7 +36,9 @@ export default {
this.hoveredElements = find(this.$refs.container, selector); this.hoveredElements = find(this.$refs.container, selector);
this.hoveredElements.forEach((el) => { if (this.hoveredElements.length === 0) this.hoveredElements = find(document.querySelector('body'), selector);
this.hoveredElements?.forEach((el) => {
addClass(el, '!ring !ring-red-500'); addClass(el, '!ring !ring-red-500');
}); });
}, },