From 4c1770dd8c47039da1687b5d57ae316df81918ca Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 4 Mar 2024 11:33:42 +0300
Subject: [PATCH] Demo fixes

---
 src/main.js                      |  12 +++
 src/views/pages/Crud.vue         |  12 +--
 src/views/uikit/Button.vue       | 144 +++++++++++++++++--------------
 src/views/uikit/FloatLabel.vue   |  12 +--
 src/views/uikit/Input.vue        |  61 +++++++------
 src/views/uikit/InvalidState.vue |  20 ++---
 src/views/uikit/List.vue         | 105 +++++++++++++++-------
 src/views/uikit/Panels.vue       |   4 +-
 src/views/uikit/Table.vue        |  12 +--
 9 files changed, 223 insertions(+), 159 deletions(-)

diff --git a/src/main.js b/src/main.js
index 714b14d..41151a5 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,6 +12,7 @@ import Badge from 'primevue/badge';
 import BadgeDirective from 'primevue/badgedirective';
 import BlockUI from 'primevue/blockui';
 import Button from 'primevue/button';
+import ButtonGroup from 'primevue/buttongroup';
 import Breadcrumb from 'primevue/breadcrumb';
 import Calendar from 'primevue/calendar';
 import Card from 'primevue/card';
@@ -40,10 +41,15 @@ import Dropdown from 'primevue/dropdown';
 import DynamicDialog from 'primevue/dynamicdialog';
 import Fieldset from 'primevue/fieldset';
 import FileUpload from 'primevue/fileupload';
+import FloatLabel from 'primevue/floatlabel';
 import Galleria from 'primevue/galleria';
+import IconField from 'primevue/iconfield';
 import Image from 'primevue/image';
 import InlineMessage from 'primevue/inlinemessage';
 import Inplace from 'primevue/inplace';
+import InputGroup from 'primevue/inputgroup';
+import InputGroupAddon from 'primevue/inputgroupaddon';
+import InputIcon from 'primevue/inputicon';
 import InputSwitch from 'primevue/inputswitch';
 import InputText from 'primevue/inputtext';
 import InputMask from 'primevue/inputmask';
@@ -128,6 +134,7 @@ app.component('Badge', Badge);
 app.component('BlockUI', BlockUI);
 app.component('Breadcrumb', Breadcrumb);
 app.component('Button', Button);
+app.component('ButtonGroup', ButtonGroup);
 app.component('Calendar', Calendar);
 app.component('Card', Card);
 app.component('Chart', Chart);
@@ -153,10 +160,15 @@ app.component('Dropdown', Dropdown);
 app.component('DynamicDialog', DynamicDialog);
 app.component('Fieldset', Fieldset);
 app.component('FileUpload', FileUpload);
+app.component('FloatLabel', FloatLabel);
 app.component('Galleria', Galleria);
+app.component('IconField', IconField);
 app.component('Image', Image);
 app.component('InlineMessage', InlineMessage);
 app.component('Inplace', Inplace);
+app.component('InputGroup', InputGroup);
+app.component('InputGroupAddon', InputGroupAddon);
+app.component('InputIcon', InputIcon);
 app.component('InputMask', InputMask);
 app.component('InputNumber', InputNumber);
 app.component('InputSwitch', InputSwitch);
