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

PTTab panel-accordion - SectionNav links updated

pull/3841/head
Bahadır Sofuoğlu 2023-04-01 02:42:09 +03:00
parent 177d894916
commit 727f4cd4f7
14 changed files with 272 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
api-generator/build-apidoc.js
View File

@ -32,7 +32,9 @@ app.bootstrap({
searchInComments: true,
disableSources: true,
logLevel: 'Error',
exclude: ['node_modules', 'components/lib/**/*.js']
sort: ['source-order'],
exclude: ['node_modules', 'components/lib/**/*.js'],
});
const project = app.convert();

BIN
assets/ptimages/panel.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

60
doc/accordion/pt/PTDoc.vue Normal file
View File

@ -0,0 +1,60 @@
<template>
<DocSectionText v-bind="$attrs">
<p>A simple Panel is created with a <i>header</i> property along with the content as children.</p>
</DocSectionText>
<div class="card">
<Panel header="Header" :pt="{ header: { style: 'background:#3B82F6' }, title: { style: 'color:#fff' }, toggler: { style: 'color:#fff' } }" toggleable>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Panel>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
<Panel header="Header" :pt="{header:{style:'background:#3B82F6'}, title: {style:'color:#fff'}, toggler:{style:'color:#fff'}}" toggleable>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Panel>`,
options: `
<template>
<div class="card">
<Panel header="Header">
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Panel>
</div>
</template>
<script>
<\/script>`,
composition: `
<template>
<div class="card">
<Panel header="Header">
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Panel>
</div>
</template>
<script setup>
<\/script>`
}
};
}
};
</script>

8
doc/accordion/pt/PTImage.vue Normal file
View File

@ -0,0 +1,8 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div>
<img class="w-full" src="@/assets/ptimages/panel.png" />
</div>
</template>

51
doc/accordion/pt/index.vue Normal file
View File

@ -0,0 +1,51 @@
<template>
<div className="doc-main">
<div className="doc-intro">
<h1>Panel Pass Through</h1>
<p>Description</p>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import { getPTOption } from '@/layouts/doc/helpers/PTHelper.js';
import PtDoc from './PTDoc.vue';
import PTImage from './PTImage.vue';
import DocApiTable from '@/layouts/doc/DocApiTable.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Image',
description: 'Pass Through Image',
component: PTImage
},
{
id: 'pt.doc.accordion',
label: 'Accordion PT Options',
description: 'Pass Through Accordion',
component: DocApiTable,
data: getPTOption('Accordion')
},
{
id: 'pt.doc.tab',
label: 'AccordionTab PT Options',
description: 'Pass Through AccordionTab',
component: DocApiTable,
data: getPTOption('AccordionTab')
},
{
id: 'pt.demo',
label: 'Demo',
description: 'Pass Through Demo',
component: PtDoc
}
]
};
}
};
</script>

60
doc/panel/pt/PTDoc.vue Normal file
View File

@ -0,0 +1,60 @@
<template>
<DocSectionText v-bind="$attrs">
<p>A simple Panel is created with a <i>header</i> property along with the content as children.</p>
</DocSectionText>
<div class="card">
<Panel header="Header" :pt="{ header: { style: 'background:#3B82F6' }, title: { style: 'color:#fff' }, toggler: { style: 'color:#fff' } }" toggleable>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Panel>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
<Panel header="Header" :pt="{header:{style:'background:#3B82F6'}, title: {style:'color:#fff'}, toggler:{style:'color:#fff'}}" toggleable>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Panel>`,
options: `
<template>
<div class="card">
<Panel header="Header">
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Panel>
</div>
</template>
<script>
<\/script>`,
composition: `
<template>
<div class="card">
<Panel header="Header">
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Panel>
</div>
</template>
<script setup>
<\/script>`
}
};
}
};
</script>

8
doc/panel/pt/PTImage.vue Normal file
View File

@ -0,0 +1,8 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div>
<img class="w-full" src="@/assets/ptimages/panel.png" />
</div>
</template>

44
doc/panel/pt/index.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<div className="doc-main">
<div className="doc-intro">
<h1>Panel Pass Through</h1>
<p>Description</p>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import { getPTOption } from '@/layouts/doc/helpers/PTHelper.js';
import PtDoc from './PTDoc.vue';
import PTImage from './PTImage.vue';
import DocApiTable from '@/layouts/doc/DocApiTable.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Image',
description: 'Pass Through Image',
component: PTImage
},
{
id: 'pt.doc',
label: 'Panel PT Options',
description: 'Pass Through Doc',
component: DocApiTable,
data: getPTOption('Panel')
},
{
id: 'pt.demo',
label: 'Demo',
description: 'Pass Through Demo',
component: PtDoc
}
]
};
}
};
</script>

9
layouts/doc/DocComponent.vue
View File

