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

Cosmetic updates

Browse Source
This commit is contained in:
Cagatay Civici
2024-07-30 11:17:12 +03:00
parent fa0e82c015
commit 49e82095c9
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 Aura from '@primevue/themes/aura';
import Lara from '@primevue/themes/lara';
import Nora from '@primevue/themes/nora';
import { ref } from 'vue';
const { layoutConfig, setPrimary, setSurface, setPreset, isDarkTheme, setMenuMode } = useLayout();
const presets = {
Aura,
Lara,
Nora
Lara
};
const preset = ref(layoutConfig.preset);
const presetOptions = ref(Object.keys(presets));
@@ -129,79 +127,41 @@ function getPresetExt() {
}
};
} else {
if (layoutConfig.preset === 'Nora') {
return {
semantic: {
primary: color.palette,
colorScheme: {
light: {
primary: {
color: '{primary.600}',
contrastColor: '#ffffff',
hoverColor: '{primary.700}',
activeColor: '{primary.800}'
},
highlight: {
background: '{primary.600}',
focusBackground: '{primary.700}',
color: '#ffffff',
focusColor: '#ffffff'
}
return {
semantic: {
primary: color.palette,
colorScheme: {
light: {
primary: {
color: '{primary.500}',
contrastColor: '#ffffff',
hoverColor: '{primary.600}',
activeColor: '{primary.700}'
},
dark: {
primary: {
color: '{primary.500}',
contrastColor: '{surface.900}',
hoverColor: '{primary.400}',
activeColor: '{primary.300}'
},
highlight: {
background: '{primary.500}',
focusBackground: '{primary.400}',
color: '{surface.900}',
focusColor: '{surface.900}'
}
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)'
}
}
}
};
} 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>
<div class="layout-footer">
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>
</template>

4
src/layout/AppMenu.vue
View File

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

41
src/views/Dashboard.vue
View File

@@ -11,7 +11,7 @@ const chartOptions = ref(null);
const items = ref([
{ 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(() => {
@@ -28,21 +28,21 @@ function setChartData() {
datasets: [
{
type: 'bar',
label: 'Personal Wallet',
label: 'Subscriptions',
backgroundColor: 'color-mix(in srgb, ' + documentStyle.getPropertyValue('--p-primary-400') + ' 100%, #fff)',
data: [4000, 10000, 15000, 4000],
barThickness: 32
},
{
type: 'bar',
label: 'Corporate Wallet',
label: 'Advertising',
backgroundColor: 'color-mix(in srgb, ' + documentStyle.getPropertyValue('--p-primary-300') + ' 100%, transparent)',
data: [2100, 8400, 2400, 7500],
barThickness: 32
},
{
type: 'bar',
label: 'Investment Wallet',
label: 'Affiliate',
backgroundColor: 'color-mix(in srgb, ' + documentStyle.getPropertyValue('--p-primary-200') + ' 100%, transparent)',
data: [4100, 5200, 3400, 7400],
borderRadius: {
@@ -130,7 +130,7 @@ watch([getPrimary, getSurface], () => {
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">$2.100</div>
</div>
<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>
<span class="text-primary font-medium">%52+ </span>
@@ -145,7 +145,7 @@ watch([getPrimary, getSurface], () => {
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">28441</div>
</div>
<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>
<span class="text-primary font-medium">520 </span>
@@ -195,7 +195,7 @@ watch([getPrimary, getSurface], () => {
<div class="font-semibold text-xl">Best Selling Products</div>
<div>
<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>
<ul class="list-none p-0 m-0">
@@ -276,7 +276,7 @@ watch([getPrimary, getSurface], () => {
</div>
<div class="col-span-12 xl:col-span-6">
<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" />
</div>
<div class="card">
@@ -284,7 +284,7 @@ watch([getPrimary, getSurface], () => {
<div class="font-semibold text-xl">Notifications</div>
<div>
<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>
@@ -296,26 +296,26 @@ watch([getPrimary, getSurface], () => {
</div>
<span class="text-surface-900 dark:text-surface-0 leading-normal"
>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>
</li>
<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">
<i class="pi pi-download !text-xl text-orange-500"></i>
</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>
</ul>
<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">
<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>
</div>
<span class="text-surface-900 dark:text-surface-0 leading-normal"
>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>
</li>
<li class="flex items-center py-2 border-b border-surface">
@@ -328,6 +328,21 @@ watch([getPrimary, getSurface], () => {
</span>
</li>
</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>

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

@@ -1,8 +1,8 @@
<script setup>
import { ref, onMounted } from 'vue';
import { ProductService } from '@/service/ProductService';
import { FilterMatchMode } from '@primevue/core/api';
import { useToast } from 'primevue/usetoast';
import { ProductService } from '@/service/ProductService';
import { onMounted, ref } from 'vue';
onMounted(() => {
ProductService.getProducts().then((data) => (products.value = data));
@@ -128,13 +128,12 @@ const getStatusLabel = (status) => {
<div class="card">
<Toolbar class="mb-6">
<template #start>
<Button label="New" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" />
<Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
<Button label="New" icon="pi pi-plus" severity="secondary" class="mr-2" @click="openNew" />
<Button label="Delete" icon="pi pi-trash" severity="secondary" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
</template>
<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="help" @click="exportCSV($event)" />
<Button label="Export" icon="pi pi-upload" severity="secondary" @click="exportCSV($event)" />
</template>
</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>
<img src="/demo/images/error/asset-error.svg" alt="Error" class="mb-8" width="80%" />
<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>

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" />
<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">

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

@@ -30,7 +30,7 @@ const load = (index) => {
<template>
<div class="flex flex-col md:flex-row gap-8">
<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="flex flex-wrap gap-2">
<Button label="Submit"></Button>
@@ -38,7 +38,7 @@ const load = (index) => {
<Button label="Link" class="p-button-link" />
</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="flex flex-wrap gap-2">
<Button label="Primary" />
@@ -51,7 +51,7 @@ const load = (index) => {
<Button label="Contrast" severity="contrast" />
</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="flex flex-wrap gap-2">
<Button label="Primary" text />
@@ -64,7 +64,7 @@ const load = (index) => {
<Button label="Plain" plain text />
</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="flex flex-wrap gap-2">
<Button label="Primary" outlined />
@@ -77,7 +77,7 @@ const load = (index) => {
<Button label="Contrast" severity="contrast" outlined />
</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="flex flex-wrap gap-2">
<ButtonGroup>
@@ -87,7 +87,7 @@ const load = (index) => {
</ButtonGroup>
</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="flex flex-wrap gap-2">
<SplitButton label="Save" :model="items"></SplitButton>
@@ -100,7 +100,7 @@ const load = (index) => {
<SplitButton label="Save" :model="items" severity="contrast"></SplitButton>
</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="flex flex-wrap gap-2">
<Button type="button">
@@ -114,7 +114,7 @@ const load = (index) => {
</div>
</div>
<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="flex flex-wrap gap-2">
<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>
</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="flex flex-wrap gap-2">
<Button label="Primary" raised />
@@ -135,7 +135,7 @@ const load = (index) => {
<Button label="Contrast" severity="contrast" raised />
</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="flex flex-wrap gap-2">
<Button label="Primary" rounded />
@@ -148,7 +148,7 @@ const load = (index) => {
<Button label="Contrast" severity="contrast" rounded />
</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="flex flex-wrap gap-2">
<Button icon="pi pi-check" rounded />
@@ -160,7 +160,7 @@ const load = (index) => {
<Button icon="pi pi-times" severity="danger" rounded />
</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="flex flex-wrap gap-2">
<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 />
</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="flex flex-wrap gap-2">
<Button icon="pi pi-check" rounded outlined />
@@ -184,7 +184,7 @@ const load = (index) => {
<Button icon="pi pi-times" severity="danger" rounded outlined />
</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="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)" />

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

@@ -72,7 +72,9 @@ const getSeverity = (status) => {
<div class="mb-4">
<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" />
<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 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" />
</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="card">
<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 username = 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 = () => {
toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Detail', life: 3000 });
@@ -38,40 +25,44 @@ const showError = () => {
</script>
<template>
<div class="flex flex-col md:flex-row gap-4">
<div class="card md:w-1/2">
<div class="font-semibold text-xl mb-4">Toast</div>
<div class="flex flex-wrap gap-2">
<Button @click="showSuccess()" label="Success" severity="success" />
<Button @click="showInfo()" label="Info" severity="info" />
<Button @click="showWarn()" label="Warn" severity="warning" />
<Button @click="showError()" label="Error" severity="danger" />
</div>
<div class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/2">
<div class="card">
<div class="font-semibold text-xl mb-4">Toast</div>
<div class="flex flex-wrap gap-2">
<Button @click="showSuccess()" label="Success" severity="success" />
<Button @click="showInfo()" label="Info" severity="info" />
<Button @click="showWarn()" label="Warn" severity="warn" />
<Button @click="showError()" label="Error" severity="danger" />
</div>
<div class="font-semibold text-xl mt-4 mb-4">Inline</div>
<div class="flex flex-wrap mb-4 gap-2">
<InputText v-model="username" placeholder="Username" aria-label="username" invalid />
<Message severity="error">Username is required</Message>
</div>
<div class="flex flex-wrap gap-2">
<InputText v-model="email" placeholder="Email" aria-label="email" invalid />
<Message severity="error" icon="pi pi-times-circle" />
<div class="font-semibold text-xl mt-4 mb-4">Inline</div>
<div class="flex flex-wrap mb-4 gap-2">
<InputText v-model="username" placeholder="Username" aria-label="username" invalid />
<Message severity="error">Username is required</Message>
</div>
<div class="flex flex-wrap gap-2">
<InputText v-model="email" placeholder="Email" aria-label="email" invalid />
<Message severity="error" icon="pi pi-times-circle" />
</div>
</div>
</div>
<div class="card md:w-1/2">
<div class="font-semibold text-xl mb-4">Message</div>
<div class="flex flex-col gap-4 mb-4">
<Message severity="success">Success Message</Message>
<Message severity="info">Info Message</Message>
<Message severity="warn">Warn Message</Message>
<Message severity="error">Error Message</Message>
<Message severity="secondary">Secondary Message</Message>
<Message severity="contrast">Contrast Message</Message>
</div>
<div class="md:w-1/2">
<div class="card">
<div class="font-semibold text-xl mb-4">Message</div>
<div class="flex flex-col gap-4 mb-4">
<Message severity="success">Success Message</Message>
<Message severity="info">Info Message</Message>
<Message severity="warn">Warn Message</Message>
<Message severity="error">Error Message</Message>
<Message severity="secondary">Secondary Message</Message>
<Message severity="contrast">Contrast Message</Message>
</div>
<transition-group name="p-message" tag="div">
<Message v-for="msg of message" :severity="msg.severity" :key="msg.content">{{ msg.content }}</Message>
</transition-group>
<transition-group name="p-message" tag="div">
<Message v-for="msg of message" :severity="msg.severity" :key="msg.content">{{ msg.content }}</Message>
</transition-group>
</div>
</div>
</div>
</template>

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

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