@devappsnpm/vue-kit 0.1.0

package/stubs/module/basic/index.ts.stub

@@ -0,0 +1 @@
+export * from './components/{{ ModuleName }}Component.vue'

package/stubs/module/crud/modal/components/DeleteModal.vue.stub

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { ConfirmDeleteModal } from '@devapps/vue-kit/ui'
+import { use{{ ModuleName }}Store } from '../stores/{{ moduleSlug }}.store'
+import type { {{ ModuleName }} } from '../types/{{ moduleSlug }}.types'
+
+const props = defineProps<{
+  open: boolean
+  item: {{ ModuleName }} | null
+}>()
+
+const emit = defineEmits<{
+  close: []
+  deleted: []
+}>()
+
+const store = use{{ ModuleName }}Store()
+
+async function handleConfirm() {
+  if (!props.item) return
+  await store.remove(props.item.uuid)
+  emit('deleted')
+}
+</script>
+
+<template>
+  <ConfirmDeleteModal
+    :open="open"
+    title="Delete {{ ModuleName }}"
+    description="This action cannot be undone. Please type the identifier to confirm."
+    :confirmation-label="item?.uuid ?? ''"
+    :loading="store.deleting"
+    @close="emit('close')"
+    @confirm="handleConfirm"
+  />
+</template>

package/stubs/module/crud/modal/components/FormModal.vue.stub

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { reactive, watch } from 'vue'
+import { BaseModal } from '@devapps/vue-kit/ui'
+import { Form } from '@devapps/vue-kit'
+import { use{{ ModuleName }}Store } from '../stores/{{ moduleSlug }}.store'
+import type { {{ ModuleName }}, {{ ModuleName }}Form } from '../types/{{ moduleSlug }}.types'
+
+const props = defineProps<{
+  open: boolean
+  item?: {{ ModuleName }} | null
+}>()
+
+const emit = defineEmits<{
+  close: []
+  saved: []
+}>()
+
+const store = use{{ ModuleName }}Store()
+
+const form = reactive(
+  new Form<{{ ModuleName }}Form>({
+    // TODO: initialise form fields
+  }),
+)
+
+watch(
+  () => props.item,
+  (item) => {
+    if (item) {
+      // TODO: populate form from item
+      // Object.assign(form.data, { field: item.field })
+    } else {
+      form.reset()
+    }
+  },
+  { immediate: true },
+)
+
+async function handleSubmit() {
+  await form.submit(async (data) => {
+    if (props.item) {
+      await store.update(props.item.uuid, data)
+    } else {
+      await store.create(data)
+    }
+    emit('saved')
+  })
+}
+</script>
+
+<template>
+  <BaseModal
+    :open="open"
+    :loading="form.processing"
+    @close="emit('close')"
+  >
+    <template #header>
+      <h2 class="text-lg font-semibold">
+        {{ item ? 'Edit' : 'Create' }} {{ ModuleName }}
+      </h2>
+    </template>
+
+    <form id="{{ moduleSlug }}-form" class="space-y-4" @submit.prevent="handleSubmit">
+      <!-- TODO: add form fields -->
+    </form>
+
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <button
+          type="button"
+          class="px-4 py-2 rounded border text-sm"
+          :disabled="form.processing"
+          @click="emit('close')"
+        >
+          Cancel
+        </button>
+        <button
+          type="submit"
+          form="{{ moduleSlug }}-form"
+          class="px-4 py-2 rounded bg-blue-600 text-white text-sm disabled:opacity-50"
+          :disabled="form.processing"
+        >
+          {{ form.processing ? 'Saving...' : 'Save' }}
+        </button>
+      </div>
+    </template>
+  </BaseModal>
+</template>

package/stubs/module/crud/modal/components/List.vue.stub

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type { {{ ModuleName }} } from '../types/{{ moduleSlug }}.types'
+
+const emit = defineEmits<{
+  edit: [item: {{ ModuleName }}]
+  delete: [item: {{ ModuleName }}]
+}>()
+
+defineProps<{
+  items: {{ ModuleName }}[]
+  loading?: boolean
+}>()
+</script>
+
+<template>
+  <div class="{{ moduleSlug }}-list">
+    <div v-if="loading" class="flex justify-center py-8">
+      <span class="text-gray-500">Loading...</span>
+    </div>
+
+    <table v-else class="w-full text-sm">
+      <thead>
+        <tr class="border-b text-left text-gray-500">
+          <th class="pb-2">UUID</th>
+          <!-- TODO: add columns -->
+          <th class="pb-2 text-right">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="item in items"
+          :key="item.uuid"
+          class="border-b hover:bg-gray-50"
+        >
+          <td class="py-2 font-mono text-xs">{{ item.uuid }}</td>
+          <!-- TODO: add cells -->
+          <td class="py-2 text-right space-x-2">
+            <button
+              class="text-blue-600 hover:underline text-xs"
+              @click="emit('edit', item)"
+            >
+              Edit
+            </button>
+            <button
+              class="text-red-600 hover:underline text-xs"
+              @click="emit('delete', item)"
+            >
+              Delete
+            </button>
+          </td>
+        </tr>
+        <tr v-if="items.length === 0">
+          <td colspan="3" class="py-8 text-center text-gray-400">
+            No records found.
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/stubs/module/crud/modal/index.ts.stub

