@omnitend/dashboard-for-laravel 0.4.7

package/resources/js/composables/defineForm.ts

@@ -0,0 +1,78 @@
+import { useForm, type UseFormReturn } from "./useForm";
+import type { FieldDefinition, FieldType } from "../types";
+
+/**
+ * Extended field definition that includes default value
+ */
+export interface FormFieldDefinition<TValue = any> extends FieldDefinition {
+    /** Default/initial value for the field */
+    default: TValue;
+}
+
+/**
+ * Infer data type from field definitions
+ */
+type InferFormData<TFields extends readonly FormFieldDefinition[]> = {
+    [K in TFields[number] as K["key"]]: K["default"];
+};
+
+/**
+ * Return type for defineForm
+ */
+export interface DefineFormReturn<TData extends Record<string, any>> {
+    form: UseFormReturn<TData>;
+    fields: FieldDefinition[];
+}
+
+/**
+ * Helper to get default value for a field type
+ */
+function getDefaultValueForType(type: FieldType): any {
+    switch (type) {
+        case "checkbox":
+            return false;
+        case "number":
+            return 0;
+        case "select":
+        case "radio":
+            return "";
+        default:
+            return "";
+    }
+}
+
+/**
+ * Define a form with type-safe field definitions.
+ * Reduces duplication by inferring initial values from field definitions.
+ *
+ * @example
+ * const { form, fields } = defineForm([
+ *   { key: "email", type: "email", label: "Email", default: "", required: true },
+ *   { key: "password", type: "password", label: "Password", default: "", required: true },
+ *   { key: "remember", type: "checkbox", label: "Remember me", default: false },
+ * ] as const);
+ */
+export function defineForm<const TFields extends readonly FormFieldDefinition[]>(
+    fieldDefinitions: TFields,
+): DefineFormReturn<InferFormData<TFields>> {
+    type FormData = InferFormData<TFields>;
+
+    // Extract initial data from field definitions
+    const initialData = fieldDefinitions.reduce(
+        (acc, field) => {
+            acc[field.key] = field.default ?? getDefaultValueForType(field.type);
+            return acc;
+        },
+        {} as Record<string, any>,
+    ) as FormData;
+
+    // Create form instance
+    const form = useForm<FormData>(initialData);
+
+    // Strip 'default' property from fields for OForm compatibility
+    const fields: FieldDefinition[] = fieldDefinitions.map(
+        ({ default: _default, ...field }) => field,
+    );
+
+    return { form, fields };
+}

package/resources/js/composables/useForm.ts

