Initial commit
This commit is contained in:
andrea.terzani
198
src/views/uikit/ButtonDoc.vue
Normal file
198
src/views/uikit/ButtonDoc.vue
Normal file
@@ -0,0 +1,198 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const items = ref([
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh'
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times'
|
||||
},
|
||||
{
|
||||
separator: true
|
||||
},
|
||||
{
|
||||
label: 'Home',
|
||||
icon: 'pi pi-home'
|
||||
}
|
||||
]);
|
||||
|
||||
const loading = ref([false, false, false]);
|
||||
|
||||
const load = (index) => {
|
||||
loading.value[index] = true;
|
||||
setTimeout(() => (loading.value[index] = false), 1000);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col md:flex-row gap-6">
|
||||
<div class="md:w-1/2">
|
||||
<div class="card flex flex-col gap-2">
|
||||
<h5>Default</h5>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Button label="Submit"></Button>
|
||||
<Button label="Disabled" :disabled="true"></Button>
|
||||
<Button label="Link" class="p-button-link" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-2">
|
||||
<h5>Severities</h5>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Button label="Primary" />
|
||||
<Button label="Secondary" severity="secondary" />
|
||||
<Button label="Success" severity="success" />
|
||||
<Button label="Info" severity="info" />
|
||||
<Button label="Warn" severity="warn" />
|
||||
<Button label="Help" severity="help" />
|
||||
<Button label="Danger" severity="danger" />
|
||||
<Button label="Contrast" severity="contrast" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-2">
|
||||
<h5>Text</h5>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Button label="Primary" text />
|
||||
<Button label="Secondary" severity="secondary" text />
|
||||
<Button label="Success" severity="success" text />
|
||||
<Button label="Info" severity="info" text />
|
||||
<Button label="Warn" severity="warn" text />
|
||||
<Button label="Help" severity="help" text />
|
||||
<Button label="Danger" severity="danger" text />
|
||||
<Button label="Plain" plain text />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-2">
|
||||
<h5>Outlined</h5>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Button label="Primary" outlined />
|
||||
<Button label="Secondary" severity="secondary" outlined />
|
||||
<Button label="Success" severity="success" outlined />
|
||||
<Button label="Info" severity="info" outlined />
|
||||
<Button label="warn" severity="warn" outlined />
|
||||
<Button label="Help" severity="help" outlined />
|
||||
<Button label="Danger" severity="danger" outlined />
|
||||
<Button label="Contrast" severity="contrast" outlined />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-2">
|
||||
<h5>Button Group</h5>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<ButtonGroup>
|
||||
<Button label="Save" icon="pi pi-check" />
|
||||
<Button label="Delete" icon="pi pi-trash" />
|
||||
<Button label="Cancel" icon="pi pi-times" />
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-2">
|
||||
<h5>SplitButton</h5>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<SplitButton label="Save" :model="items"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" severity="secondary"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" severity="success"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" severity="info"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" severity="warn"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" severity="help"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" severity="danger"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" severity="contrast"></SplitButton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-2">
|
||||
<h5>Templating</h5>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Button type="button">
|
||||
<img alt="logo" src="/demo/images/logo-white.svg" style="width: 1.5rem" />
|
||||
</Button>
|
||||
<Button type="button" outlined severity="success">
|
||||
<img alt="logo" src="/demo/images/logo.svg" style="width: 1.5rem" />
|
||||
<span class="ml-2 text-bold">PrimeVue</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-1/2">
|
||||
<div class="card flex flex-col gap-2">
|
||||
<h5>Icons</h5>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Button icon="pi pi-star-fill" class="mr-2 mb-2"></Button>
|
||||
<Button label="Bookmark" icon="pi pi-bookmark" class="mr-2 mb-2"></Button>
|
||||
<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">
|
||||
<h5>Raised</h5>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Button label="Primary" raised />
|
||||
<Button label="Secondary" severity="secondary" raised />
|
||||
<Button label="Success" severity="success" raised />
|
||||
<Button label="Info" severity="info" raised />
|
||||
<Button label="Warn" severity="warn" raised />
|
||||
<Button label="Help" severity="help" raised />
|
||||
<Button label="Danger" severity="danger" raised />
|
||||
<Button label="Contrast" severity="contrast" raised />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-2">
|
||||
<h5>Rounded</h5>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Button label="Primary" rounded />
|
||||
<Button label="Secondary" severity="secondary" rounded />
|
||||
<Button label="Success" severity="success" rounded />
|
||||
<Button label="Info" severity="info" rounded />
|
||||
<Button label="Warn" severity="warn" rounded />
|
||||
<Button label="Help" severity="help" rounded />
|
||||
<Button label="Danger" severity="danger" rounded />
|
||||
<Button label="Contrast" severity="contrast" rounded />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-2">
|
||||
<h5>Rounded Icons</h5>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Button icon="pi pi-check" rounded />
|
||||
<Button icon="pi pi-bookmark" severity="secondary" rounded />
|
||||
<Button icon="pi pi-search" severity="success" rounded />
|
||||
<Button icon="pi pi-user" severity="info" rounded />
|
||||
<Button icon="pi pi-bell" severity="warn" rounded />
|
||||
<Button icon="pi pi-heart" severity="help" rounded />
|
||||
<Button icon="pi pi-times" severity="danger" rounded />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-2">
|
||||
<h5>Rounded Text</h5>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Button icon="pi pi-check" text raised rounded />
|
||||
<Button icon="pi pi-bookmark" severity="secondary" text raised rounded />
|
||||
<Button icon="pi pi-search" severity="success" text raised rounded />
|
||||
<Button icon="pi pi-user" severity="info" text raised rounded />
|
||||
<Button icon="pi pi-bell" severity="warn" text raised rounded />
|
||||
<Button icon="pi pi-heart" severity="help" text raised rounded />
|
||||
<Button icon="pi pi-times" severity="danger" text raised rounded />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-2">
|
||||
<h5>Rounded Outlined</h5>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Button icon="pi pi-check" rounded outlined />
|
||||
<Button icon="pi pi-bookmark" severity="secondary" rounded outlined />
|
||||
<Button icon="pi pi-search" severity="success" rounded outlined />
|
||||
<Button icon="pi pi-user" severity="info" rounded outlined />
|
||||
<Button icon="pi pi-bell" severity="warn" rounded outlined />
|
||||
<Button icon="pi pi-heart" severity="help" rounded outlined />
|
||||
<Button icon="pi pi-times" severity="danger" rounded outlined />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-2">
|
||||
<h5>Loading</h5>
|
||||
<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" iconPos="right" :loading="loading[1]" @click="load(1)" />
|
||||
<Button type="button" class="mr-2 mb-2" icon="pi pi-search" :loading="loading[2]" @click="load(2)" />
|
||||
<Button type="button" class="mr-2 mb-2" label="Search" :loading="loading[3]" @click="load(3)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
283
src/views/uikit/ChartDoc.vue
Normal file
283
src/views/uikit/ChartDoc.vue
Normal file
@@ -0,0 +1,283 @@
|
||||
<script setup>
|
||||
import { useLayout } from '@/layout/composables/layout';
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
const { layoutConfig } = useLayout();
|
||||
let documentStyle = getComputedStyle(document.documentElement);
|
||||
let textColor = documentStyle.getPropertyValue('--text-color');
|
||||
let textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
|
||||
let surfaceBorder = documentStyle.getPropertyValue('--surface-border');
|
||||
|
||||
const lineData = ref(null);
|
||||
const pieData = ref(null);
|
||||
const polarData = ref(null);
|
||||
const barData = ref(null);
|
||||
const radarData = ref(null);
|
||||
|
||||
const lineOptions = ref(null);
|
||||
const pieOptions = ref(null);
|
||||
const polarOptions = ref(null);
|
||||
const barOptions = ref(null);
|
||||
const radarOptions = ref(null);
|
||||
|
||||
const setColorOptions = () => {
|
||||
documentStyle = getComputedStyle(document.documentElement);
|
||||
textColor = documentStyle.getPropertyValue('--text-color');
|
||||
textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
|
||||
surfaceBorder = documentStyle.getPropertyValue('--surface-border');
|
||||
};
|
||||
|
||||
const setChart = () => {
|
||||
barData.value = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: documentStyle.getPropertyValue('--p-primary-500'),
|
||||
borderColor: documentStyle.getPropertyValue('--p-primary-500'),
|
||||
data: [65, 59, 80, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: documentStyle.getPropertyValue('--p-primary-200'),
|
||||
borderColor: documentStyle.getPropertyValue('--p-primary-200'),
|
||||
data: [28, 48, 40, 19, 86, 27, 90]
|
||||
}
|
||||
]
|
||||
};
|
||||
barOptions.value = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: textColor
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: textColorSecondary,
|
||||
font: {
|
||||
weight: 500
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: textColorSecondary
|
||||
},
|
||||
grid: {
|
||||
color: surfaceBorder,
|
||||
drawBorder: false
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
pieData.value = {
|
||||
labels: ['A', 'B', 'C'],
|
||||
datasets: [
|
||||
{
|
||||
data: [540, 325, 702],
|
||||
backgroundColor: [documentStyle.getPropertyValue('--p-indigo-500'), documentStyle.getPropertyValue('--p-purple-500'), documentStyle.getPropertyValue('--p-teal-500')],
|
||||
hoverBackgroundColor: [documentStyle.getPropertyValue('--p-indigo-400'), documentStyle.getPropertyValue('--p-purple-400'), documentStyle.getPropertyValue('--p-teal-400')]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
pieOptions.value = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
usePointStyle: true,
|
||||
color: textColor
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
lineData.value = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'First Dataset',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
fill: false,
|
||||
backgroundColor: documentStyle.getPropertyValue('--p-primary-500'),
|
||||
borderColor: documentStyle.getPropertyValue('--p-primary-500'),
|
||||
tension: 0.4
|
||||
},
|
||||
{
|
||||
label: 'Second Dataset',
|
||||
data: [28, 48, 40, 19, 86, 27, 90],
|
||||
fill: false,
|
||||
backgroundColor: documentStyle.getPropertyValue('--p-primary-200'),
|
||||
borderColor: documentStyle.getPropertyValue('--p-primary-200'),
|
||||
tension: 0.4
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
lineOptions.value = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: textColor
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: textColorSecondary
|
||||
},
|
||||
grid: {
|
||||
color: surfaceBorder,
|
||||
drawBorder: false
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: textColorSecondary
|
||||
},
|
||||
grid: {
|
||||
color: surfaceBorder,
|
||||
drawBorder: false
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
polarData.value = {
|
||||
datasets: [
|
||||
{
|
||||
data: [11, 16, 7, 3],
|
||||
backgroundColor: [documentStyle.getPropertyValue('--p-indigo-500'), documentStyle.getPropertyValue('--p-purple-500'), documentStyle.getPropertyValue('--p-teal-500'), documentStyle.getPropertyValue('--p-orange-500')],
|
||||
label: 'My dataset'
|
||||
}
|
||||
],
|
||||
labels: ['Indigo', 'Purple', 'Teal', 'Orange']
|
||||
};
|
||||
|
||||
polarOptions.value = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: textColor
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
r: {
|
||||
grid: {
|
||||
color: surfaceBorder
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
radarData.value = {
|
||||
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
borderColor: documentStyle.getPropertyValue('--p-indigo-400'),
|
||||
pointBackgroundColor: documentStyle.getPropertyValue('--p-indigo-400'),
|
||||
pointBorderColor: documentStyle.getPropertyValue('--p-indigo-400'),
|
||||
pointHoverBackgroundColor: textColor,
|
||||
pointHoverBorderColor: documentStyle.getPropertyValue('--p-indigo-400'),
|
||||
data: [65, 59, 90, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
borderColor: documentStyle.getPropertyValue('--p-purple-400'),
|
||||
pointBackgroundColor: documentStyle.getPropertyValue('--p-purple-400'),
|
||||
pointBorderColor: documentStyle.getPropertyValue('--p-purple-400'),
|
||||
pointHoverBackgroundColor: textColor,
|
||||
pointHoverBorderColor: documentStyle.getPropertyValue('--p-purple-400'),
|
||||
data: [28, 48, 40, 19, 96, 27, 100]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
radarOptions.value = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: textColor
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
r: {
|
||||
grid: {
|
||||
color: textColorSecondary
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
watch(
|
||||
layoutConfig.primary,
|
||||
() => {
|
||||
setColorOptions();
|
||||
setChart();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
watch(
|
||||
layoutConfig.darkTheme,
|
||||
() => {
|
||||
setColorOptions();
|
||||
setChart();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Fluid class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card">
|
||||
<h5>Linear Chart</h5>
|
||||
<Chart type="line" :data="lineData" :options="lineOptions"></Chart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card">
|
||||
<h5>Bar Chart</h5>
|
||||
<Chart type="bar" :data="barData" :options="barOptions"></Chart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card flex flex-col items-center">
|
||||
<h5 class="text-left w-full">Pie Chart</h5>
|
||||
<Chart type="pie" :data="pieData" :options="pieOptions"></Chart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card flex flex-col items-center">
|
||||
<h5 class="text-left w-full">Doughnut Chart</h5>
|
||||
<Chart type="doughnut" :data="pieData" :options="pieOptions"></Chart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card flex flex-col items-center">
|
||||
<h5 class="text-left w-full">Polar Area Chart</h5>
|
||||
<Chart type="polarArea" :data="polarData" :options="polarOptions"></Chart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card flex flex-col items-center">
|
||||
<h5 class="text-left w-full">Radar Chart</h5>
|
||||
<Chart type="radar" :data="radarData" :options="radarOptions"></Chart>
|
||||
</div>
|
||||
</div>
|
||||
</Fluid>
|
||||
</template>
|
||||
34
src/views/uikit/FileDoc.vue
Normal file
34
src/views/uikit/FileDoc.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
|
||||
const toast = useToast();
|
||||
const fileupload = ref();
|
||||
|
||||
const upload = () => {
|
||||
fileupload.value.upload();
|
||||
};
|
||||
|
||||
const onUpload = () => {
|
||||
toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12">
|
||||
<div class="card">
|
||||
<h5>Advanced</h5>
|
||||
<FileUpload name="demo[]" @uploader="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000" customUpload />
|
||||
</div>
|
||||
<div class="card">
|
||||
<h5>Basic</h5>
|
||||
<div class="card flex flex-col gap-6 items-center justify-center">
|
||||
<Toast />
|
||||
<FileUpload ref="fileupload" mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
|
||||
<Button label="Upload" @click="upload" severity="secondary" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
121
src/views/uikit/FormLayout.vue
Normal file
121
src/views/uikit/FormLayout.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const dropdownItems = ref([
|
||||
{ name: 'Option 1', code: 'Option 1' },
|
||||
{ name: 'Option 2', code: 'Option 2' },
|
||||
{ name: 'Option 3', code: 'Option 3' }
|
||||
]);
|
||||
|
||||
const dropdownItem = ref(null);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Fluid>
|
||||
<div class="flex flex-col md:flex-row gap-6">
|
||||
<div class="md:w-1/2">
|
||||
<div class="card flex flex-col gap-4">
|
||||
<h5>Vertical</h5>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="name1">Name</label>
|
||||
<InputText id="name1" type="text" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="email1">Email</label>
|
||||
<InputText id="email1" type="text" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="age1">Age</label>
|
||||
<InputText id="age1" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-col gap-4">
|
||||
<h5>Vertical Grid</h5>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<div class="flex flex-col grow basis-0 gap-2">
|
||||
<label for="name2">Name</label>
|
||||
<InputText id="name2" type="text" />
|
||||
</div>
|
||||
<div class="flex flex-col grow basis-0 gap-2">
|
||||
<label for="email2">Email</label>
|
||||
<InputText id="email2" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-1/2">
|
||||
<div class="card flex flex-col gap-4">
|
||||
<h5>Horizontal</h5>
|
||||
<div class="grid grid-cols-12 gap-2">
|
||||
<label for="name3" class="flex items-center col-span-12 mb-2 md:col-span-2 md:mb-0">Name</label>
|
||||
<div class="col-span-12 md:col-span-10">
|
||||
<InputText id="name3" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-12 gap-2">
|
||||
<label for="email3" class="flex items-center col-span-12 mb-2 md:col-span-2 md:mb-0">Email</label>
|
||||
<div class="col-span-12 md:col-span-10">
|
||||
<InputText id="email3" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-col gap-4">
|
||||
<h5>Inline</h5>
|
||||
<div class="flex flex-wrap items-start gap-4">
|
||||
<div class="field">
|
||||
<label for="firstname1" class="sr-only">Firstname</label>
|
||||
<InputText id="firstname1" type="text" placeholder="Firstname" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="lastname1" class="sr-only">Lastname</label>
|
||||
<InputText id="lastname1" type="text" placeholder="Lastname" />
|
||||
</div>
|
||||
<Button label="Submit" :fluid="false"></Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-4">
|
||||
<h5>Help Text</h5>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<label for="username">Username</label>
|
||||
<InputText id="username" type="text" />
|
||||
<small>Enter your username to reset your password.</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex mt-6">
|
||||
<div class="card flex flex-col gap-4 w-full">
|
||||
<h5>Advanced</h5>
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<div class="flex flex-wrap gap-2 w-full">
|
||||
<label for="firstname2">Firstname</label>
|
||||
<InputText id="firstname2" type="text" />
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 w-full">
|
||||
<label for="lastname2">Lastname</label>
|
||||
<InputText id="lastname2" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap">
|
||||
<label for="address">Address</label>
|
||||
<Textarea id="address" rows="4" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<div class="flex flex-wrap gap-2 w-full">
|
||||
<label for="state">State</label>
|
||||
<Select id="state" v-model="dropdownItem" :options="dropdownItems" optionLabel="name" placeholder="Select One" class="w-full"></Select>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 w-full">
|
||||
<label for="zip">Zip</label>
|
||||
<InputText id="zip" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Fluid>
|
||||
</template>
|
||||
257
src/views/uikit/InputDoc.vue
Normal file
257
src/views/uikit/InputDoc.vue
Normal file
@@ -0,0 +1,257 @@
|
||||
<script setup>
|
||||
import { CountryService } from '@/service/CountryService';
|
||||
import { NodeService } from '@/service/NodeService';
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
const floatValue = ref(null);
|
||||
const autoValue = ref(null);
|
||||
const selectedAutoValue = ref(null);
|
||||
const autoFilteredValue = ref([]);
|
||||
const calendarValue = ref(null);
|
||||
const inputNumberValue = ref(null);
|
||||
const chipsValue = ref(null);
|
||||
const sliderValue = ref(50);
|
||||
const ratingValue = ref(null);
|
||||
const colorValue = ref('#1976D2');
|
||||
const radioValue = ref(null);
|
||||
const checkboxValue = ref([]);
|
||||
const switchValue = ref(false);
|
||||
const listboxValues = ref([
|
||||
{ name: 'New York', code: 'NY' },
|
||||
{ name: 'Rome', code: 'RM' },
|
||||
{ name: 'London', code: 'LDN' },
|
||||
{ name: 'Istanbul', code: 'IST' },
|
||||
{ name: 'Paris', code: 'PRS' }
|
||||
]);
|
||||
const listboxValue = ref(null);
|
||||
const dropdownValues = ref([
|
||||
{ name: 'New York', code: 'NY' },
|
||||
{ name: 'Rome', code: 'RM' },
|
||||
{ name: 'London', code: 'LDN' },
|
||||
{ name: 'Istanbul', code: 'IST' },
|
||||
{ name: 'Paris', code: 'PRS' }
|
||||
]);
|
||||
const dropdownValue = ref(null);
|
||||
const multiselectValues = ref([
|
||||
{ name: 'Australia', code: 'AU' },
|
||||
{ name: 'Brazil', code: 'BR' },
|
||||
{ name: 'China', code: 'CN' },
|
||||
{ name: 'Egypt', code: 'EG' },
|
||||
{ name: 'France', code: 'FR' },
|
||||
{ name: 'Germany', code: 'DE' },
|
||||
{ name: 'India', code: 'IN' },
|
||||
{ name: 'Japan', code: 'JP' },
|
||||
{ name: 'Spain', code: 'ES' },
|
||||
{ name: 'United States', code: 'US' }
|
||||
]);
|
||||
|
||||
const multiselectValue = ref(null);
|
||||
const toggleValue = ref(false);
|
||||
const selectButtonValue1 = ref(null);
|
||||
const selectButtonValues1 = ref([{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }]);
|
||||
const selectButtonValue2 = ref(null);
|
||||
const selectButtonValues2 = ref([{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }]);
|
||||
const knobValue = ref(50);
|
||||
const inputGroupValue = ref(false);
|
||||
const treeSelectNodes = ref(null);
|
||||
const selectedNode = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
CountryService.getCountries().then((data) => (autoValue.value = data));
|
||||
NodeService.getTreeNodes().then((data) => (treeSelectNodes.value = data));
|
||||
});
|
||||
|
||||
const searchCountry = (event) => {
|
||||
setTimeout(() => {
|
||||
if (!event.query.trim().length) {
|
||||
autoFilteredValue.value = [...autoValue.value];
|
||||
} else {
|
||||
autoFilteredValue.value = autoValue.value.filter((country) => {
|
||||
return country.name.toLowerCase().startsWith(event.query.toLowerCase());
|
||||
});
|
||||
}
|
||||
}, 250);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Fluid class="flex flex-col md:flex-row gap-6">
|
||||
<div class="md:w-1/2">
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl mb-4">InputText</div>
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<InputText type="text" placeholder="Default" />
|
||||
<InputText type="text" placeholder="Disabled" :disabled="true" />
|
||||
<InputText type="text" placeholder="Invalid" invalid />
|
||||
</div>
|
||||
|
||||
<h5 class="mt-6">Icons</h5>
|
||||
<IconField>
|
||||
<InputIcon class="pi pi-user" />
|
||||
<InputText type="text" placeholder="Username" />
|
||||
</IconField>
|
||||
<IconField iconPosition="left">
|
||||
<InputText type="text" placeholder="Search" />
|
||||
<InputIcon class="pi pi-search" />
|
||||
</IconField>
|
||||
|
||||
<h5 class="mt-6">Float Label</h5>
|
||||
<FloatLabel>
|
||||
<InputText id="username" type="text" v-model="floatValue" />
|
||||
<label for="username">Username</label>
|
||||
</FloatLabel>
|
||||
|
||||
<h5 class="mt-6">Textarea</h5>
|
||||
<Textarea placeholder="Your Message" :autoResize="true" rows="3" cols="30" />
|
||||
|
||||
<h5 class="mt-6">AutoComplete</h5>
|
||||
<AutoComplete placeholder="Search" id="dd" :dropdown="true" :multiple="true" v-model="selectedAutoValue" :suggestions="autoFilteredValue" @complete="searchCountry($event)" field="name" />
|
||||
|
||||
<h5 class="mt-6">DatePicker</h5>
|
||||
<DatePicker :showIcon="true" :showButtonBar="true" v-model="calendarValue"></DatePicker>
|
||||
|
||||
<h5 class="mt-6">Spinner</h5>
|
||||
<InputNumber v-model="inputNumberValue" showButtons mode="decimal"></InputNumber>
|
||||
|
||||
<h5 class="mt-6">Chips</h5>
|
||||
<AutoComplete v-model="chipsValue" :typeahead="false" multiple />
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-col gap-4">
|
||||
<h5>Slider</h5>
|
||||
<InputText v-model.number="sliderValue" />
|
||||
<Slider v-model="sliderValue" />
|
||||
|
||||
<div class="flex flex-row mt-6">
|
||||
<div class="flex flex-col gap-4 w-1/2">
|
||||
<h5>Rating</h5>
|
||||
<Rating v-model="ratingValue" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-4 w-1/2">
|
||||
<h5>ColorPicker</h5>
|
||||
<ColorPicker style="width: 2rem" v-model="colorValue" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5 class="mt-6">Knob</h5>
|
||||
<Knob v-model="knobValue" :step="10" :min="-50" :max="50" valueTemplate="{value}%" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-1/2">
|
||||
<div class="card flex flex-col gap-4">
|
||||
<h5>RadioButton</h5>
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<div class="flex items-center">
|
||||
<RadioButton id="option1" name="option" value="Chicago" v-model="radioValue" />
|
||||
<label for="option1" class="leading-none ml-2">Chicago</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<RadioButton id="option2" name="option" value="Los Angeles" v-model="radioValue" />
|
||||
<label for="option2" class="leading-none ml-2">Los Angeles</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<RadioButton id="option3" name="option" value="New York" v-model="radioValue" />
|
||||
<label for="option3" class="leading-none ml-2">New York</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5 class="mt-6">Checkbox</h5>
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<div class="flex items-center">
|
||||
<Checkbox id="checkOption1" name="option" value="Chicago" v-model="checkboxValue" />
|
||||
<label for="checkOption1" class="ml-2">Chicago</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<Checkbox id="checkOption2" name="option" value="Los Angeles" v-model="checkboxValue" />
|
||||
<label for="checkOption2" class="ml-2">Los Angeles</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<Checkbox id="checkOption3" name="option" value="New York" v-model="checkboxValue" />
|
||||
<label for="checkOption3" class="ml-2">New York</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5 class="mt-6">Input Switch</h5>
|
||||
<ToggleSwitch v-model="switchValue" />
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-col gap-4">
|
||||
<h5>Listbox</h5>
|
||||
<Listbox v-model="listboxValue" :options="listboxValues" optionLabel="name" :filter="true" />
|
||||
|
||||
<h5 class="mt-6">Select</h5>
|
||||
<Select v-model="dropdownValue" :options="dropdownValues" optionLabel="name" placeholder="Select" />
|
||||
|
||||
<h5 class="mt-6">MultiSelect</h5>
|
||||
<MultiSelect v-model="multiselectValue" :options="multiselectValues" optionLabel="name" placeholder="Select Countries" :filter="true">
|
||||
<template #value="slotProps">
|
||||
<div class="inline-flex items-center py-1 px-2 bg-primary text-primary-contrast rounded-border mr-2" v-for="option of slotProps.value" :key="option.code">
|
||||
<span :class="'mr-2 flag flag-' + option.code.toLowerCase()" style="width: 18px; height: 12px" />
|
||||
<div>{{ option.name }}</div>
|
||||
</div>
|
||||
<template v-if="!slotProps.value || slotProps.value.length === 0">
|
||||
<div class="p-1">Select Countries</div>
|
||||
</template>
|
||||
</template>
|
||||
<template #option="slotProps">
|
||||
<div class="flex items-center">
|
||||
<span :class="'mr-2 flag flag-' + slotProps.option.code.toLowerCase()" style="width: 18px; height: 12px" />
|
||||
<div>{{ slotProps.option.name }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</MultiSelect>
|
||||
|
||||
<h5 class="mt-6">TreeSelect</h5>
|
||||
<TreeSelect v-model="selectedNode" :options="treeSelectNodes" placeholder="Select Item"></TreeSelect>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-col gap-4">
|
||||
<h5>ToggleButton</h5>
|
||||
<ToggleButton v-model="toggleValue" onLabel="Yes" offLabel="No" :style="{ width: '10em' }" />
|
||||
|
||||
<h5 class="mt-6">SelectButton</h5>
|
||||
<SelectButton v-model="selectButtonValue1" :options="selectButtonValues1" optionLabel="name" />
|
||||
|
||||
<h5 class="mt-6">SelectButton - Multiple</h5>
|
||||
<SelectButton v-model="selectButtonValue2" :options="selectButtonValues2" optionLabel="name" :multiple="true" />
|
||||
</div>
|
||||
</div>
|
||||
</Fluid>
|
||||
|
||||
<Fluid class="flex mt-6">
|
||||
<div class="card flex flex-col gap-4 w-full">
|
||||
<h5>Input Groups</h5>
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<InputGroup>
|
||||
<InputGroupAddon>
|
||||
<i class="pi pi-user"></i>
|
||||
</InputGroupAddon>
|
||||
<InputText placeholder="Username" />
|
||||
</InputGroup>
|
||||
<InputGroup>
|
||||
<InputGroupAddon>
|
||||
<i class="pi pi-clock"></i>
|
||||
</InputGroupAddon>
|
||||
<InputGroupAddon>
|
||||
<i class="pi pi-star-fill"></i>
|
||||
</InputGroupAddon>
|
||||
<InputNumber placeholder="Price" />
|
||||
<InputGroupAddon>$</InputGroupAddon>
|
||||
<InputGroupAddon>.00</InputGroupAddon>
|
||||
</InputGroup>
|
||||
</div>
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<InputGroup>
|
||||
<Button label="Search" />
|
||||
<InputText placeholder="Keyword" />
|
||||
</InputGroup>
|
||||
<InputGroup>
|
||||
<InputGroupAddon>
|
||||
<Checkbox v-model="inputGroupValue" :binary="true" />
|
||||
</InputGroupAddon>
|
||||
<InputText placeholder="Confirm" />
|
||||
</InputGroup>
|
||||
</div>
|
||||
</div>
|
||||
</Fluid>
|
||||
</template>
|
||||
182
src/views/uikit/ListDoc.vue
Normal file
182
src/views/uikit/ListDoc.vue
Normal file
@@ -0,0 +1,182 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ProductService } from '@/service/ProductService';
|
||||
|
||||
const picklistValue = ref([
|
||||
[
|
||||
{ name: 'San Francisco', code: 'SF' },
|
||||
{ name: 'London', code: 'LDN' },
|
||||
{ name: 'Paris', code: 'PRS' },
|
||||
{ name: 'Istanbul', code: 'IST' },
|
||||
{ name: 'Berlin', code: 'BRL' },
|
||||
{ name: 'Barcelona', code: 'BRC' },
|
||||
{ name: 'Rome', code: 'RM' }
|
||||
],
|
||||
[]
|
||||
]);
|
||||
|
||||
const orderlistValue = ref([
|
||||
{ name: 'San Francisco', code: 'SF' },
|
||||
{ name: 'London', code: 'LDN' },
|
||||
{ name: 'Paris', code: 'PRS' },
|
||||
{ name: 'Istanbul', code: 'IST' },
|
||||
{ name: 'Berlin', code: 'BRL' },
|
||||
{ name: 'Barcelona', code: 'BRC' },
|
||||
{ name: 'Rome', code: 'RM' }
|
||||
]);
|
||||
|
||||
const products = ref(null);
|
||||
const options = ref(['list', 'grid']);
|
||||
const layout = ref('grid');
|
||||
|
||||
onMounted(() => {
|
||||
ProductService.getProductsSmall().then((data) => (products.value = data));
|
||||
});
|
||||
|
||||
const getSeverity = (product) => {
|
||||
switch (product.inventoryStatus) {
|
||||
case 'INSTOCK':
|
||||
return 'success';
|
||||
|
||||
case 'LOWSTOCK':
|
||||
return 'warning';
|
||||
|
||||
case 'OUTOFSTOCK':
|
||||
return 'danger';
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-6">
|
||||
<div class="card">
|
||||
<h5>DataView</h5>
|
||||
<DataView :value="products" :layout="layout">
|
||||
<template #header>
|
||||
<div class="flex justify-end">
|
||||
<SelectButton v-model="layout" :options="options" :allowEmpty="false">
|
||||
<template #option="{ option }">
|
||||
<i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
|
||||
</template>
|
||||
</SelectButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #list="slotProps">
|
||||
<div class="flex flex-col">
|
||||
<div v-for="(item, index) in slotProps.items" :key="index">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
|
||||
<div class="md:w-40 relative">
|
||||
<img class="block xl:block mx-auto rounded w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
|
||||
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
|
||||
</div>
|
||||
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
|
||||
<div class="flex flex-row md:flex-col justify-between items-start gap-2">
|
||||
<div>
|
||||
<span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
|
||||
<div class="text-lg font-medium mt-2">{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="bg-surface-100 p-1" style="border-radius: 30px">
|
||||
<div
|
||||
class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2"
|
||||
style="
|
||||
border-radius: 30px;
|
||||
box-shadow:
|
||||
0px 1px 2px 0px rgba(0, 0, 0, 0.04),
|
||||
0px 1px 2px 0px rgba(0, 0, 0, 0.06);
|
||||
"
|
||||
>
|
||||
<span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
|
||||
<i class="pi pi-star-fill text-yellow-500"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col md:items-end gap-8">
|
||||
<span class="text-xl font-semibold">${{ item.price }}</span>
|
||||
<div class="flex flex-row-reverse md:flex-row gap-2">
|
||||
<Button icon="pi pi-heart" outlined></Button>
|
||||
<Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #grid="slotProps">
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 xl:col-span-6 p-2">
|
||||
<div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
|
||||
<div class="bg-surface-50 flex justify-center rounded p-4">
|
||||
<div class="relative mx-auto">
|
||||
<img class="rounded w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" style="max-width: 300px" />
|
||||
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-6">
|
||||
<div class="flex flex-row justify-between items-start gap-2">
|
||||
<div>
|
||||
<span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
|
||||
<div class="text-lg font-medium mt-1">{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="bg-surface-100 p-1" style="border-radius: 30px">
|
||||
<div
|
||||
class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2"
|
||||
style="
|
||||
border-radius: 30px;
|
||||
box-shadow:
|
||||
0px 1px 2px 0px rgba(0, 0, 0, 0.04),
|
||||
0px 1px 2px 0px rgba(0, 0, 0, 0.06);
|
||||
"
|
||||
>
|
||||
<span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
|
||||
<i class="pi pi-star-fill text-yellow-500"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-6 mt-6">
|
||||
<span class="text-2xl font-semibold">${{ item.price }}</span>
|
||||
<div class="flex gap-2">
|
||||
<Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap"></Button>
|
||||
<Button icon="pi pi-heart" outlined></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</DataView>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col lg:flex-row gap-4">
|
||||
<div class="lg:w-2/3">
|
||||
<div class="card">
|
||||
<h5>PickList</h5>
|
||||
<PickList v-model="picklistValue" breakpoint="1400px" dataKey="id">
|
||||
<template #option="{ option }">
|
||||
{{ option.name }}
|
||||
</template>
|
||||
</PickList>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lg:w-1/3">
|
||||
<div class="card">
|
||||
<h5>OrderList</h5>
|
||||
<div class="lg:flex lg:justify-center">
|
||||
<OrderList v-model="orderlistValue" breakpoint="1400px" dataKey="id" pt:pcList:root="w-full">
|
||||
<template #option="{ option }">
|
||||
{{ option.name }}
|
||||
</template>
|
||||
</OrderList>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
109
src/views/uikit/MediaDoc.vue
Normal file
109
src/views/uikit/MediaDoc.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<script setup>
|
||||
import { ProductService } from '@/service/ProductService';
|
||||
import { PhotoService } from '@/service/PhotoService';
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
const products = ref([]);
|
||||
const images = ref([]);
|
||||
const galleriaResponsiveOptions = ref([
|
||||
{
|
||||
breakpoint: '1024px',
|
||||
numVisible: 5
|
||||
},
|
||||
{
|
||||
breakpoint: '960px',
|
||||
numVisible: 4
|
||||
},
|
||||
{
|
||||
breakpoint: '768px',
|
||||
numVisible: 3
|
||||
},
|
||||
{
|
||||
breakpoint: '560px',
|
||||
numVisible: 1
|
||||
}
|
||||
]);
|
||||
const carouselResponsiveOptions = ref([
|
||||
{
|
||||
breakpoint: '1024px',
|
||||
numVisible: 3,
|
||||
numScroll: 3
|
||||
},
|
||||
{
|
||||
breakpoint: '768px',
|
||||
numVisible: 2,
|
||||
numScroll: 2
|
||||
},
|
||||
{
|
||||
breakpoint: '560px',
|
||||
numVisible: 1,
|
||||
numScroll: 1
|
||||
}
|
||||
]);
|
||||
|
||||
onMounted(() => {
|
||||
ProductService.getProductsSmall().then((data) => (products.value = data));
|
||||
PhotoService.getImages().then((data) => (images.value = data));
|
||||
});
|
||||
|
||||
const getSeverity = (status) => {
|
||||
switch (status) {
|
||||
case 'INSTOCK':
|
||||
return 'success';
|
||||
|
||||
case 'LOWSTOCK':
|
||||
return 'warning';
|
||||
|
||||
case 'OUTOFSTOCK':
|
||||
return 'danger';
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card">
|
||||
<h5>Carousel</h5>
|
||||
<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="carouselResponsiveOptions">
|
||||
<template #item="slotProps">
|
||||
<div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
|
||||
<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>
|
||||
</div>
|
||||
<div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
|
||||
<span>
|
||||
<Button icon="pi pi-heart" severity="secondary" outlined />
|
||||
<Button icon="pi pi-shopping-cart" class="ml-2" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Carousel>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Image</h5>
|
||||
<div class="flex justify-center">
|
||||
<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Galleria</h5>
|
||||
<Galleria :value="images" :responsiveOptions="galleriaResponsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
|
||||
<template #item="slotProps">
|
||||
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
|
||||
</template>
|
||||
<template #thumbnail="slotProps">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
|
||||
</template>
|
||||
</Galleria>
|
||||
</div>
|
||||
</template>
|
||||
564
src/views/uikit/MenuDoc.vue
Normal file
564
src/views/uikit/MenuDoc.vue
Normal file
@@ -0,0 +1,564 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const menu = ref(null);
|
||||
const contextMenu = ref(null);
|
||||
|
||||
const nestedMenuitems = ref([
|
||||
{
|
||||
label: 'Customers',
|
||||
icon: 'pi pi-fw pi-table',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-user-plus',
|
||||
items: [
|
||||
{
|
||||
label: 'Customer',
|
||||
icon: 'pi pi-fw pi-plus'
|
||||
},
|
||||
{
|
||||
label: 'Duplicate',
|
||||
icon: 'pi pi-fw pi-copy'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-user-edit'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Orders',
|
||||
icon: 'pi pi-fw pi-shopping-cart',
|
||||
items: [
|
||||
{
|
||||
label: 'View',
|
||||
icon: 'pi pi-fw pi-list'
|
||||
},
|
||||
{
|
||||
label: 'Search',
|
||||
icon: 'pi pi-fw pi-search'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Shipments',
|
||||
icon: 'pi pi-fw pi-envelope',
|
||||
items: [
|
||||
{
|
||||
label: 'Tracker',
|
||||
icon: 'pi pi-fw pi-compass'
|
||||
},
|
||||
{
|
||||
label: 'Map',
|
||||
icon: 'pi pi-fw pi-map-marker'
|
||||
},
|
||||
{
|
||||
label: 'Manage',
|
||||
icon: 'pi pi-fw pi-pencil'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Profile',
|
||||
icon: 'pi pi-fw pi-user',
|
||||
items: [
|
||||
{
|
||||
label: 'Settings',
|
||||
icon: 'pi pi-fw pi-cog'
|
||||
},
|
||||
{
|
||||
label: 'Billing',
|
||||
icon: 'pi pi-fw pi-file'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Quit',
|
||||
icon: 'pi pi-fw pi-sign-out'
|
||||
}
|
||||
]);
|
||||
const breadcrumbHome = ref({ icon: 'pi pi-home', to: '/' });
|
||||
const breadcrumbItems = ref([{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }]);
|
||||
const tieredMenuItems = ref([
|
||||
{
|
||||
label: 'Customers',
|
||||
icon: 'pi pi-fw pi-table',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-user-plus',
|
||||
items: [
|
||||
{
|
||||
label: 'Customer',
|
||||
icon: 'pi pi-fw pi-plus'
|
||||
},
|
||||
{
|
||||
label: 'Duplicate',
|
||||
icon: 'pi pi-fw pi-copy'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-user-edit'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Orders',
|
||||
icon: 'pi pi-fw pi-shopping-cart',
|
||||
items: [
|
||||
{
|
||||
label: 'View',
|
||||
icon: 'pi pi-fw pi-list'
|
||||
},
|
||||
{
|
||||
label: 'Search',
|
||||
icon: 'pi pi-fw pi-search'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Shipments',
|
||||
icon: 'pi pi-fw pi-envelope',
|
||||
items: [
|
||||
{
|
||||
label: 'Tracker',
|
||||
icon: 'pi pi-fw pi-compass'
|
||||
},
|
||||
{
|
||||
label: 'Map',
|
||||
icon: 'pi pi-fw pi-map-marker'
|
||||
},
|
||||
{
|
||||
label: 'Manage',
|
||||
icon: 'pi pi-fw pi-pencil'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Profile',
|
||||
icon: 'pi pi-fw pi-user',
|
||||
items: [
|
||||
{
|
||||
label: 'Settings',
|
||||
icon: 'pi pi-fw pi-cog'
|
||||
},
|
||||
{
|
||||
label: 'Billing',
|
||||
icon: 'pi pi-fw pi-file'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
separator: true
|
||||
},
|
||||
{
|
||||
label: 'Quit',
|
||||
icon: 'pi pi-fw pi-sign-out'
|
||||
}
|
||||
]);
|
||||
const overlayMenuItems = ref([
|
||||
{
|
||||
label: 'Save',
|
||||
icon: 'pi pi-save'
|
||||
},
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh'
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-trash'
|
||||
},
|
||||
{
|
||||
separator: true
|
||||
},
|
||||
{
|
||||
label: 'Home',
|
||||
icon: 'pi pi-home'
|
||||
}
|
||||
]);
|
||||
const menuitems = ref([
|
||||
{
|
||||
label: 'Customers',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-plus'
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-user-edit'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Orders',
|
||||
items: [
|
||||
{
|
||||
label: 'View',
|
||||
icon: 'pi pi-fw pi-list'
|
||||
},
|
||||
{
|
||||
label: 'Search',
|
||||
icon: 'pi pi-fw pi-search'
|
||||
}
|
||||
]
|
||||
}
|
||||
]);
|
||||
const contextMenuItems = ref([
|
||||
{
|
||||
label: 'Save',
|
||||
icon: 'pi pi-save'
|
||||
},
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh'
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-trash'
|
||||
},
|
||||
{
|
||||
separator: true
|
||||
},
|
||||
{
|
||||
label: 'Options',
|
||||
icon: 'pi pi-cog'
|
||||
}
|
||||
]);
|
||||
const megamenuItems = ref([
|
||||
{
|
||||
label: 'Fashion',
|
||||
icon: 'pi pi-fw pi-tag',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'Woman',
|
||||
items: [{ label: 'Woman Item' }, { label: 'Woman Item' }, { label: 'Woman Item' }]
|
||||
},
|
||||
{
|
||||
label: 'Men',
|
||||
items: [{ label: 'Men Item' }, { label: 'Men Item' }, { label: 'Men Item' }]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'Kids',
|
||||
items: [{ label: 'Kids Item' }, { label: 'Kids Item' }]
|
||||
},
|
||||
{
|
||||
label: 'Luggage',
|
||||
items: [{ label: 'Luggage Item' }, { label: 'Luggage Item' }, { label: 'Luggage Item' }]
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Electronics',
|
||||
icon: 'pi pi-fw pi-desktop',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'Computer',
|
||||
items: [{ label: 'Computer Item' }, { label: 'Computer Item' }]
|
||||
},
|
||||
{
|
||||
label: 'Camcorder',
|
||||
items: [{ label: 'Camcorder Item' }, { label: 'Camcorder Item' }, { label: 'Camcorder Item' }]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'TV',
|
||||
items: [{ label: 'TV Item' }, { label: 'TV Item' }]
|
||||
},
|
||||
{
|
||||
label: 'Audio',
|
||||
items: [{ label: 'Audio Item' }, { label: 'Audio Item' }, { label: 'Audio Item' }]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'Sports.7',
|
||||
items: [{ label: 'Sports.7.1' }, { label: 'Sports.7.2' }]
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Furniture',
|
||||
icon: 'pi pi-fw pi-image',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'Living Room',
|
||||
items: [{ label: 'Living Room Item' }, { label: 'Living Room Item' }]
|
||||
},
|
||||
{
|
||||
label: 'Kitchen',
|
||||
items: [{ label: 'Kitchen Item' }, { label: 'Kitchen Item' }, { label: 'Kitchen Item' }]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'Bedroom',
|
||||
items: [{ label: 'Bedroom Item' }, { label: 'Bedroom Item' }]
|
||||
},
|
||||
{
|
||||
label: 'Outdoor',
|
||||
items: [{ label: 'Outdoor Item' }, { label: 'Outdoor Item' }, { label: 'Outdoor Item' }]
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Sports',
|
||||
icon: 'pi pi-fw pi-star',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'Basketball',
|
||||
items: [{ label: 'Basketball Item' }, { label: 'Basketball Item' }]
|
||||
},
|
||||
{
|
||||
label: 'Football',
|
||||
items: [{ label: 'Football Item' }, { label: 'Football Item' }, { label: 'Football Item' }]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'Tennis',
|
||||
items: [{ label: 'Tennis Item' }, { label: 'Tennis Item' }]
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
]);
|
||||
const panelMenuitems = ref([
|
||||
{
|
||||
label: 'Customers',
|
||||
icon: 'pi pi-fw pi-table',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-user-plus',
|
||||
items: [
|
||||
{
|
||||
label: 'Customer',
|
||||
icon: 'pi pi-fw pi-plus'
|
||||
},
|
||||
{
|
||||
label: 'Duplicate',
|
||||
icon: 'pi pi-fw pi-copy'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-user-edit'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Orders',
|
||||
icon: 'pi pi-fw pi-shopping-cart',
|
||||
items: [
|
||||
{
|
||||
label: 'View',
|
||||
icon: 'pi pi-fw pi-list'
|
||||
},
|
||||
{
|
||||
label: 'Search',
|
||||
icon: 'pi pi-fw pi-search'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Shipments',
|
||||
icon: 'pi pi-fw pi-envelope',
|
||||
items: [
|
||||
{
|
||||
label: 'Tracker',
|
||||
icon: 'pi pi-fw pi-compass'
|
||||
},
|
||||
{
|
||||
label: 'Map',
|
||||
icon: 'pi pi-fw pi-map-marker'
|
||||
},
|
||||
{
|
||||
label: 'Manage',
|
||||
icon: 'pi pi-fw pi-pencil'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Profile',
|
||||
icon: 'pi pi-fw pi-user',
|
||||
items: [
|
||||
{
|
||||
label: 'Settings',
|
||||
icon: 'pi pi-fw pi-cog'
|
||||
},
|
||||
{
|
||||
label: 'Billing',
|
||||
icon: 'pi pi-fw pi-file'
|
||||
}
|
||||
]
|
||||
}
|
||||
]);
|
||||
|
||||
const toggleMenu = (event) => {
|
||||
menu.value.toggle(event);
|
||||
};
|
||||
|
||||
const onContextRightClick = (event) => {
|
||||
contextMenu.value.show(event);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card">
|
||||
<h5 class="mb-2">Menubar</h5>
|
||||
<Menubar :model="nestedMenuitems">
|
||||
<template #end>
|
||||
<IconField iconPosition="left">
|
||||
<InputIcon class="pi pi-search" />
|
||||
<InputText type="text" placeholder="Search" />
|
||||
</IconField>
|
||||
</template>
|
||||
</Menubar>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5 class="mb-2">Breadcrumb</h5>
|
||||
<Breadcrumb :home="breadcrumbHome" :model="breadcrumbItems" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<div class="md:w-1/2">
|
||||
<div class="card">
|
||||
<h5 class="mb-2">Stepper</h5>
|
||||
<Stepper value="1">
|
||||
<StepList>
|
||||
<Step value="1">Header I</Step>
|
||||
<Step value="2">Header II</Step>
|
||||
<Step value="3">Header III</Step>
|
||||
</StepList>
|
||||
<StepPanels>
|
||||
<StepPanel v-slot="{ activateCallback }" value="1">
|
||||
<div class="flex flex-col h-48">
|
||||
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
|
||||
</div>
|
||||
<div class="flex pt-6 justify-end">
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('2')" />
|
||||
</div>
|
||||
</StepPanel>
|
||||
<StepPanel v-slot="{ activateCallback }" value="2">
|
||||
<div class="flex flex-col h-48">
|
||||
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
|
||||
</div>
|
||||
<div class="flex pt-6 justify-between">
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('1')" />
|
||||
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('3')" />
|
||||
</div>
|
||||
</StepPanel>
|
||||
<StepPanel v-slot="{ activateCallback }" value="3">
|
||||
<div class="flex flex-col h-48">
|
||||
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
|
||||
</div>
|
||||
<div class="pt-6">
|
||||
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
|
||||
</div>
|
||||
</StepPanel>
|
||||
</StepPanels>
|
||||
</Stepper>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-1/2">
|
||||
<div class="card">
|
||||
<h5 class="mb-2">Tabs</h5>
|
||||
<Tabs value="0">
|
||||
<TabList>
|
||||
<Tab value="0">Header I</Tab>
|
||||
<Tab value="1">Header II</Tab>
|
||||
<Tab value="2">Header III</Tab>
|
||||
</TabList>
|
||||
<TabPanels>
|
||||
<TabPanel value="0">
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
||||
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
|
||||
id est laborum.
|
||||
</p>
|
||||
</TabPanel>
|
||||
<TabPanel value="1">
|
||||
<p class="m-0">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
|
||||
</p>
|
||||
</TabPanel>
|
||||
<TabPanel value="2">
|
||||
<p class="m-0">
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt
|
||||
in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo
|
||||
minus.
|
||||
</p>
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row gap-4 mt-6">
|
||||
<div class="md:w-1/3">
|
||||
<div class="card">
|
||||
<h5 class="mb-2">Tiered Menu</h5>
|
||||
<TieredMenu :model="tieredMenuItems" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-1/3">
|
||||
<div class="card">
|
||||
<h5 class="mb-2">Plain Menu</h5>
|
||||
<Menu :model="menuitems" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-1/3">
|
||||
<div class="card">
|
||||
<h5 class="mb-2">Overlay Menu</h5>
|
||||
|
||||
<Menu ref="menu" :model="overlayMenuItems" :popup="true" />
|
||||
<Button type="button" label="Options" icon="pi pi-angle-down" @click="toggleMenu" style="width: auto" />
|
||||
</div>
|
||||
|
||||
<div class="card" @contextmenu="onContextRightClick">
|
||||
<h5 class="mb-2">ContextMenu</h5>
|
||||
Right click to display.
|
||||
<ContextMenu ref="contextMenu" :model="contextMenuItems" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row gap-4 mt-6">
|
||||
<div class="md:w-1/2">
|
||||
<div class="card">
|
||||
<h5 class="mb-2">MegaMenu - Horizontal</h5>
|
||||
<MegaMenu :model="megamenuItems" />
|
||||
|
||||
<h5 class="mb-2 mt-8">MegaMenu - Vertical</h5>
|
||||
<MegaMenu :model="megamenuItems" orientation="vertical" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-1/2">
|
||||
<div class="card">
|
||||
<h5 class="mb-2">PanelMenu</h5>
|
||||
<PanelMenu :model="panelMenuitems" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
88
src/views/uikit/MessagesDoc.vue
Normal file
88
src/views/uikit/MessagesDoc.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
|
||||
const toast = useToast();
|
||||
const message = ref([]);
|
||||
const username = ref(null);
|
||||
const email = ref(null);
|
||||
const value = 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 });
|
||||
};
|
||||
|
||||
const showInfo = () => {
|
||||
toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Detail', life: 3000 });
|
||||
};
|
||||
|
||||
const showWarn = () => {
|
||||
toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Detail', life: 3000 });
|
||||
};
|
||||
|
||||
const showError = () => {
|
||||
toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Detail', life: 3000 });
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<div class="card md:w-1/2">
|
||||
<h5 class="mb-2">Toast</h5>
|
||||
<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>
|
||||
<div class="card md:w-1/2">
|
||||
<h5 class="mb-2">Messages</h5>
|
||||
<div class="flex flex-wrap gap-2 mb-4">
|
||||
<Button label="Success" @click="addMessage('success')" severity="success" />
|
||||
<Button label="Info" @click="addMessage('info')" severity="info" />
|
||||
<Button label="Warn" @click="addMessage('warn')" severity="warning" />
|
||||
<Button label="Error" @click="addMessage('error')" severity="danger" />
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row gap-4 mt-6">
|
||||
<div class="card md:w-1/2">
|
||||
<h5 class="mb-2">Inline</h5>
|
||||
<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 class="card md:w-1/2">
|
||||
<h5 class="mb-2">Help Text</h5>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="username">Username</label>
|
||||
<InputText id="username" v-model="value" aria-describedby="username-help" />
|
||||
<small id="username-help">Enter your username to reset your password.</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
195
src/views/uikit/MiscDoc.vue
Normal file
195
src/views/uikit/MiscDoc.vue
Normal file
@@ -0,0 +1,195 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
||||
|
||||
const value = ref(0);
|
||||
let interval = null;
|
||||
|
||||
const startProgress = () => {
|
||||
interval = setInterval(() => {
|
||||
let newValue = value.value + Math.floor(Math.random() * 10) + 1;
|
||||
if (newValue >= 100) {
|
||||
newValue = 100;
|
||||
}
|
||||
value.value = newValue;
|
||||
}, 2000);
|
||||
};
|
||||
const endProgress = () => {
|
||||
clearInterval(interval);
|
||||
interval = null;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
startProgress();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
endProgress();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card">
|
||||
<h5>ProgressBar</h5>
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<div class="md:w-1/2">
|
||||
<ProgressBar :value="value"></ProgressBar>
|
||||
</div>
|
||||
<div class="md:w-1/2">
|
||||
<ProgressBar :value="50" :showValue="false"></ProgressBar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row gap-4 mt-4">
|
||||
<div class="md:w-1/2">
|
||||
<div class="card">
|
||||
<h4 class="mb-2">Badge</h4>
|
||||
<h5 class="mb-2">Numbers</h5>
|
||||
<div class="flex gap-2">
|
||||
<Badge :value="2"></Badge>
|
||||
<Badge :value="8" severity="success"></Badge>
|
||||
<Badge :value="4" severity="info"></Badge>
|
||||
<Badge :value="12" severity="warn"></Badge>
|
||||
<Badge :value="3" severity="danger"></Badge>
|
||||
</div>
|
||||
|
||||
<h5 class="my-4">Positioned Badge</h5>
|
||||
<div class="flex gap-6">
|
||||
<OverlayBadge value="2">
|
||||
<i class="pi pi-bell" style="font-size: 2rem" />
|
||||
</OverlayBadge>
|
||||
<OverlayBadge value="4" severity="danger">
|
||||
<i class="pi pi-calendar" style="font-size: 2rem" />
|
||||
</OverlayBadge>
|
||||
<OverlayBadge severity="danger">
|
||||
<i class="pi pi-envelope" style="font-size: 2rem" />
|
||||
</OverlayBadge>
|
||||
</div>
|
||||
|
||||
<h5 class="my-4">Inline Button Badge</h5>
|
||||
<Button label="Emails" badge="8" class="mr-2"></Button>
|
||||
<Button label="Messages" icon="pi pi-users" severity="warn" badge="8" badgeClass="p-badge-danger"></Button>
|
||||
|
||||
<h5 class="my-4">Sizes</h5>
|
||||
<div class="flex items-start gap-2">
|
||||
<Badge :value="2"></Badge>
|
||||
<Badge :value="4" size="large" severity="warn"></Badge>
|
||||
<Badge :value="6" size="xlarge" severity="success"></Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h4>Avatar</h4>
|
||||
<h5 class="my-4">Avatar Group</h5>
|
||||
<AvatarGroup>
|
||||
<Avatar :image="'/demo/images/avatar/amyelsner.png'" size="large" shape="circle"></Avatar>
|
||||
<Avatar :image="'/demo/images/avatar/asiyajavayant.png'" size="large" shape="circle"></Avatar>
|
||||
<Avatar :image="'/demo/images/avatar/onyamalimba.png'" size="large" shape="circle"></Avatar>
|
||||
<Avatar :image="'/demo/images/avatar/ionibowcher.png'" size="large" shape="circle"></Avatar>
|
||||
<Avatar :image="'/demo/images/avatar/xuxuefeng.png'" size="large" shape="circle"></Avatar>
|
||||
<Avatar label="+2" shape="circle" size="large" :style="{ 'background-color': '#9c27b0', color: '#ffffff' }"></Avatar>
|
||||
</AvatarGroup>
|
||||
|
||||
<h5 class="my-4">Label - Circle</h5>
|
||||
<Avatar label="P" class="mr-2" size="xlarge" shape="circle"></Avatar>
|
||||
<Avatar label="V" class="mr-2" size="large" :style="{ 'background-color': '#2196F3', color: '#ffffff' }" shape="circle"></Avatar>
|
||||
<Avatar label="U" class="mr-2" :style="{ 'background-color': '#9c27b0', color: '#ffffff' }" shape="circle"></Avatar>
|
||||
|
||||
<h5 class="my-4">Icon - Badge</h5>
|
||||
<OverlayBadge value="4" severity="danger" class="inline-flex">
|
||||
<Avatar label="U" size="xlarge" />
|
||||
</OverlayBadge>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h4>ScrollTop</h4>
|
||||
<ScrollPanel :style="{ width: '250px', height: '200px' }">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur
|
||||
adipiscing elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor
|
||||
augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet
|
||||
nisl purus. Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus
|
||||
viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
|
||||
</p>
|
||||
<ScrollTop target="parent" :threshold="100" icon="pi pi-arrow-up"></ScrollTop>
|
||||
</ScrollPanel>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-1/2">
|
||||
<div class="card">
|
||||
<h4>Tag</h4>
|
||||
<h5>Tags</h5>
|
||||
<div class="flex gap-2">
|
||||
<Tag value="Primary"></Tag>
|
||||
<Tag severity="success" value="Success"></Tag>
|
||||
<Tag severity="info" value="Info"></Tag>
|
||||
<Tag severity="warn" value="Warn"></Tag>
|
||||
<Tag severity="danger" value="Danger"></Tag>
|
||||
</div>
|
||||
|
||||
<h5>Pills</h5>
|
||||
<div class="flex gap-2">
|
||||
<Tag value="Primary" :rounded="true"></Tag>
|
||||
<Tag severity="success" value="Success" :rounded="true"></Tag>
|
||||
<Tag severity="info" value="Info" :rounded="true"></Tag>
|
||||
<Tag severity="warn" value="warn" :rounded="true"></Tag>
|
||||
<Tag severity="danger" value="Danger" :rounded="true"></Tag>
|
||||
</div>
|
||||
|
||||
<h5>Icons</h5>
|
||||
<div class="flex gap-2">
|
||||
<Tag icon="pi pi-user" value="Primary"></Tag>
|
||||
<Tag icon="pi pi-check" severity="success" value="Success"></Tag>
|
||||
<Tag icon="pi pi-info-circle" severity="info" value="Info"></Tag>
|
||||
<Tag con="pi pi-exclamation-triangle" severity="warn" value="warn"></Tag>
|
||||
<Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h4>Chip</h4>
|
||||
<h5>Basic</h5>
|
||||
<div class="flex items-center flex-col sm:flex-row">
|
||||
<Chip label="Action" class="mr-2 mb-2"></Chip>
|
||||
<Chip label="Comedy" class="mr-2 mb-2"></Chip>
|
||||
<Chip label="Mystery" class="mr-2 mb-2"></Chip>
|
||||
<Chip label="Thriller" :removable="true" class="mb-2"></Chip>
|
||||
</div>
|
||||
|
||||
<h5>Icon</h5>
|
||||
<div class="flex items-center flex-col sm:flex-row">
|
||||
<Chip label="Apple" icon="pi pi-apple" class="mr-2 mb-2"></Chip>
|
||||
<Chip label="Facebook" icon="pi pi-facebook" class="mr-2 mb-2"></Chip>
|
||||
<Chip label="Google" icon="pi pi-google" class="mr-2 mb-2"></Chip>
|
||||
<Chip label="Microsoft" icon="pi pi-microsoft" :removable="true" class="mb-2"></Chip>
|
||||
</div>
|
||||
|
||||
<h5>Image</h5>
|
||||
<div class="flex items-center flex-col sm:flex-row">
|
||||
<Chip label="Amy Elsner" :image="'/demo/images/avatar/amyelsner.png'" class="mr-2 mb-2"></Chip>
|
||||
<Chip label="Asiya Javayant" :image="'/demo/images/avatar/asiyajavayant.png'" class="mr-2 mb-2"></Chip>
|
||||
<Chip label="Onyama Limba" :image="'/demo/images/avatar/onyamalimba.png'" class="mr-2 mb-2"></Chip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h4>Skeleton</h4>
|
||||
<div class="rounded-border border border-surface p-6">
|
||||
<div class="flex mb-4">
|
||||
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
|
||||
<div>
|
||||
<Skeleton width="10rem" class="mb-2"></Skeleton>
|
||||
<Skeleton width="5rem" class="mb-2"></Skeleton>
|
||||
<Skeleton height=".5rem"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
<Skeleton width="100%" height="150px"></Skeleton>
|
||||
<div class="flex justify-between mt-4">
|
||||
<Skeleton width="4rem" height="2rem"></Skeleton>
|
||||
<Skeleton width="4rem" height="2rem"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
196
src/views/uikit/OverlayDoc.vue
Normal file
196
src/views/uikit/OverlayDoc.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import { useConfirm } from 'primevue/useconfirm';
|
||||
import { ProductService } from '@/service/ProductService';
|
||||
|
||||
const display = ref(false);
|
||||
const displayConfirmation = ref(false);
|
||||
const visibleLeft = ref(false);
|
||||
const visibleRight = ref(false);
|
||||
const visibleTop = ref(false);
|
||||
const visibleBottom = ref(false);
|
||||
const visibleFull = ref(false);
|
||||
const products = ref(null);
|
||||
const selectedProduct = ref(null);
|
||||
const op = ref(null);
|
||||
const op2 = ref(null);
|
||||
const popup = ref(null);
|
||||
|
||||
const toast = useToast();
|
||||
const confirmPopup = useConfirm();
|
||||
|
||||
onMounted(() => {
|
||||
ProductService.getProductsSmall().then((data) => (products.value = data));
|
||||
});
|
||||
|
||||
const open = () => {
|
||||
display.value = true;
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
display.value = false;
|
||||
};
|
||||
|
||||
const openConfirmation = () => {
|
||||
displayConfirmation.value = true;
|
||||
};
|
||||
|
||||
const closeConfirmation = () => {
|
||||
displayConfirmation.value = false;
|
||||
};
|
||||
|
||||
const toggle = (event) => {
|
||||
op.value.toggle(event);
|
||||
};
|
||||
|
||||
const toggleDataTable = (event) => {
|
||||
op2.value.toggle(event);
|
||||
};
|
||||
|
||||
const onProductSelect = (event) => {
|
||||
op.value.hide();
|
||||
toast.add({ severity: 'info', summary: 'Product Selected', detail: event.data.name, life: 3000 });
|
||||
};
|
||||
|
||||
const confirm = (event) => {
|
||||
confirmPopup.require({
|
||||
target: event.target,
|
||||
message: 'Are you sure you want to proceed?',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
rejectProps: {
|
||||
label: 'Cancel',
|
||||
severity: 'secondary',
|
||||
outlined: true
|
||||
},
|
||||
acceptProps: {
|
||||
label: 'Save'
|
||||
},
|
||||
accept: () => {
|
||||
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
|
||||
},
|
||||
reject: () => {
|
||||
toast.add({ severity: 'info', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col md:flex-row gap-6">
|
||||
<div class="md:w-1/2">
|
||||
<div class="card">
|
||||
<h5 class="mb-4">Dialog</h5>
|
||||
<Dialog header="Dialog" v-model:visible="display" :breakpoints="{ '960px': '75vw' }" :style="{ width: '30vw' }" :modal="true">
|
||||
<p class="leading-normal m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<template #footer>
|
||||
<Button label="Ok" @click="close" icon="pi pi-check" class="p-button-outlined" />
|
||||
</template>
|
||||
</Dialog>
|
||||
<Button label="Show" icon="pi pi-external-link" style="width: auto" @click="open" />
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5 class="mb-4">Popover</h5>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Button type="button" label="Image" @click="toggle" severity="success" />
|
||||
<Popover ref="op">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/nature/nature9.jpg" alt="Image" />
|
||||
</Popover>
|
||||
|
||||
<Button type="button" label="DataTable" @click="toggleDataTable" severity="success" />
|
||||
<Popover ref="op2" id="overlay_panel" style="width: 450px">
|
||||
<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
|
||||
<Column field="name" header="Name" sortable style="min-width: 12rem"></Column>
|
||||
<Column header="Image">
|
||||
<template #body="slotProps">
|
||||
<img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="w-16 shadow-sm" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="price" header="Price" sortable style="min-width: 8rem">
|
||||
<template #body="slotProps"> $ {{ slotProps.data.price }} </template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5 class="mb-4">Tooltip</h5>
|
||||
<div class="inline-flex gap-4">
|
||||
<InputText type="text" placeholder="Username" v-tooltip="'Your username'" />
|
||||
<Button type="button" label="Save" icon="pi pi-check" v-tooltip="'Click to proceed'" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-1/2">
|
||||
<div class="card">
|
||||
<h5 class="mb-4">Drawer</h5>
|
||||
<Drawer v-model:visible="visibleLeft" header="Drawer">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat.
|
||||
</p>
|
||||
</Drawer>
|
||||
|
||||
<Drawer v-model:visible="visibleRight" header="Drawer" position="right">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat.
|
||||
</p>
|
||||
</Drawer>
|
||||
|
||||
<Drawer v-model:visible="visibleTop" header="Drawer" position="top">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat.
|
||||
</p>
|
||||
</Drawer>
|
||||
|
||||
<Drawer v-model:visible="visibleBottom" header="Drawer" position="bottom">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat.
|
||||
</p>
|
||||
</Drawer>
|
||||
|
||||
<Drawer v-model:visible="visibleFull" header="Drawer" position="full">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat.
|
||||
</p>
|
||||
</Drawer>
|
||||
|
||||
<Button icon="pi pi-arrow-right" severity="warn" @click="visibleLeft = true" style="margin-right: 0.25em" />
|
||||
<Button icon="pi pi-arrow-left" severity="warn" @click="visibleRight = true" style="margin-right: 0.25em" />
|
||||
<Button icon="pi pi-arrow-down" severity="warn" @click="visibleTop = true" style="margin-right: 0.25em" />
|
||||
<Button icon="pi pi-arrow-up" severity="warn" @click="visibleBottom = true" style="margin-right: 0.25em" />
|
||||
<Button icon="pi pi-external-link" severity="warn" @click="visibleFull = true" />
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5 class="mb-4">ConfirmPopup</h5>
|
||||
<ConfirmPopup></ConfirmPopup>
|
||||
<Button ref="popup" @click="confirm($event)" icon="pi pi-check" label="Confirm" class="mr-2"></Button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5 class="mb-4">Confirmation</h5>
|
||||
<Button label="Delete" icon="pi pi-trash" severity="danger" style="width: auto" @click="openConfirmation" />
|
||||
<Dialog header="Confirmation" v-model:visible="displayConfirmation" :style="{ width: '350px' }" :modal="true">
|
||||
<div class="flex items-center justify-center">
|
||||
<i class="pi pi-exclamation-triangle mr-4" style="font-size: 2rem" />
|
||||
<span>Are you sure you want to proceed?</span>
|
||||
</div>
|
||||
<template #footer>
|
||||
<Button label="No" icon="pi pi-times" @click="closeConfirmation" class="p-button-text" />
|
||||
<Button label="Yes" icon="pi pi-check" @click="closeConfirmation" class="p-button-text" autofocus />
|
||||
</template>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
217
src/views/uikit/PanelsDoc.vue
Normal file
217
src/views/uikit/PanelsDoc.vue
Normal file
@@ -0,0 +1,217 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const items = ref([
|
||||
{
|
||||
label: 'Save',
|
||||
icon: 'pi pi-check'
|
||||
},
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-upload'
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-trash'
|
||||
},
|
||||
{
|
||||
label: 'Home Page',
|
||||
icon: 'pi pi-home'
|
||||
}
|
||||
]);
|
||||
const cardMenu = ref([
|
||||
{ label: 'Save', icon: 'pi pi-fw pi-check' },
|
||||
{ label: 'Update', icon: 'pi pi-fw pi-refresh' },
|
||||
{ label: 'Delete', icon: 'pi pi-fw pi-trash' }
|
||||
]);
|
||||
const menuRef = ref(null);
|
||||
|
||||
const toggle = () => {
|
||||
menuRef.value.toggle(event);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="card">
|
||||
<h5>Toolbar</h5>
|
||||
<Toolbar>
|
||||
<template #start>
|
||||
<Button icon="pi pi-plus" class="mr-2" severity="secondary" text />
|
||||
<Button icon="pi pi-print" class="mr-2" severity="secondary" text />
|
||||
<Button icon="pi pi-upload" severity="secondary" text />
|
||||
</template>
|
||||
|
||||
<template #center>
|
||||
<IconField>
|
||||
<InputIcon>
|
||||
<i class="pi pi-search" />
|
||||
</InputIcon>
|
||||
<InputText placeholder="Search" />
|
||||
</IconField>
|
||||
</template>
|
||||
|
||||
<template #end> <SplitButton label="Save" :model="items"></SplitButton></template>
|
||||
</Toolbar>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<div class="md:w-1/2">
|
||||
<div class="card">
|
||||
<h5>Accordion</h5>
|
||||
<Accordion value="0">
|
||||
<AccordionPanel value="0">
|
||||
<AccordionHeader>Header I</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
||||
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
|
||||
anim id est laborum.
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
<AccordionPanel value="1">
|
||||
<AccordionHeader>Header II</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p class="m-0">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
|
||||
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non
|
||||
numquam eius modi.
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
<AccordionPanel value="2">
|
||||
<AccordionHeader>Header III</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p class="m-0">
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique
|
||||
sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
|
||||
impedit quo minus.
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
</Accordion>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h5>Tabs</h5>
|
||||
<Tabs value="0">
|
||||
<TabList>
|
||||
<Tab value="0">Header I</Tab>
|
||||
<Tab value="1">Header II</Tab>
|
||||
<Tab value="2">Header III</Tab>
|
||||
</TabList>
|
||||
<TabPanels>
|
||||
<TabPanel value="0">
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
||||
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
|
||||
anim id est laborum.
|
||||
</p>
|
||||
</TabPanel>
|
||||
<TabPanel value="1">
|
||||
<p class="m-0">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
|
||||
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non
|
||||
numquam eius modi.
|
||||
</p>
|
||||
</TabPanel>
|
||||
<TabPanel value="2">
|
||||
<p class="m-0">
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique
|
||||
sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
|
||||
impedit quo minus.
|
||||
</p>
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-1/2 mt-6 md:mt-0">
|
||||
<div class="card">
|
||||
<h5>Panel</h5>
|
||||
<Panel header="Header" :toggleable="true">
|
||||
<p class="leading-normal m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
|
||||
laborum.
|
||||
</p>
|
||||
</Panel>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h5>Fieldset</h5>
|
||||
<Fieldset legend="Legend" :toggleable="true">
|
||||
<p class="leading-normal m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
|
||||
laborum.
|
||||
</p>
|
||||
</Fieldset>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<template v-slot:title>
|
||||
<div class="flex items-center justify-between mb-0">
|
||||
<h5>Card</h5>
|
||||
<Button icon="pi pi-plus" class="p-button-text" @click="toggle" />
|
||||
</div>
|
||||
<Menu id="config_menu" ref="menuRef" :model="cardMenu" :popup="true" />
|
||||
</template>
|
||||
|
||||
<template v-slot:content>
|
||||
<p class="leading-normal m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
|
||||
laborum.
|
||||
</p>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mt-4">
|
||||
<h5>Divider</h5>
|
||||
<div class="flex flex-col md:flex-row">
|
||||
<div class="w-full md:w-5/12 flex flex-col items-center justify-center gap-3 py-5">
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="username">Username</label>
|
||||
<InputText id="username" type="text" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="password">Password</label>
|
||||
<InputText id="password" type="password" />
|
||||
</div>
|
||||
<div class="flex">
|
||||
<Button label="Login" icon="pi pi-user" class="w-full max-w-[17.35rem] mx-auto"></Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-2/12">
|
||||
<Divider layout="vertical" class="hidden md:flex"><b>OR</b></Divider>
|
||||
<Divider layout="horizontal" class="flex md:hidden" align="center"><b>OR</b></Divider>
|
||||
</div>
|
||||
<div class="w-full md:w-5/12 flex items-center justify-center py-5">
|
||||
<Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-full max-w-[17.35rem] mx-auto"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Splitter</h5>
|
||||
|
||||
<Splitter style="height: 300px" class="mb-8">
|
||||
<SplitterPanel :size="30" :minSize="10">
|
||||
<div className="h-full flex items-center justify-center">Panel 1</div>
|
||||
</SplitterPanel>
|
||||
<SplitterPanel :size="70">
|
||||
<Splitter layout="vertical">
|
||||
<SplitterPanel :size="15">
|
||||
<div className="h-full flex items-center justify-center">Panel 2</div>
|
||||
</SplitterPanel>
|
||||
<SplitterPanel :size="50">
|
||||
<div className="h-full flex items-center justify-center">Panel 3</div>
|
||||
</SplitterPanel>
|
||||
</Splitter>
|
||||
</SplitterPanel>
|
||||
</Splitter>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
394
src/views/uikit/TableDoc.vue
Normal file
394
src/views/uikit/TableDoc.vue
Normal file
@@ -0,0 +1,394 @@
|
||||
<script setup>
|
||||
import { ref, onBeforeMount, reactive } from 'vue';
|
||||
import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
|
||||
import { CustomerService } from '@/service/CustomerService';
|
||||
import { ProductService } from '@/service/ProductService';
|
||||
|
||||
const customers1 = ref(null);
|
||||
const customers2 = ref(null);
|
||||
const customers3 = ref(null);
|
||||
const filters1 = ref(null);
|
||||
const loading1 = ref(null);
|
||||
const balanceFrozen = ref(false);
|
||||
const products = ref(null);
|
||||
const expandedRows = ref([]);
|
||||
const statuses = reactive(['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']);
|
||||
const representatives = reactive([
|
||||
{ name: 'Amy Elsner', image: 'amyelsner.png' },
|
||||
{ name: 'Anna Fali', image: 'annafali.png' },
|
||||
{ name: 'Asiya Javayant', image: 'asiyajavayant.png' },
|
||||
{ name: 'Bernardo Dominic', image: 'bernardodominic.png' },
|
||||
{ name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
|
||||
{ name: 'Ioni Bowcher', image: 'ionibowcher.png' },
|
||||
{ name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
|
||||
{ name: 'Onyama Limba', image: 'onyamalimba.png' },
|
||||
{ name: 'Stephen Shaw', image: 'stephenshaw.png' },
|
||||
{ name: 'XuXue Feng', image: 'xuxuefeng.png' }
|
||||
]);
|
||||
|
||||
const getOrderSeverity = (order) => {
|
||||
switch (order.status) {
|
||||
case 'DELIVERED':
|
||||
return 'success';
|
||||
|
||||
case 'CANCELLED':
|
||||
return 'danger';
|
||||
|
||||
case 'PENDING':
|
||||
return 'warn';
|
||||
|
||||
case 'RETURNED':
|
||||
return 'info';
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const getSeverity = (status) => {
|
||||
switch (status) {
|
||||
case 'unqualified':
|
||||
return 'danger';
|
||||
|
||||
case 'qualified':
|
||||
return 'success';
|
||||
|
||||
case 'new':
|
||||
return 'info';
|
||||
|
||||
case 'negotiation':
|
||||
return 'warn';
|
||||
|
||||
case 'renewal':
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const getStockSeverity = (product) => {
|
||||
switch (product.inventoryStatus) {
|
||||
case 'INSTOCK':
|
||||
return 'success';
|
||||
|
||||
case 'LOWSTOCK':
|
||||
return 'warn';
|
||||
|
||||
case 'OUTOFSTOCK':
|
||||
return 'danger';
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
onBeforeMount(() => {
|
||||
ProductService.getProductsWithOrdersSmall().then((data) => (products.value = data));
|
||||
CustomerService.getCustomersLarge().then((data) => {
|
||||
customers1.value = data;
|
||||
loading1.value = false;
|
||||
customers1.value.forEach((customer) => (customer.date = new Date(customer.date)));
|
||||
});
|
||||
CustomerService.getCustomersLarge().then((data) => (customers2.value = data));
|
||||
CustomerService.getCustomersMedium().then((data) => (customers3.value = data));
|
||||
|
||||
initFilters1();
|
||||
});
|
||||
|
||||
const initFilters1 = () => {
|
||||
filters1.value = {
|
||||
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
|
||||
name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
|
||||
'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
|
||||
representative: { value: null, matchMode: FilterMatchMode.IN },
|
||||
date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
|
||||
balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
|
||||
status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
|
||||
activity: { value: [0, 100], matchMode: FilterMatchMode.BETWEEN },
|
||||
verified: { value: null, matchMode: FilterMatchMode.EQUALS }
|
||||
};
|
||||
};
|
||||
|
||||
const expandAll = () => {
|
||||
expandedRows.value = products.value.reduce((acc, p) => (acc[p.id] = true) && acc, {});
|
||||
};
|
||||
|
||||
const collapseAll = () => {
|
||||
expandedRows.value = null;
|
||||
};
|
||||
|
||||
const formatCurrency = (value) => {
|
||||
return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
|
||||
};
|
||||
|
||||
const formatDate = (value) => {
|
||||
return value.toLocaleDateString('en-US', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric'
|
||||
});
|
||||
};
|
||||
|
||||
const calculateCustomerTotal = (name) => {
|
||||
let total = 0;
|
||||
if (customers3.value) {
|
||||
for (let customer of customers3.value) {
|
||||
if (customer.representative.name === name) {
|
||||
total++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return total;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card">
|
||||
<h5>Filter Menu</h5>
|
||||
<DataTable
|
||||
:value="customers1"
|
||||
:paginator="true"
|
||||
:rows="10"
|
||||
dataKey="id"
|
||||
:rowHover="true"
|
||||
v-model:filters="filters1"
|
||||
filterDisplay="menu"
|
||||
:loading="loading1"
|
||||
:filters="filters1"
|
||||
:globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']"
|
||||
showGridlines
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex justify-between">
|
||||
<Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
|
||||
<IconField>
|
||||
<InputIcon>
|
||||
<i class="pi pi-search" />
|
||||
</InputIcon>
|
||||
<InputText v-model="filters1['global'].value" placeholder="Keyword Search" />
|
||||
</IconField>
|
||||
</div>
|
||||
</template>
|
||||
<template #empty> No customers found. </template>
|
||||
<template #loading> Loading customers data. Please wait. </template>
|
||||
<Column field="name" header="Name" style="min-width: 12rem">
|
||||
<template #body="{ data }">
|
||||
{{ data.name }}
|
||||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Country" filterField="country.name" style="min-width: 12rem">
|
||||
<template #body="{ data }">
|
||||
<div class="flex items-center gap-2">
|
||||
<img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${data.country.code}`" style="width: 24px" />
|
||||
<span>{{ data.country.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
|
||||
</template>
|
||||
<template #filterclear="{ filterCallback }">
|
||||
<Button type="button" icon="pi pi-times" @click="filterCallback()" severity="secondary"></Button>
|
||||
</template>
|
||||
<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 }">
|
||||
<div class="flex items-center gap-2">
|
||||
<img :alt="data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`" style="width: 32px" />
|
||||
<span>{{ data.representative.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
|
||||
<template #option="slotProps">
|
||||
<div class="flex items-center gap-2">
|
||||
<img :alt="slotProps.option.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.option.image}`" style="width: 32px" />
|
||||
<span>{{ slotProps.option.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</MultiSelect>
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Date" filterField="date" dataType="date" style="min-width: 10rem">
|
||||
<template #body="{ data }">
|
||||
{{ formatDate(data.date) }}
|
||||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Balance" filterField="balance" dataType="numeric" style="min-width: 10rem">
|
||||
<template #body="{ data }">
|
||||
{{ formatCurrency(data.balance) }}
|
||||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Status" field="status" :filterMenuStyle="{ width: '14rem' }" style="min-width: 12rem">
|
||||
<template #body="{ data }">
|
||||
<Tag :value="data.status" :severity="getSeverity(data.status)" />
|
||||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
|
||||
<template #option="slotProps">
|
||||
<Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
|
||||
</template>
|
||||
</Select>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="activity" header="Activity" :showFilterMatchModes="false" style="min-width: 12rem">
|
||||
<template #body="{ data }">
|
||||
<ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
|
||||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<Slider v-model="filterModel.value" range class="m-4"></Slider>
|
||||
<div class="flex items-center justify-between px-2">
|
||||
<span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
|
||||
<span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="verified" header="Verified" dataType="boolean" bodyClass="text-center" style="min-width: 8rem">
|
||||
<template #body="{ data }">
|
||||
<i class="pi" :class="{ 'pi-check-circle text-green-500 ': data.verified, 'pi-times-circle text-red-500': !data.verified }"></i>
|
||||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<label for="verified-filter" class="font-bold"> Verified </label>
|
||||
<Checkbox v-model="filterModel.value" :indeterminate="filterModel.value === null" binary inputId="verified-filter" />
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Frozen Columns</h5>
|
||||
<ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Balance" offLabel="Balance" />
|
||||
|
||||
<DataTable :value="customers2" scrollable scrollHeight="400px" class="mt-6">
|
||||
<Column field="name" header="Name" style="min-width: 200px" frozen class="font-bold"></Column>
|
||||
<Column field="id" header="Id" style="min-width: 100px"></Column>
|
||||
<Column field="name" header="Name" style="min-width: 200px"></Column>
|
||||
<Column field="country.name" header="Country" style="min-width: 200px"></Column>
|
||||
<Column field="date" header="Date" style="min-width: 200px"></Column>
|
||||
<Column field="company" header="Company" style="min-width: 200px"></Column>
|
||||
<Column field="status" header="Status" style="min-width: 200px"></Column>
|
||||
<Column field="activity" header="Activity" style="min-width: 200px"></Column>
|
||||
<Column field="representative.name" header="Representative" style="min-width: 200px"></Column>
|
||||
<Column field="balance" header="Balance" style="min-width: 200px" alignFrozen="right" :frozen="balanceFrozen">
|
||||
<template #body="{ data }">
|
||||
<span class="font-bold">{{ formatCurrency(data.balance) }}</span>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Row Expand</h5>
|
||||
<DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id" tableStyle="min-width: 60rem">
|
||||
<template #header>
|
||||
<div class="flex flex-wrap justify-end gap-2">
|
||||
<Button text icon="pi pi-plus" label="Expand All" @click="expandAll" />
|
||||
<Button text icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
|
||||
</div>
|
||||
</template>
|
||||
<Column expander style="width: 5rem" />
|
||||
<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.image" class="shadow-lg" width="64" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="price" header="Price">
|
||||
<template #body="slotProps">
|
||||
{{ formatCurrency(slotProps.data.price) }}
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="category" header="Category"></Column>
|
||||
<Column field="rating" header="Reviews">
|
||||
<template #body="slotProps">
|
||||
<Rating :modelValue="slotProps.data.rating" readonly />
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Status">
|
||||
<template #body="slotProps">
|
||||
<Tag :value="slotProps.data.inventoryStatus" :severity="getStockSeverity(slotProps.data)" />
|
||||
</template>
|
||||
</Column>
|
||||
<template #expansion="slotProps">
|
||||
<div class="p-4">
|
||||
<h5>Orders for {{ slotProps.data.name }}</h5>
|
||||
<DataTable :value="slotProps.data.orders">
|
||||
<Column field="id" header="Id" sortable></Column>
|
||||
<Column field="customer" header="Customer" sortable></Column>
|
||||
<Column field="date" header="Date" sortable></Column>
|
||||
<Column field="amount" header="Amount" sortable>
|
||||
<template #body="slotProps">
|
||||
{{ formatCurrency(slotProps.data.amount) }}
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="status" header="Status" sortable>
|
||||
<template #body="slotProps">
|
||||
<Tag :value="slotProps.data.status.toLowerCase()" :severity="getOrderSeverity(slotProps.data)" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column headerStyle="width:4rem">
|
||||
<template #body>
|
||||
<Button icon="pi pi-search" />
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</template>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Subheader Grouping</h5>
|
||||
<DataTable :value="customers3" rowGroupMode="subheader" groupRowsBy="representative.name" sortMode="single" sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
|
||||
<template #groupheader="slotProps">
|
||||
<div class="flex items-center gap-2">
|
||||
<img :alt="slotProps.data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.data.representative.image}`" width="32" style="vertical-align: middle" />
|
||||
<span>{{ slotProps.data.representative.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<Column field="representative.name" header="Representative"></Column>
|
||||
<Column field="name" header="Name" style="min-width: 200px"></Column>
|
||||
<Column field="country" header="Country" style="min-width: 200px">
|
||||
<template #body="slotProps">
|
||||
<div class="flex items-center gap-2">
|
||||
<img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.data.country.code}`" style="width: 24px" />
|
||||
<span>{{ slotProps.data.country.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="company" header="Company" style="min-width: 200px"></Column>
|
||||
<Column field="status" header="Status" style="min-width: 200px">
|
||||
<template #body="slotProps">
|
||||
<Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="date" header="Date" style="min-width: 200px"></Column>
|
||||
<template #groupfooter="slotProps">
|
||||
<div class="flex justify-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
|
||||
</template>
|
||||
</DataTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.p-datatable-frozen-tbody) {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
:deep(.p-datatable-scrollable .p-frozen-column) {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
31
src/views/uikit/TreeDoc.vue
Normal file
31
src/views/uikit/TreeDoc.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { NodeService } from '@/service/NodeService';
|
||||
|
||||
const treeValue = ref(null);
|
||||
const selectedTreeValue = ref(null);
|
||||
const treeTableValue = ref(null);
|
||||
const selectedTreeTableValue = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
NodeService.getTreeNodes().then((data) => (treeValue.value = data));
|
||||
NodeService.getTreeTableNodes().then((data) => (treeTableValue.value = data));
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card">
|
||||
<h5 class="mb-4">Tree</h5>
|
||||
<Tree :value="treeValue" selectionMode="checkbox" v-model:selectionKeys="selectedTreeValue"></Tree>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5 class="mb-4">TreeTable</h5>
|
||||
<TreeTable :value="treeTableValue" selectionMode="checkbox" v-model:selectionKeys="selectedTreeTableValue">
|
||||
<template #header> FileSystem </template>
|
||||
<Column field="name" header="Name" :expander="true"></Column>
|
||||
<Column field="size" header="Size"></Column>
|
||||
<Column field="type" header="Type"></Column>
|
||||
</TreeTable>
|
||||
</div>
|
||||
</template>
|
||||
6
src/views/uikit/menu/ConfirmationDemo.vue
Normal file
6
src/views/uikit/menu/ConfirmationDemo.vue
Normal file
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<div class="flex items-center py-8 px-4">
|
||||
<i class="pi pi-fw pi-check mr-2 text-2xl" />
|
||||
<p class="m-0 text-lg">Confirmation Component Content via Child Route</p>
|
||||
</div>
|
||||
</template>
|
||||
6
src/views/uikit/menu/PaymentDemo.vue
Normal file
6
src/views/uikit/menu/PaymentDemo.vue
Normal file
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<div class="flex items-center py-8 px-4">
|
||||
<i class="pi pi-fw pi-money-bill mr-2 text-2xl" />
|
||||
<p class="m-0 text-lg">Payment Component Content via Child Route</p>
|
||||
</div>
|
||||
</template>
|
||||
6
src/views/uikit/menu/PersonalDemo.vue
Normal file
6
src/views/uikit/menu/PersonalDemo.vue
Normal file
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<div class="flex items-center py-8 px-4">
|
||||
<i class="pi pi-fw pi-user mr-2 text-2xl" />
|
||||
<p class="m-0 text-lg">Personal Component Content via Child Route</p>
|
||||
</div>
|
||||
</template>
|
||||
6
src/views/uikit/menu/SeatDemo.vue
Normal file
6
src/views/uikit/menu/SeatDemo.vue
Normal file
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<div class="flex items-center py-8 px-4">
|
||||
<i class="pi pi-fw pi-ticket mr-2 text-2xl" />
|
||||
<p class="m-0 text-lg">Seat Component Content via Child Route</p>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user