@rettangoli/ui 1.6.0 → 1.7.0

package/package.json

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

package/src/components/form/form.handlers.js

@@ -71,6 +71,14 @@ const updateFieldAttributes = ({
         }
       }
 
+      if (field.type === "tag-select" && ref.store?.updateSelectedValues) {
+        const value = get(formValues, field.name);
+        ref.store.updateSelectedValues({ values: Array.isArray(value) ? value : [] });
+        if (typeof ref.render === "function") {
+          ref.render();
+        }
+      }
+
       if (field.type === "checkbox") {
         const value = get(formValues, field.name);
         if (value) {

package/src/components/form/form.methods.js

@@ -60,8 +60,13 @@ const syncFieldValueAttribute = ({ ref, fieldType, value, forceRefresh = false }
 
 const syncChoiceFieldState = ({ ref, value }) => {
   if (!ref) return;
-  if (!ref?.store?.updateSelectedValue) return;
-  ref.store.updateSelectedValue({ value });
+  if (ref?.store?.updateSelectedValues) {
+    ref.store.updateSelectedValues({ values: Array.isArray(value) ? value : [] });
+  } else if (ref?.store?.updateSelectedValue) {
+    ref.store.updateSelectedValue({ value });
+  } else {
+    return;
+  }
   if (typeof ref.render === "function") {
     ref.render();
   }
@@ -93,7 +98,7 @@ const syncChoiceRefsFromValues = ({ root, values = {} }) => {
   if (!root || typeof root.querySelectorAll !== "function") return;
 
   const choiceRefs = root.querySelectorAll(
-    "rtgl-select[data-field-name], rtgl-segmented-control[data-field-name]",
+    "rtgl-select[data-field-name], rtgl-tag-select[data-field-name], rtgl-segmented-control[data-field-name]",
   );
   choiceRefs.forEach((ref) => {
     const fieldName = ref.dataset?.fieldName;
@@ -142,7 +147,7 @@ export const setValues = function (payload = {}) {
         forceRefresh: true,
       });
 
-      if (typeof ref?.tagName === "string" && ref.tagName.toUpperCase() === "RTGL-SELECT") {
+      if (["select", "tag-select", "segmented-control"].includes(field.type)) {
         syncChoiceFieldState({ ref, value });
       }
 

package/src/components/form/form.store.js

@@ -284,6 +284,7 @@ export const validateField = (field, value) => {
       value === undefined ||
       value === null ||
       value === "" ||
+      (Array.isArray(value) && value.length === 0) ||
       (typeof value === "boolean" && value === false);
     // For numbers, 0 is a valid value
     const isEmptyNumber = field.type === "input-number" && value === null;
@@ -404,6 +405,8 @@ export const getDefaultValue = (field) => {
     case "select":
     case "segmented-control":
       return null;
+    case "tag-select":
+      return [];
     case "checkbox":
       return false;
     case "color-picker":
@@ -507,9 +510,10 @@ export const selectViewData = ({ state, props }) => {
       field._inputType = field.inputType || "text";
     }
 
-    if (field.type === "select" || field.type === "segmented-control") {
+    if (field.type === "select" || field.type === "tag-select" || field.type === "segmented-control") {
       const val = get(state.formValues, field.name);
       field._selectedValue = val !== undefined ? val : null;
+      field._selectedValues = Array.isArray(val) ? val : [];
       field.placeholder = field.placeholder || "";
       // clearable defaults to true; noClear is the inverse
       field.noClear = field.clearable === false;

package/src/components/form/form.view.yaml

@@ -68,6 +68,8 @@ template:
                           - rtgl-textarea#field${field._idx} data-field-name=${field.name} w=f rows=${field.rows} placeholder=${field.placeholder} ?disabled=${field._disabled}: null
                       - $if field.type == "select":
                           - rtgl-select#field${field._idx} data-field-name=${field.name} w=f :options=${field.options} ?no-clear=${field.noClear} :selectedValue=${field._selectedValue} :placeholder=${field.placeholder} ?disabled=${field._disabled}: null
+                      - $if field.type == "tag-select":
+                          - rtgl-tag-select#field${field._idx} data-field-name=${field.name} w=f :options=${field.options} :selectedValues=${field._selectedValues} :placeholder=${field.placeholder} :addOption=${field.addOption} ?disabled=${field._disabled}: null
                       - $if field.type == "segmented-control":
                           - rtgl-segmented-control#field${field._idx} data-field-name=${field.name} w=f :options=${field.options} ?no-clear=${field.noClear} :selectedValue=${field._selectedValue} :placeholder=${field.placeholder} ?disabled=${field._disabled}: null
                       - $if field.type == "color-picker":

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

@@ -1,6 +1,7 @@
 const VALID_DIALOG_SIZES = new Set(["sm", "md", "lg", "f"]);
 const VALID_TOAST_SIZES = new Set(["sm", "md", "lg"]);
 const VALID_TOAST_PHASES = new Set(["active", "exiting"]);
+const VALID_TOAST_POSITIONS = new Set(["top", "bottom"]);
 const VALID_COMPONENT_DIALOG_ROLES = new Set(["confirm", "cancel"]);
 
 const DEFAULT_COMPONENT_DIALOG_BUTTONS = Object.freeze([
@@ -39,6 +40,10 @@ const normalizeToastPhase = (value, fallback = "active") => {
   return VALID_TOAST_PHASES.has(value) ? value : fallback;
 };
 
+const normalizeToastPosition = (value, fallback = "top") => {
+  return VALID_TOAST_POSITIONS.has(value) ? value : fallback;
+};
+
 const normalizeComponentDialogActions = (value) => {
   const sourceButtons = Array.isArray(value?.buttons) && value.buttons.length > 0
     ? value.buttons
@@ -223,6 +228,7 @@ export const addToast = ({ state }, options = {}) => {
     id: `toast-${nextToastId}`,
     message: options.message,
     size: normalizeToastSize(options.size ?? options.s, "sm"),
+    position: normalizeToastPosition(options.position, "top"),
     phase: "active",
   };
 
@@ -277,6 +283,14 @@ export const selectViewData = ({ state }) => {
   const isFormDialogOpen = state.isOpen && state.uiType === "formDialog";
   const isComponentDialogOpen = state.isOpen && state.uiType === "componentDialog";
   const componentDialogConfig = state.componentDialogConfig ?? createDefaultComponentDialogConfig();
+  const normalizedToasts = Array.isArray(state.toasts)
+    ? state.toasts.map((toast) => ({
+        ...toast,
+        size: normalizeToastSize(toast.size, "sm"),
+        position: normalizeToastPosition(toast.position, "top"),
+        phase: normalizeToastPhase(toast.phase, "active"),
+      }))
+    : [];
 
   return {
     isOpen: state.isOpen,
@@ -305,13 +319,9 @@ export const selectViewData = ({ state }) => {
       actions: componentDialogConfig.actions ?? normalizeComponentDialogActions(),
       key: componentDialogConfig.key ?? 0,
     },
-    toasts: Array.isArray(state.toasts)
-      ? state.toasts.map((toast) => ({
-          ...toast,
-          size: normalizeToastSize(toast.size, "sm"),
-          phase: normalizeToastPhase(toast.phase, "active"),
-        }))
-      : [],
+    toasts: normalizedToasts,
+    topToasts: normalizedToasts.filter((toast) => toast.position === "top"),
+    bottomToasts: normalizedToasts.filter((toast) => toast.position === "bottom"),
     isDialogOpen,
     isFormDialogOpen,
     isComponentDialogOpen,

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

@@ -38,34 +38,53 @@ styles:
     max-width: calc(100vw - 2 * var(--spacing-lg))
     opacity: 1
     transform: translateY(0) scale(1)
-    animation: toast-in 220ms cubic-bezier(0.16, 1, 0.3, 1)
     transition: opacity 180ms cubic-bezier(0.16, 1, 0.3, 1), transform 180ms cubic-bezier(0.16, 1, 0.3, 1)
     will-change: opacity, transform
+  .toast-card-top:
+    animation: toast-in-top 220ms cubic-bezier(0.16, 1, 0.3, 1)
+  .toast-card-bottom:
+    animation: toast-in-bottom 220ms cubic-bezier(0.16, 1, 0.3, 1)
   .toast-card-md:
     width: 50vw
   .toast-card-lg:
     width: 80vw
-  .toast-card-exiting:
+  .toast-card-top.toast-card-exiting:
     opacity: 0
     transform: translateY(calc(var(--spacing-sm) * -0.5)) scale(0.98)
+  .toast-card-bottom.toast-card-exiting:
+    opacity: 0
+    transform: translateY(calc(var(--spacing-sm) * 0.5)) scale(0.98)
   .toast-message:
     overflow-wrap: anywhere
-  '@keyframes toast-in':
+  '@keyframes toast-in-top':
     from:
       opacity: 0
       transform: translateY(calc(var(--spacing-sm) * -1)) scale(0.96)
     to:
       opacity: 1
       transform: translateY(0) scale(1)
+  '@keyframes toast-in-bottom':
+    from:
+      opacity: 0
+      transform: translateY(var(--spacing-sm)) scale(0.96)
+    to:
+      opacity: 1
+      transform: translateY(0) scale(1)
   '@media (prefers-reduced-motion: reduce)':
     .toast-card:
       animation: none
       transition: none
 template:
-  - rtgl-view class=toast-layer pos=fix edge=t z=2100 w=f ah=c g=sm p=md:
-      - $for toast, i in toasts:
-          - 'rtgl-view class="toast-card toast-card-${toast.size} toast-card-${toast.phase}" key=toast-${toast.id} bgc=su bc=bo bw=xs br=md shadow=md ph=lg pv=md':
-              - rtgl-text class=toast-message ta=c w=f: ${toast.message}
+  - $if topToasts.length > 0:
+      - rtgl-view class="toast-layer toast-layer-top" pos=fix edge=t z=2100 w=f ah=c g=sm ph=md pt=xl:
+          - $for toast, i in topToasts:
+              - 'rtgl-view class="toast-card toast-card-top toast-card-${toast.size} toast-card-${toast.phase}" key=toast-${toast.id} bgc=su bc=bo bw=xs br=md shadow=md ph=xl pv=lg':
+                  - rtgl-text class=toast-message ta=c w=f: ${toast.message}
+  - $if bottomToasts.length > 0:
+      - rtgl-view class="toast-layer toast-layer-bottom" pos=fix edge=b z=2100 w=f ah=c g=sm ph=md pb=xl:
+          - $for toast, i in bottomToasts:
+              - 'rtgl-view class="toast-card toast-card-bottom toast-card-${toast.size} toast-card-${toast.phase}" key=toast-${toast.id} bgc=su bc=bo bw=xs br=md shadow=md ph=xl pv=lg':
+                  - rtgl-text class=toast-message ta=c w=f: ${toast.message}
   - rtgl-dialog#dialog ?open=${isDialogContainerOpen} s=${dialogSize}:
       - $if isFormDialogOpen:
           - rtgl-form#formDialog slot=content :form=${formDialogConfig.form} :defaultValues=${formDialogConfig.defaultValues} :context=${formDialogConfig.context} ?disabled=${formDialogConfig.disabled} key=form-dialog-${formDialogConfig.key}: null

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

@@ -0,0 +1,192 @@
+const getOptionType = (option = {}) => {
+  if (option.type === "section") {
+    return "section";
+  }
+
+  if (option.type === "separator") {
+    return "separator";
+  }
+
+  return "item";
+};
+
+const normalizeSelectedValues = (selectedValues) => {
+  if (!Array.isArray(selectedValues)) {
+    return [];
+  }
+
+  return [...selectedValues];
+};
+
+const resolveCurrentValues = ({ store, props }) => {
+  if (store.selectHasSelectedValues()) {
+    return store.selectSelectedValues();
+  }
+
+  return normalizeSelectedValues(props.selectedValues);
+};
+
+const emitValueChange = ({
+  dispatchEvent,
+  value,
+  operation,
+  changedValue,
+  label,
+  index,
+  item,
+}) => {
+  dispatchEvent(
+    new CustomEvent("value-change", {
+      detail: {
+        value,
+        operation,
+        changedValue,
+        label,
+        index,
+        item,
+      },
+      bubbles: true,
+    }),
+  );
+};
+
+export const handleBeforeMount = (deps) => {
+  const { store, props, render } = deps;
+
+  if (props.selectedValues !== undefined) {
+    store.updateSelectedValues({ values: props.selectedValues });
+    render();
+  }
+};
+
+export const handleOnUpdate = (deps, payload) => {
+  const { oldProps, newProps } = payload;
+  const { store, render } = deps;
+  let shouldRender = false;
+
+  if (!!newProps?.disabled && !oldProps?.disabled) {
+    store.closeOptionsPopover({});
+    shouldRender = true;
+  }
+
+  if (oldProps.selectedValues !== newProps.selectedValues) {
+    store.updateSelectedValues({ values: newProps.selectedValues, syncDraft: true });
+    shouldRender = true;
+  }
+
+  if (oldProps.options !== newProps.options) {
+    shouldRender = true;
+  }
+
+  if (shouldRender) {
+    render();
+  }
+};
+
+export const handleTriggerClick = (deps, payload) => {
+  const { store, render, refs, props } = deps;
+  if (props.disabled) return;
+
+  const event = payload._event;
+  event.stopPropagation();
+
+  const trigger = refs.trigger;
+  const rect = trigger.getBoundingClientRect();
+  const currentValues = resolveCurrentValues({ store, props });
+
+  store.openOptionsPopover({
+    position: {
+      x: Math.round(rect.left),
+      y: Math.round(rect.bottom + 12),
+      w: Math.max(Math.round(rect.width), 240),
+    },
+    values: currentValues,
+  });
+  render();
+};
+
+export const handleTriggerKeyDown = (deps, payload) => {
+  const event = payload._event;
+  if (event.key !== "Enter" && event.key !== " ") {
+    return;
+  }
+
+  event.preventDefault();
+  handleTriggerClick(deps, payload);
+};
+
+export const handlePopoverClose = (deps) => {
+  const { store, render } = deps;
+  store.closeOptionsPopover({});
+  render();
+};
+
+export const handleOptionClick = (deps, payload) => {
+  const { render, props, store } = deps;
+  if (props.disabled) return;
+
+  const event = payload._event;
+  event.stopPropagation();
+
+  const id = event.currentTarget.id.slice("option".length);
+  const index = Number(id);
+  const option = props.options[index];
+
+  if (!option || getOptionType(option) !== "item") {
+    return;
+  }
+
+  store.toggleDraftSelectedValue({ value: option.value });
+  render();
+};
+
+export const handleOptionKeyDown = (deps, payload) => {
+  const event = payload._event;
+  if (event.key !== "Enter" && event.key !== " ") {
+    return;
+  }
+
+  event.preventDefault();
+  handleOptionClick(deps, payload);
+};
+
+export const handleSubmitClick = (deps, payload) => {
+  const { store, props, render, dispatchEvent } = deps;
+  if (props.disabled) return;
+
+  const event = payload._event;
+  event.stopPropagation();
+
+  const nextValues = store.selectDraftSelectedValues();
+
+  store.commitDraftSelectedValues({});
+
+  if (props.onChange && typeof props.onChange === "function") {
+    props.onChange(nextValues);
+  }
+
+  emitValueChange({
+    dispatchEvent,
+    value: nextValues,
+    operation: "set",
+    changedValue: undefined,
+    label: undefined,
+    index: null,
+    item: undefined,
+  });
+
+  render();
+};
+
+export const handleAddOptionClick = (deps, payload) => {
+  const { props, dispatchEvent } = deps;
+  if (props.disabled) return;
+
+  const event = payload._event;
+  event.stopPropagation();
+
+  dispatchEvent(new CustomEvent("add-option-click", {
+    bubbles: true,
+    composed: true,
+  }));
+};

package/src/components/tagSelect/tagSelect.methods.js

@@ -0,0 +1,32 @@
+const resolvePopoverPosition = (trigger) => {
+  if (!trigger || typeof trigger.getBoundingClientRect !== "function") {
+    return null;
+  }
+
+  const rect = trigger.getBoundingClientRect();
+  return {
+    x: Math.round(rect.left),
+    y: Math.round(rect.bottom + 12),
+    w: Math.max(Math.round(rect.width), 240),
+  };
+};
+
+export const refreshPopover = function () {
+  const state = this.store?.getState?.();
+
+  if (state?.isOpen) {
+    const position = resolvePopoverPosition(this.refs?.trigger);
+    const draftValues = this.store?.selectDraftSelectedValues?.() || [];
+
+    if (position) {
+      this.store.openOptionsPopover({
+        position,
+        values: draftValues,
+      });
+    }
+  }
+
+  if (typeof this.render === "function") {
+    this.render();
+  }
+};

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

@@ -0,0 +1,51 @@
+componentName: rtgl-tag-select
+propsSchema:
+  type: object
+  properties:
+    placeholder:
+      type: string
+    options:
+      type: array
+      items:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - section
+              - item
+              - separator
+          label:
+            type: string
+          value:
+            type: any
+          icon:
+            type: string
+          shortcut:
+            type: string
+          suffixText:
+            type: string
+          testId:
+            type: string
+    selectedValues:
+      type: array
+      items:
+        type: any
+    onChange:
+      type: function
+    addOption:
+      type: object
+      properties:
+        label:
+          type: string
+    disabled:
+      type: boolean
+    w:
+      type: string
+events:
+  value-change: {}
+  add-option-click: {}
+methods:
+  type: object
+  properties:
+    refreshPopover: {}