chore(modal): Renamed modal service and template component

Author: spuxx-dev

apps/solid/src/routes/dialog.route.tsx

@@ -3,7 +3,7 @@ import {
   Container,
   Divider,
   Heading,
-  ModalDialog,
+  Modal,
   ConfirmModal,
   ModalPortal,
 } from '@spuxx/solid';
@@ -20,9 +20,9 @@ export const DialogRoute: Component = () => {
         <Divider color="gradient" />
         <Button
           onClick={() => {
-            ModalDialog.show(ConfirmModal, {
+            Modal.show(ConfirmModal, {
               title: 'Hello World!',
-              color: 'gradient',
+              // color: 'gradient',
               content: `Cum consequatur occaecati dolorem quo ducimus harum est placeat.
               Quam perspiciatis exercitationem animi ut.
               Dolorem eum rerum labore. Sit est facere ratione.

packages/solid/src/modal/built-in/confirm.modal.tsx

@@ -1,6 +1,6 @@
 import { ModalComponent, ModalOptions } from '../modal.types';
 import { ModalHeader } from '../template/modal-header.component';
-import { Modal } from '../template/modal.component';
+import { ModalTemplate } from '../template/modal-template.component';
 import { ModalBody } from '../template/modal-body.component';
 import { ModalFooter } from '../template/modal-footer.component';
 import { Button } from '../../components/input/button';
@@ -63,7 +63,7 @@ export const ConfirmModal: ModalComponent<ConfirmModalOptions> = (options) => {
   const { confirmColor = 'primary', cancelColor = 'primary' } = options;
 
   return (
-    <Modal {...options}>
+    <ModalTemplate {...options}>
       <ModalHeader
         icon={options.icon}
         title={options.title}
@@ -86,6 +86,6 @@ export const ConfirmModal: ModalComponent<ConfirmModalOptions> = (options) => {
           <b>{options.confirmLabel}</b>
         </Button>
       </ModalFooter>
-    </Modal>
+    </ModalTemplate>
   );
 };

packages/solid/src/modal/modal-dialog.service.tsx

@@ -2,20 +2,21 @@ import { ServiceMixin } from '@spuxx/js-utils';
 import { ComponentProps } from 'solid-js';
 import { ModalComponent, ModalOptions } from './modal.types';
 import { render } from 'solid-js/web';
+import { ConfirmModal } from '@spuxx/solid';
 
 /**
- * The `ModalDialog` service provides global access to modal dialogs.
+ * The `Modal` service provides global access to modal dialogs.
  * @example
  * ```tsx
  * // Provide ModalPortal somewhere in your application
- * import { ModalDialog, ModalPortal, ConfirmModal } from '@spuxx/solid';
+ * import { Modal, ModalPortal, ConfirmModal } from '@spuxx/solid';
  * <MoalPortal />
  *
  * // Show a modal dialog
- * ModalDialog.show(ConfirmModal, { title: 'Hello World!' });
+ * Modal.show(ConfirmModal, { title: 'Hello World!' });
  * ```
  */
-export class ModalDialog extends ServiceMixin<ModalDialog>() {
+export class Modal extends ServiceMixin<Modal>() {
   protected portal: Node | undefined;
   protected dispose = () => {};
 

packages/solid/src/modal/modal-portal.component.tsx

@@ -1,5 +1,5 @@
 import { Component, createEffect } from 'solid-js';
-import { ModalDialog } from './modal-dialog.service';
+import { Modal } from './modal-dialog.service';
 
 /**
  * Place this component anywhere in your application to make it the portal node for modals.
@@ -15,7 +15,7 @@ export const ModalPortal: Component = () => {
 
   createEffect(() => {
     if (portal) {
-      ModalDialog.setPortal(portal);
+      Modal.setPortal(portal);
     }
   });
 

packages/solid/src/modal/template/modal.component.tsx packages/solid/src/modal/template/modal-template.component.tsx

@@ -1,5 +1,5 @@
 import { Component, ParentProps } from 'solid-js';
-import { ModalDialog } from '../modal-dialog.service';
+import { Modal } from '../modal-dialog.service';
 import { ModalOptions } from '../modal.types';
 import { Content, Overlay, Portal, Root } from '@corvu/dialog';
 
@@ -10,7 +10,7 @@ interface Props extends ModalOptions, ParentProps {}
  * @param options {@link ModalOptions}
  * @example
  * ```tsx
- * import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from '@spuxx/solid';
+ * import { ModalTemplate, ModalHeader, ModalBody, ModalFooter, Button } from '@spuxx/solid';
  * export const MyModal = (options) => {
  *   return (
  *     <Modal {...options}>
@@ -24,11 +24,11 @@ interface Props extends ModalOptions, ParentProps {}
  * }
  * ```
  */
-export const Modal: Component<Props> = (options) => {
+export const ModalTemplate: Component<Props> = (options) => {
   const { size = 'auto', preventClose = false, onClose } = options;
 
   const handleContentPresentChange = (value: boolean) => {
-    if (!value) ModalDialog.close();
+    if (!value) Modal.close();
     if (typeof onClose === 'function') onClose();
   };
 
@@ -42,7 +42,7 @@ export const Modal: Component<Props> = (options) => {
       closeOnOutsidePointer={!preventClose}
       onContentPresentChange={handleContentPresentChange}
     >
-      <Portal mount={ModalDialog.portal} forceMount={true}>
+      <Portal mount={Modal.portal} forceMount={true}>
         <Overlay class="spx-modal-overlay" />
         <Content class="spx-modal" data-size={size}>
           {options.children}