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

update LiveEditor

pull/846/head
Tuğçe Küçükoğlu 2021-01-08 17:28:57 +03:00
parent 03619ffd21
commit 62dceb0e81
11 changed files with 804 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
src/views/chart/BarChartDoc.vue
View File

@ -2,6 +2,9 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<div class="p-d-flex">
<LiveEditor name="ChartDemo" :sources="sources" class="p-ml-auto"/>
</div>
<pre v-code>
<code><template v-pre>
&lt;h5&gt;Vertical&lt;/h3&gt;
@ -168,3 +171,149 @@ 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>Vertical</h5>
<Chart type="bar" :data="basicData" :options="basicOptions" />
</div>
<div class="card">
<h5>Horizontal</h5>
<Chart type="horizontalBar" :data="basicData" :options="basicOptions" />
</div>
<div class="card">
<h5>Multi Axis</h5>
<Chart type="bar" :data="multiAxisData" :options="multiAxisOptions "/>
</div>
<div class="card">
<h5>Stacked</h5>
<Chart type="bar" :data="stackedData" :options="stackedOptions" />
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
basicData: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: '#42A5F5',
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: 'My Second dataset',
backgroundColor: '#FFA726',
data: [28, 48, 40, 19, 86, 27, 90]
}
]
},
multiAxisData: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Dataset 1',
backgroundColor: ['#EC407A','#AB47BC','#42A5F5','#7E57C2','#66BB6A','#FFCA28','#26A69A'],
yAxisID: 'y-axis-1',
data: [65, 59, 80, 81, 56, 55, 10]
}, {
label: 'Dataset 2',
backgroundColor: '#78909C',
yAxisID: 'y-axis-2',
data: [28, 48, 40, 19, 86, 27, 90]
}]
},
multiAxisOptions: {
responsive: true,
tooltips: {
mode: 'index',
intersect: true
},
scales: {
yAxes: [{
type: 'linear',
display: true,
position: 'left',
id: 'y-axis-1',
ticks: {
min: 0,
max: 100
}
},
{
type: 'linear',
display: true,
position: 'right',
id: 'y-axis-2',
gridLines: {
drawOnChartArea: false
},
ticks: {
min: 0,
max: 100
}
}]
}
},
stackedData: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
type: 'bar',
label: 'Dataset 1',
backgroundColor: '#42A5F5',
data: [50,25,12,48,90,76,42]
}, {
type: 'bar',
label: 'Dataset 2',
backgroundColor: '#66BB6A',
data: [21,84,24,75,37,65,34]
}, {
type: 'bar',
label: 'Dataset 3',
backgroundColor: '#FFA726',
data: [41,52,24,74,23,21,32]
}]
},
stackedOptions: {
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
},
basicOptions: null
}
}
}`
}
}
}
},
components: {
LiveEditor
}
}
</script>

60
src/views/chart/ComboChartDoc.vue
View File

@ -2,6 +2,9 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<div class="p-d-flex">
<LiveEditor name="ChartDemo" :sources="sources" class="p-ml-auto"/>
</div>
<pre v-code>
<code><template v-pre>
&lt;Chart type="bar" :data="chartData" :options="chartOptions"/&gt;
@ -82,3 +85,60 @@ 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">
<Chart type="bar" :data="chartData"/>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
chartData: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
type: 'line',
label: 'Dataset 1',
borderColor: '#42A5F5',
borderWidth: 2,
fill: false,
data: [50,25,12,48,56,76,42]
}, {
type: 'bar',
label: 'Dataset 2',
backgroundColor: '#66BB6A',
data: [21,84,24,75,37,65,34],
borderColor: 'white',
borderWidth: 2
}, {
type: 'bar',
label: 'Dataset 3',
backgroundColor: '#FFA726',
data: [41,52,24,74,23,21,32]
}]
}
}
}
}`
}
}
}
},
components: {
LiveEditor
}
}
</script>

47
src/views/chart/DoughnutChartDoc.vue
View File

