@vasakgroup/vue-libvasak 0.3.0 → 0.3.2

package/src/sidebar/SideBar.vue

@@ -1,183 +0,0 @@
-<script lang="ts" setup>
-/**
- * La barra lateral de las aplicaciones de VasakOS.
- *
- * Es la de Configuración, que es la que todas las demás venían copiando: mismo
- * `aside` con borde y esquina redondeada, mismo plegado a 84 píxeles, mismos
- * grupos con título. Que estén acá y no copiadas en cada repositorio es lo que
- * hace que las ventanas se lean como partes del mismo escritorio en vez de
- * parecerse por casualidad.
- *
- * # Los dos caminos
- *
- * Con `categories` se arma sola: cada categoría es un grupo plegable y cada
- * elemento un botón, con el activo marcado contra `modelValue`. Es el camino de
- * Configuración y del monitor, donde la barra **es** la navegación.
- *
- * Con la ranura por omisión se pone cualquier cosa adentro —discos, pasos de un
- * asistente, una línea de tiempo— y la barra aporta nada más que el marco y el
- * plegado. La ranura recibe `collapsed`, porque lo que se dibuja adentro casi
- * siempre tiene que saberlo.
- *
- * Los dos caminos conviven: lo declarativo va primero y la ranura después.
- *
- * # Por qué no hay traducciones acá
- *
- * Una librería de componentes que traduce obliga a todas las aplicaciones a
- * compartir sus claves. Los textos entran por propiedades; el `aria-label` del
- * botón de plegar también, que es el único que no se ve pero se oye.
- */
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
-import SideGroup from './SideGroup.vue';
-import SideButton from './SideButton.vue';
-import type { SidebarCategory } from './tipos';
-
-const props = withDefaults(
-	defineProps<{
-		/** El nombre de la ventana. Sin él y sin `subtitle` no hay área de título. */
-		title?: string;
-		subtitle?: string;
-		categories?: SidebarCategory[];
-		/** El identificador del elemento activo. */
-		modelValue?: string;
-		/** Plegada desde afuera. Sin esto, la barra se maneja sola. */
-		collapsed?: boolean;
-		/** Lo que oye un lector de pantalla en el botón de plegar. */
-		collapseLabel?: string;
-		expandLabel?: string;
-	}>(),
-	{
-		title: '',
-		subtitle: '',
-		categories: () => [],
-		modelValue: '',
-		collapsed: undefined,
-		collapseLabel: 'Collapse',
-		expandLabel: 'Expand',
-	}
-);
-
-const emit = defineEmits<{
-	'update:modelValue': [value: string];
-	'update:collapsed': [value: boolean];
-	change: [value: string];
-}>();
-
-const plegadaAMano = ref(props.collapsed ?? false);
-const esAngosta = ref(false);
-let consulta: MediaQueryList | null = null;
-
-/**
- * Plegada por decisión o por ancho.
- *
- * Por debajo de 768 píxeles no hay lugar para el texto de los botones, así que
- * la barra se pliega sola y el botón de plegar no se muestra: ofrecer
- * desplegarla ahí sería ofrecer algo que no entra.
- */
-const plegada = computed(() => esAngosta.value || plegadaAMano.value);
-const hayTitulo = computed(() => Boolean(props.title || props.subtitle));
-const hayCategorias = computed(() => props.categories.length > 0);
-
-function revisar() {
-	esAngosta.value = consulta?.matches ?? false;
-}
-
-function alternar() {
-	plegadaAMano.value = !plegadaAMano.value;
-	emit('update:collapsed', plegadaAMano.value);
-}
-
-function elegir(id: string) {
-	emit('update:modelValue', id);
-	emit('change', id);
-}
-
-// Controlada desde afuera cuando la aplicación pasa `collapsed`: así dos
-// ventanas de la misma aplicación pueden recordar cómo la dejó la persona.
-watch(
-	() => props.collapsed,
-	(valor) => {
-		if (valor !== undefined) {
-			plegadaAMano.value = valor;
-		}
-	}
-);
-
-onMounted(() => {
-	consulta = window.matchMedia('(max-width: 767px)');
-	revisar();
-	consulta.addEventListener('change', revisar);
-});
-
-onBeforeUnmount(() => consulta?.removeEventListener('change', revisar));
-
-defineExpose({ collapsed: plegada });
-</script>
-
-<template>
-  <aside
-    class="relative z-30 flex h-full shrink-0 flex-col rounded-corner border border-ui-border bg-ui-bg/80 transition-all duration-300"
-    :class="['w-[84px]', plegada ? 'md:w-[84px]' : 'md:w-72']">
-    <header
-      v-if="hayTitulo || $slots.header"
-      class="flex flex-col gap-2 border-ui-border border-b p-2">
-      <div class="flex items-center gap-2">
-        <button
-          type="button"
-          class="hidden h-10 w-10 items-center justify-center rounded-corner border border-ui-border bg-ui-surface/70 font-semibold text-sm md:inline-flex"
-          :aria-label="plegada ? expandLabel : collapseLabel"
-          :aria-expanded="!plegada"
-          @click="alternar">
-          {{ plegada ? '&gt;' : '&lt;' }}
-        </button>
-        <!-- El área de título es opcional: hay ventanas donde el nombre ya está
-             en la barra superior y repetirlo acá gasta la mitad del alto. -->
-        <div v-if="hayTitulo && !plegada" class="min-w-0 flex-1">
-          <p v-if="title" class="truncate font-semibold text-sm">{{ title }}</p>
-          <p v-if="subtitle" class="truncate text-tx-muted text-xs">{{ subtitle }}</p>
-        </div>
-      </div>
-
-      <!-- Lo que va antes que cualquier categoría: la búsqueda de la tienda,
-           por ejemplo. Plegada no entra un campo de texto —84 píxeles es el
-           ancho del icono— así que se esconde en vez de quedar ilegible. -->
-      <div v-if="$slots.header && !plegada">
-        <slot name="header" :collapsed="plegada" />
-      </div>
-    </header>
-
-    <!-- Sin área de título el botón de plegar necesita su propio lugar, o la
-         barra deja de poder plegarse. -->
-    <div v-else class="flex justify-center border-ui-border border-b p-2">
-      <button
-        type="button"
-        class="hidden h-10 w-10 items-center justify-center rounded-corner border border-ui-border bg-ui-surface/70 font-semibold text-sm md:inline-flex"
-        :aria-label="plegada ? expandLabel : collapseLabel"
-        :aria-expanded="!plegada"
-        @click="alternar">
-        {{ plegada ? '&gt;' : '&lt;' }}
-      </button>
-    </div>
-
-    <div class="flex-1 space-y-3 overflow-y-auto p-2">
-      <SideGroup
-        v-for="category in categories"
-        :key="category.id"
-        :title="category.title"
-        :collapsed="plegada">
-        <SideButton
-          v-for="item in category.items"
-          :key="item.id"
-          :label="item.label"
-          :icon="item.icon"
-          :badge="item.badge"
-          :disabled="item.disabled"
-          :collapsed="plegada"
-          :active="modelValue === item.id"
-          @click="elegir(item.id)" />
-      </SideGroup>
-
-      <slot :collapsed="plegada" />
-    </div>
-  </aside>
-</template>

package/src/sidebar/SideButton.vue

@@ -1,115 +0,0 @@
-<script lang="ts" setup>
-/**
- * Un elemento de la barra lateral.
- *
- * El icono sale del tema del escritorio y se vuelve a resolver cuando la
- * persona cambia de tema: por eso no se recibe una ruta sino un nombre. Plegado
- * queda sólo el icono, y el nombre pasa al `title` para que el globo lo diga —
- * sin eso, una barra plegada es una columna de dibujos sin explicación.
- */
-import { getIconSource } from '@vasakgroup/plugin-vicons';
-import { listen, type UnlistenFn } from '@tauri-apps/api/event';
-import { onMounted, onUnmounted, ref, toRef, watch } from 'vue';
-
-const props = withDefaults(
-	defineProps<{
-		label: string;
-		icon?: string;
-		active?: boolean;
-		collapsed?: boolean;
-		disabled?: boolean;
-		badge?: string | number;
-	}>(),
-	{ icon: '', active: false, collapsed: false, disabled: false, badge: '' }
-);
-
-defineEmits<{ click: [] }>();
-
-const fuente = ref('');
-const icono = toRef(props, 'icon');
-let soltar: UnlistenFn | null = null;
-let desmontado = false;
-
-/** Cuántas resoluciones se pidieron. De las que estén en vuelo, sólo vale la última. */
-let ultimoPedido = 0;
-
-async function resolver() {
-	const mio = ++ultimoPedido;
-	const nombre = icono.value;
-	if (!nombre) {
-		fuente.value = '';
-		return;
-	}
-	const resuelto = await getIconSource(nombre);
-	// Cambiar de icono y cambiar de tema resuelven en paralelo, y el tema tarda
-	// lo que tarde el backend. Sin el testigo, la respuesta vieja llega última y
-	// deja puesto el icono anterior — que es el mismo síntoma que se venía a
-	// evitar, pero intermitente y según cuál tarde más.
-	if (mio === ultimoPedido) {
-		fuente.value = resuelto;
-	}
-}
-
-onMounted(async () => {
-	// El oyente **antes** de la primera resolución. El tema de iconos cambia en
-	// caliente, y resolver el primero tarda: un cambio de tema durante esa
-	// espera no lo escuchaba nadie, y el botón se quedaba con el icono del tema
-	// anterior hasta el cambio siguiente.
-	const dejarDeEscuchar = await listen('vicons:theme-changed', resolver);
-	// Registrarse tarda, y en una lista que se desplaza un botón puede irse
-	// antes de que termine. Ahí `onUnmounted` ya pasó y no vio nada que soltar:
-	// el oyente quedaba registrado para siempre sobre un componente muerto.
-	if (desmontado) {
-		dejarDeEscuchar();
-		return;
-	}
-	soltar = dejarDeEscuchar;
-
-	// Las dos resoluciones pueden cruzarse —ésta y la que dispare un cambio de
-	// tema—, y de eso se encarga el testigo de `resolver`.
-	await resolver();
-});
-
-onUnmounted(() => {
-	desmontado = true;
-	soltar?.();
-});
-
-watch(icono, resolver);
-</script>
-
-<template>
-  <button
-    type="button"
-    :title="collapsed ? label : undefined"
-    :aria-label="collapsed ? label : undefined"
-    :disabled="disabled"
-    :aria-current="active ? 'page' : undefined"
-    class="group relative flex w-full items-center gap-3 rounded-corner border px-3 py-2 text-left text-sm transition-all duration-200"
-    :class="[
-      active
-        ? 'border-secondary bg-primary/15 text-tx-main shadow-sm'
-        : 'border-transparent bg-ui-bg/30 hover:border-ui-border hover:bg-ui-surface/70',
-      disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer',
-      collapsed ? 'justify-center px-2' : '',
-    ]"
-    @click="$emit('click')">
-    <span
-      class="flex h-8 w-8 shrink-0 items-center justify-center rounded-corner font-semibold text-xs uppercase tracking-wide"
-      :class="active ? 'border-secondary bg-primary/20' : ''"
-      aria-hidden="true">
-      <img v-if="fuente" :src="fuente" alt="" class="h-8 w-8 object-contain">
-      <!-- Sin icono, la inicial: un hueco vacío del mismo tamaño deja la fila
-           desalineada contra las que sí lo tienen. -->
-      <span v-else>{{ label.charAt(0).toUpperCase() }}</span>
-    </span>
-
-    <span v-if="!collapsed" class="min-w-0 flex-1 truncate font-medium">{{ label }}</span>
-
-    <span
-      v-if="!collapsed && badge !== ''"
-      class="rounded-corner bg-ui-surface px-2 py-0.5 font-semibold text-tx-muted text-xs">
-      {{ badge }}
-    </span>
-  </button>
-</template>

package/src/sidebar/SideGroup.vue

@@ -1,46 +0,0 @@
-<script lang="ts" setup>
-/**
- * Un grupo de elementos de la barra, con su título plegable.
- *
- * Plegada la barra, el título del grupo no se muestra —no entra— y el grupo se
- * abre sí o sí: un grupo cerrado sin título visible sería contenido escondido
- * detrás de nada.
- */
-import { ref, watch } from 'vue';
-
-const props = withDefaults(
-	defineProps<{ title: string; collapsed?: boolean; defaultOpen?: boolean }>(),
-	{ collapsed: false, defaultOpen: true }
-);
-
-const abierto = ref(props.defaultOpen);
-
-watch(
-	() => props.collapsed,
-	(plegada) => {
-		if (plegada) {
-			abierto.value = true;
-		}
-	}
-);
-</script>
-
-<template>
-  <section class="flex flex-col gap-2">
-    <button
-      v-if="!collapsed"
-      type="button"
-      class="group flex w-full items-center justify-between rounded-corner px-2 py-1 text-tx-muted text-xs uppercase tracking-[0.08em] hover:bg-ui-surface/60"
-      :aria-expanded="abierto"
-      @click="abierto = !abierto">
-      <span>{{ title }}</span>
-      <span class="text-[10px] transition-transform duration-200" :class="abierto ? 'rotate-180' : ''">
-        v
-      </span>
-    </button>
-
-    <div v-if="abierto || collapsed" class="flex flex-col gap-1">
-      <slot />
-    </div>
-  </section>
-</template>

package/src/sidebar/tipos.ts

@@ -1,16 +0,0 @@
-/** Un elemento de la barra lateral: un lugar al que se va. */
-export interface SidebarItem {
-	id: string;
-	label: string;
-	/** Un nombre del tema de iconos del escritorio, no una ruta. */
-	icon?: string;
-	badge?: string | number;
-	disabled?: boolean;
-}
-
-/** Un grupo de elementos, con su título plegable. */
-export interface SidebarCategory {
-	id: string;
-	title: string;
-	items: SidebarItem[];
-}

package/src/tray/TrayIconButton.vue

@@ -1,80 +0,0 @@
-<template>
-  <div
-    class="p-1 rounded-corner relative hover:bg-primary dark:hover:bg-primary-dark group transition-all duration-300"
-    :class="customClass"
-    :title="tooltip"
-    @click="handleClick"
-    @mouseenter="showTooltip = true"
-    @mouseleave="showTooltip = false"
-  >
-    <img
-      :src="icon"
-      :alt="alt"
-      class="m-auto h-5.5 w-auto transition-all duration-300"
-      :class="iconClass"
-    />
-    
-    <!-- Badge/Counter -->
-    <div
-      v-if="badge !== null && badge > 0"
-      class="absolute bottom-1 right-1 bg-primary dark:bg-primary-dark text-white text-xs rounded-full w-4 h-4 flex items-center justify-center font-bold animate-bounce"
-    >
-      {{ badge }}
-    </div>
-
-    <!-- Tooltip personalizado -->
-    <div 
-      v-if="showCustomTooltip && customTooltipText"
-      class="absolute top-1 left-1/2 transform -translate-x-1/2 text-xs font-semibold p-1 rounded-corner transition-all duration-300 pointer-events-none background"
-      :class="[
-        tooltipClass,
-        {
-          'opacity-0 -translate-y-2': !showTooltip,
-          'opacity-100 translate-y-0': showTooltip
-        }
-      ]"
-    >
-      {{ customTooltipText }}
-    </div>
-
-    <!-- Slot para contenido adicional personalizado -->
-    <slot></slot>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-
-interface Props {
-  icon: string;
-  alt?: string;
-  tooltip?: string;
-  badge?: number | null;
-  iconClass?: string | Record<string, boolean>;
-  customClass?: string | Record<string, boolean>;
-  tooltipClass?: string | Record<string, boolean>;
-  showCustomTooltip?: boolean;
-  customTooltipText?: string;
-}
-
-withDefaults(defineProps<Props>(), {
-  alt: '',
-  tooltip: '',
-  badge: null,
-  iconClass: () => ({}),
-  customClass: '',
-  tooltipClass: '',
-  showCustomTooltip: false,
-  customTooltipText: '',
-});
-
-const emit = defineEmits<{
-  click: [];
-}>();
-
-const showTooltip = ref(false);
-
-const handleClick = () => {
-  emit('click');
-};
-</script>

package/src/types/vue-libvasak.d.ts

@@ -1,191 +0,0 @@
-declare module "@vasakgroup/vue-libvasak" {
-  import { DefineComponent, App } from "vue";
-
-  /* Layout */
-  export interface WindowFrameProps {
-    title?: string;
-    image?: string;
-    class?: string;
-    [key: string]: any;
-  }
-
-  /* Sidebar */
-  export interface SidebarItem {
-    id: string;
-    label: string;
-    /** Un nombre del tema de iconos del escritorio, no una ruta. */
-    icon?: string;
-    badge?: string | number;
-    disabled?: boolean;
-  }
-
-  export interface SidebarCategory {
-    id: string;
-    title: string;
-    items: SidebarItem[];
-  }
-
-  export interface SideBarProps {
-    /** Sin `title` ni `subtitle` no se dibuja el área de título. */
-    title?: string;
-    subtitle?: string;
-    categories?: SidebarCategory[];
-    modelValue?: string;
-    collapsed?: boolean;
-    collapseLabel?: string;
-    expandLabel?: string;
-    class?: string;
-    [key: string]: any;
-  }
-
-  export interface SideButtonProps {
-    label: string;
-    /** Un nombre del tema de iconos, que se vuelve a resolver al cambiar de tema. */
-    icon?: string;
-    active?: boolean;
-    collapsed?: boolean;
-    disabled?: boolean;
-    badge?: string | number;
-    class?: string;
-    [key: string]: any;
-  }
-
-  export interface SideGroupProps {
-    title: string;
-    collapsed?: boolean;
-    defaultOpen?: boolean;
-    [key: string]: any;
-  }
-
-  /* Controls */
-  export interface ActionButtonProps {
-    label: string;
-    disabled?: boolean;
-    variant?: "primary" | "secondary" | "danger";
-    loading?: boolean;
-    customClass?: string | Record<string, boolean>;
-    size?: "sm" | "md" | "lg";
-    fullWidth?: boolean;
-    iconSrc?: string;
-    iconAlt?: string;
-    iconRight?: boolean;
-    type?: "button" | "submit" | "reset";
-    stopPropagation?: boolean;
-    preventDefault?: boolean;
-    [key: string]: any;
-  }
-
-  export interface ToggleControlProps {
-    icon: string;
-    alt?: string;
-    tooltip?: string;
-    isActive?: boolean;
-    isLoading?: boolean;
-    iconClass?: Record<string, boolean>;
-    customClass?: Record<string, boolean>;
-    [key: string]: any;
-  }
-
-  /* Layout/Config */
-  export interface ConfigSectionProps {
-    title: string;
-    icon?: string;
-    customClass?: string | Record<string, boolean>;
-    [key: string]: any;
-  }
-
-  /* Cards */
-  export interface DeviceCardProps {
-    icon: string;
-    title: string;
-    subtitle?: string;
-    metadata?: string;
-    extraInfo?: string[];
-    isConnected?: boolean;
-    showActionButton?: boolean;
-    actionLabel?: string;
-    showStatusIndicator?: boolean;
-    customClass?: string;
-    clickable?: boolean;
-    [key: string]: any;
-  }
-
-  export interface ListCardProps {
-    clickable?: boolean;
-    customClass?: string | Record<string, boolean>;
-    [key: string]: any;
-  }
-
-  /* Forms */
-  export interface FormGroupProps {
-    label: string;
-    htmlFor?: string;
-    customClass?: string | Record<string, boolean>;
-    labelClass?: string | Record<string, boolean>;
-    [key: string]: any;
-  }
-
-  export interface SliderControlProps {
-    icon: string;
-    alt?: string;
-    tooltip?: string;
-    modelValue: number;
-    min?: number;
-    max?: number;
-    showButton?: boolean;
-    iconClass?: string | Record<string, boolean>;
-    getPercentageClass?: (percentage: number) => string;
-    [key: string]: any;
-  }
-
-  export interface SwitchToggleProps {
-    isOn: boolean;
-    disabled?: boolean;
-    size?: "small" | "medium";
-    activeClass?: string;
-    inactiveClass?: string;
-    customClass?: string;
-    [key: string]: any;
-  }
-
-  /* Tray */
-  export interface TrayIconButtonProps {
-    icon: string;
-    alt?: string;
-    tooltip?: string;
-    badge?: number | null;
-    iconClass?: string | Record<string, boolean>;
-    customClass?: string | Record<string, boolean>;
-    tooltipClass?: string | Record<string, boolean>;
-    showCustomTooltip?: boolean;
-    customTooltipText?: string;
-    [key: string]: any;
-  }
-
-  /* Component exports */
-  export const WindowFrame: DefineComponent<WindowFrameProps, any, any, {}, {}, {}, {}, {}, string>;
-  export const SideBar: DefineComponent<SideBarProps, any, any, {}, {}, {}, {}, { 'update:modelValue': (value: string) => void; 'update:collapsed': (value: boolean) => void; change: (value: string) => void }, string>;
-  export const SideButton: DefineComponent<SideButtonProps, any, any, {}, {}, {}, {}, { click: () => void }, string>;
-  export const SideGroup: DefineComponent<SideGroupProps, any, any, {}, {}, {}, {}, {}, string>;
-
-  export const ActionButton: DefineComponent<ActionButtonProps, any, any, {}, {}, {}, {}, { click: () => void }, string>;
-  export const ToggleControl: DefineComponent<ToggleControlProps, any, any, {}, {}, {}, {}, { click: () => void }, string>;
-  export const ConfigSection: DefineComponent<ConfigSectionProps, any, any, {}, {}, {}, {}, {}, string>;
-
-  export const DeviceCard: DefineComponent<DeviceCardProps, any, any, {}, {}, {}, {}, { action: () => void; click: () => void }, string>;
-  export const ListCard: DefineComponent<ListCardProps, any, any, {}, {}, {}, {}, { click: () => void }, string>;
-
-  export const FormGroup: DefineComponent<FormGroupProps, any, any, {}, {}, {}, {}, {}, string>;
-  export const SliderControl: DefineComponent<SliderControlProps, any, any, {}, {}, {}, {}, { 'update:modelValue': (value: number) => void; buttonClick: () => void }, string>;
-  export const SwitchToggle: DefineComponent<SwitchToggleProps, any, any, {}, {}, {}, {}, { toggle: (value: boolean) => void }, string>;
-
-  export const TrayIconButton: DefineComponent<TrayIconButtonProps, any, any, {}, {}, {}, {}, { click: () => void }, string>;
-
-  // Plugin de Vue
-  export interface VueLibVasakPlugin {
-    install(app: App): void;
-  }
-
-  declare const plugin: VueLibVasakPlugin;
-  export default plugin;
-}

