Merge pull request #3 from Advaith3600/ui

UI Update

Author: Advaith3600

README.md

@@ -6,6 +6,8 @@ A seamless Django-like admin panel setup for Laravel. Simple, non-cms table mana
 [![License](http://poser.pugx.org/advaith/seamless-admin/license)](https://packagist.org/packages/advaith/seamless-admin)
 ![Tests](https://github.com/advaith3600/seamless-admin/actions/workflows/run-tests.yml/badge.svg?branch=main)
 
+![Screenshot](Screenshot.png)
+
 Laravel versions `6.*`, `7.*`, `8.*`, `9.*`, `10.*`, `11.*` are supported. Please ensure that you have a minimum of PHP `8.0.2` installed.
 
 ## Installation steps
@@ -60,8 +62,6 @@ class Post extends Model
 
 Et Voila! That's all you have to do to get started. Visit `/admin` to access the admin dashboard after logging in.
 
-![Screenshot](Screenshot.png)
-
 ## Configuration
 
 ### `seamless-admin.php` config file
@@ -83,7 +83,7 @@ All the model specific configuration should go inside the respective model file.
 - `public bool $hasAdminPage`: Set this to `false` to prevent the model from showing up on the admin page. Advantage of
   using this instead of removing the trait from the model is when other models try to check for foreign keys this will
   be used as a hint to fetch other columns.
-- `public string $adminIcon`: We use [feathericons](https://feathericons.com/) as the icon provider. Type in the name of
+- `public string $adminIcon`: We use [lucide](https://lucide.dev/) for the icons. Type in the name of
   the icon you want to use.
 - `public string $adminGroup`: Add a value to change the group in which the model should be displayed in the sidebar.
 
@@ -227,7 +227,7 @@ The `add` method takes 3 arguments:
 2. Alias for the route. This is the name that will be displayed in the sidebar of the admin page.
 3. An optional array which consists of
     - `isAllowed`: Whether the route is visible to the current user
-    - `icon`: Icon to be displayed in the sidebar. We use [feathericons](https://feathericons.com)
+    - `icon`: Icon to be displayed in the sidebar. We use [lucide](https://lucide.dev/) for icons
     - `group`: Group in sidebar to which the custom route should be added.
 
 To fully utilize the custom page, extend the layout `seamless::layout` in your blade file. Exmaple:

Screenshot.png

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "default",
+  "typescript": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/resources/assets/src/scss/app.scss",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "framework": "laravel",
+  "aliases": {
+    "components": "/src/resources/assets/components",
+    "utils": "/src/resources/assets/lib/utils"
+  }
+}

components.json

@@ -2,14 +2,10 @@
   "name": "seamless-admin",
   "version": "1.0.0",
   "description": "A seamless django like admin panel setup for Laravel",
+  "type": "module",
   "scripts": {
-    "dev": "npm run development",
-    "development": "mix",
-    "watch": "mix watch",
-    "watch-poll": "mix watch -- --watch-options-poll=1000",
-    "hot": "mix watch --hot",
-    "prod": "npm run production",
-    "production": "mix --production"
+    "dev": "vite",
+    "build": "vite build"
   },
   "keywords": [
     "laravel",
@@ -18,14 +14,22 @@
   "author": "Advaith A J",
   "license": "MIT",
   "devDependencies": {
-    "autoprefixer": "^10.4.4",
-    "laravel-mix": "^6.0.49",
-    "postcss": "^8.4.12",
-    "resolve-url-loader": "^5.0.0",
-    "sass": "^1.67.0",
-    "sass-loader": "^12.6.0",
-    "tailwindcss": "^3.0.23",
-    "vue": "^3.2.31",
-    "vue-loader": "^16.2.0"
+    "@tanstack/vue-table": "^8.13.2",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vueuse/core": "^10.9.0",
+    "autoprefixer": "^10.4.18",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "laravel-vite-plugin": "^1.0.2",
+    "lucide-vue-next": "^0.344.0",
+    "postcss": "^8.4.35",
+    "radix-vue": "^1.4.9",
+    "sass": "^1.71.1",
+    "tailwind-merge": "^2.2.1",
+    "tailwindcss": "^3.4.1",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.4",
+    "vue": "^3.4.21"
   }
 }

package.json

@@ -1,6 +1,6 @@
-module.exports = {
-  plugins: [
-    require('tailwindcss'),
-    require('autoprefixer'),
-  ]
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
 }

postcss.config.js

@@ -265,7 +265,10 @@ public function getForeignKeys(string $type): array
 
         if ($conn == 'mysql') {
             return DB::select(
-                'SELECT column_name, referenced_table_name, referenced_column_name
+                'SELECT
+                    column_name as column_name,
+                    referenced_table_name as referenced_table_name,
+                    referenced_column_name as referenced_column_name
                 FROM INFORMATION_SCHEMA.KEY_COLUMN_USAGE
                 WHERE (
                     REFERENCED_TABLE_SCHEMA = ? AND

src/ModelResolver.php

@@ -4,6 +4,7 @@
 
 use Advaith\SeamlessAdmin\Console\ClearCache;
 use Illuminate\Support\ServiceProvider;
+use Illuminate\Support\Facades\Blade;
 
 class SeamlessAdminServiceProvider extends ServiceProvider
 {
@@ -15,8 +16,8 @@ class SeamlessAdminServiceProvider extends ServiceProvider
     public function register(): void
     {
         // registering services in the container
-        $this->app->singleton('modelResolver', fn($app) => new ModelResolver());
-        $this->app->singleton('seamlessAdmin', fn($app) => new SeamlessAdmin());
+        $this->app->singleton('modelResolver', fn() => new ModelResolver());
+        $this->app->singleton('seamlessAdmin', fn() => new SeamlessAdmin());
 
         // registering routes
         $this->mergeConfigFrom(__DIR__ . '/config/config.php', 'seamless-admin');
@@ -34,8 +35,7 @@ public function boot()
         if ($this->app->runningInConsole()) {
             // publishing public assets
             $this->publishes([
-                __DIR__ . '/resources/assets/css' => public_path('seamless-admin/css'),
-                __DIR__ . '/resources/assets/js' => public_path('seamless-admin/js')
+                __DIR__ . '/assets' => public_path('seamless-admin'),
             ], 'seamless-admin-assets');
 
             // publishing config file
@@ -46,5 +46,39 @@ public function boot()
             // registering console commands
             $this->commands([ClearCache::class]);
         }
+
+        $this->bootDirectives();
+    }
+
+    private function bootDirectives()
+    {
+        Blade::directive('saSafeVite', function ($url) {
+            $url = substr($url, 1, -1);
+            $vite = \Illuminate\Foundation\Vite::class;
+            if ($this->app->has($vite)) {
+                return $this->app->make($vite)($url, 'seamless-admin');
+            }
+
+            $manifest = json_decode(file_get_contents(__DIR__ . "/assets/manifest.json"), true);
+            $scripts = "";
+
+            if (isset($manifest[$url]['imports'])) {
+                foreach ($manifest[$url]['imports'] as $preload) {
+                    $location = asset("seamless-admin/" . $manifest[$preload]['file']);
+                    $scripts .= "<link rel=\"modulepreload\" href=\"{$location}\" />\n";
+                }
+            }
+
+            $location = asset("seamless-admin/" . $manifest[$url]['file']);
+            if (strpos($url, 'css') !== false) {
+                $scripts .= "<link rel=\"preload\" href=\"{$location}\" as=\"style\" />\n";
+                $scripts .= "<link rel=\"stylesheet\" href=\"{$location}\" />";
+            } else {
+                $scripts .= "<link rel=\"modulepreload\" href=\"{$location}\" />\n";
+                $scripts .= "<script type=\"module\" src=\"{$location}\"></script>";
+            }
+
+            return $scripts;
+        });
     }
 }

src/SeamlessAdminServiceProvider.php

@@ -4,14 +4,25 @@
 
 trait SeamlessAdmin
 {
+    /**
+     *  Whether the key name should be visible for admins
+     *  Default: true
+     */
+    public bool $keyNameVisibleForAdmins = true;
+
     /**
      * Determines the information shown on the index page of the model listing
      *
      * @return array
      */
     public function adminIndexFields(): array
     {
-        return array_diff($this->getFillable(), $this->getHidden());
+        $fillable = $this->getFillable();
+        if ($this->keyNameVisibleForAdmins && !in_array($this->getKeyName(), $fillable)) {
+            array_unshift($fillable, $this->getKeyName());
+        }
+
+        return array_diff($fillable, $this->getHidden());
     }
 
     /**