@vasakgroup/vue-libvasak 0.4.1 → 0.6.0

package/dist/types/dropdown/DropdownMenu.vue.d.ts

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    /** Atado desde afuera. Sin esto el menú se abre y se cierra solo. */
+    open?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    open: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/dropdown/DropdownMenuContent.vue.d.ts

@@ -0,0 +1,22 @@
+type __VLS_Props = {
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    align?: 'start' | 'center' | 'end';
+    sideOffset?: number;
+};
+declare var __VLS_16: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    side: "top" | "bottom" | "left" | "right";
+    align: "start" | "center" | "end";
+    sideOffset: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/dropdown/DropdownMenuItem.vue.d.ts

@@ -0,0 +1,24 @@
+type __VLS_Props = {
+    disabled?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: () => any;
+    click: (evento: Event) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: (() => any) | undefined;
+    onClick?: ((evento: Event) => any) | undefined;
+}>, {
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/dropdown/DropdownMenuLabel.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/dropdown/DropdownMenuSeparator.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/dropdown/DropdownMenuTrigger.vue.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Lo que abre el menú.
+ *
+ * # Por qué es una función de render y no una plantilla
+ *
+ * `aria-haspopup` y `aria-expanded` tienen que ir **en el botón**, que es lo
+ * que el lector de pantalla anuncia y lo que recibe el foco. Envolverlo en un
+ * `div` y ponérselos al `div` no sirve de nada: quien tabula llega al botón y
+ * oye «botón», sin que haya un menú ni un estado abierto por ningún lado.
+ *
+ * Con `as-child` el disparador no dibuja nada suyo: clona el hijo que le
+ * pasaron y le agrega los atributos y los manejadores. Sin `as-child` sí
+ * envuelve, que es lo que necesita un menú contextual anclado a un punto.
+ *
+ * # El teclado y el clic sintético
+ *
+ * Enter y Espacio se atienden en `keydown` y con `preventDefault`. Sobre un
+ * `<button>` de verdad el navegador **también** dispara un clic por esas dos
+ * teclas: sin cortarlo, el menú se abriría con la tecla y se cerraría con el
+ * clic que viene detrás, y desde afuera parece que la tecla no hace nada.
+ */
+import { type VNode } from 'vue';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** Sin envoltorio: los atributos van sobre el hijo que se le pasó. */
+    asChild: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** El disparador no abre nada; lo abre la aplicación por su cuenta. */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** Sin envoltorio: los atributos van sobre el hijo que se le pasó. */
+    asChild: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** El disparador no abre nada; lo abre la aplicación por su cuenta. */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    disabled: boolean;
+    asChild: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/types/dropdown/tipos.d.ts

@@ -0,0 +1,50 @@
+/**
+ * El contrato entre las seis piezas de un menú desplegable.
+ *
+ * Un menú es un componente repartido: el disparador está en la barra, el
+ * contenido se teletransporta al `body` y los ítems son hijos del contenido
+ * pero nietos de quien los escribió. Nada de eso se puede coordinar por
+ * propiedades, así que la raíz lo **provee** y las demás piezas lo inyectan.
+ *
+ * Lo que se coordina no es sólo «está abierto»: para que el menú se comporte
+ * como un menú hace falta saber **con qué extremo** abrirlo —la flecha de
+ * arriba abre por el último ítem— y **a quién** devolverle el foco al cerrar.
+ * Eso último no es el disparador: en un menú contextual el disparador es un
+ * ancla invisible de cero por cero, y devolverle el foco es perderlo.
+ */
+import { type InjectionKey, type Ref } from 'vue';
+/**
+ * Qué se enfoca al abrir.
+ *
+ * `primero` y `ultimo` los pide el teclado —flecha abajo y flecha arriba—;
+ * `ninguno` es lo que pasa con el ratón, y ahí el foco va al propio menú, que
+ * es lo que deja andar las flechas y el Escape sin haber elegido nada todavía.
+ */
+export type FocoAlAbrir = 'primero' | 'ultimo' | 'ninguno';
+export interface ContextoDelMenu {
+    abierto: Ref<boolean>;
+    /** El `id` del `role="menu"`, que es lo que apunta el `aria-controls`. */
+    idDelMenu: string;
+    /** El `id` de la etiqueta del menú, si hay una, para su `aria-labelledby`. */
+    idDeLaEtiqueta: Ref<string | null>;
+    ponerLaEtiqueta: (id: string | null) => void;
+    disparador: Ref<HTMLElement | null>;
+    ponerElDisparador: (elemento: HTMLElement | null) => void;
+    focoAlAbrir: Ref<FocoAlAbrir>;
+    abrir: (foco?: FocoAlAbrir) => void;
+    /** Cerrar devolviendo el foco es lo que corresponde al Escape y a elegir. */
+    cerrar: (opciones?: {
+        devolverElFoco?: boolean;
+    }) => void;
+    alternar: (foco?: FocoAlAbrir) => void;
+}
+export declare const CLAVE_DEL_MENU: InjectionKey<ContextoDelMenu>;
+/**
+ * El menú que envuelve a este componente.
+ *
+ * Fuera de un `DropdownMenu` devuelve un contexto suelto en vez de reventar: un
+ * ítem montado solo —en una prueba, en una vista previa— tiene que dibujarse
+ * igual, con su `role` y su teclado, aunque no haya nada que abrir ni cerrar.
+ */
+export declare function usarElMenu(): ContextoDelMenu;
+export declare function siguienteIdDeMenu(): string;

package/dist/types/index.d.ts

@@ -12,6 +12,12 @@ import BarSearch from "./bar/BarSearch.vue";
 import ActionButton from "./controls/ActionButton.vue";
 import ConfigSection from "./layout/ConfigSection.vue";
 import DeviceCard from "./cards/DeviceCard.vue";
+import DropdownMenu from "./dropdown/DropdownMenu.vue";
+import DropdownMenuContent from "./dropdown/DropdownMenuContent.vue";
+import DropdownMenuItem from "./dropdown/DropdownMenuItem.vue";
+import DropdownMenuLabel from "./dropdown/DropdownMenuLabel.vue";
+import DropdownMenuSeparator from "./dropdown/DropdownMenuSeparator.vue";
+import DropdownMenuTrigger from "./dropdown/DropdownMenuTrigger.vue";
 import FormGroup from "./forms/FormGroup.vue";
 import ListCard from "./cards/ListCard.vue";
 import SliderControl from "./forms/SliderControl.vue";
@@ -23,9 +29,11 @@ declare const _default: {
     install(app: App): void;
 };
 export default _default;
-export { SideBar, SideButton, SideGroup, SelectField, ThemeIcon, WindowFrame, AppBar, WindowControls, TabBar, TabItem, BarSearch, ActionButton, ConfigSection, DeviceCard, FormGroup, ListCard, SliderControl, SwitchToggle, ToggleControl, TrayIconButton, };
+export { SideBar, SideButton, SideGroup, SelectField, ThemeIcon, WindowFrame, AppBar, WindowControls, TabBar, TabItem, BarSearch, ActionButton, ConfigSection, DeviceCard, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, FormGroup, ListCard, SliderControl, SwitchToggle, ToggleControl, TrayIconButton, };
+export type { ContextoDelMenu, FocoAlAbrir } from "./dropdown/tipos";
+export { CLAVE_DEL_MENU, usarElMenu } from "./dropdown/tipos";
 export type { SidebarCategory, SidebarItem } from "./sidebar/tipos";
 export type { AccionDePestana, ElementoDePestana } from "./tabs/tipos";
-export type { ContextoDeLaBarra, OrientacionDeLaBarra, PosicionDeLaBarra, } from "./window/tipos";
-export { CLAVE_DE_LA_BARRA, esPosicion, orientacionDe, POSICIONES, usarLaBarra } from "./window/tipos";
+export type { ContextoDeLaBarra, ControlDeVentana, OrientacionDeLaBarra, PosicionDeLaBarra, } from "./window/tipos";
+export { CLAVE_DE_LA_BARRA, esPosicion, LOS_TRES_CONTROLES, orientacionDe, POSICIONES, usarLaBarra, } from "./window/tipos";
 export { posicionDe, usarLaPosicionDeLaBarra } from "./window/preferencia";

package/dist/types/window/AppBar.vue.d.ts

@@ -1,4 +1,4 @@
-import { type PosicionDeLaBarra } from './tipos';
+import { type ControlDeVentana, type PosicionDeLaBarra } from './tipos';
 type __VLS_Props = {
     /** Sin esto toma la del marco que la envuelve. */
     position?: PosicionDeLaBarra | null;
@@ -7,10 +7,15 @@ type __VLS_Props = {
     minimizeLabel?: string;
     maximizeLabel?: string;
     closeLabel?: string;
-    /** Para una ventana sin botones propios: un diálogo, un asistente. */
-    hideControls?: boolean;
+    /**
+     * Cuáles de los tres botones de ventana lleva.
+     *
+     * Vacío en un cuadro de diálogo y en el instalador; sólo `close` en el
+     * mini-reproductor. Ver `WindowControls`.
+     */
+    controls?: ControlDeVentana[];
 };
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_14: {};
 type __VLS_Slots = {} & {
     identidad?: (props: typeof __VLS_1) => any;
 } & {
@@ -19,14 +24,24 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_5) => any;
 } & {
     acciones?: (props: typeof __VLS_7) => any;
+} & {
+    centro?: (props: typeof __VLS_14) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    minimize: () => any;
+    maximize: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onMinimize?: (() => any) | undefined;
+    onMaximize?: (() => any) | undefined;
+}>, {
     title: string;
+    controls: ControlDeVentana[];
     minimizeLabel: string;
     maximizeLabel: string;
     closeLabel: string;
     position: PosicionDeLaBarra | null;
-    hideControls: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/types/window/WindowControls.vue.d.ts

@@ -1,9 +1,21 @@
+import { type ControlDeVentana } from './tipos';
 type __VLS_Props = {
+    /** Cuáles de los tres se dibujan, y en este orden. */
+    controls?: ControlDeVentana[];
     minimizeLabel?: string;
     maximizeLabel?: string;
     closeLabel?: string;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    minimize: () => any;
+    maximize: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onMinimize?: (() => any) | undefined;
+    onMaximize?: (() => any) | undefined;
+}>, {
+    controls: ControlDeVentana[];
     minimizeLabel: string;
     maximizeLabel: string;
     closeLabel: string;

package/dist/types/window/WindowFrame.vue.d.ts

@@ -1,4 +1,4 @@
-import { type PosicionDeLaBarra } from './tipos';
+import { type ControlDeVentana, type PosicionDeLaBarra } from './tipos';
 type __VLS_Props = {
     /** Fija la barra a un lado, ignorando la preferencia del escritorio. */
     position?: PosicionDeLaBarra | null;
@@ -6,29 +6,43 @@ type __VLS_Props = {
     minimizeLabel?: string;
     maximizeLabel?: string;
     closeLabel?: string;
-    hideControls?: boolean;
+    /**
+     * Cuáles de los tres botones de ventana lleva. Vacío en un cuadro de
+     * diálogo y en el instalador; sólo `close` en el mini-reproductor.
+     */
+    controls?: ControlDeVentana[];
     /** Para una ventana que dibuja su propia barra o no lleva ninguna. */
     hideBar?: boolean;
 };
-declare var __VLS_8: {}, __VLS_11: {}, __VLS_14: {}, __VLS_16: {}, __VLS_18: {};
+declare var __VLS_8: {}, __VLS_11: {}, __VLS_14: {}, __VLS_17: {}, __VLS_19: {}, __VLS_21: {};
 type __VLS_Slots = {} & {
     identidad?: (props: typeof __VLS_8) => any;
 } & {
     titulo?: (props: typeof __VLS_11) => any;
 } & {
-    acciones?: (props: typeof __VLS_14) => any;
+    centro?: (props: typeof __VLS_14) => any;
 } & {
-    barra?: (props: typeof __VLS_16) => any;
+    acciones?: (props: typeof __VLS_17) => any;
 } & {
-    default?: (props: typeof __VLS_18) => any;
+    barra?: (props: typeof __VLS_19) => any;
+} & {
+    default?: (props: typeof __VLS_21) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    minimize: () => any;
+    maximize: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onMinimize?: (() => any) | undefined;
+    onMaximize?: (() => any) | undefined;
+}>, {
     title: string;
+    controls: ControlDeVentana[];
     minimizeLabel: string;
     maximizeLabel: string;
     closeLabel: string;
     position: PosicionDeLaBarra | null;
-    hideControls: boolean;
     hideBar: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/types/window/reenvio.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Los manejadores que hay que pasarle al componente de abajo, y sólo ésos.
+ *
+ * `WindowControls` decide qué hace cada botón mirando si alguien escucha el
+ * evento: sin oyente cierra la ventana, con oyente emite y no la toca. Eso sólo
+ * funciona si la cadena de arriba —`WindowFrame` → `AppBar` → `WindowControls`—
+ * reenvía los eventos que de verdad le llegaron y no los tres siempre.
+ *
+ * Escribir `@close="emit('close')"` fijo en el marco hace que el botón vea un
+ * oyente puesto aunque la aplicación no haya escuchado nada, y entonces ninguna
+ * ventana se cierra nunca: el clic emite hacia arriba y se pierde. Pasó, y no da
+ * ningún error.
+ *
+ * Se mira el `vnode` y no `useAttrs()` porque un evento declarado en `emits` no
+ * aparece en los atributos: Vue lo saca de ahí justamente por estar declarado.
+ *
+ * Se llama desde la plantilla (`v-on="reenviarSiEscuchan([...])"`) para que se
+ * evalúe en cada dibujado: el `vnode` se reemplaza y un `computed` sin
+ * dependencias reactivas se quedaría con los oyentes del primero.
+ */
+export declare function reenviarSiEscuchan(eventos: string[]): Record<string, () => void>;

package/dist/types/window/tipos.d.ts

@@ -46,3 +46,7 @@ export declare function esPosicion(valor: unknown): valor is PosicionDeLaBarra;
  * marco se dibujaba de costado. Lo encontró una prueba de `aria-orientation`.
  */
 export declare function usarLaBarra(): ContextoDeLaBarra;
+/** Los tres botones de la ventana, por nombre. */
+export type ControlDeVentana = 'minimize' | 'maximize' | 'close';
+/** Los tres, que es lo que lleva una ventana normal. */
+export declare const LOS_TRES_CONTROLES: ControlDeVentana[];