vue-ready-modular 1.0.0 → 1.0.2

package/lib/generator.js

@@ -1,8 +1,8 @@
 import path from "path";
 import fs from "fs";
+import { plural, capitalize } from "./utils/string.js";
 
 import { createDir, createFile } from "./utils/file.js";
-import { capitalize } from "./utils/string.js";
 
 // Templates
 import indexTemplate from "./templates/index.template.js";
@@ -14,6 +14,7 @@ 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";
@@ -60,17 +61,39 @@ export function createModule(name) {
   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${Module}sQuery.js`, queryTemplate(ctx));
-  createFile(`${basePath}/queries/use${Module}Mutations.js`, mutationTemplate(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/EditModal.vue`, editModalTemplate(ctx));
-  createFile(`${basePath}/pages/components/ViewModal.vue`, viewModalTemplate(ctx));
-  createFile(`${basePath}/pages/components/DeleteModal.vue`, deleteModalTemplate(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/modal-add.template.js

@@ -1,57 +1,54 @@
-export default ({ name, Name }) => `<template>
+// 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"
   >
-    <form @submit.prevent="handleSubmit" class="space-y-4">
-      <!-- ${Name} Name -->
-      <div>
-        <BaseLabel for="name">Name</BaseLabel>
-        <BaseInput
-          id="name"
-          v-model="formData.name"
-          :required="true"
-          placeholder="Eg: Example Name"
-        />
-      </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">Save</BaseButton>
-      </div>
-    </form>
+    <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}/stores/${name}Store'
+import { use${Name}Store } from '@/modules/${name}/store/${name}Store'
 
 const store = use${Name}Store()
 
-const formData = ref({
-  name: app.moduleLocal ? 'Test Name' : '',
-})
+// 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()          // ✅ close modal
-    store.handleReset(formData.value)  // ✅ reset form
+    store.handleToggleModal()
+    store.handleReset(formData.value)
   },
-  onError: (error) => {
-    console.log('Custom error handling', error)
+  onError(error) {
+    console.log('Error:', error)
   },
 })
 
+// Submit handler
 const handleSubmit = async () => {
   await submit.mutateAsync(formData.value)
 }

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

@@ -0,0 +1,55 @@
+// 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,4 +1,6 @@
-export default ({ name, Name }) => `<template>
+// 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}?\`"
@@ -23,8 +25,16 @@ export default ({ name, Name }) => `<template>
           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>
+        >
+          Cancel
+        </BaseButton>
+
+        <BaseButton
+          type="submit"
+          class="bg-red-600 hover:bg-red-700"
+        >
+          Delete
+        </BaseButton>
       </div>
     </form>
   </BaseModal>
@@ -32,15 +42,15 @@ export default ({ name, Name }) => `<template>
 
 <script setup>
 import { use${Name}Mutations } from '@/modules/${name}/queries/use${Name}Mutations'
-import { use${Name}Store } from '@/modules/${name}/stores/${name}Store'
+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
+    store.handleToggleModal() // close modal
   },
-  onError: (error) => {
+  onError(error) {
     console.log('Custom error handling', error)
   },
 })

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