@@ -0,0 +1,4 @@
+export * from './types/{{ moduleSlug }}.types'
+export * from './services/{{ moduleSlug }}.service'
+export * from './stores/{{ moduleSlug }}.store'
+export { default as routes } from './router'

package/stubs/module/crud/modal/router.ts.stub

@@ -0,0 +1,11 @@
+import type { RouteRecordRaw } from 'vue-router'
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/{{ moduleSlugPlural }}',
+    name: '{{ moduleSlugPlural }}.index',
+    component: () => import('./views/{{ ModuleName }}View.vue'),
+  },
+]
+
+export default routes

package/stubs/module/crud/modal/services/service.ts.stub

@@ -0,0 +1,9 @@
+import { CrudService } from '@devapps/vue-kit'
+import type { HttpClient } from '@devapps/vue-kit'
+import type { {{ ModuleName }} } from '../types/{{ moduleSlug }}.types'
+
+export class {{ ModuleName }}Service extends CrudService<{{ ModuleName }}> {
+  constructor(http: HttpClient) {
+    super(http, '{{ resourcePath }}')
+  }
+}

package/stubs/module/crud/modal/stores/store.ts.stub

@@ -0,0 +1,9 @@
+import { defineCrudStore } from '@devapps/vue-kit'
+import { {{ ModuleName }}Service } from '../services/{{ moduleSlug }}.service'
+import type { {{ ModuleName }} } from '../types/{{ moduleSlug }}.types'
+import { useHttpClient } from '@/composables/useHttpClient' // adjust to your project
+
+export const use{{ ModuleName }}Store = defineCrudStore<{{ ModuleName }}>(
+  '{{ moduleName }}',
+  () => new {{ ModuleName }}Service(useHttpClient()),
+)

package/stubs/module/crud/modal/types/types.ts.stub

@@ -0,0 +1,16 @@
+export interface {{ ModuleName }} {
+  uuid: string
+  // TODO: add fields
+  created_at: string
+  updated_at: string
+}
+
+export interface {{ ModuleName }}Form {
+  // TODO: add form fields
+}
+
+export interface {{ ModuleName }}Filters {
+  page?: number
+  per_page?: number
+  search?: string
+}

package/stubs/module/crud/modal/views/View.vue.stub

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { use{{ ModuleName }}Store } from '../stores/{{ moduleSlug }}.store'
+import {{ ModuleName }}List from '../components/{{ ModuleName }}List.vue'
+import {{ ModuleName }}FormModal from '../components/{{ ModuleName }}FormModal.vue'
+import {{ ModuleName }}DeleteModal from '../components/{{ ModuleName }}DeleteModal.vue'
+import type { {{ ModuleName }} } from '../types/{{ moduleSlug }}.types'
+
+const store = use{{ ModuleName }}Store()
+
+const isFormModalOpen = ref(false)
+const isDeleteModalOpen = ref(false)
+const selected{{ ModuleName }} = ref<{{ ModuleName }} | null>(null)
+const {{ moduleName }}ToDelete = ref<{{ ModuleName }} | null>(null)
+
+onMounted(() => loadItems())
+
+async function loadItems(page = store.pagination?.currentPage ?? 1) {
+  await store.fetchAll({ page })
+}
+
+function handleCreate() {
+  selected{{ ModuleName }}.value = null
+  isFormModalOpen.value = true
+}
+
+async function handleEdit(item: {{ ModuleName }}) {
+  await store.fetchOne(item.uuid)
+  selected{{ ModuleName }}.value = store.item
+  isFormModalOpen.value = true
+}
+
+function handleDelete(item: {{ ModuleName }}) {
+  {{ moduleName }}ToDelete.value = item
+  isDeleteModalOpen.value = true
+}
+
+function handleFormSaved() {
+  isFormModalOpen.value = false
+  loadItems()
+}
+
+function handleDeleted() {
+  isDeleteModalOpen.value = false
+  {{ moduleName }}ToDelete.value = null
+  loadItems()
+}
+</script>
+
+<template>
+  <div class="{{ moduleSlug }}-view">
+    <div class="flex items-center justify-between mb-4">
+      <h1 class="text-xl font-semibold">{{ ModuleNamePlural }}</h1>
+      <button
+        class="px-4 py-2 bg-blue-600 text-white rounded text-sm"
+        @click="handleCreate"
+      >
+        New {{ ModuleName }}
+      </button>
+    </div>
+
+    <{{ ModuleName }}List
+      :items="store.items"
+      :loading="store.loading"
+      @edit="handleEdit"
+      @delete="handleDelete"
+    />
+
+    <{{ ModuleName }}FormModal
+      :open="isFormModalOpen"
+      :item="selected{{ ModuleName }}"
+      @close="isFormModalOpen = false"
+      @saved="handleFormSaved"
+    />
+
+    <{{ ModuleName }}DeleteModal
+      :open="isDeleteModalOpen"
+      :item="{{ moduleName }}ToDelete"
+      @close="isDeleteModalOpen = false"
+      @deleted="handleDeleted"
+    />
+  </div>
+</template>

