adminforth 1.0.30 → 1.0.32

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

@@ -0,0 +1,143 @@
+<template>
+  <div class="flex flex-wrap gap-2">
+    <input
+      type="number" aria-describedby="helper-text-explanation"
+      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      placeholder="From"
+      v-model="start"
+    >
+
+    <input
+      type="number" aria-describedby="helper-text-explanation"
+      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      placeholder="To"
+      v-model="end"
+    >
+
+    <button
+      v-if="isChanged"
+      type="button"
+      class="flex items-center p-0.5 ml-auto px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+      @click="clear">Clear
+    </button>
+
+    <div class="w-full">
+      <vue-slider
+        class="custom-slider"
+        :dot-size="20"
+        height="7.99px"
+        :min="minFormatted"
+        :max="maxFormatted"
+        v-model="sliderValue"
+        @update:model-value="updateFromSlider($event)"
+      />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import VueSlider from 'vue-slider-component';
+import 'vue-slider-component/theme/antd.css'
+import {computed, onMounted, ref, watch} from "vue";
+import debounce from 'debounce'
+
+const props = defineProps({
+  valueStart: {
+    default: 0,
+  },
+  valueEnd: {
+    default: 10,
+  },
+  min: {
+    default: 0,
+  },
+  max: {
+    default: 10,
+  },
+});
+
+const emit = defineEmits(['update:valueStart', 'update:valueEnd']);
+
+const minFormatted = computed(() => Math.floor(props.min));
+const maxFormatted = computed(() => Math.ceil(props.max));
+
+const isChanged = computed(() => {
+  return start.value !== minFormatted.value || end.value !== maxFormatted.value;
+});
+
+const start = ref(minFormatted.value);
+const end = ref(maxFormatted.value);
+
+const sliderValue = ref([start.value, end.value]);
+
+const updateFromSlider =
+    debounce((value: [number, number]) => {
+      start.value = value[0];
+      end.value = value[1];
+    }, 500);
+
+function updateFromProps() {
+  if (props.valueStart || props.valueEnd) {
+    setFromProps(props.valueStart, props.valueEnd)
+  } else {
+    clear();
+  }
+}
+
+onMounted(() => {
+  updateFromProps();
+
+  watch(() => [props.valueStart, props.valueEnd], (value) => {
+    updateFromProps();
+  });
+})
+
+watch(start, () => {
+  //console.log('⚡ emit', start.value)
+  emit('update:valueStart', start.value)
+})
+
+watch(end, () => {
+  //console.log('⚡ emit', end.value)
+  emit('update:valueEnd', end.value);
+})
+
+const clear = () => {
+  start.value = minFormatted.value;
+  end.value = maxFormatted.value;
+  sliderValue.value = [start.value, end.value]
+}
+
+function setFromProps(startValue: number, endValue: number) {
+  start.value = startValue ? startValue : minFormatted.value
+  end.value = endValue ? endValue : maxFormatted.value
+  sliderValue.value = [start.value, end.value]
+}
+</script>
+
+<style lang="scss" scoped>
+.custom-slider {
+    &:deep(.vue-slider-rail) {
+        background-color: rgb(229 231 235);
+    }
+
+    &:deep(.vue-slider-dot-handle) {
+        background-color: #1c64f2;
+        border: none;
+        box-shadow: none;
+    }
+
+    &:deep(.vue-slider-dot-handle:hover) {
+        background-color: #1c64f2;
+        border: none;
+        box-shadow: none;
+    }
+
+    &:deep(.vue-slider-process) {
+        background-color: rgb(225 239 254);
+    }
+
+    &:deep(.vue-slider-process:hover) {
+        background-color: rgb(225 239 254);
+    }
+}
+</style>

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

@@ -34,7 +34,7 @@
         <IconCaretUpSolid v-else class="h-5 w-5 text-gray-400" />
       </div>
     </div>
-    <div v-if="showDropdown" class="absolute z-10 mt-1 w-full bg-white shadow-lg rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
+    <div v-if="showDropdown" class="absolute z-10 mt-1 w-full bg-white shadow-lg dark:shadow-black rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
       <div
         v-for="item in filteredItems"
         :key="item.value"
