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

csb added

pull/880/head
Tuğçe Küçükoğlu 2021-01-19 11:43:39 +03:00
parent 5c35abb9d0
commit 3ac8b3fa16
6 changed files with 473 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
src/views/avatar/AvatarDoc.vue
View File

@ -182,9 +182,12 @@ import AvatarGroup from 'primevue/avatargroup';
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/avatar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="AvatarDemo" :sources="sources" :components="['AvatarGroup']" />
</div>
<pre v-code>
<code><template v-pre>
&lt;div class="p-grid"&gt;
@ -279,3 +282,115 @@ import AvatarGroup from 'primevue/avatargroup';
</TabView>
</div>
</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="p-grid">
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Label</h5>
<Avatar label="P" class="p-mr-2" size="xlarge" />
<Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
<Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Label - Circle</h5>
<Avatar label="P" class="p-mr-2" size="xlarge" shape="circle" />
<Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
<Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Label - Badge</h5>
<Avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" />
</div>
</div>
</div>
<div class="p-grid">
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Icon</h5>
<Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" />
<Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
<Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Icon - Circle</h5>
<Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" shape="circle" />
<Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
<Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Icon - Badge</h5>
<Avatar icon="pi pi-user" size="xlarge" v-badge="4"/>
</div>
</div>
</div>
<div class="p-grid">
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Image</h5>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="xlarge" shape="circle" />
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="large" shape="circle" />
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" shape="circle" />
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Avatar Group</h5>
<AvatarGroup class="p-mb-3">
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
<Avatar label="+2" shape="circle" size="large" style="background-color:#9c27b0; color: #ffffff" />
</AvatarGroup>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="card">
<h5>Image - Badge</h5>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="xlarge" v-badge.danger="4" />
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
}`
}
}
}
},
components: {
LiveEditor
}
}
</script>

69
src/views/chip/ChipDoc.vue
View File

@ -141,9 +141,12 @@ import Chip from 'primevue/chip';
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/chip" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="ChipDemo" :sources="sources" />
</div>
<pre v-code>
<code><template v-pre>
&lt;h5&gt;Basic&lt;/h5&gt;
@ -184,3 +187,69 @@ import Chip from 'primevue/chip';
</TabView>
</div>
</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>Basic</h5>
<div class="p-d-flex p-ai-center">
<Chip label="Action" class="p-mr-2" />
<Chip label="Comedy" class="p-mr-2" />
<Chip label="Mystery" class="p-mr-2" />
<Chip label="Thriller" removable />
</div>
<h5>Icon</h5>
<div class="p-d-flex p-ai-center">
<Chip label="Apple" icon="pi pi-apple" class="p-mr-2" />
<Chip label="Facebook" icon="pi pi-facebook" class="p-mr-2" />
<Chip label="Google" icon="pi pi-google" class="p-mr-2" />
<Chip label="Microsoft" icon="pi pi-microsoft" removable />
</div>
<h5>Image</h5>
<div class="p-d-flex p-ai-center">
<Chip label="Amy Elsner" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" />
<Chip label="Asiya Javayant" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" />
<Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" />
<Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" removable />
</div>
<h5>Styling</h5>
<div class="p-d-flex p-ai-center">
<Chip label="Action" class="p-mr-2 custom-chip" />
<Chip label="Apple" icon="pi pi-apple" class="p-mr-2 custom-chip" />
<Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 custom-chip" />
<Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="custom-chip" removable />
</div>
</div>
</div>
</div>
</template>
<script>
export default {
}`,
style: `<style lang="scss" scoped>
.p-chip.custom-chip {
background: var(--primary-color);
color: var(--primary-color-text);
}
</style>`
}
}
}
},
components: {
LiveEditor
}
}
</script>

68
src/views/progressbar/ProgressBarDoc.vue
View File