package/stubs/module/crud/page/components/DeleteModal.vue.stub

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { ConfirmDeleteModal } from '@devapps/vue-kit/ui'
+import { use{{ ModuleName }}Store } from '../stores/{{ moduleSlug }}.store'
+import type { {{ ModuleName }} } from '../types/{{ moduleSlug }}.types'
+
+const props = defineProps<{
+  open: boolean
+  item: {{ ModuleName }} | null
+}>()
+
+const emit = defineEmits<{
+  close: []
+  deleted: []
+}>()
+
+const store = use{{ ModuleName }}Store()
+
+async function handleConfirm() {
+  if (!props.item) return
+  await store.remove(props.item.uuid)
+  emit('deleted')
+}
+</script>
+
+<template>
+  <ConfirmDeleteModal
+    :open="open"
+    title="Delete {{ ModuleName }}"
+    description="This action cannot be undone. Please type the identifier to confirm."
+    :confirmation-label="item?.uuid ?? ''"
+    :loading="store.deleting"
+    @close="emit('close')"
+    @confirm="handleConfirm"
+  />
+</template>

package/stubs/module/crud/page/components/Form.vue.stub

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { reactive, watch } from 'vue'
+import { Form } from '@devapps/vue-kit'
+import type { {{ ModuleName }}, {{ ModuleName }}Form } from '../types/{{ moduleSlug }}.types'
+
+const props = defineProps<{
+  item?: {{ ModuleName }} | null
+  loading?: boolean
+}>()
+
+const emit = defineEmits<{
+  submit: [data: {{ ModuleName }}Form]
+  cancel: []
+}>()
+
+const form = reactive(
+  new Form<{{ ModuleName }}Form>({
+    // TODO: initialise form fields
+  }),
+)
+
+watch(
+  () => props.item,
+  (item) => {
+    if (item) {
+      // TODO: populate form from item
+      // Object.assign(form.data, { field: item.field })
+    } else {
+      form.reset()
+    }
+  },
+  { immediate: true },
+)
+
+function handleSubmit() {
+  emit('submit', form.data)
+}
+</script>
+
+<template>
+  <form class="{{ moduleSlug }}-form space-y-4" @submit.prevent="handleSubmit">
+    <!-- TODO: add form fields -->
+
+    <div class="flex justify-end gap-2">
+      <button
+        type="button"
+        class="px-4 py-2 rounded border text-sm"
+        :disabled="loading"
+        @click="emit('cancel')"
+      >
+        Cancel
+      </button>
+      <button
+        type="submit"
+        class="px-4 py-2 rounded bg-blue-600 text-white text-sm disabled:opacity-50"
+        :disabled="loading"
+      >
+        {{ loading ? 'Saving...' : 'Save' }}
+      </button>
+    </div>
+  </form>
+</template>

