@vasakgroup/vue-libvasak 0.2.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vasakgroup/vue-libvasak",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Vue componenets for VSK Applications",
   "main": "./dist/vue-libvasak.umd.js",
   "module": "./dist/vue-libvasak.es.js",
@@ -42,10 +42,10 @@
   },
   "license": "GPLv3",
   "dependencies": {
-    "@tauri-apps/api": "^2.9.1",
+    "@tauri-apps/api": "^2.10.1",
     "@vasakgroup/plugin-vicons": "^2.0.0",
-    "vue": "^3.5.27",
-    "vue-router": "^4.6.4"
+    "vue": "^3.5.28",
+    "vue-router": "^5.0.3"
   },
   "peerDependencies": {
     "vue": "^3.0.0"
@@ -53,7 +53,7 @@
   "devDependencies": {
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
-    "@vitejs/plugin-vue": "^6.0.3"
+    "@vitejs/plugin-vue": "^6.0.4"
   },
   "scripts": {
     "build": "vite build",

package/src/controls/ActionButton.vue

@@ -35,9 +35,9 @@ const emit = defineEmits<{
 }>();
 
 const variantClasses: Record<string, string> = {
-  primary: 'bg-vsk-primary text-white hover:bg-vsk-primary/90',
-  secondary: 'bg-vsk-border text-vsk-text hover:bg-vsk-border/80',
-  danger: 'bg-red-600 text-white hover:bg-red-700',
+  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> = {
@@ -59,7 +59,7 @@ const handleClick = (event: Event) => {
   <button
     :type="props.type"
     @click="handleClick"
-    class="rounded-vsk transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+    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],

package/src/controls/ToggleControl.vue

@@ -1,10 +1,10 @@
 <template>
   <button
     @click="handleClick"
-    class="p-2 rounded-vsk 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="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-vsk-primary/50': isActive,
+      'ring-2 ring-primary dark:ring-primary-dark': isActive,
       'opacity-60': !isActive,
       ...customClass
     }"

package/src/forms/FormGroup.vue

@@ -15,7 +15,7 @@ withDefaults(defineProps<Props>(), {
 
 <template>
   <div class="flex flex-col gap-2" :class="customClass">
-    <label v-if="label" :for="htmlFor" class="text-sm font-medium text-vsk-primary" :class="labelClass">
+    <label v-if="label" :for="htmlFor" class="text-sm font-medium text-primary dark:text-primary-dark" :class="labelClass">
       {{ label }}
     </label>
     <slot />

package/src/forms/SliderControl.vue

@@ -1,11 +1,11 @@
 <template>
   <div
-    class="background rounded-vsk flex flex-row items-center gap-2 justify-between w-full h-auto p-4 transition-all duration-200 hover:bg-white/60 dark:hover:bg-black/60"
+    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-vsk transition-all duration-200 hover:bg-white/30 dark:hover:bg-black/30 hover:scale-110 active:scale-95"
+      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"

package/src/forms/SwitchToggle.vue

@@ -34,7 +34,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   size: 'small',
-  activeClass: 'bg-vsk-primary',
+  activeClass: 'bg-primary dark:bg-primary-dark',
   inactiveClass: 'background',
   customClass: '',
 });

package/src/layout/ConfigSection.vue

@@ -13,10 +13,10 @@ withDefaults(defineProps<Props>(), {
 
 <template>
   <div
-    class="flex flex-col gap-4 p-4 background rounded-vsk"
+    class="flex flex-col gap-4 p-4 background rounded-corner"
     :class="customClass"
   >
-    <h3 class="text-base font-semibold m-0 text-vsk-primary">
+    <h3 class="text-base font-semibold m-0 text-primary dark:text-primary-dark">
       {{ icon ? `${icon} ${title}` : title }}
     </h3>
     <slot />

package/src/tray/TrayIconButton.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="p-1 rounded-vsk relative hover:bg-vsk-primary/30 group transition-all duration-300"
+    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"
@@ -17,7 +17,7 @@
     <!-- 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"
+      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>
@@ -25,7 +25,7 @@
     <!-- 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="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,
         {

package/src/window/TopBar.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { defineProps, ref, Ref, onMounted } from "vue";
+import { ref, Ref, onMounted } from "vue";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import { getIconSource } from "@vasakgroup/plugin-vicons";
 
@@ -24,11 +24,11 @@ onMounted(async () => {
 <template>
   <div
     data-tauri-drag-region
-    class="flex h-8 px-4 py-1 bg-vsk-primary rounded-t-window justify-between align-center"
+    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" />
+      <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>