@rettangoli/ui 1.6.0 → 1.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "1.6.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/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/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
      */