mirror of
https://github.com/InvoiceShelf/InvoiceShelf.git
synced 2026-04-15 17:24:10 +00:00
991b716b33
Create the complete TypeScript foundation for the Vue 3 migration in a parallel scripts-v2/ directory. 72 files, 5430 lines, zero any types, strict mode. - types/ (21 files): Domain interfaces for all 17 entities derived from actual Laravel models and API resources. Enums for all statuses. Generic API response wrappers. - api/ (29 files): Typed axios client with interceptors, endpoint constants from routes/api.php, 25 typed service classes covering every API endpoint. - composables/ (14 files): Vue 3 composition functions for auth, notifications, dialogs, modals, pagination, filters, currency, dates, theme, sidebar, company context, and permissions. - utils/ (5 files): Pure typed utilities for money formatting, date formatting (date-fns), localStorage, and error handling. - config/ (3 files): Typed ability constants, app constants. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
102 lines
2.2 KiB
TypeScript
102 lines
2.2 KiB
TypeScript
import { ref, computed, readonly } from 'vue'
|
|
import type { DeepReadonly, Ref, ComputedRef } from 'vue'
|
|
import type { ModalSize } from '../config/constants'
|
|
|
|
export interface ModalState {
|
|
active: boolean
|
|
componentName: string
|
|
title: string
|
|
content: string
|
|
id: string
|
|
size: ModalSize
|
|
data: unknown
|
|
refreshData: (() => void) | null
|
|
variant: string
|
|
}
|
|
|
|
export interface OpenModalOptions {
|
|
componentName: string
|
|
title?: string
|
|
content?: string
|
|
id?: string
|
|
size?: ModalSize
|
|
data?: unknown
|
|
refreshData?: () => void
|
|
variant?: string
|
|
}
|
|
|
|
export interface UseModalReturn {
|
|
modalState: DeepReadonly<Ref<ModalState>>
|
|
isEdit: ComputedRef<boolean>
|
|
openModal: (options: OpenModalOptions) => void
|
|
closeModal: () => void
|
|
resetModalData: () => void
|
|
}
|
|
|
|
const DEFAULT_STATE: ModalState = {
|
|
active: false,
|
|
componentName: '',
|
|
title: '',
|
|
content: '',
|
|
id: '',
|
|
size: 'md',
|
|
data: null,
|
|
refreshData: null,
|
|
variant: '',
|
|
}
|
|
|
|
const modalState = ref<ModalState>({ ...DEFAULT_STATE })
|
|
|
|
/**
|
|
* Composable for managing a global modal.
|
|
* Supports opening modals by component name with props, and tracks edit vs create mode.
|
|
*/
|
|
export function useModal(): UseModalReturn {
|
|
const isEdit = computed<boolean>(() => modalState.value.id !== '')
|
|
|
|
/**
|
|
* Open a modal with the specified options.
|
|
*
|
|
* @param options - Modal configuration including component name and optional props
|
|
*/
|
|
function openModal(options: OpenModalOptions): void {
|
|
modalState.value = {
|
|
active: true,
|
|
componentName: options.componentName,
|
|
title: options.title ?? '',
|
|
content: options.content ?? '',
|
|
id: options.id ?? '',
|
|
size: options.size ?? 'md',
|
|
data: options.data ?? null,
|
|
refreshData: options.refreshData ?? null,
|
|
variant: options.variant ?? '',
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Close the modal with a brief delay for animation.
|
|
*/
|
|
function closeModal(): void {
|
|
modalState.value.active = false
|
|
|
|
setTimeout(() => {
|
|
resetModalData()
|
|
}, 300)
|
|
}
|
|
|
|
/**
|
|
* Reset modal data back to defaults.
|
|
*/
|
|
function resetModalData(): void {
|
|
modalState.value = { ...DEFAULT_STATE }
|
|
}
|
|
|
|
return {
|
|
modalState: readonly(modalState),
|
|
isEdit,
|
|
openModal,
|
|
closeModal,
|
|
resetModalData,
|
|
}
|
|
}
|