@rettangoli/ui 0.1.4 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "A UI component library for building web interfaces.",
   "main": "dist/rettangoli-esm.min.js",
   "type": "module",
@@ -23,10 +23,10 @@
   },
   "license": "MIT",
   "scripts": {
-    "build:dev": "rtgl fe build && bun run esbuild-dev.js",
+    "build:dev": "rtgl fe build -d && bun run esbuild-dev.js",
     "build": "rtgl fe build && bun run esbuild.js",
-    "vt:generate": "rtgl fe build && bun run esbuild-dev.js && rtgl vt generate --skip-screenshots",
-    "vt:report": "bun run build:dev && rtgl vt generate && rtgl vt report",
+    "vt:generate": "rtgl fe build -d && bun run esbuild-dev.js && rtgl vt generate --skip-screenshots",
+    "vt:report": "bun run build:dev && rtgl vt generate --screenshot-wait-time 500 && rtgl vt report",
     "vt:accept": "rtgl vt accept",
     "serve": "bunx serve .rettangoli/vt/_site"
   },

package/src/components/dropdownMenu/dropdownMenu.handlers.js

@@ -5,10 +5,10 @@ export const handleClosePopover = (deps, payload) => {
 }
 
 export const handleClickMenuItem = (deps, payload) => {
-  const { dispatchEvent } = deps;
+  const { dispatchEvent, props } = deps;
   const event = payload._event;
   const index = parseInt(event.currentTarget.id.replace('option-', ''));
-  const item = deps.props.items[index];
+  const item = props.items[index];
 
   dispatchEvent(new CustomEvent('click-item', {
     detail: {

package/src/components/dropdownMenu/dropdownMenu.view.yaml

@@ -44,13 +44,13 @@ refs:
 
 template:
   - rtgl-popover#popover ?open=${open} x=${x} y=${y} placement=${placement}:
-    - rtgl-view wh=300 g=xs slot=content bgc=background br=md:
-      - $for item, i in items:
-        - $if item.type == 'label':
-            - rtgl-view w=f ph=lg pv=md:
-              - rtgl-text s=sm c=mu-fg: ${item.label}
-          $elif item.type == 'item':
-            - rtgl-view#option-${i} w=f h-bgc=ac ph=lg pv=md cur=p br=md bgc=mu:
-              - rtgl-text: ${item.label}
-          $elif item.type == 'separator':
-            - rtgl-view w=f h=1 ph=lg mv=md bgc=bo:
+      - rtgl-view wh=300 sv g=xs slot=content bgc=background br=md:
+          - $for item, i in items:
+              - $if item.type == 'label':
+                  - rtgl-view w=f ph=lg pv=md:
+                      - rtgl-text s=sm c=mu-fg: ${item.label}
+                $elif item.type == 'item':
+                  - rtgl-view#option-${i} w=f h-bgc=ac ph=lg pv=md cur=p br=md bgc=mu:
+                      - rtgl-text: ${item.label}
+                $elif item.type == 'separator':
+                  - rtgl-view w=f h=1 ph=lg mv=md bgc=bo:

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

@@ -21,12 +21,48 @@ export const handleCancel = (deps, payload) => {
   globalUI.emit('event', false);
 };
 
+export const handleDropdownClose = (deps, payload) => {
+  const { store, render, globalUI } = deps;
+
+  // Always process close events - the framework will handle if it's already closed
+  store.closeDialog();
+  render();
+  globalUI.emit('event', null);
+};
+
+export const handleDropdownItemClick = (deps, payload) => {
+  const { store, render, globalUI } = deps;
+  const event = payload._event;
+  const { index, item } = event.detail;
+
+  // Always process click events - the framework will handle if it's already closed
+  store.closeDialog();
+  render();
+  globalUI.emit('event', { index, item });
+};
+
+/**
+ * Shows an alert dialog with the specified options.
+ * Closes any existing dialog or dropdown before showing the alert.
+ *
+ * @param {Object} deps - Dependencies object
+ * @param {Object} deps.store - The globalUI store instance
+ * @param {Function} deps.render - Function to trigger re-rendering
+ * @param {Object} payload - Alert configuration options
+ * @param {string} payload.message - The alert message (required)
+ * @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}
+ */
 export const showAlert = (deps, payload) => {
   const { store, render } = deps;
   const options = payload;
 
+  // Close any existing dialog/dropdown menu first
   if (store.selectIsOpen()) {
-    throw new Error("A dialog is already open");
+    store.closeDialog();
+    render();
   }
 
   store.setAlertConfig(options);
@@ -37,8 +73,10 @@ export const showConfirm = async (deps, payload) => {
   const { store, render, globalUI } = deps;
   const options = payload;
 
+  // Close any existing dialog/dropdown menu first
   if (store.selectIsOpen()) {
-    throw new Error("A dialog is already open");
+    store.closeDialog();
+    render();
   }
 
   store.setConfirmConfig(options);
@@ -50,4 +88,42 @@ export const showConfirm = async (deps, payload) => {
       resolve(result)
     });
   });
+};
+
+/**
+ * Shows a dropdown menu at the specified position with the given items.
+ * Closes any existing dialog or dropdown menu before showing the dropdown menu.
+ *
+ * @param {Object} deps - Dependencies object
+ * @param {Object} deps.store - The globalUI store instance
+ * @param {Function} deps.render - Function to trigger re-rendering
+ * @param {Object} deps.globalUI - The globalUI event emitter
+ * @param {Object} payload - Dropdown menu configuration options
+ * @param {Array<Object>} payload.items - Array of dropdown menu items (required)
+ * @param {number} payload.x - X coordinate position (required)
+ * @param {number} payload.y - Y coordinate position (required)
+ * @param {string} [payload.placement] - Dropdown menu placement (default: "bottom-start")
+ * @returns {Promise<Object|null>} Promise that resolves with clicked item info or null if closed without selection
+ * @returns {Object} [result.index] - Index of the clicked item
+ * @returns {Object} [result.item] - The clicked item object
+ */
+export const showDropdownMenu = async (deps, payload) => {
+  const { store, render, globalUI } = deps;
+  const options = payload;
+
+  // Close any existing dialog/dropdown menu first
+  if (store.selectIsOpen()) {
+    store.closeDialog();
+    render();
+  }
+
+  store.setDropdownConfig(options);
+  render();
+
+  return new Promise((resolve) => {
+    globalUI.once('event', (result) => {
+      // result contains info of clicked item or null if closed without selection
+      resolve(result)
+    });
+  });
 };

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

@@ -1,5 +1,6 @@
 export const createInitialState = () => Object.freeze({
   isOpen: false,
+  uiType: "dialog", // "dialog" | "dropdown"
   config: {
     status: undefined, // undefined | info | warning | error
     title: "",
@@ -8,13 +9,19 @@ export const createInitialState = () => Object.freeze({
     cancelText: "Cancel",
     mode: "alert", // alert | confirm
   },
+  dropdownConfig: {
+    items: [],
+    x: 0,
+    y: 0,
+    placement: "bottom-start",
+  },
 });
 
 export const setAlertConfig = (state, options) => {
   if (!options.message) {
     throw new Error("message is required for showAlert");
   }
-  
+
   state.config = {
     status: options.status || undefined,
     title: options.title || "",
@@ -23,6 +30,7 @@ export const setAlertConfig = (state, options) => {
     cancelText: "",
     mode: "alert",
   };
+  state.uiType = "dialog";
   state.isOpen = true;
 };
 
@@ -30,7 +38,7 @@ export const setConfirmConfig = (state, options) => {
   if (!options.message) {
     throw new Error("message is required for showConfirm");
   }
-  
+
   state.config = {
     status: options.status || undefined,
     title: options.title || "",
@@ -39,19 +47,47 @@ export const setConfirmConfig = (state, options) => {
     cancelText: options.cancelText || "Cancel",
     mode: "confirm",
   };
+  state.uiType = "dialog";
+  state.isOpen = true;
+};
+
+export const setDropdownConfig = (state, options) => {
+  if (!options.items || !Array.isArray(options.items)) {
+    throw new Error("items array is required for showDropdown");
+  }
+
+  state.dropdownConfig = {
+    items: options.items,
+    x: options.x || 0,
+    y: options.y || 0,
+    placement: options.placement || "bottom-start",
+  };
+  state.uiType = "dropdown";
   state.isOpen = true;
 };
 
 export const closeDialog = (state) => {
   state.isOpen = false;
+  state.uiType = "dialog"; // Reset to default type
 };
 
 export const selectConfig = ({ state }) => state.config;
+export const selectDropdownConfig = ({ state }) => state.dropdownConfig;
+export const selectUiType = ({ state }) => state.uiType;
 export const selectIsOpen = ({ state }) => state.isOpen;
 
 export const selectViewData = ({ state }) => {
   return {
     isOpen: state.isOpen,
+    uiType: state.uiType,
     config: state.config,
+    dropdownConfig: {
+      items: state.dropdownConfig?.items || [],
+      x: state.dropdownConfig?.x || 0,
+      y: state.dropdownConfig?.y || 0,
+      placement: state.dropdownConfig?.placement || 'bottom-start',
+    },
+    isDialogOpen: state.isOpen && state.uiType === 'dialog',
+    isDropdownOpen: state.isOpen && state.uiType === 'dropdown',
   };
 };

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

@@ -5,6 +5,8 @@ viewDataSchema:
   properties:
     isOpen:
       type: boolean
+    uiType:
+      type: string
     config:
       type: object
       properties:
@@ -20,6 +22,17 @@ viewDataSchema:
           type: string
         mode:
           type: string
+    dropdownConfig:
+      type: object
+      properties:
+        items:
+          type: array
+        x:
+          type: number
+        y:
+          type: number
+        placement:
+          type: string
 
 refs:
   dialog:
@@ -34,17 +47,24 @@ refs:
     eventListeners:
       click:
         handler: handleCancel
+  dropdown-menu:
+    eventListeners:
+      close:
+        handler: handleDropdownClose
+      click-item:
+        handler: handleDropdownItemClick
 
 template:
-  - rtgl-dialog#dialog ?open=${isOpen} s=sm:
+  - 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:
-            - rtgl-view h=24 av=c:
-              - rtgl-text fw=600: ${config.title}
-            - rtgl-text: ${config.message}
-        - rtgl-view d=h g=md mt=lg w=f ah=e:
-          - $if config.mode == 'confirm':
-            - rtgl-button#cancel-button v=se: ${config.cancelText}
-          - rtgl-button#confirm-button v=pr: ${config.confirmText}
+          - rtgl-view d=h g=md:
+              - rtgl-view d=h ah=c av=c g=md:
+              - rtgl-view g=md:
+                  - rtgl-view h=24 av=c:
+                      - rtgl-text fw=600: ${config.title}
+                  - rtgl-text: ${config.message}
+          - rtgl-view d=h g=md mt=lg w=f ah=e:
+              - $if config.mode == 'confirm':
+                  - rtgl-button#cancel-button v=se: ${config.cancelText}
+              - rtgl-button#confirm-button v=pr: ${config.confirmText}
+  - rtgl-dropdown-menu#dropdown-menu ?open=${isDropdownOpen} x=${dropdownConfig.x} y=${dropdownConfig.y} placement=${dropdownConfig.placement} .items=dropdownConfig.items key=dropdown-${isDropdownOpen}:

package/src/deps/createGlobalUI.js

@@ -1,7 +1,27 @@
+/**
+ * Creates a GlobalUI manager instance for controlling global UI components.
+ * Provides methods for showing alerts, confirm dialogs, and dropdown menus.
+ *
+ * @param {HTMLElement} globalUIElement - The globalUI component element
+ * @returns {Object} GlobalUI manager instance
+ * @returns {Function} returns.once - Register a one-time event listener
+ * @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.showDropdownMenu - Show a dropdown menu
+ */
 const createGlobalUI = (globalUIElement) => {
   let listeners = {};
 
   return {
+    /**
+     * Registers a one-time event listener for the specified event.
+     * The listener will be automatically removed after the first event.
+     *
+     * @param {string} event - The event name to listen for
+     * @param {Function} callback - The callback function to execute
+     * @returns {void}
+     */
     once: (event, callback) => {
       if (!listeners[event]) {
         listeners[event] = [];
@@ -12,6 +32,14 @@ const createGlobalUI = (globalUIElement) => {
       }
       listeners[event].push(onceCallback);
     },
+
+    /**
+     * Emits an event to all registered listeners for the specified event type.
+     *
+     * @param {string} event - The event name to emit
+     * @param {...any} args - Arguments to pass to the event listeners
+     * @returns {void}
+     */
     emit: (event, ...args) => {
       if (listeners[event]) {
         listeners[event].forEach(callback => {
@@ -19,6 +47,19 @@ const createGlobalUI = (globalUIElement) => {
         });
       }
     },
+
+    /**
+     * Shows an alert dialog with the specified options.
+     * The alert displays a message with a single OK button.
+     *
+     * @param {Object} options - Alert configuration options
+     * @param {string} options.message - The alert message (required)
+     * @param {string} [options.title] - Optional alert title
+     * @param {('info'|'warning'|'error')} [options.status] - Optional status type
+     * @param {string} [options.confirmText] - Text for the confirm button (default: "OK")
+     * @returns {Promise<void>} Promise that resolves when the alert is closed
+     * @throws {Error} If globalUIElement is not initialized
+     */
     showAlert: async (options) => {
       if(!globalUIElement)
       {
@@ -26,12 +67,48 @@ const createGlobalUI = (globalUIElement) => {
       }
       globalUIElement.transformedHandlers.showAlert(options);
     },
+
+    /**
+     * Shows a confirmation dialog with the specified options.
+     * The dialog displays a message with confirm and cancel buttons.
+     *
+     * @param {Object} options - Confirmation dialog configuration options
+     * @param {string} options.message - The confirmation message (required)
+     * @param {string} [options.title] - Optional dialog title
+     * @param {('info'|'warning'|'error')} [options.status] - Optional status type
+     * @param {string} [options.confirmText] - Text for the confirm button (default: "Yes")
+     * @param {string} [options.cancelText] - Text for the cancel button (default: "Cancel")
+     * @returns {Promise<boolean>} Promise that resolves to true if confirmed, false if cancelled
+     * @throws {Error} If globalUIElement is not initialized
+     */
     showConfirm: 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.showConfirm(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.
+     *
+     * @param {Object} options - Dropdown menu configuration options
+     * @param {Array<Object>} options.items - Array of dropdown menu items (required)
+     * @param {number} options.x - X coordinate position (required)
+     * @param {number} options.y - Y coordinate position (required)
+     * @param {string} [options.placement] - Dropdown menu placement (default: "bottom-start")
+     * @returns {Promise<Object|null>} Promise that resolves with clicked item info or null if closed without selection
+     * @returns {Object} [result.index] - Index of the clicked item
+     * @returns {Object} [result.item] - The clicked item object
+     * @throws {Error} If globalUIElement is not initialized
+     */
+    showDropdownMenu: 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.showDropdownMenu(options);
     }
   };
 }