@ -2,6 +2,9 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<div class="p-d-flex">
<LiveEditor name="ChartDemo" :sources="sources" class="p-ml-auto" />
</div>
<pre v-code>
<code><template v-pre>
&lt;Chart type="doughnut" :data="chartData" /&gt;
@ -40,3 +43,47 @@ 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">
<Chart type="doughnut" :data="chartData" />
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
chartData: {
labels: ['A','B','C'],
datasets: [
{
data: [300, 50, 100],
backgroundColor: ["#FF6384","#36A2EB","#FFCE56"],
hoverBackgroundColor: ["#FF6384","#36A2EB","#FFCE56"]
}
]
}
}
}
}`
}
}
}
},
components: {
LiveEditor
}
}
</script>

128
src/views/chart/LineChartDoc.vue
View File

@ -2,6 +2,9 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<div class="p-d-flex">
<LiveEditor name="ChartDemo" :sources="sources" class="p-ml-auto" />
</div>
<pre v-code>
<code><template v-pre>
&lt;h3&gt;Basic&lt;/h3&gt;
@ -115,3 +118,128 @@ 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>Basic</h5>
<Chart type="line" :data="basicData" :options="basicOptions" />
</div>
<div class="card">
<h5>Multi Axis</h5>
<Chart type="line" :data="multiAxisData" :options="multiAxisOptions" />
</div>
<div class="card">
<h5>Line Styles</h5>
<Chart type="line" :data="lineStylesData" :options="basicOptions" />
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
basicData: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: '#42A5F5'
},
{
label: 'Second Dataset',
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
borderColor: '#FFA726'
}
]
},
multiAxisData: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Dataset 1',
fill: false,
borderColor: '#42A5F5',
yAxisID: 'y-axis-1',
data: [65, 59, 80, 81, 56, 55, 10]
}, {
label: 'Dataset 2',
fill: false,
borderColor: '#00bb7e',
yAxisID: 'y-axis-2',
data: [28, 48, 40, 19, 86, 27, 90]
}]
},
multiAxisOptions: {
responsive: true,
hoverMode: 'index',
stacked: false,
scales: {
yAxes: [{
type: 'linear',
display: true,
position: 'left',
id: 'y-axis-1',
}, {
type: 'linear',
display: true,
position: 'right',
id: 'y-axis-2',
gridLines: {
drawOnChartArea: false
}
}]
}
},
lineStylesData: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: '#42A5F5'
},
{
label: 'Second Dataset',
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
borderDash: [5, 5],
borderColor: '#66BB6A'
},
{
label: 'Third Dataset',
data: [12, 51, 62, 33, 21, 62, 45],
fill: true,
borderColor: '#FFA726',
backgroundColor: 'rgba(255,167,38,0.2)'
}
]
},
basicOptions: null
}
}
}`
}
}
}
},
components: {
LiveEditor
}
}
</script>

47
src/views/chart/PieChartDoc.vue
View File

@ -2,6 +2,9 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<div class="p-d-flex">
<LiveEditor name="ChartDemo" :sources="sources" class="p-ml-auto" />
</div>
<pre v-code>
<code><template v-pre>
&lt;Chart type="pie" :data="chartData" /&gt;
@ -40,3 +43,47 @@ 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">
<Chart type="pie" :data="chartData" />
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
chartData: {
labels: ['A','B','C'],
datasets: [
{
data: [300, 50, 100],
backgroundColor: ["#42A5F5","#66BB6A","#FFA726"],
hoverBackgroundColor: ["#64B5F6","#81C784","#FFB74D"]
}
]
}
}
}
}`
}
}
}
},
components: {
LiveEditor
}
}
</script>

45
src/views/chart/PolarAreaChartDoc.vue
View File

@ -2,6 +2,9 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<div class="p-d-flex">
<LiveEditor name="ChartDemo" :sources="sources" class="p-ml-auto" />
</div>
<pre v-code>
<code><template v-pre>
&lt;Chart type="polarArea" :data="chartData" /&gt;
@ -48,3 +51,45 @@ 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">
<Chart type="polarArea" :data="chartData" />
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
chartData: {
datasets: [{
data: [11,16,7,3,14],
backgroundColor: ["#42A5F5","#66BB6A","#FFA726","#26C6DA","#7E57C2"],
label: 'My dataset'
}],
labels: ["Red","Green","Yellow","Grey","Blue"]
}
}
}
}`
}
}
}
},
components: {
LiveEditor
}
}
</script>

62
src/views/chart/RadarChartDoc.vue
View File

