@vasakgroup/vue-libvasak 0.3.0 → 0.3.1

package/src/controls/ActionButton.vue

@@ -1,85 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  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;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  disabled: false,
-  variant: 'primary',
-  loading: false,
-  customClass: () => ({}),
-  size: 'md',
-  fullWidth: false,
-  iconSrc: '',
-  iconAlt: '',
-  iconRight: false,
-  type: 'button',
-  stopPropagation: false,
-  preventDefault: false,
-});
-
-const emit = defineEmits<{
-  click: [];
-}>();
-
-const variantClasses: Record<string, string> = {
-  primary: 'bg-primary dark:bg-primary-dark text-tx-on-primary dark:text-tx-on-primary-dark hover:bg-primary/90 dark:hover:bg-primary-dark/90',
-  secondary: 'bg-secondary dark:bg-secondary-dark text-tx-on-primary dark:text-tx-on-primary-dark hover:bg-secondary/80 dark:hover:bg-secondary-dark/80',
-  danger: 'bg-status-error dark:bg-status-error-dark text-tx-on-primary dark:text-tx-on-primary-dark hover:bg-status-error/90 dark:hover:bg-status-error-dark/90',
-};
-
-const sizeClasses: Record<'sm' | 'md' | 'lg', string> = {
-  sm: 'px-2 py-1 text-xs',
-  md: 'px-3 py-1 text-sm',
-  lg: 'px-4 py-2 text-base',
-};
-
-const handleClick = (event: Event) => {
-  if (props.stopPropagation) event.stopPropagation();
-  if (props.preventDefault) event.preventDefault();
-  if (!props.disabled && !props.loading) {
-    emit('click');
-  }
-};
-</script>
-
-<template>
-  <button
-    :type="props.type"
-    @click="handleClick"
-    class="rounded-corner transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
-    :class="[
-      variantClasses[props.variant],
-      sizeClasses[props.size],
-      props.fullWidth ? 'w-full' : '',
-      props.iconSrc && !props.label ? 'px-2 py-2' : '',
-      customClass,
-    ]"
-    :disabled="props.disabled || props.loading"
-  >
-    <span v-if="loading" class="w-4 h-4 animate-spin rounded-full border-2 border-current border-t-transparent"></span>
-    <template v-if="props.iconSrc && !props.iconRight">
-      <img :src="props.iconSrc" :alt="props.iconAlt || props.label" class="w-4 h-4" />
-    </template>
-    <span v-if="props.label">{{ props.label }}</span>
-    <template v-if="props.iconSrc && props.iconRight">
-      <img :src="props.iconSrc" :alt="props.iconAlt || props.label" class="w-4 h-4" />
-    </template>
-  </button>
-</template>
-
-<style scoped>
-/* Ningún estilo adicional requerido */
-</style>

package/src/controls/ToggleControl.vue

@@ -1,55 +0,0 @@
-<template>
-  <button
-    @click="handleClick"
-    class="p-2 rounded-corner background hover:opacity-50 transition-all duration-300 h-17.5 w-17.5 group relative overflow-hidden hover:scale-105 hover:shadow-lg active:scale-95"
-    :class="{
-      'animate-pulse': isLoading,
-      'ring-2 ring-primary dark:ring-primary-dark': isActive,
-      'opacity-60': !isActive,
-      ...customClass
-    }"
-    :disabled="isLoading"
-  >
-    <img
-      :src="icon"
-      :alt="alt"
-      :title="tooltip"
-      class="m-auto w-12.5 h-12.5 transition-all duration-300 group-hover:scale-110 relative z-10"
-      :class="{
-        'animate-spin': isLoading,
-        'filter brightness-75': !isActive,
-        'drop-shadow-lg': isActive,
-        ...iconClass
-      }"
-    />
-  </button>
-</template>
-
-<script setup lang="ts">
-interface Props {
-  icon: string;
-  alt?: string;
-  tooltip?: string;
-  isActive?: boolean;
-  isLoading?: boolean;
-  iconClass?: Record<string, boolean>;
-  customClass?: Record<string, boolean>;
-}
-
-withDefaults(defineProps<Props>(), {
-  alt: '',
-  tooltip: '',
-  isActive: false,
-  isLoading: false,
-  iconClass: () => ({}),
-  customClass: () => ({}),
-});
-
-const emit = defineEmits<{
-  click: [];
-}>();
-
-const handleClick = () => {
-  emit('click');
-};
-</script>

package/src/forms/FormGroup.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  label: string;
-  htmlFor?: string;
-  customClass?: string | Record<string, boolean>;
-  labelClass?: string | Record<string, boolean>;
-}
-
-withDefaults(defineProps<Props>(), {
-  htmlFor: '',
-  customClass: () => ({}),
-  labelClass: () => ({}),
-});
-</script>
-
-<template>
-  <div class="flex flex-col gap-2" :class="customClass">
-    <label v-if="label" :for="htmlFor" class="text-sm font-medium text-primary dark:text-primary-dark" :class="labelClass">
-      {{ label }}
-    </label>
-    <slot />
-  </div>
-</template>
-
-<style scoped>
-/* Ningún estilo adicional requerido */
-</style>

package/src/forms/SliderControl.vue

