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

some csb for components

pull/864/head
Tuğçe Küçükoğlu 2021-01-08 18:08:42 +03:00
parent 1b262077ee
commit 754131d09e
6 changed files with 512 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/views/card/CardDoc.vue
View File

@ -72,9 +72,12 @@ import Card from 'primevue/card';
</TabPanel> </TabPanel>
<TabPanel header="Source"> <TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/card" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/card" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<LiveEditor name="CardDemo" :sources="sources" :components="['Card', 'Button']"/>
</div>
<pre v-code> <pre v-code>
<code><template v-pre> <code><template v-pre>
&lt;Card style="width: 25rem; margin-bottom: 2em"&gt; &lt;Card style="width: 25rem; margin-bottom: 2em"&gt;
@ -112,3 +115,65 @@ import Card from 'primevue/card';
</TabView> </TabView>
</div> </div>
</template> </template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<Card style="width: 25rem; margin-bottom: 2em">
<template #title>
Simple Card
</template>
<template #content>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
</template>
</Card>
<Card style="width: 25em">
<template #header>
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
</template>
<template #title>
Advanced Card
</template>
<template #subtitle>
Card subtitle
</template>
<template #content>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
</template>
<template #footer>
<Button icon="pi pi-check" label="Save" />
<Button icon="pi pi-times" label="Cancel" class="p-button-secondary" style="margin-left: .5em" />
</template>
</Card>
</div>
</div>
</template>
<script>
export default {
}`,
style: `<style lang="scss" scoped>
p {
line-height: 1.5;
margin: 0;
}
</style>`
}
}
}
},
components: {
LiveEditor
}
}
</script>

52
src/views/editor/EditorDoc.vue
View File

@ -147,9 +147,12 @@ npm install quill --save
</TabPanel> </TabPanel>
<TabPanel header="Source"> <TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/inputtext" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/inputtext" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<LiveEditor name="EditorDemo" :sources="sources" :directives="['Tooltip']"/>
</div>
<pre v-code> <pre v-code>
<code><template v-pre> <code><template v-pre>
&lt;h3&gt;Default&lt;/h3&gt; &lt;h3&gt;Default&lt;/h3&gt;
@ -184,3 +187,52 @@ export default {
</TabView> </TabView>
</div> </div>
</template> </template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Default</h5>
<Editor v-model="value1" editorStyle="height: 320px"/>
<h5>Customized</h5>
<Editor v-model="value2" editorStyle="height: 320px">
<template v-slot:toolbar>
<span class="ql-formats">
<button class="ql-bold" v-tooltip.bottom="'Bold'"></button>
<button class="ql-italic" v-tooltip.bottom="'Italic'"></button>
<button class="ql-underline" v-tooltip.bottom="'Underline'"></button>
</span>
</template>
</Editor>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
value1: '<div>Welcome to PrimeVue <b>Editor</b></div><div><br></div>',
value2: ''
}
}
}
`
}
}
}
},
components: {
LiveEditor
}
}
</script>

60
src/views/fieldset/FieldsetDoc.vue
View File

@ -161,9 +161,12 @@ import Fieldset from 'primevue/fieldset';
</TabPanel> </TabPanel>
<TabPanel header="Source"> <TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/fieldset" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/fieldset" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<LiveEditor name="FieldsetDemo" :sources="sources"/>
</div>
<pre v-code> <pre v-code>
<code><template v-pre> <code><template v-pre>
&lt;h5&gt;Regular&lt;/h5&gt; &lt;h5&gt;Regular&lt;/h5&gt;
@ -201,3 +204,60 @@ export default {
</TabView> </TabView>
</div> </div>
</template> </template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Regular</h5>
<Fieldset legend="Header">
<p>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>
</Fieldset>
<h5>Toggleable</h5>
<Fieldset legend="Header" :toggleable="true">
<p>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>
</Fieldset>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
value1: '',
value2: '',
value3: 'PrimeVue'
}
}
}`,
style: `<style lang="scss" scoped>
.p-fieldset p {
line-height: 1.5;
margin: 0;
}
</style>`
}
}
}
},
components: {
LiveEditor
}
}
</script>

124
src/views/scrollpanel/ScrollPanelDoc.vue
View File

@ -94,9 +94,12 @@ import ScrollPanel from 'primevue/scrollpanel';
</TabPanel> </TabPanel>
<TabPanel header="Source"> <TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/scrollpanel" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/scrollpanel" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<LiveEditor name="ScrollPanelDemo" :sources="sources"/>
</div>
<pre v-code> <pre v-code>
<code><template v-pre> <code><template v-pre>
@ -209,3 +212,124 @@ export default {
</TabView> </TabView>
</div> </div>
</template> </template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<div class="p-grid">
<div class="p-col-12 p-md-4 p-p-5">
<ScrollPanel style="width: 100%; height: 200px">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Vitae et leo duis ut diam.
Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
Mattis aliquam faucibus purus in massa tempor nec.
</p>
</ScrollPanel>
</div>
<div class="p-col-12 p-md-4 p-p-5">
<ScrollPanel style="width: 100%; height: 200px" class="custombar1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Vitae et leo duis ut diam.
Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
Mattis aliquam faucibus purus in massa tempor nec.
</p>
</ScrollPanel>
</div>
<div class="p-col-12 p-md-4 p-p-5">
<ScrollPanel style="width: 100%; height: 200px" class="custombar2">
<p style="width: 600px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Vitae et leo duis ut diam.
Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
Mattis aliquam faucibus purus in massa tempor nec.
</p>
</ScrollPanel>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
}`,
style: `<style lang="scss" scoped>
::v-deep(.p-scrollpanel) {
p {
padding: .5rem;
line-height: 1.5;
margin: 0;
}
&.custombar1 {
.p-scrollpanel-wrapper {
border-right: 9px solid var(--surface-b);
}
.p-scrollpanel-bar {
background-color: var(--primary-color);
opacity: 1;
transition: background-color .2s;
&:hover {
background-color: #007ad9;
}
}
}
&.custombar2 {
.p-scrollpanel-wrapper {
border-right: 9px solid var(--surface-b);
border-bottom: 9px solid var(--surface-b);
}
.p-scrollpanel-bar {
background-color: var(--surface-d);
border-radius: 0;
opacity: 1;
transition: background-color .2s;
}
}
}
</style>`
}
}
}
},
components: {
LiveEditor
}
}
</script>

