Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/primefaces/sakai-vue

Browse Source
This commit is contained in:
tugcekucukoglu
2024-07-30 11:32:18 +03:00
parent 767dd205b8 9cab42f25d
commit 74003ad08d
12 changed files with 122 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/layout/AppConfigurator.vue
View File

@@ -3,15 +3,13 @@ import { useLayout } from '@/layout/composables/layout';
import { $t, updatePreset, updateSurfacePalette } from '@primevue/themes'; import { $t, updatePreset, updateSurfacePalette } from '@primevue/themes';
import Aura from '@primevue/themes/aura'; import Aura from '@primevue/themes/aura';
import Lara from '@primevue/themes/lara'; import Lara from '@primevue/themes/lara';
import Nora from '@primevue/themes/nora';
import { ref } from 'vue'; import { ref } from 'vue';
const { layoutConfig, setPrimary, setSurface, setPreset, isDarkTheme, setMenuMode } = useLayout(); const { layoutConfig, setPrimary, setSurface, setPreset, isDarkTheme, setMenuMode } = useLayout();
const presets = { const presets = {
Aura, Aura,
Lara, Lara
Nora
}; };
const preset = ref(layoutConfig.preset); const preset = ref(layoutConfig.preset);
const presetOptions = ref(Object.keys(presets)); const presetOptions = ref(Object.keys(presets));
@@ -129,79 +127,41 @@ function getPresetExt() {
} }
}; };
} else { } else {
if (layoutConfig.preset === 'Nora') { return {
return { semantic: {
semantic: { primary: color.palette,
primary: color.palette, colorScheme: {
colorScheme: { light: {
light: { primary: {
primary: { color: '{primary.500}',
color: '{primary.600}', contrastColor: '#ffffff',
contrastColor: '#ffffff', hoverColor: '{primary.600}',
hoverColor: '{primary.700}', activeColor: '{primary.700}'
activeColor: '{primary.800}'
},
highlight: {
background: '{primary.600}',
focusBackground: '{primary.700}',
color: '#ffffff',
focusColor: '#ffffff'
}
}, },
dark: { highlight: {
primary: { background: '{primary.50}',
color: '{primary.500}', focusBackground: '{primary.100}',
contrastColor: '{surface.900}', color: '{primary.700}',
hoverColor: '{primary.400}', focusColor: '{primary.800}'
activeColor: '{primary.300}' }
}, },
highlight: { dark: {
background: '{primary.500}', primary: {
focusBackground: '{primary.400}', color: '{primary.400}',
color: '{surface.900}', contrastColor: '{surface.900}',
focusColor: '{surface.900}' hoverColor: '{primary.300}',
} activeColor: '{primary.200}'
},
highlight: {
background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
color: 'rgba(255,255,255,.87)',
focusColor: 'rgba(255,255,255,.87)'
} }
} }
} }
}; }
} else { };
return {
semantic: {
primary: color.palette,
colorScheme: {
light: {
primary: {
color: '{primary.500}',
contrastColor: '#ffffff',
hoverColor: '{primary.600}',
activeColor: '{primary.700}'
},
highlight: {
background: '{primary.50}',
focusBackground: '{primary.100}',
color: '{primary.700}',
focusColor: '{primary.800}'
}
},
dark: {
primary: {
color: '{primary.400}',
contrastColor: '{surface.900}',
hoverColor: '{primary.300}',
activeColor: '{primary.200}'
},
highlight: {
background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
color: 'rgba(255,255,255,.87)',
focusColor: 'rgba(255,255,255,.87)'
}
}
}
}
};
}
} }
} }

2
src/layout/AppFooter.vue
View File

@@ -3,6 +3,6 @@
<template> <template>
<div class="layout-footer"> <div class="layout-footer">
SAKAI by SAKAI by
<span class="font-medium">PrimeVue</span> <a href="https://primevue.org" target="_blank" rel="noopener noreferrer" class="text-primary font-bold hover:underline">PrimeVue</a>
</div> </div>
</template> </template>

4
src/layout/AppMenu.vue
View File