package/stubs/module/crud/page/components/List.vue.stub

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { {{ ModuleName }} } from '../types/{{ moduleSlug }}.types'
+
+defineProps<{
+  items: {{ ModuleName }}[]
+  loading?: boolean
+}>()
+
+const emit = defineEmits<{
+  edit: [item: {{ ModuleName }}]
+  delete: [item: {{ ModuleName }}]
+}>()
+</script>
+
+<template>
+  <div class="{{ moduleSlug }}-list">
+    <div v-if="loading" class="py-8 text-center text-gray-500">Loading...</div>
+
+    <table v-else class="w-full text-sm">
+      <thead>
+        <tr class="border-b text-left text-gray-500">
+          <th class="pb-2">UUID</th>
+          <!-- TODO: add columns -->
+          <th class="pb-2 text-right">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="item in items" :key="item.uuid" class="border-b hover:bg-gray-50">
+          <td class="py-2 font-mono text-xs">{{ item.uuid }}</td>
+          <!-- TODO: add cells -->
+          <td class="py-2 text-right space-x-2">
+            <button class="text-blue-600 hover:underline text-xs" @click="emit('edit', item)">Edit</button>
+            <button class="text-red-600 hover:underline text-xs" @click="emit('delete', item)">Delete</button>
+          </td>
+        </tr>
+        <tr v-if="items.length === 0">
+          <td colspan="3" class="py-8 text-center text-gray-400">No records found.</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/stubs/module/crud/page/index.ts.stub

@@ -0,0 +1,4 @@
+export * from './types/{{ moduleSlug }}.types'
+export * from './services/{{ moduleSlug }}.service'
+export * from './stores/{{ moduleSlug }}.store'
+export { default as routes } from './router'

package/stubs/module/crud/page/pages/CreatePage.vue.stub

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import { Form } from '@devapps/vue-kit'
+import { use{{ ModuleName }}Store } from '../stores/{{ moduleSlug }}.store'
+import {{ ModuleName }}Form from '../components/{{ ModuleName }}Form.vue'
+import type { {{ ModuleName }}Form as {{ ModuleName }}FormData } from '../types/{{ moduleSlug }}.types'
+
+const router = useRouter()
+const store = use{{ ModuleName }}Store()
+
+async function handleSubmit(data: {{ ModuleName }}FormData) {
+  await store.create(data)
+  router.push({ name: '{{ moduleSlugPlural }}.index' })
+}
+</script>
+
+<template>
+  <div class="{{ moduleSlug }}-create-page">
+    <h1 class="text-xl font-semibold mb-4">New {{ ModuleName }}</h1>
+    <{{ ModuleName }}Form
+      :loading="store.saving"
+      @submit="handleSubmit"
+      @cancel="router.push({ name: '{{ moduleSlugPlural }}.index' })"
+    />
+  </div>
+</template>

package/stubs/module/crud/page/pages/EditPage.vue.stub

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { use{{ ModuleName }}Store } from '../stores/{{ moduleSlug }}.store'
+import {{ ModuleName }}Form from '../components/{{ ModuleName }}Form.vue'
+import type { {{ ModuleName }}Form as {{ ModuleName }}FormData } from '../types/{{ moduleSlug }}.types'
+
+const route = useRoute()
+const router = useRouter()
+const store = use{{ ModuleName }}Store()
+
+const uuid = route.params['uuid'] as string
+
+onMounted(() => store.fetchOne(uuid))
+
+async function handleSubmit(data: {{ ModuleName }}FormData) {
+  await store.update(uuid, data)
+  router.push({ name: '{{ moduleSlugPlural }}.index' })
+}
+</script>
+
+<template>
+  <div class="{{ moduleSlug }}-edit-page">
+    <h1 class="text-xl font-semibold mb-4">Edit {{ ModuleName }}</h1>
+    <div v-if="store.loading">Loading...</div>
+    <{{ ModuleName }}Form
+      v-else
+      :item="store.item"
+      :loading="store.saving"
+      @submit="handleSubmit"
+      @cancel="router.push({ name: '{{ moduleSlugPlural }}.index' })"
+    />
+  </div>
+</template>

