vue-ready-modular 1.0.4 → 2.0.0

package/bin/cli.js

@@ -1,12 +1,18 @@
 #!/usr/bin/env node
 
-import { createModule } from "../lib/generator.js";
+import { makeCommand } from "../commands/make.command.js";
 
 const args = process.argv.slice(2);
 
-if (args[0] !== "make" || !args[1]) {
-  console.log("Usage: vue-modular make <module-name>");
-  process.exit(1);
-}
+const [command, input] = args;
 
-createModule(args[1]);
+switch (command) {
+  case "make":
+    makeCommand(input);
+    break;
+
+  default:
+    console.log("Usage:");
+    console.log("vue-modular make module");
+    console.log("vue-modular make module:submodule");
+}

package/commands/make.command.js

@@ -0,0 +1,16 @@
+import { generateModule } from "../generators/module.generator.js";
+import { generateSubModule } from "../generators/submodule.generator.js";
+
+export function makeCommand(input) {
+  if (!input) {
+    console.error("Module name required");
+    process.exit(1);
+  }
+
+  if (input.includes(":")) {
+    const [parent, child] = input.split(":");
+    generateSubModule(parent, child);
+  } else {
+    generateModule(input);
+  }
+}

package/engine/blueprint.engine.js

@@ -0,0 +1,33 @@
+import path from "path";
+import { createDir, createFile } from "../lib/utils/file.js";
+
+function renderPath(templatePath, ctx) {
+  let output = templatePath;
+
+  Object.keys(ctx).forEach((key) => {
+    output = output.replaceAll(`{{${key}}}`, ctx[key]);
+  });
+
+  return output;
+}
+
+export function generateFromBlueprint(ctx, blueprint) {
+  const { basePath, folders = [], files = [] } = blueprint;
+
+  // Create folders
+  folders.forEach((folder) => {
+    const full = path.join(basePath, folder);
+    createDir(full);
+  });
+
+  // Create files
+  files.forEach((file) => {
+    const filePath = renderPath(file.path, ctx);
+
+    const full = path.join(basePath, filePath);
+
+    const content = file.template(ctx);
+
+    createFile(full, content);
+  });
+}

package/generators/module.generator.js

@@ -0,0 +1,62 @@
+import path from "path";
+import fs from "fs";
+
+import { generateFromBlueprint } from "../engine/blueprint.engine.js";
+import { capitalize } from "../lib/utils/string.js";
+
+import indexTemplate from "../lib/templates/index.template.js";
+import routesTemplate from "../lib/templates/routes.template.js";
+import storeTemplate from "../lib/templates/store.template.js";
+import pageTemplate from "../lib/templates/page.template.js";
+import formModalTemplate from "../lib/templates/modal-form.template.js";
+import viewModalTemplate from "../lib/templates/modal-view.template.js";
+
+
+export function generateModule(name) {
+  const module = name.toLowerCase();
+  const Module = capitalize(module);
+
+  const basePath = path.join(process.cwd(), "src/modules", module);
+
+  if (fs.existsSync(basePath)) {
+    console.error(`❌ Module "${module}" already exists`);
+    process.exit(1);
+  }
+
+  const ctx = {
+    name: module,
+    Name: Module,
+  };
+
+  generateFromBlueprint(ctx, {
+    basePath,
+
+    folders: [
+      "stores",
+      "pages/components",
+    ],
+
+    files: [
+      { path: "index.js", template: indexTemplate },
+      { path: "routes.js", template: routesTemplate },
+
+      { path: "stores/{{Name}}Store.js", template: storeTemplate },
+
+      {
+        path: "pages/{{Name}}Page.vue",
+        template: pageTemplate,
+      },
+      {
+        path: "pages/components/FormModal.vue",
+        template: formModalTemplate,
+      },
+      {
+        path: "pages/components/ViewModal.vue",
+        template: viewModalTemplate,
+      },
+
+    ],
+  });
+
+  console.log(`✅ Module "${module}" created`);
+}

package/generators/submodule.generator.js