@ -12,6 +12,9 @@
<li :class="{ 'doc-tabmenu-active': tab === 1 }">
<button type="button" @click="tab = 1">API</button>
</li>
<li v-if="ptTabComponent" :class="{ 'doc-tabmenu-active': tab === 2 }">
<button type="button" @click="tab = 2">Pass Through</button>
</li>
</ul>
<div class="doc-tabpanels">
@ -29,13 +32,17 @@
<div v-show="tab === 1" class="doc-tabpanel">
<DocApiSection :doc="apiDocs" :header="header" />
</div>
<div v-if="tab === 2" class="doc-tabpanel">
<component :is="{ ...ptTabComponent }" />
</div>
</div>
</div>
</template>
<script>
export default {
props: ['title', 'header', 'description', 'componentDocs', 'apiDocs', 'className'],
props: ['title', 'header', 'description', 'componentDocs', 'apiDocs', 'className', 'ptTabComponent'],
data() {
return {
tab: 0

5
layouts/doc/DocSectionNav.vue
View File

@ -2,20 +2,16 @@
<ul ref="nav" class="doc-section-nav">
<li v-for="doc of docs" :key="doc.label" :class="['navbar-item', { 'active-navbar-item': activeId === doc.id }]">
<div class="navbar-item-content">
<NuxtLink :to="`${checkRouteName}/#${doc.id}`">
<button class="p-link" @click="onButtonClick(doc)">{{ doc.label }}</button>
</NuxtLink>
</div>
<template v-if="doc.children">
<ul>
<li v-for="child of doc.children" :key="child.label" :class="['navbar-item', { 'active-navbar-item': activeId === child.id }]">
<div class="navbar-item-content">
<NuxtLink :to="`${checkRouteName}/#${child.id}`">
<button class="p-link" @click="onButtonClick(child)">
{{ child.label }}
</button>
</NuxtLink>
</div>
</li>
</ul>
@ -84,6 +80,7 @@ export default {
label && label.parentElement.scrollIntoView({ block: 'start', behavior });
},
onButtonClick(doc) {
this.$router.push(`${this.checkRouteName}/#${doc.id}`);
setTimeout(() => {
this.activeId = doc.id;
this.scrollToLabelById(doc.id, 'smooth');

2
layouts/doc/DocSections.vue
View File

@ -13,7 +13,7 @@
</template>
<template v-else-if="!doc.children && doc.component">
<component :is="{ ...doc.component }" :id="doc.id" :label="doc.label" />
<component :is="{ ...doc.component }" :id="doc.id" :label="doc.label" :data="doc.data" :description="doc.description" />
</template>
</section>
</template>

16
layouts/doc/helpers/PTHelper.js Normal file
View File

@ -0,0 +1,16 @@
import APIDocs from '@/doc/common/apidoc/index.json';
export const getPTOption = name => {
const { props } = APIDocs[name.toLowerCase()].interfaces.values[`${name}PassThroughOptions`];
let data = [];
for (const [i, prop] of props.entries()) {
data.push({
value: i + 1,
label: prop.name,
description: prop.description
});
}
return data;
};

7
pages/accordion/index.vue
View File

@ -1,5 +1,5 @@
<template>
<DocComponent title="Vue Accordion Component" header="Accordion" description="Accordion groups a collection of contents in tabs." :componentDocs="docs" :apiDocs="['Accordion', 'AccordionTab']" />
<DocComponent title="Vue Accordion Component" header="Accordion" description="Accordion groups a collection of contents in tabs." :componentDocs="docs" :apiDocs="['Accordion', 'AccordionTab']" :ptTabComponent="ptComponent" />
</template>
<script>
@ -11,7 +11,7 @@ import ImportDoc from '@/doc/accordion/ImportDoc';
import MultipleDoc from '@/doc/accordion/MultipleDoc.vue';
import StyleDoc from '@/doc/accordion/StyleDoc';
import TemplateDoc from '@/doc/accordion/TemplateDoc.vue';
import PTComponent from '@/doc/accordion/pt/index.vue';
export default {
data() {
return {
@ -56,7 +56,8 @@ export default {
label: 'Accessibility',
component: AccessibilityDoc
}
]
],
ptComponent: PTComponent
};
}
};

6
pages/panel/index.vue
View File

@ -1,5 +1,5 @@
<template>
<DocComponent title="Vue Panel Component" header="Panel" description="Panel is a grouping component providing with content toggle feature." :componentDocs="docs" :apiDocs="['Panel']" />
<DocComponent title="Vue Panel Component" header="Panel" description="Panel is a grouping component providing with content toggle feature." :componentDocs="docs" :apiDocs="['Panel']" :ptTabComponent="ptComponent" />
</template>
<script>
import AccessibilityDoc from '@/doc/panel/AccessibilityDoc.vue';
@ -8,6 +8,7 @@ import ImportDoc from '@/doc/panel/ImportDoc.vue';
import StyleDoc from '@/doc/panel/StyleDoc.vue';
import TemplateDoc from '@/doc/panel/TemplateDoc.vue';
import ToggleableDoc from '@/doc/panel/ToggleableDoc.vue';
import PTComponent from '@/doc/panel/pt/index.vue';
export default {
data() {
return {
@ -42,7 +43,8 @@ export default {
label: 'Accessibility',
component: AccessibilityDoc
}
]
],
ptComponent: PTComponent
};
}
};