@vasakgroup/vue-libvasak 0.0.3 → 0.1.0

package/dist/vue-libvasak.umd.js

@@ -0,0 +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"}})}));

package/package.json

@@ -1,13 +1,20 @@
 {
   "name": "@vasakgroup/vue-libvasak",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "description": "Vue componenets for VSK Applications",
-  "main": "src/index.ts",
-  "module": "src/index.ts",
-  "types": "src/index.ts",
+  "main": "./dist/vue-libvasak.umd.js",
+  "module": "./dist/vue-libvasak.es.js",
+  "types": "./dist/index.d.ts",
   "files": [
+    "dist",
     "src"
   ],
+  "exports": {
+    ".": {
+      "import": "./dist/vue-libvasak.es.js",
+      "require": "./dist/vue-libvasak.umd.js"
+    }
+  },
   "keywords": [
     "vue",
     "vsk",
@@ -35,7 +42,21 @@
   },
   "license": "GPLv3",
   "dependencies": {
-    "vue": "^3.3.13",
-    "vue-router": "^4.2.5"
+    "@tauri-apps/api": "^2.8.0",
+    "@vasakgroup/plugin-vicons": "^2.0.0",
+    "vue": "^3.5.20",
+    "vue-router": "^4.5.1"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.2",
+    "vite": "^7.1.3",
+    "@vitejs/plugin-vue": "^6.0.1"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite"
   }
 }

package/src/index.ts

@@ -1,5 +1,16 @@
 import SideBar from "./sidebar/SideBar.vue";
 import SideButton from "./sidebar/SideButton.vue";
 import WindowFrame from "./window/WindowFrame.vue";
+import type { App } from "vue";
+
+const components = [SideBar, SideButton, WindowFrame];
+
+export default {
+  install(app: App) {
+    components.forEach((component) => {
+      app.component(component.name as string, component);
+    });
+  },
+};
 
 export { SideBar, SideButton, WindowFrame };

package/src/types/vue-libvasak.d.ts

@@ -0,0 +1,10 @@
+declare module '@vasakgroup/vue-libvasak' {
+  import { Plugin } from 'vue';
+  import { Component } from 'vue';
+
+  export const SideBar: Component;
+  export const SideButton: Component;
+  export const WindowFrame: Component;
+  const plugin: Plugin;
+  export default plugin;
+}

package/src/window/TopBar.vue

@@ -1,59 +1,46 @@
 <script lang="ts" setup>
-import { defineProps, inject, onMounted, ref, computed } from "vue";
+import { defineProps, ref, Ref, onMounted } from "vue";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import { getIconSource } from "@vasakgroup/plugin-vicons";
 
-const $vsk: any = inject("vsk");
 const bar = ref(null);
+const appWindow = getCurrentWindow();
+const closeIcon: Ref<string> = ref("");
+const minimizeIcon: Ref<string> = ref("");
+const maximizeIcon: Ref<string> = ref("");
 
 const props = defineProps({
   title: String,
   image: String,
-  customColor: String,
 });
 
-const move = () => {
-  $vsk.startMove();
-};
-
-const close = () => {
-  $vsk.exit();
-};
-
-const minimize = () => {
-  $vsk.minimize();
-};
-
-const toggleMaximize = () => {
-  $vsk.toggleMaximize();
-};
-
-const isCustom = computed(() => {
-  console.log('customColor', props.customColor);
-  return props.customColor ? `custom`: '';
-});
-
-onMounted(() => {
-  if (bar.value) {
-    (bar.value as HTMLElement).addEventListener("mousedown", (e: any) => {
-      move();
-    });
-  }
+onMounted(async () => {
+  closeIcon.value = await getIconSource("window-close");
+  minimizeIcon.value = await getIconSource("window-minimize");
+  maximizeIcon.value = await getIconSource("window-maximize");
 });
 </script>
 
 <template>
-  <div class="window-topbar" :class="isCustom" ref="bar" @click="move()">
-    <div><img :src="image" class="img-fluid win-icon" /></div>
-    <div>{{ title }}</div>
-    <div>
-      <a class="win-button" href="#" @click="minimize()">_</a>
-      <a class="win-button" href="#" @click="toggleMaximize()">[]</a>
-      <a class="win-button" href="#" @click="close()">X</a>
+  <div
+    data-tauri-drag-region
+    class="flex h-8 px-4 py-1 bg-vsk-primary rounded-t-window justify-between align-center"
+    ref="bar"
+  >
+    <div data-tauri-drag-region>
+      <img :src="props.image" data-tauri-drag-region class="h-6 w-auto" />
+    </div>
+    <div data-tauri-drag-region>{{ props.title }}</div>
+    <div data-tauri-drag-region>
+      <span class="win-button" @click="appWindow.minimize()">
+        <img :src="minimizeIcon" class="h-6 w-6 inline-block" alt="Minimize">
+      </span>
+      <span class="win-button" @click="appWindow.toggleMaximize()">
+        <img :src="maximizeIcon" class="h-6 w-6 inline-block" alt="Maximize">
+      </span>
+      <span class="win-button" @click="appWindow.close()">
+        <img :src="closeIcon" class="h-6 w-6 inline-block" alt="Close">
+      </span>
     </div>
   </div>
 </template>
-
-<style scoped>
-.custom{
-  background-color: v-bind(props.customColor);
-}
-</style>

package/src/window/WindowFrame.vue

@@ -1,17 +1,6 @@
 <script lang="ts" setup>
 import TopBar from "./TopBar.vue";
-import { defineProps, ref, inject, onMounted, computed } from 'vue';
-
-const $vsk: any = inject("vsk");
-
-const top = ref(null);
-const left = ref(null);
-const right = ref(null);
-const bottom = ref(null);
-const topleft = ref(null);
-const bottomleft = ref(null);
-const topright = ref(null);
-const bottomright = ref(null);
+import { defineProps } from "vue";
 
 const props = defineProps({
   title: {
@@ -22,71 +11,10 @@ const props = defineProps({
     type: String,
     default: "",
   },
-  customColor: {
-    type: String,
-    default: null,
-  }
-});
-
-const resize = (dir: string) => {
-  $vsk.startResize(dir);
-};
-
-onMounted(() => {
-  if (top.value) {
-    (top.value as HTMLElement).addEventListener("mousedown", (e: any) => {
-      resize("top");
-    });
-  }
-  if (bottom.value) {
-    (bottom.value as HTMLElement).addEventListener("mousedown", (e: any) => {
-      resize("bottom");
-    });
-  }
-  if (left.value) {
-    (left.value as HTMLElement).addEventListener("mousedown", (e: any) => {
-      resize("left");
-    });
-  }
-  if (right.value) {
-    (right.value as HTMLElement).addEventListener("mousedown", (e: any) => {
-      resize("right");
-    });
-  }
-  if (topleft.value) {
-    (topleft.value as HTMLElement).addEventListener("mousedown", (e: any) => {
-      resize("topleft");
-    });
-  }
-  if (bottomleft.value) {
-    (bottomleft.value as HTMLElement).addEventListener("mousedown", (e: any) => {
-      resize("bottomleft");
-    });
-  }
-  if (topright.value) {
-    (topright.value as HTMLElement).addEventListener("mousedown", (e: any) => {
-      resize("topright");
-    });
-  }
-  if (bottomright.value) {
-    (bottomright.value as HTMLElement).addEventListener("mousedown", (e: any) => {
-      resize("bottomright");
-    });
-  }
 });
 </script>
 
 <template>
-  <TopBar :title :image :customColor />
-  <div class="window">
-    <slot />
-    <div ref="top" class="win-edge win-edge-top"></div>
-    <div ref="left" class="win-edge win-edge-left"></div>
-    <div ref="right" class="win-edge win-edge-right"></div>
-    <div ref="bottom" class="win-edge win-edge-bottom"></div>
-    <div ref="topleft" class="win-edge win-edge-topleft"></div>
-    <div ref="bottomleft" class="win-edge win-edge-bottomleft"></div>
-    <div ref="topright" class="win-edge win-edge-topright"></div>
-    <div ref="bottomright" class="win-edge win-edge-bottomright"></div>
-  </div>
+  <TopBar :title="props.title" :image="props.image" />
+  <slot />
 </template>