feat: add generic parameters to Modal interfaces

packages/skeleton/src/lib/index.ts

@@ -5,7 +5,7 @@
 export type { AutocompleteOption } from './components/Autocomplete/types.js';
 export type { ConicStop } from './components/ConicGradient/types.js';
 export type { DrawerSettings, DrawerStore } from './utilities/Drawer/types.js';
-export type { ModalSettings, ModalComponent, ModalStore } from './utilities/Modal/types.js';
+export type { ModalSettings, ModalComponent, ModalParentProp, ModalStore } from './utilities/Modal/types.js';
 export type { ToastSettings, ToastStore } from './utilities/Toast/types.js';
 export type { TableSource } from './components/Table/types.js';
 export type { PaginationSettings } from './components/Paginator/types.js';

packages/skeleton/src/lib/utilities/Modal/Modal.svelte

@@ -23,7 +23,7 @@
 
  import { focusTrap } from '../../actions/FocusTrap/focusTrap.js';
  import { getModalStore } from './stores.js';
- import type { ModalComponent, ModalSettings } from './types.js';
+ import type { ModalComponent, ModalParentProp, ModalSettings } from './types.js';
 
  // Props (components)
  /** Register a list of reusable component modals. */
@@ -211,6 +211,7 @@
  // There is a way to self-reference component values, but it involves svelte-internal and is not yet stable.
  // REPL: https://svelte.dev/repl/badd0f11aa99450ca69dca6690d4d5a4?version=3.52.0
  // Source: https://discord.com/channels/457912077277855764/1037768846855118909
+ let parent: ModalParentProp;
  $: parent = {
  position,
  // ---

packages/skeleton/src/lib/utilities/Modal/types.ts

@@ -1,17 +1,49 @@
 // Modal Types
 
+import type { ComponentConstructorOptions, ComponentProps, SvelteComponent } from 'svelte';
+
 export type { ModalStore } from './stores.js';
 
-export interface ModalComponent {
+export interface ModalParentProp {
+ position: string;
+ // ---
+ background: string;
+ width: string;
+ height: string;
+ padding: string;
+ spacing: string;
+ rounded: string;
+ shadow: string;
+ // ---
+ buttonNeutral: string;
+ buttonPositive: string;
+ buttonTextCancel: string;
+ buttonTextConfirm: string;
+ buttonTextSubmit: string;
+ // ---
+ regionBackdrop: string;
+ regionHeader: string;
+ regionBody: string;
+ regionFooter: string;
+ // ---
+ onClose: () => void;
+}
+
+type CustomComponent = SvelteComponent<{ parent?: Partial<ModalParentProp> }>;
+
+export interface ModalComponent<Component extends CustomComponent = CustomComponent> {
  /** Import and provide your component reference. */
- ref: any;
+ ref: (new (options: ComponentConstructorOptions<any>) => Component) & {
+ /** The custom element version of the component. Only present if compiled with the `customElement` compiler option */
+ element?: typeof HTMLElement;
+ };
  /** Provide component props as key/value pairs. */
- props?: Record<string, unknown>;
+ props?: Omit<ComponentProps<Component>, 'parent'>;
  /** Provide an HTML template literal for the default slot. */
  slot?: string;
 }
 
-export interface ModalSettings {
+export interface ModalSettings<V = any, C extends CustomComponent = CustomComponent, R = any, M = any> {
  /** Designate what type of component will display. */
  type: 'alert' | 'confirm' | 'prompt' | 'component';
  /** Set the modal position within the backdrop container. */
@@ -23,13 +55,13 @@ export interface ModalSettings {
  /** Provide a URL to display an image within the modal. */
  image?: string;
  /** By default, used to provide a prompt value. */
- value?: any;
+ value?: V;
  /** Provide input attributes as key/value pairs. */
  valueAttr?: object;
  /** Provide your component reference key or object. */
- component?: ModalComponent | string;
+ component?: ModalComponent<C> | string;
  /** Provide a function. Returns the response value. */
- response?: (r: any) => void;
+ response?: (r: R) => void;
  /** Provide arbitrary classes to the backdrop. */
  backdropClasses?: string;
  /** Provide arbitrary classes to the modal window. */
@@ -41,5 +73,5 @@ export interface ModalSettings {
  /** Override the Submit button label. */
  buttonTextSubmit?: string;
  /** Pass arbitrary data per modal instance. */
- meta?: any;
+ meta?: M;
 }