@vasakgroup/vue-libvasak 0.3.1 → 0.3.3

package/dist/types/controls/ActionButton.vue.d.ts

@@ -19,8 +19,8 @@ declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {},
     onClick?: (() => any) | undefined;
 }>, {
     type: "button" | "submit" | "reset";
-    disabled: boolean;
     size: "sm" | "md" | "lg";
+    disabled: boolean;
     variant: "primary" | "secondary" | "danger";
     loading: boolean;
     customClass: string | Record<string, boolean>;

package/dist/types/forms/SelectField.vue.d.ts

@@ -0,0 +1,24 @@
+type __VLS_Props = {
+    label?: string;
+};
+type __VLS_ModelProps = {
+    modelValue: string | number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/forms/SwitchToggle.vue.d.ts

@@ -11,8 +11,8 @@ declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onToggle?: ((value: boolean) => any) | undefined;
 }>, {
-    disabled: boolean;
     size: "small" | "medium";
+    disabled: boolean;
     customClass: string;
     activeClass: string;
     inactiveClass: string;

package/dist/types/icons/ThemeIcon.vue.d.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    name: string;
+    type?: 'icon' | 'symbol';
+    size?: number;
+    alt?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    type: "icon" | "symbol";
+    size: number;
+    alt: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/index.d.ts

@@ -1,6 +1,8 @@
 import SideBar from "./sidebar/SideBar.vue";
 import SideButton from "./sidebar/SideButton.vue";
 import SideGroup from "./sidebar/SideGroup.vue";
+import SelectField from "./forms/SelectField.vue";
+import ThemeIcon from "./icons/ThemeIcon.vue";
 import WindowFrame from "./window/WindowFrame.vue";
 import ActionButton from "./controls/ActionButton.vue";
 import ConfigSection from "./layout/ConfigSection.vue";
@@ -16,5 +18,5 @@ declare const _default: {
     install(app: App): void;
 };
 export default _default;
-export { SideBar, SideButton, SideGroup, WindowFrame, ActionButton, ConfigSection, DeviceCard, FormGroup, ListCard, SliderControl, SwitchToggle, ToggleControl, TrayIconButton, };
+export { SideBar, SideButton, SideGroup, SelectField, ThemeIcon, WindowFrame, ActionButton, ConfigSection, DeviceCard, FormGroup, ListCard, SliderControl, SwitchToggle, ToggleControl, TrayIconButton, };
 export type { SidebarCategory, SidebarItem } from "./sidebar/tipos";

package/dist/types/internos/iconoDelTema.d.ts

@@ -0,0 +1,14 @@
+import { type Ref } from 'vue';
+/**
+ * Resolver un icono del tema del escritorio, y seguirlo cuando cambia.
+ *
+ * El pack de iconos cambia en caliente: sin escuchar el aviso, la ventana se
+ * queda con los del tema anterior hasta reabrirla. Y las resoluciones se
+ * cruzan —cambiar de icono y cambiar de tema resuelven en paralelo—, así que
+ * cada pedido lleva un testigo y sólo se aplica el último: sin él, la respuesta
+ * vieja llega última y deja puesto el icono de antes.
+ *
+ * Interno a propósito: lo comparten `ThemeIcon` y `SideButton`, y lo que las
+ * aplicaciones usan es el componente, no esto.
+ */
+export declare function useIconoDelTema(nombre: Ref<string>, tipo: Ref<'icon' | 'symbol'>): Ref<string, string>;

package/dist/types/sidebar/SideBar.vue.d.ts

@@ -12,15 +12,15 @@ type __VLS_Props = {
     collapseLabel?: string;
     expandLabel?: string;
 };
-declare var __VLS_1: {
+declare var __VLS_6: {
     collapsed: false;
-}, __VLS_16: {
+}, __VLS_26: {
     collapsed: boolean;
 };
 type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_1) => any;
+    header?: (props: typeof __VLS_6) => any;
 } & {
-    default?: (props: typeof __VLS_16) => any;
+    default?: (props: typeof __VLS_26) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     collapsed: import("vue").ComputedRef<boolean>;

package/dist/types/sidebar/SideButton.vue.d.ts

@@ -11,8 +11,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClick?: (() => any) | undefined;
 }>, {
-    collapsed: boolean;
     icon: string;
+    collapsed: boolean;
     active: boolean;
     disabled: boolean;
     badge: string | number;

package/dist/types/tray/TrayIconButton.vue.d.ts

@@ -18,8 +18,8 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onClick?: (() => any) | undefined;
 }>, {
-    badge: number | null;
     alt: string;
+    badge: number | null;
     customClass: string | Record<string, boolean>;
     tooltip: string;
     iconClass: string | Record<string, boolean>;

package/dist/vue-libvasak.es.js

@@ -1,11 +1,56 @@
-import { defineComponent as h, ref as x, watch as L, createElementBlock as l, openBlock as a, createCommentVNode as u, createElementVNode as i, toDisplayString as m, normalizeClass as b, renderSlot as y, toRef as D, onMounted as T, onUnmounted as E, computed as w, onBeforeUnmount as O, Fragment as $, renderList as I, createBlock as A, withCtx as P, unref as z, createVNode as W, withModifiers as G } from "vue";
-import { getIconSource as C } from "@vasakgroup/plugin-vicons";
-import { listen as N } from "@tauri-apps/api/event";
-import { getCurrentWindow as R } from "@tauri-apps/api/window";
-const U = { class: "flex flex-col gap-2" }, q = ["aria-expanded"], H = {
+import { ref as y, onMounted as V, onUnmounted as W, watch as j, defineComponent as g, toRef as D, computed as k, createElementBlock as l, unref as w, openBlock as a, normalizeStyle as F, createCommentVNode as m, createElementVNode as r, toDisplayString as b, normalizeClass as f, renderSlot as x, createBlock as A, onBeforeUnmount as R, createVNode as B, Fragment as S, renderList as L, withCtx as G, mergeModels as U, useAttrs as q, useId as H, useModel as J, withDirectives as K, mergeProps as Q, isRef as X, vModelSelect as Y, withModifiers as Z } from "vue";
+import { listen as _ } from "@tauri-apps/api/event";
+import { getSymbolSource as ee, getIconSource as $ } from "@vasakgroup/plugin-vicons";
+import { getCurrentWindow as te } from "@tauri-apps/api/window";
+function ae(e, s) {
+  const t = y("");
+  let n = null, i = !1, c = 0;
+  async function u() {
+    const d = ++c, o = e.value;
+    if (!o) {
+      t.value = "";
+      return;
+    }
+    const h = s.value === "symbol" ? await ee(o) : await $(o);
+    d === c && (t.value = h);
+  }
+  return V(async () => {
+    const d = await _("vicons:theme-changed", u);
+    if (i) {
+      d();
+      return;
+    }
+    n = d, await u();
+  }), W(() => {
+    i = !0, n?.();
+  }), j(e, u), t;
+}
+const le = ["src", "alt"], C = /* @__PURE__ */ g({
+  __name: "ThemeIcon",
+  props: {
+    name: {},
+    type: { default: "icon" },
+    size: { default: 18 },
+    alt: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = ae(D(s, "name"), D(s, "type")), n = k(() => `${s.size}px`);
+    return (i, c) => w(t) ? (a(), l("img", {
+      key: 0,
+      src: w(t),
+      alt: e.alt,
+      style: F({ width: n.value, height: n.value }),
+      class: "shrink-0 object-contain"
+    }, null, 12, le)) : (a(), l("span", {
+      key: 1,
+      style: F({ width: n.value, height: n.value }),
+      class: "shrink-0"
+    }, null, 4));
+  }
+}), ne = { class: "flex flex-col gap-2" }, se = ["aria-expanded"], oe = {
   key: 1,
   class: "flex flex-col gap-1"
-}, V = /* @__PURE__ */ h({
+}, O = /* @__PURE__ */ g({
   __name: "SideGroup",
   props: {
     title: {},
@@ -13,37 +58,37 @@ const U = { class: "flex flex-col gap-2" }, q = ["aria-expanded"], H = {
     defaultOpen: { type: Boolean, default: !0 }
   },
   setup(e) {
-    const s = e, t = x(s.defaultOpen);
-    return L(
+    const s = e, t = y(s.defaultOpen);
+    return j(
       () => s.collapsed,
       (n) => {
         n && (t.value = !0);
       }
-    ), (n, r) => (a(), l("section", U, [
-      e.collapsed ? u("", !0) : (a(), l("button", {
+    ), (n, i) => (a(), l("section", ne, [
+      e.collapsed ? m("", !0) : (a(), l("button", {
         key: 0,
         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": t.value,
-        onClick: r[0] || (r[0] = (c) => t.value = !t.value)
+        onClick: i[0] || (i[0] = (c) => t.value = !t.value)
       }, [
-        i("span", null, m(e.title), 1),
-        i("span", {
-          class: b(["text-[10px] transition-transform duration-200", t.value ? "rotate-180" : ""])
+        r("span", null, b(e.title), 1),
+        r("span", {
+          class: f(["text-[10px] transition-transform duration-200", t.value ? "rotate-180" : ""])
         }, " v ", 2)
-      ], 8, q)),
-      t.value || e.collapsed ? (a(), l("div", H, [
-        y(n.$slots, "default")
-      ])) : u("", !0)
+      ], 8, se)),
+      t.value || e.collapsed ? (a(), l("div", oe, [
+        x(n.$slots, "default")
+      ])) : m("", !0)
     ]));
   }
-}), J = ["title", "aria-label", "disabled", "aria-current"], K = ["src"], Q = { key: 1 }, X = {
+}), ie = ["title", "aria-label", "disabled", "aria-current"], re = { key: 1 }, ce = {
   key: 0,
   class: "min-w-0 flex-1 truncate font-medium"
-}, Y = {
+}, de = {
   key: 1,
   class: "rounded-corner bg-ui-surface px-2 py-0.5 font-semibold text-tx-muted text-xs"
-}, M = /* @__PURE__ */ h({
+}, P = /* @__PURE__ */ g({
   __name: "SideButton",
   props: {
     label: {},
@@ -55,70 +100,49 @@ const U = { class: "flex flex-col gap-2" }, q = ["aria-expanded"], H = {
   },
   emits: ["click"],
   setup(e) {
-    const s = e, t = x(""), n = D(s, "icon");
-    let r = null, c = !1, d = 0;
-    async function f() {
-      const o = ++d, g = n.value;
-      if (!g) {
-        t.value = "";
-        return;
-      }
-      const p = await C(g);
-      o === d && (t.value = p);
-    }
-    return T(async () => {
-      const o = await N("vicons:theme-changed", f);
-      if (c) {
-        o();
-        return;
-      }
-      r = o, await f();
-    }), E(() => {
-      c = !0, r?.();
-    }), L(n, f), (o, g) => (a(), l("button", {
+    return (s, t) => (a(), l("button", {
       type: "button",
       title: e.collapsed ? e.label : void 0,
       "aria-label": e.collapsed ? e.label : void 0,
       disabled: e.disabled,
       "aria-current": e.active ? "page" : void 0,
-      class: b(["group relative flex w-full items-center gap-3 rounded-corner border px-3 py-2 text-left text-sm transition-all duration-200", [
-        e.active ? "border-secondary bg-primary/15 text-tx-main shadow-sm" : "border-transparent bg-ui-bg/30 hover:border-ui-border hover:bg-ui-surface/70",
+      class: f(["group relative flex w-full items-center gap-3 rounded-corner border px-3 py-2 text-left text-sm transition-all duration-200", [
+        e.active ? "border-secondary bg-primary/15 text-tx-main shadow-sm" : "border-transparent bg-transparent hover:border-ui-border hover:bg-ui-surface/70",
         e.disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer",
         e.collapsed ? "justify-center px-2" : ""
       ]]),
-      onClick: g[0] || (g[0] = (p) => o.$emit("click"))
+      onClick: t[0] || (t[0] = (n) => s.$emit("click"))
     }, [
-      i("span", {
-        class: b(["flex h-8 w-8 shrink-0 items-center justify-center rounded-corner font-semibold text-xs uppercase tracking-wide", e.active ? "border-secondary bg-primary/20" : ""]),
+      r("span", {
+        class: f(["flex h-8 w-8 shrink-0 items-center justify-center rounded-corner font-semibold text-xs uppercase tracking-wide", e.active ? "border-secondary bg-primary/20" : ""]),
         "aria-hidden": "true"
       }, [
-        t.value ? (a(), l("img", {
+        e.icon ? (a(), A(C, {
           key: 0,
-          src: t.value,
-          alt: "",
-          class: "h-8 w-8 object-contain"
-        }, null, 8, K)) : (a(), l("span", Q, m(e.label.charAt(0).toUpperCase()), 1))
+          name: e.icon,
+          size: 20
+        }, null, 8, ["name"])) : (a(), l("span", re, b(e.label.charAt(0).toUpperCase()), 1))
       ], 2),
-      e.collapsed ? u("", !0) : (a(), l("span", X, m(e.label), 1)),
-      !e.collapsed && e.badge !== "" ? (a(), l("span", Y, m(e.badge), 1)) : u("", !0)
-    ], 10, J));
+      e.collapsed ? m("", !0) : (a(), l("span", ce, b(e.label), 1)),
+      !e.collapsed && e.badge !== "" ? (a(), l("span", de, b(e.badge), 1)) : m("", !0)
+    ], 10, ie));
   }
-}), Z = {
+}), ue = {
   key: 0,
   class: "flex flex-col gap-2 border-ui-border border-b p-2"
-}, _ = { class: "flex items-center gap-2" }, ee = ["aria-label", "aria-expanded"], te = {
+}, me = { class: "flex items-center gap-2" }, fe = ["aria-label", "aria-expanded"], be = {
   key: 0,
   class: "min-w-0 flex-1"
-}, ae = {
+}, ge = {
   key: 0,
   class: "truncate font-semibold text-sm"
-}, le = {
+}, he = {
   key: 1,
   class: "truncate text-tx-muted text-xs"
-}, ne = { key: 0 }, oe = {
+}, ve = { key: 0 }, ye = {
   key: 1,
-  class: "flex justify-center border-ui-border border-b p-2"
-}, se = ["aria-label", "aria-expanded"], ie = { class: "flex-1 space-y-3 overflow-y-auto p-2" }, re = /* @__PURE__ */ h({
+  class: "flex border-ui-border border-b p-2"
+}, xe = ["aria-label", "aria-expanded"], pe = { class: "flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-2" }, E = "hidden h-8 w-8 shrink-0 items-center justify-center rounded-corner border border-ui-border bg-ui-surface/70 transition-colors hover:bg-ui-surface md:inline-flex", ke = /* @__PURE__ */ g({
   __name: "SideBar",
   props: {
     title: { default: "" },
@@ -131,139 +155,194 @@ const U = { class: "flex flex-col gap-2" }, q = ["aria-expanded"], H = {
   },
   emits: ["update:modelValue", "update:collapsed", "change"],
   setup(e, { expose: s, emit: t }) {
-    const n = e, r = t, c = x(n.collapsed ?? !1), d = x(!1);
-    let f = null;
-    const o = w(() => d.value || c.value), g = w(() => !!(n.title || n.subtitle));
-    w(() => n.categories.length > 0);
-    function p() {
-      d.value = f?.matches ?? !1;
+    const n = e, i = t, c = y(n.collapsed ?? !1), u = y(!1);
+    let d = null;
+    const o = k(() => u.value || c.value), h = k(() => !!(n.title || n.subtitle));
+    k(() => n.categories.length > 0);
+    function I() {
+      u.value = d?.matches ?? !1;
     }
-    function j() {
-      c.value = !c.value, r("update:collapsed", c.value);
+    function M() {
+      c.value = !c.value, i("update:collapsed", c.value);
     }
-    function F(v) {
-      r("update:modelValue", v), r("change", v);
+    function N(v) {
+      i("update:modelValue", v), i("change", v);
     }
-    return L(
+    return j(
       () => n.collapsed,
       (v) => {
         v !== void 0 && (c.value = v);
       }
-    ), T(() => {
-      f = window.matchMedia("(max-width: 767px)"), p(), f.addEventListener("change", p);
-    }), O(() => f?.removeEventListener("change", p)), s({ collapsed: o }), (v, nt) => (a(), l("aside", {
-      class: b(["relative z-30 flex h-full shrink-0 flex-col rounded-corner border border-ui-border bg-ui-bg/80 transition-all duration-300", ["w-[84px]", o.value ? "md:w-[84px]" : "md:w-72"]])
+    ), V(() => {
+      d = window.matchMedia("(max-width: 767px)"), I(), d.addEventListener("change", I);
+    }), R(() => d?.removeEventListener("change", I)), s({ collapsed: o }), (v, wt) => (a(), l("aside", {
+      class: f(["relative z-30 flex h-full shrink-0 flex-col rounded-corner border border-ui-border bg-ui-surface/70 transition-all duration-300", ["w-[84px]", o.value ? "md:w-[84px]" : "md:w-72"]])
     }, [
-      g.value || v.$slots.header ? (a(), l("header", Z, [
-        i("div", _, [
-          i("button", {
+      h.value || v.$slots.header ? (a(), l("header", ue, [
+        r("div", me, [
+          r("button", {
             type: "button",
-            class: "hidden h-10 w-10 items-center justify-center rounded-corner border border-ui-border bg-ui-surface/70 font-semibold text-sm md:inline-flex",
+            class: f(E),
             "aria-label": o.value ? e.expandLabel : e.collapseLabel,
             "aria-expanded": !o.value,
-            onClick: j
-          }, m(o.value ? ">" : "<"), 9, ee),
-          g.value && !o.value ? (a(), l("div", te, [
-            e.title ? (a(), l("p", ae, m(e.title), 1)) : u("", !0),
-            e.subtitle ? (a(), l("p", le, m(e.subtitle), 1)) : u("", !0)
-          ])) : u("", !0)
+            onClick: M
+          }, [
+            B(C, {
+              name: o.value ? "pan-end-symbolic" : "pan-start-symbolic",
+              type: "symbol",
+              size: 16
+            }, null, 8, ["name"])
+          ], 8, fe),
+          h.value && !o.value ? (a(), l("div", be, [
+            e.title ? (a(), l("p", ge, b(e.title), 1)) : m("", !0),
+            e.subtitle ? (a(), l("p", he, b(e.subtitle), 1)) : m("", !0)
+          ])) : m("", !0)
         ]),
-        v.$slots.header && !o.value ? (a(), l("div", ne, [
-          y(v.$slots, "header", { collapsed: o.value })
-        ])) : u("", !0)
-      ])) : (a(), l("div", oe, [
-        i("button", {
+        v.$slots.header && !o.value ? (a(), l("div", ve, [
+          x(v.$slots, "header", { collapsed: o.value })
+        ])) : m("", !0)
+      ])) : (a(), l("div", ye, [
+        r("button", {
           type: "button",
-          class: "hidden h-10 w-10 items-center justify-center rounded-corner border border-ui-border bg-ui-surface/70 font-semibold text-sm md:inline-flex",
+          class: f(E),
           "aria-label": o.value ? e.expandLabel : e.collapseLabel,
           "aria-expanded": !o.value,
-          onClick: j
-        }, m(o.value ? ">" : "<"), 9, se)
+          onClick: M
+        }, [
+          B(C, {
+            name: o.value ? "pan-end-symbolic" : "pan-start-symbolic",
+            type: "symbol",
+            size: 16
+          }, null, 8, ["name"])
+        ], 8, xe)
       ])),
-      i("div", ie, [
-        (a(!0), l($, null, I(e.categories, (S) => (a(), A(V, {
-          key: S.id,
-          title: S.title,
+      r("div", pe, [
+        (a(!0), l(S, null, L(e.categories, (T) => (a(), A(O, {
+          key: T.id,
+          title: T.title,
           collapsed: o.value
         }, {
-          default: P(() => [
-            (a(!0), l($, null, I(S.items, (k) => (a(), A(M, {
-              key: k.id,
-              label: k.label,
-              icon: k.icon,
-              badge: k.badge,
-              disabled: k.disabled,
+          default: G(() => [
+            (a(!0), l(S, null, L(T.items, (p) => (a(), A(P, {
+              key: p.id,
+              label: p.label,
+              icon: p.icon,
+              badge: p.badge,
+              disabled: p.disabled,
               collapsed: o.value,
-              active: e.modelValue === k.id,
-              onClick: (ot) => F(k.id)
+              active: e.modelValue === p.id,
+              onClick: (Ct) => N(p.id)
             }, null, 8, ["label", "icon", "badge", "disabled", "collapsed", "active", "onClick"]))), 128))
           ]),
           _: 2
         }, 1032, ["title", "collapsed"]))), 128)),
-        y(v.$slots, "default", { collapsed: o.value })
+        x(v.$slots, "default", { collapsed: o.value })
       ])
     ], 2));
   }
-}), ce = { "data-tauri-drag-region": "" }, de = ["src", "alt"], ue = { "data-tauri-drag-region": "" }, me = { "data-tauri-drag-region": "" }, fe = ["src"], be = ["src"], ge = ["src"], he = /* @__PURE__ */ h({
+}), we = { class: "flex min-w-0 flex-col gap-1" }, Ce = ["for"], $e = { class: "relative flex min-w-0 items-center" }, Be = ["id"], Se = /* @__PURE__ */ g({
+  inheritAttrs: !1,
+  __name: "SelectField",
+  props: /* @__PURE__ */ U({
+    label: {}
+  }, {
+    modelValue: {
+      required: !0
+    },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const s = e, t = q(), n = H(), i = k(() => t.id ?? n), [c, u] = J(e, "modelValue", {
+      set(d) {
+        return u.number ? Number(d) : d;
+      }
+    });
+    return (d, o) => (a(), l("div", we, [
+      s.label ? (a(), l("label", {
+        key: 0,
+        for: i.value,
+        class: "text-tx-muted text-xs"
+      }, b(s.label), 9, Ce)) : m("", !0),
+      r("div", $e, [
+        K(r("select", Q({
+          id: i.value,
+          "onUpdate:modelValue": o[0] || (o[0] = (h) => X(c) ? c.value = h : null),
+          class: "min-w-0 flex-1 appearance-none truncate rounded-corner border border-ui-border bg-ui-surface/60 py-1.5 pr-8 pl-2 text-sm text-tx-main"
+        }, w(t)), [
+          x(d.$slots, "default")
+        ], 16, Be), [
+          [Y, w(c)]
+        ]),
+        B(C, {
+          name: "pan-down-symbolic",
+          type: "symbol",
+          size: 14,
+          class: "pointer-events-none absolute right-2"
+        })
+      ])
+    ]));
+  }
+}), ze = { "data-tauri-drag-region": "" }, Ie = ["src", "alt"], Te = { "data-tauri-drag-region": "" }, Ae = { "data-tauri-drag-region": "" }, Le = ["src"], Ve = ["src"], je = ["src"], Me = /* @__PURE__ */ g({
   __name: "TopBar",
   props: {
     title: String,
     image: String
   },
   setup(e) {
-    const s = x(null), t = R(), n = x(""), r = x(""), c = x(""), d = e;
-    return T(async () => {
-      n.value = await C("window-close"), r.value = await C("window-minimize"), c.value = await C("window-maximize");
-    }), (f, o) => (a(), l("div", {
+    const s = y(null), t = te(), n = y(""), i = y(""), c = y(""), u = e;
+    return V(async () => {
+      n.value = await $("window-close"), i.value = await $("window-minimize"), c.value = await $("window-maximize");
+    }), (d, o) => (a(), l("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_key: "bar",
       ref: s
     }, [
-      i("div", ce, [
-        i("img", {
-          src: d.image,
+      r("div", ze, [
+        r("img", {
+          src: u.image,
           "data-tauri-drag-region": "",
           class: "h-6 w-auto",
-          alt: d.title
-        }, null, 8, de)
+          alt: u.title
+        }, null, 8, Ie)
       ]),
-      i("div", ue, m(d.title), 1),
-      i("div", me, [
-        i("span", {
+      r("div", Te, b(u.title), 1),
+      r("div", Ae, [
+        r("span", {
           class: "win-button",
-          onClick: o[0] || (o[0] = (g) => z(t).minimize())
+          onClick: o[0] || (o[0] = (h) => w(t).minimize())
         }, [
-          i("img", {
-            src: r.value,
+          r("img", {
+            src: i.value,
             class: "h-6 w-6 inline-block",
             alt: "Minimize"
-          }, null, 8, fe)
+          }, null, 8, Le)
         ]),
-        i("span", {
+        r("span", {
           class: "win-button",
-          onClick: o[1] || (o[1] = (g) => z(t).toggleMaximize())
+          onClick: o[1] || (o[1] = (h) => w(t).toggleMaximize())
         }, [
-          i("img", {
+          r("img", {
             src: c.value,
             class: "h-6 w-6 inline-block",
             alt: "Maximize"
-          }, null, 8, be)
+          }, null, 8, Ve)
         ]),
-        i("span", {
+        r("span", {
           class: "win-button",
-          onClick: o[2] || (o[2] = (g) => z(t).close())
+          onClick: o[2] || (o[2] = (h) => w(t).close())
         }, [
-          i("img", {
+          r("img", {
             src: n.value,
             class: "h-6 w-6 inline-block",
             alt: "Close"
-          }, null, 8, ge)
+          }, null, 8, je)
         ])
       ])
     ], 512));
   }
-}), ve = /* @__PURE__ */ h({
+}), De = /* @__PURE__ */ g({
   __name: "WindowFrame",
   props: {
     title: { default: "Vasak" },
@@ -271,18 +350,18 @@ const U = { class: "flex flex-col gap-2" }, q = ["aria-expanded"], H = {
   },
   setup(e) {
     const s = e;
-    return (t, n) => (a(), l($, null, [
-      W(he, {
+    return (t, n) => (a(), l(S, null, [
+      B(Me, {
         title: s.title,
         image: s.image
       }, null, 8, ["title", "image"]),
-      y(t.$slots, "default")
+      x(t.$slots, "default")
     ], 64));
   }
-}), xe = ["type", "disabled"], ye = {
+}), Fe = ["type", "disabled"], Ee = {
   key: 0,
   class: "w-4 h-4 animate-spin rounded-full border-2 border-current border-t-transparent"
-}, ke = ["src", "alt"], pe = { key: 2 }, we = ["src", "alt"], Ce = /* @__PURE__ */ h({
+}, Oe = ["src", "alt"], Pe = { key: 2 }, Ne = ["src", "alt"], We = /* @__PURE__ */ g({
   __name: "ActionButton",
   props: {
     label: {},
@@ -301,7 +380,7 @@ const U = { class: "flex flex-col gap-2" }, q = ["aria-expanded"], H = {
   },
   emits: ["click"],
   setup(e, { emit: s }) {
-    const t = e, n = s, r = {
+    const t = e, n = s, i = {
       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"
@@ -309,14 +388,14 @@ const U = { class: "flex flex-col gap-2" }, q = ["aria-expanded"], H = {
       sm: "px-2 py-1 text-xs",
       md: "px-3 py-1 text-sm",
       lg: "px-4 py-2 text-base"
-    }, d = (f) => {
-      t.stopPropagation && f.stopPropagation(), t.preventDefault && f.preventDefault(), !t.disabled && !t.loading && n("click");
+    }, u = (d) => {
+      t.stopPropagation && d.stopPropagation(), t.preventDefault && d.preventDefault(), !t.disabled && !t.loading && n("click");
     };
-    return (f, o) => (a(), l("button", {
+    return (d, o) => (a(), l("button", {
       type: t.type,
-      onClick: d,
-      class: b(["rounded-corner transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2", [
-        r[t.variant],
+      onClick: u,
+      class: f(["rounded-corner transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2", [
+        i[t.variant],
         c[t.size],
         t.fullWidth ? "w-full" : "",
         t.iconSrc && !t.label ? "px-2 py-2" : "",
@@ -324,28 +403,28 @@ const U = { class: "flex flex-col gap-2" }, q = ["aria-expanded"], H = {
       ]]),
       disabled: t.disabled || t.loading
     }, [
-      e.loading ? (a(), l("span", ye)) : u("", !0),
+      e.loading ? (a(), l("span", Ee)) : m("", !0),
       t.iconSrc && !t.iconRight ? (a(), l("img", {
         key: 1,
         src: t.iconSrc,
         alt: t.iconAlt || t.label,
         class: "w-4 h-4"
-      }, null, 8, ke)) : u("", !0),
-      t.label ? (a(), l("span", pe, m(t.label), 1)) : u("", !0),
+      }, null, 8, Oe)) : m("", !0),
+      t.label ? (a(), l("span", Pe, b(t.label), 1)) : m("", !0),
       t.iconSrc && t.iconRight ? (a(), l("img", {
         key: 3,
         src: t.iconSrc,
         alt: t.iconAlt || t.label,
         class: "w-4 h-4"
-      }, null, 8, we)) : u("", !0)
-    ], 10, xe));
+      }, null, 8, Ne)) : m("", !0)
+    ], 10, Fe));
   }
-}), B = (e, s) => {
+}), z = (e, s) => {
   const t = e.__vccOpts || e;
-  for (const [n, r] of s)
-    t[n] = r;
+  for (const [n, i] of s)
+    t[n] = i;
   return t;
-}, $e = /* @__PURE__ */ B(Ce, [["__scopeId", "data-v-2eaf6e27"]]), Be = { class: "text-base font-semibold m-0 text-primary dark:text-primary-dark" }, Se = /* @__PURE__ */ h({
+}, Re = /* @__PURE__ */ z(We, [["__scopeId", "data-v-2eaf6e27"]]), Ge = { class: "text-base font-semibold m-0 text-primary dark:text-primary-dark" }, Ue = /* @__PURE__ */ g({
   __name: "ConfigSection",
   props: {
     title: {},
@@ -354,25 +433,25 @@ const U = { class: "flex flex-col gap-2" }, q = ["aria-expanded"], H = {
   },
   setup(e) {
     return (s, t) => (a(), l("div", {
-      class: b(["flex flex-col gap-4 p-4 background rounded-corner", e.customClass])
+      class: f(["flex flex-col gap-4 p-4 background rounded-corner", e.customClass])
     }, [
-      i("h3", Be, m(e.icon ? `${e.icon} ${e.title}` : e.title), 1),
-      y(s.$slots, "default", {}, void 0, !0)
+      r("h3", Ge, b(e.icon ? `${e.icon} ${e.title}` : e.title), 1),
+      x(s.$slots, "default", {}, void 0, !0)
     ], 2));
   }
-}), ze = /* @__PURE__ */ B(Se, [["__scopeId", "data-v-45bd4eab"]]), Ie = { class: "flex items-center gap-3 flex-1 min-w-0" }, Le = ["src", "alt"], Te = { class: "min-w-0" }, je = { class: "font-semibold truncate" }, Ae = {
+}), qe = /* @__PURE__ */ z(Ue, [["__scopeId", "data-v-45bd4eab"]]), He = { class: "flex items-center gap-3 flex-1 min-w-0" }, Je = ["src", "alt"], Ke = { class: "min-w-0" }, Qe = { class: "font-semibold truncate" }, Xe = {
   key: 0,
   class: "text-xs text-gray-400 truncate"
-}, Ve = {
+}, Ye = {
   key: 1,
   class: "text-xs text-gray-400 truncate"
-}, Me = {
+}, Ze = {
   key: 2,
   class: "text-xs text-gray-400 flex gap-2 mt-1"
-}, Fe = {
+}, _e = {
   key: 1,
   class: "w-2 h-2 rounded-full bg-green-500"
-}, De = /* @__PURE__ */ h({
+}, et = /* @__PURE__ */ g({
   __name: "DeviceCard",
   props: {
     icon: {},
@@ -391,37 +470,37 @@ const U = { class: "flex flex-col gap-2" }, q = ["aria-expanded"], H = {
   setup(e, { emit: s }) {
     const t = s, n = () => {
       t("action");
-    }, r = () => {
+    }, i = () => {
       t("click");
     };
-    return (c, d) => (a(), l("div", {
-      class: b(["flex items-center justify-between background rounded-vsk px-6 py-3 mb-4", [{ "border-l-4 border-green-500": e.isConnected }, e.customClass]]),
-      onClick: r
+    return (c, u) => (a(), l("div", {
+      class: f(["flex items-center justify-between background rounded-vsk px-6 py-3 mb-4", [{ "border-l-4 border-green-500": e.isConnected }, e.customClass]]),
+      onClick: i
     }, [
-      i("div", Ie, [
-        i("img", {
+      r("div", He, [
+        r("img", {
           src: e.icon,
           alt: e.title,
           class: "h-7 w-7 shrink-0"
-        }, null, 8, Le),
-        i("div", Te, [
-          i("div", je, m(e.title), 1),
-          e.subtitle ? (a(), l("div", Ae, m(e.subtitle), 1)) : u("", !0),
-          e.metadata ? (a(), l("div", Ve, m(e.metadata), 1)) : u("", !0),
-          e.extraInfo && e.extraInfo.length > 0 ? (a(), l("div", Me, [
-            (a(!0), l($, null, I(e.extraInfo, (f, o) => (a(), l("span", { key: o }, m(f), 1))), 128))
-          ])) : u("", !0)
+        }, null, 8, Je),
+        r("div", Ke, [
+          r("div", Qe, b(e.title), 1),
+          e.subtitle ? (a(), l("div", Xe, b(e.subtitle), 1)) : m("", !0),
+          e.metadata ? (a(), l("div", Ye, b(e.metadata), 1)) : m("", !0),
+          e.extraInfo && e.extraInfo.length > 0 ? (a(), l("div", Ze, [
+            (a(!0), l(S, null, L(e.extraInfo, (d, o) => (a(), l("span", { key: o }, b(d), 1))), 128))
+          ])) : m("", !0)
         ])
       ]),
       e.showActionButton ? (a(), l("button", {
         key: 0,
         class: "bg-vsk-primary rounded-vsk px-4 py-2 text-sm font-semibold cursor-pointer hover:opacity-70",
-        onClick: G(n, ["stop"])
-      }, m(e.actionLabel), 1)) : u("", !0),
-      e.showStatusIndicator && e.isConnected ? (a(), l("div", Fe)) : u("", !0)
+        onClick: Z(n, ["stop"])
+      }, b(e.actionLabel), 1)) : m("", !0),
+      e.showStatusIndicator && e.isConnected ? (a(), l("div", _e)) : m("", !0)
     ], 2));
   }
-}), Ee = ["for"], Oe = /* @__PURE__ */ h({
+}), tt = ["for"], at = /* @__PURE__ */ g({
   __name: "FormGroup",
   props: {
     label: {},
@@ -431,17 +510,17 @@ const U = { class: "flex flex-col gap-2" }, q = ["aria-expanded"], H = {
   },
   setup(e) {
     return (s, t) => (a(), l("div", {
-      class: b(["flex flex-col gap-2", e.customClass])
+      class: f(["flex flex-col gap-2", e.customClass])
     }, [
       e.label ? (a(), l("label", {
         key: 0,
         for: e.htmlFor,
-        class: b(["text-sm font-medium text-primary dark:text-primary-dark", e.labelClass])
-      }, m(e.label), 11, Ee)) : u("", !0),
-      y(s.$slots, "default", {}, void 0, !0)
+        class: f(["text-sm font-medium text-primary dark:text-primary-dark", e.labelClass])
+      }, b(e.label), 11, tt)) : m("", !0),
+      x(s.$slots, "default", {}, void 0, !0)
     ], 2));
   }
-}), Pe = /* @__PURE__ */ B(Oe, [["__scopeId", "data-v-c0d9d9cb"]]), We = /* @__PURE__ */ h({
+}), lt = /* @__PURE__ */ z(at, [["__scopeId", "data-v-c0d9d9cb"]]), nt = /* @__PURE__ */ g({
   __name: "ListCard",
   props: {
     clickable: { type: Boolean, default: !1 },
@@ -449,26 +528,26 @@ const U = { class: "flex flex-col gap-2" }, q = ["aria-expanded"], H = {
   },
   emits: ["click"],
   setup(e, { emit: s }) {
-    const t = e, n = s, r = () => {
+    const t = e, n = s, i = () => {
       t.clickable && n("click");
     };
-    return (c, d) => (a(), l("div", {
-      class: b([
+    return (c, u) => (a(), l("div", {
+      class: f([
         "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": t.clickable
         },
         e.customClass
       ]),
-      onClick: r
+      onClick: i
     }, [
-      y(c.$slots, "default", {}, void 0, !0)
+      x(c.$slots, "default", {}, void 0, !0)
     ], 2));
   }
-}), Ge = /* @__PURE__ */ B(We, [["__scopeId", "data-v-f86d47da"]]), Ne = { 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" }, Re = ["src", "alt", "title"], Ue = {
+}), st = /* @__PURE__ */ z(nt, [["__scopeId", "data-v-f86d47da"]]), ot = { 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" }, it = ["src", "alt", "title"], rt = {
   key: 1,
   class: "w-8 h-8 flex items-center justify-center"
-}, qe = ["src", "alt"], He = ["min", "max", "value"], Je = /* @__PURE__ */ h({
+}, ct = ["src", "alt"], dt = ["min", "max", "value"], ut = /* @__PURE__ */ g({
   __name: "SliderControl",
   props: {
     icon: {},
@@ -483,49 +562,49 @@ const U = { class: "flex flex-col gap-2" }, q = ["aria-expanded"], H = {
   },
   emits: ["update:modelValue", "buttonClick"],
   setup(e, { emit: s }) {
-    const t = e, n = s, r = w(() => {
+    const t = e, n = s, i = k(() => {
       if (t.max <= t.min) return 0;
-      const o = t.max - t.min, g = t.modelValue - t.min;
-      return Math.round(g / o * 100);
-    }), c = w(() => t.getPercentageClass ? t.getPercentageClass(r.value) : ""), d = (o) => {
-      const g = o.target;
-      n("update:modelValue", Number(g.value));
-    }, f = () => {
+      const o = t.max - t.min, h = t.modelValue - t.min;
+      return Math.round(h / o * 100);
+    }), c = k(() => t.getPercentageClass ? t.getPercentageClass(i.value) : ""), u = (o) => {
+      const h = o.target;
+      n("update:modelValue", Number(h.value));
+    }, d = () => {
       n("buttonClick");
     };
-    return (o, g) => (a(), l("div", Ne, [
+    return (o, h) => (a(), l("div", ot, [
       e.showButton ? (a(), l("button", {
         key: 0,
-        onClick: f,
+        onClick: d,
         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"
       }, [
-        i("img", {
+        r("img", {
           src: e.icon,
           alt: e.alt,
           title: e.tooltip,
-          class: b(["w-6 h-6 transition-all duration-200", e.iconClass])
-        }, null, 10, Re)
-      ])) : (a(), l("div", Ue, [
-        i("img", {
+          class: f(["w-6 h-6 transition-all duration-200", e.iconClass])
+        }, null, 10, it)
+      ])) : (a(), l("div", rt, [
+        r("img", {
           src: e.icon,
           alt: e.alt,
           class: "w-6 h-6 transition-all duration-200"
-        }, null, 8, qe)
+        }, null, 8, ct)
       ])),
-      i("input", {
+      r("input", {
         type: "range",
         min: e.min,
         max: e.max,
         value: e.modelValue,
-        onInput: d,
+        onInput: u,
         class: "flex-1 transition-all duration-200 hover:scale-105"
-      }, null, 40, He),
-      i("span", {
-        class: b(["w-12 text-right transition-all duration-200 font-medium", c.value])
-      }, m(r.value) + "% ", 3)
+      }, null, 40, dt),
+      r("span", {
+        class: f(["w-12 text-right transition-all duration-200 font-medium", c.value])
+      }, b(i.value) + "% ", 3)
     ]));
   }
-}), Ke = ["disabled"], Qe = /* @__PURE__ */ h({
+}), mt = ["disabled"], ft = /* @__PURE__ */ g({
   __name: "SwitchToggle",
   props: {
     isOn: { type: Boolean },
@@ -537,14 +616,14 @@ const U = { class: "flex flex-col gap-2" }, q = ["aria-expanded"], H = {
   },
   emits: ["toggle"],
   setup(e, { emit: s }) {
-    const t = e, n = s, r = () => {
+    const t = e, n = s, i = () => {
       n("toggle", !t.isOn);
     };
-    return (c, d) => (a(), l("button", {
+    return (c, u) => (a(), l("button", {
       type: "button",
-      onClick: r,
+      onClick: i,
       disabled: e.disabled,
-      class: b([
+      class: f([
         "relative inline-flex items-center rounded-full transition-colors",
         e.size === "small" ? "h-6 w-11" : "h-7 w-12",
         e.isOn ? e.activeClass : e.inactiveClass,
@@ -552,16 +631,16 @@ const U = { class: "flex flex-col gap-2" }, q = ["aria-expanded"], H = {
         e.customClass
       ])
     }, [
-      i("span", {
-        class: b([
+      r("span", {
+        class: f([
           "inline-block transform rounded-full bg-white shadow transition-transform",
           e.size === "small" ? "h-4 w-4" : "h-6 w-6",
           e.isOn ? e.size === "small" ? "translate-x-6" : "translate-x-5" : "translate-x-1"
         ])
       }, null, 2)
-    ], 10, Ke));
+    ], 10, mt));
   }
-}), Xe = ["disabled"], Ye = ["src", "alt", "title"], Ze = /* @__PURE__ */ h({
+}), bt = ["disabled"], gt = ["src", "alt", "title"], ht = /* @__PURE__ */ g({
   __name: "ToggleControl",
   props: {
     icon: {},
@@ -577,9 +656,9 @@ const U = { class: "flex flex-col gap-2" }, q = ["aria-expanded"], H = {
     const t = s, n = () => {
       t("click");
     };
-    return (r, c) => (a(), l("button", {
+    return (i, c) => (a(), l("button", {
       onClick: n,
-      class: b(["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: f(["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", {
         "animate-pulse": e.isLoading,
         "ring-2 ring-primary dark:ring-primary-dark": e.isActive,
         "opacity-60": !e.isActive,
@@ -587,23 +666,23 @@ const U = { class: "flex flex-col gap-2" }, q = ["aria-expanded"], H = {
       }]),
       disabled: e.isLoading
     }, [
-      i("img", {
+      r("img", {
         src: e.icon,
         alt: e.alt,
         title: e.tooltip,
-        class: b(["m-auto w-12.5 h-12.5 transition-all duration-300 group-hover:scale-110 relative z-10", {
+        class: f(["m-auto w-12.5 h-12.5 transition-all duration-300 group-hover:scale-110 relative z-10", {
           "animate-spin": e.isLoading,
           "filter brightness-75": !e.isActive,
           "drop-shadow-lg": e.isActive,
           ...e.iconClass
         }])
-      }, null, 10, Ye)
-    ], 10, Xe));
+      }, null, 10, gt)
+    ], 10, bt));
   }
-}), _e = ["title"], et = ["src", "alt"], tt = {
+}), vt = ["title"], yt = ["src", "alt"], xt = {
   key: 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"
-}, at = /* @__PURE__ */ h({
+}, pt = /* @__PURE__ */ g({
   __name: "TrayIconButton",
   props: {
     icon: {},
@@ -618,69 +697,73 @@ const U = { class: "flex flex-col gap-2" }, q = ["aria-expanded"], H = {
   },
   emits: ["click"],
   setup(e, { emit: s }) {
-    const t = s, n = x(!1), r = () => {
+    const t = s, n = y(!1), i = () => {
       t("click");
     };
-    return (c, d) => (a(), l("div", {
-      class: b(["p-1 rounded-corner relative hover:bg-primary dark:hover:bg-primary-dark group transition-all duration-300", e.customClass]),
+    return (c, u) => (a(), l("div", {
+      class: f(["p-1 rounded-corner relative hover:bg-primary dark:hover:bg-primary-dark group transition-all duration-300", e.customClass]),
       title: e.tooltip,
-      onClick: r,
-      onMouseenter: d[0] || (d[0] = (f) => n.value = !0),
-      onMouseleave: d[1] || (d[1] = (f) => n.value = !1)
+      onClick: i,
+      onMouseenter: u[0] || (u[0] = (d) => n.value = !0),
+      onMouseleave: u[1] || (u[1] = (d) => n.value = !1)
     }, [
-      i("img", {
+      r("img", {
         src: e.icon,
         alt: e.alt,
-        class: b(["m-auto h-5.5 w-auto transition-all duration-300", e.iconClass])
-      }, null, 10, et),
-      e.badge !== null && e.badge > 0 ? (a(), l("div", tt, m(e.badge), 1)) : u("", !0),
+        class: f(["m-auto h-5.5 w-auto transition-all duration-300", e.iconClass])
+      }, null, 10, yt),
+      e.badge !== null && e.badge > 0 ? (a(), l("div", xt, b(e.badge), 1)) : m("", !0),
       e.showCustomTooltip && e.customTooltipText ? (a(), l("div", {
         key: 1,
-        class: b(["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: f(["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", [
           e.tooltipClass,
           {
             "opacity-0 -translate-y-2": !n.value,
             "opacity-100 translate-y-0": n.value
           }
         ]])
-      }, m(e.customTooltipText), 3)) : u("", !0),
-      y(c.$slots, "default")
-    ], 42, _e));
+      }, b(e.customTooltipText), 3)) : m("", !0),
+      x(c.$slots, "default")
+    ], 42, vt));
   }
-}), lt = [
-  re,
-  M,
-  V,
-  ve,
-  $e,
-  ze,
+}), kt = [
+  ke,
+  P,
+  O,
+  Se,
+  C,
   De,
-  Pe,
-  Ge,
-  Je,
-  Qe,
-  Ze,
-  at
-], dt = {
+  Re,
+  qe,
+  et,
+  lt,
+  st,
+  ut,
+  ft,
+  ht,
+  pt
+], It = {
   install(e) {
-    lt.forEach((s) => {
+    kt.forEach((s) => {
       e.component(s.name, s);
     });
   }
 };
 export {
-  $e as ActionButton,
-  ze as ConfigSection,
-  De as DeviceCard,
-  Pe as FormGroup,
-  Ge as ListCard,
-  re as SideBar,
-  M as SideButton,
-  V as SideGroup,
-  Je as SliderControl,
-  Qe as SwitchToggle,
-  Ze as ToggleControl,
-  at as TrayIconButton,
-  ve as WindowFrame,
-  dt as default
+  Re as ActionButton,
+  qe as ConfigSection,
+  et as DeviceCard,
+  lt as FormGroup,
+  st as ListCard,
+  Se as SelectField,
+  ke as SideBar,
+  P as SideButton,
+  O as SideGroup,
+  ut as SliderControl,
+  ft as SwitchToggle,
+  C as ThemeIcon,
+  ht as ToggleControl,
+  pt as TrayIconButton,
+  De as WindowFrame,
+  It as default
 };

package/dist/vue-libvasak.umd.js

@@ -1 +1 @@
-(function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@vasakgroup/plugin-vicons"),require("@tauri-apps/api/event"),require("@tauri-apps/api/window")):typeof define=="function"&&define.amd?define(["exports","vue","@vasakgroup/plugin-vicons","@tauri-apps/api/event","@tauri-apps/api/window"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s.VueLibVasak={},s.Vue,s.VasakVicons,s.TauriEvent,s.TauriWindow))})(this,(function(s,e,b,I,L){"use strict";const j={class:"flex flex-col gap-2"},A=["aria-expanded"],M={key:1,class:"flex flex-col gap-1"},g=e.defineComponent({__name:"SideGroup",props:{title:{},collapsed:{type:Boolean,default:!1},defaultOpen:{type:Boolean,default:!0}},setup(t){const n=t,a=e.ref(n.defaultOpen);return e.watch(()=>n.collapsed,l=>{l&&(a.value=!0)}),(l,i)=>(e.openBlock(),e.createElementBlock("section",j,[t.collapsed?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",{key:0,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":a.value,onClick:i[0]||(i[0]=r=>a.value=!a.value)},[e.createElementVNode("span",null,e.toDisplayString(t.title),1),e.createElementVNode("span",{class:e.normalizeClass(["text-[10px] transition-transform duration-200",a.value?"rotate-180":""])}," v ",2)],8,A)),a.value||t.collapsed?(e.openBlock(),e.createElementBlock("div",M,[e.renderSlot(l.$slots,"default")])):e.createCommentVNode("",!0)]))}}),F=["title","aria-label","disabled","aria-current"],O=["src"],P={key:1},W={key:0,class:"min-w-0 flex-1 truncate font-medium"},G={key:1,class:"rounded-corner bg-ui-surface px-2 py-0.5 font-semibold text-tx-muted text-xs"},h=e.defineComponent({__name:"SideButton",props:{label:{},icon:{default:""},active:{type:Boolean,default:!1},collapsed:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},badge:{default:""}},emits:["click"],setup(t){const n=t,a=e.ref(""),l=e.toRef(n,"icon");let i=null,r=!1,c=0;async function d(){const o=++c,m=l.value;if(!m){a.value="";return}const k=await b.getIconSource(m);o===c&&(a.value=k)}return e.onMounted(async()=>{const o=await I.listen("vicons:theme-changed",d);if(r){o();return}i=o,await d()}),e.onUnmounted(()=>{r=!0,i?.()}),e.watch(l,d),(o,m)=>(e.openBlock(),e.createElementBlock("button",{type:"button",title:t.collapsed?t.label:void 0,"aria-label":t.collapsed?t.label:void 0,disabled:t.disabled,"aria-current":t.active?"page":void 0,class:e.normalizeClass(["group relative flex w-full items-center gap-3 rounded-corner border px-3 py-2 text-left text-sm transition-all duration-200",[t.active?"border-secondary bg-primary/15 text-tx-main shadow-sm":"border-transparent bg-ui-bg/30 hover:border-ui-border hover:bg-ui-surface/70",t.disabled?"cursor-not-allowed opacity-60":"cursor-pointer",t.collapsed?"justify-center px-2":""]]),onClick:m[0]||(m[0]=k=>o.$emit("click"))},[e.createElementVNode("span",{class:e.normalizeClass(["flex h-8 w-8 shrink-0 items-center justify-center rounded-corner font-semibold text-xs uppercase tracking-wide",t.active?"border-secondary bg-primary/20":""]),"aria-hidden":"true"},[a.value?(e.openBlock(),e.createElementBlock("img",{key:0,src:a.value,alt:"",class:"h-8 w-8 object-contain"},null,8,O)):(e.openBlock(),e.createElementBlock("span",P,e.toDisplayString(t.label.charAt(0).toUpperCase()),1))],2),t.collapsed?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",W,e.toDisplayString(t.label),1)),!t.collapsed&&t.badge!==""?(e.openBlock(),e.createElementBlock("span",G,e.toDisplayString(t.badge),1)):e.createCommentVNode("",!0)],10,F))}}),q={key:0,class:"flex flex-col gap-2 border-ui-border border-b p-2"},R={class:"flex items-center gap-2"},U=["aria-label","aria-expanded"],H={key:0,class:"min-w-0 flex-1"},J={key:0,class:"truncate font-semibold text-sm"},K={key:1,class:"truncate text-tx-muted text-xs"},Q={key:0},X={key:1,class:"flex justify-center border-ui-border border-b p-2"},Y=["aria-label","aria-expanded"],Z={class:"flex-1 space-y-3 overflow-y-auto p-2"},x=e.defineComponent({__name:"SideBar",props:{title:{default:""},subtitle:{default:""},categories:{default:()=>[]},modelValue:{default:""},collapsed:{type:Boolean,default:void 0},collapseLabel:{default:"Collapse"},expandLabel:{default:"Expand"}},emits:["update:modelValue","update:collapsed","change"],setup(t,{expose:n,emit:a}){const l=t,i=a,r=e.ref(l.collapsed??!1),c=e.ref(!1);let d=null;const o=e.computed(()=>c.value||r.value),m=e.computed(()=>!!(l.title||l.subtitle));e.computed(()=>l.categories.length>0);function k(){c.value=d?.matches??!1}function T(){r.value=!r.value,i("update:collapsed",r.value)}function Ae(u){i("update:modelValue",u),i("change",u)}return e.watch(()=>l.collapsed,u=>{u!==void 0&&(r.value=u)}),e.onMounted(()=>{d=window.matchMedia("(max-width: 767px)"),k(),d.addEventListener("change",k)}),e.onBeforeUnmount(()=>d?.removeEventListener("change",k)),n({collapsed:o}),(u,Pe)=>(e.openBlock(),e.createElementBlock("aside",{class:e.normalizeClass(["relative z-30 flex h-full shrink-0 flex-col rounded-corner border border-ui-border bg-ui-bg/80 transition-all duration-300",["w-[84px]",o.value?"md:w-[84px]":"md:w-72"]])},[m.value||u.$slots.header?(e.openBlock(),e.createElementBlock("header",q,[e.createElementVNode("div",R,[e.createElementVNode("button",{type:"button",class:"hidden h-10 w-10 items-center justify-center rounded-corner border border-ui-border bg-ui-surface/70 font-semibold text-sm md:inline-flex","aria-label":o.value?t.expandLabel:t.collapseLabel,"aria-expanded":!o.value,onClick:T},e.toDisplayString(o.value?">":"<"),9,U),m.value&&!o.value?(e.openBlock(),e.createElementBlock("div",H,[t.title?(e.openBlock(),e.createElementBlock("p",J,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),t.subtitle?(e.openBlock(),e.createElementBlock("p",K,e.toDisplayString(t.subtitle),1)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)]),u.$slots.header&&!o.value?(e.openBlock(),e.createElementBlock("div",Q,[e.renderSlot(u.$slots,"header",{collapsed:o.value})])):e.createCommentVNode("",!0)])):(e.openBlock(),e.createElementBlock("div",X,[e.createElementVNode("button",{type:"button",class:"hidden h-10 w-10 items-center justify-center rounded-corner border border-ui-border bg-ui-surface/70 font-semibold text-sm md:inline-flex","aria-label":o.value?t.expandLabel:t.collapseLabel,"aria-expanded":!o.value,onClick:T},e.toDisplayString(o.value?">":"<"),9,Y)])),e.createElementVNode("div",Z,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.categories,y=>(e.openBlock(),e.createBlock(g,{key:y.id,title:y.title,collapsed:o.value},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(y.items,f=>(e.openBlock(),e.createBlock(h,{key:f.id,label:f.label,icon:f.icon,badge:f.badge,disabled:f.disabled,collapsed:o.value,active:t.modelValue===f.id,onClick:We=>Ae(f.id)},null,8,["label","icon","badge","disabled","collapsed","active","onClick"]))),128))]),_:2},1032,["title","collapsed"]))),128)),e.renderSlot(u.$slots,"default",{collapsed:o.value})])],2))}}),_={"data-tauri-drag-region":""},v=["src","alt"],ee={"data-tauri-drag-region":""},te={"data-tauri-drag-region":""},ae=["src"],le=["src"],oe=["src"],ne=e.defineComponent({__name:"TopBar",props:{title:String,image:String},setup(t){const n=e.ref(null),a=L.getCurrentWindow(),l=e.ref(""),i=e.ref(""),r=e.ref(""),c=t;return e.onMounted(async()=>{l.value=await b.getIconSource("window-close"),i.value=await b.getIconSource("window-minimize"),r.value=await b.getIconSource("window-maximize")}),(d,o)=>(e.openBlock(),e.createElementBlock("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_key:"bar",ref:n},[e.createElementVNode("div",_,[e.createElementVNode("img",{src:c.image,"data-tauri-drag-region":"",class:"h-6 w-auto",alt:c.title},null,8,v)]),e.createElementVNode("div",ee,e.toDisplayString(c.title),1),e.createElementVNode("div",te,[e.createElementVNode("span",{class:"win-button",onClick:o[0]||(o[0]=m=>e.unref(a).minimize())},[e.createElementVNode("img",{src:i.value,class:"h-6 w-6 inline-block",alt:"Minimize"},null,8,ae)]),e.createElementVNode("span",{class:"win-button",onClick:o[1]||(o[1]=m=>e.unref(a).toggleMaximize())},[e.createElementVNode("img",{src:r.value,class:"h-6 w-6 inline-block",alt:"Maximize"},null,8,le)]),e.createElementVNode("span",{class:"win-button",onClick:o[2]||(o[2]=m=>e.unref(a).close())},[e.createElementVNode("img",{src:l.value,class:"h-6 w-6 inline-block",alt:"Close"},null,8,oe)])])],512))}}),C=e.defineComponent({__name:"WindowFrame",props:{title:{default:"Vasak"},image:{default:""}},setup(t){const n=t;return(a,l)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(ne,{title:n.title,image:n.image},null,8,["title","image"]),e.renderSlot(a.$slots,"default")],64))}}),ie=["type","disabled"],se={key:0,class:"w-4 h-4 animate-spin rounded-full border-2 border-current border-t-transparent"},re=["src","alt"],ce={key:2},de=["src","alt"],me=e.defineComponent({__name:"ActionButton",props:{label:{},disabled:{type:Boolean,default:!1},variant:{default:"primary"},loading:{type:Boolean,default:!1},customClass:{default:()=>({})},size:{default:"md"},fullWidth:{type:Boolean,default:!1},iconSrc:{default:""},iconAlt:{default:""},iconRight:{type:Boolean,default:!1},type:{default:"button"},stopPropagation:{type:Boolean,default:!1},preventDefault:{type:Boolean,default:!1}},emits:["click"],setup(t,{emit:n}){const a=t,l=n,i={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"},r={sm:"px-2 py-1 text-xs",md:"px-3 py-1 text-sm",lg:"px-4 py-2 text-base"},c=d=>{a.stopPropagation&&d.stopPropagation(),a.preventDefault&&d.preventDefault(),!a.disabled&&!a.loading&&l("click")};return(d,o)=>(e.openBlock(),e.createElementBlock("button",{type:a.type,onClick:c,class:e.normalizeClass(["rounded-corner transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2",[i[a.variant],r[a.size],a.fullWidth?"w-full":"",a.iconSrc&&!a.label?"px-2 py-2":"",t.customClass]]),disabled:a.disabled||a.loading},[t.loading?(e.openBlock(),e.createElementBlock("span",se)):e.createCommentVNode("",!0),a.iconSrc&&!a.iconRight?(e.openBlock(),e.createElementBlock("img",{key:1,src:a.iconSrc,alt:a.iconAlt||a.label,class:"w-4 h-4"},null,8,re)):e.createCommentVNode("",!0),a.label?(e.openBlock(),e.createElementBlock("span",ce,e.toDisplayString(a.label),1)):e.createCommentVNode("",!0),a.iconSrc&&a.iconRight?(e.openBlock(),e.createElementBlock("img",{key:3,src:a.iconSrc,alt:a.iconAlt||a.label,class:"w-4 h-4"},null,8,de)):e.createCommentVNode("",!0)],10,ie))}}),p=(t,n)=>{const a=t.__vccOpts||t;for(const[l,i]of n)a[l]=i;return a},B=p(me,[["__scopeId","data-v-2eaf6e27"]]),ue={class:"text-base font-semibold m-0 text-primary dark:text-primary-dark"},w=p(e.defineComponent({__name:"ConfigSection",props:{title:{},icon:{default:""},customClass:{default:()=>({})}},setup(t){return(n,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex flex-col gap-4 p-4 background rounded-corner",t.customClass])},[e.createElementVNode("h3",ue,e.toDisplayString(t.icon?`${t.icon} ${t.title}`:t.title),1),e.renderSlot(n.$slots,"default",{},void 0,!0)],2))}}),[["__scopeId","data-v-45bd4eab"]]),fe={class:"flex items-center gap-3 flex-1 min-w-0"},ke=["src","alt"],be={class:"min-w-0"},pe={class:"font-semibold truncate"},ge={key:0,class:"text-xs text-gray-400 truncate"},he={key:1,class:"text-xs text-gray-400 truncate"},ye={key:2,class:"text-xs text-gray-400 flex gap-2 mt-1"},xe={key:1,class:"w-2 h-2 rounded-full bg-green-500"},E=e.defineComponent({__name:"DeviceCard",props:{icon:{},title:{},subtitle:{default:""},metadata:{default:""},extraInfo:{default:()=>[]},isConnected:{type:Boolean,default:!1},showActionButton:{type:Boolean,default:!0},actionLabel:{default:"Conectar"},showStatusIndicator:{type:Boolean,default:!1},customClass:{default:""},clickable:{type:Boolean,default:!1}},emits:["action","click"],setup(t,{emit:n}){const a=n,l=()=>{a("action")},i=()=>{a("click")};return(r,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex items-center justify-between background rounded-vsk px-6 py-3 mb-4",[{"border-l-4 border-green-500":t.isConnected},t.customClass]]),onClick:i},[e.createElementVNode("div",fe,[e.createElementVNode("img",{src:t.icon,alt:t.title,class:"h-7 w-7 shrink-0"},null,8,ke),e.createElementVNode("div",be,[e.createElementVNode("div",pe,e.toDisplayString(t.title),1),t.subtitle?(e.openBlock(),e.createElementBlock("div",ge,e.toDisplayString(t.subtitle),1)):e.createCommentVNode("",!0),t.metadata?(e.openBlock(),e.createElementBlock("div",he,e.toDisplayString(t.metadata),1)):e.createCommentVNode("",!0),t.extraInfo&&t.extraInfo.length>0?(e.openBlock(),e.createElementBlock("div",ye,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.extraInfo,(d,o)=>(e.openBlock(),e.createElementBlock("span",{key:o},e.toDisplayString(d),1))),128))])):e.createCommentVNode("",!0)])]),t.showActionButton?(e.openBlock(),e.createElementBlock("button",{key:0,class:"bg-vsk-primary rounded-vsk px-4 py-2 text-sm font-semibold cursor-pointer hover:opacity-70",onClick:e.withModifiers(l,["stop"])},e.toDisplayString(t.actionLabel),1)):e.createCommentVNode("",!0),t.showStatusIndicator&&t.isConnected?(e.openBlock(),e.createElementBlock("div",xe)):e.createCommentVNode("",!0)],2))}}),Ce=["for"],$=p(e.defineComponent({__name:"FormGroup",props:{label:{},htmlFor:{default:""},customClass:{default:()=>({})},labelClass:{default:()=>({})}},setup(t){return(n,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex flex-col gap-2",t.customClass])},[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:t.htmlFor,class:e.normalizeClass(["text-sm font-medium text-primary dark:text-primary-dark",t.labelClass])},e.toDisplayString(t.label),11,Ce)):e.createCommentVNode("",!0),e.renderSlot(n.$slots,"default",{},void 0,!0)],2))}}),[["__scopeId","data-v-c0d9d9cb"]]),V=p(e.defineComponent({__name:"ListCard",props:{clickable:{type:Boolean,default:!1},customClass:{default:()=>({})}},emits:["click"],setup(t,{emit:n}){const a=t,l=n,i=()=>{a.clickable&&l("click")};return(r,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["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":a.clickable},t.customClass]),onClick:i},[e.renderSlot(r.$slots,"default",{},void 0,!0)],2))}}),[["__scopeId","data-v-f86d47da"]]),Be={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"},we=["src","alt","title"],Ee={key:1,class:"w-8 h-8 flex items-center justify-center"},$e=["src","alt"],Ve=["min","max","value"],S=e.defineComponent({__name:"SliderControl",props:{icon:{},alt:{default:""},tooltip:{default:""},modelValue:{},min:{default:0},max:{default:100},showButton:{type:Boolean,default:!1},iconClass:{default:()=>({})},getPercentageClass:{type:Function,default:()=>""}},emits:["update:modelValue","buttonClick"],setup(t,{emit:n}){const a=t,l=n,i=e.computed(()=>{if(a.max<=a.min)return 0;const o=a.max-a.min,m=a.modelValue-a.min;return Math.round(m/o*100)}),r=e.computed(()=>a.getPercentageClass?a.getPercentageClass(i.value):""),c=o=>{const m=o.target;l("update:modelValue",Number(m.value))},d=()=>{l("buttonClick")};return(o,m)=>(e.openBlock(),e.createElementBlock("div",Be,[t.showButton?(e.openBlock(),e.createElementBlock("button",{key:0,onClick:d,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"},[e.createElementVNode("img",{src:t.icon,alt:t.alt,title:t.tooltip,class:e.normalizeClass(["w-6 h-6 transition-all duration-200",t.iconClass])},null,10,we)])):(e.openBlock(),e.createElementBlock("div",Ee,[e.createElementVNode("img",{src:t.icon,alt:t.alt,class:"w-6 h-6 transition-all duration-200"},null,8,$e)])),e.createElementVNode("input",{type:"range",min:t.min,max:t.max,value:t.modelValue,onInput:c,class:"flex-1 transition-all duration-200 hover:scale-105"},null,40,Ve),e.createElementVNode("span",{class:e.normalizeClass(["w-12 text-right transition-all duration-200 font-medium",r.value])},e.toDisplayString(i.value)+"% ",3)]))}}),Se=["disabled"],N=e.defineComponent({__name:"SwitchToggle",props:{isOn:{type:Boolean},disabled:{type:Boolean,default:!1},size:{default:"small"},activeClass:{default:"bg-primary dark:bg-primary-dark"},inactiveClass:{default:"background"},customClass:{default:""}},emits:["toggle"],setup(t,{emit:n}){const a=t,l=n,i=()=>{l("toggle",!a.isOn)};return(r,c)=>(e.openBlock(),e.createElementBlock("button",{type:"button",onClick:i,disabled:t.disabled,class:e.normalizeClass(["relative inline-flex items-center rounded-full transition-colors",t.size==="small"?"h-6 w-11":"h-7 w-12",t.isOn?t.activeClass:t.inactiveClass,t.disabled?"opacity-50 cursor-not-allowed":"cursor-pointer",t.customClass])},[e.createElementVNode("span",{class:e.normalizeClass(["inline-block transform rounded-full bg-white shadow transition-transform",t.size==="small"?"h-4 w-4":"h-6 w-6",t.isOn?t.size==="small"?"translate-x-6":"translate-x-5":"translate-x-1"])},null,2)],10,Se))}}),Ne=["disabled"],ze=["src","alt","title"],z=e.defineComponent({__name:"ToggleControl",props:{icon:{},alt:{default:""},tooltip:{default:""},isActive:{type:Boolean,default:!1},isLoading:{type:Boolean,default:!1},iconClass:{default:()=>({})},customClass:{default:()=>({})}},emits:["click"],setup(t,{emit:n}){const a=n,l=()=>{a("click")};return(i,r)=>(e.openBlock(),e.createElementBlock("button",{onClick:l,class:e.normalizeClass(["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",{"animate-pulse":t.isLoading,"ring-2 ring-primary dark:ring-primary-dark":t.isActive,"opacity-60":!t.isActive,...t.customClass}]),disabled:t.isLoading},[e.createElementVNode("img",{src:t.icon,alt:t.alt,title:t.tooltip,class:e.normalizeClass(["m-auto w-12.5 h-12.5 transition-all duration-300 group-hover:scale-110 relative z-10",{"animate-spin":t.isLoading,"filter brightness-75":!t.isActive,"drop-shadow-lg":t.isActive,...t.iconClass}])},null,10,ze)],10,Ne))}}),De=["title"],Te=["src","alt"],Ie={key: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"},D=e.defineComponent({__name:"TrayIconButton",props:{icon:{},alt:{default:""},tooltip:{default:""},badge:{default:null},iconClass:{default:()=>({})},customClass:{default:""},tooltipClass:{default:""},showCustomTooltip:{type:Boolean,default:!1},customTooltipText:{default:""}},emits:["click"],setup(t,{emit:n}){const a=n,l=e.ref(!1),i=()=>{a("click")};return(r,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["p-1 rounded-corner relative hover:bg-primary dark:hover:bg-primary-dark group transition-all duration-300",t.customClass]),title:t.tooltip,onClick:i,onMouseenter:c[0]||(c[0]=d=>l.value=!0),onMouseleave:c[1]||(c[1]=d=>l.value=!1)},[e.createElementVNode("img",{src:t.icon,alt:t.alt,class:e.normalizeClass(["m-auto h-5.5 w-auto transition-all duration-300",t.iconClass])},null,10,Te),t.badge!==null&&t.badge>0?(e.openBlock(),e.createElementBlock("div",Ie,e.toDisplayString(t.badge),1)):e.createCommentVNode("",!0),t.showCustomTooltip&&t.customTooltipText?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["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",[t.tooltipClass,{"opacity-0 -translate-y-2":!l.value,"opacity-100 translate-y-0":l.value}]])},e.toDisplayString(t.customTooltipText),3)):e.createCommentVNode("",!0),e.renderSlot(r.$slots,"default")],42,De))}}),Le=[x,h,g,C,B,w,E,$,V,S,N,z,D],je={install(t){Le.forEach(n=>{t.component(n.name,n)})}};s.ActionButton=B,s.ConfigSection=w,s.DeviceCard=E,s.FormGroup=$,s.ListCard=V,s.SideBar=x,s.SideButton=h,s.SideGroup=g,s.SliderControl=S,s.SwitchToggle=N,s.ToggleControl=z,s.TrayIconButton=D,s.WindowFrame=C,s.default=je,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@tauri-apps/api/event"),require("@vasakgroup/plugin-vicons"),require("@tauri-apps/api/window")):typeof define=="function"&&define.amd?define(["exports","vue","@tauri-apps/api/event","@vasakgroup/plugin-vicons","@tauri-apps/api/window"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.VueLibVasak={},r.Vue,r.TauriEvent,r.VasakVicons,r.TauriWindow))})(this,(function(r,e,M,p,j){"use strict";function F(t,o){const a=e.ref("");let l=null,s=!1,i=0;async function d(){const c=++i,n=t.value;if(!n){a.value="";return}const m=o.value==="symbol"?await p.getSymbolSource(n):await p.getIconSource(n);c===i&&(a.value=m)}return e.onMounted(async()=>{const c=await M.listen("vicons:theme-changed",d);if(s){c();return}l=c,await d()}),e.onUnmounted(()=>{s=!0,l?.()}),e.watch(t,d),a}const O=["src","alt"],k=e.defineComponent({__name:"ThemeIcon",props:{name:{},type:{default:"icon"},size:{default:18},alt:{default:""}},setup(t){const o=t,a=F(e.toRef(o,"name"),e.toRef(o,"type")),l=e.computed(()=>`${o.size}px`);return(s,i)=>e.unref(a)?(e.openBlock(),e.createElementBlock("img",{key:0,src:e.unref(a),alt:t.alt,style:e.normalizeStyle({width:l.value,height:l.value}),class:"shrink-0 object-contain"},null,12,O)):(e.openBlock(),e.createElementBlock("span",{key:1,style:e.normalizeStyle({width:l.value,height:l.value}),class:"shrink-0"},null,4))}}),P={class:"flex flex-col gap-2"},W=["aria-expanded"],R={key:1,class:"flex flex-col gap-1"},g=e.defineComponent({__name:"SideGroup",props:{title:{},collapsed:{type:Boolean,default:!1},defaultOpen:{type:Boolean,default:!0}},setup(t){const o=t,a=e.ref(o.defaultOpen);return e.watch(()=>o.collapsed,l=>{l&&(a.value=!0)}),(l,s)=>(e.openBlock(),e.createElementBlock("section",P,[t.collapsed?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",{key:0,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":a.value,onClick:s[0]||(s[0]=i=>a.value=!a.value)},[e.createElementVNode("span",null,e.toDisplayString(t.title),1),e.createElementVNode("span",{class:e.normalizeClass(["text-[10px] transition-transform duration-200",a.value?"rotate-180":""])}," v ",2)],8,W)),a.value||t.collapsed?(e.openBlock(),e.createElementBlock("div",R,[e.renderSlot(l.$slots,"default")])):e.createCommentVNode("",!0)]))}}),q=["title","aria-label","disabled","aria-current"],G={key:1},U={key:0,class:"min-w-0 flex-1 truncate font-medium"},_={key:1,class:"rounded-corner bg-ui-surface px-2 py-0.5 font-semibold text-tx-muted text-xs"},h=e.defineComponent({__name:"SideButton",props:{label:{},icon:{default:""},active:{type:Boolean,default:!1},collapsed:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},badge:{default:""}},emits:["click"],setup(t){return(o,a)=>(e.openBlock(),e.createElementBlock("button",{type:"button",title:t.collapsed?t.label:void 0,"aria-label":t.collapsed?t.label:void 0,disabled:t.disabled,"aria-current":t.active?"page":void 0,class:e.normalizeClass(["group relative flex w-full items-center gap-3 rounded-corner border px-3 py-2 text-left text-sm transition-all duration-200",[t.active?"border-secondary bg-primary/15 text-tx-main shadow-sm":"border-transparent bg-transparent hover:border-ui-border hover:bg-ui-surface/70",t.disabled?"cursor-not-allowed opacity-60":"cursor-pointer",t.collapsed?"justify-center px-2":""]]),onClick:a[0]||(a[0]=l=>o.$emit("click"))},[e.createElementVNode("span",{class:e.normalizeClass(["flex h-8 w-8 shrink-0 items-center justify-center rounded-corner font-semibold text-xs uppercase tracking-wide",t.active?"border-secondary bg-primary/20":""]),"aria-hidden":"true"},[t.icon?(e.openBlock(),e.createBlock(k,{key:0,name:t.icon,size:20},null,8,["name"])):(e.openBlock(),e.createElementBlock("span",G,e.toDisplayString(t.label.charAt(0).toUpperCase()),1))],2),t.collapsed?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",U,e.toDisplayString(t.label),1)),!t.collapsed&&t.badge!==""?(e.openBlock(),e.createElementBlock("span",_,e.toDisplayString(t.badge),1)):e.createCommentVNode("",!0)],10,q))}}),H={key:0,class:"flex flex-col gap-2 border-ui-border border-b p-2"},J={class:"flex items-center gap-2"},K=["aria-label","aria-expanded"],Q={key:0,class:"min-w-0 flex-1"},X={key:0,class:"truncate font-semibold text-sm"},Y={key:1,class:"truncate text-tx-muted text-xs"},Z={key:0},v={key:1,class:"flex border-ui-border border-b p-2"},ee=["aria-label","aria-expanded"],te={class:"flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-2"},C="hidden h-8 w-8 shrink-0 items-center justify-center rounded-corner border border-ui-border bg-ui-surface/70 transition-colors hover:bg-ui-surface md:inline-flex",B=e.defineComponent({__name:"SideBar",props:{title:{default:""},subtitle:{default:""},categories:{default:()=>[]},modelValue:{default:""},collapsed:{type:Boolean,default:void 0},collapseLabel:{default:"Collapse"},expandLabel:{default:"Expand"}},emits:["update:modelValue","update:collapsed","change"],setup(t,{expose:o,emit:a}){const l=t,s=a,i=e.ref(l.collapsed??!1),d=e.ref(!1);let c=null;const n=e.computed(()=>d.value||i.value),m=e.computed(()=>!!(l.title||l.subtitle));e.computed(()=>l.categories.length>0);function y(){d.value=c?.matches??!1}function A(){i.value=!i.value,s("update:collapsed",i.value)}function Ge(f){s("update:modelValue",f),s("change",f)}return e.watch(()=>l.collapsed,f=>{f!==void 0&&(i.value=f)}),e.onMounted(()=>{c=window.matchMedia("(max-width: 767px)"),y(),c.addEventListener("change",y)}),e.onBeforeUnmount(()=>c?.removeEventListener("change",y)),o({collapsed:n}),(f,Je)=>(e.openBlock(),e.createElementBlock("aside",{class:e.normalizeClass(["relative z-30 flex h-full shrink-0 flex-col rounded-corner border border-ui-border bg-ui-surface/70 transition-all duration-300",["w-[84px]",n.value?"md:w-[84px]":"md:w-72"]])},[m.value||f.$slots.header?(e.openBlock(),e.createElementBlock("header",H,[e.createElementVNode("div",J,[e.createElementVNode("button",{type:"button",class:e.normalizeClass(C),"aria-label":n.value?t.expandLabel:t.collapseLabel,"aria-expanded":!n.value,onClick:A},[e.createVNode(k,{name:n.value?"pan-end-symbolic":"pan-start-symbolic",type:"symbol",size:16},null,8,["name"])],8,K),m.value&&!n.value?(e.openBlock(),e.createElementBlock("div",Q,[t.title?(e.openBlock(),e.createElementBlock("p",X,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),t.subtitle?(e.openBlock(),e.createElementBlock("p",Y,e.toDisplayString(t.subtitle),1)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)]),f.$slots.header&&!n.value?(e.openBlock(),e.createElementBlock("div",Z,[e.renderSlot(f.$slots,"header",{collapsed:n.value})])):e.createCommentVNode("",!0)])):(e.openBlock(),e.createElementBlock("div",v,[e.createElementVNode("button",{type:"button",class:e.normalizeClass(C),"aria-label":n.value?t.expandLabel:t.collapseLabel,"aria-expanded":!n.value,onClick:A},[e.createVNode(k,{name:n.value?"pan-end-symbolic":"pan-start-symbolic",type:"symbol",size:16},null,8,["name"])],8,ee)])),e.createElementVNode("div",te,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.categories,x=>(e.openBlock(),e.createBlock(g,{key:x.id,title:x.title,collapsed:n.value},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(x.items,u=>(e.openBlock(),e.createBlock(h,{key:u.id,label:u.label,icon:u.icon,badge:u.badge,disabled:u.disabled,collapsed:n.value,active:t.modelValue===u.id,onClick:Ke=>Ge(u.id)},null,8,["label","icon","badge","disabled","collapsed","active","onClick"]))),128))]),_:2},1032,["title","collapsed"]))),128)),e.renderSlot(f.$slots,"default",{collapsed:n.value})])],2))}}),ae={class:"flex min-w-0 flex-col gap-1"},le=["for"],oe={class:"relative flex min-w-0 items-center"},ne=["id"],w=e.defineComponent({inheritAttrs:!1,__name:"SelectField",props:e.mergeModels({label:{}},{modelValue:{required:!0},modelModifiers:{}}),emits:["update:modelValue"],setup(t){const o=t,a=e.useAttrs(),l=e.useId(),s=e.computed(()=>a.id??l),[i,d]=e.useModel(t,"modelValue",{set(c){return d.number?Number(c):c}});return(c,n)=>(e.openBlock(),e.createElementBlock("div",ae,[o.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:s.value,class:"text-tx-muted text-xs"},e.toDisplayString(o.label),9,le)):e.createCommentVNode("",!0),e.createElementVNode("div",oe,[e.withDirectives(e.createElementVNode("select",e.mergeProps({id:s.value,"onUpdate:modelValue":n[0]||(n[0]=m=>e.isRef(i)?i.value=m:null),class:"min-w-0 flex-1 appearance-none truncate rounded-corner border border-ui-border bg-ui-surface/60 py-1.5 pr-8 pl-2 text-sm text-tx-main"},e.unref(a)),[e.renderSlot(c.$slots,"default")],16,ne),[[e.vModelSelect,e.unref(i)]]),e.createVNode(k,{name:"pan-down-symbolic",type:"symbol",size:14,class:"pointer-events-none absolute right-2"})])]))}}),se={"data-tauri-drag-region":""},ie=["src","alt"],re={"data-tauri-drag-region":""},ce={"data-tauri-drag-region":""},de=["src"],me=["src"],fe=["src"],ue=e.defineComponent({__name:"TopBar",props:{title:String,image:String},setup(t){const o=e.ref(null),a=j.getCurrentWindow(),l=e.ref(""),s=e.ref(""),i=e.ref(""),d=t;return e.onMounted(async()=>{l.value=await p.getIconSource("window-close"),s.value=await p.getIconSource("window-minimize"),i.value=await p.getIconSource("window-maximize")}),(c,n)=>(e.openBlock(),e.createElementBlock("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_key:"bar",ref:o},[e.createElementVNode("div",se,[e.createElementVNode("img",{src:d.image,"data-tauri-drag-region":"",class:"h-6 w-auto",alt:d.title},null,8,ie)]),e.createElementVNode("div",re,e.toDisplayString(d.title),1),e.createElementVNode("div",ce,[e.createElementVNode("span",{class:"win-button",onClick:n[0]||(n[0]=m=>e.unref(a).minimize())},[e.createElementVNode("img",{src:s.value,class:"h-6 w-6 inline-block",alt:"Minimize"},null,8,de)]),e.createElementVNode("span",{class:"win-button",onClick:n[1]||(n[1]=m=>e.unref(a).toggleMaximize())},[e.createElementVNode("img",{src:i.value,class:"h-6 w-6 inline-block",alt:"Maximize"},null,8,me)]),e.createElementVNode("span",{class:"win-button",onClick:n[2]||(n[2]=m=>e.unref(a).close())},[e.createElementVNode("img",{src:l.value,class:"h-6 w-6 inline-block",alt:"Close"},null,8,fe)])])],512))}}),E=e.defineComponent({__name:"WindowFrame",props:{title:{default:"Vasak"},image:{default:""}},setup(t){const o=t;return(a,l)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(ue,{title:o.title,image:o.image},null,8,["title","image"]),e.renderSlot(a.$slots,"default")],64))}}),ke=["type","disabled"],pe={key:0,class:"w-4 h-4 animate-spin rounded-full border-2 border-current border-t-transparent"},be=["src","alt"],ge={key:2},he=["src","alt"],ye=e.defineComponent({__name:"ActionButton",props:{label:{},disabled:{type:Boolean,default:!1},variant:{default:"primary"},loading:{type:Boolean,default:!1},customClass:{default:()=>({})},size:{default:"md"},fullWidth:{type:Boolean,default:!1},iconSrc:{default:""},iconAlt:{default:""},iconRight:{type:Boolean,default:!1},type:{default:"button"},stopPropagation:{type:Boolean,default:!1},preventDefault:{type:Boolean,default:!1}},emits:["click"],setup(t,{emit:o}){const a=t,l=o,s={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"},i={sm:"px-2 py-1 text-xs",md:"px-3 py-1 text-sm",lg:"px-4 py-2 text-base"},d=c=>{a.stopPropagation&&c.stopPropagation(),a.preventDefault&&c.preventDefault(),!a.disabled&&!a.loading&&l("click")};return(c,n)=>(e.openBlock(),e.createElementBlock("button",{type:a.type,onClick:d,class:e.normalizeClass(["rounded-corner transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2",[s[a.variant],i[a.size],a.fullWidth?"w-full":"",a.iconSrc&&!a.label?"px-2 py-2":"",t.customClass]]),disabled:a.disabled||a.loading},[t.loading?(e.openBlock(),e.createElementBlock("span",pe)):e.createCommentVNode("",!0),a.iconSrc&&!a.iconRight?(e.openBlock(),e.createElementBlock("img",{key:1,src:a.iconSrc,alt:a.iconAlt||a.label,class:"w-4 h-4"},null,8,be)):e.createCommentVNode("",!0),a.label?(e.openBlock(),e.createElementBlock("span",ge,e.toDisplayString(a.label),1)):e.createCommentVNode("",!0),a.iconSrc&&a.iconRight?(e.openBlock(),e.createElementBlock("img",{key:3,src:a.iconSrc,alt:a.iconAlt||a.label,class:"w-4 h-4"},null,8,he)):e.createCommentVNode("",!0)],10,ke))}}),b=(t,o)=>{const a=t.__vccOpts||t;for(const[l,s]of o)a[l]=s;return a},$=b(ye,[["__scopeId","data-v-2eaf6e27"]]),xe={class:"text-base font-semibold m-0 text-primary dark:text-primary-dark"},V=b(e.defineComponent({__name:"ConfigSection",props:{title:{},icon:{default:""},customClass:{default:()=>({})}},setup(t){return(o,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex flex-col gap-4 p-4 background rounded-corner",t.customClass])},[e.createElementVNode("h3",xe,e.toDisplayString(t.icon?`${t.icon} ${t.title}`:t.title),1),e.renderSlot(o.$slots,"default",{},void 0,!0)],2))}}),[["__scopeId","data-v-45bd4eab"]]),Ce={class:"flex items-center gap-3 flex-1 min-w-0"},Be=["src","alt"],we={class:"min-w-0"},Ee={class:"font-semibold truncate"},$e={key:0,class:"text-xs text-gray-400 truncate"},Ve={key:1,class:"text-xs text-gray-400 truncate"},Se={key:2,class:"text-xs text-gray-400 flex gap-2 mt-1"},Ne={key:1,class:"w-2 h-2 rounded-full bg-green-500"},S=e.defineComponent({__name:"DeviceCard",props:{icon:{},title:{},subtitle:{default:""},metadata:{default:""},extraInfo:{default:()=>[]},isConnected:{type:Boolean,default:!1},showActionButton:{type:Boolean,default:!0},actionLabel:{default:"Conectar"},showStatusIndicator:{type:Boolean,default:!1},customClass:{default:""},clickable:{type:Boolean,default:!1}},emits:["action","click"],setup(t,{emit:o}){const a=o,l=()=>{a("action")},s=()=>{a("click")};return(i,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex items-center justify-between background rounded-vsk px-6 py-3 mb-4",[{"border-l-4 border-green-500":t.isConnected},t.customClass]]),onClick:s},[e.createElementVNode("div",Ce,[e.createElementVNode("img",{src:t.icon,alt:t.title,class:"h-7 w-7 shrink-0"},null,8,Be),e.createElementVNode("div",we,[e.createElementVNode("div",Ee,e.toDisplayString(t.title),1),t.subtitle?(e.openBlock(),e.createElementBlock("div",$e,e.toDisplayString(t.subtitle),1)):e.createCommentVNode("",!0),t.metadata?(e.openBlock(),e.createElementBlock("div",Ve,e.toDisplayString(t.metadata),1)):e.createCommentVNode("",!0),t.extraInfo&&t.extraInfo.length>0?(e.openBlock(),e.createElementBlock("div",Se,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.extraInfo,(c,n)=>(e.openBlock(),e.createElementBlock("span",{key:n},e.toDisplayString(c),1))),128))])):e.createCommentVNode("",!0)])]),t.showActionButton?(e.openBlock(),e.createElementBlock("button",{key:0,class:"bg-vsk-primary rounded-vsk px-4 py-2 text-sm font-semibold cursor-pointer hover:opacity-70",onClick:e.withModifiers(l,["stop"])},e.toDisplayString(t.actionLabel),1)):e.createCommentVNode("",!0),t.showStatusIndicator&&t.isConnected?(e.openBlock(),e.createElementBlock("div",Ne)):e.createCommentVNode("",!0)],2))}}),ze=["for"],N=b(e.defineComponent({__name:"FormGroup",props:{label:{},htmlFor:{default:""},customClass:{default:()=>({})},labelClass:{default:()=>({})}},setup(t){return(o,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex flex-col gap-2",t.customClass])},[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:t.htmlFor,class:e.normalizeClass(["text-sm font-medium text-primary dark:text-primary-dark",t.labelClass])},e.toDisplayString(t.label),11,ze)):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"default",{},void 0,!0)],2))}}),[["__scopeId","data-v-c0d9d9cb"]]),z=b(e.defineComponent({__name:"ListCard",props:{clickable:{type:Boolean,default:!1},customClass:{default:()=>({})}},emits:["click"],setup(t,{emit:o}){const a=t,l=o,s=()=>{a.clickable&&l("click")};return(i,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["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":a.clickable},t.customClass]),onClick:s},[e.renderSlot(i.$slots,"default",{},void 0,!0)],2))}}),[["__scopeId","data-v-f86d47da"]]),De={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"},Te=["src","alt","title"],Ie={key:1,class:"w-8 h-8 flex items-center justify-center"},Le=["src","alt"],Ae=["min","max","value"],D=e.defineComponent({__name:"SliderControl",props:{icon:{},alt:{default:""},tooltip:{default:""},modelValue:{},min:{default:0},max:{default:100},showButton:{type:Boolean,default:!1},iconClass:{default:()=>({})},getPercentageClass:{type:Function,default:()=>""}},emits:["update:modelValue","buttonClick"],setup(t,{emit:o}){const a=t,l=o,s=e.computed(()=>{if(a.max<=a.min)return 0;const n=a.max-a.min,m=a.modelValue-a.min;return Math.round(m/n*100)}),i=e.computed(()=>a.getPercentageClass?a.getPercentageClass(s.value):""),d=n=>{const m=n.target;l("update:modelValue",Number(m.value))},c=()=>{l("buttonClick")};return(n,m)=>(e.openBlock(),e.createElementBlock("div",De,[t.showButton?(e.openBlock(),e.createElementBlock("button",{key:0,onClick:c,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"},[e.createElementVNode("img",{src:t.icon,alt:t.alt,title:t.tooltip,class:e.normalizeClass(["w-6 h-6 transition-all duration-200",t.iconClass])},null,10,Te)])):(e.openBlock(),e.createElementBlock("div",Ie,[e.createElementVNode("img",{src:t.icon,alt:t.alt,class:"w-6 h-6 transition-all duration-200"},null,8,Le)])),e.createElementVNode("input",{type:"range",min:t.min,max:t.max,value:t.modelValue,onInput:d,class:"flex-1 transition-all duration-200 hover:scale-105"},null,40,Ae),e.createElementVNode("span",{class:e.normalizeClass(["w-12 text-right transition-all duration-200 font-medium",i.value])},e.toDisplayString(s.value)+"% ",3)]))}}),Me=["disabled"],T=e.defineComponent({__name:"SwitchToggle",props:{isOn:{type:Boolean},disabled:{type:Boolean,default:!1},size:{default:"small"},activeClass:{default:"bg-primary dark:bg-primary-dark"},inactiveClass:{default:"background"},customClass:{default:""}},emits:["toggle"],setup(t,{emit:o}){const a=t,l=o,s=()=>{l("toggle",!a.isOn)};return(i,d)=>(e.openBlock(),e.createElementBlock("button",{type:"button",onClick:s,disabled:t.disabled,class:e.normalizeClass(["relative inline-flex items-center rounded-full transition-colors",t.size==="small"?"h-6 w-11":"h-7 w-12",t.isOn?t.activeClass:t.inactiveClass,t.disabled?"opacity-50 cursor-not-allowed":"cursor-pointer",t.customClass])},[e.createElementVNode("span",{class:e.normalizeClass(["inline-block transform rounded-full bg-white shadow transition-transform",t.size==="small"?"h-4 w-4":"h-6 w-6",t.isOn?t.size==="small"?"translate-x-6":"translate-x-5":"translate-x-1"])},null,2)],10,Me))}}),je=["disabled"],Fe=["src","alt","title"],I=e.defineComponent({__name:"ToggleControl",props:{icon:{},alt:{default:""},tooltip:{default:""},isActive:{type:Boolean,default:!1},isLoading:{type:Boolean,default:!1},iconClass:{default:()=>({})},customClass:{default:()=>({})}},emits:["click"],setup(t,{emit:o}){const a=o,l=()=>{a("click")};return(s,i)=>(e.openBlock(),e.createElementBlock("button",{onClick:l,class:e.normalizeClass(["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",{"animate-pulse":t.isLoading,"ring-2 ring-primary dark:ring-primary-dark":t.isActive,"opacity-60":!t.isActive,...t.customClass}]),disabled:t.isLoading},[e.createElementVNode("img",{src:t.icon,alt:t.alt,title:t.tooltip,class:e.normalizeClass(["m-auto w-12.5 h-12.5 transition-all duration-300 group-hover:scale-110 relative z-10",{"animate-spin":t.isLoading,"filter brightness-75":!t.isActive,"drop-shadow-lg":t.isActive,...t.iconClass}])},null,10,Fe)],10,je))}}),Oe=["title"],Pe=["src","alt"],We={key: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"},L=e.defineComponent({__name:"TrayIconButton",props:{icon:{},alt:{default:""},tooltip:{default:""},badge:{default:null},iconClass:{default:()=>({})},customClass:{default:""},tooltipClass:{default:""},showCustomTooltip:{type:Boolean,default:!1},customTooltipText:{default:""}},emits:["click"],setup(t,{emit:o}){const a=o,l=e.ref(!1),s=()=>{a("click")};return(i,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["p-1 rounded-corner relative hover:bg-primary dark:hover:bg-primary-dark group transition-all duration-300",t.customClass]),title:t.tooltip,onClick:s,onMouseenter:d[0]||(d[0]=c=>l.value=!0),onMouseleave:d[1]||(d[1]=c=>l.value=!1)},[e.createElementVNode("img",{src:t.icon,alt:t.alt,class:e.normalizeClass(["m-auto h-5.5 w-auto transition-all duration-300",t.iconClass])},null,10,Pe),t.badge!==null&&t.badge>0?(e.openBlock(),e.createElementBlock("div",We,e.toDisplayString(t.badge),1)):e.createCommentVNode("",!0),t.showCustomTooltip&&t.customTooltipText?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["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",[t.tooltipClass,{"opacity-0 -translate-y-2":!l.value,"opacity-100 translate-y-0":l.value}]])},e.toDisplayString(t.customTooltipText),3)):e.createCommentVNode("",!0),e.renderSlot(i.$slots,"default")],42,Oe))}}),Re=[B,h,g,w,k,E,$,V,S,N,z,D,T,I,L],qe={install(t){Re.forEach(o=>{t.component(o.name,o)})}};r.ActionButton=$,r.ConfigSection=V,r.DeviceCard=S,r.FormGroup=N,r.ListCard=z,r.SelectField=w,r.SideBar=B,r.SideButton=h,r.SideGroup=g,r.SliderControl=D,r.SwitchToggle=T,r.ThemeIcon=k,r.ToggleControl=I,r.TrayIconButton=L,r.WindowFrame=E,r.default=qe,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vasakgroup/vue-libvasak",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "Vue componenets for VSK Applications",
   "main": "./dist/vue-libvasak.umd.js",
   "module": "./dist/vue-libvasak.es.js",