adminforth 1.0.51 → 1.0.53

package/dataConnectors/postgres.ts

@@ -83,6 +83,10 @@ class PostgresConnector {
                 field.type = AdminForthTypes.BOOLEAN;
                 field._underlineType = 'bool';
 
+            } else if (baseType == 'uuid') {
+                field.type = AdminForthTypes.STRING;
+                field._underlineType = 'uuid';
+
             } else if (baseType.includes('character varying')) {
                 field.type = AdminForthTypes.STRING;
                 field._underlineType = 'varchar';
@@ -183,6 +187,7 @@ class PostgresConnector {
       let totalCounter = 1;
       const where = filters.length ? `WHERE ${filters.map((f, i) => {
         let placeholder = '$'+(totalCounter);
+        const fieldData = resource.dataSourceColumns.find((col) => col.name == f.field);
         let field = f.field;
         let operator = this.OperatorsMap[f.operator];
         if (f.operator == AdminForthFilterOperators.IN || f.operator == AdminForthFilterOperators.NIN) {
@@ -191,7 +196,13 @@ class PostgresConnector {
         } else {
             totalCounter += 1;
         }
-        return `"${field}" ${operator} ${placeholder}`
+
+        if (fieldData._underlineType == 'uuid') {
+            field = `cast("${field}" as text)`
+        } else { 
+            field = `"${field}"`
+        }
+        return `${field} ${operator} ${placeholder}`;
       }).join(' AND ')}` : '';
 
       const filterValues = [];

package/dist/dataConnectors/postgres.js

@@ -84,6 +84,10 @@ class PostgresConnector {
                     field.type = AdminForthTypes.BOOLEAN;
                     field._underlineType = 'bool';
                 }
+                else if (baseType == 'uuid') {
+                    field.type = AdminForthTypes.STRING;
+                    field._underlineType = 'uuid';
+                }
                 else if (baseType.includes('character varying')) {
                     field.type = AdminForthTypes.STRING;
                     field._underlineType = 'varchar';
@@ -185,6 +189,7 @@ class PostgresConnector {
             let totalCounter = 1;
             const where = filters.length ? `WHERE ${filters.map((f, i) => {
                 let placeholder = '$' + (totalCounter);
+                const fieldData = resource.dataSourceColumns.find((col) => col.name == f.field);
                 let field = f.field;
                 let operator = this.OperatorsMap[f.operator];
                 if (f.operator == AdminForthFilterOperators.IN || f.operator == AdminForthFilterOperators.NIN) {
@@ -194,7 +199,13 @@ class PostgresConnector {
                 else {
                     totalCounter += 1;
                 }
-                return `"${field}" ${operator} ${placeholder}`;
+                if (fieldData._underlineType == 'uuid') {
+                    field = `cast("${field}" as text)`;
+                }
+                else {
+                    field = `"${field}"`;
+                }
+                return `${field} ${operator} ${placeholder}`;
             }).join(' AND ')}` : '';
             const filterValues = [];
             filters.length ? filters.forEach((f) => {

package/dist/index.js

@@ -548,8 +548,8 @@ class AdminForth {
                 data.data.forEach((item) => {
                     item._label = resource.itemLabel(item);
                 });
-                if ((_p = (_o = resource.hooks) === null || _o === void 0 ? void 0 : _o[source]) === null || _p === void 0 ? void 0 : _p.afterDatasourceRequest) {
-                    const resp = yield ((_r = (_q = resource.hooks) === null || _q === void 0 ? void 0 : _q[source]) === null || _r === void 0 ? void 0 : _r.afterDatasourceRequest({ resource, response: data.data, adminUser }));
+                if ((_p = (_o = resource.hooks) === null || _o === void 0 ? void 0 : _o[source]) === null || _p === void 0 ? void 0 : _p.afterDatasourceResponse) {
+                    const resp = yield ((_r = (_q = resource.hooks) === null || _q === void 0 ? void 0 : _q[source]) === null || _r === void 0 ? void 0 : _r.afterDatasourceResponse({ resource, response: data.data, adminUser }));
                     if (!resp || (!resp.ok && !resp.error)) {
                         throw new Error(`Hook must return object with {ok: true} or { error: 'Error' } `);
                     }
@@ -565,7 +565,6 @@ class AdminForth {
                         }
                     });
                 });
-                console.log('data', data);
                 return Object.assign(Object.assign({}, data), { options: resource === null || resource === void 0 ? void 0 : resource.options });
             }),
         });

package/dist/modules/codeInjector.js

@@ -72,7 +72,7 @@ class CodeInjector {
     }
     prepareSources(_a) {
         return __awaiter(this, arguments, void 0, function* ({ filesUpdated, verbose = false }) {
-            var _b, _c, _d, _e, _f, _g, _h;
+            var _b, _c, _d, _e, _f, _g, _h, _j, _k;
             // check SPA_TMP_PATH exists and create if not
             try {
                 yield fs.promises.access(CodeInjector.SPA_TMP_PATH, fs.constants.F_OK);
@@ -162,6 +162,9 @@ class CodeInjector {
                 // if file - return, if dir - go recursively
                 const customComponents = yield fs.promises.readdir(customComponentsDir);
                 for (const filePath of customComponents) {
+                    if (!filePath.endsWith('.vue')) {
+                        continue;
+                    }
                     fs.stat(`${customComponentsDir}/${filePath}`, (err, data) => {
                         if (err) {
                             console.log(err);
@@ -187,6 +190,9 @@ class CodeInjector {
             if (customComponentsDir) {
                 const customComponents = yield fs.promises.readdir(customComponentsDir);
                 for (const filePath of customComponents) {
+                    if (!filePath.endsWith('.vue')) {
+                        continue;
+                    }
                     fs.stat(`${customComponentsDir}/${filePath}`, (err, data) => {
                         if (err) {
                             console.log('Custom components importing error: ', err);
@@ -213,13 +219,22 @@ class CodeInjector {
                 appVueContent = appVueContent.replace('/* IMPORTANT:ADMINFORTH CUSTOM USES */', 'addCustomUses(app);');
             }
             yield fs.promises.writeFile(appVuePath, appVueContent);
+            // generate tailwind extend styles 
+            if ((_f = this.adminforth.config) === null || _f === void 0 ? void 0 : _f.styles) {
+                const tailwindStyles = (_g = this.adminforth.config) === null || _g === void 0 ? void 0 : _g.styles;
+                const stylesText = JSON.stringify(tailwindStyles, null, 2).slice(1, -1);
+                let tailwindConfigPath = path.join(CodeInjector.SPA_TMP_PATH, 'tailwind.config.js');
+                let tailwindConfigContent = yield fs.promises.readFile(tailwindConfigPath, 'utf-8');
+                tailwindConfigContent = tailwindConfigContent.replace('/* IMPORTANT:ADMINFORTH TAILWIND STYLES */', stylesText);
+                yield fs.promises.writeFile(tailwindConfigPath, tailwindConfigContent);
+            }
             /* generate custom rotes */
             const homepageMenuItem = this.adminforth.config.menu.find((mi) => mi.homepage);
             let childrenHomePageMenuItem = this.adminforth.config.menu.find((mi) => { var _a; return mi.children && ((_a = mi.children) === null || _a === void 0 ? void 0 : _a.find((mi) => mi.homepage)); });
-            let childrenHomepage = (_f = childrenHomePageMenuItem === null || childrenHomePageMenuItem === void 0 ? void 0 : childrenHomePageMenuItem.children) === null || _f === void 0 ? void 0 : _f.find((mi) => mi.homepage);
+            let childrenHomepage = (_h = childrenHomePageMenuItem === null || childrenHomePageMenuItem === void 0 ? void 0 : childrenHomePageMenuItem.children) === null || _h === void 0 ? void 0 : _h.find((mi) => mi.homepage);
             let homePagePath = (homepageMenuItem === null || homepageMenuItem === void 0 ? void 0 : homepageMenuItem.path) || `/resource/${childrenHomepage === null || childrenHomepage === void 0 ? void 0 : childrenHomepage.resourceId}`;
             if (!homePagePath) {
-                homePagePath = ((_g = this.adminforth.config.menu.filter((mi) => mi.path)[0]) === null || _g === void 0 ? void 0 : _g.path) || `/resource/${(_h = this.adminforth.config.menu.filter((mi) => mi.children)[0]) === null || _h === void 0 ? void 0 : _h.resourceId}`;
+                homePagePath = ((_j = this.adminforth.config.menu.filter((mi) => mi.path)[0]) === null || _j === void 0 ? void 0 : _j.path) || `/resource/${(_k = this.adminforth.config.menu.filter((mi) => mi.children)[0]) === null || _k === void 0 ? void 0 : _k.resourceId}`;
             }
             routes += `{
       path: '/',

package/dist/spa/spa/index.html

@@ -16,8 +16,8 @@
   </script> -->
 
   </head>
-  <body>
-    <div id="app" class="min-h-screen dark:bg-gray-800"></div>
+  <body class=" ">
+    <div id="app" class="min-h-screen bg-html-bg dark:bg-gray-800"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

package/dist/spa/spa/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@iconify-prerendered/vue-flowbite": "^0.23.1714023977",
+        "@unhead/vue": "^1.9.12",
         "@vueuse/core": "^10.10.0",
         "dayjs": "^1.11.11",
         "debounce": "^2.1.0",
@@ -1185,6 +1186,23 @@
         "url": "https://github.com/sponsors/harlan-zw"
       }
     },
+    "node_modules/@unhead/vue": {
+      "version": "1.9.12",
+      "resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-1.9.12.tgz",
+      "integrity": "sha512-keE4EuswgzCqVU7zmZprU+ToMvNWc3s8NoLreH5AtJd2u0FgBygD8sxRVyEnZw1KwFYOJ2C7yD2TChSKZioPGQ==",
+      "dependencies": {
+        "@unhead/schema": "1.9.12",
+        "@unhead/shared": "1.9.12",
+        "hookable": "^5.5.3",
+        "unhead": "1.9.12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      },
+      "peerDependencies": {
+        "vue": ">=2.7 || >=3"
+      }
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.4.tgz",

package/dist/spa/spa/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@iconify-prerendered/vue-flowbite": "^0.23.1714023977",
+    "@unhead/vue": "^1.9.12",
     "@vueuse/core": "^10.10.0",
     "dayjs": "^1.11.11",
     "debounce": "^2.1.0",

package/dist/spa/spa/src/App.vue

@@ -1,89 +1,84 @@
 <template>
   <nav 
     v-if="loggedIn"
-
-    class="fixed h-14 top-0 z-50 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
+    class="fixed h-14 top-0 z-40 w-full  border-b shadow-sm bg-header-bg shadow-header-shadow dark:bg-header-bg-hover dark:border-nav-menu-devider">
     <div class="px-3 py-3 lg:px-5 lg:pl-3">
       <div class="flex items-center justify-between">
         <div class="flex items-center justify-start rtl:justify-end">
-          <button data-drawer-target="logo-sidebar" data-drawer-toggle="logo-sidebar" aria-controls="logo-sidebar" type="button" class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
+          <button data-drawer-target="logo-sidebar" data-drawer-toggle="logo-sidebar" aria-controls="logo-sidebar" type="button" class="inline-flex items-center p-2 text-sm  rounded-lg sm:hidden hover:bg-nav-menu-bg-hover focus:outline-none focus:ring-2 focus:ring-nav-menu-devider dark:text-nav-menu-icons dark:hover:bg-nav-menu-bg-hover dark:focus:ring-nav-menu-devider">
               <span class="sr-only">Open sidebar</span>
               <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
               </svg>
           </button>
-          <div  class="flex ms-2 md:me-24">
-            <img src="https://flowbite.com/docs/images/logo.svg" class="h-8 me-3" alt="FlowBite Logo" />
-            <span class="self-center text-xl font-semibold sm:text-2xl whitespace-nowrap dark:text-white">
-              {{ coreStore.config?.brandName }}
-            </span>
-          </div>
+          
         </div>
         <div class="flex items-center">
-          
-
-            <div class="flex items-center ms-3">
-              <div>
-                <button type="button" class="flex text-sm bg-gray-100 rounded-full focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600 dark:bg-gray-700" aria-expanded="false" data-dropdown-toggle="dropdown-user">
-                  <span class="sr-only">Open user menu</span>
-                  <svg class="w-8 h-8 text-gray-400 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
-                    <path fill-rule="evenodd" d="M12 20a7.966 7.966 0 0 1-5.002-1.756l.002.001v-.683c0-1.794 1.492-3.25 3.333-3.25h3.334c1.84 0 3.333 1.456 3.333 3.25v.683A7.966 7.966 0 0 1 12 20ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10c0 5.5-4.44 9.963-9.932 10h-.138C6.438 21.962 2 17.5 2 12Zm10-5c-1.84 0-3.333 1.455-3.333 3.25S10.159 13.5 12 13.5c1.84 0 3.333-1.455 3.333-3.25S13.841 7 12 7Z" clip-rule="evenodd"/>
-                  </svg>
-
-                </button>
+          <div class="flex items-center ms-3 ">
+            <div>
+              <button type="button" class="flex text-sm bg-header-bg-hover rounded-full focus:ring-4 focus:ring-nav-menu-devider dark:focus:ring-nav-menu-devider dark:bg-header-bg-hover" aria-expanded="false" data-dropdown-toggle="dropdown-user">
+                <span class="sr-only">Open user menu</span>
+                <svg class="w-8 h-8 text-nav-menu-icons dark:text-header-icons" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+                  <path fill-rule="evenodd" d="M12 20a7.966 7.966 0 0 1-5.002-1.756l.002.001v-.683c0-1.794 1.492-3.25 3.333-3.25h3.334c1.84 0 3.333 1.456 3.333 3.25v.683A7.966 7.966 0 0 1 12 20ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10c0 5.5-4.44 9.963-9.932 10h-.138C6.438 21.962 2 17.5 2 12Zm10-5c-1.84 0-3.333 1.455-3.333 3.25S10.159 13.5 12 13.5c1.84 0 3.333-1.455 3.333-3.25S13.841 7 12 7Z" clip-rule="evenodd"/>
+                </svg>
+              </button>
+            </div>
+            <div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:shadow-black dark:bg-nav-menu-bg dark:divide-nav-menu-devider dark:shadow-black" id="dropdown-user">
+              <div class="px-4 py-3" role="none">
+                <p class="text-sm text-gray-900 dark:text-header-text" role="none" v-if="coreStore.userFullname">
+                  {{ coreStore.userFullname }}
+                </p>
+                <p class="text-sm font-medium text-gray-900 truncate dark:text-nav-menu-text" role="none">
+                  {{ coreStore.username }}
+                </p>
               </div>
-              <div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:shadow-black dark:bg-gray-700 dark:divide-gray-600 dark:shadow-black" id="dropdown-user">
-                <div class="px-4 py-3" role="none">
-                  <p class="text-sm text-gray-900 dark:text-white" role="none" v-if="coreStore.userFullname">
-                    {{ coreStore.userFullname }}
-                  </p>
-                  <p class="text-sm font-medium text-gray-900 truncate dark:text-gray-300" role="none">
-                    {{ coreStore.username }}
-                  </p>
-                </div>
-                <ul class="py-1" role="none">
-                  <li >
-                    <span @click="toggleTheme" class=" cursor-pointer flex items-center	 gap-1 block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white" role="menuitem">
-                      {{ theme === 'dark' ? 'Light' : 'Dark' }}
-                      <IconMoonSolid class="w-5 h-5 text-blue-300
-                      " v-if="theme !== 'dark'"/>
-                      <IconSunSolid class="w-5 h-5 text-yellow-300
-                      " v-else/>
-                      mode
-                    </span>
-                  </li>
-                  
-                  <li>
-                    <button @click="logout" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white" role="menuitem">Sign out</button>
+              <ul class="py-1" role="none">
+                <li>
+                  <span @click="toggleTheme" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black hover:bg-html-bg dark:text-nav-menu-text-hover dark:hover:bg-nav-menu-hover dark:hover:text-nav-menu-text-active" role="menuitem">
+                    {{ theme === 'dark' ? 'Light' : 'Dark' }}
+                    <IconMoonSolid class="w-5 h-5 text-blue-300" v-if="theme !== 'dark'" />
+                    <IconSunSolid class="w-5 h-5 text-yellow-300" v-else />
+                    mode
+                  </span>
                 </li>
-                </ul>
-              </div>
+                <li>
+                  <button @click="logout" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black hover:bg-html-bg dark:text-nav-menu-text-hover dark:hover:bg-nav-menu-hover dark:hover:text-nav-menu-text-active w-full" role="menuitem">Sign out</button>
+                </li>
+              </ul>
             </div>
           </div>
+        </div>
       </div>
     </div>
-  </nav>
+</nav>
+
 
 
   <aside 
     v-if="loggedIn"
 
-    id="logo-sidebar" class="fixed top-0 left-0 z-10 w-64 h-screen pt-20 transition-transform -translate-x-full bg-white border-r border-gray-200 sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700" aria-label="Sidebar">
-    <div class="h-full px-3 pb-4 overflow-y-auto bg-white dark:bg-gray-800">
+    id="logo-sidebar" class="fixed border-none top-0 left-0 z-50 w-64 h-screen  transition-transform -translate-x-full bg-nav-menu-bg border-r border-  sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700" aria-label="Sidebar">
+    <div class="h-full px-3 pb-4 overflow-y-auto bg-nav-menu-bg dark:bg-gray-800">
+      <div class="flex ms-2 md:me-24  m-4  ">
+            <img src="https://flowbite.com/docs/images/logo.svg" class="h-8 me-3" alt="FlowBite Logo" />
+            <span class="self-center text-header-text-size font-semibold sm:text-header-text-size whitespace-nowrap dark:text-header-text text-header-logo-color">
+              {{ coreStore.config?.brandName }}
+            </span>
+          </div>
         <ul class="space-y-2 font-medium">
           <template v-for="(item, i) in coreStore.menu" :key="`menu-${i}`">
-            <div v-if="item.type === 'divider'" class="border-t border-gray-200 dark:border-gray-700"></div>
+            <div v-if="item.type === 'divider'" class="border-t border-nav-menu-devider dark:border-gray-700"></div>
             <div v-else-if="item.type === 'gap'" class="flex items-center justify-center h-8"></div>
             <div v-else-if="item.type === 'heading'" class="flex items-center justify-left pl-2 h-8 text-gray-400 dark:text-gray-400
             ">{{ item.label }}</div>
 
             
             <li v-else-if="item.children">
-              <button  type="button" class="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" 
+              <button  type="button" class="flex items-center w-full p-2 text-base text-nav-menu-text transition duration-75  group hover:bg-nav-menu-bg-hover dark:text-white dark:hover:bg-gray-700" 
                   :aria-controls="`dropdown-example${i}`"
                   :data-collapse-toggle="`dropdown-example${i}`"
               >
-                <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" ></component>
+                <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400  dark:group-hover:text-white" ></component>
 
                 <span class="flex-1 ms-3 text-left rtl:text-right whitespace-nowrap">{{ item.label }}</span>
                 <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
@@ -135,6 +130,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { getIcon } from '@/utils';
 import { useHead } from 'unhead'
 import { createHead } from 'unhead'
+// import { link } from 'fs';
 const coreStore = useCoreStore();
 
 
@@ -182,6 +178,12 @@ onMounted(async () => {
   title.value = coreStore.config.title || 'Admin Forth';
   useHead({
   title: title.value,
+  link: [
+    {
+      rel: 'icon',
+      href: coreStore.config.favicon || '/favicon.ico',
+    },
+  ],
   
 })
 })

package/dist/spa/spa/src/components/Dropdown.vue

@@ -9,7 +9,8 @@
         :placeholder="selectedItems.length ? '' : 'Select...'"
       />
       <div class="absolute inset-y-0 left-2 flex items-center pr-2 flex-wrap">
-        <div v-for="item in selectedItems" :key="item.name" class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">
+        {{  }}
+        <div v-for="item in selectedItems" :key="item?.name" class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">
           <span>{{ item.label }}</span>
           <button
             type="button"

package/dist/spa/spa/src/components/Filters.vue

@@ -92,7 +92,7 @@
    </div>
   </div>
 
-  <div v-if="show" drawer-backdrop="" class="bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-30"
+  <div v-if="show" drawer-backdrop="" class="bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-50"
     @click="$emit('hide')">
   </div>
 </template>

package/dist/spa/spa/src/components/MenuLink.vue

@@ -1,11 +1,11 @@
 <template>
   <RouterLink 
       :to="{name: item.resourceId ? 'resource-list' : item.path, params: item.resourceId ? { resourceId: item.resourceId }: {}}" 
-      class="flex items-center py-2 text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white" role="menuitem"
+      class="flex items-center py-2 text-nav-menu-text hover:bg-nav-menu-bg-hover active:bg-nav-menu-bg-active" role="menuitem"
       :class="{ 
         'px-4': isChild,
         'px-2': !isChild,
-        'bg-blue-100 dark:bg-gray-700': item.resourceId ?
+        'bg-nav-menu-bg-active dark:bg-gray-700': item.resourceId ?
         ($route.params.resourceId === item.resourceId && $route.name === 'resource-list') :
         ($route.name === item.path)
       }"

package/dist/spa/spa/src/components/ResourceForm.vue

@@ -2,11 +2,11 @@
   <div>
     
     <div 
-      class="relative shadow-md sm:rounded-lg dark:shadow-2xl dark:shadow-black"
+      class="relative shadow-resourse-form-shadow sm:rounded-lg dark:shadow-2xl dark:shadow-black"
     >
       <form autocomplete="off" @submit.prevent>
         <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-          <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+          <thead class="text-xs text-gray-700 uppercase bg-form-view-heading dark:bg-gray-700 dark:text-gray-400">
               <tr>
                   <th scope="col" class="px-6 py-3">
                       Field
@@ -18,7 +18,7 @@
           </thead>
           <tbody>
               <tr v-for="column, i in editableColumns" :key="column.name"
-                  class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700"
+                  class="bg-form-view-bg dark:bg-gray-800 border-b dark:border-gray-700"
               >
                 <!-- if column is in customComponentsPerColumn, use this component. If not, use this code -->
                 <template v-if="customComponentsPerColumn[column.name]">

package/dist/spa/spa/src/views/ListView.vue

@@ -65,7 +65,7 @@
     </BreadcrumbsWithButtons>
 
     <!-- table -->
-    <div class="relative overflow-x-auto shadow-md dark:shadow-black	 sm:rounded-lg dark:s">
+    <div class="relative overflow-x-auto shadow-list-table-shadow dark:shadow-black	  dark:s">
 
 
       <!-- skelet loader -->
@@ -90,7 +90,7 @@
       </div>
 
       <table v-else class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-        <thead class="text-xs text-gray-700 bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+        <thead class="text-xs text-view-table-heading-text bg-list-view-table-heading dark:bg-gray-700 dark:text-gray-400">
         <tr>
           <th scope="col" class="p-4">
             <div v-if="rows && rows.length" class="flex items-center">
@@ -127,7 +127,7 @@
         </tr>
         </thead>
         <tbody>
-        <tr v-if="!rows" class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+        <tr v-if="!rows" class="bg-list-view-table-bg border-b dark:bg-gray-800 dark:border-gray-700">
           <td :colspan="coreStore.resourceColumns.length + 2">
 
             <div role="status"
@@ -171,7 +171,7 @@
             </div>
           </td>
         </tr>
-        <tr v-else-if="rows.length === 0" class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+        <tr v-else-if="rows.length === 0" class="bg-list-view-table-bg border-b dark:bg-gray-800 dark:border-gray-700">
           <td :colspan="coreStore.resourceColumns.length + 2">
 
             <div id="toast-simple"
@@ -185,7 +185,7 @@
         </tr>
 
         <tr v-else v-for="(row, rowI) in rows" :key="row.id"
-            class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
+            class="bg-list-view-table-bg border-b dark:bg-gray-800 border-list-view-border-color dark:border-gray-700 hover:bg-list-view-table-row-hover dark:hover:bg-gray-600">
           <td class="w-4 p-4">
             <div class="flex items center">
               <input

package/dist/spa/spa/src/views/ShowView.vue

@@ -27,10 +27,10 @@
     </div>
     <div 
       v-else
-      class="relative overflow-x-auto shadow-md sm:rounded-lg"
+      class="relative overflow-x-auto shadow-resourse-form-shadow "
     >
      <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+        <thead class="text-xs text-gray-700 uppercase bg-form-view-heading dark:bg-gray-700 dark:text-gray-400">
             <tr>
                 <th scope="col" class="px-6 py-3">
                     Field
@@ -42,7 +42,7 @@
         </thead>
         <tbody>
             <tr v-for="column in coreStore.resourceColumns?.filter(c => c.showIn.includes('show'))" :key="column.name"
-                class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700"
+                class="bg-form-view-bg odd:dark:bg-gray-900  even:dark:bg-gray-800 border-b  dark:border-gray-700"
             >
                 <td class="px-6 py-4 whitespace-nowrap">
                     {{ column.label }}

package/dist/spa/spa/tailwind.config.js

@@ -1,9 +1,12 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content:  ["./src/**/*.{vue, js}", "./node_modules/flowbite/**/*.js"],
+  content:  ["./src/**/*.{vue, js}","./src/*.{vue, js}", "./index.html", "./node_modules/flowbite/**/*.js"],
   theme: {
-    extend: {},
+    extend: {
+      /* IMPORTANT:ADMINFORTH TAILWIND STYLES */
+  }
   },
+
   darkMode: 'class',
   plugins: [
     require('flowbite/plugin'),

package/index.ts

@@ -16,6 +16,11 @@ const AVAILABLE_SHOW_IN = ['list', 'edit', 'create', 'filter', 'show'];
 const DEFAULT_ALLOWED_ACTIONS = {create: true, edit: true, show: true, delete: true};
 
 
+type ValidationObject = {
+  regex: string,
+  message: string,
+}
+
 class AdminForth {
   static Types = AdminForthTypes;
 
@@ -624,9 +629,8 @@ class AdminForth {
           item._label = resource.itemLabel(item);
         })
 
-      
-        if (resource.hooks?.[source]?.afterDatasourceRequest) {
-          const resp = await resource.hooks?.[source]?.afterDatasourceRequest({ resource, response: data.data, adminUser });
+        if (resource.hooks?.[source]?.afterDatasourceResponse) {
+          const resp = await resource.hooks?.[source]?.afterDatasourceResponse({ resource, response: data.data, adminUser });
           if (!resp || (!resp.ok && !resp.error)) {
             throw new Error(`Hook must return object with {ok: true} or { error: 'Error' } `);
           }
@@ -644,9 +648,11 @@ class AdminForth {
             }
           })
         });
-        console.log('data', data);
 
-        return {...data, options: resource?.options };
+        return {
+          ...data, 
+          options: resource?.options,
+        };
       },
     });
     server.endpoint({

package/modules/codeInjector.ts

@@ -180,6 +180,9 @@ class CodeInjector {
         // if file - return, if dir - go recursively
         const customComponents = await fs.promises.readdir(customComponentsDir);
         for (const filePath of customComponents) {
+            if (!filePath.endsWith('.vue')) {
+              continue;
+            }
             fs.stat(`${customComponentsDir}/${filePath}`, (err, data) => {
                 if (err) {
                     console.log(err);
@@ -207,16 +210,19 @@ class CodeInjector {
     if (customComponentsDir) {
         const customComponents = await fs.promises.readdir(customComponentsDir);
         for (const filePath of customComponents) {
-            fs.stat(`${customComponentsDir}/${filePath}`, (err, data) => {
-                if (err) {
-                    console.log('Custom components importing error: ', err);
-                    return;
-                }
-                if (data.isFile()) {
-                    const componentName = getComponentNameFromPath(filePath);
-                    customComponentsComponents += `app.component('${componentName}', ${componentName});\n`;
-                }
-            })
+          if (!filePath.endsWith('.vue')) {
+            continue;
+          }
+          fs.stat(`${customComponentsDir}/${filePath}`, (err, data) => {
+            if (err) {
+              console.log('Custom components importing error: ', err);
+              return;
+            }
+            if (data.isFile()) {
+              const componentName = getComponentNameFromPath(filePath);
+              customComponentsComponents += `app.component('${componentName}', ${componentName});\n`;
+            }
+          })
         }
     }
     
@@ -239,6 +245,17 @@ class CodeInjector {
     }
     await fs.promises.writeFile(appVuePath, appVueContent);
 
+    // generate tailwind extend styles 
+    if(this.adminforth.config?.styles){
+      const tailwindStyles = this.adminforth.config?.styles
+      const stylesText = JSON.stringify(tailwindStyles, null, 2).slice(1, -1);
+      let tailwindConfigPath = path.join(CodeInjector.SPA_TMP_PATH, 'tailwind.config.js');
+      let tailwindConfigContent = await fs.promises.readFile(tailwindConfigPath, 'utf-8');
+      tailwindConfigContent = tailwindConfigContent.replace('/* IMPORTANT:ADMINFORTH TAILWIND STYLES */', stylesText);
+      await fs.promises.writeFile(tailwindConfigPath, tailwindConfigContent);
+    }
+
+
 
     /* generate custom rotes */
     const homepageMenuItem = this.adminforth.config.menu.find((mi)=>mi.homepage);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "1.0.51",
+  "version": "1.0.53",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/spa/index.html

@@ -16,8 +16,8 @@
   </script> -->
 
   </head>
-  <body>
-    <div id="app" class="min-h-screen dark:bg-gray-800"></div>
+  <body class=" ">
+    <div id="app" class="min-h-screen bg-html-bg dark:bg-gray-800"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

package/spa/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@iconify-prerendered/vue-flowbite": "^0.23.1714023977",
+        "@unhead/vue": "^1.9.12",
         "@vueuse/core": "^10.10.0",
         "dayjs": "^1.11.11",
         "debounce": "^2.1.0",
@@ -1185,6 +1186,23 @@
         "url": "https://github.com/sponsors/harlan-zw"
       }
     },
+    "node_modules/@unhead/vue": {
+      "version": "1.9.12",
+      "resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-1.9.12.tgz",
+      "integrity": "sha512-keE4EuswgzCqVU7zmZprU+ToMvNWc3s8NoLreH5AtJd2u0FgBygD8sxRVyEnZw1KwFYOJ2C7yD2TChSKZioPGQ==",
+      "dependencies": {
+        "@unhead/schema": "1.9.12",
+        "@unhead/shared": "1.9.12",
+        "hookable": "^5.5.3",
+        "unhead": "1.9.12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      },
+      "peerDependencies": {
+        "vue": ">=2.7 || >=3"
+      }
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.4.tgz",

package/spa/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@iconify-prerendered/vue-flowbite": "^0.23.1714023977",
+    "@unhead/vue": "^1.9.12",
     "@vueuse/core": "^10.10.0",
     "dayjs": "^1.11.11",
     "debounce": "^2.1.0",

package/spa/src/App.vue

@@ -1,89 +1,84 @@
 <template>
   <nav 
     v-if="loggedIn"
-
-    class="fixed h-14 top-0 z-50 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
+    class="fixed h-14 top-0 z-40 w-full  border-b shadow-sm bg-header-bg shadow-header-shadow dark:bg-header-bg-hover dark:border-nav-menu-devider">
     <div class="px-3 py-3 lg:px-5 lg:pl-3">
       <div class="flex items-center justify-between">
         <div class="flex items-center justify-start rtl:justify-end">
-          <button data-drawer-target="logo-sidebar" data-drawer-toggle="logo-sidebar" aria-controls="logo-sidebar" type="button" class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
+          <button data-drawer-target="logo-sidebar" data-drawer-toggle="logo-sidebar" aria-controls="logo-sidebar" type="button" class="inline-flex items-center p-2 text-sm  rounded-lg sm:hidden hover:bg-nav-menu-bg-hover focus:outline-none focus:ring-2 focus:ring-nav-menu-devider dark:text-nav-menu-icons dark:hover:bg-nav-menu-bg-hover dark:focus:ring-nav-menu-devider">
               <span class="sr-only">Open sidebar</span>
               <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
               </svg>
           </button>
-          <div  class="flex ms-2 md:me-24">
-            <img src="https://flowbite.com/docs/images/logo.svg" class="h-8 me-3" alt="FlowBite Logo" />
-            <span class="self-center text-xl font-semibold sm:text-2xl whitespace-nowrap dark:text-white">
-              {{ coreStore.config?.brandName }}
-            </span>
-          </div>
+          
         </div>
         <div class="flex items-center">
-          
-
-            <div class="flex items-center ms-3">
-              <div>
-                <button type="button" class="flex text-sm bg-gray-100 rounded-full focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600 dark:bg-gray-700" aria-expanded="false" data-dropdown-toggle="dropdown-user">
-                  <span class="sr-only">Open user menu</span>
-                  <svg class="w-8 h-8 text-gray-400 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
-                    <path fill-rule="evenodd" d="M12 20a7.966 7.966 0 0 1-5.002-1.756l.002.001v-.683c0-1.794 1.492-3.25 3.333-3.25h3.334c1.84 0 3.333 1.456 3.333 3.25v.683A7.966 7.966 0 0 1 12 20ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10c0 5.5-4.44 9.963-9.932 10h-.138C6.438 21.962 2 17.5 2 12Zm10-5c-1.84 0-3.333 1.455-3.333 3.25S10.159 13.5 12 13.5c1.84 0 3.333-1.455 3.333-3.25S13.841 7 12 7Z" clip-rule="evenodd"/>
-                  </svg>
-
-                </button>
+          <div class="flex items-center ms-3 ">
+            <div>
+              <button type="button" class="flex text-sm bg-header-bg-hover rounded-full focus:ring-4 focus:ring-nav-menu-devider dark:focus:ring-nav-menu-devider dark:bg-header-bg-hover" aria-expanded="false" data-dropdown-toggle="dropdown-user">
+                <span class="sr-only">Open user menu</span>
+                <svg class="w-8 h-8 text-nav-menu-icons dark:text-header-icons" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+                  <path fill-rule="evenodd" d="M12 20a7.966 7.966 0 0 1-5.002-1.756l.002.001v-.683c0-1.794 1.492-3.25 3.333-3.25h3.334c1.84 0 3.333 1.456 3.333 3.25v.683A7.966 7.966 0 0 1 12 20ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10c0 5.5-4.44 9.963-9.932 10h-.138C6.438 21.962 2 17.5 2 12Zm10-5c-1.84 0-3.333 1.455-3.333 3.25S10.159 13.5 12 13.5c1.84 0 3.333-1.455 3.333-3.25S13.841 7 12 7Z" clip-rule="evenodd"/>
+                </svg>
+              </button>
+            </div>
+            <div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:shadow-black dark:bg-nav-menu-bg dark:divide-nav-menu-devider dark:shadow-black" id="dropdown-user">
+              <div class="px-4 py-3" role="none">
+                <p class="text-sm text-gray-900 dark:text-header-text" role="none" v-if="coreStore.userFullname">
+                  {{ coreStore.userFullname }}
+                </p>
+                <p class="text-sm font-medium text-gray-900 truncate dark:text-nav-menu-text" role="none">
+                  {{ coreStore.username }}
+                </p>
               </div>
-              <div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:shadow-black dark:bg-gray-700 dark:divide-gray-600 dark:shadow-black" id="dropdown-user">
-                <div class="px-4 py-3" role="none">
-                  <p class="text-sm text-gray-900 dark:text-white" role="none" v-if="coreStore.userFullname">
-                    {{ coreStore.userFullname }}
-                  </p>
-                  <p class="text-sm font-medium text-gray-900 truncate dark:text-gray-300" role="none">
-                    {{ coreStore.username }}
-                  </p>
-                </div>
-                <ul class="py-1" role="none">
-                  <li >
-                    <span @click="toggleTheme" class=" cursor-pointer flex items-center	 gap-1 block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white" role="menuitem">
-                      {{ theme === 'dark' ? 'Light' : 'Dark' }}
-                      <IconMoonSolid class="w-5 h-5 text-blue-300
-                      " v-if="theme !== 'dark'"/>
-                      <IconSunSolid class="w-5 h-5 text-yellow-300
-                      " v-else/>
-                      mode
-                    </span>
-                  </li>
-                  
-                  <li>
-                    <button @click="logout" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white" role="menuitem">Sign out</button>
+              <ul class="py-1" role="none">
+                <li>
+                  <span @click="toggleTheme" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black hover:bg-html-bg dark:text-nav-menu-text-hover dark:hover:bg-nav-menu-hover dark:hover:text-nav-menu-text-active" role="menuitem">
+                    {{ theme === 'dark' ? 'Light' : 'Dark' }}
+                    <IconMoonSolid class="w-5 h-5 text-blue-300" v-if="theme !== 'dark'" />
+                    <IconSunSolid class="w-5 h-5 text-yellow-300" v-else />
+                    mode
+                  </span>
                 </li>
-                </ul>
-              </div>
+                <li>
+                  <button @click="logout" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black hover:bg-html-bg dark:text-nav-menu-text-hover dark:hover:bg-nav-menu-hover dark:hover:text-nav-menu-text-active w-full" role="menuitem">Sign out</button>
+                </li>
+              </ul>
             </div>
           </div>
+        </div>
       </div>
     </div>
-  </nav>
+</nav>
+
 
 
   <aside 
     v-if="loggedIn"
 
-    id="logo-sidebar" class="fixed top-0 left-0 z-10 w-64 h-screen pt-20 transition-transform -translate-x-full bg-white border-r border-gray-200 sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700" aria-label="Sidebar">
-    <div class="h-full px-3 pb-4 overflow-y-auto bg-white dark:bg-gray-800">
+    id="logo-sidebar" class="fixed border-none top-0 left-0 z-50 w-64 h-screen  transition-transform -translate-x-full bg-nav-menu-bg border-r border-  sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700" aria-label="Sidebar">
+    <div class="h-full px-3 pb-4 overflow-y-auto bg-nav-menu-bg dark:bg-gray-800">
+      <div class="flex ms-2 md:me-24  m-4  ">
+            <img src="https://flowbite.com/docs/images/logo.svg" class="h-8 me-3" alt="FlowBite Logo" />
+            <span class="self-center text-header-text-size font-semibold sm:text-header-text-size whitespace-nowrap dark:text-header-text text-header-logo-color">
+              {{ coreStore.config?.brandName }}
+            </span>
+          </div>
         <ul class="space-y-2 font-medium">
           <template v-for="(item, i) in coreStore.menu" :key="`menu-${i}`">
-            <div v-if="item.type === 'divider'" class="border-t border-gray-200 dark:border-gray-700"></div>
+            <div v-if="item.type === 'divider'" class="border-t border-nav-menu-devider dark:border-gray-700"></div>
             <div v-else-if="item.type === 'gap'" class="flex items-center justify-center h-8"></div>
             <div v-else-if="item.type === 'heading'" class="flex items-center justify-left pl-2 h-8 text-gray-400 dark:text-gray-400
             ">{{ item.label }}</div>
 
             
             <li v-else-if="item.children">
-              <button  type="button" class="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" 
+              <button  type="button" class="flex items-center w-full p-2 text-base text-nav-menu-text transition duration-75  group hover:bg-nav-menu-bg-hover dark:text-white dark:hover:bg-gray-700" 
                   :aria-controls="`dropdown-example${i}`"
                   :data-collapse-toggle="`dropdown-example${i}`"
               >
-                <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" ></component>
+                <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400  dark:group-hover:text-white" ></component>
 
                 <span class="flex-1 ms-3 text-left rtl:text-right whitespace-nowrap">{{ item.label }}</span>
                 <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
@@ -135,6 +130,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { getIcon } from '@/utils';
 import { useHead } from 'unhead'
 import { createHead } from 'unhead'
+// import { link } from 'fs';
 const coreStore = useCoreStore();
 
 
@@ -182,6 +178,12 @@ onMounted(async () => {
   title.value = coreStore.config.title || 'Admin Forth';
   useHead({
   title: title.value,
+  link: [
+    {
+      rel: 'icon',
+      href: coreStore.config.favicon || '/favicon.ico',
+    },
+  ],
   
 })
 })

package/spa/src/components/Dropdown.vue

@@ -9,7 +9,8 @@
         :placeholder="selectedItems.length ? '' : 'Select...'"
       />
       <div class="absolute inset-y-0 left-2 flex items-center pr-2 flex-wrap">
-        <div v-for="item in selectedItems" :key="item.name" class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">
+        {{  }}
+        <div v-for="item in selectedItems" :key="item?.name" class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">
           <span>{{ item.label }}</span>
           <button
             type="button"

package/spa/src/components/Filters.vue

@@ -92,7 +92,7 @@
    </div>
   </div>
 
-  <div v-if="show" drawer-backdrop="" class="bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-30"
+  <div v-if="show" drawer-backdrop="" class="bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-50"
     @click="$emit('hide')">
   </div>
 </template>

package/spa/src/components/MenuLink.vue

@@ -1,11 +1,11 @@
 <template>
   <RouterLink 
       :to="{name: item.resourceId ? 'resource-list' : item.path, params: item.resourceId ? { resourceId: item.resourceId }: {}}" 
-      class="flex items-center py-2 text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white" role="menuitem"
+      class="flex items-center py-2 text-nav-menu-text hover:bg-nav-menu-bg-hover active:bg-nav-menu-bg-active" role="menuitem"
       :class="{ 
         'px-4': isChild,
         'px-2': !isChild,
-        'bg-blue-100 dark:bg-gray-700': item.resourceId ?
+        'bg-nav-menu-bg-active dark:bg-gray-700': item.resourceId ?
         ($route.params.resourceId === item.resourceId && $route.name === 'resource-list') :
         ($route.name === item.path)
       }"

package/spa/src/components/ResourceForm.vue

@@ -2,11 +2,11 @@
   <div>
     
     <div 
-      class="relative shadow-md sm:rounded-lg dark:shadow-2xl dark:shadow-black"
+      class="relative shadow-resourse-form-shadow sm:rounded-lg dark:shadow-2xl dark:shadow-black"
     >
       <form autocomplete="off" @submit.prevent>
         <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-          <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+          <thead class="text-xs text-gray-700 uppercase bg-form-view-heading dark:bg-gray-700 dark:text-gray-400">
               <tr>
                   <th scope="col" class="px-6 py-3">
                       Field
@@ -18,7 +18,7 @@
           </thead>
           <tbody>
               <tr v-for="column, i in editableColumns" :key="column.name"
-                  class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700"
+                  class="bg-form-view-bg dark:bg-gray-800 border-b dark:border-gray-700"
               >
                 <!-- if column is in customComponentsPerColumn, use this component. If not, use this code -->
                 <template v-if="customComponentsPerColumn[column.name]">

package/spa/src/views/ListView.vue

@@ -65,7 +65,7 @@
     </BreadcrumbsWithButtons>
 
     <!-- table -->
-    <div class="relative overflow-x-auto shadow-md dark:shadow-black	 sm:rounded-lg dark:s">
+    <div class="relative overflow-x-auto shadow-list-table-shadow dark:shadow-black	  dark:s">
 
 
       <!-- skelet loader -->
@@ -90,7 +90,7 @@
       </div>
 
       <table v-else class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-        <thead class="text-xs text-gray-700 bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+        <thead class="text-xs text-view-table-heading-text bg-list-view-table-heading dark:bg-gray-700 dark:text-gray-400">
         <tr>
           <th scope="col" class="p-4">
             <div v-if="rows && rows.length" class="flex items-center">
@@ -127,7 +127,7 @@
         </tr>
         </thead>
         <tbody>
-        <tr v-if="!rows" class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+        <tr v-if="!rows" class="bg-list-view-table-bg border-b dark:bg-gray-800 dark:border-gray-700">
           <td :colspan="coreStore.resourceColumns.length + 2">
 
             <div role="status"
@@ -171,7 +171,7 @@
             </div>
           </td>
         </tr>
-        <tr v-else-if="rows.length === 0" class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+        <tr v-else-if="rows.length === 0" class="bg-list-view-table-bg border-b dark:bg-gray-800 dark:border-gray-700">
           <td :colspan="coreStore.resourceColumns.length + 2">
 
             <div id="toast-simple"
@@ -185,7 +185,7 @@
         </tr>
 
         <tr v-else v-for="(row, rowI) in rows" :key="row.id"
-            class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
+            class="bg-list-view-table-bg border-b dark:bg-gray-800 border-list-view-border-color dark:border-gray-700 hover:bg-list-view-table-row-hover dark:hover:bg-gray-600">
           <td class="w-4 p-4">
             <div class="flex items center">
               <input

package/spa/src/views/ShowView.vue

@@ -27,10 +27,10 @@
     </div>
     <div 
       v-else
-      class="relative overflow-x-auto shadow-md sm:rounded-lg"
+      class="relative overflow-x-auto shadow-resourse-form-shadow "
     >
      <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+        <thead class="text-xs text-gray-700 uppercase bg-form-view-heading dark:bg-gray-700 dark:text-gray-400">
             <tr>
                 <th scope="col" class="px-6 py-3">
                     Field
@@ -42,7 +42,7 @@
         </thead>
         <tbody>
             <tr v-for="column in coreStore.resourceColumns?.filter(c => c.showIn.includes('show'))" :key="column.name"
-                class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700"
+                class="bg-form-view-bg odd:dark:bg-gray-900  even:dark:bg-gray-800 border-b  dark:border-gray-700"
             >
                 <td class="px-6 py-4 whitespace-nowrap">
                     {{ column.label }}

package/spa/tailwind.config.js

@@ -1,9 +1,12 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content:  ["./src/**/*.{vue, js}", "./node_modules/flowbite/**/*.js"],
+  content:  ["./src/**/*.{vue, js}","./src/*.{vue, js}", "./index.html", "./node_modules/flowbite/**/*.js"],
   theme: {
-    extend: {},
+    extend: {
+      /* IMPORTANT:ADMINFORTH TAILWIND STYLES */
+  }
   },
+
   darkMode: 'class',
   plugins: [
     require('flowbite/plugin'),

package/types/AdminForthConfig.ts

@@ -104,12 +104,14 @@ export  type AdminForthConfig = {
     customization?: {
       customComponentsDir?: string,
       vueUsesFile?: string,
+      customPublicDir?: string,
     },
     baseUrl?: string,
     brandName?: string,
     datesFormat?: string,
     deleteConfirmation?: boolean,
     title?: string,
+    styles?: Object,
   }
   
 export type AllowedActions = {