@vasakgroup/vue-libvasak 0.1.0 → 0.2.0

package/src/layout/ConfigSection.vue

@@ -0,0 +1,28 @@
+<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-vsk"
+    :class="customClass"
+  >
+    <h3 class="text-base font-semibold m-0 text-vsk-primary">
+      {{ icon ? `${icon} ${title}` : title }}
+    </h3>
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+/* Ningún estilo adicional requerido */
+</style>

package/src/sidebar/SideButton.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { defineComponent } from "vue";
-
 const props = defineProps({
   title: {
     type: String,
@@ -15,6 +13,6 @@ const props = defineProps({
 
 <template>
   <a href="#" class="sidebar-button">
-    <img :src="image" class="img-fluid" />
+    <img :src="image" :alt="title" class="img-fluid" />
   </a>
 </template>

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

@@ -1,10 +1,155 @@
-declare module '@vasakgroup/vue-libvasak' {
-  import { Plugin } from 'vue';
-  import { Component } from 'vue';
-
-  export const SideBar: Component;
-  export const SideButton: Component;
-  export const WindowFrame: Component;
-  const plugin: Plugin;
+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;
 }