Documentation updates
Cagatay Civici
parent
c6f69602c1
commit
8036b64523
|
|
@ -12,14 +12,6 @@
|
||||||
"name": "Configuration",
|
"name": "Configuration",
|
||||||
"to": "/configuration"
|
"to": "/configuration"
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"name": "FilterService",
|
|
||||||
"to": "/filterservice"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Locale",
|
|
||||||
"to": "/locale"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"name": "Accessibility",
|
"name": "Accessibility",
|
||||||
"to": "/accessibility"
|
"to": "/accessibility"
|
||||||
|
|
@ -443,10 +435,6 @@
|
||||||
"name": "Overview",
|
"name": "Overview",
|
||||||
"to": "/theming"
|
"to": "/theming"
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"name": "Theme Designer",
|
|
||||||
"href": "https://www.primefaces.org/designer/primevue"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"name": "Visual Editor",
|
"name": "Visual Editor",
|
||||||
"href": "https://designer.primevue.org"
|
"href": "https://designer.primevue.org"
|
||||||
|
|
@ -486,10 +474,32 @@
|
||||||
"icon": "pi pi-table",
|
"icon": "pi pi-table",
|
||||||
"href": "https://www.primefaces.org/primeflex"
|
"href": "https://www.primefaces.org/primeflex"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "Support",
|
||||||
|
"icon": "pi pi-question",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"name": "Discord Server",
|
||||||
|
"href": "https://discord.gg/gzKFYnpmCY"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Forum",
|
||||||
|
"href": "https://forum.primefaces.org/viewforum.php?f=57"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "PRO Support",
|
||||||
|
"to": "/support"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "Discover",
|
"name": "Discover",
|
||||||
"icon": "pi pi-search",
|
"icon": "pi pi-search",
|
||||||
"children": [
|
"children": [
|
||||||
|
{
|
||||||
|
"name": "About Us",
|
||||||
|
"to": "/team"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "Roadmap",
|
"name": "Roadmap",
|
||||||
"to": "/roadmap"
|
"to": "/roadmap"
|
||||||
|
|
@ -523,24 +533,6 @@
|
||||||
"href": "https://gear.primefaces.org"
|
"href": "https://gear.primefaces.org"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Support",
|
|
||||||
"icon": "pi pi-question",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"name": "Discord Server",
|
|
||||||
"href": "https://discord.gg/gzKFYnpmCY"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Forum",
|
|
||||||
"href": "https://forum.primefaces.org/viewforum.php?f=57"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "PRO Support",
|
|
||||||
"to": "/support"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
|
<p class="line-height-3 bg-indigo-600 text-white p-3 text-lg" style="border-radius: 10px">PrimeVue has WCAG 2.1 AA level compliancy. Refer to the accessibility documentation of each component for detailed information.</p>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>
|
<p>
|
||||||
According to the World Health Organization, 15% of the world population has a disability to some degree. As a result, accessibility features in any context such as a ramp for wheelchair users or a multimedia with captions are crucial to
|
According to the World Health Organization, 15% of the world population has a disability to some degree. As a result, accessibility features in any context such as a ramp for wheelchair users or a multimedia with captions are crucial to
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>ConfirmPopup is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Dialog. <i>target</i> attribute is mandatory to align the popup to its caller.</p>
|
<p>ConfirmDialog is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Dialog. <i>target</i> attribute is mandatory to align the popup to its caller.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<ConfirmDialog></ConfirmDialog>
|
<ConfirmDialog></ConfirmDialog>
|
||||||
<div class="card flex flex-wrap gap-2 justify-content-center">
|
<div class="card flex flex-wrap gap-2 justify-content-center">
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
//TODO:
|
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p>
|
<p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed as an application plugin.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>ConfirmPopup is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Popup. <i>target</i> attribute is mandatory to align the popup to its caller.</p>
|
<p>ConfirmDialog is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Popup. <i>target</i> attribute is mandatory to align the popup to its caller.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<ConfirmPopup></ConfirmPopup>
|
<ConfirmPopup></ConfirmPopup>
|
||||||
<div class="card flex flex-wrap gap-2 justify-content-center">
|
<div class="card flex flex-wrap gap-2 justify-content-center">
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
//TODO:
|
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p>
|
<p>ConfirmPopup is controlled via the <i>ConfirmationService</i> that needs to be installed as an application plugin.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,370 +0,0 @@
|
||||||
<template>
|
|
||||||
<DocSectionText v-bind="$attrs">
|
|
||||||
<p>Dialogs can be created dynamically with any component as the content using a DialogService. Ideal location of a DynamicDialog is the main application template so that it can be used by any component within the application.</p>
|
|
||||||
</DocSectionText>
|
|
||||||
<div class="card flex justify-content-center">
|
|
||||||
<Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
|
|
||||||
|
|
||||||
<DynamicDialog />
|
|
||||||
</div>
|
|
||||||
<DocSectionCode :code="code" :extFiles="extFiles" :service="['ProductService']" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import Button from 'primevue/button';
|
|
||||||
import { h } from 'vue';
|
|
||||||
import ProductListDemo from './demo/ProductListDemo';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
code: {
|
|
||||||
basic: `
|
|
||||||
<Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
|
|
||||||
|
|
||||||
<DynamicDialog />`,
|
|
||||||
options: `
|
|
||||||
<template>
|
|
||||||
<div class="card flex justify-content-center">
|
|
||||||
<Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
|
|
||||||
<Toast />
|
|
||||||
<DynamicDialog />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import Button from 'primevue/button';
|
|
||||||
import { h, defineAsyncComponent } from 'vue';
|
|
||||||
const ProductListDemo = defineAsyncComponent(() => import('./components/ProductListDemo.vue'));
|
|
||||||
|
|
||||||
export default {
|
|
||||||
methods: {
|
|
||||||
showProducts() {
|
|
||||||
const dialogRef = this.$dialog.open(ProductListDemo, {
|
|
||||||
props: {
|
|
||||||
header: 'Product List',
|
|
||||||
style: {
|
|
||||||
width: '50vw'
|
|
||||||
},
|
|
||||||
breakpoints: {
|
|
||||||
'960px': '75vw',
|
|
||||||
'640px': '90vw'
|
|
||||||
},
|
|
||||||
modal: true
|
|
||||||
},
|
|
||||||
templates: {
|
|
||||||
footer: () => {
|
|
||||||
return [
|
|
||||||
h(Button, { label: 'No', icon: 'pi pi-times', onClick: () => dialogRef.close({ buttonType: 'No' }), class: 'p-button-text' }),
|
|
||||||
h(Button, { label: 'Yes', icon: 'pi pi-check', onClick: () => dialogRef.close({ buttonType: 'Yes' }), autofocus: true })
|
|
||||||
];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onClose: (options) => {
|
|
||||||
const data = options.data;
|
|
||||||
|
|
||||||
if (data) {
|
|
||||||
const buttonType = data.buttonType;
|
|
||||||
const summary_and_detail = buttonType ? { summary: 'No Product Selected', detail: \`Pressed '\${buttonType}' button\` } : { summary: 'Product Selected', detail: data.name };
|
|
||||||
|
|
||||||
this.$toast.add({ severity: 'info', ...summary_and_detail, life: 3000 });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
<\/script>`,
|
|
||||||
composition: `
|
|
||||||
<template>
|
|
||||||
<div class="card flex justify-content-center">
|
|
||||||
<Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
|
|
||||||
<Toast />
|
|
||||||
<DynamicDialog />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { h, defineAsyncComponent } from 'vue';
|
|
||||||
import { useDialog } from 'primevue/usedialog';
|
|
||||||
import { useToast } from 'primevue/usetoast';
|
|
||||||
import Button from 'primevue/button';
|
|
||||||
const ProductListDemo = defineAsyncComponent(() => import('./components/ProductListDemo.vue'));
|
|
||||||
|
|
||||||
const dialog = useDialog();
|
|
||||||
const toast = useToast();
|
|
||||||
|
|
||||||
const showProducts = () => {
|
|
||||||
const dialogRef = dialog.open(ProductListDemo, {
|
|
||||||
props: {
|
|
||||||
header: 'Product List',
|
|
||||||
style: {
|
|
||||||
width: '50vw',
|
|
||||||
},
|
|
||||||
breakpoints:{
|
|
||||||
'960px': '75vw',
|
|
||||||
'640px': '90vw'
|
|
||||||
},
|
|
||||||
modal: true
|
|
||||||
},
|
|
||||||
templates: {
|
|
||||||
footer: () => {
|
|
||||||
return [
|
|
||||||
h(Button, { label: "No", icon: "pi pi-times", onClick: () => dialogRef.close({ buttonType: 'No' }), class: "p-button-text" }),
|
|
||||||
h(Button, { label: "Yes", icon: "pi pi-check", onClick: () => dialogRef.close({ buttonType: 'Yes' }), autofocus: true})
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onClose: (options) => {
|
|
||||||
const data = options.data;
|
|
||||||
if (data) {
|
|
||||||
const buttonType = data.buttonType;
|
|
||||||
const summary_and_detail = buttonType ? { summary: 'No Product Selected', detail: \`Pressed '\${buttonType}' button\` } : { summary: 'Product Selected', detail: data.name };
|
|
||||||
|
|
||||||
toast.add({ severity:'info', ...summary_and_detail, life: 3000 });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
<\/script>`,
|
|
||||||
data: `
|
|
||||||
/* ProductService */
|
|
||||||
{
|
|
||||||
id: '1000',
|
|
||||||
code: 'f230fh0g3',
|
|
||||||
name: 'Bamboo Watch',
|
|
||||||
description: 'Product Description',
|
|
||||||
image: 'bamboo-watch.jpg',
|
|
||||||
price: 65,
|
|
||||||
category: 'Accessories',
|
|
||||||
quantity: 24,
|
|
||||||
inventoryStatus: 'INSTOCK',
|
|
||||||
rating: 5
|
|
||||||
},
|
|
||||||
...`
|
|
||||||
},
|
|
||||||
extFiles: {
|
|
||||||
options: {
|
|
||||||
'src/components/ProductListDemo.vue': {
|
|
||||||
content: `
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="flex justify-content-end mt-1 mb-3">
|
|
||||||
<Button icon="pi pi-external-link" label="Nested Dialog" outlined severity="success" @click="showInfo" />
|
|
||||||
</div>
|
|
||||||
<DataTable :value="products">
|
|
||||||
<Column field="code" header="Code"></Column>
|
|
||||||
<Column field="name" header="Name"></Column>
|
|
||||||
<Column header="Image">
|
|
||||||
<template #body="slotProps">
|
|
||||||
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
|
|
||||||
</template>
|
|
||||||
</Column>
|
|
||||||
<Column field="category" header="Category"></Column>
|
|
||||||
<Column field="quantity" header="Quantity"></Column>
|
|
||||||
<Column style="width:5rem">
|
|
||||||
<template #body="slotProps">
|
|
||||||
<Button type="button" icon="pi pi-plus" text rounded @click="selectProduct(slotProps.data)"></Button>
|
|
||||||
</template>
|
|
||||||
</Column>
|
|
||||||
</DataTable>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { ProductService } from '@/service/ProductService';
|
|
||||||
import InfoDemo from './InfoDemo.vue';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
inject: ['dialogRef'],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
products: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
ProductService.getProductsSmall().then(data => this.products = data.slice(0,5));
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
selectProduct(data) {
|
|
||||||
this.dialogRef.close(data);
|
|
||||||
},
|
|
||||||
showInfo() {
|
|
||||||
this.$dialog.open(InfoDemo, {
|
|
||||||
props: {
|
|
||||||
header: 'Information',
|
|
||||||
modal: true,
|
|
||||||
dismissableMask: true
|
|
||||||
},
|
|
||||||
data: {
|
|
||||||
totalProducts: this.products ? this.products.length : 0
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
<\/script>`
|
|
||||||
},
|
|
||||||
'src/components/InfoDemo.vue': {
|
|
||||||
content: `
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<p>There are <strong>{{totalProducts}}</strong> products in total in this list.</p>
|
|
||||||
<div class="flex justify-content-end">
|
|
||||||
<Button type="button" label="Close" @click="closeDialog"></Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
inject: ['dialogRef'],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
totalProducts: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.totalProducts = this.dialogRef.data.totalProducts;
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
closeDialog() {
|
|
||||||
this.dialogRef.close();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
<\/script>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
},
|
|
||||||
composition: {
|
|
||||||
'src/components/ProductListDemo.vue': {
|
|
||||||
content: `
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="flex justify-content-end mt-1 mb-3">
|
|
||||||
<Button icon="pi pi-external-link" label="Nested Dialog" outlined severity="success" @click="showInfo" />
|
|
||||||
</div>
|
|
||||||
<DataTable :value="products">
|
|
||||||
<Column field="code" header="Code"></Column>
|
|
||||||
<Column field="name" header="Name"></Column>
|
|
||||||
<Column header="Image">
|
|
||||||
<template #body="slotProps">
|
|
||||||
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
|
|
||||||
</template>
|
|
||||||
</Column>
|
|
||||||
<Column field="category" header="Category"></Column>
|
|
||||||
<Column field="quantity" header="Quantity"></Column>
|
|
||||||
<Column style="width:5rem">
|
|
||||||
<template #body="slotProps">
|
|
||||||
<Button type="button" icon="pi pi-plus" text rounded @click="selectProduct(slotProps.data)"></Button>
|
|
||||||
</template>
|
|
||||||
</Column>
|
|
||||||
</DataTable>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, onMounted, inject } from "vue";
|
|
||||||
import { useDialog } from "primevue/usedialog";
|
|
||||||
import { ProductService } from "@/service/ProductService";
|
|
||||||
import InfoDemo from "./InfoDemo.vue";
|
|
||||||
|
|
||||||
const dialogRef = inject("dialogRef");
|
|
||||||
const dialog = useDialog();
|
|
||||||
const products = ref(null);
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
ProductService
|
|
||||||
.getProductsSmall()
|
|
||||||
.then((data) => (products.value = data.slice(0, 5)));
|
|
||||||
});
|
|
||||||
|
|
||||||
const selectProduct = (data) => {
|
|
||||||
dialogRef.value.close(data);
|
|
||||||
};
|
|
||||||
|
|
||||||
const showInfo = () => {
|
|
||||||
dialog.open(InfoDemo, {
|
|
||||||
props: {
|
|
||||||
header: "Information",
|
|
||||||
modal: true,
|
|
||||||
dismissableMask: true,
|
|
||||||
},
|
|
||||||
data: {
|
|
||||||
totalProducts: products.value ? products.value.length : 0,
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
<\/script>`
|
|
||||||
},
|
|
||||||
'src/components/InfoDemo.vue': {
|
|
||||||
content: `
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<p>There are <strong>{{totalProducts}}</strong> products in total in this list.</p>
|
|
||||||
<div class="flex justify-content-end">
|
|
||||||
<Button type="button" label="Close" @click="closeDialog"></Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, onMounted, inject } from "vue";
|
|
||||||
|
|
||||||
const totalProducts = ref(0);
|
|
||||||
const dialogRef = inject("dialogRef");
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
totalProducts.value = dialogRef.value.data.totalProducts;
|
|
||||||
});
|
|
||||||
|
|
||||||
const closeDialog = () => {
|
|
||||||
dialogRef.value.close();
|
|
||||||
};
|
|
||||||
<\/script>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
showProducts() {
|
|
||||||
const dialogRef = this.$dialog.open(ProductListDemo, {
|
|
||||||
props: {
|
|
||||||
header: 'Product List',
|
|
||||||
style: {
|
|
||||||
width: '50vw'
|
|
||||||
},
|
|
||||||
breakpoints: {
|
|
||||||
'960px': '75vw',
|
|
||||||
'640px': '90vw'
|
|
||||||
},
|
|
||||||
modal: true
|
|
||||||
},
|
|
||||||
templates: {
|
|
||||||
footer: () => {
|
|
||||||
return [
|
|
||||||
h(Button, { label: 'No', icon: 'pi pi-times', onClick: () => dialogRef.close({ buttonType: 'No' }), class: 'p-button-text' }),
|
|
||||||
h(Button, { label: 'Yes', icon: 'pi pi-check', onClick: () => dialogRef.close({ buttonType: 'Yes' }), autofocus: true })
|
|
||||||
];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onClose: (options) => {
|
|
||||||
const data = options.data;
|
|
||||||
|
|
||||||
if (data) {
|
|
||||||
const buttonType = data.buttonType;
|
|
||||||
const summary_and_detail = buttonType ? { summary: 'No Product Selected', detail: `Pressed '${buttonType}' button` } : { summary: 'Product Selected', detail: data.name };
|
|
||||||
|
|
||||||
this.$toast.add({ severity: 'info', ...summary_and_detail, life: 3000 });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,22 +1,36 @@
|
||||||
//TODO:
|
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>Dynamic dialogs require the <i>DialogService</i> to be configured globally.</p>
|
<p>Dynamic dialogs are controlled via the <i>DialogService</i> that needs to be installed as an application plugin.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
|
<div class="doc-section-description">
|
||||||
|
<p><i>$dialog</i> is available as a property in the application instance for Options API. The service can be injected with the <i>useDialog</i> function for Composition API.</p>
|
||||||
|
</div>
|
||||||
|
<DocSectionCode :code="code2" import hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
code: {
|
code1: {
|
||||||
basic: `
|
basic: `
|
||||||
import {createApp} from 'vue';
|
import {createApp} from 'vue';
|
||||||
import DialogService from 'primevue/dialogservice';
|
import DialogService from 'primevue/dialogservice';
|
||||||
|
|
||||||
const app = createApp(App);
|
const app = createApp(App);
|
||||||
app.use(DialogService);`
|
app.use(DialogService);`
|
||||||
|
},
|
||||||
|
code2: {
|
||||||
|
basic: `
|
||||||
|
import { useDialog } from 'primevue/usedialog';
|
||||||
|
|
||||||
|
const dialog = useDialog();`,
|
||||||
|
options: `const dialogRef = this.$dialog;`,
|
||||||
|
composition: `
|
||||||
|
import { useDialog } from 'primevue/usedialog';
|
||||||
|
|
||||||
|
const dialog = useDialog();`
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,23 +1,373 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p><i>$dialog</i> is available as a property in the application instance for Options API. The service can be injected with the <i>useDialog</i> function for Composition API.</p>
|
<p>
|
||||||
|
Dialogs can be created dynamically with any component as the content using a DialogService along with a <i>DynamicDialog</i> component. Ideal location of a DynamicDialog is the main template so that it can be used by any component within
|
||||||
|
the application.
|
||||||
|
</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<DocSectionCode :code="code" import hideCodeSandbox hideStackBlitz />
|
<div class="card flex justify-content-center">
|
||||||
|
<Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
|
||||||
|
|
||||||
|
<DynamicDialog />
|
||||||
|
</div>
|
||||||
|
<DocSectionCode :code="code" :extFiles="extFiles" :service="['ProductService']" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import Button from 'primevue/button';
|
||||||
|
import { h } from 'vue';
|
||||||
|
import ProductListDemo from './demo/ProductListDemo';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
code: {
|
code: {
|
||||||
basic: `const dialogRef = this.$dialog;`,
|
basic: `
|
||||||
options: `const dialogRef = this.$dialog;`,
|
<Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
|
||||||
composition: `
|
|
||||||
import { useDialog } from 'primevue/usedialog';
|
|
||||||
|
|
||||||
const dialog = useDialog();`
|
<DynamicDialog />`,
|
||||||
|
options: `
|
||||||
|
<template>
|
||||||
|
<div class="card flex justify-content-center">
|
||||||
|
<Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
|
||||||
|
<Toast />
|
||||||
|
<DynamicDialog />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Button from 'primevue/button';
|
||||||
|
import { h, defineAsyncComponent } from 'vue';
|
||||||
|
const ProductListDemo = defineAsyncComponent(() => import('./components/ProductListDemo.vue'));
|
||||||
|
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
showProducts() {
|
||||||
|
const dialogRef = this.$dialog.open(ProductListDemo, {
|
||||||
|
props: {
|
||||||
|
header: 'Product List',
|
||||||
|
style: {
|
||||||
|
width: '50vw'
|
||||||
|
},
|
||||||
|
breakpoints: {
|
||||||
|
'960px': '75vw',
|
||||||
|
'640px': '90vw'
|
||||||
|
},
|
||||||
|
modal: true
|
||||||
|
},
|
||||||
|
templates: {
|
||||||
|
footer: () => {
|
||||||
|
return [
|
||||||
|
h(Button, { label: 'No', icon: 'pi pi-times', onClick: () => dialogRef.close({ buttonType: 'No' }), class: 'p-button-text' }),
|
||||||
|
h(Button, { label: 'Yes', icon: 'pi pi-check', onClick: () => dialogRef.close({ buttonType: 'Yes' }), autofocus: true })
|
||||||
|
];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onClose: (options) => {
|
||||||
|
const data = options.data;
|
||||||
|
|
||||||
|
if (data) {
|
||||||
|
const buttonType = data.buttonType;
|
||||||
|
const summary_and_detail = buttonType ? { summary: 'No Product Selected', detail: \`Pressed '\${buttonType}' button\` } : { summary: 'Product Selected', detail: data.name };
|
||||||
|
|
||||||
|
this.$toast.add({ severity: 'info', ...summary_and_detail, life: 3000 });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
<\/script>`,
|
||||||
|
composition: `
|
||||||
|
<template>
|
||||||
|
<div class="card flex justify-content-center">
|
||||||
|
<Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
|
||||||
|
<Toast />
|
||||||
|
<DynamicDialog />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { h, defineAsyncComponent } from 'vue';
|
||||||
|
import { useDialog } from 'primevue/usedialog';
|
||||||
|
import { useToast } from 'primevue/usetoast';
|
||||||
|
import Button from 'primevue/button';
|
||||||
|
const ProductListDemo = defineAsyncComponent(() => import('./components/ProductListDemo.vue'));
|
||||||
|
|
||||||
|
const dialog = useDialog();
|
||||||
|
const toast = useToast();
|
||||||
|
|
||||||
|
const showProducts = () => {
|
||||||
|
const dialogRef = dialog.open(ProductListDemo, {
|
||||||
|
props: {
|
||||||
|
header: 'Product List',
|
||||||
|
style: {
|
||||||
|
width: '50vw',
|
||||||
|
},
|
||||||
|
breakpoints:{
|
||||||
|
'960px': '75vw',
|
||||||
|
'640px': '90vw'
|
||||||
|
},
|
||||||
|
modal: true
|
||||||
|
},
|
||||||
|
templates: {
|
||||||
|
footer: () => {
|
||||||
|
return [
|
||||||
|
h(Button, { label: "No", icon: "pi pi-times", onClick: () => dialogRef.close({ buttonType: 'No' }), class: "p-button-text" }),
|
||||||
|
h(Button, { label: "Yes", icon: "pi pi-check", onClick: () => dialogRef.close({ buttonType: 'Yes' }), autofocus: true})
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onClose: (options) => {
|
||||||
|
const data = options.data;
|
||||||
|
if (data) {
|
||||||
|
const buttonType = data.buttonType;
|
||||||
|
const summary_and_detail = buttonType ? { summary: 'No Product Selected', detail: \`Pressed '\${buttonType}' button\` } : { summary: 'Product Selected', detail: data.name };
|
||||||
|
|
||||||
|
toast.add({ severity:'info', ...summary_and_detail, life: 3000 });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
<\/script>`,
|
||||||
|
data: `
|
||||||
|
/* ProductService */
|
||||||
|
{
|
||||||
|
id: '1000',
|
||||||
|
code: 'f230fh0g3',
|
||||||
|
name: 'Bamboo Watch',
|
||||||
|
description: 'Product Description',
|
||||||
|
image: 'bamboo-watch.jpg',
|
||||||
|
price: 65,
|
||||||
|
category: 'Accessories',
|
||||||
|
quantity: 24,
|
||||||
|
inventoryStatus: 'INSTOCK',
|
||||||
|
rating: 5
|
||||||
|
},
|
||||||
|
...`
|
||||||
|
},
|
||||||
|
extFiles: {
|
||||||
|
options: {
|
||||||
|
'src/components/ProductListDemo.vue': {
|
||||||
|
content: `
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-content-end mt-1 mb-3">
|
||||||
|
<Button icon="pi pi-external-link" label="Nested Dialog" outlined severity="success" @click="showInfo" />
|
||||||
|
</div>
|
||||||
|
<DataTable :value="products">
|
||||||
|
<Column field="code" header="Code"></Column>
|
||||||
|
<Column field="name" header="Name"></Column>
|
||||||
|
<Column header="Image">
|
||||||
|
<template #body="slotProps">
|
||||||
|
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
|
||||||
|
</template>
|
||||||
|
</Column>
|
||||||
|
<Column field="category" header="Category"></Column>
|
||||||
|
<Column field="quantity" header="Quantity"></Column>
|
||||||
|
<Column style="width:5rem">
|
||||||
|
<template #body="slotProps">
|
||||||
|
<Button type="button" icon="pi pi-plus" text rounded @click="selectProduct(slotProps.data)"></Button>
|
||||||
|
</template>
|
||||||
|
</Column>
|
||||||
|
</DataTable>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ProductService } from '@/service/ProductService';
|
||||||
|
import InfoDemo from './InfoDemo.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
inject: ['dialogRef'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
products: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
ProductService.getProductsSmall().then(data => this.products = data.slice(0,5));
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
selectProduct(data) {
|
||||||
|
this.dialogRef.close(data);
|
||||||
|
},
|
||||||
|
showInfo() {
|
||||||
|
this.$dialog.open(InfoDemo, {
|
||||||
|
props: {
|
||||||
|
header: 'Information',
|
||||||
|
modal: true,
|
||||||
|
dismissableMask: true
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
totalProducts: this.products ? this.products.length : 0
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
<\/script>`
|
||||||
|
},
|
||||||
|
'src/components/InfoDemo.vue': {
|
||||||
|
content: `
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<p>There are <strong>{{totalProducts}}</strong> products in total in this list.</p>
|
||||||
|
<div class="flex justify-content-end">
|
||||||
|
<Button type="button" label="Close" @click="closeDialog"></Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
inject: ['dialogRef'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
totalProducts: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.totalProducts = this.dialogRef.data.totalProducts;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
closeDialog() {
|
||||||
|
this.dialogRef.close();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
<\/script>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
composition: {
|
||||||
|
'src/components/ProductListDemo.vue': {
|
||||||
|
content: `
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-content-end mt-1 mb-3">
|
||||||
|
<Button icon="pi pi-external-link" label="Nested Dialog" outlined severity="success" @click="showInfo" />
|
||||||
|
</div>
|
||||||
|
<DataTable :value="products">
|
||||||
|
<Column field="code" header="Code"></Column>
|
||||||
|
<Column field="name" header="Name"></Column>
|
||||||
|
<Column header="Image">
|
||||||
|
<template #body="slotProps">
|
||||||
|
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
|
||||||
|
</template>
|
||||||
|
</Column>
|
||||||
|
<Column field="category" header="Category"></Column>
|
||||||
|
<Column field="quantity" header="Quantity"></Column>
|
||||||
|
<Column style="width:5rem">
|
||||||
|
<template #body="slotProps">
|
||||||
|
<Button type="button" icon="pi pi-plus" text rounded @click="selectProduct(slotProps.data)"></Button>
|
||||||
|
</template>
|
||||||
|
</Column>
|
||||||
|
</DataTable>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, inject } from "vue";
|
||||||
|
import { useDialog } from "primevue/usedialog";
|
||||||
|
import { ProductService } from "@/service/ProductService";
|
||||||
|
import InfoDemo from "./InfoDemo.vue";
|
||||||
|
|
||||||
|
const dialogRef = inject("dialogRef");
|
||||||
|
const dialog = useDialog();
|
||||||
|
const products = ref(null);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
ProductService
|
||||||
|
.getProductsSmall()
|
||||||
|
.then((data) => (products.value = data.slice(0, 5)));
|
||||||
|
});
|
||||||
|
|
||||||
|
const selectProduct = (data) => {
|
||||||
|
dialogRef.value.close(data);
|
||||||
|
};
|
||||||
|
|
||||||
|
const showInfo = () => {
|
||||||
|
dialog.open(InfoDemo, {
|
||||||
|
props: {
|
||||||
|
header: "Information",
|
||||||
|
modal: true,
|
||||||
|
dismissableMask: true,
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
totalProducts: products.value ? products.value.length : 0,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
<\/script>`
|
||||||
|
},
|
||||||
|
'src/components/InfoDemo.vue': {
|
||||||
|
content: `
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<p>There are <strong>{{totalProducts}}</strong> products in total in this list.</p>
|
||||||
|
<div class="flex justify-content-end">
|
||||||
|
<Button type="button" label="Close" @click="closeDialog"></Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, inject } from "vue";
|
||||||
|
|
||||||
|
const totalProducts = ref(0);
|
||||||
|
const dialogRef = inject("dialogRef");
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
totalProducts.value = dialogRef.value.data.totalProducts;
|
||||||
|
});
|
||||||
|
|
||||||
|
const closeDialog = () => {
|
||||||
|
dialogRef.value.close();
|
||||||
|
};
|
||||||
|
<\/script>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
showProducts() {
|
||||||
|
const dialogRef = this.$dialog.open(ProductListDemo, {
|
||||||
|
props: {
|
||||||
|
header: 'Product List',
|
||||||
|
style: {
|
||||||
|
width: '50vw'
|
||||||
|
},
|
||||||
|
breakpoints: {
|
||||||
|
'960px': '75vw',
|
||||||
|
'640px': '90vw'
|
||||||
|
},
|
||||||
|
modal: true
|
||||||
|
},
|
||||||
|
templates: {
|
||||||
|
footer: () => {
|
||||||
|
return [
|
||||||
|
h(Button, { label: 'No', icon: 'pi pi-times', onClick: () => dialogRef.close({ buttonType: 'No' }), class: 'p-button-text' }),
|
||||||
|
h(Button, { label: 'Yes', icon: 'pi pi-check', onClick: () => dialogRef.close({ buttonType: 'Yes' }), autofocus: true })
|
||||||
|
];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onClose: (options) => {
|
||||||
|
const data = options.data;
|
||||||
|
|
||||||
|
if (data) {
|
||||||
|
const buttonType = data.buttonType;
|
||||||
|
const summary_and_detail = buttonType ? { summary: 'No Product Selected', detail: `Pressed '${buttonType}' button` } : { summary: 'Product Selected', detail: data.name };
|
||||||
|
|
||||||
|
this.$toast.add({ severity: 'info', ...summary_and_detail, life: 3000 });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>We've created various samples for the popular options in the Vue ecosystem.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<div class="flex flex-wrap card justify-content-between align-items-center gap-3">
|
||||||
|
<a href="https://github.com/primefaces/primevue-quickstart-create-vue" class="flex flex-column align-items-center">
|
||||||
|
<img src="https://primefaces.org/cdn/primevue/images/logos/vite.svg" alt="Vite" class="w-8rem h-8rem mb-3" />
|
||||||
|
<span class="font-bold text-xl text-900">Vite</span>
|
||||||
|
</a>
|
||||||
|
<a href="https://github.com/primefaces/primevue-quickstart-nuxt3" class="flex flex-column align-items-center">
|
||||||
|
<img src="https://primefaces.org/cdn/primevue/images/logos/nuxt.svg" alt="Nuxt.JS" class="w-8rem h-8rem mb-3" />
|
||||||
|
<span class="font-bold text-xl text-900">Nuxt</span>
|
||||||
|
</a>
|
||||||
|
<a href="https://github.com/primefaces/primevue-quickstart" class="flex flex-column align-items-center">
|
||||||
|
<img src="https://primefaces.org/cdn/primevue/images/logos/vue.svg" alt="Vue CLI" class="w-8rem h-8rem mb-3" />
|
||||||
|
<span class="font-bold text-xl text-900">Vue-CLI</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -2,12 +2,12 @@
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>PrimeVue can easily be used with Nuxt 3 using a custom plugin.</p>
|
<p>PrimeVue can easily be used with Nuxt 3 using a custom plugin.</p>
|
||||||
|
|
||||||
<h6>nuxt.config.js</h6>
|
<h3>nuxt.config.js</h3>
|
||||||
<p>Open the nuxt configuration file and add the css dependencies.</p>
|
<p>Open the nuxt configuration file and add the css dependencies.</p>
|
||||||
|
|
||||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
|
|
||||||
<h6>primevue.js</h6>
|
<h3>primevue.js</h3>
|
||||||
<p>Create a file like <i>primevue.js</i> under the plugins directory for the configuration.</p>
|
<p>Create a file like <i>primevue.js</i> under the plugins directory for the configuration.</p>
|
||||||
|
|
||||||
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>
|
<p>
|
||||||
<a alt="Create Vue App" href="https://github.com/vuejs/create-vue"> Create-Vue </a>
|
<a alt="Create Vue App" href="https://github.com/vuejs/create-vue">Create-Vue</a>
|
||||||
is the recommended way to start a Vite-powered Vue project.
|
is the recommended way to start a Vite-powered Vue project.
|
||||||
</p>
|
</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p><a alt="Nuxt" href="https://nuxtjs.org">Nuxt</a> is an intuitive and extendable way to create type-safe, performant and production-grade full-stack web apps and websites with Vue.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<div class="video-container">
|
||||||
|
<iframe width="560" height="315" src="https://www.youtube.com/embed/sYGMrRUz9N0" frameborder="0" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -6,9 +6,13 @@
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
There are 3 alternatives to create your own theme. First option is using the Visual Editor, second one is compiling a theme with command line sass and final alternative is embedding scss files within your project to let your build
|
There are 3 alternatives to create your own theme. First option is using the Visual Editor, second one is compiling a theme with command line sass and final alternative is embedding scss files within your project to let your build
|
||||||
environment do the compilation. In all cases, the generated theme file should be imported to your project.
|
environment do the compilation. In all cases, the generated theme file should be imported to your project. We've created a video tutorial that demonstrates all three options.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
<div class="video-container">
|
||||||
|
<iframe width="560" height="315" src="https://www.youtube.com/embed/iZp_l0Yl3Zw" frameborder="0" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h3>Visual Editor</h3>
|
<h3>Visual Editor</h3>
|
||||||
<p>
|
<p>
|
||||||
<a href="https://designer.primevue.org">Visual Editor</a> is an easy way to quickly customize an existing theme without dealing with the details of the SASS API. The editor allows changing common settings like primary color for built-in
|
<a href="https://designer.primevue.org">Visual Editor</a> is an easy way to quickly customize an existing theme without dealing with the details of the SASS API. The editor allows changing common settings like primary color for built-in
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
//TODO:
|
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>Toast messages are dynamically created using a <i>ToastService</i> that needs to be installed globally before the application instance is created.</p>
|
<p>Toast component is controlled via the <i>ToastService</i> that needs to be installed as an application plugin.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -31,13 +31,7 @@
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h3>Free Themes</h3>
|
<h3>Themes</h3>
|
||||||
<p>
|
|
||||||
Built-in component themes created by the
|
|
||||||
<a href="https://www.primefaces.org/designer/primevue" class="text-primary hover:underline font-medium"> primevue Theme Designer </a>
|
|
||||||
.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h4>Bootstrap</h4>
|
<h4>Bootstrap</h4>
|
||||||
<div class="grid free-themes">
|
<div class="grid free-themes">
|
||||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||||
|
|
|
||||||
|
|
@ -18,8 +18,9 @@
|
||||||
<script>
|
<script>
|
||||||
import ImportDoc from '@/doc/configuration/ImportDoc';
|
import ImportDoc from '@/doc/configuration/ImportDoc';
|
||||||
import InputStyleDoc from '@/doc/configuration/InputStyleDoc';
|
import InputStyleDoc from '@/doc/configuration/InputStyleDoc';
|
||||||
import NuxtIntegrationDoc from '@/doc/configuration/NuxtIntegrationDoc';
|
import LocaleApiDoc from '@/doc/configuration/locale/LocaleApiDoc';
|
||||||
import PropCasesDoc from '@/doc/configuration/PropCasesDoc';
|
import RepositoryDoc from '@/doc/configuration/locale/RepositoryDoc';
|
||||||
|
import SetLocaleDoc from '@/doc/configuration/locale/SetLocaleDoc';
|
||||||
import RippleDoc from '@/doc/configuration/RippleDoc';
|
import RippleDoc from '@/doc/configuration/RippleDoc';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
@ -31,16 +32,6 @@ export default {
|
||||||
label: 'Import',
|
label: 'Import',
|
||||||
component: ImportDoc
|
component: ImportDoc
|
||||||
},
|
},
|
||||||
{
|
|
||||||
id: 'nuxtintegration',
|
|
||||||
label: 'Nuxt Integration',
|
|
||||||
component: NuxtIntegrationDoc
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'propcases',
|
|
||||||
label: 'Prop Cases',
|
|
||||||
component: PropCasesDoc
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: 'ripple',
|
id: 'ripple',
|
||||||
label: 'Ripple',
|
label: 'Ripple',
|
||||||
|
|
@ -50,6 +41,27 @@ export default {
|
||||||
id: 'inputstyle',
|
id: 'inputstyle',
|
||||||
label: 'InputStyle',
|
label: 'InputStyle',
|
||||||
component: InputStyleDoc
|
component: InputStyleDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'locale',
|
||||||
|
label: 'Locale',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
id: 'setlocale',
|
||||||
|
label: 'Set Locale',
|
||||||
|
component: SetLocaleDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'repository',
|
||||||
|
label: 'Repository',
|
||||||
|
component: RepositoryDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'localeapi',
|
||||||
|
label: 'API',
|
||||||
|
component: LocaleApiDoc
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
<DocComponent
|
<DocComponent
|
||||||
title="Vue Dynamic Dialog Component"
|
title="Vue Dynamic Dialog Component"
|
||||||
header="Dynamic Dialog"
|
header="Dynamic Dialog"
|
||||||
description="Dynamic Dialog is a Dialog container to display content in an overlay window."
|
description="Dialogs can be created dynamically with any component as the content using a DialogService."
|
||||||
:componentDocs="docs"
|
:componentDocs="docs"
|
||||||
:apiDocs="['DynamicDialog', 'Dialog', 'DialogService-UseDialog', 'DynamicDialogOptions']"
|
:apiDocs="['DynamicDialog', 'Dialog', 'DialogService-UseDialog', 'DynamicDialogOptions']"
|
||||||
/>
|
/>
|
||||||
|
|
@ -10,9 +10,8 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import AccessibilityDoc from '@/doc/dynamicdialog/AccessibilityDoc';
|
import AccessibilityDoc from '@/doc/dynamicdialog/AccessibilityDoc';
|
||||||
import BasicDoc from '@/doc/dynamicdialog/BasicDoc';
|
|
||||||
import CloseDialogDoc from '@/doc/dynamicdialog/CloseDialogDoc';
|
import CloseDialogDoc from '@/doc/dynamicdialog/CloseDialogDoc';
|
||||||
import CustomizingDialogDoc from '@/doc/dynamicdialog/CustomizingDialogDoc';
|
import CustomizationDoc from '@/doc/dynamicdialog/CustomizationDoc';
|
||||||
import DialogServiceDoc from '@/doc/dynamicdialog/DialogServiceDoc';
|
import DialogServiceDoc from '@/doc/dynamicdialog/DialogServiceDoc';
|
||||||
import ImportDoc from '@/doc/dynamicdialog/ImportDoc';
|
import ImportDoc from '@/doc/dynamicdialog/ImportDoc';
|
||||||
import OpenDialogDoc from '@/doc/dynamicdialog/OpenDialogDoc';
|
import OpenDialogDoc from '@/doc/dynamicdialog/OpenDialogDoc';
|
||||||
|
|
@ -39,18 +38,13 @@ export default {
|
||||||
component: UsageDoc
|
component: UsageDoc
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'basic',
|
id: 'open',
|
||||||
label: 'Basic',
|
label: 'Open',
|
||||||
component: BasicDoc
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'opendialog',
|
|
||||||
label: 'Opening a Dialog',
|
|
||||||
component: OpenDialogDoc
|
component: OpenDialogDoc
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'closedialog',
|
id: 'close',
|
||||||
label: 'Closing a Dialog',
|
label: 'Close',
|
||||||
component: CloseDialogDoc
|
component: CloseDialogDoc
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -59,9 +53,9 @@ export default {
|
||||||
component: PassingDataDoc
|
component: PassingDataDoc
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'customizingdata',
|
id: 'customization',
|
||||||
label: 'Customizing Dialog',
|
label: 'Customization',
|
||||||
component: CustomizingDialogDoc
|
component: CustomizationDoc
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'accessibility',
|
id: 'accessibility',
|
||||||
|
|
|
||||||
|
|
@ -17,9 +17,13 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import DownloadDoc from '@/doc/installation/DownloadDoc';
|
import DownloadDoc from '@/doc/installation/DownloadDoc';
|
||||||
|
import ExamplesDoc from '@/doc/installation/ExamplesDoc';
|
||||||
|
import NuxtIntegrationDoc from '@/doc/installation/NuxtIntegrationDoc';
|
||||||
|
import PropCasesDoc from '@/doc/installation/PropCasesDoc';
|
||||||
import StylesDoc from '@/doc/installation/StylesDoc';
|
import StylesDoc from '@/doc/installation/StylesDoc';
|
||||||
import UsageDoc from '@/doc/installation/UsageDoc';
|
import UsageDoc from '@/doc/installation/UsageDoc';
|
||||||
import CreateVueDoc from '@/doc/installation/videos/CreateVueDoc';
|
import CreateVueDoc from '@/doc/installation/videos/CreateVueDoc';
|
||||||
|
import NuxtDoc from '@/doc/installation/videos/NuxtDoc';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -40,6 +44,21 @@ export default {
|
||||||
label: 'Usage',
|
label: 'Usage',
|
||||||
component: UsageDoc
|
component: UsageDoc
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: 'propcases',
|
||||||
|
label: 'Prop Cases',
|
||||||
|
component: PropCasesDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'nuxtintegration',
|
||||||
|
label: 'Nuxt Integration',
|
||||||
|
component: NuxtIntegrationDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'examples',
|
||||||
|
label: 'Examples',
|
||||||
|
component: ExamplesDoc
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: 'videos',
|
id: 'videos',
|
||||||
label: 'Videos',
|
label: 'Videos',
|
||||||
|
|
@ -49,6 +68,11 @@ export default {
|
||||||
id: 'createvue',
|
id: 'createvue',
|
||||||
label: 'CreateVue',
|
label: 'CreateVue',
|
||||||
component: CreateVueDoc
|
component: CreateVueDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'nuxt',
|
||||||
|
label: 'Nuxt',
|
||||||
|
component: NuxtDoc
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -48,7 +48,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a href="https://www.primefaces.org/designer-vue" class="font-semibold p-3 border-round flex align-items-center linkbox active">
|
<a href="https://designer.primevue.org" class="font-semibold p-3 border-round flex align-items-center linkbox active">
|
||||||
<span>View Full Version</span>
|
<span>View Full Version</span>
|
||||||
<i class="pi pi-arrow-right ml-auto"></i>
|
<i class="pi pi-arrow-right ml-auto"></i>
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -123,7 +123,7 @@ export default {
|
||||||
fonts: [
|
fonts: [
|
||||||
{ label: 'Arial', value: 'Arial,Helvetica Neue,Helvetica,sans-serif' },
|
{ label: 'Arial', value: 'Arial,Helvetica Neue,Helvetica,sans-serif' },
|
||||||
{ label: 'System', value: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol' },
|
{ label: 'System', value: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol' },
|
||||||
{ label: 'Trebuches MS', value: 'Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif' },
|
{ label: 'Trebuchet MS', value: 'Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif' },
|
||||||
{ label: 'Verdana', value: 'Verdana,Geneva,sans-serif' }
|
{ label: 'Verdana', value: 'Verdana,Geneva,sans-serif' }
|
||||||
],
|
],
|
||||||
selectedCity: null,
|
selectedCity: null,
|
||||||
|
|
|
||||||
|
|
@ -56,7 +56,7 @@
|
||||||
<router-link to="/theming" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Guide</router-link>
|
<router-link to="/theming" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Guide</router-link>
|
||||||
</li>
|
</li>
|
||||||
<li class="mb-4">
|
<li class="mb-4">
|
||||||
<a href="https://www.primefaces.org/designer/primevue" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Designer</a>
|
<a href="https://designer.primevue.org" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Designer</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="mb-4">
|
<li class="mb-4">
|
||||||
<router-link to="/colors" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Colors</router-link>
|
<router-link to="/colors" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Colors</router-link>
|
||||||
|
|
|
||||||
|
|
@ -16,16 +16,22 @@
|
||||||
</li>
|
</li>
|
||||||
<li class="mr-0 lg:mr-2">
|
<li class="mr-0 lg:mr-2">
|
||||||
<a href="https://www.primefaces.org/primeblocks-vue">
|
<a href="https://www.primefaces.org/primeblocks-vue">
|
||||||
<img src="https://primefaces.org/cdn/primevue/images/landing/blocks-icon.svg" alt="primevue templates" />
|
<img src="https://primefaces.org/cdn/primevue/images/landing/blocks-icon.svg" alt="primevue blocks" />
|
||||||
<span>Blocks</span>
|
<span>Blocks</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="mr-0 lg:mr-2">
|
<li class="mr-0 lg:mr-2">
|
||||||
<a href="https://www.primefaces.org/designer-vue">
|
<a href="https://designer.primevue.org">
|
||||||
<img src="https://primefaces.org/cdn/primevue/images/landing/designer-icon.svg" alt="primevue templates" />
|
<img src="https://primefaces.org/cdn/primevue/images/landing/designer-icon.svg" alt="primevue designer" />
|
||||||
<span>Designer</span>
|
<span>Designer</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
<li class="mr-0 lg:mr-2">
|
||||||
|
<router-link to="/uikit">
|
||||||
|
<img src="/images/landing/uikit-icon.svg" alt="primevue designer" width="30" />
|
||||||
|
<span>UI Kit</span>
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
<li class="mr-0 lg:mr-2">
|
<li class="mr-0 lg:mr-2">
|
||||||
<a href="https://www.primefaces.org/store/templates.xhtml">
|
<a href="https://www.primefaces.org/store/templates.xhtml">
|
||||||
<img src="https://primefaces.org/cdn/primevue/images/landing/templates-icon.svg" alt="primevue templates" />
|
<img src="https://primefaces.org/cdn/primevue/images/landing/templates-icon.svg" alt="primevue templates" />
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation ml-4 md:ml-0 md:mt-4 flex align-items-center justify-content-center" @click="navigateTo('https://www.primefaces.org/designer-vue')">
|
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation ml-4 md:ml-0 md:mt-4 flex align-items-center justify-content-center" @click="navigateTo('https://designer.primevue.org')">
|
||||||
<div class="flex flex-column align-items-center">
|
<div class="flex flex-column align-items-center">
|
||||||
<img src="https://primefaces.org/cdn/primevue/images/landing/designer-icon.svg" alt="primevue templates" />
|
<img src="https://primefaces.org/cdn/primevue/images/landing/designer-icon.svg" alt="primevue templates" />
|
||||||
<div class="name">
|
<div class="name">
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('lara') }]" @click="changeTheme('lara', 'blue')">PrimeOne</button>
|
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('lara') }]" @click="changeTheme('lara', 'blue')">PrimeOne</button>
|
||||||
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('md') }]" @click="changeTheme('md', 'indigo')">Material</button>
|
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('md') }]" @click="changeTheme('md', 'indigo')">Material</button>
|
||||||
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('bootstrap4') }]" @click="changeTheme('bootstrap4', 'blue')">Bootstrap</button>
|
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('bootstrap4') }]" @click="changeTheme('bootstrap4', 'blue')">Bootstrap</button>
|
||||||
<a type="button" class="font-medium p-link linkbox mt-4" href="https://www.primefaces.org/designer-vue">more...</a>
|
<a type="button" class="font-medium p-link linkbox mt-4" href="https://designer.primevue.org">more...</a>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="themes-main flex mt-7 justify-content-center px-5 lg:px-8"
|
class="themes-main flex mt-7 justify-content-center px-5 lg:px-8"
|
||||||
|
|
@ -52,8 +52,10 @@
|
||||||
</Column>
|
</Column>
|
||||||
<Column header="Agent" sortable sortField="representative.name" style="min-width: 14rem">
|
<Column header="Agent" sortable sortField="representative.name" style="min-width: 14rem">
|
||||||
<template #body="{ data }">
|
<template #body="{ data }">
|
||||||
<img :alt="data.representative.name" :src="'https://primefaces.org/cdn/primevue/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
|
<div class="flex align-items-center gap-2">
|
||||||
<span>{{ data.representative.name }}</span>
|
<img :alt="data.representative.name" :src="'https://primefaces.org/cdn/primevue/images/avatar/' + data.representative.image" width="32" />
|
||||||
|
<span>{{ data.representative.name }}</span>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</Column>
|
</Column>
|
||||||
<Column field="date" header="Date" sortable dataType="date" style="min-width: 8rem">
|
<Column field="date" header="Date" sortable dataType="date" style="min-width: 8rem">
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,84 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="doc-intro">
|
||||||
|
<h1>Meet the Team</h1>
|
||||||
|
<p>
|
||||||
|
<a href="https://www.primetek.com.tr" class="text-primary hover:underline font-semibold"> PrimeTek </a> is a world renowned vendor of popular UI Component suites including
|
||||||
|
<a href="https://primefaces.org" class="text-primary hover:underline font-semibold"> PrimeFaces </a>, <a href="https://primeng.org" class="text-primary hover:underline font-semibold"> PrimeNG </a>,
|
||||||
|
<a href="https://primereact.org" class="text-primary hover:underline font-semibold"> PrimeReact </a> and
|
||||||
|
<a href="https://primevue.org" class="text-primary hover:underline font-semibold"> PrimeVue </a>
|
||||||
|
. All the members in our team are full time employees of PrimeTek who share the same passion and vision for open source to create awesome UI libraries.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card p-8">
|
||||||
|
<div class="flex flex-wrap gap-8">
|
||||||
|
<div class="flex flex-column align-items-center flex-auto">
|
||||||
|
<img src="https://primefaces.org/cdn/primevue/images/team/cagatay.jpg" class="border-circle mb-4" alt="Cagatay Civici" />
|
||||||
|
<span class="mb-2 text-xl font-bold">Çağatay Çivici</span>
|
||||||
|
<span>Founder</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-column align-items-center flex-auto">
|
||||||
|
<img src="https://primefaces.org/cdn/primevue/images/team/mert.jpg" class="border-circle mb-4" alt="Mert Sincan" />
|
||||||
|
<span class="mb-2 text-xl font-bold">Mert Sincan</span>
|
||||||
|
<span>CTO</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-column align-items-center flex-auto">
|
||||||
|
<img src="https://primefaces.org/cdn/primevue/images/team/onur.jpg" class="border-circle mb-4" alt="Onur Şentüre" />
|
||||||
|
<span class="mb-2 text-xl font-bold">Onur Şentüre</span>
|
||||||
|
<span>Design Lead</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-column align-items-center flex-auto">
|
||||||
|
<img src="https://primefaces.org/cdn/primevue/images/team/dilara.jpg" class="border-circle mb-4" alt="Dilara Can" />
|
||||||
|
<span class="mb-2 text-xl font-bold">Dilara Güngenci</span>
|
||||||
|
<span>Business Administration</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-column align-items-center flex-auto">
|
||||||
|
<img src="https://primefaces.org/cdn/primevue/images/team/cetin.jpg" class="border-circle mb-4" alt="Çetin Çakıroğlu" />
|
||||||
|
<span class="mb-2 text-xl font-bold">Çetin Çakıroğlu</span>
|
||||||
|
<span>Front-End Developer</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-column align-items-center flex-auto">
|
||||||
|
<img src="https://primefaces.org/cdn/primevue/images/team/tugce.jpg" class="border-circle mb-4" alt="Tuğçe Küçükoğlu" />
|
||||||
|
<span class="mb-2 text-xl font-bold">Tuğçe Küçükoğlu</span>
|
||||||
|
<span>Front-End Developer</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-column align-items-center flex-auto">
|
||||||
|
<img src="https://primefaces.org/cdn/primevue/images/team/atakan.jpg" class="border-circle mb-4" alt="Atakan Tepe" />
|
||||||
|
<span class="mb-2 text-xl font-bold">Atakan Tepe</span>
|
||||||
|
<span>Front-End Developer</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-column align-items-center flex-auto">
|
||||||
|
<img src="https://primefaces.org/cdn/primevue/images/team/kerem.jpg" class="border-circle mb-4" alt="Kerem Yıldan" />
|
||||||
|
<span class="mb-2 text-xl font-bold">Kerem Yıldan</span>
|
||||||
|
<span>UI/UX Designer</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-column align-items-center flex-auto">
|
||||||
|
<img src="https://primefaces.org/cdn/primevue/images/team/ulas.jpg" class="border-circle mb-4" alt="Ulaş Turan" />
|
||||||
|
<span class="mb-2 text-xl font-bold">Ulaş Turan</span>
|
||||||
|
<span>Front-End Developer</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-column align-items-center flex-auto">
|
||||||
|
<img src="https://primefaces.org/cdn/primevue/images/team/bugra.jpg" class="border-circle mb-4" alt="Buğra Beydüz" />
|
||||||
|
<span class="mb-2 text-xl font-bold">Buğra Beydüz</span>
|
||||||
|
<span>Front-End Developer</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-column align-items-center flex-auto">
|
||||||
|
<img src="https://primefaces.org/cdn/primevue/images/team/bahadir.jpg" class="border-circle mb-4" alt="Bahadır Sofuoğlu" />
|
||||||
|
<span class="mb-2 text-xl font-bold">Bahadır Sofuoğlu</span>
|
||||||
|
<span>Front-End Developer</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-column align-items-center flex-auto">
|
||||||
|
<img src="https://primefaces.org/cdn/primevue/images/team/aliriza.jpg" class="border-circle mb-4" alt="Alirıza Gücal" />
|
||||||
|
<span class="mb-2 text-xl font-bold">Ali Rıza Gücal</span>
|
||||||
|
<span>Front-End Developer</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-column align-items-center flex-auto">
|
||||||
|
<img src="https://primefaces.org/cdn/primevue/images/team/olgu.jpg" class="border-circle mb-4" alt="Olgu Başak" />
|
||||||
|
<span class="mb-2 text-xl font-bold">Olgu Başak</span>
|
||||||
|
<span>Java Web Developer</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -40,7 +40,7 @@ export default {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'builtinthemes',
|
id: 'builtinthemes',
|
||||||
label: 'Buit-in Themes',
|
label: 'Built-in Themes',
|
||||||
component: BuiltInThemesDoc
|
component: BuiltInThemesDoc
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg id="Flat" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
|
||||||
|
<path d="M186.61523,94.00049A41.97934,41.97934,0,0,0,162,18.001H94A41.97934,41.97934,0,0,0,69.38477,94.00049a41.93894,41.93894,0,0,0,.00048,67.99939A41.9892,41.9892,0,1,0,136,195.99951V160.948a41.97356,41.97356,0,1,0,50.61523-66.94751ZM188,60.001a26.02916,26.02916,0,0,1-25.98047,25.99951L162,86l-.03857.001L136,86V34.001h26A26.02947,26.02947,0,0,1,188,60.001Zm-120,0a26.02947,26.02947,0,0,1,26-26h26V86H94l-.019.00049A26.02934,26.02934,0,0,1,68,60.001ZM68,128a26.02926,26.02926,0,0,1,25.981-25.99951L94,102.001l26-.00074V153.999L94,154A26.02947,26.02947,0,0,1,68,128Zm26,93.999A25.99951,25.99951,0,1,1,94,170l26-.00073v26.00024A26.02937,26.02937,0,0,1,94,221.999ZM162,154a25.99952,25.99952,0,0,1-.03857-51.999H162l.019-.00049A25.99976,25.99976,0,0,1,162,154Z" fill="#4f8ff7"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 860 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 298"><g fill="none" fill-rule="nonzero"><path fill="#00C58E" d="M227.92099 82.07407l-13.6889 23.7037-46.8148-81.08641L23.7037 273.58025h97.3037c0 13.0912 10.61252 23.7037 23.70371 23.7037H23.70371c-8.46771 0-16.29145-4.52017-20.5246-11.85382-4.23315-7.33366-4.23272-16.36849.00114-23.70174L146.89383 12.83951c4.23415-7.33433 12.0596-11.85252 20.5284-11.85252 8.46878 0 16.29423 4.51819 20.52839 11.85252l39.97037 69.23456z"/><path fill="#2F495E" d="M331.6642 261.7284l-90.05432-155.95062-13.6889-23.7037-13.68888 23.7037-90.04445 155.95061c-4.23385 7.33325-4.23428 16.36808-.00113 23.70174 4.23314 7.33365 12.05689 11.85382 20.5246 11.85382h166.4c8.46946 0 16.29644-4.51525 20.532-11.84955 4.23555-7.3343 4.23606-16.37123.00132-23.706h.01976zM144.7111 273.58024L227.921 129.48148l83.19012 144.09877h-166.4z"/><path fill="#108775" d="M396.04938 285.4321c-4.23344 7.33254-12.05656 11.85185-20.52345 11.85185H311.1111c13.0912 0 23.7037-10.6125 23.7037-23.7037h40.66173L260.09877 73.74815l-18.4889 32.02963-13.68888-23.7037L239.5753 61.8963c4.23416-7.33433 12.0596-11.85252 20.5284-11.85252 8.46879 0 16.29423 4.51819 20.52839 11.85252l115.41728 199.8321c4.23426 7.33395 4.23426 16.36975 0 23.7037z"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1,15 @@
|
||||||
|
<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
|
||||||
|
<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#41D1FF"/>
|
||||||
|
<stop offset="1" stop-color="#BD34FE"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#FFEA83"/>
|
||||||
|
<stop offset="0.0833333" stop-color="#FFDD35"/>
|
||||||
|
<stop offset="1" stop-color="#FFA800"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,2 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg version="1.1" viewBox="0 0 261.76 226.69" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)"><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-75.491l98.16-170.02 98.16 170.02z" fill="#41b883"/></g><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-36.227l58.896-102.01 58.896 102.01z" fill="#34495e"/></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 467 B |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Loading…
Reference in New Issue