innoboxrr-form-core 2.3.0 → 2.5.0

package/src/feedback.js

@@ -0,0 +1,273 @@
+/**
+ * Avisos y confirmaciones de toda la aplicación, como estado de módulo.
+ *
+ * Hasta ahora no había forma de avisar: un formulario generado se tragaba
+ * cualquier error que no fuera de validación, la tabla solo lo escribía en la
+ * consola y la confirmación de borrar era un SweetAlert de otro paquete. Cada
+ * pieza que quisiera decir algo tendría que haber montado su propio aviso.
+ *
+ * Vive aquí, fuera de Vue y de React, por la misma razón que el tema: los dos
+ * paquetes de componentes pintan la misma cola, y quien avisa —un store, un
+ * contrato de modelo, la tabla— no tiene por qué saber qué framework hay
+ * detrás.
+ *
+ *     import { notify, confirmAction } from 'innoboxrr-form-core'
+ *
+ *     notify({ message: 'Producto creado', variant: 'success' })
+ *
+ *     if (await confirmAction({ message: '¿Borrar el producto?', variant: 'danger' })) {
+ *         // …
+ *     }
+ */
+
+/**
+ * @typedef {'info'|'success'|'warning'|'danger'} Variant
+ * @typedef {{ id: number, title: string|null, message: string, variant: Variant, duration: number }} Toast
+ * @typedef {{ id: number, title: string, message: string, confirmLabel: string, cancelLabel: string, variant: 'primary'|'danger' }} Confirmation
+ */
+
+const VARIANTS = ['info', 'success', 'warning', 'danger']
+
+const DURATION = 5000
+
+/**
+ * Más avisos a la vez no se leen: tapan la pantalla. El que sobra es el más
+ * antiguo.
+ */
+const MAX_TOASTS = 5
+
+// AVISOS
+
+/** @type {Toast[]} */
+let toasts = []
+
+let nextToast = 1
+
+/** @type {Map<number, ReturnType<typeof setTimeout>>} */
+const timers = new Map()
+
+/** @type {Set<(toasts: Toast[]) => void>} */
+const toastListeners = new Set()
+
+const emitToasts = () => toastListeners.forEach((listener) => listener(toasts))
+
+/**
+ * Muestra un aviso y devuelve su id.
+ *
+ * Un aviso de peligro no se cierra solo por defecto: quien no lo leyó a tiempo
+ * no sabría qué falló. El resto se va a los cinco segundos. `duration: 0` lo
+ * deja hasta que se cierre a mano.
+ *
+ * @param {string|{ message: string, title?: string, variant?: Variant, duration?: number }} options
+ * @returns {number}
+ */
+export function notify(options) {
+    const input = typeof options === 'string' ? { message: options } : (options ?? {})
+    const variant = VARIANTS.includes(input.variant) ? input.variant : 'info'
+    const duration = input.duration ?? (variant === 'danger' ? 0 : DURATION)
+
+    /** @type {Toast} */
+    const toast = {
+        id: nextToast++,
+        title: input.title ?? null,
+        message: String(input.message ?? ''),
+        variant,
+        duration,
+    }
+
+    // Se reemplaza el array en vez de mutarlo: React compara la instantánea
+    // por referencia y, con el mismo array, no repintaría.
+    toasts = [...toasts, toast]
+
+    while (toasts.length > MAX_TOASTS) {
+        forget(toasts[0].id)
+        toasts = toasts.slice(1)
+    }
+
+    if (duration > 0) {
+        timers.set(toast.id, setTimeout(() => dismiss(toast.id), duration))
+    }
+
+    emitToasts()
+
+    return toast.id
+}
+
+/**
+ * @param {string} message
+ * @param {{ title?: string, duration?: number }} [options]
+ */
+export function notifySuccess(message, options = {}) {
+    return notify({ ...options, message, variant: 'success' })
+}
+
+/**
+ * @param {string} message
+ * @param {{ title?: string, duration?: number }} [options]
+ */
+export function notifyError(message, options = {}) {
+    return notify({ ...options, message, variant: 'danger' })
+}
+
+/**
+ * @param {number} id
+ */
+export function dismiss(id) {
+    forget(id)
+
+    const remaining = toasts.filter((toast) => toast.id !== id)
+
+    if (remaining.length !== toasts.length) {
+        toasts = remaining
+        emitToasts()
+    }
+}
+
+/** @returns {Toast[]} */
+export function getToasts() {
+    return toasts
+}
+
+/**
+ * @param {(toasts: Toast[]) => void} listener
+ * @returns {() => void}  para dejar de escuchar
+ */
+export function onToastsChange(listener) {
+    toastListeners.add(listener)
+
+    return () => toastListeners.delete(listener)
+}
+
+/**
+ * Vacía la cola. Sobre todo para las pruebas: sin esto un aviso de una prueba
+ * aparecería en la siguiente.
+ */
+export function resetToasts() {
+    timers.forEach((timer) => clearTimeout(timer))
+    timers.clear()
+
+    toasts = []
+    nextToast = 1
+
+    emitToasts()
+}
+
+/**
+ * @param {number} id
+ */
+function forget(id) {
+    clearTimeout(timers.get(id))
+    timers.delete(id)
+}
+
+// CONFIRMACIONES
+
+/** @type {Confirmation|null} */
+let confirmation = null
+
+/** @type {((value: boolean) => void)|null} */
+let resolver = null
+
+let nextConfirmation = 1
+
+/** @type {Set<(confirmation: Confirmation|null) => void>} */
+const confirmationListeners = new Set()
+
+const emitConfirmation = () => confirmationListeners.forEach((listener) => listener(confirmation))
+
+/**
+ * Pregunta y espera la respuesta: `true` si se confirma, `false` si no.
+ *
+ * La pinta el ConfirmHostComponent que la aplicación monta una vez. Si no hay
+ * ninguno escuchando se usa `window.confirm`, que es feo pero contesta: una
+ * promesa que no se resolviera nunca dejaría colgada la acción que la espera.
+ *
+ * Una pregunta nueva con otra pendiente da la anterior por cancelada. Dos
+ * confirmaciones a la vez no tienen una respuesta clara.
+ *
+ * @param {string|{ message: string, title?: string, confirmLabel?: string, cancelLabel?: string, variant?: 'primary'|'danger' }} options
+ * @returns {Promise<boolean>}
+ */
+export function confirmAction(options) {
+    const input = typeof options === 'string' ? { message: options } : (options ?? {})
+    const message = String(input.message ?? '')
+
+    if (confirmationListeners.size === 0) {
+        const native = typeof window !== 'undefined' ? window.confirm : undefined
+
+        return Promise.resolve(typeof native === 'function' ? Boolean(native.call(window, message)) : false)
+    }
+
+    if (resolver) {
+        settle(false)
+    }
+
+    return new Promise((resolve) => {
+        resolver = resolve
+
+        confirmation = {
+            id: nextConfirmation++,
+            title: input.title ?? '¿Confirmas?',
+            message,
+            confirmLabel: input.confirmLabel ?? 'Confirmar',
+            cancelLabel: input.cancelLabel ?? 'Cancelar',
+            variant: input.variant === 'danger' ? 'danger' : 'primary',
+        }
+
+        emitConfirmation()
+    })
+}
+
+/**
+ * La respuesta a la confirmación pendiente. La llama el componente que la pinta.
+ *
+ * @param {boolean} value
+ */
+export function resolveConfirmation(value) {
+    if (resolver) {
+        settle(Boolean(value))
+    }
+}
+
+/** @returns {Confirmation|null} */
+export function getConfirmation() {
+    return confirmation
+}
+
+/**
+ * @param {(confirmation: Confirmation|null) => void} listener
+ * @returns {() => void}  para dejar de escuchar
+ */
+export function onConfirmationChange(listener) {
+    confirmationListeners.add(listener)
+
+    return () => confirmationListeners.delete(listener)
+}
+
+/**
+ * Cancela lo pendiente. Sobre todo para las pruebas.
+ */
+export function resetConfirmation() {
+    if (resolver) {
+        settle(false)
+
+        return
+    }
+
+    confirmation = null
+    emitConfirmation()
+}
+
+/**
+ * @param {boolean} value
+ */
+function settle(value) {
+    const resolve = resolver
+
+    resolver = null
+    confirmation = null
+
+    emitConfirmation()
+
+    resolve?.(value)
+}

