create-nexgen 1.0.4

package/template/src/resources/src/stores/admin-ui.ts

@@ -0,0 +1,148 @@
+import { computed, ref } from "vue";
+import { defineStore } from "pinia";
+
+const THEME_KEY = "app-theme";
+const SIDEBAR_COLLAPSE_KEY = "sidebar-open-collapses";
+const SIDEBAR_SCROLL_KEY = "sidebar-scroll-top";
+type ThemeMode = "light" | "dark" | "auto";
+
+export const useAdminUiStore = defineStore("admin-ui", () => {
+  const sidebarOpen = ref(false);
+  const themeMode = ref<ThemeMode>("auto");
+  const sidebarOpenCollapseIds = ref<string[]>([]);
+  const sidebarScrollTop = ref(0);
+  let sidebarAccordionEl: HTMLElement | null = null;
+  let sidebarScrollListener: (() => void) | null = null;
+
+  const themeIcon = computed(() => {
+    if (themeMode.value === "light") return "bi-brightness-high-fill";
+    return "bi-moon-stars";
+  });
+
+  const toggleSidebar = () => {
+    sidebarOpen.value = !sidebarOpen.value;
+  };
+
+  const closeSidebar = () => {
+    sidebarOpen.value = false;
+  };
+
+  const applyTheme = (mode: ThemeMode) => {
+    themeMode.value = mode;
+    document.body.classList.remove("theme-light", "theme-dark", "theme-auto");
+    document.body.classList.add(`theme-${mode}`);
+    localStorage.setItem(THEME_KEY, mode);
+  };
+
+  const cycleTheme = () => {
+    const order: ThemeMode[] = ["light", "dark"];
+    const index = order.indexOf(themeMode.value);
+    applyTheme(order[(index + 1) % order.length]);
+  };
+
+  const initTheme = () => {
+    const saved = localStorage.getItem(THEME_KEY);
+    if (saved === "light" || saved === "dark") {
+      applyTheme(saved);
+      return;
+    }
+
+    applyTheme("light");
+  };
+
+  const cleanupTheme = () => { };
+
+  const loadSidebarCollapseIds = () => {
+    try {
+      const raw = localStorage.getItem(SIDEBAR_COLLAPSE_KEY);
+      sidebarOpenCollapseIds.value = raw ? (JSON.parse(raw) as string[]) : [];
+    } catch {
+      sidebarOpenCollapseIds.value = [];
+    }
+  };
+
+  const persistSidebarCollapseIds = () => {
+    localStorage.setItem(SIDEBAR_COLLAPSE_KEY, JSON.stringify(sidebarOpenCollapseIds.value));
+  };
+
+  const setSidebarCollapseOpen = (id: string, open: boolean) => {
+    const ids = new Set(sidebarOpenCollapseIds.value);
+    if (open) ids.add(id);
+    else ids.delete(id);
+    sidebarOpenCollapseIds.value = Array.from(ids);
+    persistSidebarCollapseIds();
+  };
+
+  const restoreSidebarCollapseState = () => {
+    sidebarOpenCollapseIds.value.forEach((id) => {
+      const collapse = document.getElementById(id);
+      if (!collapse) return;
+      collapse.classList.add("show");
+      const trigger = document.querySelector(`[data-bs-target="#${id}"]`);
+      if (trigger instanceof HTMLElement) {
+        trigger.classList.remove("collapsed");
+        trigger.setAttribute("aria-expanded", "true");
+      }
+    });
+  };
+
+  const onSidebarCollapseShown = (event: Event) => {
+    const target = event.target as HTMLElement | null;
+    if (!target?.id) return;
+    setSidebarCollapseOpen(target.id, true);
+  };
+
+  const onSidebarCollapseHidden = (event: Event) => {
+    const target = event.target as HTMLElement | null;
+    if (!target?.id) return;
+    setSidebarCollapseOpen(target.id, false);
+  };
+
+  const initSidebarCollapsePersistence = () => {
+    loadSidebarCollapseIds();
+    restoreSidebarCollapseState();
+
+    const sidebarAccordion = document.querySelector(".sidebar .accordion");
+    if (sidebarAccordion instanceof HTMLElement) {
+      const storedTop = Number(localStorage.getItem(SIDEBAR_SCROLL_KEY) || "0");
+      sidebarScrollTop.value = Number.isFinite(storedTop) ? storedTop : 0;
+      sidebarAccordion.scrollTop = sidebarScrollTop.value;
+
+      sidebarAccordionEl = sidebarAccordion;
+      sidebarScrollListener = () => {
+        sidebarScrollTop.value = sidebarAccordion.scrollTop;
+        localStorage.setItem(SIDEBAR_SCROLL_KEY, String(sidebarScrollTop.value));
+      };
+
+      sidebarAccordion.addEventListener("scroll", sidebarScrollListener, { passive: true });
+    }
+
+    document.addEventListener("shown.bs.collapse", onSidebarCollapseShown);
+    document.addEventListener("hidden.bs.collapse", onSidebarCollapseHidden);
+  };
+
+  const cleanupSidebarCollapsePersistence = () => {
+    if (sidebarAccordionEl && sidebarScrollListener) {
+      sidebarAccordionEl.removeEventListener("scroll", sidebarScrollListener);
+    }
+    sidebarAccordionEl = null;
+    sidebarScrollListener = null;
+    document.removeEventListener("shown.bs.collapse", onSidebarCollapseShown);
+    document.removeEventListener("hidden.bs.collapse", onSidebarCollapseHidden);
+  };
+
+  return {
+    sidebarOpen,
+    themeMode,
+    themeIcon,
+    toggleSidebar,
+    closeSidebar,
+    applyTheme,
+    cycleTheme,
+    initTheme,
+    cleanupTheme,
+    sidebarOpenCollapseIds,
+    initSidebarCollapsePersistence,
+    cleanupSidebarCollapsePersistence
+  };
+});

