@rettangoli/ui 1.7.2 → 1.7.3

package/package.json

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

package/src/components/tagSelect/tagSelect.handlers.js

@@ -18,6 +18,19 @@ const normalizeSelectedValues = (selectedValues) => {
   return [...selectedValues];
 };
 
+const resolvePopoverPosition = (trigger) => {
+  if (!trigger || typeof trigger.getBoundingClientRect !== "function") {
+    return undefined;
+  }
+
+  const rect = trigger.getBoundingClientRect();
+  return {
+    x: Math.round(rect.left),
+    y: Math.round(rect.bottom + 12),
+    w: Math.max(Math.round(rect.width), 240),
+  };
+};
+
 const resolveCurrentValues = ({ store, props }) => {
   if (store.selectHasSelectedValues()) {
     return store.selectSelectedValues();
@@ -26,6 +39,18 @@ const resolveCurrentValues = ({ store, props }) => {
   return normalizeSelectedValues(props.selectedValues);
 };
 
+const resolveDraftValues = ({ store, props }) => {
+  if (Array.isArray(props?.draftSelectedValues)) {
+    return normalizeSelectedValues(props.draftSelectedValues);
+  }
+
+  if (store.getState().isOpen) {
+    return store.selectDraftSelectedValues();
+  }
+
+  return resolveCurrentValues({ store, props });
+};
+
 const emitValueChange = ({
   dispatchEvent,
   value,
@@ -50,30 +75,148 @@ const emitValueChange = ({
   );
 };
 
+const emitDraftValueChange = ({ dispatchEvent, value }) => {
+  dispatchEvent(
+    new CustomEvent("draft-value-change", {
+      detail: {
+        value,
+      },
+      bubbles: true,
+    }),
+  );
+};
+
+const emitOpenChange = ({ dispatchEvent, open }) => {
+  dispatchEvent(
+    new CustomEvent("open-change", {
+      detail: {
+        open,
+      },
+      bubbles: true,
+    }),
+  );
+};
+
+const openControlledPopover = ({ store, props, refs } = {}) => {
+  const position = resolvePopoverPosition(refs?.trigger);
+  if (!position) {
+    return false;
+  }
+
+  store.openOptionsPopover({
+    position,
+    values: resolveDraftValues({ store, props }),
+  });
+
+  return true;
+};
+
 export const handleBeforeMount = (deps) => {
-  const { store, props, render } = deps;
+  const { store, props, render, refs } = deps;
+  let shouldRender = false;
 
   if (props.selectedValues !== undefined) {
-    store.updateSelectedValues({ values: props.selectedValues });
+    store.updateSelectedValues({
+      values: props.selectedValues,
+      syncDraft: props.draftSelectedValues === undefined,
+      preserveDraft: Array.isArray(props.draftSelectedValues),
+    });
+    shouldRender = true;
+  }
+
+  if (Array.isArray(props.draftSelectedValues)) {
+    store.updateDraftSelectedValues({
+      values: props.draftSelectedValues,
+    });
+    shouldRender = true;
+  }
+
+  if (props.open === true && !props.disabled && openControlledPopover(deps)) {
+    shouldRender = true;
+  }
+
+  if (shouldRender) {
     render();
   }
 };
 
+export const handleAfterMount = (deps) => {
+  const { props, render, store, dispatchEvent } = deps;
+
+  if (props.disabled) {
+    if (props.open === true) {
+      emitOpenChange({
+        dispatchEvent,
+        open: false,
+      });
+    }
+    return;
+  }
+
+  if (props.open === true && !store.getState().isOpen) {
+    if (openControlledPopover(deps)) {
+      render();
+    }
+  }
+};
+
 export const handleOnUpdate = (deps, payload) => {
   const { oldProps, newProps } = payload;
-  const { store, render } = deps;
+  const { store, render, refs } = deps;
   let shouldRender = false;
 
   if (!!newProps?.disabled && !oldProps?.disabled) {
+    const wasOpen = store.getState().isOpen;
     store.closeOptionsPopover({});
+    if (wasOpen) {
+      emitOpenChange({
+        dispatchEvent: deps.dispatchEvent,
+        open: false,
+      });
+    }
     shouldRender = true;
   }
 
   if (oldProps.selectedValues !== newProps.selectedValues) {
-    store.updateSelectedValues({ values: newProps.selectedValues, syncDraft: true });
+    store.updateSelectedValues({
+      values: newProps.selectedValues,
+      syncDraft: newProps.draftSelectedValues === undefined,
+      preserveDraft: Array.isArray(newProps.draftSelectedValues),
+    });
     shouldRender = true;
   }
 
+  if (oldProps.draftSelectedValues !== newProps.draftSelectedValues) {
+    store.updateDraftSelectedValues({
+      values: Array.isArray(newProps?.draftSelectedValues)
+        ? newProps.draftSelectedValues
+        : resolveCurrentValues({ store, props: newProps }),
+    });
+    shouldRender = true;
+  }
+
+  if (oldProps.open !== newProps.open && newProps.open !== undefined) {
+    if (newProps.open) {
+      if (newProps.disabled) {
+        emitOpenChange({
+          dispatchEvent: deps.dispatchEvent,
+          open: false,
+        });
+      } else if (
+        openControlledPopover({
+          store,
+          props: newProps,
+          refs,
+        })
+      ) {
+        shouldRender = true;
+      }
+    } else {
+      store.closeOptionsPopover({});
+      shouldRender = true;
+    }
+  }
+
   if (oldProps.options !== newProps.options) {
     const hasCurrentValues = resolveCurrentValues({ store, props: newProps }).length > 0;
 
@@ -88,23 +231,24 @@ export const handleOnUpdate = (deps, payload) => {
 };
 
 export const handleTriggerClick = (deps, payload) => {
-  const { store, render, refs, props } = deps;
+  const { store, render, refs, props, dispatchEvent } = deps;
   if (props.disabled) return;
 
   const event = payload._event;
   event.stopPropagation();
 
-  const trigger = refs.trigger;
-  const rect = trigger.getBoundingClientRect();
-  const currentValues = resolveCurrentValues({ store, props });
+  const position = resolvePopoverPosition(refs.trigger);
+  if (!position) {
+    return;
+  }
 
   store.openOptionsPopover({
-    position: {
-      x: Math.round(rect.left),
-      y: Math.round(rect.bottom + 12),
-      w: Math.max(Math.round(rect.width), 240),
-    },
-    values: currentValues,
+    position,
+    values: resolveDraftValues({ store, props }),
+  });
+  emitOpenChange({
+    dispatchEvent,
+    open: true,
   });
   render();
 };
@@ -120,13 +264,17 @@ export const handleTriggerKeyDown = (deps, payload) => {
 };
 
 export const handlePopoverClose = (deps) => {
-  const { store, render } = deps;
+  const { store, render, dispatchEvent } = deps;
   store.closeOptionsPopover({});
+  emitOpenChange({
+    dispatchEvent,
+    open: false,
+  });
   render();
 };
 
 export const handleOptionClick = (deps, payload) => {
-  const { render, props, store } = deps;
+  const { render, props, store, dispatchEvent } = deps;
   if (props.disabled) return;
 
   const event = payload._event;
@@ -141,6 +289,10 @@ export const handleOptionClick = (deps, payload) => {
   }
 
   store.toggleDraftSelectedValue({ value: option.value });
+  emitDraftValueChange({
+    dispatchEvent,
+    value: store.selectDraftSelectedValues(),
+  });
   render();
 };
 
@@ -179,6 +331,11 @@ export const handleSubmitClick = (deps, payload) => {
     item: undefined,
   });
 
+  emitOpenChange({
+    dispatchEvent,
+    open: false,
+  });
+
   render();
 };
 

package/src/components/tagSelect/tagSelect.schema.yaml

@@ -31,6 +31,12 @@ propsSchema:
       type: array
       items:
         type: any
+    draftSelectedValues:
+      type: array
+      items:
+        type: any
+    open:
+      type: boolean
     onChange:
       type: function
     addOption:
@@ -44,6 +50,8 @@ propsSchema:
       type: string
 events:
   value-change: {}
+  draft-value-change: {}
+  open-change: {}
   add-option-click: {}
 methods:
   type: object

package/src/components/tagSelect/tagSelect.store.js

@@ -7,7 +7,9 @@ const blacklistedProps = [
   "slot",
   "placeholder",
   "options",
+  "open",
   "selectedValues",
+  "draftSelectedValues",
   "onChange",
   "addOption",
   "disabled",
@@ -272,7 +274,7 @@ export const updateSelectedValues = ({ state }, payload = {}) => {
   const values = normalizeSelectedValues(payload.values);
   state.selectedValues = values;
   state.hasSelectedValues = true;
-  if (payload.syncDraft || !state.isOpen) {
+  if ((payload.syncDraft || !state.isOpen) && !payload.preserveDraft) {
     state.draftSelectedValues = [...values];
   }
 };

package/src/components/tagSelect/tagSelect.view.yaml

@@ -48,7 +48,7 @@ template:
                           - 'rtgl-tag v=mu pre=${option.icon} style="${option.tagStyle}"':
                               ${option.label}
                     $elif option.isSeparator:
-                      - rtgl-view w=f h=1 bgc=mu my=xs: null
+                      - rtgl-view w=f h=1 bgc=mu mv=xs: null
               - $if showAddOption:
                   - rtgl-button#addOptionButton v=gh s=sm pre=plus data-testid="tag-select-add-option":
                       ${addOptionLabel}