@@ -0,0 +1,95 @@
+import path from "path";
+import fs from "fs";
+
+import { generateFromBlueprint } from "../engine/blueprint.engine.js";
+import { capitalize, plural, toKebabCase } from "../lib/utils/string.js";
+
+import pageTemplate from "../lib/templates/page.template.js";
+import formModalTemplate from "../lib/templates/modal-form.template.js";
+import viewModalTemplate from "../lib/templates/modal-view.template.js";
+import storeTemplate from "../lib/templates/store.template.js";
+
+export function generateSubModule(parentName, subName) {
+  const parent = parentName.toLowerCase();
+  const sub = subName.toLowerCase();
+
+  const Parent = capitalize(parent);
+  const Sub = capitalize(sub);
+
+  const parentPath = path.join(process.cwd(), "src/modules", parent);
+
+  if (!fs.existsSync(parentPath)) {
+    console.error(`❌ Parent module "${parent}" does not exist`);
+    process.exit(1);
+  }
+
+  const ctx = {
+    name: sub,
+    Name: Sub,
+    subName,
+    parent,
+    Parent,
+    Names: plural(Sub),
+  };
+
+  function appendRoute(parentPath, subName) {
+    const routesFile = path.join(parentPath, "routes.js");
+
+    if (!fs.existsSync(routesFile)) return;
+
+    let content = fs.readFileSync(routesFile, "utf-8");
+
+    // Add import line if not exists
+    const importLine = `import ${subName}Page from './pages/${subName}Page.vue'`;
+    if (!content.includes(importLine)) {
+      content = importLine + "\n" + content;
+    }
+
+    // Route block to append
+    const routeBlock = `
+      {
+        path: '${plural(toKebabCase(subName))}',
+        name: '${capitalize(subName)} List',
+        component: ${subName}Page,
+        meta: {
+          permissions: ['${sub}.view', '${sub}.create', '${sub}.edit', '${sub}.delete'],
+        },
+      },`;
+
+    // Insert before the closing bracket of children array
+    content = content.replace(
+      /children:\s*\[([\s\S]*?)\]/m,
+      (match, inner) => `children: [${inner}${routeBlock}\n]`,
+    );
+
+    fs.writeFileSync(routesFile, content);
+  }
+
+  generateFromBlueprint(ctx, {
+    basePath: parentPath,
+
+    folders: [`pages/${subName}Parts`],
+
+    files: [
+      { path: "stores/{{subName}}Store.js", template: storeTemplate },
+
+      {
+        path: `pages/{{subName}}Page.vue`,
+        template: pageTemplate,
+      },
+
+      {
+        path: `pages/{{subName}}Parts/FormModal.vue`,
+        template: formModalTemplate,
+      },
+      {
+        path: `pages/{{subName}}Parts/ViewModal.vue`,
+        template: viewModalTemplate,
+      },
+    ],
+  });
+
+  appendRoute(parentPath, subName);
+
+  console.log(`✅ Submodule "${sub}" created in "${parent}"`);
+}

package/lib/templates/modal-form.template.js

@@ -0,0 +1,85 @@
+// lib/templates/add-modal.template.js
+export default ({ name, Name, subName = null, parent = null }) => `
+<template>
+  <BaseModal
+    :isVisible="store.isModal"
+    :title="store.title"
+    @close="store.handleToggleModal"
+    :className="'w-full xl:max-w-[50vw]'"
+  >
+    <ScrollableLayout height="680px">
+
+     <form @submit.prevent="handleSubmit" class="space-y-4">
+
+        <div class="space-y-2">
+          <BaseLabel for="name">Name</BaseLabel>
+          <BaseInput
+            id="name"
+            v-model="formData.name"
+            :placeholder="'Enter ${subName} name'"
+            :required="true"
+          />
+        </div>
+
+
+
+        <!-- Actions -->
+        <div class="flex justify-end gap-2 py-5">
+          <BaseButton
+            class="bg-yellow-600 hover:bg-yellow-700"
+            type="button"
+            @click="store.handleToggleModal"
+          >Cancel</BaseButton>
+          <BaseButton type="submit" :disabled="submitLoading || updateLoading">
+            <span v-if="submitLoading || updateLoading">{{ submitSavingText }}</span>
+            <span v-else>{{ submitText }}</span>
+          </BaseButton>
+        </div>
+      </form>
+    </ScrollableLayout>
+
+  </BaseModal>
+</template>
+
+<script setup>
+
+import { useCrudForm } from '@/shared/composables/useCrudForm'
+import { useCrudSubmit } from '@/shared/composables/useCrudSubmit'
+import { useCrudMutations } from '@/shared/composables/useCrudMutations'
+
+const props = defineProps({
+  extraData: {
+    type: Object,
+    default: () => ({}),
+  },
+  store: {
+    type: Object,
+    required: true,
+  },
+})
+
+
+const defaultFormData = {
+  name: 'Test Name',
+}
+
+// API
+const api = useCrudMutations(props.store.moduleName, {
+  onSuccess() {
+    props.store.handleToggleModal()
+    resetForm()
+  },
+})
+
+
+const { formData, resetForm } = useCrudForm(props.store, defaultFormData)
+
+// SUBMIT
+const { handleSubmit, submitLoading, updateLoading, submitText, submitSavingText } = useCrudSubmit(
+  props.store,
+  api,
+  formData,
+  resetForm
+)
+</script>
+`;

