@vasakgroup/vue-libvasak 0.1.0 → 0.2.0

package/dist/vue-libvasak.umd.js

@@ -1 +1 @@
-(function(c,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],s):(c=typeof globalThis<"u"?globalThis:c||self,s(c.VueLibVasak={},c.Vue))})(this,(function(c,s){"use strict";const B=(i,e)=>{const t=i.__vccOpts||i;for(const[l,a]of e)t[l]=a;return t},V={},M={class:"sidebar"};function F(i,e){return s.openBlock(),s.createElementBlock("div",M,[s.renderSlot(i.$slots,"default")])}const z=B(V,[["render",F]]),U={href:"#",class:"sidebar-button"},G=["src"],W=s.defineComponent({__name:"SideButton",props:{title:{type:String,default:"Link"},image:{type:String,default:""}},setup(i){return(e,t)=>(s.openBlock(),s.createElementBlock("a",U,[s.createElementVNode("img",{src:i.image,class:"img-fluid"},null,8,G)]))}});function $(i,e,t,l){if(typeof e=="function"?i!==e||!l:!e.has(i))throw new TypeError("Cannot read private member from an object whose class did not declare it");return t==="m"?l:t==="a"?l.call(i):l?l.value:e.get(i)}function H(i,e,t,l,a){if(typeof e=="function"?i!==e||!0:!e.has(i))throw new TypeError("Cannot write private member to an object whose class did not declare it");return e.set(i,t),t}typeof SuppressedError=="function"&&SuppressedError;var _;const u="__TAURI_TO_IPC_KEY__";function j(i,e=!1){return window.__TAURI_INTERNALS__.transformCallback(i,e)}async function n(i,e={},t){return window.__TAURI_INTERNALS__.invoke(i,e,t)}class q{get rid(){return $(this,_,"f")}constructor(e){_.set(this,void 0),H(this,_,e)}async close(){return n("plugin:resources|close",{rid:this.rid})}}_=new WeakMap;class k{constructor(...e){this.type="Logical",e.length===1?"Logical"in e[0]?(this.width=e[0].Logical.width,this.height=e[0].Logical.height):(this.width=e[0].width,this.height=e[0].height):(this.width=e[0],this.height=e[1])}toPhysical(e){return new g(this.width*e,this.height*e)}[u](){return{width:this.width,height:this.height}}toJSON(){return this[u]()}}class g{constructor(...e){this.type="Physical",e.length===1?"Physical"in e[0]?(this.width=e[0].Physical.width,this.height=e[0].Physical.height):(this.width=e[0].width,this.height=e[0].height):(this.width=e[0],this.height=e[1])}toLogical(e){return new k(this.width/e,this.height/e)}[u](){return{width:this.width,height:this.height}}toJSON(){return this[u]()}}class h{constructor(e){this.size=e}toLogical(e){return this.size instanceof k?this.size:this.size.toLogical(e)}toPhysical(e){return this.size instanceof g?this.size:this.size.toPhysical(e)}[u](){return{[`${this.size.type}`]:{width:this.size.width,height:this.size.height}}}toJSON(){return this[u]()}}class E{constructor(...e){this.type="Logical",e.length===1?"Logical"in e[0]?(this.x=e[0].Logical.x,this.y=e[0].Logical.y):(this.x=e[0].x,this.y=e[0].y):(this.x=e[0],this.y=e[1])}toPhysical(e){return new d(this.x*e,this.y*e)}[u](){return{x:this.x,y:this.y}}toJSON(){return this[u]()}}class d{constructor(...e){this.type="Physical",e.length===1?"Physical"in e[0]?(this.x=e[0].Physical.x,this.y=e[0].Physical.y):(this.x=e[0].x,this.y=e[0].y):(this.x=e[0],this.y=e[1])}toLogical(e){return new E(this.x/e,this.y/e)}[u](){return{x:this.x,y:this.y}}toJSON(){return this[u]()}}class y{constructor(e){this.position=e}toLogical(e){return this.position instanceof E?this.position:this.position.toLogical(e)}toPhysical(e){return this.position instanceof d?this.position:this.position.toPhysical(e)}[u](){return{[`${this.position.type}`]:{x:this.position.x,y:this.position.y}}}toJSON(){return this[u]()}}var o;(function(i){i.WINDOW_RESIZED="tauri://resize",i.WINDOW_MOVED="tauri://move",i.WINDOW_CLOSE_REQUESTED="tauri://close-requested",i.WINDOW_DESTROYED="tauri://destroyed",i.WINDOW_FOCUS="tauri://focus",i.WINDOW_BLUR="tauri://blur",i.WINDOW_SCALE_FACTOR_CHANGED="tauri://scale-change",i.WINDOW_THEME_CHANGED="tauri://theme-changed",i.WINDOW_CREATED="tauri://window-created",i.WEBVIEW_CREATED="tauri://webview-created",i.DRAG_ENTER="tauri://drag-enter",i.DRAG_OVER="tauri://drag-over",i.DRAG_DROP="tauri://drag-drop",i.DRAG_LEAVE="tauri://drag-leave"})(o||(o={}));async function N(i,e){window.__TAURI_EVENT_PLUGIN_INTERNALS__.unregisterListener(i,e),await n("plugin:event|unlisten",{event:i,eventId:e})}async function x(i,e,t){var l;const a=typeof t?.target=="string"?{kind:"AnyLabel",label:t.target}:(l=t?.target)!==null&&l!==void 0?l:{kind:"Any"};return n("plugin:event|listen",{event:i,target:a,handler:j(e)}).then(w=>async()=>N(i,w))}async function J(i,e,t){return x(i,l=>{N(i,l.id),e(l)},t)}async function Z(i,e){await n("plugin:event|emit",{event:i,payload:e})}async function Q(i,e,t){await n("plugin:event|emit_to",{target:typeof i=="string"?{kind:"AnyLabel",label:i}:i,event:e,payload:t})}class p extends q{constructor(e){super(e)}static async new(e,t,l){return n("plugin:image|new",{rgba:m(e),width:t,height:l}).then(a=>new p(a))}static async fromBytes(e){return n("plugin:image|from_bytes",{bytes:m(e)}).then(t=>new p(t))}static async fromPath(e){return n("plugin:image|from_path",{path:e}).then(t=>new p(t))}async rgba(){return n("plugin:image|rgba",{rid:this.rid}).then(e=>new Uint8Array(e))}async size(){return n("plugin:image|size",{rid:this.rid})}}function m(i){return i==null?null:typeof i=="string"?i:i instanceof p?i.rid:i}var f;(function(i){i[i.Critical=1]="Critical",i[i.Informational=2]="Informational"})(f||(f={}));class Y{constructor(e){this._preventDefault=!1,this.event=e.event,this.id=e.id}preventDefault(){this._preventDefault=!0}isPreventDefault(){return this._preventDefault}}var C;(function(i){i.None="none",i.Normal="normal",i.Indeterminate="indeterminate",i.Paused="paused",i.Error="error"})(C||(C={}));function I(){return new O(window.__TAURI_INTERNALS__.metadata.currentWindow.label,{skip:!0})}async function v(){return n("plugin:window|get_all_windows").then(i=>i.map(e=>new O(e,{skip:!0})))}const D=["tauri://created","tauri://error"];class O{constructor(e,t={}){var l;this.label=e,this.listeners=Object.create(null),t?.skip||n("plugin:window|create",{options:{...t,parent:typeof t.parent=="string"?t.parent:(l=t.parent)===null||l===void 0?void 0:l.label,label:e}}).then(async()=>this.emit("tauri://created")).catch(async a=>this.emit("tauri://error",a))}static async getByLabel(e){var t;return(t=(await v()).find(l=>l.label===e))!==null&&t!==void 0?t:null}static getCurrent(){return I()}static async getAll(){return v()}static async getFocusedWindow(){for(const e of await v())if(await e.isFocused())return e;return null}async listen(e,t){return this._handleTauriEvent(e,t)?()=>{const l=this.listeners[e];l.splice(l.indexOf(t),1)}:x(e,t,{target:{kind:"Window",label:this.label}})}async once(e,t){return this._handleTauriEvent(e,t)?()=>{const l=this.listeners[e];l.splice(l.indexOf(t),1)}:J(e,t,{target:{kind:"Window",label:this.label}})}async emit(e,t){if(D.includes(e)){for(const l of this.listeners[e]||[])l({event:e,id:-1,payload:t});return}return Z(e,t)}async emitTo(e,t,l){if(D.includes(t)){for(const a of this.listeners[t]||[])a({event:t,id:-1,payload:l});return}return Q(e,t,l)}_handleTauriEvent(e,t){return D.includes(e)?(e in this.listeners?this.listeners[e].push(t):this.listeners[e]=[t],!0):!1}async scaleFactor(){return n("plugin:window|scale_factor",{label:this.label})}async innerPosition(){return n("plugin:window|inner_position",{label:this.label}).then(e=>new d(e))}async outerPosition(){return n("plugin:window|outer_position",{label:this.label}).then(e=>new d(e))}async innerSize(){return n("plugin:window|inner_size",{label:this.label}).then(e=>new g(e))}async outerSize(){return n("plugin:window|outer_size",{label:this.label}).then(e=>new g(e))}async isFullscreen(){return n("plugin:window|is_fullscreen",{label:this.label})}async isMinimized(){return n("plugin:window|is_minimized",{label:this.label})}async isMaximized(){return n("plugin:window|is_maximized",{label:this.label})}async isFocused(){return n("plugin:window|is_focused",{label:this.label})}async isDecorated(){return n("plugin:window|is_decorated",{label:this.label})}async isResizable(){return n("plugin:window|is_resizable",{label:this.label})}async isMaximizable(){return n("plugin:window|is_maximizable",{label:this.label})}async isMinimizable(){return n("plugin:window|is_minimizable",{label:this.label})}async isClosable(){return n("plugin:window|is_closable",{label:this.label})}async isVisible(){return n("plugin:window|is_visible",{label:this.label})}async title(){return n("plugin:window|title",{label:this.label})}async theme(){return n("plugin:window|theme",{label:this.label})}async isAlwaysOnTop(){return n("plugin:window|is_always_on_top",{label:this.label})}async center(){return n("plugin:window|center",{label:this.label})}async requestUserAttention(e){let t=null;return e&&(e===f.Critical?t={type:"Critical"}:t={type:"Informational"}),n("plugin:window|request_user_attention",{label:this.label,value:t})}async setResizable(e){return n("plugin:window|set_resizable",{label:this.label,value:e})}async setEnabled(e){return n("plugin:window|set_enabled",{label:this.label,value:e})}async isEnabled(){return n("plugin:window|is_enabled",{label:this.label})}async setMaximizable(e){return n("plugin:window|set_maximizable",{label:this.label,value:e})}async setMinimizable(e){return n("plugin:window|set_minimizable",{label:this.label,value:e})}async setClosable(e){return n("plugin:window|set_closable",{label:this.label,value:e})}async setTitle(e){return n("plugin:window|set_title",{label:this.label,value:e})}async maximize(){return n("plugin:window|maximize",{label:this.label})}async unmaximize(){return n("plugin:window|unmaximize",{label:this.label})}async toggleMaximize(){return n("plugin:window|toggle_maximize",{label:this.label})}async minimize(){return n("plugin:window|minimize",{label:this.label})}async unminimize(){return n("plugin:window|unminimize",{label:this.label})}async show(){return n("plugin:window|show",{label:this.label})}async hide(){return n("plugin:window|hide",{label:this.label})}async close(){return n("plugin:window|close",{label:this.label})}async destroy(){return n("plugin:window|destroy",{label:this.label})}async setDecorations(e){return n("plugin:window|set_decorations",{label:this.label,value:e})}async setShadow(e){return n("plugin:window|set_shadow",{label:this.label,value:e})}async setEffects(e){return n("plugin:window|set_effects",{label:this.label,value:e})}async clearEffects(){return n("plugin:window|set_effects",{label:this.label,value:null})}async setAlwaysOnTop(e){return n("plugin:window|set_always_on_top",{label:this.label,value:e})}async setAlwaysOnBottom(e){return n("plugin:window|set_always_on_bottom",{label:this.label,value:e})}async setContentProtected(e){return n("plugin:window|set_content_protected",{label:this.label,value:e})}async setSize(e){return n("plugin:window|set_size",{label:this.label,value:e instanceof h?e:new h(e)})}async setMinSize(e){return n("plugin:window|set_min_size",{label:this.label,value:e instanceof h?e:e?new h(e):null})}async setMaxSize(e){return n("plugin:window|set_max_size",{label:this.label,value:e instanceof h?e:e?new h(e):null})}async setSizeConstraints(e){function t(l){return l?{Logical:l}:null}return n("plugin:window|set_size_constraints",{label:this.label,value:{minWidth:t(e?.minWidth),minHeight:t(e?.minHeight),maxWidth:t(e?.maxWidth),maxHeight:t(e?.maxHeight)}})}async setPosition(e){return n("plugin:window|set_position",{label:this.label,value:e instanceof y?e:new y(e)})}async setFullscreen(e){return n("plugin:window|set_fullscreen",{label:this.label,value:e})}async setSimpleFullscreen(e){return n("plugin:window|set_simple_fullscreen",{label:this.label,value:e})}async setFocus(){return n("plugin:window|set_focus",{label:this.label})}async setFocusable(e){return n("plugin:window|set_focusable",{label:this.label,value:e})}async setIcon(e){return n("plugin:window|set_icon",{label:this.label,value:m(e)})}async setSkipTaskbar(e){return n("plugin:window|set_skip_taskbar",{label:this.label,value:e})}async setCursorGrab(e){return n("plugin:window|set_cursor_grab",{label:this.label,value:e})}async setCursorVisible(e){return n("plugin:window|set_cursor_visible",{label:this.label,value:e})}async setCursorIcon(e){return n("plugin:window|set_cursor_icon",{label:this.label,value:e})}async setBackgroundColor(e){return n("plugin:window|set_background_color",{color:e})}async setCursorPosition(e){return n("plugin:window|set_cursor_position",{label:this.label,value:e instanceof y?e:new y(e)})}async setIgnoreCursorEvents(e){return n("plugin:window|set_ignore_cursor_events",{label:this.label,value:e})}async startDragging(){return n("plugin:window|start_dragging",{label:this.label})}async startResizeDragging(e){return n("plugin:window|start_resize_dragging",{label:this.label,value:e})}async setBadgeCount(e){return n("plugin:window|set_badge_count",{label:this.label,value:e})}async setBadgeLabel(e){return n("plugin:window|set_badge_label",{label:this.label,value:e})}async setOverlayIcon(e){return n("plugin:window|set_overlay_icon",{label:this.label,value:e?m(e):void 0})}async setProgressBar(e){return n("plugin:window|set_progress_bar",{label:this.label,value:e})}async setVisibleOnAllWorkspaces(e){return n("plugin:window|set_visible_on_all_workspaces",{label:this.label,value:e})}async setTitleBarStyle(e){return n("plugin:window|set_title_bar_style",{label:this.label,value:e})}async setTheme(e){return n("plugin:window|set_theme",{label:this.label,value:e})}async onResized(e){return this.listen(o.WINDOW_RESIZED,t=>{t.payload=new g(t.payload),e(t)})}async onMoved(e){return this.listen(o.WINDOW_MOVED,t=>{t.payload=new d(t.payload),e(t)})}async onCloseRequested(e){return this.listen(o.WINDOW_CLOSE_REQUESTED,async t=>{const l=new Y(t);await e(l),l.isPreventDefault()||await this.destroy()})}async onDragDropEvent(e){const t=await this.listen(o.DRAG_ENTER,r=>{e({...r,payload:{type:"enter",paths:r.payload.paths,position:new d(r.payload.position)}})}),l=await this.listen(o.DRAG_OVER,r=>{e({...r,payload:{type:"over",position:new d(r.payload.position)}})}),a=await this.listen(o.DRAG_DROP,r=>{e({...r,payload:{type:"drop",paths:r.payload.paths,position:new d(r.payload.position)}})}),w=await this.listen(o.DRAG_LEAVE,r=>{e({...r,payload:{type:"leave"}})});return()=>{t(),a(),l(),w()}}async onFocusChanged(e){const t=await this.listen(o.WINDOW_FOCUS,a=>{e({...a,payload:!0})}),l=await this.listen(o.WINDOW_BLUR,a=>{e({...a,payload:!1})});return()=>{t(),l()}}async onScaleChanged(e){return this.listen(o.WINDOW_SCALE_FACTOR_CHANGED,e)}async onThemeChanged(e){return this.listen(o.WINDOW_THEME_CHANGED,e)}}var A;(function(i){i.Disabled="disabled",i.Throttle="throttle",i.Suspend="suspend"})(A||(A={}));var L;(function(i){i.AppearanceBased="appearanceBased",i.Light="light",i.Dark="dark",i.MediumLight="mediumLight",i.UltraDark="ultraDark",i.Titlebar="titlebar",i.Selection="selection",i.Menu="menu",i.Popover="popover",i.Sidebar="sidebar",i.HeaderView="headerView",i.Sheet="sheet",i.WindowBackground="windowBackground",i.HudWindow="hudWindow",i.FullScreenUI="fullScreenUI",i.Tooltip="tooltip",i.ContentBackground="contentBackground",i.UnderWindowBackground="underWindowBackground",i.UnderPageBackground="underPageBackground",i.Mica="mica",i.Blur="blur",i.Acrylic="acrylic",i.Tabbed="tabbed",i.TabbedDark="tabbedDark",i.TabbedLight="tabbedLight"})(L||(L={}));var R;(function(i){i.FollowsWindowActiveState="followsWindowActiveState",i.Active="active",i.Inactive="inactive"})(R||(R={}));async function K(i){try{return await n("plugin:vicons|get_icon",{name:i})}catch(e){console.error("[Icon Error] Error obteniendo icono:",e)}return""}function X(i){try{const e=atob(i.substring(0,32)),t=new Uint8Array(e.length);for(let l=0;l<e.length;l++)t[l]=e.charCodeAt(l);return t[0]===137&&t[1]===80&&t[2]===78&&t[3]===71?"image/png":"image/svg+xml"}catch(e){return console.error("Error identificando tipo de imagen:",e),"image/png"}}async function S(i){try{const e=await K(i);return`data:${X(e)};base64,${e}`}catch(e){return console.error("[Icon Error] Error obteniendo icono:",e),""}}const ee={"data-tauri-drag-region":""},ie=["src"],te={"data-tauri-drag-region":""},ne={"data-tauri-drag-region":""},le=["src"],se=["src"],ae=["src"],re=s.defineComponent({__name:"TopBar",props:{title:String,image:String},setup(i){const e=s.ref(null),t=I(),l=s.ref(""),a=s.ref(""),w=s.ref(""),r=i;return s.onMounted(async()=>{l.value=await S("window-close"),a.value=await S("window-minimize"),w.value=await S("window-maximize")}),(ce,b)=>(s.openBlock(),s.createElementBlock("div",{"data-tauri-drag-region":"",class:"flex h-8 px-4 py-1 bg-vsk-primary rounded-t-window justify-between align-center",ref_key:"bar",ref:e},[s.createElementVNode("div",ee,[s.createElementVNode("img",{src:r.image,"data-tauri-drag-region":"",class:"h-6 w-auto"},null,8,ie)]),s.createElementVNode("div",te,s.toDisplayString(r.title),1),s.createElementVNode("div",ne,[s.createElementVNode("span",{class:"win-button",onClick:b[0]||(b[0]=T=>s.unref(t).minimize())},[s.createElementVNode("img",{src:a.value,class:"h-6 w-6 inline-block",alt:"Minimize"},null,8,le)]),s.createElementVNode("span",{class:"win-button",onClick:b[1]||(b[1]=T=>s.unref(t).toggleMaximize())},[s.createElementVNode("img",{src:w.value,class:"h-6 w-6 inline-block",alt:"Maximize"},null,8,se)]),s.createElementVNode("span",{class:"win-button",onClick:b[2]||(b[2]=T=>s.unref(t).close())},[s.createElementVNode("img",{src:l.value,class:"h-6 w-6 inline-block",alt:"Close"},null,8,ae)])])],512))}}),P=s.defineComponent({__name:"WindowFrame",props:{title:{type:String,default:"Vasak"},image:{type:String,default:""}},setup(i){const e=i;return(t,l)=>(s.openBlock(),s.createElementBlock(s.Fragment,null,[s.createVNode(re,{title:e.title,image:e.image},null,8,["title","image"]),s.renderSlot(t.$slots,"default")],64))}}),oe=[z,W,P],ue={install(i){oe.forEach(e=>{i.component(e.name,e)})}};c.SideBar=z,c.SideButton=W,c.WindowFrame=P,c.default=ue,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+(function(r,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(r=typeof globalThis<"u"?globalThis:r||self,n(r.VueLibVasak={},r.Vue))})(this,(function(r,n){"use strict";const y=(t,e)=>{const i=t.__vccOpts||t;for(const[l,s]of e)i[l]=s;return i},Q={},Y={class:"sidebar"};function K(t,e){return n.openBlock(),n.createElementBlock("div",Y,[n.renderSlot(t.$slots,"default")])}const z=y(Q,[["render",K]]),X={href:"#",class:"sidebar-button"},ee=["src","alt"],N=n.defineComponent({__name:"SideButton",props:{title:{type:String,default:"Link"},image:{type:String,default:""}},setup(t){return(e,i)=>(n.openBlock(),n.createElementBlock("a",X,[n.createElementVNode("img",{src:t.image,alt:t.title,class:"img-fluid"},null,8,ee)]))}});function te(t,e,i,l){if(typeof e=="function"?t!==e||!l:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return i==="m"?l:i==="a"?l.call(t):l?l.value:e.get(t)}function ne(t,e,i,l,s){if(typeof e=="function"?t!==e||!0:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return e.set(t,i),i}typeof SuppressedError=="function"&&SuppressedError;var _;const h="__TAURI_TO_IPC_KEY__";function ie(t,e=!1){return window.__TAURI_INTERNALS__.transformCallback(t,e)}async function a(t,e={},i){return window.__TAURI_INTERNALS__.invoke(t,e,i)}class le{get rid(){return te(this,_,"f")}constructor(e){_.set(this,void 0),ne(this,_,e)}async close(){return a("plugin:resources|close",{rid:this.rid})}}_=new WeakMap;class D{constructor(...e){this.type="Logical",e.length===1?"Logical"in e[0]?(this.width=e[0].Logical.width,this.height=e[0].Logical.height):(this.width=e[0].width,this.height=e[0].height):(this.width=e[0],this.height=e[1])}toPhysical(e){return new p(this.width*e,this.height*e)}[h](){return{width:this.width,height:this.height}}toJSON(){return this[h]()}}class p{constructor(...e){this.type="Physical",e.length===1?"Physical"in e[0]?(this.width=e[0].Physical.width,this.height=e[0].Physical.height):(this.width=e[0].width,this.height=e[0].height):(this.width=e[0],this.height=e[1])}toLogical(e){return new D(this.width/e,this.height/e)}[h](){return{width:this.width,height:this.height}}toJSON(){return this[h]()}}class w{constructor(e){this.size=e}toLogical(e){return this.size instanceof D?this.size:this.size.toLogical(e)}toPhysical(e){return this.size instanceof p?this.size:this.size.toPhysical(e)}[h](){return{[`${this.size.type}`]:{width:this.size.width,height:this.size.height}}}toJSON(){return this[h]()}}class I{constructor(...e){this.type="Logical",e.length===1?"Logical"in e[0]?(this.x=e[0].Logical.x,this.y=e[0].Logical.y):(this.x=e[0].x,this.y=e[0].y):(this.x=e[0],this.y=e[1])}toPhysical(e){return new b(this.x*e,this.y*e)}[h](){return{x:this.x,y:this.y}}toJSON(){return this[h]()}}class b{constructor(...e){this.type="Physical",e.length===1?"Physical"in e[0]?(this.x=e[0].Physical.x,this.y=e[0].Physical.y):(this.x=e[0].x,this.y=e[0].y):(this.x=e[0],this.y=e[1])}toLogical(e){return new I(this.x/e,this.y/e)}[h](){return{x:this.x,y:this.y}}toJSON(){return this[h]()}}class k{constructor(e){this.position=e}toLogical(e){return this.position instanceof I?this.position:this.position.toLogical(e)}toPhysical(e){return this.position instanceof b?this.position:this.position.toPhysical(e)}[h](){return{[`${this.position.type}`]:{x:this.position.x,y:this.position.y}}}toJSON(){return this[h]()}}var u;(function(t){t.WINDOW_RESIZED="tauri://resize",t.WINDOW_MOVED="tauri://move",t.WINDOW_CLOSE_REQUESTED="tauri://close-requested",t.WINDOW_DESTROYED="tauri://destroyed",t.WINDOW_FOCUS="tauri://focus",t.WINDOW_BLUR="tauri://blur",t.WINDOW_SCALE_FACTOR_CHANGED="tauri://scale-change",t.WINDOW_THEME_CHANGED="tauri://theme-changed",t.WINDOW_CREATED="tauri://window-created",t.WEBVIEW_CREATED="tauri://webview-created",t.DRAG_ENTER="tauri://drag-enter",t.DRAG_OVER="tauri://drag-over",t.DRAG_DROP="tauri://drag-drop",t.DRAG_LEAVE="tauri://drag-leave"})(u||(u={}));async function A(t,e){window.__TAURI_EVENT_PLUGIN_INTERNALS__.unregisterListener(t,e),await a("plugin:event|unlisten",{event:t,eventId:e})}async function $(t,e,i){var l;const s=typeof i?.target=="string"?{kind:"AnyLabel",label:i.target}:(l=i?.target)!==null&&l!==void 0?l:{kind:"Any"};return a("plugin:event|listen",{event:t,target:s,handler:ie(e)}).then(c=>async()=>A(t,c))}async function ae(t,e,i){return $(t,l=>{A(t,l.id),e(l)},i)}async function se(t,e){await a("plugin:event|emit",{event:t,payload:e})}async function oe(t,e,i){await a("plugin:event|emit_to",{target:typeof t=="string"?{kind:"AnyLabel",label:t}:t,event:e,payload:i})}class f extends le{constructor(e){super(e)}static async new(e,i,l){return a("plugin:image|new",{rgba:C(e),width:i,height:l}).then(s=>new f(s))}static async fromBytes(e){return a("plugin:image|from_bytes",{bytes:C(e)}).then(i=>new f(i))}static async fromPath(e){return a("plugin:image|from_path",{path:e}).then(i=>new f(i))}async rgba(){return a("plugin:image|rgba",{rid:this.rid}).then(e=>new Uint8Array(e))}async size(){return a("plugin:image|size",{rid:this.rid})}}function C(t){return t==null?null:typeof t=="string"?t:t instanceof f?t.rid:t}var x;(function(t){t[t.Critical=1]="Critical",t[t.Informational=2]="Informational"})(x||(x={}));class re{constructor(e){this._preventDefault=!1,this.event=e.event,this.id=e.id}preventDefault(){this._preventDefault=!0}isPreventDefault(){return this._preventDefault}}var W;(function(t){t.None="none",t.Normal="normal",t.Indeterminate="indeterminate",t.Paused="paused",t.Error="error"})(W||(W={}));function V(){return new v(window.__TAURI_INTERNALS__.metadata.currentWindow.label,{skip:!0})}async function B(){return a("plugin:window|get_all_windows").then(t=>t.map(e=>new v(e,{skip:!0})))}const E=["tauri://created","tauri://error"];class v{constructor(e,i={}){var l;this.label=e,this.listeners=Object.create(null),i?.skip||a("plugin:window|create",{options:{...i,parent:typeof i.parent=="string"?i.parent:(l=i.parent)===null||l===void 0?void 0:l.label,label:e}}).then(async()=>this.emit("tauri://created")).catch(async s=>this.emit("tauri://error",s))}static async getByLabel(e){var i;return(i=(await B()).find(l=>l.label===e))!==null&&i!==void 0?i:null}static getCurrent(){return V()}static async getAll(){return B()}static async getFocusedWindow(){for(const e of await B())if(await e.isFocused())return e;return null}async listen(e,i){return this._handleTauriEvent(e,i)?()=>{const l=this.listeners[e];l.splice(l.indexOf(i),1)}:$(e,i,{target:{kind:"Window",label:this.label}})}async once(e,i){return this._handleTauriEvent(e,i)?()=>{const l=this.listeners[e];l.splice(l.indexOf(i),1)}:ae(e,i,{target:{kind:"Window",label:this.label}})}async emit(e,i){if(E.includes(e)){for(const l of this.listeners[e]||[])l({event:e,id:-1,payload:i});return}return se(e,i)}async emitTo(e,i,l){if(E.includes(i)){for(const s of this.listeners[i]||[])s({event:i,id:-1,payload:l});return}return oe(e,i,l)}_handleTauriEvent(e,i){return E.includes(e)?(e in this.listeners?this.listeners[e].push(i):this.listeners[e]=[i],!0):!1}async scaleFactor(){return a("plugin:window|scale_factor",{label:this.label})}async innerPosition(){return a("plugin:window|inner_position",{label:this.label}).then(e=>new b(e))}async outerPosition(){return a("plugin:window|outer_position",{label:this.label}).then(e=>new b(e))}async innerSize(){return a("plugin:window|inner_size",{label:this.label}).then(e=>new p(e))}async outerSize(){return a("plugin:window|outer_size",{label:this.label}).then(e=>new p(e))}async isFullscreen(){return a("plugin:window|is_fullscreen",{label:this.label})}async isMinimized(){return a("plugin:window|is_minimized",{label:this.label})}async isMaximized(){return a("plugin:window|is_maximized",{label:this.label})}async isFocused(){return a("plugin:window|is_focused",{label:this.label})}async isDecorated(){return a("plugin:window|is_decorated",{label:this.label})}async isResizable(){return a("plugin:window|is_resizable",{label:this.label})}async isMaximizable(){return a("plugin:window|is_maximizable",{label:this.label})}async isMinimizable(){return a("plugin:window|is_minimizable",{label:this.label})}async isClosable(){return a("plugin:window|is_closable",{label:this.label})}async isVisible(){return a("plugin:window|is_visible",{label:this.label})}async title(){return a("plugin:window|title",{label:this.label})}async theme(){return a("plugin:window|theme",{label:this.label})}async isAlwaysOnTop(){return a("plugin:window|is_always_on_top",{label:this.label})}async center(){return a("plugin:window|center",{label:this.label})}async requestUserAttention(e){let i=null;return e&&(e===x.Critical?i={type:"Critical"}:i={type:"Informational"}),a("plugin:window|request_user_attention",{label:this.label,value:i})}async setResizable(e){return a("plugin:window|set_resizable",{label:this.label,value:e})}async setEnabled(e){return a("plugin:window|set_enabled",{label:this.label,value:e})}async isEnabled(){return a("plugin:window|is_enabled",{label:this.label})}async setMaximizable(e){return a("plugin:window|set_maximizable",{label:this.label,value:e})}async setMinimizable(e){return a("plugin:window|set_minimizable",{label:this.label,value:e})}async setClosable(e){return a("plugin:window|set_closable",{label:this.label,value:e})}async setTitle(e){return a("plugin:window|set_title",{label:this.label,value:e})}async maximize(){return a("plugin:window|maximize",{label:this.label})}async unmaximize(){return a("plugin:window|unmaximize",{label:this.label})}async toggleMaximize(){return a("plugin:window|toggle_maximize",{label:this.label})}async minimize(){return a("plugin:window|minimize",{label:this.label})}async unminimize(){return a("plugin:window|unminimize",{label:this.label})}async show(){return a("plugin:window|show",{label:this.label})}async hide(){return a("plugin:window|hide",{label:this.label})}async close(){return a("plugin:window|close",{label:this.label})}async destroy(){return a("plugin:window|destroy",{label:this.label})}async setDecorations(e){return a("plugin:window|set_decorations",{label:this.label,value:e})}async setShadow(e){return a("plugin:window|set_shadow",{label:this.label,value:e})}async setEffects(e){return a("plugin:window|set_effects",{label:this.label,value:e})}async clearEffects(){return a("plugin:window|set_effects",{label:this.label,value:null})}async setAlwaysOnTop(e){return a("plugin:window|set_always_on_top",{label:this.label,value:e})}async setAlwaysOnBottom(e){return a("plugin:window|set_always_on_bottom",{label:this.label,value:e})}async setContentProtected(e){return a("plugin:window|set_content_protected",{label:this.label,value:e})}async setSize(e){return a("plugin:window|set_size",{label:this.label,value:e instanceof w?e:new w(e)})}async setMinSize(e){return a("plugin:window|set_min_size",{label:this.label,value:e instanceof w?e:e?new w(e):null})}async setMaxSize(e){return a("plugin:window|set_max_size",{label:this.label,value:e instanceof w?e:e?new w(e):null})}async setSizeConstraints(e){function i(l){return l?{Logical:l}:null}return a("plugin:window|set_size_constraints",{label:this.label,value:{minWidth:i(e?.minWidth),minHeight:i(e?.minHeight),maxWidth:i(e?.maxWidth),maxHeight:i(e?.maxHeight)}})}async setPosition(e){return a("plugin:window|set_position",{label:this.label,value:e instanceof k?e:new k(e)})}async setFullscreen(e){return a("plugin:window|set_fullscreen",{label:this.label,value:e})}async setSimpleFullscreen(e){return a("plugin:window|set_simple_fullscreen",{label:this.label,value:e})}async setFocus(){return a("plugin:window|set_focus",{label:this.label})}async setFocusable(e){return a("plugin:window|set_focusable",{label:this.label,value:e})}async setIcon(e){return a("plugin:window|set_icon",{label:this.label,value:C(e)})}async setSkipTaskbar(e){return a("plugin:window|set_skip_taskbar",{label:this.label,value:e})}async setCursorGrab(e){return a("plugin:window|set_cursor_grab",{label:this.label,value:e})}async setCursorVisible(e){return a("plugin:window|set_cursor_visible",{label:this.label,value:e})}async setCursorIcon(e){return a("plugin:window|set_cursor_icon",{label:this.label,value:e})}async setBackgroundColor(e){return a("plugin:window|set_background_color",{color:e})}async setCursorPosition(e){return a("plugin:window|set_cursor_position",{label:this.label,value:e instanceof k?e:new k(e)})}async setIgnoreCursorEvents(e){return a("plugin:window|set_ignore_cursor_events",{label:this.label,value:e})}async startDragging(){return a("plugin:window|start_dragging",{label:this.label})}async startResizeDragging(e){return a("plugin:window|start_resize_dragging",{label:this.label,value:e})}async setBadgeCount(e){return a("plugin:window|set_badge_count",{label:this.label,value:e})}async setBadgeLabel(e){return a("plugin:window|set_badge_label",{label:this.label,value:e})}async setOverlayIcon(e){return a("plugin:window|set_overlay_icon",{label:this.label,value:e?C(e):void 0})}async setProgressBar(e){return a("plugin:window|set_progress_bar",{label:this.label,value:e})}async setVisibleOnAllWorkspaces(e){return a("plugin:window|set_visible_on_all_workspaces",{label:this.label,value:e})}async setTitleBarStyle(e){return a("plugin:window|set_title_bar_style",{label:this.label,value:e})}async setTheme(e){return a("plugin:window|set_theme",{label:this.label,value:e})}async onResized(e){return this.listen(u.WINDOW_RESIZED,i=>{i.payload=new p(i.payload),e(i)})}async onMoved(e){return this.listen(u.WINDOW_MOVED,i=>{i.payload=new b(i.payload),e(i)})}async onCloseRequested(e){return this.listen(u.WINDOW_CLOSE_REQUESTED,async i=>{const l=new re(i);await e(l),l.isPreventDefault()||await this.destroy()})}async onDragDropEvent(e){const i=await this.listen(u.DRAG_ENTER,o=>{e({...o,payload:{type:"enter",paths:o.payload.paths,position:new b(o.payload.position)}})}),l=await this.listen(u.DRAG_OVER,o=>{e({...o,payload:{type:"over",position:new b(o.payload.position)}})}),s=await this.listen(u.DRAG_DROP,o=>{e({...o,payload:{type:"drop",paths:o.payload.paths,position:new b(o.payload.position)}})}),c=await this.listen(u.DRAG_LEAVE,o=>{e({...o,payload:{type:"leave"}})});return()=>{i(),s(),l(),c()}}async onFocusChanged(e){const i=await this.listen(u.WINDOW_FOCUS,s=>{e({...s,payload:!0})}),l=await this.listen(u.WINDOW_BLUR,s=>{e({...s,payload:!1})});return()=>{i(),l()}}async onScaleChanged(e){return this.listen(u.WINDOW_SCALE_FACTOR_CHANGED,e)}async onThemeChanged(e){return this.listen(u.WINDOW_THEME_CHANGED,e)}}var L;(function(t){t.Disabled="disabled",t.Throttle="throttle",t.Suspend="suspend"})(L||(L={}));var O;(function(t){t.Default="default",t.FluentOverlay="fluentOverlay"})(O||(O={}));var T;(function(t){t.AppearanceBased="appearanceBased",t.Light="light",t.Dark="dark",t.MediumLight="mediumLight",t.UltraDark="ultraDark",t.Titlebar="titlebar",t.Selection="selection",t.Menu="menu",t.Popover="popover",t.Sidebar="sidebar",t.HeaderView="headerView",t.Sheet="sheet",t.WindowBackground="windowBackground",t.HudWindow="hudWindow",t.FullScreenUI="fullScreenUI",t.Tooltip="tooltip",t.ContentBackground="contentBackground",t.UnderWindowBackground="underWindowBackground",t.UnderPageBackground="underPageBackground",t.Mica="mica",t.Blur="blur",t.Acrylic="acrylic",t.Tabbed="tabbed",t.TabbedDark="tabbedDark",t.TabbedLight="tabbedLight"})(T||(T={}));var R;(function(t){t.FollowsWindowActiveState="followsWindowActiveState",t.Active="active",t.Inactive="inactive"})(R||(R={})),typeof SuppressedError=="function"&&SuppressedError;async function ce(t,e={},i){return window.__TAURI_INTERNALS__.invoke(t,e,i)}async function de(t){try{return await ce("plugin:vicons|get_icon",{name:t})}catch(e){console.error("[Icon Error] Error obteniendo icono:",e)}return""}function ue(t){try{const e=atob(t.substring(0,32)),i=new Uint8Array(e.length);for(let l=0;l<e.length;l++)i[l]=e.charCodeAt(l);return i[0]===137&&i[1]===80&&i[2]===78&&i[3]===71?"image/png":"image/svg+xml"}catch(e){return console.error("Error identificando tipo de imagen:",e),"image/png"}}async function S(t){try{const e=await de(t);return`data:${ue(e)};base64,${e}`}catch(e){return console.error("[Icon Error] Error obteniendo icono:",e),""}}const he={"data-tauri-drag-region":""},me=["src"],be={"data-tauri-drag-region":""},ge={"data-tauri-drag-region":""},we=["src"],ye=["src"],pe=["src"],fe=n.defineComponent({__name:"TopBar",props:{title:String,image:String},setup(t){const e=n.ref(null),i=V(),l=n.ref(""),s=n.ref(""),c=n.ref(""),o=t;return n.onMounted(async()=>{l.value=await S("window-close"),s.value=await S("window-minimize"),c.value=await S("window-maximize")}),(m,d)=>(n.openBlock(),n.createElementBlock("div",{"data-tauri-drag-region":"",class:"flex h-8 px-4 py-1 bg-vsk-primary rounded-t-window justify-between align-center",ref_key:"bar",ref:e},[n.createElementVNode("div",he,[n.createElementVNode("img",{src:o.image,"data-tauri-drag-region":"",class:"h-6 w-auto"},null,8,me)]),n.createElementVNode("div",be,n.toDisplayString(o.title),1),n.createElementVNode("div",ge,[n.createElementVNode("span",{class:"win-button",onClick:d[0]||(d[0]=g=>n.unref(i).minimize())},[n.createElementVNode("img",{src:s.value,class:"h-6 w-6 inline-block",alt:"Minimize"},null,8,we)]),n.createElementVNode("span",{class:"win-button",onClick:d[1]||(d[1]=g=>n.unref(i).toggleMaximize())},[n.createElementVNode("img",{src:c.value,class:"h-6 w-6 inline-block",alt:"Maximize"},null,8,ye)]),n.createElementVNode("span",{class:"win-button",onClick:d[2]||(d[2]=g=>n.unref(i).close())},[n.createElementVNode("img",{src:l.value,class:"h-6 w-6 inline-block",alt:"Close"},null,8,pe)])])],512))}}),P=n.defineComponent({__name:"WindowFrame",props:{title:{type:String,default:"Vasak"},image:{type:String,default:""}},setup(t){const e=t;return(i,l)=>(n.openBlock(),n.createElementBlock(n.Fragment,null,[n.createVNode(fe,{title:e.title,image:e.image},null,8,["title","image"]),n.renderSlot(i.$slots,"default")],64))}}),_e=["type","disabled"],ke={key:0,class:"w-4 h-4 animate-spin rounded-full border-2 border-current border-t-transparent"},Ce=["src","alt"],xe={key:2},Be=["src","alt"],M=y(n.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:e}){const i=t,l=e,s={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"},c={sm:"px-2 py-1 text-xs",md:"px-3 py-1 text-sm",lg:"px-4 py-2 text-base"},o=m=>{i.stopPropagation&&m.stopPropagation(),i.preventDefault&&m.preventDefault(),!i.disabled&&!i.loading&&l("click")};return(m,d)=>(n.openBlock(),n.createElementBlock("button",{type:i.type,onClick:o,class:n.normalizeClass(["rounded-vsk transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2",[s[i.variant],c[i.size],i.fullWidth?"w-full":"",i.iconSrc&&!i.label?"px-2 py-2":"",t.customClass]]),disabled:i.disabled||i.loading},[t.loading?(n.openBlock(),n.createElementBlock("span",ke)):n.createCommentVNode("",!0),i.iconSrc&&!i.iconRight?(n.openBlock(),n.createElementBlock("img",{key:1,src:i.iconSrc,alt:i.iconAlt||i.label,class:"w-4 h-4"},null,8,Ce)):n.createCommentVNode("",!0),i.label?(n.openBlock(),n.createElementBlock("span",xe,n.toDisplayString(i.label),1)):n.createCommentVNode("",!0),i.iconSrc&&i.iconRight?(n.openBlock(),n.createElementBlock("img",{key:3,src:i.iconSrc,alt:i.iconAlt||i.label,class:"w-4 h-4"},null,8,Be)):n.createCommentVNode("",!0)],10,_e))}}),[["__scopeId","data-v-d1ce8923"]]),Ee={class:"text-base font-semibold m-0 text-vsk-primary"},F=y(n.defineComponent({__name:"ConfigSection",props:{title:{},icon:{default:""},customClass:{default:()=>({})}},setup(t){return(e,i)=>(n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(["flex flex-col gap-4 p-4 background rounded-vsk",t.customClass])},[n.createElementVNode("h3",Ee,n.toDisplayString(t.icon?`${t.icon} ${t.title}`:t.title),1),n.renderSlot(e.$slots,"default",{},void 0,!0)],2))}}),[["__scopeId","data-v-89531d08"]]),Se={class:"flex items-center gap-3 flex-1 min-w-0"},ze=["src","alt"],Ne={class:"min-w-0"},De={class:"font-semibold truncate"},Ie={key:0,class:"text-xs text-gray-400 truncate"},Ae={key:1,class:"text-xs text-gray-400 truncate"},$e={key:2,class:"text-xs text-gray-400 flex gap-2 mt-1"},We={key:1,class:"w-2 h-2 rounded-full bg-green-500"},U=n.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:e}){const i=e,l=()=>{i("action")},s=()=>{i("click")};return(c,o)=>(n.openBlock(),n.createElementBlock("div",{class:n.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},[n.createElementVNode("div",Se,[n.createElementVNode("img",{src:t.icon,alt:t.title,class:"h-7 w-7 shrink-0"},null,8,ze),n.createElementVNode("div",Ne,[n.createElementVNode("div",De,n.toDisplayString(t.title),1),t.subtitle?(n.openBlock(),n.createElementBlock("div",Ie,n.toDisplayString(t.subtitle),1)):n.createCommentVNode("",!0),t.metadata?(n.openBlock(),n.createElementBlock("div",Ae,n.toDisplayString(t.metadata),1)):n.createCommentVNode("",!0),t.extraInfo&&t.extraInfo.length>0?(n.openBlock(),n.createElementBlock("div",$e,[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(t.extraInfo,(m,d)=>(n.openBlock(),n.createElementBlock("span",{key:d},n.toDisplayString(m),1))),128))])):n.createCommentVNode("",!0)])]),t.showActionButton?(n.openBlock(),n.createElementBlock("button",{key:0,class:"bg-vsk-primary rounded-vsk px-4 py-2 text-sm font-semibold cursor-pointer hover:opacity-70",onClick:n.withModifiers(l,["stop"])},n.toDisplayString(t.actionLabel),1)):n.createCommentVNode("",!0),t.showStatusIndicator&&t.isConnected?(n.openBlock(),n.createElementBlock("div",We)):n.createCommentVNode("",!0)],2))}}),Ve=["for"],G=y(n.defineComponent({__name:"FormGroup",props:{label:{},htmlFor:{default:""},customClass:{default:()=>({})},labelClass:{default:()=>({})}},setup(t){return(e,i)=>(n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(["flex flex-col gap-2",t.customClass])},[t.label?(n.openBlock(),n.createElementBlock("label",{key:0,for:t.htmlFor,class:n.normalizeClass(["text-sm font-medium text-vsk-primary",t.labelClass])},n.toDisplayString(t.label),11,Ve)):n.createCommentVNode("",!0),n.renderSlot(e.$slots,"default",{},void 0,!0)],2))}}),[["__scopeId","data-v-a4bd01fc"]]),j=y(n.defineComponent({__name:"ListCard",props:{clickable:{type:Boolean,default:!1},customClass:{default:()=>({})}},emits:["click"],setup(t,{emit:e}){const i=t,l=e,s=()=>{i.clickable&&l("click")};return(c,o)=>(n.openBlock(),n.createElementBlock("div",{class:n.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":i.clickable},t.customClass]),onClick:s},[n.renderSlot(c.$slots,"default",{},void 0,!0)],2))}}),[["__scopeId","data-v-f86d47da"]]),ve={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"},Le=["src","alt","title"],Oe={key:1,class:"w-8 h-8 flex items-center justify-center"},Te=["src","alt"],Re=["min","max","value"],H=n.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:e}){const i=t,l=e,s=n.computed(()=>{if(i.max<=i.min)return 0;const d=i.max-i.min,g=i.modelValue-i.min;return Math.round(g/d*100)}),c=n.computed(()=>i.getPercentageClass?i.getPercentageClass(s.value):""),o=d=>{const g=d.target;l("update:modelValue",Number(g.value))},m=()=>{l("buttonClick")};return(d,g)=>(n.openBlock(),n.createElementBlock("div",ve,[t.showButton?(n.openBlock(),n.createElementBlock("button",{key:0,onClick:m,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"},[n.createElementVNode("img",{src:t.icon,alt:t.alt,title:t.tooltip,class:n.normalizeClass(["w-6 h-6 transition-all duration-200",t.iconClass])},null,10,Le)])):(n.openBlock(),n.createElementBlock("div",Oe,[n.createElementVNode("img",{src:t.icon,alt:t.alt,class:"w-6 h-6 transition-all duration-200"},null,8,Te)])),n.createElementVNode("input",{type:"range",min:t.min,max:t.max,value:t.modelValue,onInput:o,class:"flex-1 transition-all duration-200 hover:scale-105"},null,40,Re),n.createElementVNode("span",{class:n.normalizeClass(["w-12 text-right transition-all duration-200 font-medium",c.value])},n.toDisplayString(s.value)+"% ",3)]))}}),Pe=["disabled"],q=n.defineComponent({__name:"SwitchToggle",props:{isOn:{type:Boolean},disabled:{type:Boolean,default:!1},size:{default:"small"},activeClass:{default:"bg-vsk-primary"},inactiveClass:{default:"background"},customClass:{default:""}},emits:["toggle"],setup(t,{emit:e}){const i=t,l=e,s=()=>{l("toggle",!i.isOn)};return(c,o)=>(n.openBlock(),n.createElementBlock("button",{type:"button",onClick:s,disabled:t.disabled,class:n.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])},[n.createElementVNode("span",{class:n.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,Pe))}}),Me=["disabled"],Fe=["src","alt","title"],J=n.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:e}){const i=e,l=()=>{i("click")};return(s,c)=>(n.openBlock(),n.createElementBlock("button",{onClick:l,class:n.normalizeClass(["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",{"animate-pulse":t.isLoading,"ring-2 ring-vsk-primary/50":t.isActive,"opacity-60":!t.isActive,...t.customClass}]),disabled:t.isLoading},[n.createElementVNode("img",{src:t.icon,alt:t.alt,title:t.tooltip,class:n.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,Me))}}),Ue=["title"],Ge=["src","alt"],je={key: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"},Z=n.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:e}){const i=e,l=n.ref(!1),s=()=>{i("click")};return(c,o)=>(n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(["p-1 rounded-vsk relative hover:bg-vsk-primary/30 group transition-all duration-300",t.customClass]),title:t.tooltip,onClick:s,onMouseenter:o[0]||(o[0]=m=>l.value=!0),onMouseleave:o[1]||(o[1]=m=>l.value=!1)},[n.createElementVNode("img",{src:t.icon,alt:t.alt,class:n.normalizeClass(["m-auto h-5.5 w-auto transition-all duration-300",t.iconClass])},null,10,Ge),t.badge!==null&&t.badge>0?(n.openBlock(),n.createElementBlock("div",je,n.toDisplayString(t.badge),1)):n.createCommentVNode("",!0),t.showCustomTooltip&&t.customTooltipText?(n.openBlock(),n.createElementBlock("div",{key:1,class:n.normalizeClass(["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",[t.tooltipClass,{"opacity-0 -translate-y-2":!l.value,"opacity-100 translate-y-0":l.value}]])},n.toDisplayString(t.customTooltipText),3)):n.createCommentVNode("",!0),n.renderSlot(c.$slots,"default")],42,Ue))}}),He=[z,N,P,M,F,U,G,j,H,q,J,Z],qe={install(t){He.forEach(e=>{t.component(e.name,e)})}};r.ActionButton=M,r.ConfigSection=F,r.DeviceCard=U,r.FormGroup=G,r.ListCard=j,r.SideBar=z,r.SideButton=N,r.SliderControl=H,r.SwitchToggle=q,r.ToggleControl=J,r.TrayIconButton=Z,r.WindowFrame=P,r.default=qe,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

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

package/src/cards/DeviceCard.vue

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

package/src/cards/ListCard.vue

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

package/src/controls/ActionButton.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+interface Props {
+  label: string;
+  disabled?: boolean;
+  variant?: 'primary' | 'secondary' | 'danger';
+  loading?: boolean;
+  customClass?: string | Record<string, boolean>;
+  size?: 'sm' | 'md' | 'lg';
+  fullWidth?: boolean;
+  iconSrc?: string;
+  iconAlt?: string;
+  iconRight?: boolean;
+  type?: 'button' | 'submit' | 'reset';
+  stopPropagation?: boolean;
+  preventDefault?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  variant: 'primary',
+  loading: false,
+  customClass: () => ({}),
+  size: 'md',
+  fullWidth: false,
+  iconSrc: '',
+  iconAlt: '',
+  iconRight: false,
+  type: 'button',
+  stopPropagation: false,
+  preventDefault: false,
+});
+
+const emit = defineEmits<{
+  click: [];
+}>();
+
+const variantClasses: Record<string, string> = {
+  primary: 'bg-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',
+};
+
+const sizeClasses: Record<'sm' | 'md' | 'lg', string> = {
+  sm: 'px-2 py-1 text-xs',
+  md: 'px-3 py-1 text-sm',
+  lg: 'px-4 py-2 text-base',
+};
+
+const handleClick = (event: Event) => {
+  if (props.stopPropagation) event.stopPropagation();
+  if (props.preventDefault) event.preventDefault();
+  if (!props.disabled && !props.loading) {
+    emit('click');
+  }
+};
+</script>
+
+<template>
+  <button
+    :type="props.type"
+    @click="handleClick"
+    class="rounded-vsk transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+    :class="[
+      variantClasses[props.variant],
+      sizeClasses[props.size],
+      props.fullWidth ? 'w-full' : '',
+      props.iconSrc && !props.label ? 'px-2 py-2' : '',
+      customClass,
+    ]"
+    :disabled="props.disabled || props.loading"
+  >
+    <span v-if="loading" class="w-4 h-4 animate-spin rounded-full border-2 border-current border-t-transparent"></span>
+    <template v-if="props.iconSrc && !props.iconRight">
+      <img :src="props.iconSrc" :alt="props.iconAlt || props.label" class="w-4 h-4" />
+    </template>
+    <span v-if="props.label">{{ props.label }}</span>
+    <template v-if="props.iconSrc && props.iconRight">
+      <img :src="props.iconSrc" :alt="props.iconAlt || props.label" class="w-4 h-4" />
+    </template>
+  </button>
+</template>
+
+<style scoped>
+/* Ningún estilo adicional requerido */
+</style>

package/src/controls/ToggleControl.vue

@@ -0,0 +1,55 @@
+<template>
+  <button
+    @click="handleClick"
+    class="p-2 rounded-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="{
+      'animate-pulse': isLoading,
+      'ring-2 ring-vsk-primary/50': isActive,
+      'opacity-60': !isActive,
+      ...customClass
+    }"
+    :disabled="isLoading"
+  >
+    <img
+      :src="icon"
+      :alt="alt"
+      :title="tooltip"
+      class="m-auto w-12.5 h-12.5 transition-all duration-300 group-hover:scale-110 relative z-10"
+      :class="{
+        'animate-spin': isLoading,
+        'filter brightness-75': !isActive,
+        'drop-shadow-lg': isActive,
+        ...iconClass
+      }"
+    />
+  </button>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  icon: string;
+  alt?: string;
+  tooltip?: string;
+  isActive?: boolean;
+  isLoading?: boolean;
+  iconClass?: Record<string, boolean>;
+  customClass?: Record<string, boolean>;
+}
+
+withDefaults(defineProps<Props>(), {
+  alt: '',
+  tooltip: '',
+  isActive: false,
+  isLoading: false,
+  iconClass: () => ({}),
+  customClass: () => ({}),
+});
+
+const emit = defineEmits<{
+  click: [];
+}>();
+
+const handleClick = () => {
+  emit('click');
+};
+</script>

package/src/forms/FormGroup.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+interface Props {
+  label: string;
+  htmlFor?: string;
+  customClass?: string | Record<string, boolean>;
+  labelClass?: string | Record<string, boolean>;
+}
+
+withDefaults(defineProps<Props>(), {
+  htmlFor: '',
+  customClass: () => ({}),
+  labelClass: () => ({}),
+});
+</script>
+
+<template>
+  <div class="flex flex-col gap-2" :class="customClass">
+    <label v-if="label" :for="htmlFor" class="text-sm font-medium text-vsk-primary" :class="labelClass">
+      {{ label }}
+    </label>
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+/* Ningún estilo adicional requerido */
+</style>

package/src/forms/SliderControl.vue

@@ -0,0 +1,100 @@
+<template>
+  <div
+    class="background rounded-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"
+  >
+    <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"
+    >
+      <img
+        :src="icon"
+        :alt="alt"
+        :title="tooltip"
+        class="w-6 h-6 transition-all duration-200"
+        :class="iconClass"
+      />
+    </button>
+    
+    <div
+      v-else
+      class="w-8 h-8 flex items-center justify-center"
+    >
+      <img
+        :src="icon"
+        :alt="alt"
+        class="w-6 h-6 transition-all duration-200"
+      />
+    </div>
+
+    <input
+      type="range"
+      :min="min"
+      :max="max"
+      :value="modelValue"
+      @input="handleInput"
+      class="flex-1 transition-all duration-200 hover:scale-105"
+    />
+    
+    <span
+      class="w-12 text-right transition-all duration-200 font-medium"
+      :class="percentageClass"
+    >
+      {{ percentage }}%
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  icon: string;
+  alt?: string;
+  tooltip?: string;
+  modelValue: number;
+  min?: number;
+  max?: number;
+  showButton?: boolean;
+  iconClass?: string | Record<string, boolean>;
+  getPercentageClass?: (percentage: number) => string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  alt: '',
+  tooltip: '',
+  min: 0,
+  max: 100,
+  showButton: false,
+  iconClass: () => ({}),
+  getPercentageClass: () => '',
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number];
+  'buttonClick': [];
+}>();
+
+const percentage = computed(() => {
+  if (props.max <= props.min) return 0;
+  const range = props.max - props.min;
+  const value = props.modelValue - props.min;
+  return Math.round((value / range) * 100);
+});
+
+const percentageClass = computed(() => {
+  if (props.getPercentageClass) {
+    return props.getPercentageClass(percentage.value);
+  }
+  return '';
+});
+
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  emit('update:modelValue', Number(target.value));
+};
+
+const handleButtonClick = () => {
+  emit('buttonClick');
+};
+</script>

