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

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