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

PTViewer visual updates

pull/6424/head
tugcekucukoglu 2024-09-17 13:20:40 +03:00
parent 1bdab8ed45
commit edae389d35
2 changed files with 10 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
apps/showcase/assets/styles/layout/_doc.scss
View File

@ -442,7 +442,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-color: var(--p-content-border-color); border-color: var(--border-color);
border-width: 0 1px 0 0; border-width: 0 1px 0 0;
padding: 1rem; padding: 1rem;
width: 75%; width: 75%;
@ -461,16 +461,13 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: .5rem; padding: .5rem;
cursor: pointer;
&:hover { &:hover {
background-color: var(--p-content-hover-background); background-color: var(--hover-background);
} }
.doc-ptoption-text { .doc-ptoption-text:hover {
color: var(--p-text-muted-color); cursor: default;
font-size: 0.875rem;
line-height: 1.25rem;
} }
} }
} }

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

@ -7,8 +7,10 @@
<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="doc-ptoption" @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 class="doc-ptoption-text">
<span class="doc-ptoption-text">{{ item.label }} element of {{ doc.key }} component</span> {{ item.label }}
<template v-if="docs.length > 1">| {{ doc.key }}</template>
</span>
</div> </div>
</template> </template>
</template> </template>
@ -43,12 +45,12 @@ export default {
if (this.hoveredElements.length === 0) this.hoveredElements = find(document.querySelector('body'), selector); //TODO: if (this.hoveredElements.length === 0) this.hoveredElements = find(document.querySelector('body'), selector); //TODO:
this.hoveredElements?.forEach((el) => { this.hoveredElements?.forEach((el) => {
addClass(el, '!ring !ring-red-500 !z-10'); addClass(el, '!ring !ring-blue-500 !z-10');
}); });
}, },
leaveSection() { leaveSection() {
this.hoveredElements.forEach((el) => { this.hoveredElements.forEach((el) => {
removeClass(el, '!ring !ring-red-500 !z-10'); removeClass(el, '!ring !ring-blue-500 !z-10');
}); });
this.hoveredElements = []; this.hoveredElements = [];