adminforth 2.0.7-next.3 → 2.1.0-next.10

package/commands/bundle.js

@@ -16,7 +16,7 @@ async function bundle() {
     `);
 
   } catch (e) {
-    console.log(`Running file ${file} failed`, e);
+    console.log(`Running budndle failed`, e);
   }
 }
 

package/commands/cli.js

@@ -8,6 +8,7 @@ import createApp from "./createApp/main.js";
 import generateModels from "./generateModels.js";
 import createPlugin from "./createPlugin/main.js";
 import createComponent from "./createCustomComponent/main.js";
+import createResource from "./createResource/main.js";
 import chalk from "chalk";
 import path from "path";
 import fs from "fs";
@@ -58,6 +59,9 @@ switch (command) {
   case "component":
     createComponent(args);
     break;
+  case "resource":
+    createResource(args);
+    break;
   case "help":
   case "--help":
   case "-h":

package/commands/createApp/templates/Dockerfile.hbs

@@ -3,5 +3,5 @@ WORKDIR /code/
 ADD package.json package-lock.json /code/
 RUN npm ci  
 ADD . /code/
-RUN --mount=type=cache,target=/tmp npx adminforth bundle
+RUN npx adminforth bundle
 CMD ["sh", "-c", "npm run migrate:prod && npm run prod"]

package/commands/createCustomComponent/configUpdater.js

@@ -26,7 +26,6 @@ async function findResourceFilePath(resourceId) {
         throw new Error(`Failed to read resources directory ${resourcesDir}: ${error.message}`);
     }
 
-    console.log(chalk.dim(`Found .ts files to scan: ${tsFiles.join(', ') || 'None'}`));
 
     for (const file of tsFiles) {
         const filePath = path.resolve(resourcesDir, file);
@@ -94,6 +93,7 @@ export async function updateResourceConfig(resourceId, columnName, fieldType, co
     console.log(chalk.dim(`Attempting to update resource config: ${filePath}`));
 
     let content;
+    let injectionLine = null;
     try {
         content = await fs.readFile(filePath, 'utf-8');
     } catch (error) {
@@ -176,11 +176,16 @@ export async function updateResourceConfig(resourceId, columnName, fieldType, co
                 const newComponentValue = b.stringLiteral(componentPathForConfig);
 
                 if (fieldTypeProperty) {
+                    injectionLine = fieldTypeProperty.loc?.start.line ?? null;
                     fieldTypeProperty.value = newComponentValue;
                     console.log(chalk.dim(`Updated '${fieldType}' component path in column '${columnName}'.`));
                 } else {
                     fieldTypeProperty = b.objectProperty(b.identifier(fieldType), newComponentValue);
                     componentsObject.properties.push(fieldTypeProperty);
+                    fieldTypeProperty = componentsObject.properties.find(p =>
+                        n.ObjectProperty.check(p) && n.Identifier.check(p.key) && p.key.name === fieldType
+                    );
+                    injectionLine = fieldTypeProperty.loc?.start.line ?? null;
                     console.log(chalk.dim(`Added '${fieldType}' component path to column '${columnName}'.`));
                 }
 
@@ -197,7 +202,12 @@ export async function updateResourceConfig(resourceId, columnName, fieldType, co
         const outputCode = recast.print(ast).code;
 
         await fs.writeFile(filePath, outputCode, 'utf-8');
-        console.log(chalk.dim(`Successfully updated resource configuration file (preserving formatting): ${filePath}`));
+        console.log(
+          chalk.green(
+            `✅ Successfully updated CRUD injection in resource file: ${filePath}` +
+            (injectionLine !== null ? `:${injectionLine}` : '')
+          )
+        );
 
     } catch (error) {
         console.error(chalk.red(`❌ Error processing resource file: ${filePath}`));
@@ -211,78 +221,106 @@ export async function injectLoginComponent(indexFilePath, componentPath) {
     console.log(chalk.dim(`Reading file: ${indexFilePath}`));
     const content = await fs.readFile(indexFilePath, 'utf-8');
     const ast = recast.parse(content, {
-        parser: typescriptParser,
+      parser: typescriptParser,
     });
-
+  
     let updated = false;
-
+    let injectionLine = null;
+  
     recast.visit(ast, {
-        visitNewExpression(path) {
-            if (
-                n.Identifier.check(path.node.callee) &&
-                path.node.callee.name === 'AdminForth' &&
-                path.node.arguments.length > 0 &&
-                n.ObjectExpression.check(path.node.arguments[0])
-            ) {
-                const configObject = path.node.arguments[0];
-
-                let customizationProp = configObject.properties.find(
-                    p => n.ObjectProperty.check(p) && n.Identifier.check(p.key) && p.key.name === 'customization'
-                );
-
-                if (!customizationProp) {
-                    const customizationObj = b.objectExpression([]);
-                    customizationProp = b.objectProperty(b.identifier('customization'), customizationObj);
-                    configObject.properties.push(customizationProp);
-                    console.log(chalk.dim(`Added missing 'customization' property.`));
-                }
-
-                const customizationValue = customizationProp.value;
-                if (!n.ObjectExpression.check(customizationValue)) return false;
-
-                let loginPageInjections = customizationValue.properties.find(
-                    p => n.ObjectProperty.check(p) && n.Identifier.check(p.key) && p.key.name === 'loginPageInjections'
-                );
-
-                if (!loginPageInjections) {
-                    const injectionsObj = b.objectExpression([]);
-                    loginPageInjections = b.objectProperty(b.identifier('loginPageInjections'), injectionsObj);
-                    customizationValue.properties.push(loginPageInjections);
-                    console.log(chalk.dim(`Added missing 'loginPageInjections'.`));
-                }
-
-                const injectionsValue = loginPageInjections.value;
-                if (!n.ObjectExpression.check(injectionsValue)) return false;
-
-                let underInputsProp = injectionsValue.properties.find(
-                    p => n.ObjectProperty.check(p) && n.Identifier.check(p.key) && p.key.name === 'underInputs'
-                );
-
-                if (underInputsProp) {
-                    underInputsProp.value = b.stringLiteral(componentPath);
-                    console.log(chalk.dim(`Updated 'underInputs' to ${componentPath}`));
-                } else {
-                    injectionsValue.properties.push(
-                        b.objectProperty(b.identifier('underInputs'), b.stringLiteral(componentPath))
-                    );
-                    console.log(chalk.dim(`Added 'underInputs': ${componentPath}`));
-                }
-
-                updated = true;
-                this.abort();
+      visitNewExpression(path) {
+        if (
+          n.Identifier.check(path.node.callee) &&
+          path.node.callee.name === 'AdminForth' &&
+          path.node.arguments.length > 0 &&
+          n.ObjectExpression.check(path.node.arguments[0])
+        ) {
+          const configObject = path.node.arguments[0];
+  
+          const getOrCreateProp = (obj, name) => {
+            let prop = obj.properties.find(
+              p => n.ObjectProperty.check(p) && n.Identifier.check(p.key) && p.key.name === name
+            );
+            if (!prop) {
+              const newObj = b.objectExpression([]);
+              prop = b.objectProperty(b.identifier(name), newObj);
+              obj.properties.push(prop);
+              console.log(chalk.dim(`Added missing '${name}' property.`));
             }
-            return false;
+            return prop.value;
+          };
+  
+          const customization = getOrCreateProp(configObject, 'customization');
+          if (!n.ObjectExpression.check(customization)) return false;
+  
+          const loginPageInjections = getOrCreateProp(customization, 'loginPageInjections');
+          if (!n.ObjectExpression.check(loginPageInjections)) return false;
+  
+          let underInputsProp = loginPageInjections.properties.find(
+            p => n.ObjectProperty.check(p) && n.Identifier.check(p.key) && p.key.name === 'underInputs'
+          );
+  
+          if (underInputsProp) {
+            const currentVal = underInputsProp.value;
+            injectionLine = underInputsProp.loc?.start.line ?? null;
+            if (n.StringLiteral.check(currentVal)) {
+              if (currentVal.value !== componentPath) {
+                underInputsProp.value = b.arrayExpression([
+                  b.stringLiteral(currentVal.value),
+                  b.stringLiteral(componentPath),
+                ]);
+                console.log(chalk.dim(`Converted 'underInputs' to array with existing + new path.`));
+              } else {
+                console.log(chalk.dim(`Component path already present as string. Skipping.`));
+              }
+            } else if (n.ArrayExpression.check(currentVal)) {
+              const exists = currentVal.elements.some(
+                el => n.StringLiteral.check(el) && el.value === componentPath
+              );
+              if (!exists) {
+                currentVal.elements.push(b.stringLiteral(componentPath));
+                console.log(chalk.dim(`Appended new component path to existing 'underInputs' array.`));
+              } else {
+                console.log(chalk.dim(`Component path already present in array. Skipping.`));
+              }
+            } else {
+              console.warn(chalk.yellow(`⚠️ 'underInputs' is not a string or array. Skipping.`));
+              return false;
+            }
+          } else {
+            const newProperty = b.objectProperty(
+                b.identifier('underInputs'), 
+                b.stringLiteral(componentPath)
+              );
+              
+              if (newProperty.loc) {
+                console.log(chalk.dim(`Adding 'underInputs' at line: ${newProperty.loc.start.line}`));
+              }
+              
+              loginPageInjections.properties.push(newProperty);
+              console.log(chalk.dim(`Added 'underInputs': ${componentPath}`));
+          }
+  
+          updated = true;
+          this.abort();
         }
+        return false;
+      }
     });
-
+  
     if (!updated) {
-        throw new Error(`Could not find AdminForth configuration in file: ${indexFilePath}`);
+      throw new Error(`Could not find AdminForth configuration in file: ${indexFilePath}`);
     }
-
+  
     const outputCode = recast.print(ast).code;
     await fs.writeFile(indexFilePath, outputCode, 'utf-8');
-    console.log(chalk.green(`✅ Successfully updated login injection in: ${indexFilePath}`));
-}
+    console.log(
+      chalk.green(
+        `✅ Successfully updated CRUD injection in resource file: ${indexFilePath}` +
+        (injectionLine !== null ? `:${injectionLine}` : '')
+      )
+    );
+  }
 
 
 export async function injectGlobalComponent(indexFilePath, injectionType, componentPath) {
@@ -293,7 +331,7 @@ export async function injectGlobalComponent(indexFilePath, injectionType, compon
     });
 
     let updated = false;
-    
+    let injectionLine = null;
     console.log(JSON.stringify(injectionType));
     recast.visit(ast, {
         visitNewExpression(path) {
@@ -315,7 +353,7 @@ export async function injectGlobalComponent(indexFilePath, injectionType, compon
                     configObject.properties.push(customizationProp);
                     console.log(chalk.dim(`Added missing 'customization' property.`));
                 }
-
+                
                 const customizationValue = customizationProp.value;
                 if (!n.ObjectExpression.check(customizationValue)) return false;
 
@@ -338,7 +376,7 @@ export async function injectGlobalComponent(indexFilePath, injectionType, compon
                 );
                 if (injectionProp) {
                     const currentValue = injectionProp.value;
-          
+                    injectionLine = injectionProp.loc?.start.line ?? null;
                     if (n.ArrayExpression.check(currentValue)) {
                       currentValue.elements.push(b.stringLiteral(componentPath));
                       console.log(chalk.dim(`Added '${componentPath}' to existing array in '${injectionType}'`));
@@ -374,7 +412,12 @@ export async function injectGlobalComponent(indexFilePath, injectionType, compon
 
     const outputCode = recast.print(ast).code;
     await fs.writeFile(indexFilePath, outputCode, 'utf-8');
-    console.log(chalk.green(`✅ Successfully updated global injection '${injectionType}' in: ${indexFilePath}`));
+    console.log(
+      chalk.green(
+        `✅ Successfully updated CRUD injection in resource file: ${indexFilePath}` +
+        (injectionLine !== null ? `:${injectionLine}` : '')
+      )
+    );
 }
 
 export async function updateCrudInjectionConfig(resourceId, crudType, injectionPosition, componentPathForConfig, isThin) {
@@ -382,6 +425,7 @@ export async function updateCrudInjectionConfig(resourceId, crudType, injectionP
     console.log(chalk.dim(`Attempting to update resource CRUD injection: ${filePath}`));
   
     let content;
+    let injectionLine = null;
     try {
       content = await fs.readFile(filePath, 'utf-8');
     } catch (error) {
@@ -439,7 +483,7 @@ export async function updateCrudInjectionConfig(resourceId, crudType, injectionP
             );
             pageInjections.properties.push(crudProp);
           }
-  
+          injectionLine = crudProp.loc?.start.line ?? null;
           const crudValue = crudProp.value;
           if (!n.ObjectExpression.check(crudValue)) return false;
   
@@ -458,11 +502,23 @@ export async function updateCrudInjectionConfig(resourceId, crudType, injectionP
           ]);
           
           if (injectionProp) {
-            injectionProp.value = newInjectionObject;
-            console.log(chalk.dim(`Updated '${injectionPosition}' injection for '${crudType}'.`));
+            if (n.ArrayExpression.check(injectionProp.value)) {
+              injectionProp.value.elements.push(newInjectionObject);
+              console.log(chalk.dim(`Appended new injection to array at '${injectionPosition}' for '${crudType}'.`));
+            }
+            else if (n.ObjectExpression.check(injectionProp.value)) {
+              injectionProp.value = b.arrayExpression([injectionProp.value, newInjectionObject]);
+              console.log(chalk.dim(`Converted to array and added new injection at '${injectionPosition}' for '${crudType}'.`));
+            }
+            else {
+              injectionProp.value = b.arrayExpression([newInjectionObject]);
+              console.log(chalk.yellow(`⚠️ Replaced invalid injection at '${injectionPosition}' with array.`));
+            }
           } else {
-            crudValue.properties.push(b.objectProperty(b.identifier(injectionPosition), newInjectionObject));
-            console.log(chalk.dim(`Added '${injectionPosition}' injection for '${crudType}'.`));
+            crudValue.properties.push(
+              b.objectProperty(b.identifier(injectionPosition), b.arrayExpression([newInjectionObject]))
+            );
+            console.log(chalk.dim(`Added new array of injections at '${injectionPosition}' for '${crudType}'.`));
           }
   
           updateApplied = true;
@@ -477,7 +533,12 @@ export async function updateCrudInjectionConfig(resourceId, crudType, injectionP
   
       const outputCode = recast.print(ast).code;
       await fs.writeFile(filePath, outputCode, 'utf-8');
-      console.log(chalk.dim(`✅ Successfully updated CRUD injection in resource file: ${filePath}`));
+      console.log(
+        chalk.green(
+          `✅ Successfully updated CRUD injection in resource file: ${filePath}` +
+          (injectionLine !== null ? `:${injectionLine}` : '')
+        )
+      );
   
     } catch (error) {
       console.error(chalk.red(`❌ Error processing resource file: ${filePath}`));

package/commands/createCustomComponent/main.js

@@ -170,6 +170,14 @@ async function handleCrudPageInjectionCreation(config, resources) {
   });
   if (injectionPosition === '__BACK__') return handleCrudPageInjectionCreation(config, resources);
 
+  const additionalName = await input({
+    message: 'Enter additional name (optional, e.g., "CustomExport"):',
+    validate: (value) => {
+      if (!value) return true;
+      return /^[A-Za-z0-9_-]+$/.test(value) || 'Only alphanumeric characters, hyphens or underscores are allowed.';
+    },
+  });
+
   const isThin = await select({
     message: 'Will this component be thin enough to fit on the same page with list (so list will still shrink)?',
     choices: [
@@ -177,9 +185,11 @@ async function handleCrudPageInjectionCreation(config, resources) {
       { name: 'No', value: false },
     ],
   });
-
+  const formattedAdditionalName = additionalName
+    ? additionalName[0].toUpperCase() + additionalName.slice(1)
+    : '';
   const safeResourceLabel = sanitizeLabel(selectedResource.label)
-  const componentFileName = `${safeResourceLabel}${crudType.charAt(0).toUpperCase() + crudType.slice(1)}${injectionPosition.charAt(0).toUpperCase() + injectionPosition.slice(1)}.vue`;
+  const componentFileName = `${safeResourceLabel}${crudType.charAt(0).toUpperCase() + crudType.slice(1)}${injectionPosition.charAt(0).toUpperCase() + injectionPosition.slice(1) + formattedAdditionalName}.vue`;
   const componentPathForConfig = `@@/${componentFileName}`;
 
   try {

package/commands/createCustomComponent/templates/customCrud/afterBreadcrumbs.vue.hbs

@@ -5,7 +5,7 @@
       @click="handleClick"
       class="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800"
     >
-      Example
+      \{{ $t('Example') }} 
     </button>
   </div>
 </template>
@@ -14,9 +14,17 @@
 import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import adminforth from '@/adminforth';
+import { AdminForthResourceCommon, AdminUser } from "@/types/Common";
 
 const { t } = useI18n();
 
+const props = defineProps<{
+  record: any
+  resource: AdminForthResourceCommon
+  adminUser: AdminUser
+  meta?: any
+}>();
+
 onMounted(() => {
   // Logic on mount if needed
 });

package/commands/createCustomComponent/templates/customCrud/beforeBreadcrumbs.vue.hbs

@@ -5,7 +5,7 @@
       @click="handleClick"
       class="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800"
     >
-      Example
+      \{{ $t('Example') }}
     </button>
   </div>
 </template>
@@ -14,9 +14,17 @@
 import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import adminforth from '@/adminforth';
+import { AdminForthResourceCommon, AdminUser } from "@/types/Common";
 
 const { t } = useI18n();
 
+const props = defineProps<{
+  record: any
+  resource: AdminForthResourceCommon
+  adminUser: AdminUser
+  meta?: any
+}>();
+
 onMounted(() => {
   // Logic on mount if needed
 });

package/commands/createCustomComponent/templates/customCrud/bottom.vue.hbs

@@ -1,61 +1,38 @@
 <template>
-  <div class="overflow-auto p-4">
-    <table class="min-w-full text-sm text-left 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">
-        <tr>
-          <th scope="col" class="px-6 py-3" v-for="header in headers" :key="header">
-            {{ header }}
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          v-for="row 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"
-        >
-          <td class="px-6 py-4" v-for="cell in row.cells" :key="cell">
-            {{ cell }}
-          </td>
-        </tr>
-      </tbody>
-    </table>
+  <div class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
+    <button
+      type="button"
+      @click="handleClick"
+      class="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800"
+    >
+      {{ $t('Example') }}
+    </button>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import adminforth from '@/adminforth';
+import { AdminForthResourceCommon, AdminUser } from "@/types/Common";
 
-const headers = [
-  'ID',
-  'Name',
-  'Email',
-  'Phone',
-  'Address',
-  'City',
-  'Country',
-  'Company',
-  'Position',
-  'Status',
-];
+const { t } = useI18n();
 
-const rows = Array.from({ length: 50 }, (_, i) => ({
-  id: i + 1,
-  cells: [
-    i + 1,
-    `Name ${i + 1}`,
-    `user${i + 1}@example.com`,
-    `+1-555-010${i.toString().padStart(2, '0')}`,
-    `Address ${i + 1}`,
-    `City ${i + 1}`,
-    `Country ${i + 1}`,
-    `Company ${i + 1}`,
-    `Position ${i + 1}`,
-    i % 2 === 0 ? 'Active' : 'Inactive',
-  ],
-}));
+const props = defineProps<{
+  record: any
+  resource: AdminForthResourceCommon
+  adminUser: AdminUser
+  meta?: any
+}>();
 
 onMounted(() => {
-  console.log('Table mounted. Rows:', rows.length);
+  // Logic on mount if needed
 });
+
+function handleClick() {
+  adminforth.alert({
+    message: t('Confirmed'),
+    variant: 'success',
+  });
+}
 </script>

package/commands/createCustomComponent/templates/customCrud/threeDotsDropdownItems.vue.hbs

@@ -4,9 +4,8 @@
       v-for="item in menuItems"
       :key="item.label"
       @click="item.action"
-      class="w-full text-left text-sm px-4 py-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"
     >
-      {{ t(item.label) }}
+      \{{ item.label }}
     </button>
   </div>
 </template>
@@ -15,9 +14,17 @@
 import { useI18n } from 'vue-i18n';
 import adminforth from '@/adminforth';
 import { onMounted } from 'vue';
+import { AdminForthResourceCommon, AdminUser } from "@/types/Common";
 
 const { t } = useI18n();
 
+const props = defineProps<{
+  record: any
+  resource: AdminForthResourceCommon
+  adminUser: AdminUser
+  meta?: any
+}>();
+
 const menuItems = [
   {
     label: 'Show Success Alert',
@@ -27,25 +34,7 @@ const menuItems = [
         variant: 'success',
       });
     },
-  },
-  {
-    label: 'Show Warning Alert',
-    action: () => {
-      adminforth.alert({
-        message: t('Warning Alert'),
-        variant: 'warning',
-      });
-    },
-  },
-  {
-    label: 'Show Error Alert',
-    action: () => {
-      adminforth.alert({
-        message: t('Error Alert'),
-        variant: 'danger',
-      });
-    },
-  },
+  }
 ];
 
 onMounted(() => {

package/commands/createCustomComponent/templates/customFields/list.vue.hbs

@@ -1,18 +1,24 @@
 <template>
-    <div v-if='record[column.name]'
+    <div
         class="text-red-500"
-    >\{{ record[column.name] }}</div>
+    >\{{ record[props.column.name] }}</div>
 </template> 
 
-<script setup>
+<script setup lang="ts">
 
-    defineProps({
-    record: Object,
-    resource: Object,
-    adminUser: Object,
-    meta: Object,
-    column: Object
-    });
+    import type {
+        AdminForthResourceColumnCommon,
+        AdminForthResourceCommon,
+        AdminUser,
+    } from "@/types/Common";
+
+    const props = defineProps<{
+        column: AdminForthResourceColumnCommon;
+        record: any;
+        meta: any;
+        resource: AdminForthResourceCommon;
+        adminUser: AdminUser;
+    }>();
 
 </script>
 

package/commands/createCustomComponent/templates/customFields/show.vue.hbs

@@ -1,17 +1,23 @@
 <template>
-    <div v-if='record[column.name]'
+    <div
         class="text-red-500"
-    >\{{ record[column.name] }}</div>
+    >\{{ record[props.column.name] }}</div>
 </template> 
 
-<script setup>
+<script setup lang="ts">
 
-    defineProps({
-    record: Object,
-    resource: Object,
-    adminUser: Object,
-    meta: Object,
-    column: Object
-    });
+    import type {
+        AdminForthResourceColumnCommon,
+        AdminForthResourceCommon,
+        AdminUser,
+    } from "@/types/Common";
+
+    const props = defineProps<{
+        column: AdminForthResourceColumnCommon;
+        record: any;
+        meta: any;
+        resource: AdminForthResourceCommon;
+        adminUser: AdminUser;
+    }>();
 
 </script>

package/commands/createCustomComponent/templates/global/everyPageBottom.vue.hbs

@@ -1,11 +1,17 @@
 <template>
   <div class="flex items-center justify-center text-gray-900 dark:text-gray-400 p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
-    {{reason}}
+    Page Bottom Text
   </div>
 </template>
 
 <script setup>
-    defineProps({
-        reason: String
-    });
+import { onMounted } from 'vue';
+
+const props = defineProps<{
+  reason: String
+}>();
+
+onMounted(() => {
+  // Logic on mount if needed
+});
 </script>