@@ -0,0 +1,272 @@
+import {
+    reactive,
+    computed,
+    type ComputedRef,
+    type WritableComputedRef,
+} from "vue";
+import { api, type ApiError } from "../utils/api";
+
+export interface ValidationErrors {
+    [key: string]: string[];
+}
+
+export type FormError = ApiError;
+
+export interface FormSubmitOptions<TPayload = unknown, TResponse = unknown> {
+    onSuccess?: (data: TResponse) => void;
+    onError?: (error: FormError) => void;
+    onBefore?: (payload: TPayload) => void;
+    onFinish?: () => void;
+    transform?: (payload: TPayload) => unknown;
+    preserveErrors?: boolean;
+    resetOnSuccess?: boolean;
+    signal?: AbortSignal;
+}
+
+export interface FormState<TData extends Record<string, any>> {
+    data: TData; // viewed as TData at the API boundary
+    errors: ValidationErrors;
+    processing: boolean;
+    message: string;
+    touched: Record<string, boolean>;
+    recentlySuccessful: boolean;
+    shouldShowMessage: boolean;
+}
+
+export interface UseFormReturn<TData extends Record<string, any>>
+    extends FormState<TData> {
+    hasErrors: ComputedRef<boolean>;
+    hasError: (field: keyof TData | string) => boolean;
+    getError: (field: keyof TData | string) => string;
+    getState: (field: keyof TData | string) => true | false | null;
+    setErrors: (errors?: ValidationErrors) => void;
+    setMessage: (message: string) => void;
+    clearErrors: () => void;
+    clearError: (field: keyof TData | string) => void;
+    reset: (only?: Array<keyof TData>) => void;
+    field: <K extends keyof TData>(key: K) => WritableComputedRef<TData[K]>;
+    fields: { [K in keyof TData]: WritableComputedRef<TData[K]> };
+    submit: <TResponse = unknown>(
+        method: "get" | "post" | "put" | "patch" | "delete",
+        url: string,
+        options?: FormSubmitOptions<TData, TResponse>,
+    ) => Promise<TResponse>;
+    post: <TResponse = unknown>(
+        url: string,
+        options?: FormSubmitOptions<TData, TResponse>,
+    ) => Promise<TResponse>;
+    put: <TResponse = unknown>(
+        url: string,
+        options?: FormSubmitOptions<TData, TResponse>,
+    ) => Promise<TResponse>;
+    patch: <TResponse = unknown>(
+        url: string,
+        options?: FormSubmitOptions<TData, TResponse>,
+    ) => Promise<TResponse>;
+    delete: <TResponse = unknown>(
+        url: string,
+        options?: FormSubmitOptions<TData, TResponse>,
+    ) => Promise<TResponse>;
+}
+
+// ————————————————— helpers
+
+const deepClone = <T>(v: T): T =>
+    typeof structuredClone === "function"
+        ? structuredClone(v)
+        : JSON.parse(JSON.stringify(v));
+
+function errorsFromLaravel(error: any): {
+    errors: ValidationErrors;
+    message: string;
+} {
+    const data = error?.response?.data ?? error?.data ?? error;
+    return {
+        errors: (data?.errors as ValidationErrors) ?? {},
+        message: (data?.message as string) ?? "An error occurred",
+    };
+}
+
+// ————————————————— composable
+
+export function useForm<TData extends Record<string, any>>(
+    initialData = {} as TData,
+): UseFormReturn<TData> {
+    const snapshot = deepClone(initialData);
+
+    const state = reactive<FormState<TData>>({
+        data: deepClone(snapshot) as TData,
+        errors: {},
+        processing: false,
+        message: "",
+        touched: {},
+        recentlySuccessful: false,
+        shouldShowMessage: false,
+    });
+
+    const hasErrors = computed(() =>
+        Object.keys(state.errors).some(
+            (k) => (state.errors[k]?.length ?? 0) > 0,
+        ),
+    );
+
+    const hasError = (field: keyof TData | string): boolean => {
+        return (state.errors[field as string]?.length ?? 0) > 0;
+    };
+
+    const getError = (field: keyof TData | string): string => {
+        return state.errors[field as string]?.[0] ?? "";
+    };
+
+    const getState = (field: keyof TData | string): false | null =>
+        hasError(field) ? false : null;
+
+    const setErrors = (errors: ValidationErrors = {}): void => {
+        for (const k of Object.keys(state.errors)) delete state.errors[k];
+        Object.assign(state.errors, errors);
+    };
+
+    const setMessage = (message: string): void => {
+        state.message = message;
+    };
+
+    const clearErrors = (): void => {
+        for (const key of Object.keys(state.errors)) delete state.errors[key];
+        state.message = "";
+    };
+
+    const clearError = (field: keyof TData | string): void => {
+        const key = field as string;
+        if (state.errors[key]) delete state.errors[key];
+    };
+
+    const reset = (only?: Array<keyof TData>): void => {
+        if (only?.length) {
+            for (const k of only) {
+                (state.data as any)[k as string] = deepClone(
+                    (snapshot as any)[k as string],
+                );
+            }
+        } else {
+            // operate on a Record view to satisfy TS
+            const dataRecord = state.data as Record<string, unknown>;
+            for (const k of Object.keys(dataRecord))
+                delete (dataRecord as any)[k];
+            Object.assign(
+                state.data as Record<string, unknown>,
+                deepClone(snapshot),
+            );
+        }
+        clearErrors();
+        state.touched = {};
+        state.processing = false;
+    };
+
+    // v-model for a single field
+    const field = <K extends keyof TData>(
+        key: K,
+    ): WritableComputedRef<TData[K]> =>
+        computed<TData[K]>({
+            get: () => (state.data as TData)[key],
+            set: (value) => {
+                (state.data as TData)[key] = value;
+                state.touched[key as string] = true;
+                if (state.errors[key as string])
+                    delete state.errors[key as string];
+            },
+        });
+
+    // property-style fields map (non-Proxy, uses snapshot keys)
+    const fields = {} as UseFormReturn<TData>["fields"];
+    (Object.keys(snapshot) as Array<keyof TData>).forEach((k) => {
+        Object.defineProperty(fields, k, {
+            get: () => field(k),
+            enumerable: true,
+        });
+    });
+
+    const submit = async <TResponse = unknown>(
+        method: "get" | "post" | "put" | "patch" | "delete",
+        url: string,
+        options: FormSubmitOptions<TData, TResponse> = {},
+    ): Promise<TResponse> => {
+        state.processing = true;
+        if (!options.preserveErrors) clearErrors();
+
+        const payloadRaw = (
+            options.transform
+                ? options.transform(state.data as TData)
+                : (state.data as TData)
+        ) as any;
+
+        options.onBefore?.(state.data as TData);
+
+        try {
+            const { data } =
+                method === "get"
+                    ? await api.get<TResponse>(
+                        url,
+                        payloadRaw as Record<string, unknown>,
+                        { signal: options?.signal },
+                    )
+                    : await api[method]<TResponse>(url, payloadRaw, {
+                        signal: options?.signal,
+                    });
+
+            state.recentlySuccessful = true;
+            setTimeout(() => (state.recentlySuccessful = false), 1500);
+
+            options.onSuccess?.(data);
+            if (options.resetOnSuccess) {
+                reset();
+            }
+            return data;
+        } catch (err) {
+            const { errors, message } = errorsFromLaravel(err);
+            setErrors(errors);
+            setMessage(message);
+            options.onError?.(err as FormError);
+            throw err;
+        } finally {
+            state.processing = false;
+            options.onFinish?.();
+        }
+    };
+
+    const post = <R = unknown>(url: string, o?: FormSubmitOptions<TData, R>) =>
+        submit<R>("post", url, o);
+    const put = <R = unknown>(url: string, o?: FormSubmitOptions<TData, R>) =>
+        submit<R>("put", url, o);
+    const patch = <R = unknown>(url: string, o?: FormSubmitOptions<TData, R>) =>
+        submit<R>("patch", url, o);
+    const del = <R = unknown>(url: string, o?: FormSubmitOptions<TData, R>) =>
+        submit<R>("delete", url, o);
+
+    const shouldShowMessage = computed(() => {
+        return (
+            state.message !== "" &&
+            state.processing === false &&
+            hasErrors.value === false
+        );
+    });
+
+    return Object.assign(state, {
+        hasErrors,
+        hasError,
+        getError,
+        getState,
+        setErrors,
+        setMessage,
+        clearErrors,
+        clearError,
+        reset,
+        field,
+        fields,
+        submit,
+        post,
+        put,
+        patch,
+        delete: del,
+        shouldShowMessage,
+    }) as UseFormReturn<TData>;
+}