@@ -1,67 +1,56 @@
-export default ({ name, Name }) => `<template>
+// 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"
   >
-    <form @submit.prevent="handleSubmit" class="space-y-4">
-      <!-- ${Name} Name -->
-      <div>
-        <BaseLabel for="name">Name</BaseLabel>
-        <BaseInput
-          id="name"
-          v-model="formData.name"
-          placeholder="Eg: Example Name"
-        />
-      </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">Save</BaseButton>
-      </div>
-    </form>
+    <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}/stores/${name}Store'
+import { use${Name}Store } from '@/modules/${name}/store/${name}Store'
 
 const store = use${Name}Store()
 
+// Form state
 const formData = ref({
-  name: '',
   id: '',
+  name: '',
 })
 
-// Prefill form when selected item changes
+// Populate form when store.item updates
 watch(
   () => store.item,
-  (newItem) => {
-    if (newItem) {
-      formData.value.name = newItem.name || ''
-      formData.value.id = newItem.id || ''
+  (item) => {
+    if (item) {
+      Object.assign(formData.value, item)
     }
   },
   { immediate: true }
 )
 
+// Mutation handler
 const { update } = use${Name}Mutations(store.moduleName, {
   onSuccess() {
-    store.handleToggleModal() // ✅ close modal
+    store.handleToggleModal() // close modal
   },
-  onError: (error) => {
-    console.log('Custom error handling', error)
+  onError(error) {
+    console.log('Custom error handling:', error)
   },
 })
 
+// Submit
 const handleSubmit = async () => {
   await update.mutateAsync(formData.value)
 }

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

@@ -1,33 +1,59 @@
-export default ({ name, Name }) => `<template>
+// lib/templates/view-modal.template.js
+export default ({ name, Name }) => `
+<template>
   <BaseModal
     :isVisible="store.isViewModal"
     :title="\`View \${store.moduleName} Details\`"
-    :maxWidth="\`\${store.modalWidth}\`"
+    :maxWidth="\`\${store.modalWidth || '60vw'}\`"
     @close="store.handleToggleModal"
   >
-    <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>
-      <p class="text-lg">
-        <strong>Created At:</strong>
-        {{ store.item.created_at }}
-      </p>
-      <p class="text-lg">
-        <strong>Updated At:</strong>
-        {{ store.item.updated_at }}
-      </p>
-    </div>
+    <ViewModalLayout>
+      <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>
+        <p class="text-lg">
+          <strong>Created At:</strong>
+          {{ store.item?.created_at }}
+        </p>
+        <p class="text-lg">
+          <strong>Updated At:</strong>
+          {{ store.item?.updated_at }}
+        </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>
   </BaseModal>
 </template>
 
 <script setup>
-import { use${Name}Store } from '@/modules/${name}/stores/${name}Store'
+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()
+
+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/mutation.template.js

@@ -1,8 +1,12 @@
-export default ({
-  name,
-  Name,
-}) => `import { useMutation, useQueryClient } from '@tanstack/vue-query'
-import { submitData, updateData, deleteItem } from '../services/${name}Service'
+// 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 = {}) {
@@ -11,7 +15,7 @@ export function use${Name}Mutations(moduleName, options = {}) {
   const handleSuccess = (data, variables) => {
     toast.success(\`\${moduleName} operation successful\`)
     queryClient.invalidateQueries(['${name}s'])
-    options.onSuccess?.(data, variables) // ✅ generic callback
+    options.onSuccess?.(data, variables)
   }
 
   const handleError = (error) => {
@@ -20,10 +24,30 @@ export function use${Name}Mutations(moduleName, options = {}) {
     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 submit = useMutation({
+    mutationFn: submitData,
+    onSuccess: handleSuccess,
+    onError: handleError,
+  })
 
-  return { submit, update, remove }
+  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/page.template.js

@@ -1,21 +1,78 @@
-export default ({ name, Name }) => `<template>
+// lib/templates/page.template.js
+import { plural, capitalize } from "../utils/string.js";
+
+export default ({ name, Name }) => {
+  const pluralName = capitalize(plural(Name)); // Country -> Countries
+
+  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">
-      <PageTitle>{{ store.moduleName }} List</PageTitle>
+      <div>
+        <PageTitle>{{ store.moduleName }} List</PageTitle>
+      </div>
       <BaseButton @click="store.handleToggleModal('add')">
         Add {{ store.moduleName }}
       </BaseButton>
     </div>
 
+    <!-- Bulk Delete & Filters -->
+    <div class="flex justify-between items-center my-4">
+      <!-- BULK DELETE -->
+      <div>
+        <BaseButton
+          v-if="selectedIds.length"
+          class="bg-red-600 text-white hover:bg-red-700"
+          @click="bulkDelete"
+        >
+          Delete Selected ({{ selectedIds.length }})
+        </BaseButton>
+      </div>
+
+      <!-- FILTERS -->
+      <TableFilters
+        :filters="filters"
+        :has-active-filters="hasActiveFilters"
+        @reset="resetFilters"
+      />
+    </div>
+
+    <!-- Content Card -->
     <div class="rounded-lg bg-white shadow-sm">
       <BaseTable
         v-if="!isLoading"
         :columns="columns"
         :rows="rows"
         show-actions
-        @view="onView"
-        @edit="onEdit"
-        @delete="onDelete"
+        selectable
+        :selected-ids="selectedIds"
+        @toggleAll="(checked) => toggleAll(rows, checked)"
+        @toggleRow="toggleRow"
+      >
+        <template #actions="{ row }">
+          <button @click="onView(row)" class="text-blue-600 cursor-pointer">
+            <i class="fa fa-eye"></i>
+          </button>
+
+          <button @click="onEdit(row)" class="text-green-600 cursor-pointer">
+            <i class="fa fa-pencil"></i>
+          </button>
+
+          <button @click="onDelete(row)" class="text-red-600 cursor-pointer">
+            <i class="fa fa-trash"></i>
+          </button>
+        </template>
+      </BaseTable>
+
+      <!-- Pagination -->
+      <BasePagination
+        v-if="!isLoading"
+        :total="total"
+        :showing="showing"
+        :links="links"
+        :per-page="perPage"
+        @update:page="setPage"
+        @update:perPage="setPerPage"
       />
 
       <AddModal />
@@ -28,8 +85,16 @@ export default ({ name, Name }) => `<template>
 
 <script setup>
 import { computed, defineAsyncComponent } from 'vue'
-import { use${Name}sQuery } from '../queries/use${Name}sQuery'
-import { use${Name}Store } from '../stores/${name}Store'
+import { use${pluralName}Query } from '../queries/use${pluralName}Query'
+import { use${Name}Store } from '../store/${name}Store'
+import { use${Name}Mutations } from '../queries/use${Name}Mutations'
+
+import { usePagination } from '@/shared/composables/usePagination'
+import { useBulkDelete } from '@/shared/composables/useBulkDelete'
+import { useCrudTable } from '@/shared/composables/useCrudTable'
+import { useTableFilters } from '@/shared/composables/useTableFilters'
+
+import TableFilters from '@/shared/components/ui/TableFilters.vue'
 
 const ViewModal = defineAsyncComponent(() => import('./components/ViewModal.vue'))
 const AddModal = defineAsyncComponent(() => import('./components/AddModal.vue'))
@@ -37,25 +102,36 @@ const EditModal = defineAsyncComponent(() => import('./components/EditModal.vue'
 const DeleteModal = defineAsyncComponent(() => import('./components/DeleteModal.vue'))
 
 const store = use${Name}Store()
-const { data, isLoading } = use${Name}sQuery()
 
-const columns = [
-  { key: 'sl', label: 'SL' },
+/* ---------------- Filters ---------------- */
+const { filters, hasActiveFilters, resetFilters } = useTableFilters({
+  searchQuery: '',
+  from_date: null,
+  to_date: null,
+})
+
+/* ---------------- Pagination ---------------- */
+const pagination = usePagination()
+const { page, perPage, total, showing, links, setPage, setPerPage } = pagination
+
+/* ---------------- Query ---------------- */
+const { data, isLoading } = use${pluralName}Query(page, perPage, filters)
+pagination.bindMeta(data)
+
+/* ---------------- Mutations ---------------- */
+const { removeItems } = use${Name}Mutations(store.moduleName)
+
+/* ---------------- Bulk Delete ---------------- */
+const { selectedIds, toggleAll, toggleRow, bulkDelete } = useBulkDelete(removeItems, {
+  confirmText: 'Are you sure to delete selected records?',
+})
+
+/* ---------------- Table ---------------- */
+const { columns, onView, onEdit, onDelete } = useCrudTable(store, [
   { key: 'name', label: '${Name}' },
-  { key: 'created_at', label: 'Created At' },
-  { key: 'updated_at', label: 'Updated At' }
-]
+])
 
 const rows = computed(() => data.value?.data?.data ?? [])
-
-function onView(row) {
-  store.handleToggleModal('view', row)
-}
-function onEdit(row) {
-  store.handleToggleModal('edit', row)
-}
-function onDelete(row) {
-  store.handleToggleModal('delete', row)
-}
 </script>
 `;
+};

package/lib/templates/query.template.js

@@ -1,19 +1,42 @@
-export default ({
-  name,
-  Name,
-}) => `import { useQuery } from '@tanstack/vue-query'
+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}'
 
-export function use${Name}sQuery(params = {}) {
   return useQuery({
-    queryKey: ['${name}s', params],
-    queryFn: () => fetchAll(params),
-    staleTime: 5 * 60 * 1000,       // 5 minutes
-    cacheTime: 1000 * 60 * 60,      // 1 hour
+    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,                // ✅ persisted
+      persist: true,
     },
   })
 }
 `;
+};

package/lib/templates/routes.template.js

@@ -1,21 +1,25 @@
-export default ({
-  name,
-  Name,
-}) => `import ${Name}Page from './pages/${Name}Page.vue'
+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'
+
+  return `import ${Name}Page from './pages/${Name}Page.vue'
 import DashboardLayout from '@/shared/layouts/DashboardLayout.vue'
 
 export default [
   {
-    path: '/${name}s',
+    path: '/${pathName}',
     component: DashboardLayout,
-    meta: { requiresAuth: true },
+    meta: { requiresAuth: true, roles: ['super_admin','admin','recruiter'] },
     children: [
       {
         path: '',
-        name: '${Name}List',
+        name: '${routeName}',
         component: ${Name}Page,
       },
     ],
   },
 ]
 `;
+};

package/lib/templates/service.template.js

@@ -1,30 +1,47 @@
-export default ({
-  name,
-  Name,
-}) => `import { useApi } from '@/shared/composables/useApi'
+import { plural } from "../utils/string.js";
 
-const BASE_URL = '/${name}s'
+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,
 })
 