@@ -1,100 +0,0 @@
-<template>
-  <div
-    class="background rounded-corner flex flex-row items-center gap-2 justify-between w-full h-auto p-4 transition-all duration-200 hover:bg-ui-surface/80 dark:hover:bg-ui-surface-dark/80"
-  >
-    <button
-      v-if="showButton"
-      @click="handleButtonClick"
-      class="w-8 h-8 flex items-center justify-center rounded-corner transition-all duration-200 hover:bg-ui-surface/80 dark:hover:bg-ui-surface-dark/80 hover:scale-110 active:scale-95"
-    >
-      <img
-        :src="icon"
-        :alt="alt"
-        :title="tooltip"
-        class="w-6 h-6 transition-all duration-200"
-        :class="iconClass"
-      />
-    </button>
-    
-    <div
-      v-else
-      class="w-8 h-8 flex items-center justify-center"
-    >
-      <img
-        :src="icon"
-        :alt="alt"
-        class="w-6 h-6 transition-all duration-200"
-      />
-    </div>
-
-    <input
-      type="range"
-      :min="min"
-      :max="max"
-      :value="modelValue"
-      @input="handleInput"
-      class="flex-1 transition-all duration-200 hover:scale-105"
-    />
-    
-    <span
-      class="w-12 text-right transition-all duration-200 font-medium"
-      :class="percentageClass"
-    >
-      {{ percentage }}%
-    </span>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-interface Props {
-  icon: string;
-  alt?: string;
-  tooltip?: string;
-  modelValue: number;
-  min?: number;
-  max?: number;
-  showButton?: boolean;
-  iconClass?: string | Record<string, boolean>;
-  getPercentageClass?: (percentage: number) => string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  alt: '',
-  tooltip: '',
-  min: 0,
-  max: 100,
-  showButton: false,
-  iconClass: () => ({}),
-  getPercentageClass: () => '',
-});
-
-const emit = defineEmits<{
-  'update:modelValue': [value: number];
-  'buttonClick': [];
-}>();
-
-const percentage = computed(() => {
-  if (props.max <= props.min) return 0;
-  const range = props.max - props.min;
-  const value = props.modelValue - props.min;
-  return Math.round((value / range) * 100);
-});
-
-const percentageClass = computed(() => {
-  if (props.getPercentageClass) {
-    return props.getPercentageClass(percentage.value);
-  }
-  return '';
-});
-
-const handleInput = (event: Event) => {
-  const target = event.target as HTMLInputElement;
-  emit('update:modelValue', Number(target.value));
-};
-
-const handleButtonClick = () => {
-  emit('buttonClick');
-};
-</script>

package/src/forms/SwitchToggle.vue

@@ -1,49 +0,0 @@
-<template>
-  <button
-    type="button"
-    @click="handleClick"
-    :disabled="disabled"
-    :class="[
-      'relative inline-flex items-center rounded-full transition-colors',
-      size === 'small' ? 'h-6 w-11' : 'h-7 w-12',
-      isOn ? activeClass : inactiveClass,
-      disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
-      customClass
-    ]"
-  >
-    <span
-      :class="[
-        'inline-block transform rounded-full bg-white shadow transition-transform',
-        size === 'small' ? 'h-4 w-4' : 'h-6 w-6',
-        isOn ? (size === 'small' ? 'translate-x-6' : 'translate-x-5') : 'translate-x-1'
-      ]"
-    ></span>
-  </button>
-</template>
-
-<script setup lang="ts">
-interface Props {
-  isOn: boolean;
-  disabled?: boolean;
-  size?: 'small' | 'medium';
-  activeClass?: string;
-  inactiveClass?: string;
-  customClass?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  disabled: false,
-  size: 'small',
-  activeClass: 'bg-primary dark:bg-primary-dark',
-  inactiveClass: 'background',
-  customClass: '',
-});
-
-const emit = defineEmits<{
-  toggle: [value: boolean];
-}>();
-
-const handleClick = () => {
-  emit('toggle', !props.isOn);
-};
-</script>

package/src/layout/ConfigSection.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  title: string;
-  icon?: string;
-  customClass?: string | Record<string, boolean>;
-}
-
-withDefaults(defineProps<Props>(), {
-  icon: '',
-  customClass: () => ({}),
-});
-</script>
-
-<template>
-  <div
-    class="flex flex-col gap-4 p-4 background rounded-corner"
-    :class="customClass"
-  >
-    <h3 class="text-base font-semibold m-0 text-primary dark:text-primary-dark">
-      {{ icon ? `${icon} ${title}` : title }}
-    </h3>
-    <slot />
-  </div>
-</template>
-
-<style scoped>
-/* Ningún estilo adicional requerido */
-</style>

package/src/shims-vue.d.ts

@@ -1,15 +0,0 @@
-/**
- * Que TypeScript entienda los `.vue`.
- *
- * Acá había un `declare module '*'`, que no es un shim: es apagar el chequeo de
- * **todos** los imports del proyecto y dejarlos en `any`. Con eso, los tipos que
- * esta librería publica no los comprobaba nadie —ni siquiera contra sus propios
- * componentes—, que para un paquete cuya razón de ser es que otras seis
- * aplicaciones lo usen es justo lo que no puede pasar.
- */
-declare module '*.vue' {
-	import type { DefineComponent } from 'vue';
-
-	const componente: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-	export default componente;
-}

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>