@rettangoli/ui 1.5.0 → 1.6.1

package/package.json

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

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

@@ -1,4 +1,16 @@
 
+const getItemType = (item = {}) => {
+  if (item.type === 'section' || item.type === 'label') {
+    return 'section';
+  }
+
+  if (item.type === 'separator') {
+    return 'separator';
+  }
+
+  return 'item';
+};
+
 export const handleClosePopover = (deps, payload) => {
   const { dispatchEvent } = deps;
   dispatchEvent(new CustomEvent('close'));
@@ -9,7 +21,7 @@ export const handleClickMenuItem = (deps, payload) => {
   const event = payload._event;
   const index = Number(event.currentTarget.dataset.index ?? event.currentTarget.id.slice('option'.length));
   const item = props.items[index];
-  const itemType = item?.type || 'item';
+  const itemType = getItemType(item);
 
   if (!item || itemType !== 'item' || item.disabled) {
     event.preventDefault();

package/src/components/dropdownMenu/dropdownMenu.schema.yaml

@@ -12,9 +12,10 @@ propsSchema:
           type:
             type: string
             enum:
-              - label
+              - section
               - item
               - separator
+              - label
           id:
             type: string
           icon:

package/src/components/dropdownMenu/dropdownMenu.store.js

@@ -3,12 +3,23 @@ export const createInitialState = () => Object.freeze({
 });
 
 const escapeAttrValue = (value) => `${value}`.replace(/"/g, '"');
+const getItemType = (item = {}) => {
+  if (item.type === 'section' || item.type === 'label') {
+    return 'section';
+  }
+
+  if (item.type === 'separator') {
+    return 'separator';
+  }
+
+  return 'item';
+};
 
 const normalizeItems = (items) => {
   return items.map((item, index) => {
-    const type = item.type || 'item';
+    const type = getItemType(item);
     const isSeparator = type === 'separator';
-    const isLabel = type === 'label';
+    const isSection = type === 'section';
     const isItem = type === 'item';
     const isDisabled = !!item.disabled;
     const isInteractive = isItem && !isDisabled;
@@ -34,7 +45,7 @@ const normalizeItems = (items) => {
       index,
       type,
       isSeparator,
-      isLabel,
+      isSection,
       isItem,
       isDisabled,
       isInteractive,

package/src/components/dropdownMenu/dropdownMenu.view.yaml

@@ -20,7 +20,7 @@ styles:
 template:
   - rtgl-popover#popover ?open=${open} x=${x} y=${y} place=${place} content-w=${w} content-h=${h} content-sv=true content-g=xs content-pv=sm:
       - $for item, i in items:
-          - $if item.isLabel:
+          - $if item.isSection:
               - rtgl-view w=f p=md:
                   - rtgl-text s=xs c=mu-fg: ${item.label}
             $elif item.isItem && item.isDisabled:

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/select/select.handlers.js

@@ -1,10 +1,22 @@
 import { deepEqual } from '../../common.js';
 
+const getOptionType = (option = {}) => {
+  if (option.type === 'section') {
+    return 'section';
+  }
+
+  if (option.type === 'separator') {
+    return 'separator';
+  }
+
+  return 'item';
+};
+
 export const handleBeforeMount = (deps) => {
   const { store, props, render } = deps;
 
   if (props.selectedValue !== null && props.selectedValue !== undefined && props.options) {
-    const selectedOption = props.options.find(opt => deepEqual(opt.value, props.selectedValue));
+    const selectedOption = props.options.find((opt) => getOptionType(opt) === 'item' && deepEqual(opt.value, props.selectedValue));
     if (selectedOption) {
       store.updateSelectedValue({
         value: selectedOption?.value
@@ -48,7 +60,7 @@ export const handleButtonClick = (deps, payload) => {
   const currentValue = storeSelectedValue !== null ? storeSelectedValue : props.selectedValue;
   let selectedIndex = null;
   if (currentValue !== null && currentValue !== undefined && props.options) {
-    selectedIndex = props.options.findIndex(opt => deepEqual(opt.value, currentValue));
+    selectedIndex = props.options.findIndex((opt) => getOptionType(opt) === 'item' && deepEqual(opt.value, currentValue));
     if (selectedIndex === -1) selectedIndex = null;
   }
 
@@ -87,6 +99,9 @@ export const handleOptionClick = (deps, payload) => {
   const index = Number(id);
 
   const option = props.options[id];
+  if (getOptionType(option) !== 'item') {
+    return;
+  }
 
   // Update internal state
   store.updateSelectedValue({ value: option?.value });

package/src/components/select/select.schema.yaml

@@ -9,6 +9,12 @@ propsSchema:
       items:
         type: object
         properties:
+          type:
+            type: string
+            enum:
+              - section
+              - item
+              - separator
           label:
             type: string
           value:

package/src/components/select/select.store.js

@@ -25,6 +25,18 @@ const stringifyProps = (props = {}) => {
 };
 
 const hasOwnProp = (object, key) => Object.prototype.hasOwnProperty.call(object || {}, key);
+const getOptionType = (option = {}) => {
+  if (option.type === 'section') {
+    return 'section';
+  }
+
+  if (option.type === 'separator') {
+    return 'separator';
+  }
+
+  return 'item';
+};
+const isSelectableOption = (option = {}) => getOptionType(option) === 'item';
 
 const getOptionIcon = (option = {}) => {
   return typeof option.icon === 'string' && option.icon.length > 0 ? option.icon : '';
@@ -43,6 +55,33 @@ const getOptionSuffixText = (option = {}) => {
 };
 
 const normalizeOption = (option = {}, index, currentValue, hoveredOptionId, hasIconColumn) => {
+  const type = getOptionType(option);
+  const isSection = type === 'section';
+  const isSeparator = type === 'separator';
+  const isItem = type === 'item';
+
+  if (isSection) {
+    return {
+      ...option,
+      index,
+      type,
+      isSection,
+      isSeparator,
+      isItem,
+    };
+  }
+
+  if (isSeparator) {
+    return {
+      ...option,
+      index,
+      type,
+      isSection,
+      isSeparator,
+      isItem,
+    };
+  }
+
   const isSelected = deepEqual(option.value, currentValue);
   const isHovered = hoveredOptionId === index;
   const icon = getOptionIcon(option);
@@ -50,6 +89,11 @@ const normalizeOption = (option = {}, index, currentValue, hoveredOptionId, hasI
 
   return {
     ...option,
+    index,
+    type,
+    isSection,
+    isSeparator,
+    isItem,
     isSelected,
     bgc: isHovered ? 'ac' : (isSelected ? 'mu' : ''),
     hasIconSlot: hasIconColumn,
@@ -88,17 +132,17 @@ export const selectViewData = ({ state, props }) => {
   let isPlaceholderLabel = true;
 
   const options = props.options || [];
-  const selectedOption = options.find((opt) => deepEqual(opt.value, currentValue));
+  const selectedOption = options.find((opt) => isSelectableOption(opt) && deepEqual(opt.value, currentValue));
   if (selectedOption) {
     displayLabel = selectedOption.label;
     isPlaceholderLabel = false;
   }
 
-  const hasIconColumn = options.some((option) => hasOwnProp(option, 'icon'));
+  const hasIconColumn = options.some((option) => isSelectableOption(option) && hasOwnProp(option, 'icon'));
   const optionsWithSelection = options.map((option, index) => {
     return normalizeOption(option, index, currentValue, state.hoveredOptionId, hasIconColumn);
   });
-  const selectedOptionView = optionsWithSelection.find((option) => option.isSelected);
+  const selectedOptionView = optionsWithSelection.find((option) => option.isItem && option.isSelected);
 
   return {
     containerAttrString,

package/src/components/select/select.view.yaml

@@ -48,17 +48,23 @@ template:
           - rtgl-svg svg=chevronDown wh=16 c=mu-fg: null
   - rtgl-popover#popover ?open=${isOpen} x=${position.x} y=${position.y} place=rs content-wh=300 content-g=xs content-sv=true content-pv=sm:
       - $for option, i in options:
-          - rtgl-view#option${i} w=f ph=lg pv=md cur=pointer bgc=${option.bgc} data-testid=${option.testId}:
-              - rtgl-view d=h av=c w=f g=md:
-                  - rtgl-view d=h av=c g=md w=1fg:
-                      - $if option.hasIconSlot:
-                          - $if option.hasIcon:
-                              - rtgl-svg wh=16 svg=${option.icon} c=${option.iconColor}: null
-                            $else:
-                              - div class=icon-placeholder aria-hidden="true": null
-                      - rtgl-text s=sm c=${option.c} w=1fg ellipsis: ${option.label}
-                  - $if option.hasSuffixText:
-                      - rtgl-text s=xs c=${option.suffixTextColor} ta=e: ${option.suffixText}
+          - $if option.isSection:
+              - rtgl-view w=f p=md:
+                  - rtgl-text s=xs c=mu-fg: ${option.label}
+            $elif option.isItem:
+              - rtgl-view#option${option.index} w=f ph=lg pv=md cur=pointer bgc=${option.bgc} data-testid=${option.testId}:
+                  - rtgl-view d=h av=c w=f g=md:
+                      - rtgl-view d=h av=c g=md w=1fg:
+                          - $if option.hasIconSlot:
+                              - $if option.hasIcon:
+                                  - rtgl-svg wh=16 svg=${option.icon} c=${option.iconColor}: null
+                                $else:
+                                  - div class=icon-placeholder aria-hidden="true": null
+                          - rtgl-text s=sm c=${option.c} w=1fg ellipsis: ${option.label}
+                      - $if option.hasSuffixText:
+                          - rtgl-text s=xs c=${option.suffixTextColor} ta=e: ${option.suffixText}
+            $elif option.isSeparator:
+              - rtgl-view w=f h=1 bgc=mu mv=sm: null
       - $if showAddOption:
           - rtgl-view w=f bw=xs bc=mu bwt=sm: null
           - rtgl-view#optionAdd w=f ph=lg pv=md cur=pointer bgc=${addOptionBgc} data-testid="select-add-option":

package/src/deps/createGlobalUI.js

@@ -163,11 +163,12 @@ const createGlobalUI = (globalUIElement) => {
     },
 
     /**
-     * Shows a top-centered toast message that auto-dismisses after 3 seconds.
+     * Shows a toast message that auto-dismisses after 3 seconds.
      *
      * @param {Object} options - Toast configuration options
      * @param {string} options.message - The toast message (required)
      * @param {('sm'|'md'|'lg')} [options.size] - Toast width preset matching dialog sizing (default: "sm")
+     * @param {('top'|'bottom')} [options.position] - Vertical viewport placement (default: "top")
      * @returns {void}
      * @throws {Error} If globalUIElement is not initialized
      */