145
src/views/timeline/TimelineDoc.vue
View File

@ -238,9 +238,12 @@ export default {
</TabPanel> </TabPanel>
<TabPanel header="Source"> <TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/timeline" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/timeline" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<LiveEditor name="TimelineDemo" :sources="sources"/>
</div>
<pre v-code> <pre v-code>
<code><template v-pre> <code><template v-pre>
&lt;div class="card"&gt; &lt;div class="card"&gt;
@ -361,3 +364,145 @@ export default {
</TabView> </TabView>
</div> </div>
</template> </template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Left Align</h5>
<Timeline :value="events1">
<template #content="slotProps">
{{slotProps.item.status}}
</template>
</Timeline>
</div>
<div class="card">
<h5>Right Align</h5>
<Timeline :value="events1" align="right">
<template #content="slotProps">
{{slotProps.item.status}}
</template>
</Timeline>
</div>
<div class="card">
<h5>Alternate Align</h5>
<Timeline :value="events1" align="alternate">
<template #content="slotProps">
{{slotProps.item.status}}
</template>
</Timeline>
</div>
<div class="card">
<h5>Opposite Content</h5>
<Timeline :value="events1">
<template #opposite="slotProps">
<small class="p-text-secondary">{{slotProps.item.date}}</small>
</template>
<template #content="slotProps">
{{slotProps.item.status}}
</template>
</Timeline>
</div>
<div class="card">
<h5>Horizontal</h5>
<h6>Top Align</h6>
<Timeline :value="events2" layout="horizontal" align="top">
<template #content="slotProps">
{{slotProps.item}}
</template>
</Timeline>
<h6>Bottom Align</h6>
<Timeline :value="events2" layout="horizontal" align="bottom">
<template #content="slotProps">
{{slotProps.item}}
</template>
</Timeline>
<h6>Alternate Align</h6>
<Timeline :value="events2" layout="horizontal" align="alternate">
<template #opposite>
&nbsp;
</template>
<template #content="slotProps">
{{slotProps.item}}
</template>
</Timeline>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
events1: [
{status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg'},
{status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7'},
{status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800'},
{status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B'}
],
events2: [
"2020", "2021", "2022", "2023"
]
}
}
}`,
style: `<style lang="scss" scoped>
.custom-marker {
display: flex;
width: 2rem;
height: 2rem;
align-items: center;
justify-content: center;
color: #ffffff;
border-radius: 50%;
z-index: 1;
}
::v-deep(.p-timeline-event-content)
::v-deep(.p-timeline-event-opposite) {
line-height: 1;
}
@media screen and (max-width: 960px) {
::v-deep(.customized-timeline) {
.p-timeline-event:nth-child(even) {
flex-direction: row !important;
.p-timeline-event-content {
text-align: left !important;
}
}
.p-timeline-event-opposite {
flex: 0;
}
.p-card {
margin-top: 1rem;
}
}
}
</style>`
}
}
}
},
components: {
LiveEditor
}
}
</script>

43
src/views/toolbar/ToolbarDoc.vue
View File

@ -62,9 +62,12 @@ import Toolbar from 'primevue/toolbar';
</TabPanel> </TabPanel>
<TabPanel header="Source"> <TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/toolbar" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/toolbar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<LiveEditor name="ToolbarDemo" :sources="sources" :components="['Button']"/>
</div>
<pre v-code> <pre v-code>
<code><template v-pre> <code><template v-pre>
&lt;Toolbar&gt; &lt;Toolbar&gt;
@ -121,3 +124,43 @@ export default {
</TabView> </TabView>
</div> </div>
</template> </template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<Toolbar>
<template #left>
<Button label="New" icon="pi pi-plus" class="p-mr-2" />
<Button label="Upload" icon="pi pi-upload" class="p-button-success" />
<i class="pi pi-bars p-toolbar-separator p-mr-2" />
</template>
<template #right>
<Button icon="pi pi-search" class="p-mr-2" />
<Button icon="pi pi-calendar" class="p-button-success p-mr-2" />
<Button icon="pi pi-times" class="p-button-danger" />
</template>
</Toolbar>
</div>
</div>
</template>
<script>
export default {
}`
}
}
}
},
components: {
LiveEditor
}
}
</script>