Skip to content

Commit

Permalink
some csb for components
Browse files Browse the repository at this point in the history
  • Loading branch information
@tugcekucukoglu
tugcekucukoglu committed Jan 8, 2021
1 parent 1b26207 commit 754131d
Show file tree
Hide file tree
Showing 6 changed files with 512 additions and 23 deletions.
73 changes: 69 additions & 4 deletions src/views/card/CardDoc.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,9 +72,12 @@ import Card from 'primevue/card';
</TabPanel>

<TabPanel header="Source">
<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>
</a>
<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">
<span>View on GitHub</span>
</a>
<LiveEditor name="CardDemo" :sources="sources" :components="['Card', 'Button']"/>
</div>
<pre v-code>
<code><template v-pre>
&lt;Card style="width: 25rem; margin-bottom: 2em"&gt;
Expand Down Expand Up @@ -111,4 +114,66 @@ import Card from 'primevue/card';
</TabPanel>
</TabView>
</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>
60 changes: 56 additions & 4 deletions src/views/editor/EditorDoc.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,9 +147,12 @@ npm install quill --save
</TabPanel>

<TabPanel header="Source">
<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>
</a>
<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">
<span>View on GitHub</span>
</a>
<LiveEditor name="EditorDemo" :sources="sources" :directives="['Tooltip']"/>
</div>
<pre v-code>
<code><template v-pre>
&lt;h3&gt;Default&lt;/h3&gt;
Expand Down Expand Up @@ -183,4 +186,53 @@ export default {
</TabPanel>
</TabView>
</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>
68 changes: 64 additions & 4 deletions src/views/fieldset/FieldsetDoc.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,9 +161,12 @@ import Fieldset from 'primevue/fieldset';
</TabPanel>

<TabPanel header="Source">
<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>
</a>
<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">
<span>View on GitHub</span>
</a>
<LiveEditor name="FieldsetDemo" :sources="sources"/>
</div>
<pre v-code>
<code><template v-pre>
&lt;h5&gt;Regular&lt;/h5&gt;
Expand Down Expand Up @@ -200,4 +203,61 @@ export default {
</TabPanel>
</TabView>
</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>
132 changes: 128 additions & 4 deletions src/views/scrollpanel/ScrollPanelDoc.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,9 +94,12 @@ import ScrollPanel from 'primevue/scrollpanel';
</TabPanel>

<TabPanel header="Source">
<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>
</a>
<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">
<span>View on GitHub</span>
</a>
<LiveEditor name="ScrollPanelDemo" :sources="sources"/>
</div>

<pre v-code>
<code><template v-pre>
Expand Down Expand Up @@ -208,4 +211,125 @@ export default {
</TabPanel>
</TabView>
</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>
Loading

0 comments on commit 754131d

Please sign in to comment.