@ -2,6 +2,9 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<div class="p-d-flex">
<LiveEditor name="ChartDemo" :sources="sources" class="p-ml-auto" />
</div>
<pre v-code>
<code><template v-pre>
&lt;Chart type="radar" :data="chartData" /&gt;
@ -47,3 +50,62 @@ 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">
<Chart type="radar" :data="chartData" />
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
chartData: {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(179,181,198,0.2)',
borderColor: 'rgba(179,181,198,1)',
pointBackgroundColor: 'rgba(179,181,198,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(179,181,198,1)',
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: 'My Second dataset',
backgroundColor: 'rgba(255,99,132,0.2)',
borderColor: 'rgba(255,99,132,1)',
pointBackgroundColor: 'rgba(255,99,132,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(255,99,132,1)',
data: [28, 48, 40, 19, 96, 27, 100]
}
]
},
}
}
}`
}
}
}
},
components: {
LiveEditor
}
}
</script>

34
src/views/liveeditor/LiveEditor.vue
View File

@ -121,7 +121,7 @@ export default {
let content = this.sources.template.content;
let style = this.sources.template.style || '';
let scriptText = 'script';
let _files = {}, components = '', imports = '';
let _files = {}, element = '', components = '', imports = '', directives = '';
_files[`src/components/${name}${extension}`] = {
content: `${content}
@ -130,6 +130,13 @@ export default {
${style}`
}
if(name === 'ToastDemo'){
imports += `import ToastService from 'primevue/toastservice';
`;
directives += `app.use(ToastService);
`;
}
if(this.components) {
this.components.forEach(comp => {
imports += `import ${comp} from "primevue/${comp.toLowerCase()}";
@ -139,6 +146,15 @@ ${style}`
})
}
if(name !== 'TooltipDemo') {
element += `app.component("${name.slice(0, -4)}", ${name.slice(0, -4)});`;
}
if(name === 'TooltipDemo' || name === 'BadgeDemo'){
directives += `app.directive('${name.slice(0, -4).toLowerCase()}', ${name.slice(0, -4)});
`;
}
_files['src/main.js'] = {
content: `import { createApp } from "vue";
import "primeflex/primeflex.css";
@ -147,11 +163,12 @@ import "primevue/resources/primevue.min.css";
import "primeicons/primeicons.css";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import ${this.name.slice(0, -4)} from "primevue/${this.name.slice(0, -4).toLowerCase()}";
import ${name.slice(0, -4)} from "primevue/${name.slice(0, -4).toLowerCase()}";
${imports}
const app = createApp(App);
app.use(PrimeVue, { ripple: true });
app.component("${this.name.slice(0, -4)}", ${this.name.slice(0, -4)});
${directives}
${element}
${components}
app.mount("#app");
`
@ -443,20 +460,23 @@ img.flag {
});
}
if(this.name === 'EditorDemo') {
if(name === 'EditorDemo') {
extDependencies['quill'] = "^1.3.7";
}
if(this.name === 'FullCalendarDemo') {
if(name === 'FullCalendarDemo') {
extDependencies['@fullcalendar/core'] = "5.4.0";
extDependencies['@fullcalendar/daygrid'] = "5.4.0";
extDependencies['@fullcalendar/interaction'] = "5.4.0";
extDependencies['@fullcalendar/timegrid'] = "5.4.0";
}
if(name === 'ChartDemo') {
extDependencies['chart.js'] = "2.7.3";
}
let mittComponents = ['OrganizationChartDemo', 'ConfirmDialogDemo', 'ConfirmPopupDemo'];
let mittComponents = ['ToastDemo', 'OrganizationChartDemo', 'ConfirmDialogDemo', 'ConfirmPopupDemo'];
mittComponents.forEach(cmp => {
if(this.name === cmp) {
if(name === cmp) {
extDependencies['mitt'] = "^2.1.0";
}
});

67
src/views/sidebar/SidebarDoc.vue
View File

@ -209,9 +209,12 @@ import Sidebar from 'primevue/sidebar';
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/sidebar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="SidebarDemo" :sources="sources" :components="['Button', 'Calendar']"/>
</div>
<pre v-code>
<code><template v-pre>
&lt;Button icon="pi pi-arrow-right" @click="visibleLeft = true" class="p-mr-2" /&gt;
@ -261,3 +264,67 @@ 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">
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" class="p-mr-2" />
<Button icon="pi pi-arrow-left" @click="visibleRight = true" class="p-mr-2" />
<Button icon="pi pi-arrow-down" @click="visibleTop = true" class="p-mr-2" />
<Button icon="pi pi-arrow-up" @click="visibleBottom = true" class="p-mr-2" />
<Button icon="pi pi-th-large" @click="visibleFull = true" />
<Sidebar v-model:visible="visibleLeft" :baseZIndex="1000">
<h3>Left Sidebar</h3>
<Calendar id="basic" />
</Sidebar>
<Sidebar v-model:visible="visibleRight" :baseZIndex="1000" position="right">
<h3>Right Sidebar</h3>
</Sidebar>
<Sidebar v-model:visible="visibleTop" :baseZIndex="1000" position="top">
<h3>Top Sidebar</h3>
</Sidebar>
<Sidebar v-model:visible="visibleBottom" :baseZIndex="1000" position="bottom">
<h3>Bottom Sidebar</h3>
</Sidebar>
<Sidebar v-model:visible="visibleFull" :baseZIndex="1000" position="full">
<h3>Full Screen</h3>
</Sidebar>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
visibleLeft: false,
visibleRight: false,
visibleTop: false,
visibleBottom: false,
visibleFull: false
}
}
}`
}
}
}
},
components: {
LiveEditor
}
}
</script>

