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

Visual demo fixes

pull/4556/head
Tuğçe Küçükoğlu 2023-09-26 15:14:16 +03:00
parent 50dd991655
commit f534e4a1ad
19 changed files with 95 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
doc/chart/ChartJSDoc.vue
View File

@ -11,7 +11,8 @@ export default {
return {
code: {
basic: `
npm install chart.js`
npm install chart.js
`
}
};
}

6
doc/confirmdialog/ConfirmationServiceDoc.vue
View File

@ -19,13 +19,15 @@ import {createApp} from 'vue';
import ConfirmationService from 'primevue/confirmationservice';
const app = createApp(App);
app.use(ConfirmationService);`
app.use(ConfirmationService);
`
},
code2: {
basic: `
import { useConfirm } from "primevue/useconfirm";
const confirm = useConfirm();`
const confirm = useConfirm();
`
}
};
}

6
doc/confirmpopup/ConfirmationServiceDoc.vue
View File

@ -19,13 +19,15 @@ import {createApp} from 'vue';
import ConfirmationService from 'primevue/confirmationservice';
const app = createApp(App);
app.use(ConfirmationService);`
app.use(ConfirmationService);
`
},
code2: {
basic: `
import { useConfirm } from "primevue/useconfirm";
const confirm = useConfirm();`
const confirm = useConfirm();
`
}
};
}

4
doc/dataview/PrimeFlexDoc.vue
View File

@ -11,7 +11,9 @@ export default {
data() {
return {
code1: {
basic: `npm install primeflex`
basic: `
npm install primeflex
`
},
code2: {
basic: `

6
doc/dynamicdialog/CloseDialogDoc.vue
View File

@ -10,14 +10,16 @@ export default {
data() {
return {
code: {
basic: `export default {
basic: `
export default {
inject: ['dialogRef'],
methods:{
closeDialog() {
this.dialogRef.close();
}
}
}`,
}
`,
options: `
export default {
inject: ['dialogRef'],

6
doc/dynamicdialog/DialogServiceDoc.vue
View File

@ -19,13 +19,15 @@ import {createApp} from 'vue';
import DialogService from 'primevue/dialogservice';
const app = createApp(App);
app.use(DialogService);`
app.use(DialogService);
`
},
code2: {
basic: `
import { useDialog } from 'primevue/usedialog';
const dialog = useDialog();`,
const dialog = useDialog();
`,
options: `const dialogRef = this.$dialog;`,
composition: `
import { useDialog } from 'primevue/usedialog';

3
doc/dynamicdialog/EmitsDoc.vue
View File

@ -22,7 +22,8 @@ this.$dialog.open(ProductListDemo, {
console.log(e); // {user: 'primetime'}
}
},
};`
};
`
},
code2: {
basic: `

3
doc/dynamicdialog/OpenDialogDoc.vue
View File

@ -19,7 +19,8 @@ export default {
this.$dialog.open(ProductListDemo, {});
}
}
}`,
}
`,
options: `
import ProductListDemo from './ProductListDemo';

18
doc/dynamicdialog/PassingDataDoc.vue
View File

@ -21,15 +21,18 @@ this.$dialog.open(ProductListDemo, {
data: {
user: 'primetime'
}
};`
};
`
},
code2: {
basic: `export default {
basic: `
export default {
inject: ['dialogRef'],
mounted:{
const params = this.dialogRef.data; // {user: 'primetime'}
}
}`
}
`
},
code3: {
basic: `
@ -37,17 +40,20 @@ this.$dialog.open(ProductListDemo, {
onClose(options) {
const callbackParams = options.data; // {id: 12}
}
);`
);
`
},
code4: {
basic: `export default {
basic: `
export default {
inject: ['dialogRef'],
methods:{
closeDialog() {
this.dialogRef.close({id: 12});
}
}
}`
}
`
}
};
}

4
doc/editor/QuillDoc.vue
View File