diff --git a/src/views/pages/Crud.vue b/src/views/pages/Crud.vue
index 886a4a2..8e332b9 100644
--- a/src/views/pages/Crud.vue
+++ b/src/views/pages/Crud.vue
@@ -158,10 +158,12 @@ const initFilters = () => {
                     <template #header>
                         <div class="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
                             <h5 class="m-0">Manage Products</h5>
-                            <span class="block mt-2 md:mt-0 p-input-icon-left">
-                                <i class="pi pi-search" />
+                            <IconField iconPosition="left">
+                                <InputIcon>
+                                    <i class="pi pi-search" />
+                                </InputIcon>
                                 <InputText v-model="filters['global'].value" placeholder="Search..." />
-                            </span>
+                            </IconField>
                         </div>
                     </template>
 
@@ -210,8 +212,8 @@ const initFilters = () => {
                     </Column>
                     <Column headerStyle="min-width:10rem;">
                         <template #body="slotProps">
-                            <Button icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" @click="editProduct(slotProps.data)" />
-                            <Button icon="pi pi-trash" class="p-button-rounded p-button-warning mt-2" @click="confirmDeleteProduct(slotProps.data)" />
+                            <Button icon="pi pi-pencil" rounded severity="success" class="mr-2" @click="editProduct(slotProps.data)" />
+                            <Button icon="pi pi-trash" rounded severity="warning" class="mt-2" @click="confirmDeleteProduct(slotProps.data)" />
                         </template>
                     </Column>
                 </DataTable>
diff --git a/src/views/uikit/Button.vue b/src/views/uikit/Button.vue
index e92572b..88b08ef 100644
--- a/src/views/uikit/Button.vue
+++ b/src/views/uikit/Button.vue
@@ -39,53 +39,59 @@ const load = (index) => {
 
             <div class="card">
                 <h5>Severities</h5>
-                <Button label="Primary" class="mr-2 mb-2" />
-                <Button label="Secondary" class="p-button-secondary mr-2 mb-2" />
-                <Button label="Success" class="p-button-success mr-2 mb-2" />
-                <Button label="Info" class="p-button-info mr-2 mb-2" />
-                <Button label="Warning" class="p-button-warning mr-2 mb-2" />
-                <Button label="Danger" class="p-button-danger mr-2 mb-2" />
+                <Button label="Primary" class="mb-2 mr-2" />
+                <Button label="Secondary" severity="secondary" class="mb-2 mr-2" />
+                <Button label="Success" severity="success" class="mb-2 mr-2" />
+                <Button label="Info" severity="info" class="mb-2 mr-2" />
+                <Button label="Warning" severity="warning" class="mb-2 mr-2" />
+                <Button label="Help" severity="help" class="mb-2 mr-2" />
+                <Button label="Danger" severity="danger" class="mb-2 mr-2" />
+                <Button label="Contrast" severity="contrast" class="mb-2 mr-2" />
             </div>
 
             <div class="card">
                 <h5>Text</h5>
-                <Button label="Primary" class="p-button-text mr-2 mb-2" />
-                <Button label="Secondary" class="p-button-secondary p-button-text mr-2 mb-2" />
-                <Button label="Success" class="p-button-success p-button-text mr-2 mb-2" />
-                <Button label="Info" class="p-button-info p-button-text mr-2 mb-2" />
-                <Button label="Warning" class="p-button-warning p-button-text mr-2 mb-2" />
-                <Button label="Help" class="p-button-help p-button-text mr-2 mb-2" />
-                <Button label="Danger" class="p-button-danger p-button-text mr-2 mb-2" />
-                <Button label="Plain" class="p-button-plain p-button-text mr-2 mb-2" />
+                <Button label="Primary" text class="mb-2 mr-2" />
+                <Button label="Secondary" severity="secondary" text class="mb-2 mr-2" />
+                <Button label="Success" severity="success" text class="mb-2 mr-2" />
+                <Button label="Info" severity="info" text class="mb-2 mr-2" />
+                <Button label="Warning" severity="warning" text class="mb-2 mr-2" />
+                <Button label="Help" severity="help" text class="mb-2 mr-2" />
+                <Button label="Danger" severity="danger" text class="mb-2 mr-2" />
+                <Button label="Plain" plain text class="mb-2 mr-2" />
             </div>
 
             <div class="card">
                 <h5>Outlined</h5>
-                <Button label="Primary" class="p-button-outlined mr-2 mb-2" />
-                <Button label="Secondary" class="p-button-outlined p-button-secondary mr-2 mb-2" />
-                <Button label="Success" class="p-button-outlined p-button-success mr-2 mb-2" />
-                <Button label="Info" class="p-button-outlined p-button-info mr-2 mb-2" />
-                <Button label="Warning" class="p-button-outlined p-button-warning mr-2 mb-2" />
-                <Button label="Help" class="p-button-outlined p-button-help mr-2 mb-2" />
-                <Button label="Danger" class="p-button-outlined p-button-danger mr-2 mb-2" />
+                <Button label="Primary" outlined class="mb-2 mr-2" />
+                <Button label="Secondary" severity="secondary" outlined class="mb-2 mr-2" />
+                <Button label="Success" severity="success" outlined class="mb-2 mr-2" />
+                <Button label="Info" severity="info" outlined class="mb-2 mr-2" />
+                <Button label="Warning" severity="warning" outlined class="mb-2 mr-2" />
+                <Button label="Help" severity="help" outlined class="mb-2 mr-2" />
+                <Button label="Danger" severity="danger" outlined class="mb-2 mr-2" />
+                <Button label="Contrast" severity="contrast" outlined class="mb-2 mr-2" />
             </div>
 
             <div class="card">
                 <h5>Button Group</h5>
-                <span class="p-buttonset">
+                <ButtonGroup>
                     <Button label="Save" icon="pi pi-check" />
                     <Button label="Delete" icon="pi pi-trash" />
                     <Button label="Cancel" icon="pi pi-times" />
-                </span>
+                </ButtonGroup>
             </div>
 
             <div class="card">
                 <h5>SplitButton</h5>
-                <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-secondary mr-2 mb-2"></SplitButton>
-                <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-success mr-2 mb-2"></SplitButton>
-                <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-info mr-2 mb-2"></SplitButton>
-                <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning mr-2 mb-2"></SplitButton>
-                <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-danger mr-2 mb-2"></SplitButton>
+                <SplitButton label="Save" :model="items" class="mb-2 mr-2"></SplitButton>
+                <SplitButton label="Save" :model="items" severity="secondary" class="mb-2 mr-2"></SplitButton>
+                <SplitButton label="Save" :model="items" severity="success" class="mb-2 mr-2"></SplitButton>
+                <SplitButton label="Save" :model="items" severity="info" class="mb-2 mr-2"></SplitButton>
+                <SplitButton label="Save" :model="items" severity="warning" class="mb-2 mr-2"></SplitButton>
+                <SplitButton label="Save" :model="items" severity="help" class="mb-2 mr-2"></SplitButton>
+                <SplitButton label="Save" :model="items" severity="danger" class="mb-2 mr-2"></SplitButton>
+                <SplitButton label="Save" :model="items" severity="contrast" class="mb-2 mr-2"></SplitButton>
             </div>
 
             <div class="card">
@@ -93,21 +99,21 @@ const load = (index) => {
                 <div class="flex flex-wrap gap-2">
                     <Button type="button" class="google">
                         <span class="flex align-items-center px-2 bg-purple-700 text-white">
-                            <i className="pi pi-google"></i>
+                            <i class="pi pi-google"></i>
                         </span>
-                        <span className="px-3 py-2 flex align-items-center text-white">Google</span>
+                        <span class="px-3 py-2 flex align-items-center text-white">Google</span>
                     </Button>
                     <Button type="button" class="twitter">
                         <span class="flex align-items-center px-2 bg-blue-500 text-white">
-                            <i className="pi pi-twitter"></i>
+                            <i class="pi pi-twitter"></i>
                         </span>
-                        <span className="px-3 py-2 flex align-items-center text-white">Twitter</span>
+                        <span class="px-3 py-2 flex align-items-center text-white">Twitter</span>
                     </Button>
                     <Button type="button" class="discord">
                         <span class="flex align-items-center px-2 bg-bluegray-800 text-white">
-                            <i className="pi pi-discord"></i>
+                            <i class="pi pi-discord"></i>
                         </span>
-                        <span className="px-3 py-2 flex align-items-center text-white">Discord</span>
+                        <span class="px-3 py-2 flex align-items-center text-white">Discord</span>
                     </Button>
                 </div>
             </div>
@@ -123,55 +129,59 @@ const load = (index) => {
 
             <div class="card">
                 <h5>Raised</h5>
-                <Button label="Primary" class="p-button-raised mr-2 mb-2" />
-                <Button label="Secondary" class="p-button-raised p-button-secondary mr-2 mb-2" />
-                <Button label="Success" class="p-button-raised p-button-success mr-2 mb-2" />
-                <Button label="Info" class="p-button-raised p-button-info mr-2 mb-2" />
-                <Button label="Warning" class="p-button-raised p-button-warning mr-2 mb-2" />
-                <Button label="Danger" class="p-button-raised p-button-danger mr-2 mb-2" />
+                <Button label="Primary" raised class="mb-2 mr-2" />
+                <Button label="Secondary" severity="secondary" raised class="mb-2 mr-2" />
+                <Button label="Success" severity="success" raised class="mb-2 mr-2" />
+                <Button label="Info" severity="info" raised class="mb-2 mr-2" />
+                <Button label="Warning" severity="warning" raised class="mb-2 mr-2" />
+                <Button label="Help" severity="help" raised class="mb-2 mr-2" />
+                <Button label="Danger" severity="danger" raised class="mb-2 mr-2" />
+                <Button label="Contrast" severity="contrast" raised class="mb-2 mr-2" />
             </div>
 
             <div class="card">
                 <h5>Rounded</h5>
-                <Button label="Primary" class="p-button-rounded mr-2 mb-2" />
-                <Button label="Secondary" class="p-button-rounded p-button-secondary mr-2 mb-2" />
-                <Button label="Success" class="p-button-rounded p-button-success mr-2 mb-2" />
-                <Button label="Info" class="p-button-rounded p-button-info mr-2 mb-2" />
-                <Button label="Warning" class="p-button-rounded p-button-warning mr-2 mb-2" />
-                <Button label="Danger" class="p-button-rounded p-button-danger mr-2 mb-2" />
+                <Button label="Primary" rounded class="mb-2 mr-2" />
+                <Button label="Secondary" severity="secondary" rounded class="mb-2 mr-2" />
+                <Button label="Success" severity="success" rounded class="mb-2 mr-2" />
+                <Button label="Info" severity="info" rounded class="mb-2 mr-2" />
+                <Button label="Warning" severity="warning" rounded class="mb-2 mr-2" />
+                <Button label="Help" severity="help" rounded class="mb-2 mr-2" />
+                <Button label="Danger" severity="danger" rounded class="mb-2 mr-2" />
+                <Button label="Contrast" severity="contrast" rounded class="mb-2 mr-2" />
             </div>
 
             <div class="card">
                 <h5>Rounded Icons</h5>
-                <Button icon="pi pi-star-fill" class="p-button-rounded mr-2 mb-2" />
-                <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary mr-2 mb-2" />
-                <Button icon="pi pi-check" class="p-button-rounded p-button-success mr-2 mb-2" />
-                <Button icon="pi pi-search" class="p-button-rounded p-button-info mr-2 mb-2" />
-                <Button icon="pi pi-user" class="p-button-rounded p-button-warning mr-2 mb-2" />
-                <Button icon="pi pi-sign-out" class="p-button-rounded p-button-danger mr-2 mb-2" />
+                <Button icon="pi pi-check" rounded class="mb-2 mr-2" />
+                <Button icon="pi pi-bookmark" severity="secondary" rounded class="mb-2 mr-2" />
+                <Button icon="pi pi-search" severity="success" rounded class="mb-2 mr-2" />
+                <Button icon="pi pi-user" severity="info" rounded class="mb-2 mr-2" />
+                <Button icon="pi pi-bell" severity="warning" rounded class="mb-2 mr-2" />
+                <Button icon="pi pi-heart" severity="help" rounded class="mb-2 mr-2" />
+                <Button icon="pi pi-times" severity="danger" rounded class="mb-2 mr-2" />
             </div>
 
             <div class="card">
                 <h5>Rounded Text</h5>
-                <Button icon="pi pi-check" class="p-button-rounded p-button-text mr-2 mb-2" />
-                <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text mr-2 mb-2" />
-                <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text mr-2 mb-2" />
-                <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text mr-2 mb-2" />
-                <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text mr-2 mb-2" />
-                <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text mr-2 mb-2" />
-                <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text mr-2 mb-2" />
-                <Button icon="pi pi-filter" class="p-button-rounded p-button-plain p-button-text mr-2 mb-2" />
+                <Button icon="pi pi-check" text raised rounded class="mb-2 mr-2" />
+                <Button icon="pi pi-bookmark" severity="secondary" text raised rounded class="mb-2 mr-2" />
+                <Button icon="pi pi-search" severity="success" text raised rounded class="mb-2 mr-2" />
+                <Button icon="pi pi-user" severity="info" text raised rounded class="mb-2 mr-2" />
+                <Button icon="pi pi-bell" severity="warning" text raised rounded class="mb-2 mr-2" />
+                <Button icon="pi pi-heart" severity="help" text raised rounded class="mb-2 mr-2" />
+                <Button icon="pi pi-times" severity="danger" text raised rounded class="mb-2 mr-2" />
             </div>
 
             <div class="card">
                 <h5>Rounded Outlined</h5>
-                <Button icon="pi pi-check" class="p-button-rounded p-button-outlined mr-2 mb-2" />
-                <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined mr-2 mb-2" />
-                <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined mr-2 mb-2" />
-                <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined mr-2 mb-2" />
-                <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined mr-2 mb-2" />
-                <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined mr-2 mb-2" />
-                <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined mr-2 mb-2" />
+                <Button icon="pi pi-check" rounded outlined class="mb-2 mr-2" />
+                <Button icon="pi pi-bookmark" severity="secondary" rounded outlined class="mb-2 mr-2" />
+                <Button icon="pi pi-search" severity="success" rounded outlined class="mb-2 mr-2" />
+                <Button icon="pi pi-user" severity="info" rounded outlined class="mb-2 mr-2" />
+                <Button icon="pi pi-bell" severity="warning" rounded outlined class="mb-2 mr-2" />
+                <Button icon="pi pi-heart" severity="help" rounded outlined class="mb-2 mr-2" />
+                <Button icon="pi pi-times" severity="danger" rounded outlined class="mb-2 mr-2" />
             </div>
 
             <div class="card">
diff --git a/src/views/uikit/FloatLabel.vue b/src/views/uikit/FloatLabel.vue
index c0a6655..a4cfef5 100644
--- a/src/views/uikit/FloatLabel.vue
+++ b/src/views/uikit/FloatLabel.vue
@@ -82,15 +82,15 @@ const searchCountry = (event) => {
                 </span>
             </div>
             <div class="field col-12 md:col-4">
-                <div class="p-inputgroup">
-                    <span class="p-inputgroup-addon">
+                <InputGroup>
+                    <InputGroupAddon>
                         <i class="pi pi-user"></i>
-                    </span>
-                    <span class="p-float-label">
+                    </InputGroupAddon>
+                    <FloatLabel>
                         <InputText type="text" id="inputgroup" v-model="value7" />
                         <label for="inputgroup">InputGroup</label>
-                    </span>
-                </div>
+                    </FloatLabel>
+                </InputGroup>
             </div>
             <div class="field col-12 md:col-4">
                 <span class="p-float-label">
diff --git a/src/views/uikit/Input.vue b/src/views/uikit/Input.vue
index 94004ec..56eae3c 100644
--- a/src/views/uikit/Input.vue
+++ b/src/views/uikit/Input.vue
@@ -94,24 +94,17 @@ const searchCountry = (event) => {
 
                 <h5>Icons</h5>
                 <div class="grid formgrid">
-                    <div class="col-12 mb-2 lg:col-4 lg:mb-0">
-                        <span class="p-input-icon-left">
-                            <i class="pi pi-user" />
+                    <div class="col-12 mb-2 lg:col-6 lg:mb-0">
+                        <IconField>
+                            <InputIcon class="pi pi-user" />
                             <InputText type="text" placeholder="Username" />
-                        </span>
+                        </IconField>
                     </div>
-                    <div class="col-12 mb-2 lg:col-4 lg:mb-0">
-                        <span class="p-input-icon-right">
+                    <div class="col-12 mb-2 lg:col-6 lg:mb-0">
+                        <IconField iconPosition="left">
                             <InputText type="text" placeholder="Search" />
-                            <i class="pi pi-search" />
-                        </span>
-                    </div>
-                    <div class="col-12 mb-2 lg:col-4 lg:mb-0">
-                        <span class="p-input-icon-left p-input-icon-right">
-                            <i class="pi pi-user" />
-                            <InputText type="text" placeholder="Search" />
-                            <i class="pi pi-search" />
-                        </span>
+                            <InputIcon class="pi pi-search" />
+                        </IconField>
                     </div>
                 </div>
 
@@ -257,38 +250,42 @@ const searchCountry = (event) => {
                 <h5>Input Groups</h5>
                 <div class="grid p-fluid">
                     <div class="col-12 md:col-6">
-                        <div class="p-inputgroup">
-                            <span class="p-inputgroup-addon">
+                        <InputGroup>
+                            <InputGroupAddon>
                                 <i class="pi pi-user"></i>
-                            </span>
+                            </InputGroupAddon>
                             <InputText placeholder="Username" />
-                        </div>
+                        </InputGroup>
                     </div>
 
                     <div class="col-12 md:col-6">
-                        <div class="p-inputgroup">
-                            <span class="p-inputgroup-addon"><i class="pi pi-shopping-cart"></i></span>
-                            <span class="p-inputgroup-addon"><i class="pi pi-globe"></i></span>
-                            <InputText placeholder="Price" />
-                            <span class="p-inputgroup-addon">$</span>
-                            <span class="p-inputgroup-addon">.00</span>
-                        </div>
+                        <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="col-12 md:col-6">
-                        <div class="p-inputgroup">
+                        <InputGroup>
                             <Button label="Search" />
                             <InputText placeholder="Keyword" />
-                        </div>
+                        </InputGroup>
                     </div>
 
                     <div class="col-12 md:col-6">
-                        <div class="p-inputgroup">
-                            <span class="p-inputgroup-addon p-inputgroup-addon-checkbox">
+                        <InputGroup>
+                            <InputGroupAddon>
                                 <Checkbox v-model="inputGroupValue" :binary="true" />
-                            </span>
+                            </InputGroupAddon>
                             <InputText placeholder="Confirm" />
-                        </div>
+                        </InputGroup>
                     </div>
                 </div>
             </div>
diff --git a/src/views/uikit/InvalidState.vue b/src/views/uikit/InvalidState.vue
index 7a3da45..456b41e 100644
--- a/src/views/uikit/InvalidState.vue
+++ b/src/views/uikit/InvalidState.vue
@@ -51,46 +51,46 @@ const searchCountry = (event) => {
                     <div class="col-12 md:col-6">
                         <div class="field">
                             <label for="inputtext">InputText</label>
-                            <InputText id="inputtext" type="text" v-model="value1" class="p-invalid" />
+                            <InputText id="inputtext" type="text" v-model="value1" invalid />
                         </div>
                         <div class="field">
                             <label for="autocomplete">AutoComplete</label>
-                            <AutoComplete id="autocomplete" v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" class="p-invalid" />
+                            <AutoComplete id="autocomplete" v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" invalid />
                         </div>
                         <div class="field">
                             <label for="calendar">Calendar</label>
-                            <Calendar id="calendar" v-model="value3" class="p-invalid" :showIcon="true" />
+                            <Calendar id="calendar" v-model="value3" invalid :showIcon="true" />
                         </div>
                         <div class="field">
                             <label for="chips">Chips</label>
-                            <Chips id="chips" v-model="value4" class="p-invalid" />
+                            <Chips id="chips" v-model="value4" invalid />
                         </div>
                         <div class="field">
                             <label for="password">Password</label>
-                            <Password id="password" v-model="value10" class="p-invalid" />
+                            <Password id="password" v-model="value10" invalid />
                         </div>
                     </div>
 
                     <div class="col-12 md:col-6">
                         <div class="field">
                             <label for="inputmask">InputMask</label>
-                            <InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" class="p-invalid" />
+                            <InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" invalid />
                         </div>
                         <div class="field">
                             <label for="inputnumber">InputNumber</label>
-                            <InputNumber id="inputnumber" v-model="value6" class="p-invalid" />
+                            <InputNumber id="inputnumber" v-model="value6" invalid />
                         </div>
                         <div class="field">
                             <label for="dropdown">Dropdown</label>
-                            <Dropdown id="dropdown" v-model="value7" :options="cities" optionLabel="name" class="p-invalid" />
+                            <Dropdown id="dropdown" v-model="value7" :options="cities" optionLabel="name" invalid />
                         </div>
                         <div class="field">
                             <label for="multiselect">MultiSelect</label>
-                            <MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" class="p-invalid" />
+                            <MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" invalid />
                         </div>
                         <div class="field">
                             <label for="textarea">Textarea</label>
-                            <Textarea id="textarea" v-model="value9" rows="3" class="p-invalid" />
+                            <Textarea id="textarea" v-model="value9" rows="3" invalid />
                         </div>
                     </div>
                 </div>
diff --git a/src/views/uikit/List.vue b/src/views/uikit/List.vue
index 9efacda..42fd7bc 100644
--- a/src/views/uikit/List.vue
+++ b/src/views/uikit/List.vue
@@ -55,6 +55,22 @@ const onSortChange = (event) => {
         sortKey.value = sortValue;
     }
 };
+
+const getSeverity = (product) => {
+    switch (product.inventoryStatus) {
+        case 'INSTOCK':
+            return 'success';
+
+        case 'LOWSTOCK':
+            return 'warning';
+
+        case 'OUTOFSTOCK':
+            return 'danger';
+
+        default:
+            return null;
+    }
+};
 </script>
 
 <template>
@@ -73,47 +89,72 @@ const onSortChange = (event) => {
                             </div>
                         </div>
                     </template>
+
                     <template #list="slotProps">
-                        <div class="col-12">
-                            <div class="flex flex-column md:flex-row align-items-center p-3 w-full">
-                                <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="my-4 md:my-0 w-9 md:w-10rem shadow-2 mr-5" />
-                                <div class="flex-1 text-center md:text-left">
-                                    <div class="font-bold text-2xl">{{ slotProps.data.name }}</div>
-                                    <div class="mb-3">{{ slotProps.data.description }}</div>
-                                    <Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" class="mb-2"></Rating>
-                                    <div class="flex align-items-center">
-                                        <i class="pi pi-tag mr-2"></i>
-                                        <span class="font-semibold">{{ slotProps.data.category }}</span>
+                        <div class="grid grid-nogutter">
+                            <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
+                                <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
+                                    <div class="md:w-10rem relative">
+                                        <img class="block xl:block mx-auto border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
+                                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
+                                    </div>
+                                    <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
+                                        <div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
+                                            <div>
+                                                <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
+                                                <div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
+                                            </div>
+                                            <div class="surface-100 p-1" style="border-radius: 30px">
+                                                <div class="surface-0 flex align-items-center gap-2 justify-content-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-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-column md:align-items-end gap-5">
+                                            <span class="text-xl font-semibold text-900">${{ 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 white-space-nowrap"></Button>
+                                            </div>
+                                        </div>
                                     </div>
-                                </div>
-                                <div class="flex flex-row md:flex-column justify-content-between w-full md:w-auto align-items-center md:align-items-end mt-5 md:mt-0">
-                                    <span class="text-2xl font-semibold mb-2 align-self-center md:align-self-end">${{ slotProps.data.price }}</span>
-                                    <Button icon="pi pi-shopping-cart" label="Add to Cart" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'" class="mb-2"></Button>
-                                    <span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()">{{ slotProps.data.inventoryStatus }}</span>
                                 </div>
                             </div>
                         </div>
                     </template>
 
                     <template #grid="slotProps">
-                        <div class="col-12 md:col-4">
-                            <div class="card m-3 border-1 surface-border">
-                                <div class="flex align-items-center justify-content-between">
-                                    <div class="flex align-items-center">
-                                        <i class="pi pi-tag mr-2"></i>
-                                        <span class="font-semibold">{{ slotProps.data.category }}</span>
+                        <div class="grid grid-nogutter">
+                            <div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 md:col-4 p-2">
+                                <div class="p-4 border-1 surface-border surface-card border-round flex flex-column">
+                                    <div class="surface-50 flex justify-content-center border-round p-3">
+                                        <div class="relative mx-auto">
+                                            <img class="border-round 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" style="left: 4px; top: 4px"></Tag>
+                                        </div>
+                                    </div>
+                                    <div class="pt-4">
+                                        <div class="flex flex-row justify-content-between align-items-start gap-2">
+                                            <div>
+                                                <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
+                                                <div class="text-lg font-medium text-900 mt-1">{{ item.name }}</div>
+                                            </div>
+                                            <div class="surface-100 p-1" style="border-radius: 30px">
+                                                <div class="surface-0 flex align-items-center gap-2 justify-content-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-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-column gap-4 mt-4">
+                                            <span class="text-2xl font-semibold text-900">${{ item.price }}</span>
+                                            <div class="flex gap-2">
+                                                <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto white-space-nowrap"></Button>
+                                                <Button icon="pi pi-heart" outlined></Button>
+                                            </div>
+                                        </div>
                                     </div>
-                                    <span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()">{{ slotProps.data.inventoryStatus }}</span>
-                                </div>
-                                <div class="text-center">
-                                    <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-9 shadow-2 my-3 mx-0" />
-                                    <div class="text-2xl font-bold">{{ slotProps.data.name }}</div>
-                                    <div class="mb-3">{{ slotProps.data.description }}</div>
-                                    <Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false"></Rating>
-                                </div>
-                                <div class="flex align-items-center justify-content-between">
-                                    <span class="text-2xl font-semibold">${{ slotProps.data.price }}</span>
-                                    <Button icon="pi pi-shopping-cart" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
                                 </div>
                             </div>
                         </div>
diff --git a/src/views/uikit/Panels.vue b/src/views/uikit/Panels.vue
index 087dbf5..06b4156 100644
--- a/src/views/uikit/Panels.vue
+++ b/src/views/uikit/Panels.vue
@@ -197,10 +197,10 @@ const toggle = () => {
                 <h5>Splitter</h5>
 
                 <Splitter style="height: 300px" class="mb-5">
-                    <SplitterPanel :size="30" :minSize="10" style="overflow: scroll">
+                    <SplitterPanel :size="30" :minSize="10">
                         <div className="h-full flex align-items-center justify-content-center">Panel 1</div>
                     </SplitterPanel>
-                    <SplitterPanel :size="70" style="overflow: scroll">
+                    <SplitterPanel :size="70">
                         <Splitter layout="vertical">
                             <SplitterPanel :size="15">
                                 <div className="h-full flex align-items-center justify-content-center">Panel 2</div>
diff --git a/src/views/uikit/Table.vue b/src/views/uikit/Table.vue
index 7d1b9aa..197bb6a 100644
--- a/src/views/uikit/Table.vue
+++ b/src/views/uikit/Table.vue
@@ -113,11 +113,13 @@ const calculateCustomerTotal = (name) => {
                 >
                     <template #header>
                         <div class="flex justify-content-between flex-column sm:flex-row">
-                            <Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined mb-2" @click="clearFilter1()" />
-                            <span class="p-input-icon-left mb-2">
-                                <i class="pi pi-search" />
-                                <InputText v-model="filters1['global'].value" placeholder="Keyword Search" style="width: 100%" />
-                            </span>
+                            <Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter1()" />
+                            <IconField iconPosition="left">
+                                <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>