package/resources/js/composables/useToast.ts

@@ -0,0 +1 @@
+export { useToast } from 'bootstrap-vue-next';

package/resources/js/index.ts

@@ -0,0 +1,118 @@
+// Import theme styles so they're included in the build
+import '../css/theme.scss';
+
+// Re-export everything from Bootstrap Vue Next for complete control
+export * from 'bootstrap-vue-next';
+
+// Extended components (custom functionality beyond Bootstrap Vue Next)
+export { default as DXDashboard } from "./components/extended/DXDashboard.vue";
+export { default as DXBasicForm } from "./components/extended/DXBasicForm.vue";
+export { default as DXForm } from "./components/extended/DXForm.vue";
+export { default as DXTable } from "./components/extended/DXTable.vue";
+export { default as DXDashboardSidebar } from "./components/extended/DXDashboardSidebar.vue";
+export { default as DXDashboardNavbar } from "./components/extended/DXDashboardNavbar.vue";
+
+// Base components (wrapped Bootstrap with theming)
+export { default as DAccordion } from "./components/base/DAccordion.vue";
+export { default as DAccordionItem } from "./components/base/DAccordionItem.vue";
+export { default as DAlert } from "./components/base/DAlert.vue";
+export { default as DAvatar } from "./components/base/DAvatar.vue";
+export { default as DBadge } from "./components/base/DBadge.vue";
+export { default as DBreadcrumb } from "./components/base/DBreadcrumb.vue";
+export { default as DButton } from "./components/base/DButton.vue";
+export { default as DButtonGroup } from "./components/base/DButtonGroup.vue";
+export { default as DButtonToolbar } from "./components/base/DButtonToolbar.vue";
+export { default as DCard } from "./components/base/DCard.vue";
+export { default as DCarousel } from "./components/base/DCarousel.vue";
+export { default as DCarouselSlide } from "./components/base/DCarouselSlide.vue";
+export { default as DCol } from "./components/base/DCol.vue";
+export { default as DCollapse } from "./components/base/DCollapse.vue";
+export { default as DContainer } from "./components/base/DContainer.vue";
+export { default as DDropdown } from "./components/base/DDropdown.vue";
+export { default as DDropdownDivider } from "./components/base/DDropdownDivider.vue";
+export { default as DDropdownItem } from "./components/base/DDropdownItem.vue";
+export { default as DForm } from "./components/base/DForm.vue";
+export { default as DFormCheckbox } from "./components/base/DFormCheckbox.vue";
+export { default as DFormGroup } from "./components/base/DFormGroup.vue";
+export { default as DFormInput } from "./components/base/DFormInput.vue";
+export { default as DFormInvalidFeedback } from "./components/base/DFormInvalidFeedback.vue";
+export { default as DFormRadio } from "./components/base/DFormRadio.vue";
+export { default as DFormSelect } from "./components/base/DFormSelect.vue";
+export { default as DFormSpinbutton } from "./components/base/DFormSpinbutton.vue";
+export { default as DFormTags } from "./components/base/DFormTags.vue";
+export { default as DFormText } from "./components/base/DFormText.vue";
+export { default as DFormTextarea } from "./components/base/DFormTextarea.vue";
+export { default as DImage } from "./components/base/DImage.vue";
+export { default as DInputGroup } from "./components/base/DInputGroup.vue";
+export { default as DLink } from "./components/base/DLink.vue";
+export { default as DListGroup } from "./components/base/DListGroup.vue";
+export { default as DListGroupItem } from "./components/base/DListGroupItem.vue";
+export { default as DModal } from "./components/base/DModal.vue";
+export { default as DNav } from "./components/base/DNav.vue";
+export { default as DNavbar } from "./components/base/DNavbar.vue";
+export { default as DNavbarBrand } from "./components/base/DNavbarBrand.vue";
+export { default as DNavbarNav } from "./components/base/DNavbarNav.vue";
+export { default as DNavbarToggle } from "./components/base/DNavbarToggle.vue";
+export { default as DNavItem } from "./components/base/DNavItem.vue";
+export { default as DOffcanvas } from "./components/base/DOffcanvas.vue";
+export { default as DOverlay } from "./components/base/DOverlay.vue";
+export { default as DPagination } from "./components/base/DPagination.vue";
+export { default as DPlaceholder } from "./components/base/DPlaceholder.vue";
+export { default as DPopover } from "./components/base/DPopover.vue";
+export { default as DProgress } from "./components/base/DProgress.vue";
+export { default as DRow } from "./components/base/DRow.vue";
+export { default as DSpinner } from "./components/base/DSpinner.vue";
+export { default as DTable } from "./components/base/DTable.vue";
+export { default as DTab } from "./components/base/DTab.vue";
+export { default as DTabs } from "./components/base/DTabs.vue";
+export { default as DToast } from "./components/base/DToast.vue";
+export { default as DToaster } from "./components/base/DToaster.vue";
+export { default as DTooltip } from "./components/base/DTooltip.vue";
+
+// Composables
+export { useForm } from "./composables/useForm";
+export { defineForm } from "./composables/defineForm";
+export { useToast } from "./composables/useToast";
+
+// Utils
+export { api } from "./utils/api";
+
+// Types
+export type {
+    FieldType,
+    FieldOption,
+    FieldDefinition,
+} from "./types";
+
+export type {
+    ValidationErrors,
+    FormError,
+    FormSubmitOptions,
+    FormState,
+    UseFormReturn,
+} from "./composables/useForm";
+
+export type {
+    FormFieldDefinition,
+    DefineFormReturn,
+} from "./composables/defineForm";
+
+export type {
+    ApiError,
+    ApiResponse,
+} from "./utils/api";
+
+export type {
+    TableField,
+    PaginationData,
+    BTableSortBy,
+    BTableProvider,
+    EditTab,
+    BTableProviderContext,
+} from "./components/extended/DXTable.vue";
+
+export type {
+    NavigationItem,
+    NavigationGroup,
+    Navigation,
+} from "./types/navigation";