package/template/src/resources/src/stores/auth.ts

@@ -0,0 +1,151 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import axios from "axios";
+import { clearUser, setUser, type AuthUser } from "@/composables/useAuth";
+
+type LoginPayload = { email: string; password: string; remember?: boolean; };
+type RegisterPayload = {
+  name: string;
+  email: string;
+  password: string;
+  password_confirmation: string;
+};
+type VerifyEmailPayload = { email: string; token: string; };
+type ForgotPayload = { email: string; };
+type ResetPayload = {
+  email: string;
+  token: string;
+  password: string;
+  password_confirmation: string;
+};
+
+type ApiResponse<T> = { message: string; data?: T; };
+type AuthData = { user: AuthUser; };
+
+async function request<T>(method: "GET" | "POST", path: string, payload?: unknown): Promise<ApiResponse<T>> {
+  try {
+    const response = await axios.request<ApiResponse<T>>({
+      method,
+      url: `/api/auth${path}`,
+      data: payload
+    });
+
+    return response.data;
+  } catch (error: unknown) {
+    if (axios.isAxiosError(error)) {
+      throw new Error(String(error.response?.data?.message || error.message || "Request failed"));
+    }
+    throw new Error("Request failed");
+  }
+}
+
+export const useAuthStore = defineStore("auth", () => {
+  const user = ref<AuthUser | null>(null);
+  const isAuthenticated = ref(false);
+  const processing = ref(false);
+  const initialized = ref(false);
+
+  const syncUser = (value: AuthUser | null) => {
+    user.value = value;
+    isAuthenticated.value = !!value;
+    if (value) setUser(value);
+    else clearUser();
+  };
+
+  const bootstrap = async () => {
+    if (initialized.value) return;
+
+    try {
+      const data = await request<AuthUser>("GET", "/me");
+      syncUser((data?.data || null) as AuthUser | null);
+    } catch {
+      syncUser(null);
+    } finally {
+      initialized.value = true;
+    }
+  };
+
+  const login = async (payload: LoginPayload) => {
+    processing.value = true;
+    try {
+      const data = await request<AuthData>("POST", "/login", payload);
+      syncUser((data?.data?.user || null) as AuthUser | null);
+      initialized.value = true;
+      return data.message || "Login successful";
+    } finally {
+      processing.value = false;
+    }
+  };
+
+  const register = async (payload: RegisterPayload) => {
+    processing.value = true;
+    try {
+      const data = await request<AuthData>("POST", "/register", payload);
+      const createdUser = (data?.data?.user || null) as AuthUser | null;
+      if (createdUser) {
+        syncUser(createdUser);
+        initialized.value = true;
+      } else {
+        syncUser(null);
+      }
+      return data.message || "Registration successful";
+    } finally {
+      processing.value = false;
+    }
+  };
+
+  const verifyEmail = async (payload: VerifyEmailPayload) => {
+    processing.value = true;
+    try {
+      const data = await request<unknown>("POST", "/verify-email", payload);
+      return data.message || "Email verified successfully";
+    } finally {
+      processing.value = false;
+    }
+  };
+
+  const forgotPassword = async (payload: ForgotPayload) => {
+    processing.value = true;
+    try {
+      const data = await request<unknown>("POST", "/forgot-password", payload);
+      return data.message || "If this email exists, a reset link has been sent";
+    } finally {
+      processing.value = false;
+    }
+  };
+
+  const resetPassword = async (payload: ResetPayload) => {
+    processing.value = true;
+    try {
+      const data = await request<unknown>("POST", "/reset-password", payload);
+      return data.message || "Password reset successfully";
+    } finally {
+      processing.value = false;
+    }
+  };
+
+  const logout = async () => {
+    processing.value = true;
+    try {
+      await request<unknown>("POST", "/logout");
+    } finally {
+      syncUser(null);
+      processing.value = false;
+      initialized.value = true;
+    }
+  };
+
+  return {
+    user,
+    isAuthenticated,
+    processing,
+    initialized,
+    bootstrap,
+    register,
+    login,
+    forgotPassword,
+    resetPassword,
+    verifyEmail,
+    logout
+  };
+});

package/template/src/resources/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "strict": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "types": ["vite/client", "vue"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
+}

package/template/src/resources/vite.config.ts

@@ -0,0 +1,43 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import path from "node:path";
+import { fileURLToPath, URL } from "node:url";
+import { env } from "../env.ts";
+
+const cacheBase = process.env.LOCALAPPDATA || process.env.TEMP || ".";
+const apiUrl = env.APP_URL;
+
+const proxy: Record<string, any> = {
+  "/api": { target: apiUrl, changeOrigin: true },
+  "/health": { target: apiUrl, changeOrigin: true },
+  "/storage": { target: apiUrl, changeOrigin: true }
+};
+
+proxy["/socket.io"] = { target: apiUrl, changeOrigin: true, ws: true };
+
+export default defineConfig({
+  define: { __SOCKET_ENABLED__: env.SOCKET },
+  root: "src/resources",
+  cacheDir: path.join(cacheBase, "nexgen", "vite-cache", "resources"),
+  plugins: [vue()],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        quietDeps: true
+      }
+    }
+  },
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url))
+    }
+  },
+  build: {
+    outDir: "../../public",
+    emptyOutDir: true
+  },
+  server: {
+    port: 5173,
+    proxy
+  }
+});