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

Documentation updates

pull/3711/head
Cagatay Civici 2023-03-08 11:35:24 +03:00
parent c6f69602c1
commit 8036b64523
49 changed files with 620 additions and 468 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
assets/menu/menu.json
View File

@ -12,14 +12,6 @@
"name": "Configuration",
"to": "/configuration"
},
{
"name": "FilterService",
"to": "/filterservice"
},
{
"name": "Locale",
"to": "/locale"
},
{
"name": "Accessibility",
"to": "/accessibility"
@ -443,10 +435,6 @@
"name": "Overview",
"to": "/theming"
},
{
"name": "Theme Designer",
"href": "https://www.primefaces.org/designer/primevue"
},
{
"name": "Visual Editor",
"href": "https://designer.primevue.org"
@ -486,10 +474,32 @@
"icon": "pi pi-table",
"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",
"icon": "pi pi-search",
"children": [
{
"name": "About Us",
"to": "/team"
},
{
"name": "Roadmap",
"to": "/roadmap"
@ -523,24 +533,6 @@
"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
doc/accessibility/IntroductionDoc.vue
View File

@ -1,4 +1,5 @@
<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">
<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

0
doc/locale/ImportDoc.vue → doc/configuration/locale/ImportDoc.vue
View File

0
doc/locale/ApiDoc.vue → doc/configuration/locale/LocaleApiDoc.vue
View File

0
doc/locale/RepositoryDoc.vue → doc/configuration/locale/RepositoryDoc.vue
View File

0
doc/locale/SetLocaleDoc.vue → doc/configuration/locale/SetLocaleDoc.vue
View File

2
doc/confirmdialog/BasicDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<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>
<ConfirmDialog></ConfirmDialog>
<div class="card flex flex-wrap gap-2 justify-content-center">

3
doc/confirmdialog/ConfirmationServiceDoc.vue
View File

@ -1,7 +1,6 @@
//TODO:
<template>
<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>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</template>

2
doc/confirmpopup/BasicDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<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>
<ConfirmPopup></ConfirmPopup>
<div class="card flex flex-wrap gap-2 justify-content-center">

3
doc/confirmpopup/ConfirmationServiceDoc.vue
View File

@ -1,7 +1,6 @@
//TODO:
<template>
<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>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</template>

370
doc/dynamicdialog/BasicDoc.vue
View File

@ -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>

0
doc/dynamicdialog/CustomizingDialogDoc.vue → doc/dynamicdialog/CustomizationDoc.vue
View File

22
doc/dynamicdialog/DialogServiceDoc.vue
View File

@ -1,22 +1,36 @@
//TODO:
<template>
<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>
<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>
<script>
export default {
data() {
return {
code: {
code1: {
basic: `
import {createApp} from 'vue';
import DialogService from 'primevue/dialogservice';
const app = createApp(App);
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();`
}
};
}

364
doc/dynamicdialog/UsageDoc.vue
View File

@ -1,23 +1,373 @@
<template>
<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>
<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>
<script>
import Button from 'primevue/button';
import { h } from 'vue';
import ProductListDemo from './demo/ProductListDemo';
export default {
data() {
return {
code: {
basic: `const dialogRef = this.$dialog;`,
options: `const dialogRef = this.$dialog;`,
composition: `
import { useDialog } from 'primevue/usedialog';
basic: `
<Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
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>

19
doc/installation/ExamplesDoc.vue Normal file
View File

@ -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>

4
doc/configuration/NuxtIntegrationDoc.vue → doc/installation/NuxtIntegrationDoc.vue
View File

@ -2,12 +2,12 @@
<DocSectionText v-bind="$attrs">
<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>
<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>
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />

0
doc/configuration/PropCasesDoc.vue → doc/installation/PropCasesDoc.vue
View File

8
doc/installation/videos/NuxtDoc.vue Normal file
View File

@ -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
doc/theming/CustomThemeDoc.vue
View File

@ -6,9 +6,13 @@
</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
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>
<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>
<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

3
doc/toast/ToastServiceDoc.vue
View File

@ -1,7 +1,6 @@
//TODO:
<template>
<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>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</template>

8
layouts/AppConfigurator.vue
View File

@ -31,13 +31,7 @@
</section>
<section>
<h3>Free 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>
<h3>Themes</h3>
<h4>Bootstrap</h4>
<div class="grid free-themes">
<div class="col-3 flex flex-column align-items-center gap-2">

36
pages/configuration/index.vue
View File

@ -18,8 +18,9 @@
<script>
import ImportDoc from '@/doc/configuration/ImportDoc';
import InputStyleDoc from '@/doc/configuration/InputStyleDoc';
import NuxtIntegrationDoc from '@/doc/configuration/NuxtIntegrationDoc';
import PropCasesDoc from '@/doc/configuration/PropCasesDoc';
import LocaleApiDoc from '@/doc/configuration/locale/LocaleApiDoc';
import RepositoryDoc from '@/doc/configuration/locale/RepositoryDoc';
import SetLocaleDoc from '@/doc/configuration/locale/SetLocaleDoc';
import RippleDoc from '@/doc/configuration/RippleDoc';
export default {
@ -31,16 +32,6 @@ export default {
label: 'Import',
component: ImportDoc
},
{
id: 'nuxtintegration',
label: 'Nuxt Integration',
component: NuxtIntegrationDoc
},
{
id: 'propcases',
label: 'Prop Cases',
component: PropCasesDoc
},
{
id: 'ripple',
label: 'Ripple',
@ -50,6 +41,27 @@ export default {
id: 'inputstyle',
label: 'InputStyle',
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
}
]
}
]
};

24
pages/dynamicdialog/index.vue
View File

@ -2,7 +2,7 @@
<DocComponent
title="Vue Dynamic Dialog Component"
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"
:apiDocs="['DynamicDialog', 'Dialog', 'DialogService-UseDialog', 'DynamicDialogOptions']"
/>
@ -10,9 +10,8 @@
<script>
import AccessibilityDoc from '@/doc/dynamicdialog/AccessibilityDoc';
import BasicDoc from '@/doc/dynamicdialog/BasicDoc';
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 ImportDoc from '@/doc/dynamicdialog/ImportDoc';
import OpenDialogDoc from '@/doc/dynamicdialog/OpenDialogDoc';
@ -39,18 +38,13 @@ export default {
component: UsageDoc
},
{
id: 'basic',
label: 'Basic',
component: BasicDoc
},
{
id: 'opendialog',
label: 'Opening a Dialog',
id: 'open',
label: 'Open',
component: OpenDialogDoc
},
{
id: 'closedialog',
label: 'Closing a Dialog',
id: 'close',
label: 'Close',
component: CloseDialogDoc
},
{
@ -59,9 +53,9 @@ export default {
component: PassingDataDoc
},
{
id: 'customizingdata',
label: 'Customizing Dialog',
component: CustomizingDialogDoc
id: 'customization',
label: 'Customization',
component: CustomizationDoc
},
{
id: 'accessibility',

24
pages/installation/index.vue
View File

@ -17,9 +17,13 @@
<script>
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 UsageDoc from '@/doc/installation/UsageDoc';
import CreateVueDoc from '@/doc/installation/videos/CreateVueDoc';
import NuxtDoc from '@/doc/installation/videos/NuxtDoc';
export default {
data() {
@ -40,6 +44,21 @@ export default {
label: 'Usage',
component: UsageDoc
},
{
id: 'propcases',
label: 'Prop Cases',
component: PropCasesDoc
},
{
id: 'nuxtintegration',
label: 'Nuxt Integration',
component: NuxtIntegrationDoc
},
{
id: 'examples',
label: 'Examples',
component: ExamplesDoc
},
{
id: 'videos',
label: 'Videos',
@ -49,6 +68,11 @@ export default {
id: 'createvue',
label: 'CreateVue',
component: CreateVueDoc
},
{
id: 'nuxt',
label: 'Nuxt',
component: NuxtDoc
}
]
}

4
pages/landing/DesignerSection.vue
View File

@ -48,7 +48,7 @@
</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>
<i class="pi pi-arrow-right ml-auto"></i>
</a>
@ -123,7 +123,7 @@ export default {
fonts: [
{ 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: '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' }
],
selectedCity: null,

2
pages/landing/FooterSection.vue
View File

@ -56,7 +56,7 @@
<router-link to="/theming" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Guide</router-link>
</li>
<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 class="mb-4">
<router-link to="/colors" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Colors</router-link>

12
pages/landing/HeaderSection.vue
View File

@ -16,16 +16,22 @@
</li>
<li class="mr-0 lg:mr-2">
<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>
</a>
</li>
<li class="mr-0 lg:mr-2">
<a href="https://www.primefaces.org/designer-vue">
<img src="https://primefaces.org/cdn/primevue/images/landing/designer-icon.svg" alt="primevue templates" />
<a href="https://designer.primevue.org">
<img src="https://primefaces.org/cdn/primevue/images/landing/designer-icon.svg" alt="primevue designer" />
<span>Designer</span>
</a>
</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">
<a href="https://www.primefaces.org/store/templates.xhtml">
<img src="https://primefaces.org/cdn/primevue/images/landing/templates-icon.svg" alt="primevue templates" />

2
pages/landing/HeroSection.vue
View File

@ -12,7 +12,7 @@
</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">
<img src="https://primefaces.org/cdn/primevue/images/landing/designer-icon.svg" alt="primevue templates" />
<div class="name">

6
pages/landing/ThemeSection.vue
View File

@ -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('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>
<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
class="themes-main flex mt-7 justify-content-center px-5 lg:px-8"
@ -52,8 +52,10 @@
</Column>
<Column header="Agent" sortable sortField="representative.name" style="min-width: 14rem">
<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">
<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>
</Column>
<Column field="date" header="Date" sortable dataType="date" style="min-width: 8rem">

84
pages/team/index.vue Normal file
View File

@ -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>

2
pages/theming/index.vue
View File

@ -40,7 +40,7 @@ export default {
},
{
id: 'builtinthemes',
label: 'Buit-in Themes',
label: 'Built-in Themes',
component: BuiltInThemesDoc
},
{

3
public/images/landing/uikit-icon.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 860 B

1
public/images/logos/nuxt.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

15
public/images/logos/vite.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

2
public/images/logos/vue.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 467 B

BIN
public/images/team/aliriza.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public/images/team/atakan.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
public/images/team/bahadir.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
public/images/team/bugra.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
public/images/team/cagatay.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
public/images/team/cetin.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
public/images/team/dilara.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
public/images/team/kerem.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
public/images/team/mert.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public/images/team/olgu.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public/images/team/onur.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
public/images/team/tugce.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
public/images/team/ulas.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB