@vasakgroup/vue-libvasak 0.4.0 → 0.5.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,7 +29,9 @@ 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";