package/src/forms/SwitchToggle.vue

@@ -0,0 +1,49 @@
+<template>
+  <button
+    type="button"
+    @click="handleClick"
+    :disabled="disabled"
+    :class="[
+      'relative inline-flex items-center rounded-full transition-colors',
+      size === 'small' ? 'h-6 w-11' : 'h-7 w-12',
+      isOn ? activeClass : inactiveClass,
+      disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
+      customClass
+    ]"
+  >
+    <span
+      :class="[
+        'inline-block transform rounded-full bg-white shadow transition-transform',
+        size === 'small' ? 'h-4 w-4' : 'h-6 w-6',
+        isOn ? (size === 'small' ? 'translate-x-6' : 'translate-x-5') : 'translate-x-1'
+      ]"
+    ></span>
+  </button>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  isOn: boolean;
+  disabled?: boolean;
+  size?: 'small' | 'medium';
+  activeClass?: string;
+  inactiveClass?: string;
+  customClass?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  size: 'small',
+  activeClass: 'bg-vsk-primary',
+  inactiveClass: 'background',
+  customClass: '',
+});
+
+const emit = defineEmits<{
+  toggle: [value: boolean];
+}>();
+
+const handleClick = () => {
+  emit('toggle', !props.isOn);
+};
+</script>

package/src/index.ts

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