Update dashboard

src/assets/layout/_main.scss

@@ -1,7 +1,3 @@
-* {
-    box-sizing: border-box;
-}
-
 html {
     height: 100%;
     font-size: 14px;

src/assets/layout/_utils.scss

@@ -9,7 +9,7 @@
     background: var(--surface-card);
     padding: 2rem;
     margin-bottom: 2rem;
-    box-shadow: var(--card-shadow);
+    border: 1px solid var(--surface-border);
     border-radius: var(--content-border-radius);
 
     &:last-child {

src/assets/layout/variables/_common.scss

@@ -9,7 +9,6 @@
     --surface-overlay: var(--p-overlay-popover-background);
     --transition-duration: var(--p-transition-duration);
     --maskbg: var(--p-mask-background);
-    --card-shadow: var(--p-card-shadow);
     --content-border-radius: var(--p-content-border-radius);
     --layout-section-transition-duration: 0.2s;
     --element-transition-duration: var(--p-transition-duration);

src/layout/AppMenu.vue

@@ -13,8 +13,6 @@ const model = ref([
         items: [
             { label: 'Form Layout', icon: 'pi pi-fw pi-id-card', to: '/uikit/formlayout' },
             { label: 'Input', icon: 'pi pi-fw pi-check-square', to: '/uikit/input' },
-            { label: 'Float Label', icon: 'pi pi-fw pi-bookmark', to: '/uikit/floatlabel' },
-            { label: 'Invalid State', icon: 'pi pi-fw pi-exclamation-circle', to: '/uikit/invalidstate' },
             { label: 'Button', icon: 'pi pi-fw pi-mobile', to: '/uikit/button', class: 'rotated-icon' },
             { label: 'Table', icon: 'pi pi-fw pi-table', to: '/uikit/table' },
             { label: 'List', icon: 'pi pi-fw pi-list', to: '/uikit/list' },
@@ -29,13 +27,6 @@ const model = ref([
             { label: 'Misc', icon: 'pi pi-fw pi-circle', to: '/uikit/misc' }
         ]
     },
-    {
-        label: 'Prime Blocks',
-        items: [
-            { label: 'Free Blocks', icon: 'pi pi-fw pi-eye', to: '/blocks', badge: 'NEW' },
-            { label: 'All Blocks', icon: 'pi pi-fw pi-globe', url: 'https://www.primefaces.org/primeblocks-vue', target: '_blank' }
-        ]
-    },
     {
         label: 'Utilities',
         items: [
@@ -148,22 +139,11 @@ const model = ref([
                 icon: 'pi pi-fw pi-question',
                 to: '/documentation'
             },
-            {
-                label: 'Figma',
-                url: 'https://www.dropbox.com/scl/fi/bhfwymnk8wu0g5530ceas/sakai-2023.fig?rlkey=u0c8n6xgn44db9t4zkd1brr3l&dl=0',
-                icon: 'pi pi-fw pi-pencil',
-                target: '_blank'
-            },
             {
                 label: 'View Source',
                 icon: 'pi pi-fw pi-search',
                 url: 'https://github.com/primefaces/sakai-vue',
                 target: '_blank'
-            },
-            {
-                label: 'Nuxt Version',
-                url: 'https://github.com/primefaces/sakai-nuxt',
-                icon: 'pi pi-fw pi-star'
             }
         ]
     }
@@ -176,11 +156,6 @@ const model = ref([
             <app-menu-item v-if="!item.separator" :item="item" :index="i"></app-menu-item>
             <li v-if="item.separator" class="menu-separator"></li>
         </template>
-        <li>
-            <a href="https://www.primefaces.org/primeblocks-vue/#/" target="_blank">
-                <img src="/layout/images/banner-primeblocks.png" alt="Prime Blocks" class="w-full mt-4" />
-            </a>
-        </li>
     </ul>
 </template>
 

src/layout/composables/layout.js

@@ -56,5 +56,7 @@ export function useLayout() {
 
     const isDarkTheme = computed(() => layoutConfig.darkTheme);
 
-    return { layoutConfig: toRefs(layoutConfig), layoutState: toRefs(layoutState), onMenuToggle, isSidebarActive, isDarkTheme, setActiveMenuItem, toggleDarkMode, setPrimary, setSurface, setPreset };
+    const getPrimary = computed(() => layoutConfig.primary);
+
+    return { layoutConfig: toRefs(layoutConfig), layoutState: toRefs(layoutState), onMenuToggle, isSidebarActive, isDarkTheme, getPrimary, setActiveMenuItem, toggleDarkMode, setPrimary, setSurface, setPreset };
 }

src/router/index.js

@@ -1,5 +1,5 @@
-import { createRouter, createWebHistory } from 'vue-router';
 import AppLayout from '@/layout/AppLayout.vue';
+import { createRouter, createWebHistory } from 'vue-router';
 
 const router = createRouter({
     history: createWebHistory(),
@@ -23,16 +23,6 @@ const router = createRouter({
                     name: 'input',
                     component: () => import('@/views/uikit/InputDoc.vue')
                 },
-                {
-                    path: '/uikit/floatlabel',
-                    name: 'floatlabel',
-                    component: () => import('@/views/uikit/FloatLabelDoc.vue')
-                },
-                {
-                    path: '/uikit/invalidstate',
-                    name: 'invalidstate',
-                    component: () => import('@/views/uikit/InvalidStateDoc.vue')
-                },
                 {
                     path: '/uikit/button',
                     name: 'button',

src/views/Dashboard.vue

@@ -1,187 +1,178 @@
 <script setup>
-import { onMounted, reactive, ref, watch } from 'vue';
-import { ProductService } from '@/service/ProductService';
 import { useLayout } from '@/layout/composables/layout';
+import { ProductService } from '@/service/ProductService';
+import { onMounted, ref, watch } from 'vue';
 
-const { isDarkTheme } = useLayout();
+const { getPrimary, isDarkTheme } = useLayout();
 
 const products = ref(null);
-const lineData = reactive({
+const chartData = ref(null);
-    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+const chartOptions = ref(null);
-    datasets: [
+
-        {
-            label: 'First Dataset',
-            data: [65, 59, 80, 81, 56, 55, 40],
-            fill: false,
-            backgroundColor: '#2f4860',
-            borderColor: '#2f4860',
-            tension: 0.4
-        },
-        {
-            label: 'Second Dataset',
-            data: [28, 48, 40, 19, 86, 27, 90],
-            fill: false,
-            backgroundColor: '#00bb7e',
-            borderColor: '#00bb7e',
-            tension: 0.4
-        }
-    ]
-});
 const items = ref([
     { label: 'Add New', icon: 'pi pi-fw pi-plus' },
     { label: 'Remove', icon: 'pi pi-fw pi-minus' }
 ]);
-const lineOptions = ref(null);
 
 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' });
 };
-const applyLightTheme = () => {
-    lineOptions.value = {
-        plugins: {
-            legend: {
-                labels: {
-                    color: '#495057'
-                }
-            }
-        },
-        scales: {
-            x: {
-                ticks: {
-                    color: '#495057'
-                },
-                grid: {
-                    color: '#ebedef'
-                }
-            },
-            y: {
-                ticks: {
-                    color: '#495057'
-                },
-                grid: {
-                    color: '#ebedef'
-                }
-            }
-        }
-    };
-};
 
-const applyDarkTheme = () => {
+watch(isDarkTheme, () => {
-    lineOptions.value = {
+    chartData.value = setChartData();
-        plugins: {
+    chartOptions.value = setChartOptions();
-            legend: {
+});
-                labels: {
-                    color: '#ebedef'
-                }
-            }
-        },
-        scales: {
-            x: {
-                ticks: {
-                    color: '#ebedef'
-                },
-                grid: {
-                    color: 'rgba(160, 167, 181, .3)'
-                }
-            },
-            y: {
-                ticks: {
-                    color: '#ebedef'
-                },
-                grid: {
-                    color: 'rgba(160, 167, 181, .3)'
-                }
-            }
-        }
-    };
-};
 
-watch(
+watch(getPrimary, () => {
-    isDarkTheme,
+    chartData.value = setChartData();
-    (val) => {
+    chartOptions.value = setChartOptions();
-        if (val) {
+});
-            applyDarkTheme();
-        } else {
-            applyLightTheme();
-        }
-    },
-    { immediate: true }
-);
 </script>
 
 <template>
-    <div class="grid grid-cols-12 gap-4">
+    <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-surface-500 dark:text-surface-300 font-medium mb-4">Orders</span>
+                        <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-green-500 font-medium">24 new </span>
+                <span class="text-primary font-medium">24 new </span>
-                <span class="text-surface-500 dark:text-surface-300">since last visit</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-surface-500 dark:text-surface-300 font-medium mb-4">Revenue</span>
+                        <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-green-500 font-medium">%52+ </span>
+                <span class="text-primary font-medium">%52+ </span>
-                <span class="text-surface-500 dark:text-surface-300">since last week</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-surface-500 dark:text-surface-300 font-medium mb-4">Customers</span>
+                        <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-green-500 font-medium">520 </span>
+                <span class="text-primary font-medium">520 </span>
-                <span class="text-surface-500 dark:text-surface-300">newly registered</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-surface-500 dark:text-surface-300 font-medium mb-4">Comments</span>
+                        <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-green-500 font-medium">85 </span>
+                <span class="text-primary font-medium">85 </span>
-                <span class="text-surface-500 dark:text-surface-300">responded</span>
+                <span class="text-muted-color">responded</span>
             </div>
         </div>
 
         <div class="col-span-12 xl:col-span-6">
             <div class="card">
-                <h5>Recent Sales</h5>
+                <div class="font-semibold text-xl mb-4">Recent Sales</div>
                 <DataTable :value="products" :rows="5" :paginator="true" responsiveLayout="scroll">
-                    <Column style="width: 15%">
+                    <Column style="width: 15%" header="Image">
-                        <template #header> Image </template>
                         <template #body="slotProps">
                             <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" width="50" class="shadow" />
                         </template>
@@ -192,8 +183,7 @@ watch(
                             {{ formatCurrency(slotProps.data.price) }}
                         </template>
                     </Column>
-                    <Column style="width: 15%">
+                    <Column style="width: 15%" header="View">
-                        <template #header> View </template>
                         <template #body>
                             <Button icon="pi pi-search" type="button" class="p-button-text"></Button>
                         </template>
@@ -202,7 +192,7 @@ watch(
             </div>
             <div class="card">
                 <div class="flex justify-between items-center mb-8">
-                    <h5>Best Selling Products</h5>
+                    <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>
@@ -212,7 +202,7 @@ watch(
                     <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-surface-600 dark:text-surface-200">Clothing</div>
+                            <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">
@@ -224,7 +214,7 @@ watch(
                     <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-surface-600 dark:text-surface-200">Accessories</div>
+                            <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">
@@ -236,7 +226,7 @@ watch(
                     <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-surface-600 dark:text-surface-200">Accessories</div>
+                            <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">
@@ -248,19 +238,19 @@ watch(
                     <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-surface-600 dark:text-surface-200">Office</div>
+                            <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-green-500 ml-4 font-medium">%35</span>
+                            <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-surface-600 dark:text-surface-200">Accessories</div>
+                            <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">
@@ -272,7 +262,7 @@ watch(
                     <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-surface-600 dark:text-surface-200">Clothing</div>
+                            <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">
@@ -286,19 +276,19 @@ watch(
         </div>
         <div class="col-span-12 xl:col-span-6">
             <div class="card">
-                <h5>Sales Overview</h5>
+                <div class="font-semibold text-xl mb-4">Sales Overview</div>
-                <Chart type="line" :data="lineData" :options="lineOptions" />
+                <Chart type="bar" :data="chartData" :options="chartOptions" class="h-80" />
             </div>
             <div class="card">
                 <div class="flex items-center justify-between mb-6">
-                    <h5>Notifications</h5>
+                    <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-surface-600 dark:text-surface-200 font-medium mb-4">TODAY</span>
+                <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">
@@ -317,7 +307,7 @@ watch(
                     </li>
                 </ul>
 
-                <span class="block text-surface-600 dark:text-surface-200 font-medium mb-4">YESTERDAY</span>
+                <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">
@@ -339,18 +329,6 @@ watch(
                     </li>
                 </ul>
             </div>
-            <div
-                class="px-6 py-8 shadow flex flex-col md:flex-row md:items-center justify-between mb-4"
-                style="border-radius: 1rem; background: linear-gradient(0deg, rgba(0, 123, 255, 0.5), rgba(0, 123, 255, 0.5)), linear-gradient(92.54deg, #1c80cf 47.88%, #ffffff 100.01%)"
-            >
-                <div>
-                    <div class="text-blue-100 font-medium text-xl mt-2 mb-4">TAKE THE NEXT STEP</div>
-                    <div class="text-white font-medium text-5xl">Try PrimeBlocks</div>
-                </div>
-                <div class="mt-6 mr-auto md:mt-0 md:mr-0">
-                    <a href="https://www.primefaces.org/primeblocks-vue" class="p-button font-bold px-8 py-4 p-button-warning p-button-rounded p-button-raised"> Get Started </a>
-                </div>
-            </div>
         </div>
     </div>
 </template>

src/views/uikit/FloatLabelDoc.vue

@@ -1,103 +0,0 @@
-<script setup>
-import { ref, onMounted } from 'vue';
-import { CountryService } from '@/service/CountryService';
-
-const countries = ref([]);
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-const filteredCountries = ref(null);
-const value1 = ref(null);
-const value2 = ref(null);
-const value3 = ref(null);
-const value4 = ref(null);
-const value5 = ref(null);
-const value6 = ref(null);
-const value7 = ref(null);
-const value8 = ref(null);
-const value9 = ref(null);
-const value10 = ref(null);
-
-onMounted(() => {
-    CountryService.getCountries().then((data) => (countries.value = data));
-});
-
-const searchCountry = (event) => {
-    //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
-    const filtered = [];
-    const query = event.query;
-    for (let i = 0; i < countries.value.length; i++) {
-        const country = countries.value[i];
-        if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
-            filtered.push(country);
-        }
-    }
-    filteredCountries.value = filtered;
-};
-</script>
-
-<template>
-    <Fluid class="card">
-        <h5>Float Label</h5>
-        <div class="flex flex-col md:flex-row gap-6">
-            <FloatLabel class="md:w-1/3">
-                <InputText type="text" id="inputtext" v-model="value1" />
-                <label for="inputtext">InputText</label>
-            </FloatLabel>
-            <FloatLabel class="md:w-1/3">
-                <AutoComplete id="autocomplete" v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" inputClass="w-full" />
-                <label for="autocomplete">AutoComplete</label>
-            </FloatLabel>
-            <FloatLabel class="md:w-1/3">
-                <DatePicker inputId="calendar" v-model="value3" />
-                <label for="calendar">DatePicker</label>
-            </FloatLabel>
-        </div>
-
-        <div class="flex flex-col md:flex-row gap-6 mt-6">
-            <FloatLabel class="md:w-1/3">
-                <AutoComplete inputId="chips" v-model="value4" multiple :typeahead="false" />
-                <label for="chips">Chips</label>
-            </FloatLabel>
-            <FloatLabel class="md:w-1/3">
-                <InputMask id="inputmask" mask="99/99/9999" v-model="value5" fluid />
-                <label for="inputmask">InputMask</label>
-            </FloatLabel>
-            <FloatLabel class="md:w-1/3">
-                <InputNumber id="inputnumber" v-model="value6" />
-                <label for="inputnumber">InputNumber</label>
-            </FloatLabel>
-        </div>
-
-        <div class="flex flex-col md:flex-row gap-6 mt-6">
-            <InputGroup class="md:!w-1/3">
-                <InputGroupAddon>
-                    <i class="pi pi-user"></i>
-                </InputGroupAddon>
-                <FloatLabel>
-                    <InputText type="text" id="inputgroup" v-model="value7" />
-                    <label for="inputgroup">InputGroup</label>
-                </FloatLabel>
-            </InputGroup>
-            <FloatLabel class="md:w-1/3">
-                <Select id="dropdown" :options="cities" v-model="value8" optionLabel="name" class="w-full" />
-                <label for="dropdown">Select</label>
-            </FloatLabel>
-            <FloatLabel class="md:w-1/3">
-                <MultiSelect id="multiselect" :options="cities" v-model="value9" optionLabel="name" :filter="false" />
-                <label for="multiselect">MultiSelect</label>
-            </FloatLabel>
-        </div>
-
-        <div class="flex flex-col md:flex-row gap-6 mt-6">
-            <FloatLabel class="md:w-1/3">
-                <Textarea inputId="textarea" rows="3" cols="30" v-model="value10" />
-                <label for="textarea">Textarea</label>
-            </FloatLabel>
-        </div>
-    </Fluid>
-</template>

src/views/uikit/InputDoc.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { ref, onMounted } from 'vue';
 import { CountryService } from '@/service/CountryService';
 import { NodeService } from '@/service/NodeService';
+import { onMounted, ref } from 'vue';
 
 const floatValue = ref(null);
 const autoValue = ref(null);
@@ -78,7 +78,7 @@ const searchCountry = (event) => {
     <Fluid class="flex flex-col md:flex-row gap-6">
         <div class="md:w-1/2">
             <div class="card flex flex-col gap-4">
-                <h5>InputText</h5>
+                <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" />

src/views/uikit/InvalidStateDoc.vue

@@ -1,93 +0,0 @@
-<script setup>
-import { ref, onMounted } from 'vue';
-import { CountryService } from '@/service/CountryService';
-
-const countries = ref(null);
-const filteredCountries = ref(null);
-const value1 = ref(null);
-const value2 = ref(null);
-const value3 = ref(null);
-const value4 = ref(null);
-const value5 = ref(null);
-const value6 = ref(null);
-const value7 = ref(null);
-const value8 = ref(null);
-const value9 = ref(null);
-const value10 = ref(null);
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-
-onMounted(() => {
-    CountryService.getCountries().then((data) => {
-        countries.value = data;
-    });
-});
-
-const searchCountry = (event) => {
-    setTimeout(() => {
-        if (!event.query.trim().length) {
-            filteredCountries.value = [...countries];
-        } else {
-            filteredCountries.value = countries.value.filter((country) => {
-                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
-            });
-        }
-    }, 250);
-};
-</script>
-
-<template>
-    <Fluid class="card">
-        <h5>Invalid State</h5>
-        <div class="flex flex-col md:flex-row gap-6">
-            <div class="md:w-1/2">
-                <div class="flex flex-col gap-2">
-                    <label for="inputtext">InputText</label>
-                    <InputText id="inputtext" type="text" v-model="value1" invalid />
-                </div>
-                <div class="flex flex-col gap-2">
-                    <label for="autocomplete">AutoComplete</label>
-                    <AutoComplete id="autocomplete" v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" invalid inputClass="w-full" />
-                </div>
-                <div class="flex flex-col gap-2">
-                    <label for="calendar">DatePicker</label>
-                    <DatePicker id="calendar" v-model="value3" invalid :showIcon="true" />
-                </div>
-                <div class="flex flex-col gap-2">
-                    <label for="chips">Chips</label>
-                    <AutoComplete id="chips" v-model="value4" invalid multiple :typeahead="false" />
-                </div>
-                <div class="flex flex-col gap-2">
-                    <label for="password">Password</label>
-                    <Password id="password" v-model="value10" invalid />
-                </div>
-            </div>
-            <div class="md:w-1/2">
-                <div class="flex flex-col gap-2">
-                    <label for="inputmask">InputMask</label>
-                    <InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" invalid />
-                </div>
-                <div class="flex flex-col gap-2">
-                    <label for="inputnumber">InputNumber</label>
-                    <InputNumber id="inputnumber" v-model="value6" invalid />
-                </div>
-                <div class="flex flex-col gap-2"></div>
-                <label for="dropdown">Select</label>
-                <Select id="dropdown" v-model="value7" :options="cities" optionLabel="name" invalid />
-                <div class="flex flex-col gap-2">
-                    <label for="multiselect">MultiSelect</label>
-                    <MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" invalid />
-                </div>
-                <div class="flex flex-col gap-2">
-                    <label for="textarea">Textarea</label>
-                    <Textarea id="textarea" v-model="value9" rows="3" invalid />
-                </div>
-            </div>
-        </div>
-    </Fluid>
-</template>