@svadmin/core 0.0.6 → 0.4.1

package/src/url-sync.ts

@@ -1,14 +1,18 @@
 // URL state sync — sync pagination/sort/filters with hash params
 
+import type { Filter } from './types';
+
 export interface URLState {
   page?: number;
   pageSize?: number;
   sortField?: string;
   sortOrder?: 'asc' | 'desc';
   search?: string;
+  filters?: Filter[];
 }
 
 export function readURLState(): URLState {
+  if (typeof window === 'undefined') return {};
   const hash = window.location.hash;
   const queryIdx = hash.indexOf('?');
   if (queryIdx === -1) return {};
@@ -31,10 +35,18 @@ export function readURLState(): URLState {
   const search = params.get('q');
   if (search) state.search = search;
 
+  const filtersRaw = params.get('filters');
+  if (filtersRaw) {
+    try {
+      state.filters = JSON.parse(filtersRaw);
+    } catch { /* ignore invalid json */ }
+  }
+
   return state;
 }
 
 export function writeURLState(state: URLState): void {
+  if (typeof window === 'undefined') return;
   const hash = window.location.hash;
   const pathIdx = hash.indexOf('?');
   const basePath = pathIdx === -1 ? hash : hash.slice(0, pathIdx);
@@ -45,6 +57,9 @@ export function writeURLState(state: URLState): void {
   if (state.sortField) params.set('sort', state.sortField);
   if (state.sortOrder) params.set('order', state.sortOrder);
   if (state.search) params.set('q', state.search);
+  if (state.filters && state.filters.length > 0) {
+    params.set('filters', JSON.stringify(state.filters));
+  }
 
   const qs = params.toString();
   const newHash = qs ? `${basePath}?${qs}` : basePath;

package/src/useParsed.ts

@@ -1,7 +1,7 @@
 // useParsed — parse current URL hash into structured route info
 
 import { currentPath } from './router';
-import { getResources } from './context';
+import { getResources } from './context.svelte';
 
 interface ParsedRoute {
   resource?: string;
@@ -40,9 +40,46 @@ export function useParsed(): ParsedRoute {
     const segments = pathname.split('/').filter(Boolean);
     if (segments.length === 0) return result;
 
-    // First segment is typically the resource name
+    // Find the rightmost segment that matches a known resource name
     const resourceNames = resources.map(r => r.name);
-    if (resourceNames.includes(segments[0])) {
+    let resourceIndex = -1;
+    for (let i = segments.length - 1; i >= 0; i--) {
+      if (resourceNames.includes(segments[i])) {
+        resourceIndex = i;
+        break;
+      }
+    }
+
+    if (resourceIndex !== -1) {
+      result.resource = segments[resourceIndex];
+
+      // Add parent path params based on `<parentResource>/<parentId>` structure
+      for (let i = 0; i < resourceIndex; i += 2) {
+        if (segments[i] && segments[i + 1]) {
+          const parentName = segments[i];
+          const singular = parentName.endsWith('s') ? parentName.slice(0, -1) : parentName;
+          result.params[`${singular}Id`] = segments[i + 1];
+        }
+      }
+
+      const restSegments = segments.slice(resourceIndex + 1);
+      if (restSegments.length === 0) {
+        result.action = 'list';
+      } else if (restSegments[0] === 'create') {
+        result.action = 'create';
+      } else if (restSegments[0] === 'edit' && restSegments[1]) {
+        result.action = 'edit';
+        result.id = restSegments[1];
+      } else if (restSegments[0] === 'show' && restSegments[1]) {
+        result.action = 'show';
+        result.id = restSegments[1];
+      } else if (restSegments[0]) {
+        // Legacy: /:resource/:id
+        result.action = 'show';
+        result.id = restSegments[0];
+      }
+    } else {
+      // Fallback if resource definitions are not loaded yet
       result.resource = segments[0];
 
       if (segments.length === 1) {
@@ -56,7 +93,6 @@ export function useParsed(): ParsedRoute {
         result.action = 'show';
         result.id = segments[2];
       } else if (segments[1]) {
-        // Legacy: /:resource/:id
         result.action = 'show';
         result.id = segments[1];
       }

package/src/useStepsForm.svelte.ts

@@ -0,0 +1,71 @@
+import { useForm } from './form-hooks.svelte';
+import type { UseFormOptions, UseFormResult } from './form-hooks.svelte';
+import type { BaseRecord, HttpError } from './types';
+
+export interface UseStepsFormOptions<
+  TQueryFnData extends BaseRecord = BaseRecord,
+  TError = HttpError,
+  TVariables = Record<string, unknown>,
+  TData extends BaseRecord = TQueryFnData
+> extends UseFormOptions<TQueryFnData, TError, TVariables, TData> {
+  /** Default step index. Starts at 0. */
+  defaultStep?: number;
+  /** Validate the form when navigating back? */
+  isBackValidate?: boolean;
+}
+
+export interface UseStepsFormResult<
+  TQueryFnData extends BaseRecord = BaseRecord,
+  TError = HttpError,
+  TVariables = Record<string, unknown>,
+  TData extends BaseRecord = TQueryFnData
+> extends UseFormResult<TQueryFnData, TError, TVariables, TData> {
+  currentStep: number;
+  gotoStep: (step: number) => void;
+  next: () => void;
+  prev: () => void;
+}
+
+/**
+ * useStepsForm
+ * Extends `useForm` with step navigation state (currentStep, next, prev, gotoStep).
+ */
+export function useStepsForm<
+  TQueryFnData extends BaseRecord = BaseRecord,
+  TError = HttpError,
+  TVariables = Record<string, unknown>,
+  TData extends BaseRecord = TQueryFnData
+>(options: UseStepsFormOptions<TQueryFnData, TError, TVariables, TData> = {} as UseStepsFormOptions<TQueryFnData, TError, TVariables, TData>): UseStepsFormResult<TQueryFnData, TError, TVariables, TData> {
+  const form = useForm<TQueryFnData, TError, TVariables, TData>(options);
+  
+  let currentStep = $state(options.defaultStep ?? 0);
+  
+  function gotoStep(step: number) {
+    currentStep = Math.max(0, step);
+  }
+  
+  function next() {
+    gotoStep(currentStep + 1);
+  }
+  
+  function prev() {
+    if (currentStep > 0) {
+      gotoStep(currentStep - 1);
+    }
+  }
+
+  // Inject stepping features into the returned useForm object while preserving its reactive getters.
+  const result = form as unknown as UseStepsFormResult<TQueryFnData, TError, TVariables, TData>;
+  
+  Object.defineProperty(result, 'currentStep', {
+    get: () => currentStep,
+    enumerable: true,
+    configurable: true
+  });
+  
+  result.gotoStep = gotoStep;
+  result.next = next;
+  result.prev = prev;
+
+  return result;
+}

package/src/utility-hooks.svelte.ts

@@ -0,0 +1,161 @@
+import { useForm, type UseFormOptions } from './form-hooks.svelte';
+import { useQueryClient } from '@tanstack/svelte-query';
+import { useParsed } from './useParsed';
+import { getResource, getResources } from './context.svelte';
+import { getAdminOptions } from './options';
+import { navigate } from './router';
+import { t } from './i18n.svelte';
+import type { BaseRecord, HttpError, Filter, KnownResources, ResourceDefinition } from './types';
+import { useList, type UseListOptions } from './query-hooks.svelte';
+import { toast } from './toast.svelte';
+
+// ─── useModal ─────────────────────────────────────────────────
+export function useModal(options?: { defaultVisible?: boolean }) {
+  let visible = $state(options?.defaultVisible ?? false);
+  return {
+    get visible() { return visible; },
+    show() { visible = true; },
+    close() { visible = false; },
+  };
+}
+
+// ─── useModalForm ─────────────────────────────────────────────
+
+export interface UseModalFormOptions<TQueryFnData extends BaseRecord = BaseRecord, TError = HttpError, TVariables = Record<string, unknown>, TData extends BaseRecord = TQueryFnData> extends UseFormOptions<TQueryFnData, TError, TVariables, TData> {
+  defaultVisible?: boolean;
+  autoSave?: UseFormOptions<TQueryFnData, TError, TVariables, TData>['autoSave'] & {
+    invalidateOnClose?: boolean;
+  };
+}
+
+export function useModalForm<
+  TQueryFnData extends BaseRecord = BaseRecord,
+  TError = HttpError,
+  TVariables = Record<string, unknown>,
+  TData extends BaseRecord = TQueryFnData
+>(options: UseModalFormOptions<TQueryFnData, TError, TVariables, TData> = {}) {
+  const queryClient = useQueryClient();
+  const formState = useForm(options);
+  let visible = $state(options.defaultVisible ?? false);
+
+  function show(id?: string | number) {
+    if (id !== undefined) formState.setId(id);
+    visible = true;
+  }
+
+  function close() {
+    visible = false;
+    formState.clearErrors();
+    if (options.autoSave?.invalidateOnClose) {
+      queryClient.invalidateQueries({ queryKey: [formState.resource] });
+    }
+  }
+
+  return {
+    get visible() { return visible; },
+    show,
+    close,
+    get modalProps() { return { visible, close }; },
+    formState,
+  };
+}
+
+export const useDrawerForm = useModalForm; // Alias for UI variations
+
+// ─── useMenu ──────────────────────────────────────────────────
+
+export interface MenuConfig {
+  name: string;
+  route: string;
+  label: string;
+  icon?: string;
+  parentName?: string;
+  order?: number;
+}
+
+export function useMenu() {
+  const adminOptions = getAdminOptions();
+  const resources = getResources();
+  const parsed = useParsed();
+
+  const menuItems = $derived.by<MenuConfig[]>(() => {
+    let items: MenuConfig[] = resources
+      .filter((r: ResourceDefinition) => r.showInMenu !== false)
+      .map((r: ResourceDefinition): MenuConfig => ({
+        name: r.name,
+        route: `/${r.name}`,
+        label: r.label || r.name, // Usually handled by i18n label mapping
+        icon: r.icon,
+        parentName: r.parentName,
+        order: r.menuOrder ?? 999,
+      }));
+
+    if (adminOptions.menuItems) items = adminOptions.menuItems(items);
+    items.sort((a, b) => (a.order ?? 999) - (b.order ?? 999));
+    return items;
+  });
+
+  return {
+    get menuItems() { return menuItems; },
+    get selectedKey() { return parsed.resource ?? '/'; },
+  };
+}
+
+// ─── useBreadcrumb ────────────────────────────────────────────
+
+export interface BreadcrumbItem {
+  label: string;
+  link?: string;
+  icon?: string;
+}
+
+export function useBreadcrumb() {
+  const parsed = useParsed();
+  
+  const items = $derived.by<BreadcrumbItem[]>(() => {
+    const list: BreadcrumbItem[] = [];
+    if (!parsed.resource) return list;
+
+    try {
+      const res = getResource(parsed.resource);
+      list.push({ label: res.label || res.name, link: `/${res.name}`, icon: res.icon });
+
+      if (parsed.action === 'create') {
+        list.push({ label: t('common.create') });
+      } else if (parsed.action === 'edit' && parsed.id) {
+        list.push({ label: t('common.edit') });
+        list.push({ label: String(parsed.id) });
+      } else if (parsed.action === 'show' && parsed.id) {
+        list.push({ label: t('common.show') });
+        list.push({ label: String(parsed.id) });
+      }
+    } catch {
+      // Ignored
+    }
+    return list;
+  });
+
+  return { get items() { return items; } };
+}
+
+// ─── useRelation ───────────────────────────────────────────
+
+export interface UseRelationOptions<TData extends BaseRecord = BaseRecord, TError = HttpError> {
+  resource: KnownResources;
+  id?: string | number;
+  pagination?: { current?: number; pageSize?: number };
+  sorters?: { field: string; order: 'asc' | 'desc' }[];
+  filters?: Filter[];
+  queryOptions?: { enabled?: boolean; staleTime?: number };
+}
+
+export function useRelation<TData extends BaseRecord = BaseRecord, TError = HttpError>(options: UseRelationOptions<TData, TError>) {
+  return useList<TData, TError>({
+    ...options
+  });
+}
+
+// ─── useNotification ────────────────────────────────────────
+export function useNotification() {
+  return { open: toast.info, success: toast.success, error: toast.error, warning: toast.warning };
+}

package/src/context.ts

@@ -1,61 +0,0 @@
-// Svelte context — provides DataProvider, AuthProvider, and Resources to all components
-
-import { getContext, setContext } from 'svelte';
-import type { DataProvider, AuthProvider, ResourceDefinition } from './types';
-import type { RouterProvider } from './router-provider';
-
-const DATA_PROVIDER_KEY = Symbol('data-provider');
-const AUTH_PROVIDER_KEY = Symbol('auth-provider');
-const RESOURCES_KEY = Symbol('resources');
-const ROUTER_PROVIDER_KEY = Symbol('router-provider');
-
-// ─── Setters (called once in App.svelte) ────────────────────────
-
-export function setDataProvider(provider: DataProvider): void {
-  setContext(DATA_PROVIDER_KEY, provider);
-}
-
-export function setAuthProvider(provider: AuthProvider): void {
-  setContext(AUTH_PROVIDER_KEY, provider);
-}
-
-export function setResources(resources: ResourceDefinition[]): void {
-  setContext(RESOURCES_KEY, resources);
-}
-
-// ─── Getters (called from any child component) ──────────────────
-
-export function getDataProvider(): DataProvider {
-  const provider = getContext<DataProvider>(DATA_PROVIDER_KEY);
-  if (!provider) throw new Error('DataProvider not found. Did you call setDataProvider in App.svelte?');
-  return provider;
-}
-
-export function getAuthProvider(): AuthProvider {
-  const provider = getContext<AuthProvider>(AUTH_PROVIDER_KEY);
-  if (!provider) throw new Error('AuthProvider not found. Did you call setAuthProvider in App.svelte?');
-  return provider;
-}
-
-export function getResources(): ResourceDefinition[] {
-  const resources = getContext<ResourceDefinition[]>(RESOURCES_KEY);
-  if (!resources) throw new Error('Resources not found. Did you call setResources in App.svelte?');
-  return resources;
-}
-
-export function getResource(name: string): ResourceDefinition {
-  const resources = getResources();
-  const resource = resources.find(r => r.name === name);
-  if (!resource) throw new Error(`Resource "${name}" not found in resource definitions.`);
-  return resource;
-}
-
-// ─── Router Provider ────────────────────────────────────────────
-
-export function setRouterProvider(provider: RouterProvider): void {
-  setContext(ROUTER_PROVIDER_KEY, provider);
-}
-
-export function getRouterProvider(): RouterProvider | undefined {
-  return getContext<RouterProvider>(ROUTER_PROVIDER_KEY);
-}