@@ -120,12 +120,12 @@ const model = ref([
items: [ items: [
{ {
label: 'Documentation', label: 'Documentation',
icon: 'pi pi-fw pi-question', icon: 'pi pi-fw pi-book',
to: '/documentation' to: '/documentation'
}, },
{ {
label: 'View Source', label: 'View Source',
icon: 'pi pi-fw pi-search', icon: 'pi pi-fw pi-github',
url: 'https://github.com/primefaces/sakai-vue', url: 'https://github.com/primefaces/sakai-vue',
target: '_blank' target: '_blank'
} }

41
src/views/Dashboard.vue
View File

@@ -11,7 +11,7 @@ const chartOptions = ref(null);
const items = ref([ const items = ref([
{ label: 'Add New', icon: 'pi pi-fw pi-plus' }, { label: 'Add New', icon: 'pi pi-fw pi-plus' },
{ label: 'Remove', icon: 'pi pi-fw pi-minus' } { label: 'Remove', icon: 'pi pi-fw pi-trash' }
]); ]);
onMounted(() => { onMounted(() => {
@@ -28,21 +28,21 @@ function setChartData() {
datasets: [ datasets: [
{ {
type: 'bar', type: 'bar',
label: 'Personal Wallet', label: 'Subscriptions',
backgroundColor: 'color-mix(in srgb, ' + documentStyle.getPropertyValue('--p-primary-400') + ' 100%, #fff)', backgroundColor: 'color-mix(in srgb, ' + documentStyle.getPropertyValue('--p-primary-400') + ' 100%, #fff)',
data: [4000, 10000, 15000, 4000], data: [4000, 10000, 15000, 4000],
barThickness: 32 barThickness: 32
}, },
{ {
type: 'bar', type: 'bar',
label: 'Corporate Wallet', label: 'Advertising',
backgroundColor: 'color-mix(in srgb, ' + documentStyle.getPropertyValue('--p-primary-300') + ' 100%, transparent)', backgroundColor: 'color-mix(in srgb, ' + documentStyle.getPropertyValue('--p-primary-300') + ' 100%, transparent)',
data: [2100, 8400, 2400, 7500], data: [2100, 8400, 2400, 7500],
barThickness: 32 barThickness: 32
}, },
{ {
type: 'bar', type: 'bar',
label: 'Investment Wallet', label: 'Affiliate',
backgroundColor: 'color-mix(in srgb, ' + documentStyle.getPropertyValue('--p-primary-200') + ' 100%, transparent)', backgroundColor: 'color-mix(in srgb, ' + documentStyle.getPropertyValue('--p-primary-200') + ' 100%, transparent)',
data: [4100, 5200, 3400, 7400], data: [4100, 5200, 3400, 7400],
borderRadius: { borderRadius: {
@@ -125,7 +125,7 @@ watch([getPrimary, getSurface, isDarkTheme], () => {
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">$2.100</div> <div class="text-surface-900 dark:text-surface-0 font-medium text-xl">$2.100</div>
</div> </div>
<div class="flex items-center justify-center bg-orange-100 rounded-border" style="width: 2.5rem; height: 2.5rem"> <div class="flex items-center justify-center bg-orange-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-map-marker text-orange-500 !text-xl"></i> <i class="pi pi-dollar text-orange-500 !text-xl"></i>
</div> </div>
</div> </div>
<span class="text-primary font-medium">%52+ </span> <span class="text-primary font-medium">%52+ </span>
@@ -140,7 +140,7 @@ watch([getPrimary, getSurface, isDarkTheme], () => {
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">28441</div> <div class="text-surface-900 dark:text-surface-0 font-medium text-xl">28441</div>
</div> </div>
<div class="flex items-center justify-center bg-cyan-100 rounded-border" style="width: 2.5rem; height: 2.5rem"> <div class="flex items-center justify-center bg-cyan-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-inbox text-cyan-500 !text-xl"></i> <i class="pi pi-users text-cyan-500 !text-xl"></i>
</div> </div>
</div> </div>
<span class="text-primary font-medium">520 </span> <span class="text-primary font-medium">520 </span>
@@ -190,7 +190,7 @@ watch([getPrimary, getSurface, isDarkTheme], () => {
<div class="font-semibold text-xl">Best Selling Products</div> <div class="font-semibold text-xl">Best Selling Products</div>
<div> <div>
<Button icon="pi pi-ellipsis-v" class="p-button-text p-button-plain p-button-rounded" @click="$refs.menu2.toggle($event)"></Button> <Button icon="pi pi-ellipsis-v" class="p-button-text p-button-plain p-button-rounded" @click="$refs.menu2.toggle($event)"></Button>
<Menu ref="menu2" :popup="true" :model="items"></Menu> <Menu ref="menu2" :popup="true" :model="items" class="!min-w-40"></Menu>
</div> </div>
</div> </div>
<ul class="list-none p-0 m-0"> <ul class="list-none p-0 m-0">
@@ -271,7 +271,7 @@ watch([getPrimary, getSurface, isDarkTheme], () => {
</div> </div>
<div class="col-span-12 xl:col-span-6"> <div class="col-span-12 xl:col-span-6">
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">Sales Overview</div> <div class="font-semibold text-xl mb-4">Revenue Stream</div>
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-80" /> <Chart type="bar" :data="chartData" :options="chartOptions" class="h-80" />
</div> </div>
<div class="card"> <div class="card">
@@ -279,7 +279,7 @@ watch([getPrimary, getSurface, isDarkTheme], () => {
<div class="font-semibold text-xl">Notifications</div> <div class="font-semibold text-xl">Notifications</div>
<div> <div>
<Button icon="pi pi-ellipsis-v" class="p-button-text p-button-plain p-button-rounded" @click="$refs.menu1.toggle($event)"></Button> <Button icon="pi pi-ellipsis-v" class="p-button-text p-button-plain p-button-rounded" @click="$refs.menu1.toggle($event)"></Button>
<Menu ref="menu1" :popup="true" :model="items"></Menu> <Menu ref="menu1" :popup="true" :model="items" class="!min-w-40"></Menu>
</div> </div>
</div> </div>
@@ -291,26 +291,26 @@ watch([getPrimary, getSurface, isDarkTheme], () => {
</div> </div>
<span class="text-surface-900 dark:text-surface-0 leading-normal" <span class="text-surface-900 dark:text-surface-0 leading-normal"
>Richard Jones >Richard Jones
<span class="text-surface-700 dark:text-surface-100">has purchased a blue t-shirt for <span class="text-blue-500">79$</span></span> <span class="text-surface-700 dark:text-surface-100">has purchased a blue t-shirt for <span class="text-primary font-bold">$79.00</span></span>
</span> </span>
</li> </li>
<li class="flex items-center py-2"> <li class="flex items-center py-2">
<div class="w-12 h-12 flex items-center justify-center bg-orange-100 rounded-full mr-4 shrink-0"> <div class="w-12 h-12 flex items-center justify-center bg-orange-100 rounded-full mr-4 shrink-0">
<i class="pi pi-download !text-xl text-orange-500"></i> <i class="pi pi-download !text-xl text-orange-500"></i>
</div> </div>
<span class="text-surface-700 dark:text-surface-100 leading-normal">Your request for withdrawal of <span class="text-blue-500 font-medium">2500$</span> has been initiated.</span> <span class="text-surface-700 dark:text-surface-100 leading-normal">Your request for withdrawal of <span class="text-primary font-bold">$2500.00</span> has been initiated.</span>
</li> </li>
</ul> </ul>
<span class="block text-muted-color font-medium mb-4">YESTERDAY</span> <span class="block text-muted-color font-medium mb-4">YESTERDAY</span>
<ul class="p-0 m-0 list-none"> <ul class="p-0 m-0 list-none mb-6">
<li class="flex items-center py-2 border-b border-surface"> <li class="flex items-center py-2 border-b border-surface">
<div class="w-12 h-12 flex items-center justify-center bg-blue-100 rounded-full mr-4 shrink-0"> <div class="w-12 h-12 flex items-center justify-center bg-blue-100 rounded-full mr-4 shrink-0">
<i class="pi pi-dollar !text-xl text-blue-500"></i> <i class="pi pi-dollar !text-xl text-blue-500"></i>
</div> </div>
<span class="text-surface-900 dark:text-surface-0 leading-normal" <span class="text-surface-900 dark:text-surface-0 leading-normal"
>Keyser Wick >Keyser Wick
<span class="text-surface-700 dark:text-surface-100">has purchased a black jacket for <span class="text-blue-500">59$</span></span> <span class="text-surface-700 dark:text-surface-100">has purchased a black jacket for <span class="text-primary font-bold">$59.00</span></span>
</span> </span>
</li> </li>
<li class="flex items-center py-2 border-b border-surface"> <li class="flex items-center py-2 border-b border-surface">
@@ -323,6 +323,21 @@ watch([getPrimary, getSurface, isDarkTheme], () => {
</span> </span>
</li> </li>
</ul> </ul>
<span class="block text-muted-color font-medium mb-4">LAST WEEK</span>
<ul class="p-0 m-0 list-none">
<li class="flex items-center py-2 border-b border-surface">
<div class="w-12 h-12 flex items-center justify-center bg-green-100 rounded-full mr-4 shrink-0">
<i class="pi pi-arrow-up !text-xl text-green-500"></i>
</div>
<span class="text-surface-900 dark:text-surface-0 leading-normal">Your revenue has increased by <span class="text-primary font-bold">%25</span>.</span>
</li>
<li class="flex items-center py-2 border-b border-surface">
<div class="w-12 h-12 flex items-center justify-center bg-purple-100 rounded-full mr-4 shrink-0">
<i class="pi pi-heart !text-xl text-purple-500"></i>
</div>
<span class="text-surface-900 dark:text-surface-0 leading-normal"><span class="text-primary font-bold">12</span> users have added your products to their wishlist.</span>
</li>
</ul>
</div> </div>
</div> </div>
</div> </div>

11
src/views/pages/Crud.vue
View File

@@ -1,8 +1,8 @@
<script setup> <script setup>
import { ref, onMounted } from 'vue'; import { ProductService } from '@/service/ProductService';
import { FilterMatchMode } from '@primevue/core/api'; import { FilterMatchMode } from '@primevue/core/api';
import { useToast } from 'primevue/usetoast'; import { useToast } from 'primevue/usetoast';
import { ProductService } from '@/service/ProductService'; import { onMounted, ref } from 'vue';
onMounted(() => { onMounted(() => {
ProductService.getProducts().then((data) => (products.value = data)); ProductService.getProducts().then((data) => (products.value = data));
@@ -128,13 +128,12 @@ const getStatusLabel = (status) => {
<div class="card"> <div class="card">
<Toolbar class="mb-6"> <Toolbar class="mb-6">
<template #start> <template #start>
<Button label="New" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" /> <Button label="New" icon="pi pi-plus" severity="secondary" class="mr-2" @click="openNew" />
<Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" /> <Button label="Delete" icon="pi pi-trash" severity="secondary" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
</template> </template>
<template #end> <template #end>
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2" auto /> <Button label="Export" icon="pi pi-upload" severity="secondary" @click="exportCSV($event)" />
<Button label="Export" icon="pi pi-upload" severity="help" @click="exportCSV($event)" />
</template> </template>
</Toolbar> </Toolbar>

2
src/views/pages/auth/Error.vue
View File

@@ -16,7 +16,7 @@ import FloatingConfigurator from '@/components/FloatingConfigurator.vue';
<span class="text-muted-color mb-8">Requested resource is not available.</span> <span class="text-muted-color mb-8">Requested resource is not available.</span>
<img src="/demo/images/error/asset-error.svg" alt="Error" class="mb-8" width="80%" /> <img src="/demo/images/error/asset-error.svg" alt="Error" class="mb-8" width="80%" />
<div class="col-span-12 mt-8 text-center"> <div class="col-span-12 mt-8 text-center">
<Button as="router-link" label="Go to Dashboard" to="/" severity="info" /> <Button as="router-link" label="Go to Dashboard" to="/" severity="danger" />
</div> </div>
</div> </div>
</div> </div>

2
src/views/pages/auth/Login.vue
View File

@@ -40,7 +40,7 @@ const checked = ref(false);
<InputText id="email1" type="text" placeholder="Email address" class="w-full md:w-[30rem] mb-8" v-model="email" /> <InputText id="email1" type="text" placeholder="Email address" class="w-full md:w-[30rem] mb-8" v-model="email" />
<label for="password1" class="block text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Password</label> <label for="password1" class="block text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Password</label>
<Password id="password1" v-model="password" placeholder="Password" :toggleMask="true" class="mb-4" fluid></Password> <Password id="password1" v-model="password" placeholder="Password" :toggleMask="true" class="mb-4" fluid :feedback="false"></Password>
<div class="flex items-center justify-between mt-2 mb-8 gap-8"> <div class="flex items-center justify-between mt-2 mb-8 gap-8">
<div class="flex items-center"> <div class="flex items-center">

28
src/views/uikit/ButtonDoc.vue
View File

@@ -30,7 +30,7 @@ const load = (index) => {
<template> <template>
<div class="flex flex-col md:flex-row gap-8"> <div class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/2"> <div class="md:w-1/2">
<div class="card flex flex-col gap-2"> <div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">Default</div> <div class="font-semibold text-xl">Default</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button label="Submit"></Button> <Button label="Submit"></Button>
@@ -38,7 +38,7 @@ const load = (index) => {
<Button label="Link" class="p-button-link" /> <Button label="Link" class="p-button-link" />
</div> </div>
</div> </div>
<div class="card flex flex-col gap-2"> <div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">Severities</div> <div class="font-semibold text-xl">Severities</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button label="Primary" /> <Button label="Primary" />
@@ -51,7 +51,7 @@ const load = (index) => {
<Button label="Contrast" severity="contrast" /> <Button label="Contrast" severity="contrast" />
</div> </div>
</div> </div>
<div class="card flex flex-col gap-2"> <div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">Text</div> <div class="font-semibold text-xl">Text</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button label="Primary" text /> <Button label="Primary" text />
@@ -64,7 +64,7 @@ const load = (index) => {
<Button label="Plain" plain text /> <Button label="Plain" plain text />
</div> </div>
</div> </div>
<div class="card flex flex-col gap-2"> <div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">Outlined</div> <div class="font-semibold text-xl">Outlined</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button label="Primary" outlined /> <Button label="Primary" outlined />
@@ -77,7 +77,7 @@ const load = (index) => {
<Button label="Contrast" severity="contrast" outlined /> <Button label="Contrast" severity="contrast" outlined />
</div> </div>
</div> </div>
<div class="card flex flex-col gap-2"> <div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">Group</div> <div class="font-semibold text-xl">Group</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<ButtonGroup> <ButtonGroup>
@@ -87,7 +87,7 @@ const load = (index) => {
</ButtonGroup> </ButtonGroup>
</div> </div>
</div> </div>
<div class="card flex flex-col gap-2"> <div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">SplitButton</div> <div class="font-semibold text-xl">SplitButton</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<SplitButton label="Save" :model="items"></SplitButton> <SplitButton label="Save" :model="items"></SplitButton>
@@ -100,7 +100,7 @@ const load = (index) => {
<SplitButton label="Save" :model="items" severity="contrast"></SplitButton> <SplitButton label="Save" :model="items" severity="contrast"></SplitButton>
</div> </div>
</div> </div>
<div class="card flex flex-col gap-2"> <div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">Templating</div> <div class="font-semibold text-xl">Templating</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button type="button"> <Button type="button">
@@ -114,7 +114,7 @@ const load = (index) => {
</div> </div>
</div> </div>
<div class="md:w-1/2"> <div class="md:w-1/2">
<div class="card flex flex-col gap-2"> <div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">Icons</div> <div class="font-semibold text-xl">Icons</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button icon="pi pi-star-fill" class="mr-2 mb-2"></Button> <Button icon="pi pi-star-fill" class="mr-2 mb-2"></Button>
@@ -122,7 +122,7 @@ const load = (index) => {
<Button label="Bookmark" icon="pi pi-bookmark" iconPos="right" class="mr-2 mb-2"></Button> <Button label="Bookmark" icon="pi pi-bookmark" iconPos="right" class="mr-2 mb-2"></Button>
</div> </div>
</div> </div>
<div class="card flex flex-col gap-2"> <div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">Raised</div> <div class="font-semibold text-xl">Raised</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button label="Primary" raised /> <Button label="Primary" raised />
@@ -135,7 +135,7 @@ const load = (index) => {
<Button label="Contrast" severity="contrast" raised /> <Button label="Contrast" severity="contrast" raised />
</div> </div>
</div> </div>
<div class="card flex flex-col gap-2"> <div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">Rounded</div> <div class="font-semibold text-xl">Rounded</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button label="Primary" rounded /> <Button label="Primary" rounded />
@@ -148,7 +148,7 @@ const load = (index) => {
<Button label="Contrast" severity="contrast" rounded /> <Button label="Contrast" severity="contrast" rounded />
</div> </div>
</div> </div>
<div class="card flex flex-col gap-2"> <div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">Rounded Icons</div> <div class="font-semibold text-xl">Rounded Icons</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button icon="pi pi-check" rounded /> <Button icon="pi pi-check" rounded />
@@ -160,7 +160,7 @@ const load = (index) => {
<Button icon="pi pi-times" severity="danger" rounded /> <Button icon="pi pi-times" severity="danger" rounded />
</div> </div>
</div> </div>
<div class="card flex flex-col gap-2"> <div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">Rounded Text</div> <div class="font-semibold text-xl">Rounded Text</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button icon="pi pi-check" text raised rounded /> <Button icon="pi pi-check" text raised rounded />
@@ -172,7 +172,7 @@ const load = (index) => {
<Button icon="pi pi-times" severity="danger" text raised rounded /> <Button icon="pi pi-times" severity="danger" text raised rounded />
</div> </div>
</div> </div>
<div class="card flex flex-col gap-2"> <div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">Rounded Outlined</div> <div class="font-semibold text-xl">Rounded Outlined</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button icon="pi pi-check" rounded outlined /> <Button icon="pi pi-check" rounded outlined />
@@ -184,7 +184,7 @@ const load = (index) => {
<Button icon="pi pi-times" severity="danger" rounded outlined /> <Button icon="pi pi-times" severity="danger" rounded outlined />
</div> </div>
</div> </div>
<div class="card flex flex-col gap-2"> <div class="card flex flex-col gap-4">
<div class="font-semibold text-xl">Loading</div> <div class="font-semibold text-xl">Loading</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Button type="button" class="mr-2 mb-2" label="Search" icon="pi pi-search" :loading="loading[0]" @click="load(0)" /> <Button type="button" class="mr-2 mb-2" label="Search" icon="pi pi-search" :loading="loading[0]" @click="load(0)" />

4
src/views/uikit/MediaDoc.vue
View File

@@ -72,7 +72,9 @@ const getSeverity = (status) => {
<div class="mb-4"> <div class="mb-4">
<div class="relative mx-auto"> <div class="relative mx-auto">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" /> <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" /> <div class="dark:bg-surface-900 absolute rounded-border" style="left: 5px; top: 5px">
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
</div>
</div> </div>
</div> </div>
<div class="mb-4 font-medium">{{ slotProps.data.name }}</div> <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>

2
src/views/uikit/MenuDoc.vue
View File

@@ -439,7 +439,7 @@ const onContextRightClick = (event) => {
<Breadcrumb :home="breadcrumbHome" :model="breadcrumbItems" /> <Breadcrumb :home="breadcrumbHome" :model="breadcrumbItems" />
</div> </div>
<div class="flex flex-col md:flex-row gap-4"> <div class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/2"> <div class="md:w-1/2">
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">Steps</div> <div class="font-semibold text-xl mb-4">Steps</div>

77
src/views/uikit/MessagesDoc.vue
View File

@@ -6,19 +6,6 @@ const toast = useToast();
const message = ref([]); const message = ref([]);
const username = ref(null); const username = ref(null);
const email = ref(null); const email = ref(null);
const count = ref(0);
const addMessage = (type) => {
if (type === 'success') {
message.value = [{ severity: 'success', detail: 'Success Message', content: 'Message sent', id: count.value++ }];
} else if (type === 'info') {
message.value = [{ severity: 'info', detail: 'Info Message', content: 'PrimeVue rocks', id: count.value++ }];
} else if (type === 'warn') {
message.value = [{ severity: 'warn', detail: 'Warn Message', content: 'There are unsaved changes', id: count.value++ }];
} else if (type === 'error') {
message.value = [{ severity: 'error', detail: 'Error Message', content: 'Validation failed', id: count.value++ }];
}
};
const showSuccess = () => { const showSuccess = () => {
toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Detail', life: 3000 }); toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Detail', life: 3000 });
@@ -38,40 +25,44 @@ const showError = () => {
</script> </script>
<template> <template>
<div class="flex flex-col md:flex-row gap-4"> <div class="flex flex-col md:flex-row gap-8">
<div class="card md:w-1/2"> <div class="md:w-1/2">
<div class="font-semibold text-xl mb-4">Toast</div> <div class="card">
<div class="flex flex-wrap gap-2"> <div class="font-semibold text-xl mb-4">Toast</div>
<Button @click="showSuccess()" label="Success" severity="success" /> <div class="flex flex-wrap gap-2">
<Button @click="showInfo()" label="Info" severity="info" /> <Button @click="showSuccess()" label="Success" severity="success" />
<Button @click="showWarn()" label="Warn" severity="warning" /> <Button @click="showInfo()" label="Info" severity="info" />
<Button @click="showError()" label="Error" severity="danger" /> <Button @click="showWarn()" label="Warn" severity="warn" />
</div> <Button @click="showError()" label="Error" severity="danger" />
</div>
<div class="font-semibold text-xl mt-4 mb-4">Inline</div> <div class="font-semibold text-xl mt-4 mb-4">Inline</div>
<div class="flex flex-wrap mb-4 gap-2"> <div class="flex flex-wrap mb-4 gap-2">
<InputText v-model="username" placeholder="Username" aria-label="username" invalid /> <InputText v-model="username" placeholder="Username" aria-label="username" invalid />
<Message severity="error">Username is required</Message> <Message severity="error">Username is required</Message>
</div> </div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<InputText v-model="email" placeholder="Email" aria-label="email" invalid /> <InputText v-model="email" placeholder="Email" aria-label="email" invalid />
<Message severity="error" icon="pi pi-times-circle" /> <Message severity="error" icon="pi pi-times-circle" />
</div>
</div> </div>
</div> </div>
<div class="card md:w-1/2"> <div class="md:w-1/2">
<div class="font-semibold text-xl mb-4">Message</div> <div class="card">
<div class="flex flex-col gap-4 mb-4"> <div class="font-semibold text-xl mb-4">Message</div>
<Message severity="success">Success Message</Message> <div class="flex flex-col gap-4 mb-4">
<Message severity="info">Info Message</Message> <Message severity="success">Success Message</Message>
<Message severity="warn">Warn Message</Message> <Message severity="info">Info Message</Message>
<Message severity="error">Error Message</Message> <Message severity="warn">Warn Message</Message>
<Message severity="secondary">Secondary Message</Message> <Message severity="error">Error Message</Message>
<Message severity="contrast">Contrast Message</Message> <Message severity="secondary">Secondary Message</Message>
</div> <Message severity="contrast">Contrast Message</Message>
</div>
<transition-group name="p-message" tag="div"> <transition-group name="p-message" tag="div">
<Message v-for="msg of message" :severity="msg.severity" :key="msg.content">{{ msg.content }}</Message> <Message v-for="msg of message" :severity="msg.severity" :key="msg.content">{{ msg.content }}</Message>
</transition-group> </transition-group>
</div>
</div> </div>
</div> </div>
</template> </template>

3
src/views/uikit/TableDoc.vue
View File

@@ -194,9 +194,6 @@ const calculateCustomerTotal = (name) => {
<template #filterapply="{ filterCallback }"> <template #filterapply="{ filterCallback }">
<Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button> <Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
</template> </template>
<template #filterfooter>
<div class="px-4 pt-0 pb-4 text-center">Customized Buttons</div>
</template>
</Column> </Column>
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem"> <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
<template #body="{ data }"> <template #body="{ data }">