adminforth 1.2.46 → 1.2.48

package/dist/modules/codeInjector.js

@@ -404,7 +404,7 @@ class CodeInjector {
             const pluginPackages = [];
             // for every installed plugin generate packages
             for (const plugin of this.adminforth.activatedPlugins) {
-                console.log('🔧 Checking packages for plugin', plugin.customFolderPath);
+                process.env.HEAVY_DEBUG && console.log('🔧 Checking packages for plugin', plugin.constructor.name, plugin.customFolderPath);
                 const [lockHash, packages] = yield this.packagesFromNpm(plugin.customFolderPath);
                 if (packages.length) {
                     pluginPackages.push({

package/dist/modules/utils.js

@@ -244,7 +244,6 @@ export function createRGBA(color, opacity) {
     else if (color.startsWith("rgba")) {
         //add opacity to existing rgba color
         const rgb = color.match(/[\d.]+/g);
-        console.log('rgb', rgb);
         return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${Number(rgb[3]) * opacity})`;
     }
     else if (color.startsWith("rgb")) {

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

@@ -1,6 +1,6 @@
 <template>
   <nav class="flex" aria-label="Breadcrumb">
-      <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
+      <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse flex-wrap">
         <li class="inline-flex items-center">
           <RouterLink :to="{name: 'home'}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
             <svg class="w-3 h-3 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
@@ -23,7 +23,8 @@
             <svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
             </svg>
-            <span class="ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400">
+            <span class="ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400
+              max-w-80 truncate">
               {{ $route.name === 'resource-edit' ? 'Edit' : 'Show' }} {{ coreStore.record?._label }}</span>
           </div>
         </li>

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

@@ -99,11 +99,13 @@ const start = computed(() => {
   return date.utc().toISOString();
 })
 
-function updateFromProps() {
+async function updateFromProps() {
   if (!props.valueStart) {
     datepickerStartEl.value.value = '';
     startTime.value = '';
   } else {
+    // wait ref to initialize
+    await (new Promise(resolve => setTimeout(resolve, 0)));
     datepickerObject.value.setDate(dayjs(props.valueStart).format('DD MMM YYYY'));
     startTime.value = dayjs(props.valueStart).format('HH:mm:ss')
   }

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

@@ -5,21 +5,24 @@
     >
       <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-lightFormHeading dark:bg-gray-700 dark:text-gray-400">
+          <thead class="text-xs text-gray-700 uppercase bg-lightFormHeading dark:bg-gray-700 dark:text-gray-400 block md:table-row">
               <tr>
-                  <th scope="col" class="px-6 py-3">
+                  <th scope="col" class="px-6 py-3 hidden md:table-cell">
                       Field
                   </th>
-                  <th scope="col" class="px-6 py-3 w-4/6">
+                  <th scope="col" class="px-6 py-3 w-4/6 hidden md:table-cell">
                       Value
                   </th>
+
+                 
               </tr>
           </thead>
           <tbody>
               <tr v-for="column, i in editableColumns" :key="column.name"
-                  class="bg-ligftForm dark:bg-gray-800 border-b dark:border-gray-700"
+                  v-if="currentValues !== null"
+                  class="bg-ligftForm dark:bg-gray-800 border-b dark:border-gray-700 block md:table-row"
               >
-                    <td class="px-6 py-4 whitespace-nowrap flex items-center"> <!--align-top-->
+                    <td class="px-6 py-4 sm:pb-0 whitespace-nowrap flex items-center block md:table-cell"> <!--align-top-->
                       {{ column.label }}
                       <span :data-tooltip-target="`tooltip-show-${i}`" class="ml-1 relative inline-block">
                           <IconExclamationCircleSolid v-if="column.required[mode]" class="w-4 h-4" 
@@ -33,7 +36,7 @@
                           <div class="tooltip-arrow" data-popper-arrow></div>
                       </div>
                     </td>
-                    <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap relative">
+                    <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap relative block md:table-cell">
                     <template v-if="column?.components?.[props.source]?.file">
                       <component
                         :is="getCustomComponent(column.components[props.source])"
@@ -168,7 +171,7 @@ const mode = computed(() => props.record  && Object.keys(props.record).length ?
 
 const emit = defineEmits(['update:record', 'update:isValid']);
 
-const currentValues = ref({});
+const currentValues = ref(null);
 
 const customComponentsInValidity = ref({});
 const customComponentsEmptiness = ref({});
@@ -176,6 +179,9 @@ const customComponentsEmptiness = ref({});
 
 const columnError = (column) => {
   const val = computed(() => {
+    if (!currentValues.value) {
+      return null;
+    }
     if (customComponentsInValidity.value[column.name]) {
       return customComponentsInValidity.value[column.name];
     }
@@ -244,9 +250,8 @@ const setCurrentValue = (key, value) => {
 };
 
 onMounted(() => {
-  Object.keys(props.record).forEach((key) => {
-    currentValues.value[key] = props.record[key];
-  });
+  currentValues.value = Object.assign({}, props.record);
+  console.log('2️⃣ currentValues', JSON.stringify(currentValues.value));
   initFlowbite();
   emit('update:isValid', isValid.value);
 });

package/modules/codeInjector.ts

@@ -462,7 +462,7 @@ class CodeInjector implements ICodeInjector {
 
     // for every installed plugin generate packages
     for (const plugin of this.adminforth.activatedPlugins) {
-      console.log('🔧 Checking packages for plugin', plugin.customFolderPath);
+      process.env.HEAVY_DEBUG && console.log('🔧 Checking packages for plugin', plugin.constructor.name, plugin.customFolderPath);
       const [lockHash, packages] = await this.packagesFromNpm(plugin.customFolderPath);
       if (packages.length) {
         pluginPackages.push({

package/modules/utils.ts

@@ -259,7 +259,6 @@ function hexToRGBA(hex,opacity){
   else if (color.startsWith("rgba")) {
     //add opacity to existing rgba color
     const rgb = color.match(/[\d.]+/g);
-    console.log('rgb',rgb)
     return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${Number(rgb[3]) * opacity})`;
   }
   else if (color.startsWith("rgb")) {

package/package.json

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

package/spa/src/components/Breadcrumbs.vue

@@ -1,6 +1,6 @@
 <template>
   <nav class="flex" aria-label="Breadcrumb">
-      <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
+      <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse flex-wrap">
         <li class="inline-flex items-center">
           <RouterLink :to="{name: 'home'}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
             <svg class="w-3 h-3 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
@@ -23,7 +23,8 @@
             <svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
             </svg>
-            <span class="ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400">
+            <span class="ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400
+              max-w-80 truncate">
               {{ $route.name === 'resource-edit' ? 'Edit' : 'Show' }} {{ coreStore.record?._label }}</span>
           </div>
         </li>

package/spa/src/components/CustomDatePicker.vue

@@ -99,11 +99,13 @@ const start = computed(() => {
   return date.utc().toISOString();
 })
 
-function updateFromProps() {
+async function updateFromProps() {
   if (!props.valueStart) {
     datepickerStartEl.value.value = '';
     startTime.value = '';
   } else {
+    // wait ref to initialize
+    await (new Promise(resolve => setTimeout(resolve, 0)));
     datepickerObject.value.setDate(dayjs(props.valueStart).format('DD MMM YYYY'));
     startTime.value = dayjs(props.valueStart).format('HH:mm:ss')
   }

package/spa/src/components/ResourceForm.vue

@@ -5,21 +5,24 @@
     >
       <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-lightFormHeading dark:bg-gray-700 dark:text-gray-400">
+          <thead class="text-xs text-gray-700 uppercase bg-lightFormHeading dark:bg-gray-700 dark:text-gray-400 block md:table-row">
               <tr>
-                  <th scope="col" class="px-6 py-3">
+                  <th scope="col" class="px-6 py-3 hidden md:table-cell">
                       Field
                   </th>
-                  <th scope="col" class="px-6 py-3 w-4/6">
+                  <th scope="col" class="px-6 py-3 w-4/6 hidden md:table-cell">
                       Value
                   </th>
+
+                 
               </tr>
           </thead>
           <tbody>
               <tr v-for="column, i in editableColumns" :key="column.name"
-                  class="bg-ligftForm dark:bg-gray-800 border-b dark:border-gray-700"
+                  v-if="currentValues !== null"
+                  class="bg-ligftForm dark:bg-gray-800 border-b dark:border-gray-700 block md:table-row"
               >
-                    <td class="px-6 py-4 whitespace-nowrap flex items-center"> <!--align-top-->
+                    <td class="px-6 py-4 sm:pb-0 whitespace-nowrap flex items-center block md:table-cell"> <!--align-top-->
                       {{ column.label }}
                       <span :data-tooltip-target="`tooltip-show-${i}`" class="ml-1 relative inline-block">
                           <IconExclamationCircleSolid v-if="column.required[mode]" class="w-4 h-4" 
@@ -33,7 +36,7 @@
                           <div class="tooltip-arrow" data-popper-arrow></div>
                       </div>
                     </td>
-                    <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap relative">
+                    <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap relative block md:table-cell">
                     <template v-if="column?.components?.[props.source]?.file">
                       <component
                         :is="getCustomComponent(column.components[props.source])"
@@ -168,7 +171,7 @@ const mode = computed(() => props.record  && Object.keys(props.record).length ?
 
 const emit = defineEmits(['update:record', 'update:isValid']);
 
-const currentValues = ref({});
+const currentValues = ref(null);
 
 const customComponentsInValidity = ref({});
 const customComponentsEmptiness = ref({});
@@ -176,6 +179,9 @@ const customComponentsEmptiness = ref({});
 
 const columnError = (column) => {
   const val = computed(() => {
+    if (!currentValues.value) {
+      return null;
+    }
     if (customComponentsInValidity.value[column.name]) {
       return customComponentsInValidity.value[column.name];
     }
@@ -244,9 +250,8 @@ const setCurrentValue = (key, value) => {
 };
 
 onMounted(() => {
-  Object.keys(props.record).forEach((key) => {
-    currentValues.value[key] = props.record[key];
-  });
+  currentValues.value = Object.assign({}, props.record);
+  console.log('2️⃣ currentValues', JSON.stringify(currentValues.value));
   initFlowbite();
   emit('update:isValid', isValid.value);
 });