@vasakgroup/vue-libvasak 0.0.3 → 0.2.0

package/src/tray/TrayIconButton.vue

@@ -0,0 +1,80 @@
+<template>
+  <div
+    class="p-1 rounded-vsk relative hover:bg-vsk-primary/30 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-vsk-primary 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-vsk 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

@@ -0,0 +1,155 @@
+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 SideBarProps {
+    class?: string;
+    [key: string]: any;
+  }
+
+  export interface SideButtonProps {
+    title?: string;
+    image?: string;
+    class?: string;
+    [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, {}, {}, {}, {}, {}, string>;
+  export const SideButton: DefineComponent<SideButtonProps, 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,59 +1,46 @@
 <script lang="ts" setup>
-import { defineProps, inject, onMounted, ref, computed } from "vue";
+import { defineProps, ref, Ref, onMounted } from "vue";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import { getIconSource } from "@vasakgroup/plugin-vicons";
 
-const $vsk: any = inject("vsk");
 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,
-  customColor: String,
 });
 
-const move = () => {
-  $vsk.startMove();
-};
-
-const close = () => {
-  $vsk.exit();
-};
-
-const minimize = () => {
-  $vsk.minimize();
-};
-
-const toggleMaximize = () => {
-  $vsk.toggleMaximize();
-};
-
-const isCustom = computed(() => {
-  console.log('customColor', props.customColor);
-  return props.customColor ? `custom`: '';
-});
-
-onMounted(() => {
-  if (bar.value) {
-    (bar.value as HTMLElement).addEventListener("mousedown", (e: any) => {
-      move();
-    });
-  }
+onMounted(async () => {
+  closeIcon.value = await getIconSource("window-close");
+  minimizeIcon.value = await getIconSource("window-minimize");
+  maximizeIcon.value = await getIconSource("window-maximize");
 });
 </script>
 
 <template>
-  <div class="window-topbar" :class="isCustom" ref="bar" @click="move()">
-    <div><img :src="image" class="img-fluid win-icon" /></div>
-    <div>{{ title }}</div>
-    <div>
-      <a class="win-button" href="#" @click="minimize()">_</a>
-      <a class="win-button" href="#" @click="toggleMaximize()">[]</a>
-      <a class="win-button" href="#" @click="close()">X</a>
+  <div
+    data-tauri-drag-region
+    class="flex h-8 px-4 py-1 bg-vsk-primary rounded-t-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" />
+    </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>
-
-<style scoped>
-.custom{
-  background-color: v-bind(props.customColor);
-}
-</style>

package/src/window/WindowFrame.vue

@@ -1,17 +1,6 @@
 <script lang="ts" setup>
 import TopBar from "./TopBar.vue";
-import { defineProps, ref, inject, onMounted, computed } from 'vue';
-
-const $vsk: any = inject("vsk");
-
-const top = ref(null);
-const left = ref(null);
-const right = ref(null);
-const bottom = ref(null);
-const topleft = ref(null);
-const bottomleft = ref(null);
-const topright = ref(null);
-const bottomright = ref(null);
+import { defineProps } from "vue";
 
 const props = defineProps({
   title: {
@@ -22,71 +11,10 @@ const props = defineProps({
     type: String,
     default: "",
   },
-  customColor: {
-    type: String,
-    default: null,
-  }
-});
-
-const resize = (dir: string) => {
-  $vsk.startResize(dir);
-};
-
-onMounted(() => {
-  if (top.value) {
-    (top.value as HTMLElement).addEventListener("mousedown", (e: any) => {
-      resize("top");
-    });
-  }
-  if (bottom.value) {
-    (bottom.value as HTMLElement).addEventListener("mousedown", (e: any) => {
-      resize("bottom");
-    });
-  }
-  if (left.value) {
-    (left.value as HTMLElement).addEventListener("mousedown", (e: any) => {
-      resize("left");
-    });
-  }
-  if (right.value) {
-    (right.value as HTMLElement).addEventListener("mousedown", (e: any) => {
-      resize("right");
-    });
-  }
-  if (topleft.value) {
-    (topleft.value as HTMLElement).addEventListener("mousedown", (e: any) => {
-      resize("topleft");
-    });
-  }
-  if (bottomleft.value) {
-    (bottomleft.value as HTMLElement).addEventListener("mousedown", (e: any) => {
-      resize("bottomleft");
-    });
-  }
-  if (topright.value) {
-    (topright.value as HTMLElement).addEventListener("mousedown", (e: any) => {
-      resize("topright");
-    });
-  }
-  if (bottomright.value) {
-    (bottomright.value as HTMLElement).addEventListener("mousedown", (e: any) => {
-      resize("bottomright");
-    });
-  }
 });
 </script>
 
 <template>
-  <TopBar :title :image :customColor />
-  <div class="window">
-    <slot />
-    <div ref="top" class="win-edge win-edge-top"></div>
-    <div ref="left" class="win-edge win-edge-left"></div>
-    <div ref="right" class="win-edge win-edge-right"></div>
-    <div ref="bottom" class="win-edge win-edge-bottom"></div>
-    <div ref="topleft" class="win-edge win-edge-topleft"></div>
-    <div ref="bottomleft" class="win-edge win-edge-bottomleft"></div>
-    <div ref="topright" class="win-edge win-edge-topright"></div>
-    <div ref="bottomright" class="win-edge win-edge-bottomright"></div>
-  </div>
+  <TopBar :title="props.title" :image="props.image" />
+  <slot />
 </template>