Updated demo pages

This commit is contained in:
Cagatay Civici
2024-07-30 00:13:31 +03:00
parent 20eedb4b2b
commit 72ef6a60b6
52 changed files with 514 additions and 1794 deletions
+13 -15
View File
@@ -1,6 +1,6 @@
<script setup>
import { ref, onMounted } from 'vue';
import { ProductService } from '@/service/ProductService';
import { onMounted, ref } from 'vue';
const picklistValue = ref([
[
@@ -51,9 +51,9 @@ const getSeverity = (product) => {
</script>
<template>
<div class="flex flex-col gap-6">
<div class="flex flex-col">
<div class="card">
<h5>DataView</h5>
<div class="font-semibold text-xl">DataView</div>
<DataView :value="products" :layout="layout">
<template #header>
<div class="flex justify-end">
@@ -68,7 +68,7 @@ const getSeverity = (product) => {
<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="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface': 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>
@@ -109,7 +109,7 @@ const getSeverity = (product) => {
<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 v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 lg:col-span-4 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">
@@ -153,10 +153,10 @@ const getSeverity = (product) => {
</DataView>
</div>
<div class="flex flex-col lg:flex-row gap-4">
<div class="flex flex-col lg:flex-row gap-8">
<div class="lg:w-2/3">
<div class="card">
<h5>PickList</h5>
<div class="font-semibold text-xl mb-4">PickList</div>
<PickList v-model="picklistValue" breakpoint="1400px" dataKey="id">
<template #option="{ option }">
{{ option.name }}
@@ -167,14 +167,12 @@ const getSeverity = (product) => {
<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 class="font-semibold text-xl mb-4">OrderList</div>
<OrderList v-model="orderlistValue" breakpoint="1400px" dataKey="id" pt:pcList:root="w-full">
<template #option="{ option }">
{{ option.name }}
</template>
</OrderList>
</div>
</div>
</div>