@ -10,7 +10,9 @@ export default {
data() {
return {
code: {
basic: `npm install quill`
basic: `
npm install quill
`
}
};
}

3
doc/focustrap/ImportDoc.vue
View File

@ -11,7 +11,8 @@ export default {
basic: `
import FocusTrap from 'primevue/focustrap';
app.directive('focustrap', FocusTrap);`
app.directive('focustrap', FocusTrap);
`
}
};
}

2
doc/message/TemplateDoc.vue
View File

@ -19,7 +19,7 @@
</div>
<DocSectionCode :code="code1" />
<p><i>container</i> templating allows customizing the Dialog component.</p>
<p><i>container</i> templating allows customizing the Message component.</p>
<div class="card">
<Message style="border: none">
<template #container>

3
doc/ripple/ConfigurationDoc.vue
View File

@ -13,7 +13,8 @@ export default {
basic: `
mounted() {
this.$primevue.config.ripple = true;
}`,
}
`,
options: `
mounted() {
this.$primevue.config.ripple = true;

54
doc/ripple/CustomDoc.vue
View File

@ -3,9 +3,9 @@
<p>Default styling of the animation adds a shade of white. This can easily be customized using css that changes the color of <i>p-ink</i> element.</p>
</DocSectionText>
<div class="card flex justify-content-center align-items-center gap-2">
<div v-ripple class="p-ripple card shadow-2 styled-box-green">Green</div>
<div v-ripple class="p-ripple card shadow-2 styled-box-orange">Orange</div>
<div v-ripple class="p-ripple card shadow-2 styled-box-purple">Purple</div>
<div v-ripple class="p-ripple box styled-box-green shadow-2">Green</div>
<div v-ripple class="p-ripple box styled-box-orange shadow-2">Orange</div>
<div v-ripple class="p-ripple box styled-box-purple shadow-2">Purple</div>
</div>
<DocSectionCode :code="code" />
</template>
@ -16,21 +16,18 @@ export default {
return {
code: {
basic: `
<div v-ripple class="p-ripple card shadow-2 styled-box-green">Green</div>
<div v-ripple class="p-ripple card shadow-2 styled-box-orange">Orange</div>
<div v-ripple class="p-ripple card shadow-2 styled-box-purple">Purple</div>`,
<div v-ripple class="p-ripple box styled-box-green shadow-2">Green</div>
<div v-ripple class="p-ripple box styled-box-orange shadow-2">Orange</div>
<div v-ripple class="p-ripple box styled-box-purple shadow-2">Purple</div>`,
options: `
<template>
<div class="flex justify-content-center align-items-center">
<div v-ripple class="p-ripple card shadow-2 styled-box-green">Green</div>
<div v-ripple class="p-ripple card shadow-2 styled-box-orange">Orange</div>
<div v-ripple class="p-ripple card shadow-2 styled-box-purple">Purple</div>
<div v-ripple class="p-ripple box styled-box-green shadow-2">Green</div>
<div v-ripple class="p-ripple box styled-box-orange shadow-2">Orange</div>
<div v-ripple class="p-ripple box styled-box-purple shadow-2">Purple</div>
</div>
</template>
<script>
<\/script>
<style scoped>
::v-deep(.styled-box-green .p-ink) {
background: rgba(75, 175, 80, 0.3);
@ -42,19 +39,24 @@ export default {
::v-deep(.styled-box-purple .p-ink) {
background: rgba(156, 39, 176, 0.3);
}
.box {
background: var(--surface-card);
padding: 2rem;
border-radius: 10px;
width: 110px;
text-align: center;
}
</style>`,
composition: `
<template>
<div class="flex justify-content-center align-items-center">
<div v-ripple class="p-ripple card shadow-2 styled-box-green">Green</div>
<div v-ripple class="p-ripple card shadow-2 styled-box-orange">Orange</div>
<div v-ripple class="p-ripple card shadow-2 styled-box-purple">Purple</div>
<div v-ripple class="p-ripple box styled-box-green shadow-2">Green</div>
<div v-ripple class="p-ripple box styled-box-orange shadow-2">Orange</div>
<div v-ripple class="p-ripple box styled-box-purple shadow-2">Purple</div>
</div>
</template>
<script setup>
<\/script>
<style scoped>
::v-deep(.styled-box-green .p-ink) {
background: rgba(75, 175, 80, 0.3);
@ -66,6 +68,14 @@ export default {
::v-deep(.styled-box-purple .p-ink) {
background: rgba(156, 39, 176, 0.3);
}
.box {
background: var(--surface-card);
padding: 2rem;
border-radius: 10px;
width: 110px;
text-align: center;
}
</style>`
}
};
@ -74,6 +84,14 @@ export default {
</script>
<style scoped>
.box {
background: var(--surface-card);
padding: 2rem;
border-radius: 10px;
width: 110px;
text-align: center;
}
::v-deep(.styled-box-green .p-ink) {
background: rgba(75, 175, 80, 0.3);
}

6
doc/ripple/ImportDoc.vue
View File

@ -20,13 +20,15 @@ import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
const app = createApp(App);
app.use(PrimeVue, { ripple: true });`
app.use(PrimeVue, { ripple: true });
`
},
code2: {
basic: `
import Ripple from 'primevue/ripple';
app.directive('ripple', Ripple);`
app.directive('ripple', Ripple);
`
}
};
}

3
doc/styleclass/ImportDoc.vue
View File

@ -11,7 +11,8 @@ export default {
basic: `
import StyleClass from 'primevue/styleclass';
app.directive('styleclass', StyleClass);`
app.directive('styleclass', StyleClass);
`
}
};
}

3
doc/terminal/ImportDoc.vue
View File

@ -10,7 +10,8 @@ export default {
code: {
basic: `
import Terminal from 'primevue/terminal';
import TerminalService from 'primevue/terminalservice'`
import TerminalService from 'primevue/terminalservice'
`
}
};
}

6
doc/toast/ToastServiceDoc.vue
View File

@ -19,13 +19,15 @@ import {createApp} from 'vue';
import ToastService from 'primevue/toastservice';
const app = createApp(App);
app.use(ToastService);`
app.use(ToastService);
`
},
code2: {
basic: `
import { useToast } from 'primevue/usetoast';
const toast = useToast();`
const toast = useToast();
`
}
};
}

3
doc/tooltip/ImportDoc.vue
View File

@ -11,7 +11,8 @@ export default {
basic: `
import Tooltip from 'primevue/tooltip';
app.directive('tooltip', Tooltip);`
app.directive('tooltip', Tooltip);
`
}
};
}