package/lib/templates/modal-view.template.js

@@ -1,13 +1,14 @@
 // lib/templates/view-modal.template.js
-export default ({ name, Name }) => `
+export default ({ name, Name, subName=null, parent = null }) => `
 <template>
   <BaseModal
     :isVisible="store.isViewModal"
     :title="\`View \${store.moduleName} Details\`"
-    :maxWidth="\`\${store.modalWidth || '60vw'}\`"
     @close="store.handleToggleModal"
+    :className="'max-w-[95vw] xl:max-w-[80vw]'"
   >
-    <ViewModalLayout>
+    <ScrollableLayout>
+      <pre>{{ store.item }}</pre>
       <div class="space-y-2">
         <p class="text-lg">
           <strong>ID:</strong>
@@ -27,33 +28,18 @@ export default ({ name, Name }) => `
         </p>
       </div>
 
-      <!-- Related Items -->
-      <h2 class="text-lg font-semibold py-3">
-        {{ store.item?.name }} Clients
-      </h2>
-
-      <BaseTable
-        v-if="store.item?.clients"
-        :columns="columns"
-        :rows="store.item.clients"
-      />
-    </ViewModalLayout>
+    
+    </ScrollableLayout>
   </BaseModal>
 </template>
 
 <script setup>
-import { use${Name}Store } from '@/modules/${name}/store/${name}Store'
-import ViewModalLayout from '@/shared/components/ui/ViewModalLayout.vue'
-import { useCrudTable } from '@/shared/composables/useCrudTable'
-
-const store = use${Name}Store()
+defineProps({
+  store: {
+    type: Object,
+    required: true,
+  },
+})
 
-const { columns } = useCrudTable(store, [
-  { key: 'name', label: 'Client' },
-  { key: 'email', label: 'Email' },
-  { key: 'phone', label: 'Phone' },
-  { key: 'client_id', label: 'Client ID' },
-  { key: 'country', label: '${Name}' },
-])
 </script>
 `;

package/lib/templates/page.template.js