package/resources/js/types/index.ts

@@ -0,0 +1,61 @@
+/**
+ * Field types supported by OForm
+ */
+export type FieldType =
+    | "text"
+    | "email"
+    | "password"
+    | "number"
+    | "url"
+    | "tel"
+    | "date"
+    | "datetime-local"
+    | "time"
+    | "textarea"
+    | "select"
+    | "checkbox"
+    | "radio";
+
+/**
+ * Option for select or radio fields
+ */
+export interface FieldOption extends Record<string, unknown> {
+    value: any;
+    text: string;
+    disabled?: boolean;
+}
+
+/**
+ * Field definition for OForm
+ */
+export interface FieldDefinition {
+    /** Field key (must match form data key) */
+    key: string;
+
+    /** Field type */
+    type: FieldType;
+
+    /** Field label (optional) */
+    label?: string;
+
+    /** Placeholder text (optional) */
+    placeholder?: string;
+
+    /** Whether field is required (optional) */
+    required?: boolean;
+
+    /** Options for select or radio fields */
+    options?: FieldOption[];
+
+    /** Number of rows for textarea (default: 3) */
+    rows?: number;
+
+    /** Help text displayed below field */
+    help?: string;
+
+    /** CSS class for the form group */
+    class?: string;
+
+    /** Additional props to pass to the input component */
+    inputProps?: Record<string, any>;
+}

package/resources/js/types/navigation.ts

@@ -0,0 +1,19 @@
+export interface NavigationItem {
+  label: string;
+  url: string;
+  icon?: string;
+  badge?: string | number;
+  badgeColor?: string;
+  active?: boolean;
+  visible?: boolean;
+}
+
+export interface NavigationGroup {
+  label?: string;
+  items: NavigationItem[];
+  collapsible?: boolean;
+  collapsed?: boolean;
+  visible?: boolean;
+}
+
+export type Navigation = NavigationGroup[];