@vasakgroup/vue-libvasak 0.1.0 → 0.2.1

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@vasakgroup/vue-libvasak",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Vue componenets for VSK Applications",
   "main": "./dist/vue-libvasak.umd.js",
   "module": "./dist/vue-libvasak.es.js",
-  "types": "./dist/index.d.ts",
+  "types": "src/types/vue-libvasak.d.ts",
   "files": [
     "dist",
     "src"
@@ -42,18 +42,18 @@
   },
   "license": "GPLv3",
   "dependencies": {
-    "@tauri-apps/api": "^2.8.0",
+    "@tauri-apps/api": "^2.10.1",
     "@vasakgroup/plugin-vicons": "^2.0.0",
-    "vue": "^3.5.20",
-    "vue-router": "^4.5.1"
+    "vue": "^3.5.28",
+    "vue-router": "^5.0.3"
   },
   "peerDependencies": {
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "typescript": "^5.9.2",
-    "vite": "^7.1.3",
-    "@vitejs/plugin-vue": "^6.0.1"
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "@vitejs/plugin-vue": "^6.0.4"
   },
   "scripts": {
     "build": "vite build",

package/src/cards/DeviceCard.vue

@@ -0,0 +1,82 @@
+<template>
+  <div
+    class="flex items-center justify-between background rounded-vsk px-6 py-3 mb-4"
+    :class="[{ 'border-l-4 border-green-500': isConnected }, customClass]"
+    @click="handleClick"
+  >
+    <div class="flex items-center gap-3 flex-1 min-w-0">
+      <img :src="icon" :alt="title" class="h-7 w-7 shrink-0" />
+      <div class="min-w-0">
+        <div class="font-semibold truncate">
+          {{ title }}
+        </div>
+        <div v-if="subtitle" class="text-xs text-gray-400 truncate">
+          {{ subtitle }}
+        </div>
+        <div v-if="metadata" class="text-xs text-gray-400 truncate">
+          {{ metadata }}
+        </div>
+        <div v-if="extraInfo && extraInfo.length > 0" class="text-xs text-gray-400 flex gap-2 mt-1">
+          <span v-for="(info, index) in extraInfo" :key="index">
+            {{ info }}
+          </span>
+        </div>
+      </div>
+    </div>
+    
+    <button
+      v-if="showActionButton"
+      class="bg-vsk-primary rounded-vsk px-4 py-2 text-sm font-semibold cursor-pointer hover:opacity-70"
+      @click.stop="handleAction"
+    >
+      {{ actionLabel }}
+    </button>
+
+    <!-- Status indicator for connected state -->
+    <div
+      v-if="showStatusIndicator && isConnected"
+      class="w-2 h-2 rounded-full bg-green-500"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  icon: string;
+  title: string;
+  subtitle?: string;
+  metadata?: string;
+  extraInfo?: string[];
+  isConnected?: boolean;
+  showActionButton?: boolean;
+  actionLabel?: string;
+  showStatusIndicator?: boolean;
+  customClass?: string;
+  clickable?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  subtitle: '',
+  metadata: '',
+  extraInfo: () => [],
+  isConnected: false,
+  showActionButton: true,
+  actionLabel: 'Conectar',
+  showStatusIndicator: false,
+  customClass: '',
+  clickable: false,
+});
+
+const emit = defineEmits<{
+  action: [];
+  click: [];
+}>();
+
+const handleAction = () => {
+  emit('action');
+};
+
+const handleClick = () => {
+  emit('click');
+};
+</script>

package/src/cards/ListCard.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+interface Props {
+  clickable?: boolean;
+  customClass?: string | Record<string, boolean>;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  clickable: false,
+  customClass: () => ({}),
+});
+
+const emit = defineEmits<{
+  click: [];
+}>();
+
+const handleClick = () => {
+  if (props.clickable) {
+    emit('click');
+  }
+};
+</script>
+
+<template>
+  <div
+    :class="[
+      'flex items-center justify-between background p-3 rounded-vsk border border-vsk-primary/70 transition-colors duration-200',
+      {
+        'hover:bg-vsk-primary/5 cursor-pointer': props.clickable,
+      },
+      customClass,
+    ]"
+    @click="handleClick"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+/* Ningún estilo adicional requerido */
+</style>

package/src/controls/ActionButton.vue

@@ -0,0 +1,85 @@
+<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

@@ -0,0 +1,55 @@
+<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

@@ -0,0 +1,27 @@
+<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

@@ -0,0 +1,100 @@
+<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

@@ -0,0 +1,49 @@
+<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/index.ts

@@ -1,9 +1,31 @@
 import SideBar from "./sidebar/SideBar.vue";
 import SideButton from "./sidebar/SideButton.vue";
 import WindowFrame from "./window/WindowFrame.vue";
+import ActionButton from "./controls/ActionButton.vue";
+import ConfigSection from "./layout/ConfigSection.vue";
+import DeviceCard from "./cards/DeviceCard.vue";
+import FormGroup from "./forms/FormGroup.vue";
+import ListCard from "./cards/ListCard.vue";
+import SliderControl from "./forms/SliderControl.vue";
+import SwitchToggle from "./forms/SwitchToggle.vue";
+import ToggleControl from "./controls/ToggleControl.vue";
+import TrayIconButton from "./tray/TrayIconButton.vue";
 import type { App } from "vue";
 
-const components = [SideBar, SideButton, WindowFrame];
+const components = [
+  SideBar,
+  SideButton,
+  WindowFrame,
+  ActionButton,
+  ConfigSection,
+  DeviceCard,
+  FormGroup,
+  ListCard,
+  SliderControl,
+  SwitchToggle,
+  ToggleControl,
+  TrayIconButton,
+];
 
 export default {
   install(app: App) {
@@ -13,4 +35,17 @@ export default {
   },
 };
 
-export { SideBar, SideButton, WindowFrame };
+export {
+  SideBar,
+  SideButton,
+  WindowFrame,
+  ActionButton,
+  ConfigSection,
+  DeviceCard,
+  FormGroup,
+  ListCard,
+  SliderControl,
+  SwitchToggle,
+  ToggleControl,
+  TrayIconButton,
+};

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-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/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-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>