@rettangoli/ui 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "0.1.3",
+  "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/breadcrumb/breadcrumb.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', {
     detail: {

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

@@ -1,13 +1,14 @@
 
-export const handleClosePopover = (deps, event) => {
+export const handleClosePopover = (deps, payload) => {
   const { dispatchEvent } = deps;
   dispatchEvent(new CustomEvent('close'));
 }
 
-export const handleClickMenuItem = (deps, event) => {
-  const { dispatchEvent } = deps;
+export const handleClickMenuItem = (deps, payload) => {
+  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/form/form.handlers.js

@@ -3,8 +3,8 @@ export const handleBeforeMount = (deps) => {
   store.setFormValues(props.defaultValues);
 };
 
-export const handleOnUpdate = (changes, deps) => {
-  const { oldAttrs, newAttrs } = changes;
+export const handleOnUpdate = (deps, payload) => {
+  const { oldAttrs, newAttrs } = payload;
   const { store, props, render } = deps;
 
   if (oldAttrs?.key === newAttrs?.key) {
@@ -27,8 +27,9 @@ const dispatchFormChange = (name, fieldValue, formValues, dispatchEvent) => {
   );
 };
 
-export const handleActionClick = (deps, event) => {
+export const handleActionClick = (deps, payload) => {
   const { store, dispatchEvent } = deps;
+  const event = payload._event;
   const id = event.currentTarget.id.replace("action-", "");
   dispatchEvent(
     new CustomEvent("action-click", {
@@ -40,8 +41,9 @@ export const handleActionClick = (deps, event) => {
   );
 };
 
-export const handleInputChange = (deps, event) => {
+export const handleInputChange = (deps, payload) => {
   const { store, dispatchEvent, props } = deps;
+  const event = payload._event;
   const name = event.currentTarget.id.replace("input-", "");
   // TODO fix double event
   if (name && event.detail.value !== undefined) {
@@ -59,8 +61,9 @@ export const handleInputChange = (deps, event) => {
   }
 };
 
-export const handlePopoverInputChange = (deps, event) => {
+export const handlePopoverInputChange = (deps, payload) => {
   const { store, dispatchEvent, props } = deps;
+  const event = payload._event;
   const name = event.currentTarget.id.replace("popover-input-", "");
   // TODO fix double event
   if (name && event.detail.value !== undefined) {
@@ -78,8 +81,9 @@ export const handlePopoverInputChange = (deps, event) => {
   }
 };
 
-export const handleSelectChange = (deps, event) => {
+export const handleSelectChange = (deps, payload) => {
   const { store, dispatchEvent, render, props } = deps;
+  const event = payload._event;
   const name = event.currentTarget.id.replace("select-", "");
   if (name && event.detail.selectedValue !== undefined) {
     store.setFormFieldValue({
@@ -97,8 +101,9 @@ export const handleSelectChange = (deps, event) => {
   }
 };
 
-export const handleColorPickerChange = (deps, event) => {
+export const handleColorPickerChange = (deps, payload) => {
   const { store, dispatchEvent, props } = deps;
+  const event = payload._event;
   const name = event.currentTarget.id.replace("colorpicker-", "");
   if (name && event.detail.value !== undefined) {
     store.setFormFieldValue({
@@ -115,8 +120,9 @@ export const handleColorPickerChange = (deps, event) => {
   }
 };
 
-export const handleSliderChange = (deps, event) => {
+export const handleSliderChange = (deps, payload) => {
   const { store, dispatchEvent, props } = deps;
+  const event = payload._event;
   const name = event.currentTarget.id.replace("slider-", "");
   if (name && event.detail.value !== undefined) {
     store.setFormFieldValue({
@@ -133,8 +139,9 @@ export const handleSliderChange = (deps, event) => {
   }
 };
 
-export const handleSliderInputChange = (deps, event) => {
+export const handleSliderInputChange = (deps, payload) => {
   const { store, dispatchEvent, props } = deps;
+  const event = payload._event;
   const name = event.currentTarget.id.replace("slider-input-", "");
   if (name && event.detail.value !== undefined) {
     store.setFormFieldValue({
@@ -151,7 +158,8 @@ export const handleSliderInputChange = (deps, event) => {
   }
 };
 
-export const handleImageClick = (deps, event) => {
+export const handleImageClick = (deps, payload) => {
+  const event = payload._event;
   if (event.type === "contextmenu") {
     event.preventDefault();
   }
@@ -169,7 +177,8 @@ export const handleImageClick = (deps, event) => {
   );
 };
 
-export const handleWaveformClick = (deps, event) => {
+export const handleWaveformClick = (deps, payload) => {
+  const event = payload._event;
   if (event.type === "contextmenu") {
     event.preventDefault();
   }
@@ -187,8 +196,9 @@ export const handleWaveformClick = (deps, event) => {
   );
 };
 
-export const handleSelectAddOption = (deps, event) => {
+export const handleSelectAddOption = (deps, payload) => {
   const { store, dispatchEvent } = deps;
+  const event = payload._event;
   const name = event.currentTarget.id.replace("select-", "");
   dispatchEvent(
     new CustomEvent("action-click", {
@@ -201,8 +211,9 @@ export const handleSelectAddOption = (deps, event) => {
   );
 };
 
-export const handleTooltipMouseEnter = (deps, event) => {
+export const handleTooltipMouseEnter = (deps, payload) => {
   const { store, render, props } = deps;
+  const event = payload._event;
   const fieldName = event.currentTarget.id.replace('tooltip-icon-', '');
 
   // Find the field with matching name to get tooltip content
@@ -220,7 +231,7 @@ export const handleTooltipMouseEnter = (deps, event) => {
   }
 };
 
-export const handleTooltipMouseLeave = (deps, event) => {
+export const handleTooltipMouseLeave = (deps, payload) => {
   const { store, render } = deps;
   store.hideTooltip();
   render();

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

@@ -1,19 +1,19 @@
-export const handleDialogClose = (_, deps) => {
+export const handleDialogClose = (deps, payload) => {
   const { store, render } = deps;
-  
+
   store.closeDialog();
   render();
 };
 
-export const handleConfirm = (_, deps) => {
+export const handleConfirm = (deps, payload) => {
   const { store, render, globalUI } = deps;
-  
+
   store.closeDialog();
   render();
   globalUI.emit('event', true);
 };
 
-export const handleCancel = (_, deps) => {
+export const handleCancel = (deps, payload) => {
   const { store, render, globalUI } = deps;
 
   store.closeDialog();
@@ -21,24 +21,64 @@ export const handleCancel = (_, deps) => {
   globalUI.emit('event', false);
 };
 
-export const showAlert = (options, deps) => {
+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);
   render();
 };
 
-export const showConfirm = async (options, deps) => {
+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);
   render();
 
@@ -48,4 +88,42 @@ export const showConfirm = async (options, deps) => {
       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/components/navbar/navbar.handlers.js

@@ -1,6 +1,7 @@
 
-export const handleClickStart = (deps, event) => {
+export const handleClickStart = (deps, payload) => {
   const { dispatchEvent, store } = deps;
+  const event = payload._event;
   console.log('handle click start', store.selectPath());
   dispatchEvent(new CustomEvent('clickStart', {
     detail: {

package/src/components/popoverInput/popoverInput.handlers.js

@@ -6,8 +6,8 @@ export const handleBeforeMount = (deps) => {
   }
 }
 
-export const handleOnUpdate = (changes, deps) => {
-  const { oldProps, newProps} = changes
+export const handleOnUpdate = (deps, payload) => {
+  const { oldProps, newProps} = payload
   const { store, props, render } = deps;
 
   if (oldProps.defaultValue !== newProps.defaultValue) {
@@ -17,8 +17,9 @@ export const handleOnUpdate = (changes, deps) => {
   render();
 }
 
-export const handleTextClick = (deps, event) => {
+export const handleTextClick = (deps, payload) => {
   const { store, render, getRefIds, attrs } = deps;
+  const event = payload._event;
 
   const value = store.selectValue();
   store.setTempValue(value)
@@ -41,14 +42,15 @@ export const handleTextClick = (deps, event) => {
   }
 }
 
-export const handlePopoverClose = (deps, event) => {
+export const handlePopoverClose = (deps, payload) => {
   const { store, render } = deps;
   store.closePopover();
   render();
 }
 
-export const handleInputChange = (deps, event) => {
+export const handleInputChange = (deps, payload) => {
   const { store, render, dispatchEvent } = deps;
+  const event = payload._event;
   const value = event.detail.value;
 
   store.setTempValue(value);
@@ -61,8 +63,9 @@ export const handleInputChange = (deps, event) => {
   render();
 }
 
-export const handleSubmitClick = (deps, event) => {
+export const handleSubmitClick = (deps, payload) => {
   const { store, render, dispatchEvent, getRefIds } = deps;
+  const event = payload._event;
   const { input } = getRefIds()
   const value = input.elm.value;
 
@@ -77,8 +80,9 @@ export const handleSubmitClick = (deps, event) => {
   render();
 }
 
-export const handleInputKeydown = (deps, event) => {
+export const handleInputKeydown = (deps, payload) => {
   const { store, render, dispatchEvent, getRefIds } = deps;
+  const event = payload._event;
 
   if (event.key === 'Enter') {
     const { input } = getRefIds()

package/src/components/select/select.handlers.js

@@ -12,8 +12,8 @@ export const handleBeforeMount = (deps) => {
   }
 }
 
-export const handleOnUpdate = (changes, deps) => {
-  const { oldAttrs, newAttrs, oldProps, newProps } = changes;
+export const handleOnUpdate = (deps, payload) => {
+  const { oldAttrs, newAttrs, oldProps, newProps } = payload;
   const { store, props, render } = deps;
 
   // Check if key changed
@@ -35,8 +35,9 @@ export const handleOnUpdate = (changes, deps) => {
   }
 }
 
-export const handleButtonClick = (deps, event) => {
+export const handleButtonClick = (deps, payload) => {
   const { store, render, getRefIds, props } = deps;
+  const event = payload._event;
 
   const button = getRefIds()['select-button'].elm;
 
@@ -63,14 +64,15 @@ export const handleButtonClick = (deps, event) => {
   render();
 }
 
-export const handleClickOptionsPopoverOverlay = (deps, event) => {
+export const handleClickOptionsPopoverOverlay = (deps, payload) => {
   const { store, render } = deps;
   store.closeOptionsPopover();
   render();
 }
 
-export const handleOptionClick = (deps, event) => {
+export const handleOptionClick = (deps, payload) => {
   const { render, dispatchEvent, props, store } = deps;
+  const event = payload._event;
   const id = event.currentTarget.id.replace('option-', '');
 
   const option = props.options[id];
@@ -98,21 +100,23 @@ export const handleOptionClick = (deps, event) => {
   render();
 }
 
-export const handleOptionMouseEnter = (deps, event) => {
+export const handleOptionMouseEnter = (deps, payload) => {
   const { store, render } = deps;
+  const event = payload._event;
   const id = parseInt(event.currentTarget.id.replace('option-', ''));
   store.setHoveredOption(id);
   render();
 }
 
-export const handleOptionMouseLeave = (deps, event) => {
+export const handleOptionMouseLeave = (deps, payload) => {
   const { store, render } = deps;
   store.clearHoveredOption();
   render();
 }
 
-export const handleClearClick = (deps, event) => {
+export const handleClearClick = (deps, payload) => {
   const { store, render, dispatchEvent, props } = deps;
+  const event = payload._event;
 
   event.stopPropagation();
 
@@ -139,7 +143,7 @@ export const handleClearClick = (deps, event) => {
   render();
 }
 
-export const handleAddOptionClick = (deps, event) => {
+export const handleAddOptionClick = (deps, payload) => {
   const { store, render, dispatchEvent } = deps;
 
   // Close the popover
@@ -153,13 +157,13 @@ export const handleAddOptionClick = (deps, event) => {
   render();
 }
 
-export const handleAddOptionMouseEnter = (deps, event) => {
+export const handleAddOptionMouseEnter = (deps, payload) => {
   const { store, render } = deps;
   store.setHoveredAddOption(true);
   render();
 }
 
-export const handleAddOptionMouseLeave = (deps, event) => {
+export const handleAddOptionMouseLeave = (deps, payload) => {
   const { store, render } = deps;
   store.setHoveredAddOption(false);
   render();