Initial commit
This commit is contained in:
andrea.terzani
334
src/views/Dashboard.vue
Normal file
334
src/views/Dashboard.vue
Normal file
@@ -0,0 +1,334 @@
|
||||
<script setup>
|
||||
import { useLayout } from '@/layout/composables/layout';
|
||||
import { ProductService } from '@/service/ProductService';
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
|
||||
const { getPrimary, isDarkTheme } = useLayout();
|
||||
|
||||
const products = ref(null);
|
||||
const chartData = ref(null);
|
||||
const chartOptions = ref(null);
|
||||
|
||||
const items = ref([
|
||||
{ label: 'Add New', icon: 'pi pi-fw pi-plus' },
|
||||
{ label: 'Remove', icon: 'pi pi-fw pi-minus' }
|
||||
]);
|
||||
|
||||
onMounted(() => {
|
||||
ProductService.getProductsSmall().then((data) => (products.value = data));
|
||||
chartData.value = setChartData();
|
||||
chartOptions.value = setChartOptions();
|
||||
});
|
||||
|
||||
function setChartData() {
|
||||
const documentStyle = getComputedStyle(document.documentElement);
|
||||
|
||||
return {
|
||||
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
|
||||
datasets: [
|
||||
{
|
||||
type: 'bar',
|
||||
label: 'Personal Wallet',
|
||||
backgroundColor: 'color-mix(in srgb, ' + documentStyle.getPropertyValue('--p-primary-400') + ' 100%, #fff)',
|
||||
data: [4000, 10000, 15000, 4000],
|
||||
barThickness: 32
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
label: 'Corporate Wallet',
|
||||
backgroundColor: 'color-mix(in srgb, ' + documentStyle.getPropertyValue('--p-primary-300') + ' 100%, transparent)',
|
||||
data: [2100, 8400, 2400, 7500],
|
||||
barThickness: 32
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
label: 'Investment Wallet',
|
||||
backgroundColor: 'color-mix(in srgb, ' + documentStyle.getPropertyValue('--p-primary-200') + ' 100%, transparent)',
|
||||
data: [4100, 5200, 3400, 7400],
|
||||
borderRadius: {
|
||||
topLeft: 8,
|
||||
topRight: 8
|
||||
},
|
||||
borderSkipped: true,
|
||||
barThickness: 32
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
function setChartOptions() {
|
||||
const documentStyle = getComputedStyle(document.documentElement);
|
||||
const borderColor = documentStyle.getPropertyValue('--surface-border');
|
||||
const textMutedColor = documentStyle.getPropertyValue('--text-color-secondary');
|
||||
|
||||
return {
|
||||
maintainAspectRatio: false,
|
||||
aspectRatio: 0.8,
|
||||
scales: {
|
||||
x: {
|
||||
stacked: true,
|
||||
ticks: {
|
||||
color: textMutedColor
|
||||
},
|
||||
grid: {
|
||||
color: 'transparent',
|
||||
borderColor: 'transparent'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
stacked: true,
|
||||
ticks: {
|
||||
color: textMutedColor
|
||||
},
|
||||
grid: {
|
||||
color: borderColor,
|
||||
borderColor: 'transparent',
|
||||
drawTicks: false
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const formatCurrency = (value) => {
|
||||
return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
|
||||
};
|
||||
|
||||
watch(isDarkTheme, () => {
|
||||
chartData.value = setChartData();
|
||||
chartOptions.value = setChartOptions();
|
||||
});
|
||||
|
||||
watch(getPrimary, () => {
|
||||
chartData.value = setChartData();
|
||||
chartOptions.value = setChartOptions();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid grid-cols-12 gap-8">
|
||||
<div class="col-span-12 lg:col-span-6 xl:col-span-3">
|
||||
<div class="card mb-0">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-muted-color font-medium mb-4">Orders</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-blue-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
|
||||
<i class="pi pi-shopping-cart text-blue-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-primary font-medium">24 new </span>
|
||||
<span class="text-muted-color">since last visit</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 lg:col-span-6 xl:col-span-3">
|
||||
<div class="card mb-0">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-muted-color font-medium mb-4">Revenue</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">$2.100</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-orange-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
|
||||
<i class="pi pi-map-marker text-orange-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-primary font-medium">%52+ </span>
|
||||
<span class="text-muted-color">since last week</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 lg:col-span-6 xl:col-span-3">
|
||||
<div class="card mb-0">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-muted-color font-medium mb-4">Customers</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">28441</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-cyan-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
|
||||
<i class="pi pi-inbox text-cyan-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-primary font-medium">520 </span>
|
||||
<span class="text-muted-color">newly registered</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 lg:col-span-6 xl:col-span-3">
|
||||
<div class="card mb-0">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-muted-color font-medium mb-4">Comments</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152 Unread</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-purple-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
|
||||
<i class="pi pi-comment text-purple-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-primary font-medium">85 </span>
|
||||
<span class="text-muted-color">responded</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card">
|
||||
<div class="font-semibold text-xl mb-4">Recent Sales</div>
|
||||
<DataTable :value="products" :rows="5" :paginator="true" responsiveLayout="scroll">
|
||||
<Column style="width: 15%" header="Image">
|
||||
<template #body="slotProps">
|
||||
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" width="50" class="shadow" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="name" header="Name" :sortable="true" style="width: 35%"></Column>
|
||||
<Column field="price" header="Price" :sortable="true" style="width: 35%">
|
||||
<template #body="slotProps">
|
||||
{{ formatCurrency(slotProps.data.price) }}
|
||||
</template>
|
||||
</Column>
|
||||
<Column style="width: 15%" header="View">
|
||||
<template #body>
|
||||
<Button icon="pi pi-search" type="button" class="p-button-text"></Button>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="flex justify-between items-center mb-8">
|
||||
<div class="font-semibold text-xl mb-4">Best Selling Products</div>
|
||||
<div>
|
||||
<Button icon="pi pi-ellipsis-v" class="p-button-text p-button-plain p-button-rounded" @click="$refs.menu2.toggle($event)"></Button>
|
||||
<Menu ref="menu2" :popup="true" :model="items"></Menu>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Space T-Shirt</span>
|
||||
<div class="mt-1 text-muted-color">Clothing</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 flex items-center">
|
||||
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
|
||||
<div class="bg-orange-500 h-full" style="width: 50%"></div>
|
||||
</div>
|
||||
<span class="text-orange-500 ml-4 font-medium">%50</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Portal Sticker</span>
|
||||
<div class="mt-1 text-muted-color">Accessories</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
|
||||
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
|
||||
<div class="bg-cyan-500 h-full" style="width: 16%"></div>
|
||||
</div>
|
||||
<span class="text-cyan-500 ml-4 font-medium">%16</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Supernova Sticker</span>
|
||||
<div class="mt-1 text-muted-color">Accessories</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
|
||||
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
|
||||
<div class="bg-pink-500 h-full" style="width: 67%"></div>
|
||||
</div>
|
||||
<span class="text-pink-500 ml-4 font-medium">%67</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Wonders Notebook</span>
|
||||
<div class="mt-1 text-muted-color">Office</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
|
||||
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
|
||||
<div class="bg-green-500 h-full" style="width: 35%"></div>
|
||||
</div>
|
||||
<span class="text-primary ml-4 font-medium">%35</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Mat Black Case</span>
|
||||
<div class="mt-1 text-muted-color">Accessories</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
|
||||
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
|
||||
<div class="bg-purple-500 h-full" style="width: 75%"></div>
|
||||
</div>
|
||||
<span class="text-purple-500 ml-4 font-medium">%75</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Robots T-Shirt</span>
|
||||
<div class="mt-1 text-muted-color">Clothing</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
|
||||
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
|
||||
<div class="bg-teal-500 h-full" style="width: 40%"></div>
|
||||
</div>
|
||||
<span class="text-teal-500 ml-4 font-medium">%40</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card">
|
||||
<div class="font-semibold text-xl mb-4">Sales Overview</div>
|
||||
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-80" />
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div class="font-semibold text-xl mb-4">Notifications</div>
|
||||
<div>
|
||||
<Button icon="pi pi-ellipsis-v" class="p-button-text p-button-plain p-button-rounded" @click="$refs.menu1.toggle($event)"></Button>
|
||||
<Menu ref="menu1" :popup="true" :model="items"></Menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="block text-muted-color font-medium mb-4">TODAY</span>
|
||||
<ul class="p-0 mx-0 mt-0 mb-6 list-none">
|
||||
<li class="flex items-center py-2 border-b border-surface">
|
||||
<div class="w-12 h-12 flex items-center justify-center bg-blue-100 rounded-full mr-4 shrink-0">
|
||||
<i class="pi pi-dollar text-xl text-blue-500"></i>
|
||||
</div>
|
||||
<span class="text-surface-900 dark:text-surface-0 leading-normal"
|
||||
>Richard Jones
|
||||
<span class="text-surface-700 dark:text-surface-100">has purchased a blue t-shirt for <span class="text-blue-500">79$</span></span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="flex items-center py-2">
|
||||
<div class="w-12 h-12 flex items-center justify-center bg-orange-100 rounded-full mr-4 shrink-0">
|
||||
<i class="pi pi-download text-xl text-orange-500"></i>
|
||||
</div>
|
||||
<span class="text-surface-700 dark:text-surface-100 leading-normal">Your request for withdrawal of <span class="text-blue-500 font-medium">2500$</span> has been initiated.</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<span class="block text-muted-color font-medium mb-4">YESTERDAY</span>
|
||||
<ul class="p-0 m-0 list-none">
|
||||
<li class="flex items-center py-2 border-b border-surface">
|
||||
<div class="w-12 h-12 flex items-center justify-center bg-blue-100 rounded-full mr-4 shrink-0">
|
||||
<i class="pi pi-dollar text-xl text-blue-500"></i>
|
||||
</div>
|
||||
<span class="text-surface-900 dark:text-surface-0 leading-normal"
|
||||
>Keyser Wick
|
||||
<span class="text-surface-700 dark:text-surface-100">has purchased a black jacket for <span class="text-blue-500">59$</span></span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="flex items-center py-2 border-b border-surface">
|
||||
<div class="w-12 h-12 flex items-center justify-center bg-pink-100 rounded-full mr-4 shrink-0">
|
||||
<i class="pi pi-question text-xl text-pink-500"></i>
|
||||
</div>
|
||||
<span class="text-surface-900 dark:text-surface-0 leading-normal"
|
||||
>Jane Davis
|
||||
<span class="text-surface-700 dark:text-surface-100">has posted a new questions about your product.</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
280
src/views/pages/Crud.vue
Normal file
280
src/views/pages/Crud.vue
Normal file
@@ -0,0 +1,280 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { FilterMatchMode } from '@primevue/core/api';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import { ProductService } from '@/service/ProductService';
|
||||
|
||||
onMounted(() => {
|
||||
ProductService.getProducts().then((data) => (products.value = data));
|
||||
});
|
||||
|
||||
const toast = useToast();
|
||||
const dt = ref();
|
||||
const products = ref();
|
||||
const productDialog = ref(false);
|
||||
const deleteProductDialog = ref(false);
|
||||
const deleteProductsDialog = ref(false);
|
||||
const product = ref({});
|
||||
const selectedProducts = ref();
|
||||
const filters = ref({
|
||||
global: { value: null, matchMode: FilterMatchMode.CONTAINS }
|
||||
});
|
||||
const submitted = ref(false);
|
||||
const statuses = ref([
|
||||
{ label: 'INSTOCK', value: 'instock' },
|
||||
{ label: 'LOWSTOCK', value: 'lowstock' },
|
||||
{ label: 'OUTOFSTOCK', value: 'outofstock' }
|
||||
]);
|
||||
|
||||
const formatCurrency = (value) => {
|
||||
if (value) return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
|
||||
return;
|
||||
};
|
||||
const openNew = () => {
|
||||
product.value = {};
|
||||
submitted.value = false;
|
||||
productDialog.value = true;
|
||||
};
|
||||
const hideDialog = () => {
|
||||
productDialog.value = false;
|
||||
submitted.value = false;
|
||||
};
|
||||
const saveProduct = () => {
|
||||
submitted.value = true;
|
||||
|
||||
if (product?.value.name?.trim()) {
|
||||
if (product.value.id) {
|
||||
product.value.inventoryStatus = product.value.inventoryStatus.value ? product.value.inventoryStatus.value : product.value.inventoryStatus;
|
||||
products.value[findIndexById(product.value.id)] = product.value;
|
||||
toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Updated', life: 3000 });
|
||||
} else {
|
||||
product.value.id = createId();
|
||||
product.value.code = createId();
|
||||
product.value.image = 'product-placeholder.svg';
|
||||
product.value.inventoryStatus = product.value.inventoryStatus ? product.value.inventoryStatus.value : 'INSTOCK';
|
||||
products.value.push(product.value);
|
||||
toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Created', life: 3000 });
|
||||
}
|
||||
|
||||
productDialog.value = false;
|
||||
product.value = {};
|
||||
}
|
||||
};
|
||||
const editProduct = (prod) => {
|
||||
product.value = { ...prod };
|
||||
productDialog.value = true;
|
||||
};
|
||||
const confirmDeleteProduct = (prod) => {
|
||||
product.value = prod;
|
||||
deleteProductDialog.value = true;
|
||||
};
|
||||
const deleteProduct = () => {
|
||||
products.value = products.value.filter((val) => val.id !== product.value.id);
|
||||
deleteProductDialog.value = false;
|
||||
product.value = {};
|
||||
toast.add({ severity: 'success', summary: 'Successful', detail: 'Product Deleted', life: 3000 });
|
||||
};
|
||||
const findIndexById = (id) => {
|
||||
let index = -1;
|
||||
for (let i = 0; i < products.value.length; i++) {
|
||||
if (products.value[i].id === id) {
|
||||
index = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return index;
|
||||
};
|
||||
const createId = () => {
|
||||
let id = '';
|
||||
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
for (var i = 0; i < 5; i++) {
|
||||
id += chars.charAt(Math.floor(Math.random() * chars.length));
|
||||
}
|
||||
return id;
|
||||
};
|
||||
const exportCSV = () => {
|
||||
dt.value.exportCSV();
|
||||
};
|
||||
const confirmDeleteSelected = () => {
|
||||
deleteProductsDialog.value = true;
|
||||
};
|
||||
const deleteSelectedProducts = () => {
|
||||
products.value = products.value.filter((val) => !selectedProducts.value.includes(val));
|
||||
deleteProductsDialog.value = false;
|
||||
selectedProducts.value = null;
|
||||
toast.add({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 });
|
||||
};
|
||||
|
||||
const getStatusLabel = (status) => {
|
||||
switch (status) {
|
||||
case 'INSTOCK':
|
||||
return 'success';
|
||||
|
||||
case 'LOWSTOCK':
|
||||
return 'warn';
|
||||
|
||||
case 'OUTOFSTOCK':
|
||||
return 'danger';
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<Toolbar class="mb-6">
|
||||
<template #start>
|
||||
<Button label="New" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" />
|
||||
<Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
|
||||
</template>
|
||||
|
||||
<template #end>
|
||||
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2" auto />
|
||||
<Button label="Export" icon="pi pi-upload" severity="help" @click="exportCSV($event)" />
|
||||
</template>
|
||||
</Toolbar>
|
||||
|
||||
<DataTable
|
||||
ref="dt"
|
||||
v-model:selection="selectedProducts"
|
||||
:value="products"
|
||||
dataKey="id"
|
||||
:paginator="true"
|
||||
:rows="10"
|
||||
:filters="filters"
|
||||
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
|
||||
:rowsPerPageOptions="[5, 10, 25]"
|
||||
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex flex-wrap gap-2 items-center justify-between">
|
||||
<h4 class="m-0">Manage Products</h4>
|
||||
<IconField>
|
||||
<InputIcon>
|
||||
<i class="pi pi-search" />
|
||||
</InputIcon>
|
||||
<InputText v-model="filters['global'].value" placeholder="Search..." />
|
||||
</IconField>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<Column selectionMode="multiple" style="width: 3rem" :exportable="false"></Column>
|
||||
<Column field="code" header="Code" sortable style="min-width: 12rem"></Column>
|
||||
<Column field="name" header="Name" sortable style="min-width: 16rem"></Column>
|
||||
<Column header="Image">
|
||||
<template #body="slotProps">
|
||||
<img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="rounded" style="width: 64px" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="price" header="Price" sortable style="min-width: 8rem">
|
||||
<template #body="slotProps">
|
||||
{{ formatCurrency(slotProps.data.price) }}
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="category" header="Category" sortable style="min-width: 10rem"></Column>
|
||||
<Column field="rating" header="Reviews" sortable style="min-width: 12rem">
|
||||
<template #body="slotProps">
|
||||
<Rating :modelValue="slotProps.data.rating" :readonly="true" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="inventoryStatus" header="Status" sortable style="min-width: 12rem">
|
||||
<template #body="slotProps">
|
||||
<Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column :exportable="false" style="min-width: 12rem">
|
||||
<template #body="slotProps">
|
||||
<Button icon="pi pi-pencil" outlined rounded class="mr-2" @click="editProduct(slotProps.data)" />
|
||||
<Button icon="pi pi-trash" outlined rounded severity="danger" @click="confirmDeleteProduct(slotProps.data)" />
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
||||
<Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details" :modal="true">
|
||||
<div class="flex flex-col gap-6">
|
||||
<img v-if="product.image" :src="`https://primefaces.org/cdn/primevue/images/product/${product.image}`" :alt="product.image" class="block m-auto pb-4" />
|
||||
<div>
|
||||
<label for="name" class="block font-bold mb-3">Name</label>
|
||||
<InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" fluid />
|
||||
<small v-if="submitted && !product.name" class="text-red-500">Name is required.</small>
|
||||
</div>
|
||||
<div>
|
||||
<label for="description" class="block font-bold mb-3">Description</label>
|
||||
<Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" fluid />
|
||||
</div>
|
||||
<div>
|
||||
<label for="inventoryStatus" class="block font-bold mb-3">Inventory Status</label>
|
||||
<Select id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status" fluid></Select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="block font-bold mb-4">Category</span>
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="flex items-center gap-2 col-span-6">
|
||||
<RadioButton id="category1" v-model="product.category" name="category" value="Accessories" />
|
||||
<label for="category1">Accessories</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 col-span-6">
|
||||
<RadioButton id="category2" v-model="product.category" name="category" value="Clothing" />
|
||||
<label for="category2">Clothing</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 col-span-6">
|
||||
<RadioButton id="category3" v-model="product.category" name="category" value="Electronics" />
|
||||
<label for="category3">Electronics</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 col-span-6">
|
||||
<RadioButton id="category4" v-model="product.category" name="category" value="Fitness" />
|
||||
<label for="category4">Fitness</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-6">
|
||||
<label for="price" class="block font-bold mb-3">Price</label>
|
||||
<InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" fluid />
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label for="quantity" class="block font-bold mb-3">Quantity</label>
|
||||
<InputNumber id="quantity" v-model="product.quantity" integeronly fluid />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<Button label="Cancel" icon="pi pi-times" text @click="hideDialog" />
|
||||
<Button label="Save" icon="pi pi-check" @click="saveProduct" />
|
||||
</template>
|
||||
</Dialog>
|
||||
|
||||
<Dialog v-model:visible="deleteProductDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
|
||||
<div class="flex items-center gap-4">
|
||||
<i class="pi pi-exclamation-triangle !text-3xl" />
|
||||
<span v-if="product"
|
||||
>Are you sure you want to delete <b>{{ product.name }}</b
|
||||
>?</span
|
||||
>
|
||||
</div>
|
||||
<template #footer>
|
||||
<Button label="No" icon="pi pi-times" text @click="deleteProductDialog = false" />
|
||||
<Button label="Yes" icon="pi pi-check" @click="deleteProduct" />
|
||||
</template>
|
||||
</Dialog>
|
||||
|
||||
<Dialog v-model:visible="deleteProductsDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
|
||||
<div class="flex items-center gap-4">
|
||||
<i class="pi pi-exclamation-triangle !text-3xl" />
|
||||
<span v-if="product">Are you sure you want to delete the selected products?</span>
|
||||
</div>
|
||||
<template #footer>
|
||||
<Button label="No" icon="pi pi-times" text @click="deleteProductsDialog = false" />
|
||||
<Button label="Yes" icon="pi pi-check" text @click="deleteSelectedProducts" />
|
||||
</template>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
6
src/views/pages/Empty.vue
Normal file
6
src/views/pages/Empty.vue
Normal file
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<div className="card">
|
||||
<h5>Empty Page</h5>
|
||||
<p>Use this page to start from scratch and place your custom content.</p>
|
||||
</div>
|
||||
</template>
|
||||
34
src/views/pages/KsDocumentForm.vue
Normal file
34
src/views/pages/KsDocumentForm.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div className="card">
|
||||
<h5>Ks document</h5>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { onMounted } from 'vue'
|
||||
import axios from 'axios';
|
||||
|
||||
|
||||
|
||||
const ksdocuments = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
axios.get('http://localhost:8082/ksdocuments/'+$route.params.id)
|
||||
.then(response => {
|
||||
console.log(response.data);
|
||||
ksdocuments.value = response.data;
|
||||
});
|
||||
});
|
||||
|
||||
const getStatus = (data) => {
|
||||
if (data.ingestionStatus === 'INGESTED') {
|
||||
return 'success';
|
||||
} else if (data.ingestionStatus === 'NEW') {
|
||||
return 'danger';
|
||||
} else {
|
||||
return 'warning';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
73
src/views/pages/KsDocuments.vue
Normal file
73
src/views/pages/KsDocuments.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div className="card">
|
||||
|
||||
<DataTable
|
||||
:value="ksdocuments"
|
||||
:paginator="true"
|
||||
:rows="10"
|
||||
dataKey="id"
|
||||
:rowHover="true"
|
||||
showGridlines
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex flex-wrap items-center justify-between gap-2">
|
||||
<span class="text-xl font-bold">KS Documents</span>
|
||||
<Button icon="pi pi-plus" rounded raised @click="newKsDocument()" />
|
||||
</div>
|
||||
</template>
|
||||
<Column field="name" header="Name"></Column>
|
||||
<Column field="fileName" header="File Name"></Column>
|
||||
<Column field="ingestionStatus" header="Status">
|
||||
<template #body="slotProps">
|
||||
<Tag :value="slotProps.data.ingestionStatus" :severity="getStatus(slotProps.data)" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="ingestionDate" header="Ingestion Date"></Column>
|
||||
<Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
|
||||
<template #body="slotProps">
|
||||
<Button type="button" icon="pi pi-pencil" rounded @click="editKsDocument(slotProps.data)"/>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { onMounted } from 'vue'
|
||||
import axios from 'axios';
|
||||
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { data } from 'autoprefixer';
|
||||
|
||||
const router = useRouter()
|
||||
const ksdocuments = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
axios.get('http://localhost:8082/fe-api/ksdocuments')
|
||||
.then(response => {
|
||||
console.log(response.data);
|
||||
ksdocuments.value = response.data;
|
||||
});
|
||||
});
|
||||
|
||||
const getStatus = (data) => {
|
||||
if (data.ingestionStatus === 'INGESTED') {
|
||||
return 'success';
|
||||
} else if (data.ingestionStatus === 'NEW') {
|
||||
return 'danger';
|
||||
} else {
|
||||
return 'warning';
|
||||
}
|
||||
}
|
||||
|
||||
const editKsDocument = (data) => {
|
||||
console.log(data);
|
||||
router.push({ name: 'ks-document-edit', params: { id: data.id } });
|
||||
}
|
||||
|
||||
const newKsDocument = () => {
|
||||
router.push({ name: 'ks-document-new', params: { id: data.id } });
|
||||
|
||||
}
|
||||
</script>
|
||||
455
src/views/pages/Landing.vue
Normal file
455
src/views/pages/Landing.vue
Normal file
@@ -0,0 +1,455 @@
|
||||
<script setup>
|
||||
import { useLayout } from '@/layout/composables/layout';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const { isDarkTheme } = useLayout();
|
||||
|
||||
const smoothScroll = (id) => {
|
||||
document.querySelector(id).scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
};
|
||||
|
||||
const logoUrl = computed(() => {
|
||||
return `layout/images/${isDarkTheme ? 'logo-white' : 'logo-dark'}.svg`;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-surface-0 dark:bg-surface-900 flex justify-center">
|
||||
<div id="home" class="landing-wrapper overflow-hidden">
|
||||
<div class="py-6 px-6 mx-0 md:mx-12 lg:mx-20 lg:px-20 flex items-center justify-between relative lg:static mb-4">
|
||||
<a class="flex items-center" href="#"> <img :src="logoUrl" alt="Sakai Logo" height="50" class="mr-0 lg:mr-2" /><span class="text-surface-900 dark:text-surface-0 font-medium text-2xl leading-normal mr-20">SAKAI</span> </a>
|
||||
<a class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100 p-ripple" v-ripple v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
|
||||
<i class="pi pi-bars text-4xl"></i>
|
||||
</a>
|
||||
<div class="items-center bg-surface-0 dark:bg-surface-900 grow justify-between hidden lg:flex absolute lg:static w-full left-0 px-12 lg:px-0 z-20" style="top: 120px">
|
||||
<ul class="list-none p-0 m-0 flex lg:items-center select-none flex-col lg:flex-row cursor-pointer">
|
||||
<li>
|
||||
<a @click="smoothScroll('#hero')" class="flex m-0 md:ml-8 px-0 py-4 text-surface-900 dark:text-surface-0 font-medium leading-normal p-ripple" v-ripple>
|
||||
<span>Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a @click="smoothScroll('#features')" class="flex m-0 md:ml-8 px-0 py-4 text-surface-900 dark:text-surface-0 font-medium leading-normal p-ripple" v-ripple>
|
||||
<span>Features</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a @click="smoothScroll('#highlights')" class="flex m-0 md:ml-8 px-0 py-4 text-surface-900 dark:text-surface-0 font-medium leading-normal p-ripple" v-ripple>
|
||||
<span>Highlights</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a @click="smoothScroll('#pricing')" class="flex m-0 md:ml-8 px-0 py-4 text-surface-900 dark:text-surface-0 font-medium leading-normal p-ripple" v-ripple>
|
||||
<span>Pricing</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex justify-between lg:block border-t lg:border-t-0 border-surface py-4 lg:py-0 mt-4 lg:mt-0">
|
||||
<Button label="Login" class="p-button-text p-button-rounded border-0 font-light leading-tight text-blue-500"></Button>
|
||||
<Button label="Register" class="p-button-rounded border-0 ml-8 font-light text-white leading-tight bg-blue-500"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="hero"
|
||||
class="flex flex-col pt-6 px-6 lg:px-20 overflow-hidden"
|
||||
style="background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, rgb(238, 239, 175) 0%, rgb(195, 227, 250) 100%); clip-path: ellipse(150% 87% at 93% 13%)"
|
||||
>
|
||||
<div class="mx-6 md:mx-20 mt-0 md:mt-6">
|
||||
<h1 class="text-6xl font-bold text-gray-900 leading-tight"><span class="font-light block">Eu sem integer</span>eget magna fermentum</h1>
|
||||
<p class="font-normal text-2xl leading-normal md:mt-4 text-gray-700">Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat...</p>
|
||||
<Button label="Get Started" class="p-button-rounded text-xl border-0 mt-8 bg-blue-500 font-normal text-white leading-normal px-4"></Button>
|
||||
</div>
|
||||
<div class="flex justify-center md:justify-end">
|
||||
<img src="/demo/images/landing/screen-1.png" alt="Hero Image" class="w-9/12 md:w-auto" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="features" class="py-6 px-6 lg:px-20 mt-8 mx-0 lg:mx-20">
|
||||
<div class="grid grid-cols-12 gap-4 justify-center">
|
||||
<div class="col-span-12 text-center mt-20 mb-6">
|
||||
<h2 class="text-surface-900 dark:text-surface-0 font-normal mb-2">Marvelous Features</h2>
|
||||
<span class="text-surface-600 dark:text-surface-200 text-2xl">Placerat in egestas erat...</span>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 lg:pb-8 mt-6 lg:mt-0">
|
||||
<div
|
||||
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2))"
|
||||
>
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
|
||||
<div class="flex items-center justify-center bg-yellow-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-users text-2xl text-yellow-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Easy to Use</h5>
|
||||
<span class="text-surface-600 dark:text-surface-200">Posuere morbi leo urna molestie.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 lg:pb-8 mt-6 lg:mt-0">
|
||||
<div
|
||||
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(172, 180, 223, 0.2))"
|
||||
>
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
|
||||
<div class="flex items-center justify-center bg-cyan-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-palette text-2xl text-cyan-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Fresh Design</h5>
|
||||
<span class="text-surface-600 dark:text-surface-200">Semper risus in hendrerit.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pb-8 mt-6 lg:mt-0">
|
||||
<div
|
||||
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(172, 180, 223, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(246, 158, 188, 0.2))"
|
||||
>
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
|
||||
<div class="flex items-center justify-center bg-indigo-200" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-map text-2xl text-indigo-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Well Documented</h5>
|
||||
<span class="text-surface-600 dark:text-surface-200">Non arcu risus quis varius quam quisque.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 lg:pb-8 mt-6 lg:mt-0">
|
||||
<div
|
||||
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2), rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(145, 210, 204, 0.2))"
|
||||
>
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
|
||||
<div class="flex items-center justify-center bg-slate-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-id-card text-2xl text-slate-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Responsive Layout</h5>
|
||||
<span class="text-surface-600 dark:text-surface-200">Nulla malesuada pellentesque elit.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 lg:pb-8 mt-6 lg:mt-0">
|
||||
<div
|
||||
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(145, 226, 237, 0.2), rgba(160, 210, 250, 0.2))"
|
||||
>
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
|
||||
<div class="flex items-center justify-center bg-orange-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-star text-2xl text-orange-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Clean Code</h5>
|
||||
<span class="text-surface-600 dark:text-surface-200">Condimentum lacinia quis vel eros.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pb-8 mt-6 lg:mt-0">
|
||||
<div
|
||||
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(251, 199, 145, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(212, 162, 221, 0.2))"
|
||||
>
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
|
||||
<div class="flex items-center justify-center bg-pink-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-moon text-2xl text-pink-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Dark Mode</h5>
|
||||
<span class="text-surface-600 dark:text-surface-200">Convallis tellus id interdum velit laoreet.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 mt-6 lg:mt-0">
|
||||
<div
|
||||
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(160, 210, 250, 0.2)), linear-gradient(180deg, rgba(187, 199, 205, 0.2), rgba(145, 210, 204, 0.2))"
|
||||
>
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
|
||||
<div class="flex items-center justify-center bg-teal-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-shopping-cart text-2xl text-teal-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Ready to Use</h5>
|
||||
<span class="text-surface-600 dark:text-surface-200">Mauris sit amet massa vitae.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 mt-6 lg:mt-0">
|
||||
<div
|
||||
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(251, 199, 145, 0.2), rgba(160, 210, 250, 0.2))"
|
||||
>
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
|
||||
<div class="flex items-center justify-center bg-blue-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-globe text-2xl text-blue-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Modern Practices</h5>
|
||||
<span class="text-surface-600 dark:text-surface-200">Elementum nibh tellus molestie nunc non.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg-4 mt-6 lg:mt-0">
|
||||
<div
|
||||
style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(160, 210, 250, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(246, 158, 188, 0.2), rgba(212, 162, 221, 0.2))"
|
||||
>
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
|
||||
<div class="flex items-center justify-center bg-purple-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-eye text-2xl text-purple-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-surface-900 dark:text-surface-0">Privacy</h5>
|
||||
<span class="text-surface-600 dark:text-surface-200">Neque egestas congue quisque.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="col-span-12 mt-20 mb-20 p-2 md:p-20"
|
||||
style="border-radius: 20px; background: linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #efe1af 0%, #c3dcfa 100%)"
|
||||
>
|
||||
<div class="flex flex-col justify-center items-center text-center px-4 py-4 md:py-0">
|
||||
<h3 class="text-gray-900 mb-2">Joséphine Miller</h3>
|
||||
<span class="text-gray-600 text-2xl">Peak Interactive</span>
|
||||
<p class="text-gray-900 sm:line-height-2 md:line-height-4 text-2xl mt-6" style="max-width: 800px">
|
||||
“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>
|
||||
<img src="/demo/images/landing/peak-logo.svg" class="mt-6" alt="Company logo" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="highlights" class="py-6 px-6 lg:px-20 mx-0 my-12 lg:mx-20">
|
||||
<div class="text-center">
|
||||
<h2 class="text-surface-900 dark:text-surface-0 font-normal mb-2">Powerful Everywhere</h2>
|
||||
<span class="text-surface-600 dark:text-surface-200 text-2xl">Amet consectetur adipiscing elit...</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-12 gap-4 mt-20 pb-2 md:pb-20">
|
||||
<div class="flex justify-center col-span-12 lg:col-span-6 bg-purple-100 p-0 order-1 lg:order-none" style="border-radius: 8px">
|
||||
<img src="/demo/images/landing/mockup.svg" class="w-11/12" alt="mockup mobile" />
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-6 my-auto flex flex-col lg:items-end text-center lg:text-right">
|
||||
<div class="flex items-center justify-center bg-purple-200 self-center lg:self-end" style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-mobile text-5xl text-purple-700"></i>
|
||||
</div>
|
||||
<h2 class="leading-none text-surface-900 dark:text-surface-0 text-4xl font-normal">Congue Quisque Egestas</h2>
|
||||
<span class="text-surface-700 dark:text-surface-100 text-2xl leading-normal ml-0 md:ml-2" style="max-width: 650px"
|
||||
>Lectus arcu bibendum at varius vel pharetra vel turpis nunc. Eget aliquet nibh praesent tristique magna sit amet purus gravida. Sit amet mattis vulputate enim nulla aliquet.</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-12 gap-4 my-20 pt-2 md:pt-20">
|
||||
<div class="col-span-12 lg:col-span-6 my-auto flex flex-col text-center lg:text-left lg:items-start">
|
||||
<div class="flex items-center justify-center bg-yellow-200 self-center lg:self-start" style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-desktop text-5xl text-yellow-700"></i>
|
||||
</div>
|
||||
<h2 class="leading-none text-surface-900 dark:text-surface-0 text-4xl font-normal">Celerisque Eu Ultrices</h2>
|
||||
<span class="text-surface-700 dark:text-surface-100 text-2xl leading-normal mr-0 md:mr-2" style="max-width: 650px"
|
||||
>Adipiscing commodo elit at imperdiet dui. Viverra nibh cras pulvinar mattis nunc sed blandit libero. Suspendisse in est ante in. Mauris pharetra et ultrices neque ornare aenean euismod elementum nisi.</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end order-1 sm:order-2 col-span-12 lg:col-span-6 bg-yellow-100 p-0" style="border-radius: 8px">
|
||||
<img src="/demo/images/landing/mockup-desktop.svg" class="w-11/12" alt="mockup" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pricing" class="py-6 px-6 lg:px-20 my-2 md:my-6">
|
||||
<div class="text-center">
|
||||
<h2 class="text-surface-900 dark:text-surface-0 font-normal mb-2">Matchless Pricing</h2>
|
||||
<span class="text-surface-600 dark:text-surface-200 text-2xl">Amet consectetur adipiscing elit...</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-12 gap-4 justify-between mt-20 md:mt-0">
|
||||
<div class="col-span-12 lg:col-span-4 p-0 md:p-4">
|
||||
<div class="p-4 flex flex-col border-surface-200 dark:border-surface-600 pricing-card cursor-pointer border-2 hover:border-primary duration-300 transition-all" style="border-radius: 10px">
|
||||
<h3 class="text-surface-900 dark:text-surface-0 text-center my-8">Free</h3>
|
||||
<img src="/demo/images/landing/free.svg" class="w-10/12 h-10 mx-auto" alt="free" />
|
||||
<div class="my-8 text-center">
|
||||
<span class="text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0">$0</span>
|
||||
<span class="text-surface-600 dark:text-surface-200">per month</span>
|
||||
<Button label="Get Started" class="block mx-auto mt-6 p-button-rounded border-0 ml-4 font-light leading-tight bg-blue-500 text-white"></Button>
|
||||
</div>
|
||||
<Divider class="w-full bg-surface-200"></Divider>
|
||||
<ul class="my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col">
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl leading-normal">Responsive Layout</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl leading-normal">Unlimited Push Messages</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl leading-normal">50 Support Ticket</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl leading-normal">Free Shipping</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-4 p-0 md:p-4 mt-6 md:mt-0">
|
||||
<div class="p-4 flex flex-col border-surface-200 dark:border-surface-600 pricing-card cursor-pointer border-2 hover:border-primary duration-300 transition-all" style="border-radius: 10px">
|
||||
<h3 class="text-surface-900 dark:text-surface-0 text-center my-8">Startup</h3>
|
||||
<img src="/demo/images/landing/startup.svg" class="w-10/12 h-10 mx-auto" alt="startup" />
|
||||
<div class="my-8 text-center">
|
||||
<span class="text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0">$1</span>
|
||||
<span class="text-surface-600 dark:text-surface-200">per month</span>
|
||||
<Button label="Try Free" class="block mx-auto mt-6 p-button-rounded border-0 ml-4 font-light leading-tight bg-blue-500 text-white"></Button>
|
||||
</div>
|
||||
<Divider class="w-full bg-surface-200"></Divider>
|
||||
<ul class="my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col">
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl leading-normal">Responsive Layout</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl leading-normal">Unlimited Push Messages</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl leading-normal">50 Support Ticket</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl leading-normal">Free Shipping</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-4 p-0 md:p-4 mt-6 md:mt-0">
|
||||
<div class="p-4 flex flex-col border-surface-200 dark:border-surface-600 pricing-card cursor-pointer border-2 hover:border-primary duration-300 transition-all" style="border-radius: 10px">
|
||||
<h3 class="text-surface-900 dark:text-surface-0 text-center my-8">Enterprise</h3>
|
||||
<img src="/demo/images/landing/enterprise.svg" class="w-10/12 h-10 mx-auto" alt="enterprise" />
|
||||
<div class="my-8 text-center">
|
||||
<span class="text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0">$999</span>
|
||||
<span class="text-surface-600 dark:text-surface-200">per month</span>
|
||||
<Button label="Get a Quote" class="block mx-auto mt-6 p-button-rounded border-0 ml-4 font-light leading-tight bg-blue-500 text-white"></Button>
|
||||
</div>
|
||||
<Divider class="w-full bg-surface-200"></Divider>
|
||||
<ul class="my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col">
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl leading-normal">Responsive Layout</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl leading-normal">Unlimited Push Messages</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl leading-normal">50 Support Ticket</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl leading-normal">Free Shipping</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="py-6 px-6 mx-0 mt-20 lg:mx-20">
|
||||
<div class="grid grid-cols-12 gap-4 justify-between">
|
||||
<div class="col-span-12 md:col-span-2" style="margin-top: -1.5rem">
|
||||
<a @click="smoothScroll('#home')" class="flex flex-wrap items-center justify-center md:justify-start md:mb-0 mb-4 cursor-pointer">
|
||||
<img :src="logoUrl" alt="footer sections" width="50" height="50" class="mr-2" />
|
||||
<h4 class="font-medium text-3xl text-surface-900 dark:text-surface-0">SAKAI</h4>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 md:col-span-10 lg:col-span-7">
|
||||
<div class="grid grid-cols-12 gap-4 text-center md:text-left">
|
||||
<div class="col-span-12 md:col-span-3">
|
||||
<h4 class="font-medium text-2xl leading-normal mb-4 text-surface-900 dark:text-surface-0">Company</h4>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">About Us</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">News</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Investor Relations</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Careers</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer text-surface-700 dark:text-surface-100">Media Kit</a>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 md:col-span-3 mt-6 md:mt-0">
|
||||
<h4 class="font-medium text-2xl leading-normal mb-4 text-surface-900 dark:text-surface-0">Resources</h4>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Get Started</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Learn</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer text-surface-700 dark:text-surface-100">Case Studies</a>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 md:col-span-3 mt-6 md:mt-0">
|
||||
<h4 class="font-medium text-2xl leading-normal mb-4 text-surface-900 dark:text-surface-0">Community</h4>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Discord</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Events<img src="/demo/images/landing/new-badge.svg" class="ml-2" /></a>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">FAQ</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer text-surface-700 dark:text-surface-100">Blog</a>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 md:col-span-3 mt-6 md:mt-0">
|
||||
<h4 class="font-medium text-2xl leading-normal mb-4 text-surface-900 dark:text-surface-0">Legal</h4>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Brand Policy</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Privacy Policy</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer text-surface-700 dark:text-surface-100">Terms of Service</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- <style scoped>
|
||||
#hero {
|
||||
background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #eeefaf 0%, #c3e3fa 100%);
|
||||
height: 700px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
#hero {
|
||||
-webkit-clip-path: ellipse(150% 87% at 93% 13%);
|
||||
clip-path: ellipse(150% 87% at 93% 13%);
|
||||
height: 530px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1300px) {
|
||||
#hero > img {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#hero > div > p {
|
||||
max-width: 450px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1300px) {
|
||||
#hero {
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
#hero > img {
|
||||
position: static;
|
||||
transform: scale(1);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
#hero > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#hero > div > p {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
</style> -->
|
||||
43
src/views/pages/NotFound.vue
Normal file
43
src/views/pages/NotFound.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<script setup></script>
|
||||
|
||||
<template>
|
||||
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<img src="/demo/images/notfound/logo-blue.svg" alt="Sakai logo" class="mb-8 w-24 shrink-0" />
|
||||
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(33, 150, 243, 0.4) 10%, rgba(33, 150, 243, 0) 30%)">
|
||||
<div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center" style="border-radius: 53px">
|
||||
<span class="text-blue-500 font-bold text-3xl">404</span>
|
||||
<h1 class="text-surface-900 dark:text-surface-0 font-bold text-3xl lg:text-5xl mb-2">Not Found</h1>
|
||||
<div class="text-surface-600 dark:text-surface-200 mb-8">Requested resource is not available.</div>
|
||||
<router-link to="/" class="w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b">
|
||||
<span class="flex justify-center items-center bg-cyan-400 rounded-border" style="height: 3.5rem; width: 3.5rem">
|
||||
<i class="text-surface-50 dark:text-surface-800 pi pi-fw pi-table text-2xl"></i>
|
||||
</span>
|
||||
<span class="ml-6 flex flex-col">
|
||||
<span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0 block">Frequently Asked Questions</span>
|
||||
<span class="text-surface-600 dark:text-surface-200 lg:text-xl">Ultricies mi quis hendrerit dolor.</span>
|
||||
</span>
|
||||
</router-link>
|
||||
<router-link to="/" class="w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b">
|
||||
<span class="flex justify-center items-center bg-orange-400 rounded-border" style="height: 3.5rem; width: 3.5rem">
|
||||
<i class="pi pi-fw pi-question-circle text-surface-50 dark:text-surface-800 text-2xl"></i>
|
||||
</span>
|
||||
<span class="ml-6 flex flex-col">
|
||||
<span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0">Solution Center</span>
|
||||
<span class="text-surface-600 dark:text-surface-200 lg:text-xl">Phasellus faucibus scelerisque eleifend.</span>
|
||||
</span>
|
||||
</router-link>
|
||||
<router-link to="/" class="w-full flex items-center mb-8 py-8 border-surface-300 dark:border-surface-500 border-b">
|
||||
<span class="flex justify-center items-center bg-indigo-400 rounded-border" style="height: 3.5rem; width: 3.5rem">
|
||||
<i class="pi pi-fw pi-unlock text-surface-50 dark:text-surface-800 text-2xl"></i>
|
||||
</span>
|
||||
<span class="ml-6 flex flex-col">
|
||||
<span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0">Permission Manager</span>
|
||||
<span class="text-surface-600 dark:text-surface-200 lg:text-xl">Accumsan in nisl nisi scelerisque</span>
|
||||
</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
155
src/views/pages/TimelineDoc.vue
Normal file
155
src/views/pages/TimelineDoc.vue
Normal file
@@ -0,0 +1,155 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const events = ref([
|
||||
{
|
||||
status: 'Ordered',
|
||||
date: '15/10/2020 10:30',
|
||||
icon: 'pi pi-shopping-cart',
|
||||
color: '#9C27B0',
|
||||
image: 'game-controller.jpg'
|
||||
},
|
||||
{
|
||||
status: 'Processing',
|
||||
date: '15/10/2020 14:00',
|
||||
icon: 'pi pi-cog',
|
||||
color: '#673AB7'
|
||||
},
|
||||
{
|
||||
status: 'Shipped',
|
||||
date: '15/10/2020 16:15',
|
||||
icon: 'pi pi-envelope',
|
||||
color: '#FF9800'
|
||||
},
|
||||
{
|
||||
status: 'Delivered',
|
||||
date: '16/10/2020 10:00',
|
||||
icon: 'pi pi-check',
|
||||
color: '#607D8B'
|
||||
}
|
||||
]);
|
||||
|
||||
const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-6">
|
||||
<div class="card">
|
||||
<h5>Left Align</h5>
|
||||
<Timeline :value="events">
|
||||
<template #content="slotProps">
|
||||
{{ slotProps.item.status }}
|
||||
</template>
|
||||
</Timeline>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<div class="card">
|
||||
<h5>Right Align</h5>
|
||||
<Timeline :value="events" align="right">
|
||||
<template #content="slotProps">
|
||||
{{ slotProps.item.status }}
|
||||
</template>
|
||||
</Timeline>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<div class="card">
|
||||
<h5>Alternate Align</h5>
|
||||
<Timeline :value="events" align="alternate">
|
||||
<template #content="slotProps">
|
||||
{{ slotProps.item.status }}
|
||||
</template>
|
||||
</Timeline>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<div class="card">
|
||||
<h5>Opposite Content</h5>
|
||||
<Timeline :value="events">
|
||||
<template #opposite="slotProps">
|
||||
<small class="p-text-secondary">{{ slotProps.item.date }}</small>
|
||||
</template>
|
||||
<template #content="slotProps">
|
||||
{{ slotProps.item.status }}
|
||||
</template>
|
||||
</Timeline>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h5>Custom Timeline</h5>
|
||||
<Timeline :value="events" align="alternate" class="customized-timeline">
|
||||
<template #marker="slotProps">
|
||||
<span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" :style="{ backgroundColor: slotProps.item.color }">
|
||||
<i :class="slotProps.item.icon"></i>
|
||||
</span>
|
||||
</template>
|
||||
<template #content="slotProps">
|
||||
<Card class="mt-4">
|
||||
<template #title>
|
||||
{{ slotProps.item.status }}
|
||||
</template>
|
||||
<template #subtitle>
|
||||
{{ slotProps.item.date }}
|
||||
</template>
|
||||
<template #content>
|
||||
<img v-if="slotProps.item.image" :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.item.image}`" :alt="slotProps.item.name" width="200" class="shadow-sm" />
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
|
||||
neque quas!
|
||||
</p>
|
||||
<Button label="Read more" text></Button>
|
||||
</template>
|
||||
</Card>
|
||||
</template>
|
||||
</Timeline>
|
||||
</div>
|
||||
<div class="card mt-4">
|
||||
<h5>Horizontal</h5>
|
||||
<h6>Top Align</h6>
|
||||
<Timeline :value="horizontalEvents" layout="horizontal" align="top">
|
||||
<template #content="slotProps">
|
||||
{{ slotProps.item }}
|
||||
</template>
|
||||
</Timeline>
|
||||
|
||||
<h6>Bottom Align</h6>
|
||||
<Timeline :value="horizontalEvents" layout="horizontal" align="bottom">
|
||||
<template #content="slotProps">
|
||||
{{ slotProps.item }}
|
||||
</template>
|
||||
</Timeline>
|
||||
|
||||
<h6>Alternate Align</h6>
|
||||
<Timeline :value="horizontalEvents" layout="horizontal" align="alternate">
|
||||
<template #opposite> </template>
|
||||
<template #content="slotProps">
|
||||
{{ slotProps.item }}
|
||||
</template>
|
||||
</Timeline>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media screen and (max-width: 960px) {
|
||||
::v-deep(.customized-timeline) {
|
||||
.p-timeline-event:nth-child(even) {
|
||||
flex-direction: row !important;
|
||||
|
||||
.p-timeline-event-content {
|
||||
text-align: left !important;
|
||||
}
|
||||
}
|
||||
|
||||
.p-timeline-event-opposite {
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
.p-card {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
25
src/views/pages/auth/Access.vue
Normal file
25
src/views/pages/auth/Access.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<script setup></script>
|
||||
|
||||
<template>
|
||||
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<img src="/demo/images/access/logo-orange.svg" alt="Sakai logo" class="mb-8 w-24 shrink-0" />
|
||||
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(247, 149, 48, 0.4) 10%, rgba(247, 149, 48, 0) 30%)">
|
||||
<div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center" style="border-radius: 53px">
|
||||
<div class="gap-4 flex flex-col items-center">
|
||||
<div class="flex justify-center items-center bg-orange-500 rounded-full" style="width: 3.2rem; height: 3.2rem">
|
||||
<i class="text-surface-50 dark:text-surface-800 pi pi-fw pi-lock text-2xl"></i>
|
||||
</div>
|
||||
<h1 class="text-surface-900 dark:text-surface-0 font-bold text-4xl lg:text-5xl mb-2">Access Denied</h1>
|
||||
<span class="text-surface-600 dark:text-surface-200 mb-8">You do not have the necessary permisions. Please contact admins.</span>
|
||||
<img src="/demo/images/access/asset-access.svg" alt="Access denied" class="mb-8" width="80%" />
|
||||
<div class="col-span-12 mt-8 text-center">
|
||||
<i class="pi pi-fw pi-arrow-left text-blue-500 mr-2" style="vertical-align: center"></i>
|
||||
<router-link to="/" class="text-blue-500">Go to Dashboard</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
25
src/views/pages/auth/Error.vue
Normal file
25
src/views/pages/auth/Error.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<script setup></script>
|
||||
|
||||
<template>
|
||||
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<img src="/demo/images/error/logo-error.svg" alt="Sakai logo" class="mb-8 w-24 shrink-0" />
|
||||
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(233, 30, 99, 0.4) 10%, rgba(33, 150, 243, 0) 30%)">
|
||||
<div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center" style="border-radius: 53px">
|
||||
<div class="gap-4 flex flex-col items-center">
|
||||
<div class="flex justify-center items-center bg-pink-500 rounded-full" style="height: 3.2rem; width: 3.2rem">
|
||||
<i class="pi pi-fw pi-exclamation-circle text-2xl text-white"></i>
|
||||
</div>
|
||||
<h1 class="text-surface-900 dark:text-surface-0 font-bold text-5xl mb-2">Error Occured</h1>
|
||||
<span class="text-surface-600 dark:text-surface-200 mb-8">Requested resource is not available.</span>
|
||||
<img src="/demo/images/error/asset-error.svg" alt="Error" class="mb-8" width="80%" />
|
||||
<div class="col-span-12 mt-8 text-center">
|
||||
<i class="pi pi-fw pi-arrow-left text-blue-500 mr-2" style="vertical-align: center"></i>
|
||||
<router-link to="/" class="text-blue-500">Go to Dashboard</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
59
src/views/pages/auth/Login.vue
Normal file
59
src/views/pages/auth/Login.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<script setup>
|
||||
import { useLayout } from '@/layout/composables/layout';
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
const { isDarkTheme } = useLayout();
|
||||
const email = ref('');
|
||||
const password = ref('');
|
||||
const checked = ref(false);
|
||||
|
||||
const logoUrl = computed(() => {
|
||||
return `/layout/images/${isDarkTheme ? 'logo-white' : 'logo-dark'}.svg`;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<img :src="logoUrl" alt="Sakai logo" class="mb-8 w-24 shrink-0" />
|
||||
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)">
|
||||
<div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20" style="border-radius: 53px">
|
||||
<div class="text-center mb-8">
|
||||
<img src="/demo/images/login/avatar.png" alt="Image" height="50" class="mb-4" />
|
||||
<div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Welcome, Isabel!</div>
|
||||
<span class="text-surface-600 dark:text-surface-200 font-medium">Sign in to continue</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="email1" class="block text-surface-900 dark:text-surface-0 text-xl font-medium mb-2">Email</label>
|
||||
<InputText id="email1" type="text" placeholder="Email address" class="w-full md:w-[30rem] mb-8" style="padding: 1rem" v-model="email" />
|
||||
|
||||
<label for="password1" class="block text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Password</label>
|
||||
<Password id="password1" v-model="password" placeholder="Password" :toggleMask="true" class="w-full mb-4" inputClass="w-full" :inputStyle="{ padding: '1rem' }"></Password>
|
||||
|
||||
<div class="flex items-center justify-between mb-8 gap-8">
|
||||
<div class="flex items-center">
|
||||
<Checkbox v-model="checked" id="rememberme1" binary class="mr-2"></Checkbox>
|
||||
<label for="rememberme1">Remember me</label>
|
||||
</div>
|
||||
<a class="font-medium no-underline ml-2 text-right cursor-pointer" style="color: var(--primary-color)">Forgot password?</a>
|
||||
</div>
|
||||
<Button label="Sign In" class="w-full p-4 text-xl"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.pi-eye {
|
||||
transform: scale(1.6);
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.pi-eye-slash {
|
||||
transform: scale(1.6);
|
||||
margin-right: 1rem;
|
||||
}
|
||||
</style>
|
||||
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>
|
||||
806
src/views/utilities/Blocks.vue
Normal file
806
src/views/utilities/Blocks.vue
Normal file
@@ -0,0 +1,806 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
const block1 = ref(` <div class="grid grid-cols-12 gap-4 grid-nogutter bg-surface-0 dark:bg-surface-950 text-surface-800 dark:text-surface-50">
|
||||
<div class="col-span-12 md:col-span-6 p-12 text-center md:text-left flex items-center ">
|
||||
<section>
|
||||
<span class="block text-6xl font-bold mb-1">Create the screens your</span>
|
||||
<div class="text-6xl text-primary font-bold mb-4">your visitors deserve to see</div>
|
||||
<p class="mt-0 mb-6 text-surface-700 dark:text-surface-100 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
|
||||
<Button label="Learn More" type="button" class="mr-4 p-button-raised"></Button>
|
||||
<Button label="Live Demo" type="button" class="p-button-outlined"></Button>
|
||||
</section>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-6 overflow-hidden">
|
||||
<img src="/demo/images/blocks/hero/hero-1.png" alt="Image" class="md:ml-auto block md:h-full" style="clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%)">
|
||||
</div>
|
||||
</div>`);
|
||||
|
||||
const block2 = ref(` <div class="bg-surface-0 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20 text-center">
|
||||
<div class="mb-4 font-bold text-2xl">
|
||||
<span class="text-surface-900 dark:text-surface-0">One Product, </span>
|
||||
<span class="text-blue-600">Many Solutions</span>
|
||||
</div>
|
||||
<div class="text-surface-700 dark:text-surface-100 text-sm mb-12">Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.</div>
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12 md:col-span-4 mb-6 px-8">
|
||||
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
|
||||
<i class="pi pi-desktop text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Built for Developers</div>
|
||||
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-4 mb-6 px-8">
|
||||
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
|
||||
<i class="pi pi-lock text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">End-to-End Encryption</div>
|
||||
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis.</span>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-4 mb-6 px-8">
|
||||
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
|
||||
<i class="pi pi-check-circle text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Easy to Use</div>
|
||||
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper.</span>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-4 mb-6 px-8">
|
||||
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
|
||||
<i class="pi pi-globe text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Fast & Global Support</div>
|
||||
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus.</span>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-4 mb-6 px-8">
|
||||
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
|
||||
<i class="pi pi-github text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Open Source</div>
|
||||
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. </span>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-4 md:mb-6 mb-0 px-4">
|
||||
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
|
||||
<i class="pi pi-shield text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Trusted Securitty</div>
|
||||
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>`);
|
||||
|
||||
const block3 = ref(` <div class="bg-surface-50 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20">
|
||||
<div class="text-surface-900 dark:text-surface-0 font-bold text-6xl mb-6 text-center">Pricing Plans</div>
|
||||
<div class="text-surface-700 dark:text-surface-100 text-xl mb-12 text-center leading-normal">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
|
||||
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12 lg:col-span-4">
|
||||
<div class="p-4 h-full">
|
||||
<div class="shadow p-4 h-full flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Basic</div>
|
||||
<div class="text-surface-600 dark:text-surface-200">Plan description</div>
|
||||
<hr class="my-4 mx-0 border-t border-0 border-surface" />
|
||||
<div class="flex items-center">
|
||||
<span class="font-bold text-2xl text-surface-900 dark:text-surface-0">$9</span>
|
||||
<span class="ml-2 font-medium text-surface-600 dark:text-surface-200">per month</span>
|
||||
</div>
|
||||
<hr class="my-4 mx-0 border-t border-0 border-surface" />
|
||||
<ul class="list-none p-0 m-0 grow">
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Arcu vitae elementum</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Dui faucibus in ornare</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Morbi tincidunt augue</span>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="mb-4 mx-0 border-t border-0 border-surface mt-auto" />
|
||||
<Button label="Buy Now" class="p-4 w-full mt-auto"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-4">
|
||||
<div class="p-4 h-full">
|
||||
<div class="shadow p-4 h-full flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Premium</div>
|
||||
<div class="text-surface-600 dark:text-surface-200">Plan description</div>
|
||||
<hr class="my-4 mx-0 border-t border-0 border-surface" />
|
||||
<div class="flex items-center">
|
||||
<span class="font-bold text-2xl text-surface-900 dark:text-surface-0">$29</span>
|
||||
<span class="ml-2 font-medium text-surface-600 dark:text-surface-200">per month</span>
|
||||
</div>
|
||||
<hr class="my-4 mx-0 border-t border-0 border-surface" />
|
||||
<ul class="list-none p-0 m-0 grow">
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Arcu vitae elementum</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Dui faucibus in ornare</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Morbi tincidunt augue</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Duis ultricies lacus sed</span>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="mb-4 mx-0 border-t border-0 border-surface" />
|
||||
<Button label="Buy Now" class="p-4 w-full"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-4">
|
||||
<div class="p-4 h-full">
|
||||
<div class="shadow p-4 flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Enterprise</div>
|
||||
<div class="text-surface-600 dark:text-surface-200">Plan description</div>
|
||||
<hr class="my-4 mx-0 border-t border-0 border-surface" />
|
||||
<div class="flex items-center">
|
||||
<span class="font-bold text-2xl text-surface-900 dark:text-surface-0">$49</span>
|
||||
<span class="ml-2 font-medium text-surface-600 dark:text-surface-200">per month</span>
|
||||
</div>
|
||||
<hr class="my-4 mx-0 border-t border-0 border-surface" />
|
||||
<ul class="list-none p-0 m-0 grow">
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Arcu vitae elementum</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Dui faucibus in ornare</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Morbi tincidunt augue</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Duis ultricies lacus sed</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Imperdiet proin</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Nisi scelerisque</span>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="mb-4 mx-0 border-t border-0 border-surface" />
|
||||
<Button label="Buy Now" class="p-4 w-full p-button-outlined"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`);
|
||||
|
||||
const block4 = ref(` <div class="bg-surface-0 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20">
|
||||
<div class="text-surface-700 dark:text-surface-100 text-center">
|
||||
<div class="text-blue-600 font-bold mb-4"><i class="pi pi-discord"></i> POWERED BY DISCORD</div>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-bold text-5xl mb-4">Join Our Design Community</div>
|
||||
<div class="text-surface-700 dark:text-surface-100 text-2xl mb-8">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
|
||||
<Button label="Join Now" icon="pi pi-discord" class="font-bold px-8 py-4 p-button-raised p-button-rounded whitespace-nowrap"></Button>
|
||||
</div>
|
||||
</div>`);
|
||||
|
||||
const block5 = ref(` <div class="bg-slate-900 text-gray-100 p-4 flex justify-between lg:justify-center items-center flex-wrap">
|
||||
<div class="font-bold mr-20">🔥 Hot Deals!</div>
|
||||
<div class="items-center hidden lg:flex">
|
||||
<span class="leading-normal">Libero voluptatum atque exercitationem praesentium provident odit.</span>
|
||||
</div>
|
||||
<a class="flex items-center ml-2 mr-20">
|
||||
<a class="text-white" href="#"><span class="underline font-bold">Learn More</span></a>
|
||||
</a>
|
||||
<a v-ripple class="flex items-center no-underline justify-center rounded-full text-gray-50 hover:bg-slate-700 cursor-pointer transition-colors duration-150 p-ripple" style="width:2rem; height: 2rem">
|
||||
<i class="pi pi-times"></i>
|
||||
</a>
|
||||
</div>`);
|
||||
|
||||
const block6 = ref(` <div class="bg-surface-0 dark:bg-surface-950 px-6 py-8 md:px-12 lg:px-20">
|
||||
<ul class="list-none p-0 m-0 flex items-center font-medium mb-4">
|
||||
<li>
|
||||
<a class="text-surface-500 dark:text-surface-300 no-underline leading-normal cursor-pointer">Application</a>
|
||||
</li>
|
||||
<li class="px-2">
|
||||
<i class="pi pi-angle-right text-surface-500 dark:text-surface-300 leading-normal"></i>
|
||||
</li>
|
||||
<li>
|
||||
<span class="text-surface-900 dark:text-surface-0 leading-normal">Analytics</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex items-start flex-col lg:justify-between lg:flex-row">
|
||||
<div>
|
||||
<div class="font-medium text-3xl text-surface-900 dark:text-surface-0">Customers</div>
|
||||
<div class="flex items-center text-surface-700 dark:text-surface-100 flex-wrap">
|
||||
<div class="mr-8 flex items-center mt-4">
|
||||
<i class="pi pi-users mr-2"></i>
|
||||
<span>332 Active Users</span>
|
||||
</div>
|
||||
<div class="mr-8 flex items-center mt-4">
|
||||
<i class="pi pi-globe mr-2"></i>
|
||||
<span>9402 Sessions</span>
|
||||
</div>
|
||||
<div class="flex items-center mt-4">
|
||||
<i class="pi pi-clock mr-2"></i>
|
||||
<span>2.32m Avg. Duration</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 lg:mt-0">
|
||||
<Button label="Add" class="p-button-outlined mr-2" icon="pi pi-user-plus"></Button>
|
||||
<Button label="Save" icon="pi pi-check"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>`);
|
||||
|
||||
const block7 = ref(` <div class="bg-surface-50 dark:bg-surface-950 px-6 py-8 md:px-12 lg:px-20">
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12 md:col-span-6 lg:col-span-3">
|
||||
<div class="bg-surface-0 dark:bg-surface-900 shadow p-4 rounded-border">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Orders</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-blue-100 rounded-border" style="width:2.5rem;height:2.5rem">
|
||||
<i class="pi pi-shopping-cart text-blue-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">24 new </span>
|
||||
<span class="text-surface-500 dark:text-surface-300">since last visit</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-6 lg:col-span-3">
|
||||
<div class="bg-surface-0 dark:bg-surface-900 shadow p-4 rounded-border">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Revenue</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">$2.100</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-orange-100 rounded-border" style="width:2.5rem;height:2.5rem">
|
||||
<i class="pi pi-map-marker text-orange-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">%52+ </span>
|
||||
<span class="text-surface-500 dark:text-surface-300">since last week</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-6 lg:col-span-3">
|
||||
<div class="bg-surface-0 dark:bg-surface-900 shadow p-4 rounded-border">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Customers</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">28441</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-cyan-100 rounded-border" style="width:2.5rem;height:2.5rem">
|
||||
<i class="pi pi-inbox text-cyan-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">520 </span>
|
||||
<span class="text-surface-500 dark:text-surface-300">newly registered</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-6 lg:col-span-3">
|
||||
<div class="bg-surface-0 dark:bg-surface-900 shadow p-4 rounded-border">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Comments</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152 Unread</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-purple-100 rounded-border" style="width:2.5rem;height:2.5rem">
|
||||
<i class="pi pi-comment text-purple-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">85 </span>
|
||||
<span class="text-surface-500 dark:text-surface-300">responded</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`);
|
||||
|
||||
const block8 = ref(` <div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border w-full lg:w-6/12">
|
||||
<div class="text-center mb-8">
|
||||
<img src="/demo/images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-4">
|
||||
<div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Welcome Back</div>
|
||||
<span class="text-surface-600 dark:text-surface-200 font-medium leading-normal">Don't have an account?</span>
|
||||
<a class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Create today!</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="email1" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Email</label>
|
||||
<InputText id="email1" type="text" class="w-full mb-4" />
|
||||
|
||||
<label for="password1" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Password</label>
|
||||
<InputText id="password1" type="password" class="w-full mb-4" />
|
||||
|
||||
<div class="flex items-center justify-between mb-12">
|
||||
<div class="flex items-center">
|
||||
<Checkbox id="rememberme1" :binary="true" v-model="checked" class="mr-2"></Checkbox>
|
||||
<label for="rememberme1">Remember me</label>
|
||||
</div>
|
||||
<a class="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">Forgot password?</a>
|
||||
</div>
|
||||
|
||||
<Button label="Sign In" icon="pi pi-user" class="w-full"></Button>
|
||||
</div>
|
||||
</div>`);
|
||||
|
||||
const block9 = ref(` <div class="bg-surface-0 dark:bg-surface-950">
|
||||
<div class="font-medium text-3xl text-surface-900 dark:text-surface-0 mb-4">Movie Information</div>
|
||||
<div class="text-surface-500 dark:text-surface-300 mb-8">Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.</div>
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex items-center py-4 px-2 border-t border-surface flex-wrap">
|
||||
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Title</div>
|
||||
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1">Heat</div>
|
||||
<div class="w-6/12 md:w-2/12 flex justify-end">
|
||||
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-center py-4 px-2 border-t border-surface flex-wrap">
|
||||
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Genre</div>
|
||||
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1">
|
||||
<Chip label="Crime" class="mr-2"></Chip>
|
||||
<Chip label="Drama" class="mr-2"></Chip>
|
||||
<Chip label="Thriller"></Chip>
|
||||
</div>
|
||||
<div class="w-6/12 md:w-2/12 flex justify-end">
|
||||
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-center py-4 px-2 border-t border-surface flex-wrap">
|
||||
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Director</div>
|
||||
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1">Michael Mann</div>
|
||||
<div class="w-6/12 md:w-2/12 flex justify-end">
|
||||
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-center py-4 px-2 border-t border-surface flex-wrap">
|
||||
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Actors</div>
|
||||
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1">Robert De Niro, Al Pacino</div>
|
||||
<div class="w-6/12 md:w-2/12 flex justify-end">
|
||||
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-center py-4 px-2 border-t border-b border-surface flex-wrap">
|
||||
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Plot</div>
|
||||
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1 leading-normal">
|
||||
A group of professional bank robbers start to feel the heat from police
|
||||
when they unknowingly leave a clue at their latest heist.</div>
|
||||
<div class="w-6/12 md:w-2/12 flex justify-end">
|
||||
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>`);
|
||||
|
||||
const block10 = ref(` <div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border">
|
||||
<div class="text-3xl font-medium text-surface-900 dark:text-surface-0 mb-4">Card Title</div>
|
||||
<div class="font-medium text-surface-500 dark:text-surface-300 mb-4">Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.</div>
|
||||
<div style="height: 150px" class="border-2 border-dashed border-surface"></div>
|
||||
</div>`);
|
||||
|
||||
const checked = ref(false);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<BlockViewer header="Hero" :code="block1" free>
|
||||
<div class="grid grid-cols-12 gap-4 grid-nogutter bg-surface-0 dark:bg-surface-950 text-surface-800 dark:text-surface-50">
|
||||
<div class="col-span-12 md:col-span-6 p-12 text-center md:text-left flex items-center">
|
||||
<section>
|
||||
<span class="block text-6xl font-bold mb-1">Create the screens your</span>
|
||||
<div class="text-6xl text-primary font-bold mb-4">your visitors deserve to see</div>
|
||||
<p class="mt-0 mb-6 text-surface-700 dark:text-surface-100 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
|
||||
<Button label="Learn More" type="button" class="mr-4 p-button-raised"></Button>
|
||||
<Button label="Live Demo" type="button" class="p-button-outlined"></Button>
|
||||
</section>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-6 overflow-hidden">
|
||||
<img src="/demo/images/blocks/hero/hero-1.png" alt="Image" class="md:ml-auto block md:h-full" style="clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%)" />
|
||||
</div>
|
||||
</div>
|
||||
</BlockViewer>
|
||||
|
||||
<BlockViewer header="Feature" :code="block2" free>
|
||||
<div class="bg-surface-0 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20 text-center">
|
||||
<div class="mb-4 font-bold text-2xl">
|
||||
<span class="text-surface-900 dark:text-surface-0">One Product, </span>
|
||||
<span class="text-blue-600">Many Solutions</span>
|
||||
</div>
|
||||
<div class="text-surface-700 dark:text-surface-100 text-sm mb-12">Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.</div>
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12 md:col-span-4 mb-6 px-8">
|
||||
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
|
||||
<i class="pi pi-desktop text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Built for Developers</div>
|
||||
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-4 mb-6 px-8">
|
||||
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
|
||||
<i class="pi pi-lock text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">End-to-End Encryption</div>
|
||||
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis.</span>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-4 mb-6 px-8">
|
||||
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
|
||||
<i class="pi pi-check-circle text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Easy to Use</div>
|
||||
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper.</span>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-4 mb-6 px-8">
|
||||
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
|
||||
<i class="pi pi-globe text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Fast & Global Support</div>
|
||||
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus.</span>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-4 mb-6 px-8">
|
||||
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
|
||||
<i class="pi pi-github text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Open Source</div>
|
||||
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. </span>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-4 md:mb-6 mb-0 px-4">
|
||||
<span class="p-4 shadow mb-4 inline-block bg-surface-0 dark:bg-surface-900" style="border-radius: 10px">
|
||||
<i class="pi pi-shield text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 mb-4 font-medium">Trusted Securitty</div>
|
||||
<span class="text-surface-700 dark:text-surface-100 text-sm leading-normal">Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BlockViewer>
|
||||
|
||||
<BlockViewer header="Pricing" :code="block3" free>
|
||||
<div class="bg-surface-50 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20">
|
||||
<div class="text-surface-900 dark:text-surface-0 font-bold text-6xl mb-6 text-center">Pricing Plans</div>
|
||||
<div class="text-surface-700 dark:text-surface-100 text-xl mb-12 text-center leading-normal">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
|
||||
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12 lg:col-span-4">
|
||||
<div class="p-4 h-full">
|
||||
<div class="shadow p-4 h-full flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Basic</div>
|
||||
<div class="text-surface-600 dark:text-surface-200">Plan description</div>
|
||||
<hr class="my-4 mx-0 border-t border-0 border-surface" />
|
||||
<div class="flex items-center">
|
||||
<span class="font-bold text-2xl text-surface-900 dark:text-surface-0">$9</span>
|
||||
<span class="ml-2 font-medium text-surface-600 dark:text-surface-200">per month</span>
|
||||
</div>
|
||||
<hr class="my-4 mx-0 border-t border-0 border-surface" />
|
||||
<ul class="list-none p-0 m-0 grow">
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Arcu vitae elementum</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Dui faucibus in ornare</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Morbi tincidunt augue</span>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="mb-4 mx-0 border-t border-0 border-surface mt-auto" />
|
||||
<Button label="Buy Now" class="p-4 w-full mt-auto"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-4">
|
||||
<div class="p-4 h-full">
|
||||
<div class="shadow p-4 h-full flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Premium</div>
|
||||
<div class="text-surface-600 dark:text-surface-200">Plan description</div>
|
||||
<hr class="my-4 mx-0 border-t border-0 border-surface" />
|
||||
<div class="flex items-center">
|
||||
<span class="font-bold text-2xl text-surface-900 dark:text-surface-0">$29</span>
|
||||
<span class="ml-2 font-medium text-surface-600 dark:text-surface-200">per month</span>
|
||||
</div>
|
||||
<hr class="my-4 mx-0 border-t border-0 border-surface" />
|
||||
<ul class="list-none p-0 m-0 grow">
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Arcu vitae elementum</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Dui faucibus in ornare</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Morbi tincidunt augue</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Duis ultricies lacus sed</span>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="mb-4 mx-0 border-t border-0 border-surface" />
|
||||
<Button label="Buy Now" class="p-4 w-full"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-4">
|
||||
<div class="p-4 h-full">
|
||||
<div class="shadow p-4 flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Enterprise</div>
|
||||
<div class="text-surface-600 dark:text-surface-200">Plan description</div>
|
||||
<hr class="my-4 mx-0 border-t border-0 border-surface" />
|
||||
<div class="flex items-center">
|
||||
<span class="font-bold text-2xl text-surface-900 dark:text-surface-0">$49</span>
|
||||
<span class="ml-2 font-medium text-surface-600 dark:text-surface-200">per month</span>
|
||||
</div>
|
||||
<hr class="my-4 mx-0 border-t border-0 border-surface" />
|
||||
<ul class="list-none p-0 m-0 grow">
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Arcu vitae elementum</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Dui faucibus in ornare</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Morbi tincidunt augue</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Duis ultricies lacus sed</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Imperdiet proin</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Nisi scelerisque</span>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="mb-4 mx-0 border-t border-0 border-surface" />
|
||||
<Button label="Buy Now" class="p-4 w-full p-button-outlined"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BlockViewer>
|
||||
|
||||
<BlockViewer header="Call to Action" :code="block4" free>
|
||||
<div class="bg-surface-0 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20">
|
||||
<div class="text-surface-700 dark:text-surface-100 text-center">
|
||||
<div class="text-blue-600 font-bold mb-4"><i class="pi pi-discord"></i> POWERED BY DISCORD</div>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-bold text-5xl mb-4">Join Our Design Community</div>
|
||||
<div class="text-surface-700 dark:text-surface-100 text-2xl mb-8">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
|
||||
<Button label="Join Now" icon="pi pi-discord" class="font-bold px-8 py-4 p-button-raised p-button-rounded whitespace-nowrap"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</BlockViewer>
|
||||
|
||||
<BlockViewer header="Banner" :code="block5" containerClass="bg-surface-0 dark:bg-surface-950 py-20" free>
|
||||
<div class="bg-slate-900 text-gray-100 p-4 flex justify-between lg:justify-center items-center flex-wrap">
|
||||
<div class="font-bold mr-20">🔥 Hot Deals!</div>
|
||||
<div class="items-center hidden lg:flex">
|
||||
<span class="leading-normal">Libero voluptatum atque exercitationem praesentium provident odit.</span>
|
||||
</div>
|
||||
<a class="flex items-center ml-2 mr-20">
|
||||
<a class="text-white" href="#"><span class="underline font-bold">Learn More</span></a>
|
||||
</a>
|
||||
<a v-ripple class="flex items-center no-underline justify-center rounded-full text-gray-50 hover:bg-slate-700 cursor-pointer transition-colors duration-150 p-ripple" style="width: 2rem; height: 2rem">
|
||||
<i class="pi pi-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</BlockViewer>
|
||||
|
||||
<BlockViewer header="Page Heading" :code="block6" free>
|
||||
<div class="bg-surface-0 dark:bg-surface-950 px-6 py-8 md:px-12 lg:px-20">
|
||||
<ul class="list-none p-0 m-0 flex items-center font-medium mb-4">
|
||||
<li>
|
||||
<a class="text-surface-500 dark:text-surface-300 no-underline leading-normal cursor-pointer">Application</a>
|
||||
</li>
|
||||
<li class="px-2">
|
||||
<i class="pi pi-angle-right text-surface-500 dark:text-surface-300 leading-normal"></i>
|
||||
</li>
|
||||
<li>
|
||||
<span class="text-surface-900 dark:text-surface-0 leading-normal">Analytics</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex items-start flex-col lg:justify-between lg:flex-row">
|
||||
<div>
|
||||
<div class="font-medium text-3xl text-surface-900 dark:text-surface-0">Customers</div>
|
||||
<div class="flex items-center text-surface-700 dark:text-surface-100 flex-wrap">
|
||||
<div class="mr-8 flex items-center mt-4">
|
||||
<i class="pi pi-users mr-2"></i>
|
||||
<span>332 Active Users</span>
|
||||
</div>
|
||||
<div class="mr-8 flex items-center mt-4">
|
||||
<i class="pi pi-globe mr-2"></i>
|
||||
<span>9402 Sessions</span>
|
||||
</div>
|
||||
<div class="flex items-center mt-4">
|
||||
<i class="pi pi-clock mr-2"></i>
|
||||
<span>2.32m Avg. Duration</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 lg:mt-0">
|
||||
<Button label="Add" class="p-button-outlined mr-2" icon="pi pi-user-plus"></Button>
|
||||
<Button label="Save" icon="pi pi-check"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BlockViewer>
|
||||
|
||||
<BlockViewer header="Stats" :code="block7" free>
|
||||
<div class="bg-surface-50 dark:bg-surface-950 px-6 py-8 md:px-12 lg:px-20">
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12 md:col-span-6 lg:col-span-3">
|
||||
<div class="bg-surface-0 dark:bg-surface-900 shadow p-4 rounded-border">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Orders</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-blue-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
|
||||
<i class="pi pi-shopping-cart text-blue-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">24 new </span>
|
||||
<span class="text-surface-500 dark:text-surface-300">since last visit</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-6 lg:col-span-3">
|
||||
<div class="bg-surface-0 dark:bg-surface-900 shadow p-4 rounded-border">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Revenue</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">$2.100</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-orange-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
|
||||
<i class="pi pi-map-marker text-orange-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">%52+ </span>
|
||||
<span class="text-surface-500 dark:text-surface-300">since last week</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-6 lg:col-span-3">
|
||||
<div class="bg-surface-0 dark:bg-surface-900 shadow p-4 rounded-border">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Customers</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">28441</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-cyan-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
|
||||
<i class="pi pi-inbox text-cyan-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">520 </span>
|
||||
<span class="text-surface-500 dark:text-surface-300">newly registered</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-6 lg:col-span-3">
|
||||
<div class="bg-surface-0 dark:bg-surface-900 shadow p-4 rounded-border">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Comments</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152 Unread</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-purple-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
|
||||
<i class="pi pi-comment text-purple-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">85 </span>
|
||||
<span class="text-surface-500 dark:text-surface-300">responded</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BlockViewer>
|
||||
|
||||
<BlockViewer header="Sign-In" :code="block8" containerClass="bg-surface-50 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20 flex items-center justify-center" free>
|
||||
<div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border w-full lg:w-6/12">
|
||||
<div class="text-center mb-8">
|
||||
<img src="/demo/images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-4" />
|
||||
<div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Welcome Back</div>
|
||||
<span class="text-surface-600 dark:text-surface-200 font-medium leading-normal">Don't have an account?</span>
|
||||
<a class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Create today!</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="email1" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Email</label>
|
||||
<InputText id="email1" type="text" class="w-full mb-4" />
|
||||
|
||||
<label for="password1" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Password</label>
|
||||
<InputText id="password1" type="password" class="w-full mb-4" />
|
||||
|
||||
<div class="flex items-center justify-between mb-12">
|
||||
<div class="flex items-center">
|
||||
<Checkbox id="rememberme1" :binary="true" v-model="checked" class="mr-2"></Checkbox>
|
||||
<label for="rememberme1">Remember me</label>
|
||||
</div>
|
||||
<a class="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">Forgot password?</a>
|
||||
</div>
|
||||
|
||||
<Button label="Sign In" icon="pi pi-user" class="w-full"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</BlockViewer>
|
||||
|
||||
<BlockViewer header="Description List" :code="block9" containerClass="bg-surface-0 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20" free>
|
||||
<div class="bg-surface-0 dark:bg-surface-950">
|
||||
<div class="font-medium text-3xl text-surface-900 dark:text-surface-0 mb-4">Movie Information</div>
|
||||
<div class="text-surface-500 dark:text-surface-300 mb-8">Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.</div>
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex items-center py-4 px-2 border-t border-surface flex-wrap">
|
||||
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Title</div>
|
||||
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1">Heat</div>
|
||||
<div class="w-6/12 md:w-2/12 flex justify-end">
|
||||
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-center py-4 px-2 border-t border-surface flex-wrap">
|
||||
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Genre</div>
|
||||
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1">
|
||||
<Chip label="Crime" class="mr-2"></Chip>
|
||||
<Chip label="Drama" class="mr-2"></Chip>
|
||||
<Chip label="Thriller"></Chip>
|
||||
</div>
|
||||
<div class="w-6/12 md:w-2/12 flex justify-end">
|
||||
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-center py-4 px-2 border-t border-surface flex-wrap">
|
||||
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Director</div>
|
||||
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1">Michael Mann</div>
|
||||
<div class="w-6/12 md:w-2/12 flex justify-end">
|
||||
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-center py-4 px-2 border-t border-surface flex-wrap">
|
||||
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Actors</div>
|
||||
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1">Robert De Niro, Al Pacino</div>
|
||||
<div class="w-6/12 md:w-2/12 flex justify-end">
|
||||
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-center py-4 px-2 border-t border-b border-surface flex-wrap">
|
||||
<div class="text-surface-500 dark:text-surface-300 w-6/12 md:w-2/12 font-medium">Plot</div>
|
||||
<div class="text-surface-900 dark:text-surface-0 w-full md:w-8/12 md:order-none order-1 leading-normal">
|
||||
A group of professional bank robbers start to feel the heat from police when they unknowingly leave a clue at their latest heist.
|
||||
</div>
|
||||
<div class="w-6/12 md:w-2/12 flex justify-end">
|
||||
<Button label="Edit" icon="pi pi-pencil" class="p-button-text"></Button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</BlockViewer>
|
||||
|
||||
<BlockViewer header="Card" :code="block10" containerClass="px-6 py-20 md:px-12 lg:px-20" free>
|
||||
<div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border">
|
||||
<div class="text-3xl font-medium text-surface-900 dark:text-surface-0 mb-4">Card Title</div>
|
||||
<div class="font-medium text-surface-500 dark:text-surface-300 mb-4">Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.</div>
|
||||
<div style="height: 150px" class="border-2 border-dashed border-surface"></div>
|
||||
</div>
|
||||
</BlockViewer>
|
||||
</div>
|
||||
</template>
|
||||
65
src/views/utilities/Documentation.vue
Normal file
65
src/views/utilities/Documentation.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<h3>Documentation</h3>
|
||||
<p class="bg-primary text-primary-contrast rounded-border p-4">
|
||||
This page covers the Vite version, for Nuxt 3 visit the <a href="https://github.com/primefaces/sakai-nuxt" class="font-bold bg-primary text-primary-contrast hover:underline">sakai-nuxt</a> repository instead.
|
||||
</p>
|
||||
<h5>Getting Started</h5>
|
||||
<p>
|
||||
Sakai is an application template for Vue based on the <a href="https://github.com/vuejs/create-vue" class="font-medium text-primary hover:underline">create-vue</a>, the recommended way to start a <strong>Vite-powered</strong> Vue
|
||||
projects. To get started, clone the <a href="https://github.com/primefaces/sakai-vue" class="font-medium text-primary hover:underline">repository</a> from GitHub and install the dependencies with npm or yarn.
|
||||
</p>
|
||||
<pre class="app-code"><code> npm install </code></pre>
|
||||
|
||||
<p>or</p>
|
||||
|
||||
<pre class="app-code"><code> yarn </code></pre>
|
||||
|
||||
<p>Next step is running the application using the serve script and navigate to <i>http://localhost:5173/</i> to view the application. That is it, you may now start with the development of your application using the Sakai template.</p>
|
||||
|
||||
<pre class="app-code"><code> npm run dev </code></pre>
|
||||
|
||||
<h5>Structure</h5>
|
||||
<p>Sakai consists of a couple folders, demos and layout have been separated so that you can easily remove what is not necessary for your application.</p>
|
||||
<ul class="leading-normal">
|
||||
<li><span class="text-primary font-medium">src/layout</span>: Main layout files, needs to be present</li>
|
||||
<li><span class="text-primary font-medium">src/views</span>: Demo pages</li>
|
||||
<li><span class="text-primary font-medium">public/demo</span>: Assets used in demos</li>
|
||||
<li><span class="text-primary font-medium">public/layout</span>: Assets used in layout</li>
|
||||
<li><span class="text-primary font-medium">src/assets/demo</span>: Styles used in demos</li>
|
||||
<li><span class="text-primary font-medium">src/assets/layout</span>: SCSS files of the main layout</li>
|
||||
</ul>
|
||||
|
||||
<h5>Menu</h5>
|
||||
<p>Main menu is defined at <span class="text-primary font-medium">src/layout/AppMenu.vue</span> file.</p>
|
||||
|
||||
<h5>Integration with Existing Vite Applications</h5>
|
||||
<p>Only the folders that are related to the layout needs to move in to your project. We've created a short tutorial with details.</p>
|
||||
|
||||
<div class="video-container">
|
||||
<iframe className="video" width="560" height="315" src="https://www.youtube.com/embed/AHeSjJFR3ZE" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
<h5>PrimeVue Theme</h5>
|
||||
<p>Sakai theming is based on the PrimeVue theme being used. Default theme is <b>lara-light-indigo</b>.</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media screen and (max-width: 991px) {
|
||||
.video-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 56.25%;
|
||||
|
||||
iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
91
src/views/utilities/Icons.vue
Normal file
91
src/views/utilities/Icons.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
|
||||
const icons = ref(null);
|
||||
const filter = ref(null);
|
||||
|
||||
const filteredIcons = computed(() => {
|
||||
if (filter.value) return icons.value.filter((icon) => icon.properties.name.indexOf(filter.value.toLowerCase()) > -1);
|
||||
else return icons.value;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
fetch('/demo/data/icons.json', { headers: { 'Cache-Control': 'no-cache' } })
|
||||
.then((res) => res.json())
|
||||
.then((d) => {
|
||||
let data = d.icons.filter((value) => {
|
||||
return value.icon.tags.indexOf('deprecate') === -1;
|
||||
});
|
||||
data.sort((icon1, icon2) => {
|
||||
if (icon1.properties.name < icon2.properties.name) return -1;
|
||||
else if (icon1.properties.name > icon2.properties.name) return 1;
|
||||
else return 0;
|
||||
});
|
||||
|
||||
icons.value = data;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card">
|
||||
<h2>Icons</h2>
|
||||
<p>
|
||||
PrimeVue components internally use <a href="https://github.com/primefaces/primeicons" class="font-medium text-primary hover:underline">PrimeIcons</a> library, the official icons suite from
|
||||
<a href="https://www.primetek.com.tr" class="font-medium text-primary hover:underline">PrimeTek</a>.
|
||||
</p>
|
||||
|
||||
<h4>Download</h4>
|
||||
<p>PrimeIcons is available at npm, run the following command to download it to your project.</p>
|
||||
|
||||
<pre class="app-code"><code>npm install primeicons --save</code></pre>
|
||||
|
||||
<h4>Getting Started</h4>
|
||||
<p>PrimeIcons use the <strong>pi pi-{icon}</strong> syntax such as <strong>pi pi-check</strong>. A standalone icon can be displayed using an element like <i>i</i> or <i>span</i></p>
|
||||
|
||||
<pre class="app-code"><code><i class="pi pi-check"></i>
|
||||
<i class="pi pi-times"></i></code></pre>
|
||||
|
||||
<i class="pi pi-check" style="margin-right: 0.5rem"></i>
|
||||
<i class="pi pi-times"></i>
|
||||
|
||||
<h4>Size</h4>
|
||||
<p>Size of the icons can easily be changed using font-size property.</p>
|
||||
|
||||
<pre class="app-code"><code><i class="pi pi-check"></i></code></pre>
|
||||
|
||||
<i class="pi pi-check"></i>
|
||||
|
||||
<pre class="app-code"><code><i class="pi pi-check" style="font-size: 2rem"></i></code></pre>
|
||||
|
||||
<i class="pi pi-check" style="font-size: 2rem"></i>
|
||||
|
||||
<h4>Spinning Animation</h4>
|
||||
<p>Special pi-spin class applies continuous rotation to an icon.</p>
|
||||
<pre class="app-code"><code><i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i></code></pre>
|
||||
|
||||
<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
|
||||
|
||||
<h4>List of Icons</h4>
|
||||
<p>
|
||||
Here is the current list of PrimeIcons, more icons are added periodically. You may also <a href="https://github.com/primefaces/primeicons/issues" class="font-medium text-primary hover:underline">request new icons</a> at the issue tracker.
|
||||
</p>
|
||||
|
||||
<InputText v-model="filter" class="w-full p-4 mt-4 mb-8" placeholder="Search an icon" />
|
||||
|
||||
<div class="grid grid-cols-12 gap-4 icons-list text-center">
|
||||
<div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2 pb-8" v-for="icon of filteredIcons" :key="icon.properties.name">
|
||||
<i :class="'text-2xl mb-2 pi pi-' + icon.properties.name"></i>
|
||||
<div>pi-{{ icon.properties.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icons-list {
|
||||
i {
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user