@vasakgroup/vue-libvasak 1.5.0 → 1.7.0

package/dist/types/cards/DeviceCard.vue.d.ts

@@ -1,3 +1,14 @@
+/**
+ * Un dato extra de la tarjeta: una cadena suelta, o una con su icono.
+ *
+ * Las dos formas valen. La cadena es lo que este componente recibía antes y
+ * sigue andando; la otra es lo que la copia de `vasak-desktop` necesitaba para
+ * poner un símbolo al lado de cada dato —la señal, la batería—.
+ */
+export type ExtraInfo = string | {
+    icon?: string;
+    text: string;
+};
 interface Props {
     /** El nombre del icono en el tema del escritorio. */
     name?: string;
@@ -8,10 +19,22 @@ interface Props {
     title: string;
     subtitle?: string;
     metadata?: string;
-    extraInfo?: string[];
+    extraInfo?: ExtraInfo[];
     isConnected?: boolean;
     showActionButton?: boolean;
+    /**
+     * Qué dice el botón de la acción.
+     *
+     * Va por propiedad y **no** se traduce acá adentro: una librería que busque
+     * `components.DeviceCard.connect` en el catálogo obliga a que las seis
+     * aplicaciones tengan esa clave, y la que no la tenga dibuja el nombre de la
+     * clave en pantalla. Quien la usa ya tiene su `t()`.
+     */
     actionLabel?: string;
+    /** Qué dice mientras `isConnecting`. */
+    connectingLabel?: string;
+    /** Mientras dura la acción: el botón queda deshabilitado y cambia el texto. */
+    isConnecting?: boolean;
     showStatusIndicator?: boolean;
     customClass?: string;
     clickable?: boolean;
@@ -29,10 +52,12 @@ declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {},
     metadata: string;
     subtitle: string;
     customClass: string;
-    extraInfo: string[];
+    extraInfo: ExtraInfo[];
     isConnected: boolean;
     showActionButton: boolean;
     actionLabel: string;
+    connectingLabel: string;
+    isConnecting: boolean;
     showStatusIndicator: boolean;
     clickable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/types/cards/ListCard.vue.d.ts

@@ -1,3 +1,23 @@
+/**
+ * Una fila de lista, con lo que le pongan adentro.
+ *
+ * Cuando es `clickable` se abre entera: con el mouse y **también con el
+ * teclado**. Lleva `role="button"` y no un `<button>` de verdad porque lo que
+ * entra por la ranura lo decide quien la usa, y ya hay quien mete botones
+ * adentro — un botón dentro de otro no es HTML válido: el navegador desanida el
+ * marcado y el de adentro deja de funcionar. El nombre accesible sale de ese
+ * mismo contenido.
+ *
+ * El papel y el foco van **atados a `clickable`**: una fila que dice ser un
+ * botón y no hace nada es el mismo problema al revés.
+ *
+ * Y las teclas llevan `.self` **antes** de `.prevent`, que no es un detalle: la
+ * tecla que alguien apreta sobre un botón de adentro **burbujea** hasta acá.
+ * Sin `.self`, apretar Enter en ese botón dispararía además la acción de la
+ * fila entera, y el `.prevent` le cancelaría al botón su propia activación —o a
+ * un campo de texto su salto de línea—. Con `.self` sólo responden las teclas
+ * que llegan a la fila misma, que es cuando la fila tiene el foco.
+ */
 interface Props {
     clickable?: boolean;
     customClass?: string | Record<string, boolean>;