@vasakgroup/vue-libvasak 0.3.0 → 0.3.1

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>

package/src/window/WindowFrame.vue

@@ -1,21 +0,0 @@
-<script lang="ts" setup>
-/**
- * El marco de una ventana: la barra superior y lo que va debajo.
- *
- * `defineProps` es una macro del compilador de componentes, no una función que
- * se importe. Importarla desde `vue` choca con la que el compilador declara, y
- * el typecheck lo decía —sólo que no había ninguno: un `declare module \'*\'`
- * dejaba todos los imports en `any` y este archivo nunca se comprobó.
- */
-import TopBar from './TopBar.vue';
-
-const props = withDefaults(defineProps<{ title?: string; image?: string }>(), {
-	title: 'Vasak',
-	image: '',
-});
-</script>
-
-<template>
-  <TopBar :title="props.title" :image="props.image" />
-  <slot />
-</template>