101
src/views/toast/ToastDoc.vue
View File

@ -282,9 +282,12 @@ this.$toast.add({severity:'success', summary: 'Specific Message', group: 'mykey'
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/toast" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="ToastDemo" :sources="sources" :components="['Button']" />
</div>
<pre v-code>
<code><template v-pre>
&lt;h5&gt;Severities&lt;/h5&gt;
@ -356,3 +359,101 @@ 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>Severities</h5>
<Button label="Success" class="p-button-success" @click="showSuccess" />
<Button label="Info" class="p-button-info" @click="showInfo" />
<Button label="Warn" class="p-button-warning" @click="showWarn" />
<Button label="Error" class="p-button-danger" @click="showError" />
<h5>Positions</h5>
<Button label="Top Left" class="p-mr-2" @click="showTopLeft" />
<Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
<Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
<h5>Options</h5>
<Button @click="showMultiple" label="Multiple" class="p-button-warning" />
<Button @click="showSticky" label="Sticky" />
<h5>Remove All</h5>
<Button @click="clear" label="Clear" />
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
messages: [],
}
},
methods: {
showSuccess() {
this.$toast.add({severity:'success', summary: 'Success Message', detail:'Message Content', life: 3000});
},
showInfo() {
this.$toast.add({severity:'info', summary: 'Info Message', detail:'Message Content', life: 3000});
},
showWarn() {
this.$toast.add({severity:'warn', summary: 'Warn Message', detail:'Message Content', life: 3000});
},
showError() {
this.$toast.add({severity:'error', summary: 'Error Message', detail:'Message Content', life: 3000});
},
showTopLeft() {
this.$toast.add({severity: 'info', summary: 'Info Message', detail: 'Message Content', group: 'tl', life: 3000});
},
showBottomLeft() {
this.$toast.add({severity:'warn', summary: 'Warn Message', detail:'Message Content', group: 'bl', life: 3000});
},
showBottomRight() {
this.$toast.add({severity:'success', summary: 'Success Message', detail:'Message Content', group: 'br', life: 3000});
},
showSticky() {
this.$toast.add({severity: 'info', summary: 'Sticky Message', detail: 'Message Content'});
},
showMultiple() {
this.$toast.add({severity:'info', summary:'Message 1', detail:'Message 1 Content', life: 3000});
this.$toast.add({severity:'info', summary:'Message 2', detail:'Message 2 Content', life: 3000});
this.$toast.add({severity:'info', summary:'Message 3', detail:'Message 3 Content', life: 3000});
},
clear() {
this.$toast.removeAllGroups();
}
}
}`
},
style: `<style lang="scss" scoped>
button {
min-width: 10rem;
margin-right: .5rem;
}
@media screen and (max-width: 960px) {
button {
width: 100%;
margin-bottom: .5rem;
}
}
</style>`
}
}
},
components: {
LiveEditor
}
}
</script>

53
src/views/tooltip/TooltipDoc.vue
View File

@ -89,9 +89,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/tooltip" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="TooltipDemo" :sources="sources" :components="['InputText', 'Button']"/>
</div>
<pre v-code>
<code><template v-pre>
&lt;h3&gt;Positions&lt;/h3&gt;
@ -127,3 +130,53 @@ 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>Positions</h5>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-3">
<InputText type="text" placeholder="Right" v-tooltip.right="'Enter your username'" />
</div>
<div class="p-col-12 p-md-3">
<InputText type="text" placeholder="Top" v-tooltip.top="'Enter your username'" />
</div>
<div class="p-col-12 p-md-3">
<InputText type="text" placeholder="Bottom" v-tooltip.bottom="'Enter your username'" />
</div>
<div class="p-col-12 p-md-3">
<InputText type="text" placeholder="Left" v-tooltip.left="'Enter your username'" />
</div>
</div>
<h5>Focus and Blur</h5>
<InputText type="text" placeholder="Focus" v-tooltip.bottom.focus="'Enter your username'" />
<h5>Button</h5>
<Button type="button" label="Save" icon="pi pi-check" v-tooltip="'Click to proceed'" />
</div>
</div>
</div>
</template>
<script>
export default {
}`
}
}
}
},
components: {
LiveEditor
}
}
</script>