-export async function fetchAll() {
+// ✅ 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)
+  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  // 🚨 so useMutation.onError triggers
-  }
+  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, {
@@ -34,10 +51,20 @@ export async function updateData(payload) {
   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
+}
 `;
+};

package/lib/templates/store.template.js

@@ -2,7 +2,6 @@ export default ({ name, Name }) => `import { defineStore } from 'pinia'
 import { useModalHelpers } from '@/shared/composables/useModalHelpers'
 
 export const use${Name}Store = defineStore('${name}', () => {
-  
   const {
     item,
     isModal,

package/lib/utils/string.js

@@ -1,3 +1,7 @@
-export function capitalize(str) {
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}
+// lib/utils/string.js
+import pluralize from 'pluralize'
+
+export const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1)
+
+// pluralize dynamically
+export const plural = (str) => pluralize(str.toLowerCase())

package/package.json

@@ -1,19 +1,25 @@
 {
-  "name": "vue-ready-modular",      
-  "version": "1.0.0",
+  "name": "vue-ready-modular",
+  "version": "1.0.2",
   "description": "Vue.js module generator",
-  "main": "lib/generator.js",       
+  "main": "lib/generator.js",
   "bin": {
-    "vue-modular": "./bin/cli.js"   
+    "vue-modular": "./bin/cli.js"
   },
-  "type": "module",                 
+  "type": "module",
   "scripts": {
     "test": "echo \"No tests yet\""
   },
-  "keywords": ["vue", "generator", "module", "cli"],
+  "keywords": [
+    "vue",
+    "generator",
+    "module",
+    "cli"
+  ],
   "author": "Your Name",
   "license": "MIT",
-  "dependencies": {        
-    "path": "^0.12.7"
+  "dependencies": {
+    "path": "^0.12.7",
+    "pluralize": "^8.0.0"
   }
 }