@@ -76,7 +76,6 @@ const showDropdown = ref(false);
 const selectedItems = ref([]);
 
 function updateFromProps() {
-  console.log('⚡ updateFromProps', props.modelValue)
   if (props.modelValue !== undefined) {
     if (props.single) {
       selectedItems.value = [props.options.find(item => item.value === props.modelValue)];

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

@@ -2,7 +2,7 @@
   <!-- drawer component -->
   <div id="drawer-navigation" 
   
-      class="fixed top-14 right-0 z-40 p-4 overflow-y-auto transition-transform translate-x-full bg-white w-80 dark:bg-gray-800 shadow-xl"
+      class="fixed top-14 right-0 z-40 p-4 overflow-y-auto transition-transform translate-x-full bg-white w-80 dark:bg-gray-800 shadow-xl dark:shadow-black"
 
       :class="show ? 'top-0 transform-none' : ''"
       tabindex="-1" aria-labelledby="drawer-navigation-label"
@@ -22,8 +22,14 @@
          <li v-for="c in columnsWithFilter" :key="c">
             <p class="dark:text-gray-400">{{ c.label }}</p>
 
-            <Dropdown 
-              v-if="c.type === 'boolean'" 
+            <Dropdown
+              v-if="c.foreignResource"
+              :options="columnOptions[c.name] || []"
+              @update:modelValue="setFilterItem({ column: c, operator: 'in', value: $event })"
+              :modelValue="filters.find(f => f.field === c.name && f.operator === 'in')?.value || []"
+            />
+            <Dropdown
+              v-else-if="c.type === 'boolean'"
               :options="[{ label: 'Yes', value: true }, { label: 'No', value: false }, { label: 'Unset', value: null }]"
               @update:modelValue="setFilterItem({ column: c, operator: 'in', value: $event })"
               :modelValue="filters.find(f => f.field === c.name && f.operator === 'in')?.value || []"
@@ -62,22 +68,15 @@
              :value="getFilterItem({ column: c, operator: 'ilike' })"
            >
 
-            <div v-else-if="['integer', 'decimal', 'float'].includes(c.type)" class="flex gap-2">
-              <input 
-                type="number" aria-describedby="helper-text-explanation" 
-                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                placeholder="From"
-                @input="setFilterItem({ column: c, operator: 'gte', value: $event.target.value || undefined })"
-                :value="getFilterItem({ column: c, operator: 'gte' })"
-              >
-              <input 
-                type="number" aria-describedby="helper-text-explanation" 
-                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                placeholder="To"
-                @input="setFilterItem({ column: c, operator: 'lte', value: $event.target.value || undefined})"
-                :value="getFilterItem({ column: c, operator: 'lte' })"
-              >
-            </div>
+           <CustomRangePicker
+             v-else-if="['integer', 'decimal', 'float'].includes(c.type)"
+             :min="c.min"
+             :max="c.max"
+             :valueStart="getFilterItem({ column: c, operator: 'gte' })"
+             @update:valueStart="setFilterItem({ column: c, operator: 'gte', value: $event || undefined })"
+             :valueEnd="getFilterItem({ column: c, operator: 'lte' })"
+             @update:valueEnd="setFilterItem({ column: c, operator: 'lte', value: $event || undefined })"
+           />
             
          </li>
       </ul>
@@ -99,19 +98,53 @@
 </template>
 
 <script setup>
-import { watch, computed } from 'vue'
+import { watch, computed, ref, onMounted } from 'vue'
 import Dropdown from '@/components/Dropdown.vue';
 import CustomDateRangePicker from '@/components/CustomDateRangePicker.vue';
+import { callAdminForthApi } from '@/utils';
+import { useRouter } from 'vue-router';
+import { computedAsync } from '@vueuse/core'
+import CustomRangePicker from "@/components/CustomRangePicker.vue";
 
 // props: columns
 // add support for v-model:filers
 const props = defineProps(['columns', 'filters', 'show', 'columnsMinMax']);
 const emits = defineEmits(['update:filters', 'hide']);
 
-const columnsWithFilter = computed( 
+const router = useRouter();
+
+
+const columnsWithFilter = computed(
   () => props.columns?.filter(column => column.showIn.includes('filter')) || []
 );
 
+const columnOptions = computedAsync(async () => {
+  const ret = {};
+  if (!props.columns) {
+    return ret;
+  }
+  await Promise.all(
+    Object.values(props.columns).map(async (column) => {
+      if (column.foreignResource) {
+        const list = await callAdminForthApi({
+          method: 'POST',
+          path: `/get_resource_foreign_data`,
+          body: {
+            resourceId: router.currentRoute.value.params.resourceId,
+            column: column.name,
+            limit: 1000,
+            offset: 0,
+          },
+        });
+        ret[column.name] = list.items;
+      }
+    })
+  );
+
+  return ret;
+}, {});
+
+
 // sync 'body' class 'overflow-hidden' with show prop show
 watch(() => props.show, (show) => {
   if (show) {

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

@@ -2,7 +2,7 @@
   <div>
     
     <div 
-      class="relative shadow-md sm:rounded-lg dark:shadow-2xl"
+      class="relative shadow-md 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">
@@ -36,7 +36,14 @@
                 <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap relative">
                   <Dropdown
                     single
-                    v-if="column.enum"
+                    v-if="column.foreignResource"
+                    :options="columnOptions[column.name] || []"
+                    :modelValue="currentValues[column.name]"
+                    @update:modelValue="setCurrentValue(column.name, $event)"
+                  />
+                  <Dropdown
+                    single
+                    v-else-if="column.enum"
                     :options="column.enum"
                     :modelValue="currentValues[column.name]"
                     @update:modelValue="setCurrentValue(column.name, $event)"
@@ -128,6 +135,11 @@ import { IconExclamationCircleSolid } from '@iconify-prerendered/vue-flowbite';
 import { initFlowbite } from 'flowbite'
 import { IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbite';
 import CustomDatePicker from "@/components/CustomDatePicker.vue";
+import { callAdminForthApi } from '@/utils';
+import { useRouter } from 'vue-router';
+import { computedAsync } from '@vueuse/core';
+
+const router = useRouter();
 
 const props = defineProps({
   loading: Boolean,
@@ -145,6 +157,7 @@ const emit = defineEmits(['update:record', 'update:isValid']);
 
 const currentValues = ref({});
 
+
 const columnError = (column) => {
   const val = computed(() => {
     if ( column.required[mode.value] && (currentValues.value[column.name] === undefined || currentValues.value[column.name] === null || currentValues.value[column.name] === '') ) {
@@ -172,8 +185,6 @@ const columnError = (column) => {
 };
 
 
-
-
 const setCurrentValue = (key, value) => {
   currentValues.value[key] = value;
 
@@ -185,8 +196,31 @@ onMounted(() => {
     currentValues.value[key] = props.record[key];
   });
   initFlowbite();
+
+  
 });
 
+const columnOptions = computedAsync(async () => { 
+  return (await Promise.all(
+    Object.values(props.resourceColumns).map(async (column) => {
+      if (column.foreignResource) {
+        const list = await callAdminForthApi({
+          method: 'POST',
+          path: `/get_resource_foreign_data`,
+          body: {
+            resourceId: router.currentRoute.value.params.resourceId,
+            column: column.name,
+            limit: 1000,
+            offset: 0,
+          },
+        });
+        return { [column.name]: list.items };
+      }
+    })
+  )).reduce((acc, val) => Object.assign(acc, val), {})
+
+}, {});
+
 const coreStore = useCoreStore();
 
 const editableColumns = computed(() => {

package/dist/spa/spa/src/router/index.ts

@@ -12,7 +12,9 @@ const router = createRouter({
     {
       path: '/',
       name: 'home',
-      component: HomeView
+      //redirect to login 
+      /* IMPORTANT:ADMINFORTH REDIRECT */
+
     },
     {
       path: '/login',

package/dist/spa/spa/src/stores/core.ts

@@ -42,20 +42,7 @@ export const useCoreStore = defineStore('core', () => {
     user.value = resp.user;
 
     // find homepage:true in menu recuresively
-    if (import.meta.env.DEV){
-      return
-    } else {
-      const homepage = await findHomepage(menu.value);
-      if (homepage) {
-        if (homepage.resourceId) {
-          // redirect to homepage
-          router.push({ name: 'resource-list', params: { resourceId: homepage.resourceId } });
-        } else {
-          // redirect to path
-          router.push(homepage.path);
-        }
-      }
-    }
+    
   }
 
   async function fetchRecord({ resourceId, primaryKey }) {

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

@@ -65,7 +65,7 @@
     </BreadcrumbsWithButtons>
 
     <!-- table -->
-    <div class="relative overflow-x-auto shadow-md sm:rounded-lg dark:shadow-2xl">
+    <div class="relative overflow-x-auto shadow-md dark:shadow-black	 sm:rounded-lg dark:s">
 
 
       <!-- skelet loader -->
@@ -357,7 +357,6 @@ const totalRows = ref(0);
 const allCheckedActions = ref([]);
 const allowedActions = ref({});
 
-
 const DEFAULT_PAGE_SIZE = 10;
 
 const columnsListed = computed(() => coreStore.resourceColumns?.filter(c => c.showIn.includes('list')));

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

@@ -11,7 +11,7 @@
     <div id="authentication-modal" tabindex="-1" class=" overflow-y-auto overflow-x-hidden z-50 min-w-[400px] justify-center items-center md:inset-0 h-[calc(100%-1rem)] max-h-full">
         <div class="relative p-4 w-full max-w-md max-h-full">
             <!-- Modal content -->
-            <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+            <div class="relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black" >
                 <!-- Modal header -->
                 <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
                     <h3 class="text-xl font-semibold text-gray-900 dark:text-white">

package/index.ts

@@ -9,6 +9,13 @@ import ExpressServer from './servers/express.js';
 import {v1 as uuid} from 'uuid';
 import fs from 'fs';
 
+let package_json;
+if (fs.existsSync('../package.json')) {
+  // in prod we are in dist folder
+  package_json = JSON.parse(fs.readFileSync('../package.json', 'utf8'));
+} else {
+  package_json = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
+}
 
 import { AdminForthFilterOperators, AdminForthTypes, AdminForthTypesValues } from './types.js';
 
@@ -568,6 +575,7 @@ class AdminForth {
             usernameField: this.config.auth.usernameField,
           },
           adminUser,
+          version: package_json.version,
         };
       },
     });
@@ -615,6 +623,71 @@ class AdminForth {
         return {...data, options: resource?.options };
       },
     });
+    server.endpoint({
+      method: 'POST',
+      path: '/get_resource_foreign_data',
+      handler: async ({ body, adminUser }) => {
+        const { resourceId, column } = body;
+        if (!this.statuses.dbDiscover) {
+          return { error: 'Database discovery not started' };
+        }
+        if (this.statuses.dbDiscover !== 'done') {
+          return { error : 'Database discovery is still in progress, please try later' };
+        }
+        const resource = this.config.resources.find((res) => res.resourceId == resourceId);
+        if (!resource) {
+          return { error: `Resource ${resourceId} not found` };
+        }
+        const columnConfig = resource.columns.find((col) => col.name == column);
+        if (!columnConfig.foreignResource) {
+          return { error: `Column ${column} in resource ${resourceId} is not a foreign key` };
+        }
+        const targetResourceId = columnConfig.foreignResource.resourceId;
+        const targetResource = this.config.resources.find((res) => res.resourceId == targetResourceId);
+        if (columnConfig.foreignResource.hooks?.beforeDatasourceRequest) {
+          const resp = await column.foreignResource.hooks?.beforeDatasourceRequest({ query: body, adminUser });
+          if (!resp || (!resp.ok && !resp.error)) {
+            throw new Error(`Hook must return object with {ok: true} or { error: 'Error' } `);
+          }
+
+          if (resp.error) {
+            return { error: resp.error };
+          }
+        }
+        const { limit, offset, filters, sort } = body;
+        const dbDataItems = await this.connectors[targetResource.dataSource].getData({
+          resource: targetResource,
+          limit,
+          offset,
+          filters: filters || [],
+          sort: sort || [],
+        });
+        const items = dbDataItems.data.map((item) => {
+          const pk = item[targetResource.columns.find((col) => col.primaryKey).name];
+          const labler = targetResource.itemLabel || ((record) => `${targetResource.label} ${pk}`);
+          return { 
+            value: pk,
+            label: labler(item),
+            _item: item, // user might need it in hook to form new label
+          }
+        });
+        const response = {
+          items
+        };
+        if (columnConfig.foreignResource.hooks?.afterDatasourceRequest) {
+          const resp = await column.foreignResource.hooks?.afterDatasourceRequest({ response, adminUser });
+          if (!resp || (!resp.ok && !resp.error)) {
+            throw new Error(`Hook must return object with {ok: true} or { error: 'Error' } `);
+          }
+
+          if (resp.error) {
+            return { error: resp.error };
+          }
+        }
+        return response;
+      },
+    });
+
     server.endpoint({
       method: 'POST',
       path: '/get_min_max_for_columns',

package/modules/codeInjector.ts

@@ -75,9 +75,8 @@ class CodeInjector {
 
   async rmTmpDir() {
     // remove spa_tmp folder if it is exists
-    const spaTmpPath = CodeInjector.SPA_TMP_PATH;
     try {
-      await fs.promises.rm(spaTmpPath, { recursive: true });
+      await fs.promises.rm(CodeInjector.SPA_TMP_PATH, { recursive: true });
     } catch (e) {
       // ignore
     }
@@ -210,6 +209,24 @@ class CodeInjector {
 
 
     /* generate custom rotes */
+    const homepageMenuItem = this.adminforth.config.menu.find((mi)=>mi.homepage);
+    let childrenHomePageMenuItem = this.adminforth.config.menu.find((mi)=>mi.children && mi.children?.find((mi)=>mi.homepage));
+    let childrenHomepage = childrenHomePageMenuItem?.children?.find((mi)=>mi.homepage)
+    let homePagePath = homepageMenuItem?.path || `resource/${childrenHomepage?.resourceId}`;
+    if (!homePagePath) {
+      homePagePath=this.adminforth.config.menu.filter((mi)=>mi.path)[0]?.path || `resource/${this.adminforth.config.menu.filter((mi)=>mi.children)[0]?.resourceId}` ;
+    }
+
+    
+    
+      
+
+    routes += `{
+      path: '/',
+      name: 'home',
+      //redirect to login 
+      redirect: '/${homePagePath}'
+    },\n`;
     const routerVuePath = path.join(spaTmpPath, 'src', 'router', 'index.ts');
     let routerVueContent = await fs.promises.readFile(routerVuePath, 'utf-8');
     routerVueContent = routerVueContent.replace('/* IMPORTANT:ADMINFORTH ROUTES */', routes);
@@ -217,21 +234,21 @@ class CodeInjector {
     
 
     /* hash checking */
-    const packageLockPath = path.join(spaTmpPath, 'package-lock.json');
-    const packageLock = JSON.parse(await fs.promises.readFile(packageLockPath, 'utf-8'));
-    const lockHash = hashify(packageLock);
+    const spaPackageLockPath = path.join(spaTmpPath, 'package-lock.json');
+    const spaPackageLock = JSON.parse(await fs.promises.readFile(spaPackageLockPath, 'utf-8'));
+    const spaLockHash = hashify(spaPackageLock);
+
     /* customPackageLock */
-    const customPackagePath = path.join('./package.json');
-    const customPackage = JSON.parse(await fs.promises.readFile(customPackagePath, 'utf-8'));
-    const customPackageHash = hashify(customPackage);
+    const usersPackagePath = path.join('./package.json');
+    const usersPackage = JSON.parse(await fs.promises.readFile(usersPackagePath, 'utf-8'));
 
-    const customLockPath = path.join('./package-lock.json');
-    const customLock = JSON.parse(await fs.promises.readFile(customLockPath, 'utf-8'));
-    const customLockHash = hashify(customLock);
+    const usersLockPath = path.join('./package-lock.json');
+    const usersLock = JSON.parse(await fs.promises.readFile(usersLockPath, 'utf-8'));
+    const usersLockHash = hashify(usersLock);
 
     const packagesNamesHash = hashify(packageNames);
 
-    const fullHash = hashify([lockHash, packagesNamesHash, customLockHash]);
+    const fullHash = `${spaLockHash}::${packagesNamesHash}::${usersLockHash}`;
     const hashPath = path.join(spaTmpPath, 'node_modules', '.adminforth_hash');
 
     try {
@@ -239,20 +256,30 @@ class CodeInjector {
       if (existingHash === fullHash) {
         console.log('Hashes match, skipping npm ci/install');
         return;
+      } else {
+        if (verbose) {
+          console.log(`Hashes do not match: existing ${existingHash} new ${fullHash}, proceeding with npm ci/install`);
+        }
       }
     } catch (e) {
       // ignore
+      if (verbose) {
+        console.log('Hash file does not exist, proceeding with npm ci/install');
+      }
     }
 
     await this.runNpmShell({command: 'ci', verbose, cwd: spaTmpPath});
 
     // get packages with version from customPackage
-    const customPackgeNames = [...Object.keys(customPackage.dependencies), ...Object.keys(customPackage.devDependencies || [])].reduce(
-      (acc, packageName) => {
-        const version = customLock.packages[`node_modules/${packageName}`].version;
-        acc.push(`${packageName}@${version}`);
-        return acc;
-      }, []);
+    const IGNORE_PACKAGES = ['tsx', 'typescript', 'express', 'nodemon'];
+    const customPackgeNames = [...Object.keys(usersPackage.dependencies), ...Object.keys(usersPackage.devDependencies || [])]
+      .filter((packageName) => !IGNORE_PACKAGES.includes(packageName))
+      .reduce(
+        (acc, packageName) => {
+          const version = usersLock.packages[`node_modules/${packageName}`].version;
+          acc.push(`${packageName}@${version}`);
+          return acc;
+        }, []);
 
     if (packageNames.length) {
       const npmInstallCommand = `install ${[...packageNames, ...customPackgeNames].join(' ')}`;

package/package.json

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