README improvements, updates

README.md

@@ -1,7 +1,30 @@
-# Laravel Inertia & PrimeVue Starter Kit
-A basic starter kit using [Laravel](https://laravel.com/docs/master), [Intertia.js](https://inertiajs.com/), and [PrimeVue](https://primevue.org/). An equivalent to using [Laravel Breeze](https://laravel.com/docs/master/starter-kits#laravel-breeze), but with the added benefit of all the PrimeVue components at your disposal.
+# Laravel, Inertia, & PrimeVue Starter Kit
+## About
+A basic authentication starter kit using [Laravel](https://laravel.com/docs/master), [Intertia.js](https://inertiajs.com/), and [PrimeVue](https://primevue.org/). An equivalent to using [Laravel Breeze](https://laravel.com/docs/master/starter-kits#laravel-breeze), but with the added benefit of all the PrimeVue components at your disposal.
+
+## Features
+- Same auth structure and features as Laravel Breeze with User Profile page
+- Need an admin panel? [There's a branch for that.](https://github.com/connorabbas/laravel-inertia-primevue/tree/feature/admin-panel)
+- Need SSR support? [There's a branch for that.](https://github.com/connorabbas/laravel-inertia-primevue/tree/feature/ssr)
+- Pre-configured [Auto Import](https://primevue.org/autoimport/) PrimeVue components
+- Wrapper components for PrimeVue's `Menu`, `MenuBar`, & `PanelMenu` utilizing Inertia's `Link` component
+- Light/Dark mode toggle with custom component & composable
+- `useLazyDataTable()` composable for use with PrimeVue's `DataTable` component for easy filtering/sorting (example usage in `feature/admin-panel` branch)
+- Easily customizable theming
 
-Need an admin panel? [There's a branch for that.](https://github.com/connorabbas/laravel-inertia-primevue/tree/feature/admin-panel)
+## Theme
+This starter kit provides a light/dark mode toggle by default, and custom theme functionality provided by the powerful **PrimeVue V4** theming system, using styled mode and custom design token values.
+
+The starting point for customizing your theme will be the `resources/js/theme-preset.js` module file. To quickly change the look and feel of your site, swap the [primary](https://primevue.org/theming/styled/#primary) values with a different set of [colors](https://primevue.org/theming/styled/#colors), change the [surface](https://primevue.org/theming/styled/#surface) `colorScheme` values (slate, gray, neutral, etc.), or completely change the [preset theme](https://primevue.org/theming/styled/#presets) (Aura used by default).
+
+Please reference the [PrimeVue Styled Mode Docs](https://primevue.org/theming/styled/) to fully understand how this system works, and how to further customize your theme to make it your own.
+
+## PrimeVue v4 w/ Tailwind CSS
+If you have used a previous version of this project using **PrimeVue V3**, you'll know that PrimeFlex was used instead of Tailwind. With v4 however, the PrimeTek team has officially suggested [Moving from PrimeFlex to Tailwind CSS](https://primevue.org/guides/primeflex/).
+
+For this reason, Tailwind has been added into the project and is utilized with the [tailwindcss-primeui](https://primevue.org/tailwind/#plugin) plugin. CSS layers have also been implemented so the Tailwind utilities can [override](https://primevue.org/tailwind/#override) the PrimeVue component styling when needed.
+
+---
 
 ## Usage with Docker
 This starter kit is configured to use Docker Compose for local development with a few extra configuration steps. With this setup, you do not need PHP, Composer, MySQL or Node.js installed on your machine to get up and running with this project.
@@ -35,16 +58,4 @@ This starter kit is configured to use Docker Compose for local development with
    - Either build manually with docker compose (like above), use [Laravel Sail](https://laravel.com/docs/master/sail), or build as a [VS Code Dev Container](https://code.visualstudio.com/docs/devcontainers/tutorial) using the `Dev Containers: Reopen in Container` command.
 
 ### Additional configuration
-If you wish to add additional services, or swap out MySQL with an alternative database, you can reference the [Laravel Sail stubs](https://github.com/laravel/sail/tree/1.x/stubs) and update the `docker-compose.local.yml` file as needed.
-
-## Theme
-This starter kit provides a light/dark mode and custom theme functionality provided by the powerful PrimeVue theming system, using styled mode and custom design token values.
-
-The starting point for customizing your theme will be the `resources/js/theme-preset.js` module file. To quickly change the look and feel of your theme, swap the [primary](https://primevue.org/theming/styled/#primary) values with a different set of [colors](https://primevue.org/theming/styled/#colors), change the [surface](https://primevue.org/theming/styled/#surface) `colorScheme` values (slate, gray, neutral, etc.), or completely change the [preset theme](https://primevue.org/theming/styled/#presets) (Aura used by default).
-
-Please reference the [PrimeVue Styled Mode Docs](https://primevue.org/theming/styled/) to fully understand how this system works, and how to further customize your theme to make it your own.
-
-## PrimeVue v4 w/ Tailwind CSS
-If you have used a previous version of this project using PrimeVue v3, you'll know that Tailwind was removed in favor of PrimeFlex. With v4 however, the PrimeTek team has officially suggested [Moving from PrimeFlex to Tailwind CSS](https://primevue.org/guides/primeflex/).
-
-For this reason, Tailwind has been added back into the project and is utilized with the [tailwindcss-primeui](https://primevue.org/tailwind/#plugin) plugin. CSS layers have also been implemented so the Tailwind utilities can [override](https://primevue.org/tailwind/#override) the PrimeVue component styling when needed.
+If you wish to add additional services, or swap out MySQL with an alternative database, you can reference the [Laravel Sail stubs](https://github.com/laravel/sail/tree/1.x/stubs) and update the `docker-compose.local.yml` file as needed.

resources/js/Composables/useLazyDataTable.js

@@ -1,6 +1,7 @@
 import { ref, computed, onMounted } from 'vue';
 import { router, usePage } from '@inertiajs/vue3';
 import debounce from 'lodash/debounce';
+import { FilterMatchMode } from '@primevue/core/api';
 
 export function useLazyDataTable(
     defaultFilters = {},
@@ -53,6 +54,7 @@ export function useLazyDataTable(
                     rows: rowsPerPage.value,
                 },
                 preserveState: true,
+                showProgress: true,
                 onSuccess: (page) => {
                     resolve(page);
                 },
@@ -77,6 +79,7 @@ export function useLazyDataTable(
     }
 
     function onSort(event) {
+        currentPage.value = 1;
         sortField.value = event.sortField;
         sortOrder.value = event.sortOrder;
         fetchData();
@@ -109,18 +112,27 @@ export function useLazyDataTable(
         });
     }
 
+    /**
+     * WIP, parse url params into useable filters
+     */
     function parseUrlParams(urlParams) {
         filters.value = urlParams?.filters || dataTableDefaults.filters;
-        // Cast strings to Numbers for v-model
         Object.keys(filters.value).forEach((key) => {
             const filter = filters.value[key];
-            if (!filter.value) {
+            if (!filter?.value || !filter?.matchMode) {
                 return;
             }
-            if (typeof filter.value === 'string' && !isNaN(filter.value)) {
+            if (filter.matchMode == FilterMatchMode.DATE_IS) {
+                filters.value[key].value = new Date(filter.value);
+            } else if (
+                typeof filter.value === 'string' &&
+                !isNaN(filter.value)
+            ) {
                 filters.value[key].value = Number(filter.value);
-            }
-            if (Array.isArray(filter.value)) {
+            } else if (
+                Array.isArray(filter.value) ||
+                filter.matchMode == FilterMatchMode.IN
+            ) {
                 // TODO: find out why there are duplicate array values in multi-select filters
                 // "Fixed" with reassigning to unique array
                 const unique = [...new Set(filter.value)];

resources/js/theme-preset.js

@@ -19,32 +19,32 @@ const customThemePreset = definePreset(Preset, {
         colorScheme: {
             light: {
                 surface: {
-                    50: '{gray.50}',
-                    100: '{gray.100}',
-                    200: '{gray.200}',
-                    300: '{gray.300}',
-                    400: '{gray.400}',
-                    500: '{gray.500}',
-                    600: '{gray.600}',
-                    700: '{gray.700}',
-                    800: '{gray.800}',
-                    900: '{gray.900}',
-                    950: '{gray.950}',
+                    50: '{neutral.50}',
+                    100: '{neutral.100}',
+                    200: '{neutral.200}',
+                    300: '{neutral.300}',
+                    400: '{neutral.400}',
+                    500: '{neutral.500}',
+                    600: '{neutral.600}',
+                    700: '{neutral.700}',
+                    800: '{neutral.800}',
+                    900: '{neutral.900}',
+                    950: '{neutral.950}',
                 },
             },
             dark: {
                 surface: {
-                    50: '{gray.50}',
-                    100: '{gray.100}',
-                    200: '{gray.200}',
-                    300: '{gray.300}',
-                    400: '{gray.400}',
-                    500: '{gray.500}',
-                    600: '{gray.600}',
-                    700: '{gray.700}',
-                    800: '{gray.800}',
-                    900: '{gray.900}',
-                    950: '{gray.950}',
+                    50: '{neutral.50}',
+                    100: '{neutral.100}',
+                    200: '{neutral.200}',
+                    300: '{neutral.300}',
+                    400: '{neutral.400}',
+                    500: '{neutral.500}',
+                    600: '{neutral.600}',
+                    700: '{neutral.700}',
+                    800: '{neutral.800}',
+                    900: '{neutral.900}',
+                    950: '{neutral.950}',
                 },
             },
         },