package/stubs/module/crud/page/pages/ListPage.vue.stub

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { use{{ ModuleName }}Store } from '../stores/{{ moduleSlug }}.store'
+import {{ ModuleName }}List from '../components/{{ ModuleName }}List.vue'
+import {{ ModuleName }}DeleteModal from '../components/{{ ModuleName }}DeleteModal.vue'
+import type { {{ ModuleName }} } from '../types/{{ moduleSlug }}.types'
+
+const router = useRouter()
+const store = use{{ ModuleName }}Store()
+
+const isDeleteModalOpen = ref(false)
+const {{ moduleName }}ToDelete = ref<{{ ModuleName }} | null>(null)
+
+onMounted(() => store.fetchAll())
+
+function handleEdit(item: {{ ModuleName }}) {
+  router.push({ name: '{{ moduleSlugPlural }}.edit', params: { uuid: item.uuid } })
+}
+
+function handleDelete(item: {{ ModuleName }}) {
+  {{ moduleName }}ToDelete.value = item
+  isDeleteModalOpen.value = true
+}
+
+function handleDeleted() {
+  isDeleteModalOpen.value = false
+  {{ moduleName }}ToDelete.value = null
+  store.fetchAll()
+}
+</script>
+
+<template>
+  <div class="{{ moduleSlug }}-list-page">
+    <div class="flex items-center justify-between mb-4">
+      <h1 class="text-xl font-semibold">{{ ModuleNamePlural }}</h1>
+      <button
+        class="px-4 py-2 bg-blue-600 text-white rounded text-sm"
+        @click="router.push({ name: '{{ moduleSlugPlural }}.create' })"
+      >
+        New {{ ModuleName }}
+      </button>
+    </div>
+
+    <{{ ModuleName }}List
+      :items="store.items"
+      :loading="store.loading"
+      @edit="handleEdit"
+      @delete="handleDelete"
+    />
+
+    <{{ ModuleName }}DeleteModal
+      :open="isDeleteModalOpen"
+      :item="{{ moduleName }}ToDelete"
+      @close="isDeleteModalOpen = false"
+      @deleted="handleDeleted"
+    />
+  </div>
+</template>

package/stubs/module/crud/page/pages/ShowPage.vue.stub

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { use{{ ModuleName }}Store } from '../stores/{{ moduleSlug }}.store'
+
+const route = useRoute()
+const store = use{{ ModuleName }}Store()
+
+const uuid = route.params['uuid'] as string
+
+onMounted(() => store.fetchOne(uuid))
+</script>
+
+<template>
+  <div class="{{ moduleSlug }}-show-page">
+    <h1 class="text-xl font-semibold mb-4">{{ ModuleName }} Details</h1>
+    
+    <div v-if="store.loading" class="py-8 text-gray-500">Loading...</div>
+    
+    <div v-else-if="store.item" class="bg-white p-6 rounded shadow space-y-4">
+      <div>
+        <span class="text-sm text-gray-500">UUID</span>
+        <p class="font-mono">{{ store.item.uuid }}</p>
+      </div>
+      <!-- TODO: show fields -->
+    </div>
+  </div>
+</template>

package/stubs/module/crud/page/router.ts.stub

@@ -0,0 +1,26 @@
+import type { RouteRecordRaw } from 'vue-router'
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/{{ moduleSlugPlural }}',
+    name: '{{ moduleSlugPlural }}.index',
+    component: () => import('./pages/{{ ModuleName }}ListPage.vue'),
+  },
+  {
+    path: '/{{ moduleSlugPlural }}/create',
+    name: '{{ moduleSlugPlural }}.create',
+    component: () => import('./pages/{{ ModuleName }}CreatePage.vue'),
+  },
+  {
+    path: '/{{ moduleSlugPlural }}/:uuid/edit',
+    name: '{{ moduleSlugPlural }}.edit',
+    component: () => import('./pages/{{ ModuleName }}EditPage.vue'),
+  },
+  {
+    path: '/{{ moduleSlugPlural }}/:uuid',
+    name: '{{ moduleSlugPlural }}.show',
+    component: () => import('./pages/{{ ModuleName }}ShowPage.vue'),
+  },
+]
+
+export default routes

package/stubs/module/crud/page/services/service.ts.stub

@@ -0,0 +1,9 @@
+import { CrudService } from '@devapps/vue-kit'
+import type { HttpClient } from '@devapps/vue-kit'
+import type { {{ ModuleName }} } from '../types/{{ moduleSlug }}.types'
+
+export class {{ ModuleName }}Service extends CrudService<{{ ModuleName }}> {
+  constructor(http: HttpClient) {
+    super(http, '{{ resourcePath }}')
+  }
+}

package/stubs/module/crud/page/stores/store.ts.stub

@@ -0,0 +1,9 @@
+import { defineCrudStore } from '@devapps/vue-kit'
+import { {{ ModuleName }}Service } from '../services/{{ moduleSlug }}.service'
+import type { {{ ModuleName }} } from '../types/{{ moduleSlug }}.types'
+import { useHttpClient } from '@/composables/useHttpClient' // adjust to your project
+
+export const use{{ ModuleName }}Store = defineCrudStore<{{ ModuleName }}>(
+  '{{ moduleName }}',
+  () => new {{ ModuleName }}Service(useHttpClient()),
+)