@rettangoli/ui 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A UI component library for building web interfaces.",
   "main": "dist/rettangoli-esm.min.js",
   "type": "module",

package/src/components/globalUi/globalUi.handlers.js

@@ -1,33 +1,85 @@
-export const handleDialogClose = (deps, payload) => {
-  const { store, render } = deps;
+const getDismissResult = (store) => {
+  const uiType = store.selectUiType();
 
-  store.closeAll();
-  render();
+  if (uiType === "dropdown" || uiType === "formDialog") {
+    return null;
+  }
+
+  const config = store.selectConfig();
+  if (config.mode === "confirm") {
+    return false;
+  }
+
+  return null;
 };
 
-export const handleConfirm = (deps, payload) => {
-  const { store, render, globalUI } = deps;
+const closeCurrentUi = ({ store, render, globalUI, emitResult = false, result }) => {
+  if (!store.selectIsOpen()) {
+    return;
+  }
 
+  const resolvedResult = result !== undefined ? result : getDismissResult(store);
   store.closeAll();
   render();
-  globalUI.emit('event', true);
+
+  if (emitResult) {
+    globalUI.emit("event", resolvedResult);
+  }
 };
 
-export const handleCancel = (deps, payload) => {
+const closeExistingUiBeforeShow = ({ store, render, globalUI }) => {
+  if (store.selectIsOpen()) {
+    closeCurrentUi({ store, render, globalUI, emitResult: true });
+  }
+};
+
+const scheduleFormDialogMount = (deps, expectedKey) => {
+  setTimeout(() => {
+    const { store, refs } = deps;
+
+    if (!store.selectIsOpen() || store.selectUiType() !== "formDialog") {
+      return;
+    }
+
+    const formDialogConfig = store.selectFormDialogConfig?.();
+    if (!formDialogConfig || formDialogConfig.key !== expectedKey) {
+      return;
+    }
+
+    if (typeof formDialogConfig.mount !== "function") {
+      return;
+    }
+
+    const formEl = refs.formDialog;
+    if (!formEl) {
+      return;
+    }
+
+    formDialogConfig.mount(formEl);
+  }, 0);
+};
+
+export const handleDialogClose = (deps) => {
   const { store, render, globalUI } = deps;
+  closeCurrentUi({ store, render, globalUI, emitResult: true });
+};
 
-  store.closeAll();
-  render();
-  globalUI.emit('event', false);
+export const handleConfirm = (deps) => {
+  const { store, render, globalUI } = deps;
+  const config = store.selectConfig();
+  const result = config.mode === "confirm" ? true : null;
+
+  closeCurrentUi({ store, render, globalUI, emitResult: true, result });
 };
 
-export const handleDropdownClose = (deps, payload) => {
+export const handleCancel = (deps) => {
   const { store, render, globalUI } = deps;
+  closeCurrentUi({ store, render, globalUI, emitResult: true, result: false });
+};
 
-  // Always process close events - the framework will handle if it's already closed
-  store.closeAll();
-  render();
-  globalUI.emit('event', null);
+export const handleDropdownClose = (deps) => {
+  const { store, render, globalUI } = deps;
+  closeCurrentUi({ store, render, globalUI, emitResult: true, result: null });
 };
 
 export const handleDropdownItemClick = (deps, payload) => {
@@ -35,10 +87,13 @@ export const handleDropdownItemClick = (deps, payload) => {
   const event = payload._event;
   const { index, item } = event.detail;
 
-  // Always process click events - the framework will handle if it's already closed
-  store.closeAll();
-  render();
-  globalUI.emit('event', { index, item });
+  closeCurrentUi({
+    store,
+    render,
+    globalUI,
+    emitResult: true,
+    result: { index, item },
+  });
 };
 
 /**
@@ -53,31 +108,29 @@ export const handleDropdownItemClick = (deps, payload) => {
  * @param {string} [payload.title] - Optional alert title
  * @param {('info'|'warning'|'error')} [payload.status] - Optional status type
  * @param {string} [payload.confirmText] - Text for the confirm button (default: "OK")
- * @returns {void}
+ * @returns {Promise<void>}
  */
 export const handleShowAlert = (deps, payload) => {
-  const { store, render } = deps;
+  const { store, render, globalUI } = deps;
   const options = payload;
 
-  // Close any existing dialog/dropdown menu first
-  if (store.selectIsOpen()) {
-    store.closeAll();
-    render();
-  }
+  closeExistingUiBeforeShow({ store, render, globalUI });
 
   store.setAlertConfig(options);
   render();
+
+  return new Promise((resolve) => {
+    globalUI.once("event", () => {
+      resolve();
+    });
+  });
 };
 
 export const handleShowConfirm = async (deps, payload) => {
   const { store, render, globalUI } = deps;
   const options = payload;
 
-  // Close any existing dialog/dropdown menu first
-  if (store.selectIsOpen()) {
-    store.closeAll();
-    render();
-  }
+  closeExistingUiBeforeShow({ store, render, globalUI });
 
   store.setConfirmConfig(options);
   render();
@@ -111,11 +164,7 @@ export const handleShowDropdownMenu = async (deps, payload) => {
   const { store, render, globalUI } = deps;
   const options = payload;
 
-  // Close any existing dialog/dropdown menu first
-  if (store.selectIsOpen()) {
-    store.closeAll();
-    render();
-  }
+  closeExistingUiBeforeShow({ store, render, globalUI });
 
   store.setDropdownConfig(options);
   render();
@@ -128,6 +177,55 @@ export const handleShowDropdownMenu = async (deps, payload) => {
   });
 };
 
+export const handleShowFormDialog = async (deps, payload) => {
+  const { store, render, globalUI } = deps;
+  const options = payload;
+
+  closeExistingUiBeforeShow({ store, render, globalUI });
+
+  store.setFormDialogConfig(options);
+  render();
+
+  const expectedKey = store.selectFormDialogConfig?.().key;
+  scheduleFormDialogMount(deps, expectedKey);
+
+  return new Promise((resolve) => {
+    globalUI.once("event", (result) => {
+      resolve(result);
+    });
+  });
+};
+
+export const handleFormAction = (deps, payload) => {
+  const { store, render, globalUI } = deps;
+  const detail = payload._event?.detail || {};
+
+  if (detail.valid === false) {
+    return;
+  }
+
+  closeCurrentUi({
+    store,
+    render,
+    globalUI,
+    emitResult: true,
+    result: detail,
+  });
+};
+
+export const handleFormFieldEvent = (deps, payload) => {
+  const { store, refs } = deps;
+  const detail = payload._event?.detail || {};
+  const formDialogConfig = store.selectFormDialogConfig?.();
+
+  if (typeof formDialogConfig?.onFieldEvent === "function") {
+    formDialogConfig.onFieldEvent({
+      detail,
+      formEl: refs.formDialog || null,
+    });
+  }
+};
+
 /**
  * Triggers a global event to close all UI components.
  * This function will:
@@ -141,11 +239,6 @@ export const handleShowDropdownMenu = async (deps, payload) => {
  * @returns {void}
  */
 export const handleCloseAll = (deps) => {
-  const { store, render } = deps;
-
-  // Close global UI dialogs/dropdowns
-  if (store.selectIsOpen()) {
-    store.closeAll();
-    render();
-  }
+  const { store, render, globalUI } = deps;
+  closeCurrentUi({ store, render, globalUI, emitResult: true });
 };

package/src/components/globalUi/globalUi.store.js

@@ -1,6 +1,19 @@
+const VALID_DIALOG_SIZES = new Set(["sm", "md", "lg", "f"]);
+
+const normalizeObject = (value) => {
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    return {};
+  }
+  return value;
+};
+
+const normalizeDialogSize = (value, fallback = "md") => {
+  return VALID_DIALOG_SIZES.has(value) ? value : fallback;
+};
+
 export const createInitialState = () => Object.freeze({
   isOpen: false,
-  uiType: "dialog", // "dialog" | "dropdown"
+  uiType: "dialog", // "dialog" | "dropdown" | "formDialog"
   config: {
     status: undefined, // undefined | info | warning | error
     title: "",
@@ -15,6 +28,16 @@ export const createInitialState = () => Object.freeze({
     y: 0,
     place: "bs",
   },
+  formDialogConfig: {
+    form: null,
+    defaultValues: {},
+    context: {},
+    disabled: false,
+    size: "md",
+    key: 0,
+    onFieldEvent: null,
+    mount: null,
+  },
 });
 
 export const setAlertConfig = ({ state }, options = {}) => {
@@ -66,6 +89,27 @@ export const setDropdownConfig = ({ state }, options = {}) => {
   state.isOpen = true;
 };
 
+export const setFormDialogConfig = ({ state }, options = {}) => {
+  if (!options.form || typeof options.form !== "object" || Array.isArray(options.form)) {
+    throw new Error("form object is required for showFormDialog");
+  }
+
+  const prevKey = state.formDialogConfig?.key || 0;
+
+  state.formDialogConfig = {
+    form: options.form,
+    defaultValues: normalizeObject(options.defaultValues),
+    context: normalizeObject(options.context),
+    disabled: !!options.disabled,
+    size: normalizeDialogSize(options.size, "md"),
+    key: prevKey + 1,
+    onFieldEvent: typeof options.onFieldEvent === "function" ? options.onFieldEvent : null,
+    mount: typeof options.mount === "function" ? options.mount : null,
+  };
+  state.uiType = "formDialog";
+  state.isOpen = true;
+};
+
 export const closeAll = ({ state }) => {
   state.isOpen = false;
   state.uiType = "dialog"; // Reset to default type
@@ -73,10 +117,14 @@ export const closeAll = ({ state }) => {
 
 export const selectConfig = ({ state }) => state.config;
 export const selectDropdownConfig = ({ state }) => state.dropdownConfig;
+export const selectFormDialogConfig = ({ state }) => state.formDialogConfig;
 export const selectUiType = ({ state }) => state.uiType;
 export const selectIsOpen = ({ state }) => state.isOpen;
 
 export const selectViewData = ({ state }) => {
+  const isDialogOpen = state.isOpen && state.uiType === "dialog";
+  const isFormDialogOpen = state.isOpen && state.uiType === "formDialog";
+
   return {
     isOpen: state.isOpen,
     uiType: state.uiType,
@@ -87,7 +135,20 @@ export const selectViewData = ({ state }) => {
       y: state.dropdownConfig?.y || 0,
       place: state.dropdownConfig?.place || 'bs',
     },
-    isDialogOpen: state.isOpen && state.uiType === 'dialog',
+    formDialogConfig: {
+      form: state.formDialogConfig?.form || { fields: [], actions: { buttons: [] } },
+      defaultValues: state.formDialogConfig?.defaultValues || {},
+      context: state.formDialogConfig?.context || {},
+      disabled: !!state.formDialogConfig?.disabled,
+      size: normalizeDialogSize(state.formDialogConfig?.size, "md"),
+      key: state.formDialogConfig?.key || 0,
+    },
+    isDialogOpen,
+    isFormDialogOpen,
+    isDialogContainerOpen: isDialogOpen || isFormDialogOpen,
     isDropdownOpen: state.isOpen && state.uiType === 'dropdown',
+    dialogSize: isFormDialogOpen
+      ? normalizeDialogSize(state.formDialogConfig?.size, "md")
+      : "sm",
   };
 };

package/src/components/globalUi/globalUi.view.yaml

@@ -11,6 +11,12 @@ refs:
     eventListeners:
       click:
         handler: handleCancel
+  formDialog:
+    eventListeners:
+      form-action:
+        handler: handleFormAction
+      form-field-event:
+        handler: handleFormFieldEvent
   dropdownMenu:
     eventListeners:
       close:
@@ -18,16 +24,19 @@ refs:
       item-click:
         handler: handleDropdownItemClick
 template:
-  - rtgl-dialog#dialog ?open=${isDialogOpen} s=sm:
-      - rtgl-view slot=content g=lg p=lg:
-          - rtgl-view d=h g=md:
-              - rtgl-view d=h ah=c av=c g=md:
-                  - rtgl-view g=md: null
-                  - rtgl-view h=24 av=c:
-                      - rtgl-text s=lg: ${config.title}
-                  - rtgl-text: ${config.message}
-          - rtgl-view d=h g=md mt=lg w=f ah=e:
-              - $if config.mode == 'confirm':
-                  - rtgl-button#cancelButton v=se: ${config.cancelText}
-              - rtgl-button#confirmButton v=pr: ${config.confirmText}
+  - rtgl-dialog#dialog ?open=${isDialogContainerOpen} s=${dialogSize}:
+      - $if isFormDialogOpen:
+          - rtgl-form#formDialog slot=content :form=formDialogConfig.form :defaultValues=formDialogConfig.defaultValues :context=formDialogConfig.context ?disabled=${formDialogConfig.disabled} key=form-dialog-${formDialogConfig.key}: null
+      - $if !isFormDialogOpen:
+          - rtgl-view slot=content g=lg p=lg:
+              - rtgl-view d=h g=md:
+                  - rtgl-view d=h ah=c av=c g=md:
+                      - rtgl-view g=md: null
+                      - rtgl-view h=24 av=c:
+                          - rtgl-text s=lg: ${config.title}
+                      - rtgl-text: ${config.message}
+              - rtgl-view d=h g=md mt=lg w=f ah=e:
+                  - $if config.mode == 'confirm':
+                      - rtgl-button#cancelButton v=se: ${config.cancelText}
+                  - rtgl-button#confirmButton v=pr: ${config.confirmText}
   - rtgl-dropdown-menu#dropdownMenu ?open=${isDropdownOpen} x=${dropdownConfig.x} y=${dropdownConfig.y} place=${dropdownConfig.place} :items=dropdownConfig.items key=dropdown-${isDropdownOpen}: null

package/src/deps/createGlobalUI.js

@@ -1,6 +1,7 @@
 /**
  * Creates a GlobalUI manager instance for controlling global UI components.
- * Provides methods for showing alerts, confirm dialogs, dropdown menus, and closing all UI components.
+ * Provides methods for showing alerts, confirm dialogs, form dialogs,
+ * dropdown menus, and closing all UI components.
  *
  * @param {HTMLElement} globalUIElement - The globalUI component element
  * @returns {Object} GlobalUI manager instance
@@ -8,6 +9,7 @@
  * @returns {Function} returns.emit - Emit an event to registered listeners
  * @returns {Function} returns.showAlert - Show an alert dialog
  * @returns {Function} returns.showConfirm - Show a confirmation dialog
+ * @returns {Function} returns.showFormDialog - Show a form dialog
  * @returns {Function} returns.showDropdownMenu - Show a dropdown menu
  * @returns {Function} returns.closeAll - General-purpose function to close all currently open UI components
  */
@@ -66,7 +68,7 @@ const createGlobalUI = (globalUIElement) => {
       {
         throw new Error("globalUIElement is not set. Make sure to initialize the global UI component and pass it to createGlobalUIManager.");
       }
-      globalUIElement.transformedHandlers.handleShowAlert(options);
+      return globalUIElement.transformedHandlers.handleShowAlert(options);
     },
 
     /**
@@ -90,6 +92,28 @@ const createGlobalUI = (globalUIElement) => {
       return globalUIElement.transformedHandlers.handleShowConfirm(options);
     },
 
+    /**
+     * Shows a dialog containing an embedded rtgl-form.
+     *
+     * @param {Object} options - Form dialog configuration options
+     * @param {Object} options.form - rtgl-form schema (required)
+     * @param {Object} [options.defaultValues] - Initial form values
+     * @param {Object} [options.context] - Context used by rtgl-form conditional rendering
+     * @param {boolean} [options.disabled] - Whether the form should be disabled
+     * @param {('sm'|'md'|'lg'|'f')} [options.size] - Dialog size token (default: "md")
+     * @param {Function} [options.onFieldEvent] - Called with `{ detail, formEl }` for form field events
+     * @param {Function} [options.mount] - Called once after the form mounts, useful for slot content
+     * @returns {Promise<Object|null>} Resolves with form-action detail or null on dismiss
+     * @throws {Error} If globalUIElement is not initialized
+     */
+    showFormDialog: async (options) => {
+      if(!globalUIElement)
+      {
+        throw new Error("globalUIElement is not set. Make sure to initialize the global UI component and pass it to createGlobalUIManager.");
+      }
+      return globalUIElement.transformedHandlers.handleShowFormDialog(options);
+    },
+
     /**
      * Shows a dropdown menu at the specified position with the given items.
      * The dropdown can contain various item types including labels, items, and separators.