@ -118,9 +118,12 @@ data() {
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/progressbar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="ProgressBarDemo" :sources="sources" />
</div>
<pre v-code>
<code><template v-pre>
&lt;h3&gt;Dynamic&lt;/h3&gt;
@ -172,3 +175,68 @@ export default {
</TabView>
</div>
</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>Dynamic</h5>
<ProgressBar :value="value1" />
<h5>Static</h5>
<ProgressBar :value="value2" :showValue="false" />
<h5>Indeterminate</h5>
<ProgressBar mode="indeterminate" style="height: .5em" />
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
value1: 0,
value2: 50
}
},
interval: null,
methods: {
startProgress() {
this.interval = setInterval(() => {
let newValue = this.value1 + Math.floor(Math.random() * 10) + 1;
if (newValue >= 100) {
newValue = 100;
}
this.value1 = newValue;
}, 2000);
},
endProgress() {
clearInterval(this.interval);
this.interval = null;
}
},
mounted() {
this.startProgress();
},
beforeUnmount() {
this.endProgress();
}
}`
}
}
}
},
components: {
LiveEditor
}
}
</script>

37
src/views/progressspinner/ProgressSpinnerDoc.vue
View File

@ -107,9 +107,12 @@ import ProgressSpinner from 'primevue/progressspinner';
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/progressspinner" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="ProgressSpinnerDemo" :sources="sources" />
</div>
<pre v-code>
<code><template v-pre>
&lt;h3&gt;Basic&lt;/h3&gt;
@ -123,3 +126,37 @@ import ProgressSpinner from 'primevue/progressspinner';
</TabView>
</div>
</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>Basic</h5>
<ProgressSpinner />
<h5>Custom</h5>
<ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/>
</div>
</div>
</div>
</template>
<script>
export default {
}`
}
}
}
},
components: {
LiveEditor
}
}
</script>

78
src/views/ripple/RippleDoc.vue
View File

@ -92,9 +92,12 @@ directives: {
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/ripple" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="RippleDemo" :sources="sources" />
</div>
<pre v-code>
<code><template v-pre>
&lt;div class="card-container p-d-flex"&gt;
@ -160,3 +163,78 @@ export default {}
</TabView>
</div>
</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-container p-d-flex">
<div class="card primary-box p-ripple" v-ripple>Default</div>
<div class="card styled-box-green p-ripple" v-ripple>Green</div>
<div class="card styled-box-orange p-ripple" v-ripple>Orange</div>
<div class="card styled-box-purple p-ripple" v-ripple>Purple</div>
</div>
</div>
</div>
</template>
<script>
export default {
}`,
style: `<style lang="scss" scoped>
::v-deep(.card-container) {
.card {
width: 75px;
height: 75px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1rem;
user-select: none;
padding: 0;
&.primary-box {
background-color: var(--primary-color);
padding: 0;
color: var(--primary-color-text);
}
&.styled-box-green {
.p-ink {
background: rgba(#4baf50, 0.3);
}
}
&.styled-box-orange {
.p-ink {
background: rgba(#ffc106, 0.3);
}
}
&.styled-box-purple {
.p-ink {
background: rgba(#9c27b0, 0.3);
}
}
&:last-child {
margin-right: 0;
}
}
}
</style>`
}
}
}
},
components: {
LiveEditor
}
}
</script>

89
src/views/terminal/TerminalDoc.vue
View File

@ -138,9 +138,12 @@ export default {
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/terminal" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="TerminalDemo" :sources="sources" />
</div>
<pre v-code>
<code>
&lt;p&gt;Enter "date" to display the current date, "greet &#123;0&#125;" for a message and "random" to get a random number.&lt;/p&gt;
@ -217,3 +220,89 @@ p {
</TabView>
</div>
</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">
<p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
<Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" />
</div>
</div>
</div>
</template>
<script>
import TerminalService from "primevue/terminalservice";
export default {
methods: {
commandHandler(text) {
let response;
let argsIndex = text.indexOf(' ');
let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
switch(command) {
case "date":
response = 'Today is ' + new Date().toDateString();
break;
case "greet":
response = 'Hola ' + text.substring(argsIndex + 1);
break;
case "random":
response = Math.floor(Math.random() * 100);
break;
default:
response = "Unknown command: " + command;
}
TerminalService.emit('response', response);
}
},
mounted() {
TerminalService.on('command', this.commandHandler);
},
beforeUnmount() {
TerminalService.off('command', this.commandHandler);
}
}`,
style: `<style lang="scss" scoped>
p {
margin-top: 0;
}
::v-deep(.dark-demo-terminal) {
background-color: #212121;
color: #ffffff;
.p-terminal-command {
color: #80CBC4;
}
.p-terminal-prompt {
color: #FFD54F;
}
.p-terminal-response {
color: #9FA8DA;
}
}
</style>`
}
}
}
},
components: {
LiveEditor
}
}
</script>