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

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

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