package/src/icons.js

@@ -41,8 +41,12 @@ export const defaultIcons = {
     hide: 'fa6-solid:eye-slash',
     actions: 'fa6-solid:gears',
     refresh: 'fa6-solid:rotate',
+    restore: 'fa6-solid:rotate-left',
     search: 'fa6-solid:magnifying-glass',
     filter: 'fa6-solid:filter',
+    more: 'fa6-solid:ellipsis',
+    external: 'fa6-solid:arrow-up-right-from-square',
+    logout: 'fa6-solid:right-from-bracket',
 
     // ESTADO
     help: 'fa6-solid:circle-question',
@@ -58,6 +62,18 @@ export const defaultIcons = {
     up: 'fa6-solid:chevron-up',
     down: 'fa6-solid:chevron-down',
     close: 'fa6-solid:xmark',
+    home: 'fa6-solid:house',
+    menu: 'fa6-solid:bars',
+    sidebar: 'fa6-solid:table-columns',
+    command: 'fa6-solid:terminal',
+    settings: 'fa6-solid:gear',
+
+    // SELECCION Y ORDEN
+    check: 'fa6-solid:check',
+    minus: 'fa6-solid:minus',
+    sort: 'fa6-solid:sort',
+    sortUp: 'fa6-solid:sort-up',
+    sortDown: 'fa6-solid:sort-down',
 
     // OBJETOS
     box: 'fa6-solid:box',

package/src/theme.js

@@ -52,6 +52,7 @@ export const defaultTheme = {
     buttonSecondary: 'fe-button-secondary',
     buttonDanger: 'fe-button-danger',
     buttonLink: 'fe-button-link',
+    iconButton: 'fe-icon-button',
 
     // NAVEGACION Y ACCIONES
     breadcrumb: 'fe-breadcrumb',
@@ -61,25 +62,81 @@ export const defaultTheme = {
     actionMenu: 'fe-action-menu',
     actionMenuItem: 'fe-action-item',
     actionMenuDanger: 'fe-action-danger',
+    kbd: 'fe-kbd',
 
     // SUPERFICIES Y PIEZAS DE APLICACION
     surface: 'fe-surface',
     surfaceRaised: 'fe-surface-raised',
     toolbar: 'fe-toolbar',
     badge: 'fe-badge',
+    badgePrimary: 'fe-badge-primary',
+    badgeSuccess: 'fe-badge-success',
+    badgeDanger: 'fe-badge-danger',
+    badgeWarning: 'fe-badge-warning',
     skeleton: 'fe-skeleton',
+    skeletonText: 'fe-skeleton-text',
+    skeletonCircle: 'fe-skeleton-circle',
+    skeletonBlock: 'fe-skeleton-block',
+
+    // DIALOGOS Y DRAWERS, sobre <dialog> y showModal()
     overlay: 'fe-overlay',
     dialog: 'fe-dialog',
+    dialogSmall: 'fe-dialog-sm',
+    dialogLarge: 'fe-dialog-lg',
+    dialogHeader: 'fe-dialog-header',
+    dialogTitle: 'fe-dialog-title',
+    dialogBody: 'fe-dialog-body',
+    dialogFooter: 'fe-dialog-footer',
     drawer: 'fe-drawer',
+    drawerStart: 'fe-drawer-start',
+    drawerHeader: 'fe-drawer-header',
+    drawerTitle: 'fe-drawer-title',
+    drawerBody: 'fe-drawer-body',
+    drawerFooter: 'fe-drawer-footer',
+
+    // MENUS, sobre el atributo popover
     menu: 'fe-menu',
+    menuList: 'fe-menu-list',
     menuItem: 'fe-menu-item',
+    menuItemDanger: 'fe-menu-item-danger',
+    menuSeparator: 'fe-menu-separator',
+    menuLabel: 'fe-menu-label',
+
+    // PALETA DE COMANDOS
+    command: 'fe-command',
+    commandInput: 'fe-command-input',
+    commandList: 'fe-command-list',
+    commandGroup: 'fe-command-group',
+    commandItem: 'fe-command-item',
+    commandEmpty: 'fe-command-empty',
+
+    // AVISOS
     toast: 'fe-toast',
     toastDanger: 'fe-toast-danger',
     toastSuccess: 'fe-toast-success',
+    toastWarning: 'fe-toast-warning',
+    toastTitle: 'fe-toast-title',
+    toastClose: 'fe-toast-close',
+    toastRegion: 'fe-toast-region',
 
     // TABLA
     table: 'fe-table',
     tableNumeric: 'fe-numeric',
+    tableSticky: 'fe-table-sticky',
+    tableSelect: 'fe-table-select',
+    tableResizer: 'fe-table-resizer',
+    tableEmpty: 'fe-table-empty',
+    bulkBar: 'fe-bulk-bar',
+    bulkCount: 'fe-bulk-count',
+
+    // EDICION EN LINEA
+    editable: 'fe-editable',
+
+    // SHELL DE APLICACION
+    shell: 'fe-shell',
+    shellHeader: 'fe-shell-header',
+    shellSidebar: 'fe-shell-sidebar',
+    shellMain: 'fe-shell-main',
 }
 
 /** @type {Theme} */

package/src/tokens.css

@@ -51,8 +51,15 @@
     --fe-warning: #8a6212;
     --fe-warning-soft: #f8f0dd;
 
+    --fe-info: #1f6fb2;
+    --fe-info-soft: #e5f0f9;
+
     --fe-focus: #4b5bd7;
 
+    /* Lo que queda detrás de un diálogo o un drawer abierto. Era un rgba
+       escrito dentro de .fe-overlay, igual en claro que en oscuro. */
+    --fe-overlay: rgba(16, 18, 27, 0.45);
+
     /* ---------- FORMA ---------- */
 
     --fe-radius-sm: 4px;
@@ -97,6 +104,30 @@
     /* ---------- MOVIMIENTO ---------- */
 
     --fe-transition: 120ms ease;
+    --fe-duration-fast: 120ms;
+    --fe-duration: 200ms;
+    /* Rápido al empezar y suave al llegar: lo que se abre tiene que sentirse
+       inmediato, no animado. */
+    --fe-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
+
+    /* ---------- CAPAS ---------- */
+
+    /* Un orden y no un número por componente. Lo que se abre con showModal() o
+       con el atributo popover ya vive en la capa superior del navegador y no
+       necesita z-index; esto es para lo que no: la cabecera fija de una tabla,
+       un overlay dibujado a mano, los tooltips. */
+    --fe-z-sticky: 10;
+    --fe-z-dropdown: 40;
+    --fe-z-overlay: 50;
+    --fe-z-tooltip: 60;
+    --fe-z-toast: 70;
+
+    /* ---------- MEDIDAS DE APLICACION ---------- */
+
+    --fe-dialog-width: 32rem;
+    --fe-drawer-width: 32rem;
+    --fe-command-width: 40rem;
+    --fe-sidebar-width: 15rem;
 }
 
 /* La elección explícita de claro gana sobre un sistema en oscuro, de ahí el
@@ -133,8 +164,13 @@
         --fe-warning: #d9ac53;
         --fe-warning-soft: #2a2417;
 
+        --fe-info: #7cb3e6;
+        --fe-info-soft: #16222e;
+
         --fe-focus: #8b95f0;
 
+        --fe-overlay: rgba(0, 0, 0, 0.6);
+
         --fe-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
         --fe-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
         --fe-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
@@ -173,8 +209,13 @@
     --fe-warning: #d9ac53;
     --fe-warning-soft: #2a2417;
 
+    --fe-info: #7cb3e6;
+    --fe-info-soft: #16222e;
+
     --fe-focus: #8b95f0;
 
+    --fe-overlay: rgba(0, 0, 0, 0.6);
+
     --fe-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
     --fe-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
     --fe-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);