@@ -1,15 +1,10 @@
-// lib/templates/page.template.js
-import { plural, capitalize } from "../utils/string.js";
-
-export default ({ name, Name }) => {
-  const pluralName = capitalize(plural(Name)); // Country -> Countries
-
+export default ({ name, Name, parent = null, subName = null }) => {
   return `<template>
   <div class="min-h-screen bg-gray-50">
     <!-- Page Header -->
     <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-      <div>
-        <PageTitle>{{ store.moduleName }} List</PageTitle>
+      <div class="capitalize">
+        <PageTitle>{{ store.moduleName }} Management</PageTitle>
       </div>
       <BaseButton @click="store.handleToggleModal('add')">
         Add {{ store.moduleName }}
@@ -24,8 +19,10 @@ export default ({ name, Name }) => {
           v-if="selectedIds.length"
           class="bg-red-600 text-white hover:bg-red-700"
           @click="bulkDelete"
+          :disabled="removeItemsLoading"
         >
-          Delete Selected ({{ selectedIds.length }})
+          <span v-if="removeItemsLoading">Deleting...</span>
+          <span v-else>Delete Selected ({{ selectedIds.length }})</span>
         </BaseButton>
       </div>
 
@@ -33,14 +30,16 @@ export default ({ name, Name }) => {
       <TableFilters
         :filters="filters"
         :has-active-filters="hasActiveFilters"
+         :available-filters="availableFilters"
         @reset="resetFilters"
       />
     </div>
 
     <!-- Content Card -->
     <div class="rounded-lg bg-white shadow-sm">
+      <BaseTableSkeleton v-if="isLoading" :columns="columns.length" :rows="perPage" />
       <BaseTable
-        v-if="!isLoading"
+        v-else
         :columns="columns"
         :rows="rows"
         show-actions
@@ -58,7 +57,7 @@ export default ({ name, Name }) => {
             <i class="fa fa-pencil"></i>
           </button>
 
-          <button @click="onDelete(row)" class="text-red-600 cursor-pointer">
+          <button @click="confirmDelete(row.id)" class="text-red-600 cursor-pointer">
             <i class="fa fa-trash"></i>
           </button>
         </template>
@@ -75,19 +74,15 @@ export default ({ name, Name }) => {
         @update:perPage="setPerPage"
       />
 
-      <AddModal />
-      <EditModal />
-      <ViewModal />
-      <DeleteModal />
+       <FormModal :extraData="extraData" :store="store" />
+      <ViewModal :store="store" />
     </div>
   </div>
 </template>
 
 <script setup>
-import { computed, defineAsyncComponent } from 'vue'
-import { use${pluralName}Query } from '../queries/use${pluralName}Query'
-import { use${Name}Store } from '../stores/${name}Store'
-import { use${Name}Mutations } from '../queries/use${Name}Mutations'
+import {  computed, defineAsyncComponent } from 'vue'
+import { use${parent ? subName : Name}Store } from '@/modules/${parent || name}/stores/${parent ? subName : Name}Store'
 
 import { usePagination } from '@/shared/composables/usePagination'
 import { useBulkDelete } from '@/shared/composables/useBulkDelete'
@@ -95,13 +90,18 @@ import { useCrudTable } from '@/shared/composables/useCrudTable'
 import { useTableFilters } from '@/shared/composables/useTableFilters'
 
 import TableFilters from '@/shared/components/ui/TableFilters.vue'
+import { useDeleteWithConfirm } from '@/shared/composables/useDeleteWithConfirm'
+import { useCrudMutations } from '@/shared/composables/useCrudMutations'
+import { useCrudQuery } from '@/shared/composables/useCrudQuery'
+import { useSyncDynamicFilters } from '@/shared/composables/useSyncDynamicFilters'
+
+
 
-const ViewModal = defineAsyncComponent(() => import('./components/ViewModal.vue'))
-const AddModal = defineAsyncComponent(() => import('./components/AddModal.vue'))
-const EditModal = defineAsyncComponent(() => import('./components/EditModal.vue'))
-const DeleteModal = defineAsyncComponent(() => import('./components/DeleteModal.vue'))
+const ViewModal = defineAsyncComponent(() => import('./${!parent ? "components" : `${subName}Parts`}/ViewModal.vue'))
+const FormModal = defineAsyncComponent(() => import('./${!parent ? "components" : `${subName}Parts`}/FormModal.vue'))
 
-const store = use${Name}Store()
+
+const store = use${parent ? subName : Name}Store()
 
 /* ---------------- Filters ---------------- */
 const { filters, hasActiveFilters, resetFilters } = useTableFilters({
@@ -115,23 +115,32 @@ const pagination = usePagination()
 const { page, perPage, total, showing, links, setPage, setPerPage } = pagination
 
 /* ---------------- Query ---------------- */
-const { data, isLoading } = use${pluralName}Query(page, perPage, filters)
+const { data, rows,extraData, tableColumns, availableFilters, isLoading } = useCrudQuery(
+store.moduleName, 
+page,
+perPage, 
+filters
+)
 pagination.bindMeta(data)
+useSyncDynamicFilters(availableFilters, filters)
 
 /* ---------------- Mutations ---------------- */
-const { removeItems } = use${Name}Mutations(store.moduleName)
+const { remove, removeItems, removeItemsLoading } = useCrudMutations(store.moduleName)
 
 /* ---------------- Bulk Delete ---------------- */
-const { selectedIds, toggleAll, toggleRow, bulkDelete } = useBulkDelete(removeItems, {
-  confirmText: 'Are you sure to delete selected records?',
-})
+const { selectedIds, toggleAll, toggleRow, bulkDelete } = useBulkDelete(removeItems)
 
 /* ---------------- Table ---------------- */
-const { columns, onView, onEdit, onDelete } = useCrudTable(store, [
-  { key: 'name', label: '${Name}' },
-])
 
-const rows = computed(() => data.value?.data?.data ?? [])
+const computedFields = computed(() => {
+  const cols = tableColumns.value
+  return Array.isArray(cols) ? cols : []
+})
+
+const { confirmDelete } = useDeleteWithConfirm(remove)
+
+const { columns, onView, onEdit } = useCrudTable(store, computedFields)
+
 </script>
 `;
 };

package/lib/templates/routes.template.js

@@ -2,7 +2,7 @@ import { plural } from "../utils/string.js";
 
 export default ({ name, Name }) => {
   const pathName = plural(name); // e.g., 'country' → 'countries'
-  const routeName = `${Name}List`; // e.g., 'CountryList'
+  const routeName = `${Name} List`; // e.g., 'CountryList'
 
   return `import ${Name}Page from './pages/${Name}Page.vue'
 import DashboardLayout from '@/shared/layouts/DashboardLayout.vue'
@@ -11,12 +11,17 @@ export default [
   {
     path: '/${pathName}',
     component: DashboardLayout,
-    meta: { requiresAuth: true, roles: ['super_admin','admin','recruiter'] },
+    meta: {
+      requiresAuth: true,
+    },
     children: [
       {
         path: '',
         name: '${routeName}',
         component: ${Name}Page,
+        meta: {
+          permissions: ['${name}.view', '${name}.create', '${name}.edit', '${name}.delete'],
+        },
       },
     ],
   },

package/lib/templates/store.template.js

@@ -1,28 +1,28 @@
-export default ({ name, Name }) => `import { defineStore } from 'pinia'
+export default ({  name, Name, subName=null }) => `import { defineStore } from 'pinia'
 import { useModalHelpers } from '@/shared/composables/useModalHelpers'
 
-export const use${Name}Store = defineStore('${name}', () => {
+export const use${subName || Name}Store = defineStore('${subName || Name}', () => {
   const {
     item,
+    type,
     isModal,
     isViewModal,
     isEditModal,
-    isDeleteModal,
+    title,
     handleToggleModal,
     handleReset,
   } = useModalHelpers()
 
-  const moduleName = '${Name}'
-  const modalWidth = '30vw'
+  const moduleName = '${subName || name}'
 
   return {
     item,
+    type,
     isModal,
     isViewModal,
     isEditModal,
-    isDeleteModal,
     moduleName,
-    modalWidth,
+    title,
     handleToggleModal,
     handleReset,
   }

package/lib/utils/string.js

@@ -1,7 +1,13 @@
 // lib/utils/string.js
-import pluralize from 'pluralize'
+import pluralize from "pluralize";
 
-export const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1)
+export const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 
 // pluralize dynamically
-export const plural = (str) => pluralize(str.toLowerCase())
+export const plural = (str) => pluralize(str.toLowerCase());
+
+export const toKebabCase = (str) => {
+  return str
+    .replace(/([a-z])([A-Z])/g, "$1-$2") // CountryDetail -> Country-Detail
+    .toLowerCase(); // country-detail
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-ready-modular",
-  "version": "1.0.4",
+  "version": "2.0.0",
   "description": "Vue.js module generator",
   "main": "lib/generator.js",
   "bin": {

package/lib/generator.js

@@ -1,99 +0,0 @@
-import path from "path";
-import fs from "fs";
-import { plural, capitalize } from "./utils/string.js";
-
-import { createDir, createFile } from "./utils/file.js";
-
-// Templates
-import indexTemplate from "./templates/index.template.js";
-import routesTemplate from "./templates/routes.template.js";
-import storeTemplate from "./templates/store.template.js";
-import dataTemplate from "./templates/data.template.js";
-import serviceTemplate from "./templates/service.template.js";
-import queryTemplate from "./templates/query.template.js";
-import mutationTemplate from "./templates/mutation.template.js";
-import pageTemplate from "./templates/page.template.js";
-import addModalTemplate from "./templates/modal-add.template.js";
-import commonFormTemplate from "./templates/modal-common-form.template.js";
-import editModalTemplate from "./templates/modal-edit.template.js";
-import viewModalTemplate from "./templates/modal-view.template.js";
-import deleteModalTemplate from "./templates/modal-delete.template.js";
-
-/**
- * Generates a modular Vue.js module with a full structure.
- * @param {string} name - Module name (e.g., "country")
- */
-export function createModule(name) {
-  const module = name.toLowerCase();
-  const Module = capitalize(module);
-
-  const basePath = path.join(process.cwd(), "src/modules", module);
-
-  // Prevent overwriting existing module
-  if (fs.existsSync(basePath)) {
-    console.error(`❌ Module "${module}" already exists`);
-    process.exit(1);
-  }
-
-  // -----------------------------
-  // 1. Create folder structure
-  // -----------------------------
-  const folders = [
-    `${basePath}/stores`,
-    `${basePath}/pages/components`,
-    `${basePath}/data`,
-    `${basePath}/services`,
-    `${basePath}/queries`,
-  ];
-
-  folders.forEach(createDir);
-
-  // -----------------------------
-  // 2. Prepare template context
-  // -----------------------------
-  const ctx = { name: module, Name: Module };
-
-  // -----------------------------
-  // 3. Create core module files
-  // -----------------------------
-  createFile(`${basePath}/index.js`, indexTemplate(ctx));
-  createFile(`${basePath}/routes.js`, routesTemplate(ctx));
-  createFile(`${basePath}/stores/${module}Store.js`, storeTemplate(ctx));
-  createFile(`${basePath}/data/${module}Data.js`, dataTemplate(ctx));
-  createFile(`${basePath}/services/${module}Service.js`, serviceTemplate(ctx));
-  createFile(
-    `${basePath}/queries/use${capitalize(plural(Module))}Query.js`,
-    queryTemplate(ctx)
-  );
-  createFile(
-    `${basePath}/queries/use${Module}Mutations.js`,
-    mutationTemplate(ctx)
-  );
-
-  // -----------------------------
-  // 4. Create page & modal components
-  // -----------------------------
-  createFile(`${basePath}/pages/${Module}Page.vue`, pageTemplate(ctx));
-  createFile(
-    `${basePath}/pages/components/AddModal.vue`,
-    addModalTemplate(ctx)
-  );
-  createFile(
-    `${basePath}/pages/components/CommonForm.vue`,
-    commonFormTemplate(ctx)
-  );
-  createFile(
-    `${basePath}/pages/components/EditModal.vue`,
-    editModalTemplate(ctx)
-  );
-  createFile(
-    `${basePath}/pages/components/ViewModal.vue`,
-    viewModalTemplate(ctx)
-  );
-  createFile(
-    `${basePath}/pages/components/DeleteModal.vue`,
-    deleteModalTemplate(ctx)
-  );
-
-  console.log(`✅ Module "${module}" created successfully`);
-}

package/lib/templates/data.template.js

@@ -1,10 +0,0 @@
-export default ({ name }) => `const ${name}Data = [
-  { id: 1, name: 'Test Name' },
-  { id: 2, name: 'Test Name 2' },
-  { id: 3, name: 'Test Name 3' },
-  { id: 4, name: 'Test Name 4' },
-  { id: 5, name: 'Test Name 5' }
-]
-
-export default ${name}Data
-`;

package/lib/templates/modal-add.template.js

@@ -1,56 +0,0 @@
-// lib/templates/add-modal.template.js
-export default ({ name, Name }) => `
-<template>
-  <BaseModal
-    :isVisible="store.isModal"
-    :title="\`Add \${store.moduleName}\`"
-    :maxWidth="\`\${store.modalWidth}\`"
-    @close="store.handleToggleModal"
-  >
-    <CommonForm
-      v-model:formData="formData"
-      :onSubmit="handleSubmit"
-      :onCancel="store.handleToggleModal"
-    />
-  </BaseModal>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import CommonForm from './CommonForm.vue'
-import { use${Name}Mutations } from '@/modules/${name}/queries/use${Name}Mutations'
-import app from '@/shared/config/appConfig'
-import { use${Name}Store } from '@/modules/${name}/store/${name}Store'
-
-const store = use${Name}Store()
-
-// Default Form Data
-const defaultFormData = {
-  name: 'Test Name',
-}
-
-// Initialize formData
-const formData = ref(
-  app.moduleLocal
-    ? { ...defaultFormData }
-    : Object.fromEntries(
-        Object.keys(defaultFormData).map((key) => [key, ''])
-      )
-)
-
-const { submit } = use${Name}Mutations(store.moduleName, {
-  onSuccess() {
-    store.handleToggleModal()
-    store.handleReset(formData.value)
-  },
-  onError(error) {
-    console.log('Error:', error)
-  },
-})
-
-// Submit handler
-const handleSubmit = async () => {
-  await submit.mutateAsync(formData.value)
-}
-</script>
-`;

package/lib/templates/modal-common-form.template.js

@@ -1,55 +0,0 @@
-// lib/templates/common-form.template.js
-export default ({ Name }) => `
-<template>
-  <form @submit.prevent="onSubmit" class="space-y-4">
-    <!-- ${Name} Name -->
-    <div class="space-y-2">
-      <BaseLabel for="name">Name</BaseLabel>
-      <BaseInput
-        id="name"
-        v-model="localForm.name"
-        placeholder="Eg: ${Name} Name"
-        :required="true"
-      />
-    </div>
-
-    <!-- Actions -->
-    <div class="flex justify-end gap-2 pt-4">
-      <BaseButton
-        class="bg-yellow-600 hover:bg-yellow-700"
-        type="button"
-        @click="onCancel"
-      >
-        Cancel
-      </BaseButton>
-      <BaseButton type="submit">Save</BaseButton>
-    </div>
-  </form>
-</template>
-
-<script setup>
-import { ref, watch } from 'vue'
-
-// Props
-const props = defineProps({
-  formData: { type: Object, required: true },
-  onSubmit: { type: Function, required: true },
-  onCancel: { type: Function, required: true },
-})
-
-// Emit event to sync formData
-const emit = defineEmits(['update:formData'])
-
-// Local reactive copy
-const localForm = ref({ ...props.formData })
-
-// Sync to parent when local changes
-watch(
-  localForm,
-  (newVal) => {
-    emit('update:formData', newVal)
-  },
-  { deep: true }
-)
-</script>
-`;

package/lib/templates/modal-delete.template.js

@@ -1,62 +0,0 @@
-// lib/templates/delete-modal.template.js
-export default ({ name, Name }) => `
-<template>
-  <BaseModal
-    :isVisible="store.isDeleteModal"
-    :title="\`Are you sure you want to delete this \${store.moduleName}?\`"
-    :maxWidth="\`\${store.modalWidth}\`"
-    @close="store.handleToggleModal"
-  >
-    <form @submit.prevent="handleSubmit" class="space-y-4">
-      <div class="space-y-2">
-        <p class="text-lg">
-          <strong>ID:</strong>
-          {{ store.item.id }}
-        </p>
-        <p class="text-lg">
-          <strong>Name:</strong>
-          {{ store.item.name }}
-        </p>
-      </div>
-
-      <!-- Actions -->
-      <div class="flex justify-end gap-2 pt-4">
-        <BaseButton
-          class="bg-yellow-600 hover:bg-yellow-700"
-          type="button"
-          @click="store.handleToggleModal"
-        >
-          Cancel
-        </BaseButton>
-
-        <BaseButton
-          type="submit"
-          class="bg-red-600 hover:bg-red-700"
-        >
-          Delete
-        </BaseButton>
-      </div>
-    </form>
-  </BaseModal>
-</template>
-
-<script setup>
-import { use${Name}Mutations } from '@/modules/${name}/queries/use${Name}Mutations'
-import { use${Name}Store } from '@/modules/${name}/store/${name}Store'
-
-const store = use${Name}Store()
-
-const { remove } = use${Name}Mutations(store.moduleName, {
-  onSuccess() {
-    store.handleToggleModal() // close modal
-  },
-  onError(error) {
-    console.log('Custom error handling', error)
-  },
-})
-
-const handleSubmit = async () => {
-  await remove.mutateAsync(store.item.id)
-}
-</script>
-`;

package/lib/templates/modal-edit.template.js

@@ -1,58 +0,0 @@
-// lib/templates/edit-modal.template.js
-export default ({ name, Name }) => `
-<template>
-  <BaseModal
-    :isVisible="store.isEditModal"
-    :title="\`Edit \${store.moduleName}\`"
-    :maxWidth="\`\${store.modalWidth}\`"
-    @close="store.handleToggleModal"
-  >
-    <CommonForm
-      v-model:formData="formData"
-      :onSubmit="handleSubmit"
-      :onCancel="store.handleToggleModal"
-    />
-  </BaseModal>
-</template>
-
-<script setup>
-import { ref, watch } from 'vue'
-import CommonForm from './CommonForm.vue'
-import { use${Name}Mutations } from '@/modules/${name}/queries/use${Name}Mutations'
-import { use${Name}Store } from '@/modules/${name}/store/${name}Store'
-
-const store = use${Name}Store()
-
-// Form state
-const formData = ref({
-  id: '',
-  name: '',
-})
-
-// Populate form when store.item updates
-watch(
-  () => store.item,
-  (item) => {
-    if (item) {
-      Object.assign(formData.value, item)
-    }
-  },
-  { immediate: true }
-)
-
-// Mutation handler
-const { update } = use${Name}Mutations(store.moduleName, {
-  onSuccess() {
-    store.handleToggleModal() // close modal
-  },
-  onError(error) {
-    console.log('Custom error handling:', error)
-  },
-})
-
-// Submit
-const handleSubmit = async () => {
-  await update.mutateAsync(formData.value)
-}
-</script>
-`;

package/lib/templates/mutation.template.js

@@ -1,53 +0,0 @@
-// lib/templates/use-mutations.template.js
-export default ({ name, Name }) => `
-import { useMutation, useQueryClient } from '@tanstack/vue-query'
-import {
-  submitData,
-  updateData,
-  deleteItem,
-  bulkDelete
-} from '../services/${name}Service'
-import { toast } from '@/shared/config/toastConfig'
-
-export function use${Name}Mutations(moduleName, options = {}) {
-  const queryClient = useQueryClient()
-
-  const handleSuccess = (data, variables) => {
-    toast.success(\`\${moduleName} operation successful\`)
-    queryClient.invalidateQueries(['${name}s'])
-    options.onSuccess?.(data, variables)
-  }
-
-  const handleError = (error) => {
-    console.error(error)
-    toast.error(\`Request Failed: \${error?.message || 'Unknown error'}\`)
-    options.onError?.(error)
-  }
-
-  const submit = useMutation({
-    mutationFn: submitData,
-    onSuccess: handleSuccess,
-    onError: handleError,
-  })
-
-  const update = useMutation({
-    mutationFn: updateData,
-    onSuccess: handleSuccess,
-    onError: handleError,
-  })
-
-  const remove = useMutation({
-    mutationFn: deleteItem,
-    onSuccess: handleSuccess,
-    onError: handleError,
-  })
-
-  const removeItems = useMutation({
-    mutationFn: bulkDelete,
-    onSuccess: handleSuccess,
-    onError: handleError,
-  })
-
-  return { submit, update, remove, removeItems }
-}
-`;

package/lib/templates/query.template.js

@@ -1,42 +0,0 @@
-import { plural, capitalize } from "../utils/string.js";
-
-export default ({ name, Name }) => {
-  const pluralName = plural(name); // country → countries, city → cities
-
-  return `import { useQuery } from '@tanstack/vue-query'
-import { fetchAll } from '../services/${name}Service'
-import { computed, unref } from 'vue'
-
-export function use${capitalize(pluralName)}Query(pageRef, perPageRef, filtersRef) {
-  const page = computed(() => unref(pageRef))
-  const perPage = computed(() => unref(perPageRef))
-  const search = computed(() => unref(filtersRef)?.searchQuery?.trim())
-  const fromDate = computed(() => unref(filtersRef)?.from_date)
-  const toDate = computed(() => unref(filtersRef)?.to_date)
-  const cacheKey = '${pluralName}'
-
-  return useQuery({
-    queryKey: computed(() => [
-      cacheKey,
-      page.value,
-      perPage.value,
-      search.value && search.value.length >= 3 ? search.value : 'all',
-      fromDate.value || 'all',
-      toDate.value || 'all',
-    ]),
-    queryFn: () => fetchAll(page.value, perPage.value, {
-      search: search.value,
-      from_date: fromDate.value,
-      to_date: toDate.value,
-    }),
-    enabled: computed(() => !search.value || search.value.length >= 3),
-    staleTime: 5 * 60 * 1000,
-    cacheTime: 60 * 60 * 1000,
-    keepPreviousData: true,
-    meta: {
-      persist: true,
-    },
-  })
-}
-`;
-};

package/lib/templates/service.template.js

@@ -1,70 +0,0 @@
-import { plural } from "../utils/string.js";
-
-export default ({ name, Name }) => {
-  const baseUrl = `/${plural(name)}`;
-
-  return `import { useApi } from '@/shared/composables/useApi'
-import { buildUrl } from '@/shared/utils/buildUrl'
-
-const BASE_URL = '${baseUrl}'
-
-const response = (api) => ({
-  data: api.data.value,
-  error: api.error.value,
-})
-
-// ✅ Fetch all with pagination & filters
-export async function fetchAll(page = 1, perPage = 10, filters = {}) {
-  const api = useApi()
-  const url = buildUrl(BASE_URL, {
-    page,
-    per_page: perPage,
-    ...filters,
-  })
-
-  await api.sendRequest(url)
-  return response(api)
-}
-
-// ✅ Fetch single item by ID
-export const fetchOne = async (id) => {
-  const api = useApi()
-  await api.sendRequest(\`\${BASE_URL}/\${id}\`)
-  return response(api)
-}
-
-// ✅ Submit new item
-export async function submitData(payload) {
-  const api = useApi()
-  await api.sendRequest(BASE_URL, 'POST', payload)
-  if (api.error.value) throw api.error.value
-  return api.data.value
-}
-
-// ✅ Update existing item
-export async function updateData(payload) {
-  const api = useApi()
-  await api.sendRequest(\`\${BASE_URL}/\${payload.id}\`, 'POST', payload, {
-    headers: { 'X-HTTP-Method-Override': 'PUT' }
-  })
-  if (api.error.value) throw api.error.value
-  return api.data.value
-}
-
-// ✅ Delete single item
-export async function deleteItem(id) {
-  const api = useApi()
-  await api.sendRequest(\`\${BASE_URL}/\${id}\`, 'DELETE')
-  if (api.error.value) throw api.error.value
-  return api.data.value
-}
-
-// ✅ Bulk delete multiple items
-export async function bulkDelete(ids) {
-  const api = useApi()
-  await api.sendRequest(\`\${BASE_URL}/bulk-delete\`, 'POST', { ids })
-  if (api.error.value) throw api.error.value
-  return api.data.value
-}
-`;
-};