@rettangoli/ui 0.1.3 → 0.1.5

package/src/components/sidebar/sidebar.handlers.js

@@ -1,5 +1,6 @@
-export const handleHeaderClick = (deps, event) => {
+export const handleHeaderClick = (deps, payload) => {
   const { store, dispatchEvent } = deps;
+  const event = payload._event;
 
   let path;
 
@@ -22,8 +23,9 @@ export const handleHeaderClick = (deps, event) => {
   }));
 }
 
-export const handleItemClick = (deps, event) => {
+export const handleItemClick = (deps, payload) => {
   const { store, dispatchEvent } = deps;
+  const event = payload._event;
   const id = event.currentTarget.id.replace('item-', '');
   const item = store.selectItem(id);
   dispatchEvent(new CustomEvent('itemClick', {

package/src/components/sliderInput/sliderInput.handlers.js

@@ -3,10 +3,10 @@ export const handleBeforeMount = (deps) => {
   store.setValue(attrs.defaultValue || 0);
 }
 
-export const handleOnUpdate = (changes, deps) => {
-  const { oldAttrs, newAttrs } = changes;
+export const handleOnUpdate = (deps, payload) => {
+  const { oldAttrs, newAttrs } = payload;
   const { store, render, attrs } = deps;
-  
+
   // Reset when key changes
   if (oldAttrs?.key !== newAttrs?.key && newAttrs?.key) {
     const defaultValue = newAttrs?.defaultValue || attrs?.defaultValue || 0;
@@ -20,8 +20,9 @@ export const handleOnUpdate = (changes, deps) => {
   }
 }
 
-export const handleValueChange = (deps, event) => {
+export const handleValueChange = (deps, payload) => {
   const { store, render, dispatchEvent } = deps;
+  const event = payload._event;
   const newValue = Number(event.detail.value);
 
   store.setValue(newValue);

package/src/components/table/table.handlers.js

@@ -2,8 +2,9 @@ export const handleBeforeMount = (deps) => {
   // No special initialization needed for basic table
 };
 
-export const handleRowClick = (deps, event) => {
+export const handleRowClick = (deps, payload) => {
   const { dispatchEvent, props } = deps;
+  const event = payload._event;
   const rowIndex = parseInt(event.currentTarget.id.replace("row-", ""));
   const rowData = props.data?.rows?.[rowIndex];
 
@@ -19,8 +20,9 @@ export const handleRowClick = (deps, event) => {
   }
 };
 
-export const handleHeaderClick = (deps, event) => {
+export const handleHeaderClick = (deps, payload) => {
   const { store, render, dispatchEvent } = deps;
+  const event = payload._event;
   const columnKey = event.currentTarget.id.replace("header-", "");
   const currentSort = store.selectSortInfo();
 

package/src/components/tabs/tabs.handlers.js

@@ -1,5 +1,6 @@
-export const handleClickItem = (deps, event) => {
+export const handleClickItem = (deps, payload) => {
   const { dispatchEvent } = deps;
+  const event = payload._event;
   const id = event.currentTarget.dataset.id;
 
   dispatchEvent(new CustomEvent('item-click', {

package/src/components/waveform/waveform.handlers.js

@@ -11,7 +11,7 @@ export const handleAfterMount = async (deps) => {
   }
 };
 
-export const handleOnUpdate = async (changes, deps) => {
+export const handleOnUpdate = async (deps, payload) => {
   const { store, render, getRefIds, props } = deps;
   const { waveformData } = props;
 

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);
     }
   };
 }