package/src/window/TopBar.vue

@@ -1,46 +0,0 @@
-<script lang="ts" setup>
-import { ref, Ref, onMounted } from "vue";
-import { getCurrentWindow } from "@tauri-apps/api/window";
-import { getIconSource } from "@vasakgroup/plugin-vicons";
-
-const bar = ref(null);
-const appWindow = getCurrentWindow();
-const closeIcon: Ref<string> = ref("");
-const minimizeIcon: Ref<string> = ref("");
-const maximizeIcon: Ref<string> = ref("");
-
-const props = defineProps({
-  title: String,
-  image: String,
-});
-
-onMounted(async () => {
-  closeIcon.value = await getIconSource("window-close");
-  minimizeIcon.value = await getIconSource("window-minimize");
-  maximizeIcon.value = await getIconSource("window-maximize");
-});
-</script>
-
-<template>
-  <div
-    data-tauri-drag-region
-    class="flex h-8 px-4 py-1 bg-primary dark:bg-primary-dark rounded-t-corner-window justify-between align-center"
-    ref="bar"
-  >
-    <div data-tauri-drag-region>
-      <img :src="props.image" data-tauri-drag-region class="h-6 w-auto" :alt="props.title" />
-    </div>
-    <div data-tauri-drag-region>{{ props.title }}</div>
-    <div data-tauri-drag-region>
-      <span class="win-button" @click="appWindow.minimize()">
-        <img :src="minimizeIcon" class="h-6 w-6 inline-block" alt="Minimize">
-      </span>
-      <span class="win-button" @click="appWindow.toggleMaximize()">
-        <img :src="maximizeIcon" class="h-6 w-6 inline-block" alt="Maximize">
-      </span>
-      <span class="win-button" @click="appWindow.close()">
-        <img :src="closeIcon" class="h-6 w-6 inline-block" alt="Close">
-      </span>
-    </div>
-  </div>
-</template>