@rettangoli/ui 0.1.3 → 0.1.4

package/package.json

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

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,11 +1,12 @@
 
-export const handleClosePopover = (deps, event) => {
+export const handleClosePopover = (deps, payload) => {
   const { dispatchEvent } = deps;
   dispatchEvent(new CustomEvent('close'));
 }
 
-export const handleClickMenuItem = (deps, event) => {
+export const handleClickMenuItem = (deps, payload) => {
   const { dispatchEvent } = deps;
+  const event = payload._event;
   const index = parseInt(event.currentTarget.id.replace('option-', ''));
   const item = deps.props.items[index];
 

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,26 @@ export const handleCancel = (_, deps) => {
   globalUI.emit('event', false);
 };
 
-export const showAlert = (options, deps) => {
+export const showAlert = (deps, payload) => {
   const { store, render } = deps;
-  
+  const options = payload;
+
   if (store.selectIsOpen()) {
     throw new Error("A dialog is already open");
   }
-  
+
   store.setAlertConfig(options);
   render();
 };
 
-export const showConfirm = async (options, deps) => {
+export const showConfirm = async (deps, payload) => {
   const { store, render, globalUI } = deps;
-  
+  const options = payload;
+
   if (store.selectIsOpen()) {
     throw new Error("A dialog is already open");
   }
-  
+
   store.setConfirmConfig(options);
   render();
 

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

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;