@vasakgroup/vue-libvasak 0.0.1 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vasakgroup/vue-libvasak",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Vue componenets for VSK Applications",
   "main": "src/index.ts",
   "module": "src/index.ts",

package/src/index.ts

@@ -1,7 +1,5 @@
-import SideA from "./sidebar/SideA.vue";
 import SideBar from "./sidebar/SideBar.vue";
-import SideRouterLink from "./sidebar/SideRouterLink.vue";
-import SideSection from "./sidebar/SideSection.vue";
+import SideButton from "./sidebar/SideButton.vue";
 import WindowFrame from "./window/WindowFrame.vue";
 
-export { SideA, SideBar, SideRouterLink, SideSection, WindowFrame };
+export { SideBar, SideButton, WindowFrame };

package/src/sidebar/SideBar.vue

@@ -1,27 +1,7 @@
-<script lang="ts">
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  name: "SideBar",
-  props: {
-    title: {
-      type: String,
-      default: "Vasak",
-    },
-  },
-});
-</script>
+<script lang="ts" setup></script>
 
 <template>
-  <div
-    class="sidebar col-auto p-2 col-md-4 col-xl-3 col-xxl-2 d-flex flex-column justify-content-between"
-  >
-    <a
-      href="#"
-      class="d-flex text-decoration-none align-items-center text-center"
-    >
-      <span class="fs-4 d-none d-sm-inline">{{ title }}</span>
-    </a>
+  <div class="sidebar">
     <slot />
   </div>
 </template>

package/src/sidebar/SideButton.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import { defineComponent } from "vue";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "Link",
+  },
+  image: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<template>
+  <a href="#" class="sidebar-button">
+    <img :src="image" class="img-fluid" />
+  </a>
+</template>

package/src/window/TopBar.vue

@@ -1,39 +1,48 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'TopBar',
-  props: {
-    title: {
-      type: String,
-      default: 'Vasak'
-    }
-  },
-  methods: {
-    move() {
-      (this as any).$vsk.startMove();
-    },
-    close() {
-      (this as any).$vsk.exit();
-    },
-    minimize() {
-      (this as any).$vsk.minimize();
-    },
-    toggleMaximize() {
-      (this as any).$vsk.toggleMaximize();
-    }
-  },
-  mounted() {
-    (this.$refs.bar as any).addEventListener('mousedown', (e: any) => {
-      this.move();
+<script lang="ts" setup>
+import { defineProps, inject, onMounted, ref, computed } from "vue";
+
+const $vsk: any = inject("vsk");
+const bar = ref(null);
+
+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();
     });
   }
 });
 </script>
 
 <template>
-  <div class="window-topbar" ref="bar" @click="move()">
-    <div></div>
+  <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>
@@ -43,3 +52,8 @@ export default defineComponent({
   </div>
 </template>
 
+<style scoped>
+.custom{
+  background-color: v-bind(props.customColor);
+}
+</style>

package/src/window/WindowFrame.vue

@@ -1,63 +1,92 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-import TopBar from './TopBar.vue';
+<script lang="ts" setup>
+import TopBar from "./TopBar.vue";
+import { defineProps, ref, inject, onMounted, computed } from 'vue';
 
-export default defineComponent({
-  name: 'WindowFrame',
-  props: {
-    title: {
-      type: String,
-      default: 'Vasak'
-    }
-  },
-  methods: {
-    rezise(dir: string) {
-      (this as any).$vsk.startResize(dir);
-    }
+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);
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "Vasak",
   },
-  components: {
-    TopBar
+  image: {
+    type: String,
+    default: "",
   },
-  mounted() {
-    (this.$refs.top as any).addEventListener('mousedown', (e: any) => {
-      this.rezise('top');
+  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");
     });
-    (this.$refs.bottom as any).addEventListener('mousedown', (e: any) => {
-      this.rezise('bottom');
+  }
+  if (bottom.value) {
+    (bottom.value as HTMLElement).addEventListener("mousedown", (e: any) => {
+      resize("bottom");
     });
-    (this.$refs.left as any).addEventListener('mousedown', (e: any) => {
-      this.rezise('left');
+  }
+  if (left.value) {
+    (left.value as HTMLElement).addEventListener("mousedown", (e: any) => {
+      resize("left");
     });
-    (this.$refs.right as any).addEventListener('mousedown', (e: any) => {
-      this.rezise('right');
+  }
+  if (right.value) {
+    (right.value as HTMLElement).addEventListener("mousedown", (e: any) => {
+      resize("right");
     });
-    (this.$refs.topleft as any).addEventListener('mousedown', (e: any) => {
-      this.rezise('topleft');
+  }
+  if (topleft.value) {
+    (topleft.value as HTMLElement).addEventListener("mousedown", (e: any) => {
+      resize("topleft");
     });
-    (this.$refs.bottomleft as any).addEventListener('mousedown', (e: any) => {
-      this.rezise('bottomleft');
+  }
+  if (bottomleft.value) {
+    (bottomleft.value as HTMLElement).addEventListener("mousedown", (e: any) => {
+      resize("bottomleft");
     });
-    (this.$refs.topright as any).addEventListener('mousedown', (e: any) => {
-      this.rezise('topright');
+  }
+  if (topright.value) {
+    (topright.value as HTMLElement).addEventListener("mousedown", (e: any) => {
+      resize("topright");
     });
-    (this.$refs.bottomright as any).addEventListener('mousedown', (e: any) => {
-      this.rezise('bottomright');
+  }
+  if (bottomright.value) {
+    (bottomright.value as HTMLElement).addEventListener("mousedown", (e: any) => {
+      resize("bottomright");
     });
-  },
+  }
 });
 </script>
 
 <template>
-  <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>
-  <TopBar :title="title" />
+  <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>
 </template>

package/src/sidebar/SideA.vue

@@ -1,30 +0,0 @@
-<script lang="ts">
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  name: "SideBar",
-  props: {
-    title: {
-      type: String,
-      default: "Link",
-    },
-    image: {
-      type: String,
-      default: "",
-    },
-    url: {
-      type: String,
-      default: "",
-    },
-  },
-});
-</script>
-
-<template>
-  <li class="nav-item py-2 py-sm-0">
-    <a :href="url" class="nav-link">
-      <span class="fs-5"><img :src="image" class="img-fluid" /></span>
-      <span class="fs-4 ms-4 d-none d-sm-inline">{{ title }}</span>
-    </a>
-  </li>
-</template>

package/src/sidebar/SideRouterLink.vue

@@ -1,34 +0,0 @@
-<script lang="ts">
-import { defineComponent } from "vue";
-import { RouterLink } from "vue-router";
-
-export default defineComponent({
-  name: "SideBar",
-  props: {
-    title: {
-      type: String,
-      default: "Link",
-    },
-    image: {
-      type: String,
-      default: "",
-    },
-    url: {
-      type: String,
-      default: "",
-    },
-  },
-  components: {
-    RouterLink,
-  },
-});
-</script>
-
-<template>
-  <li class="nav-item py-2 py-sm-0">
-    <RouterLink :to="url" class="nav-link">
-      <span class="fs-5"><img :src="image" class="img-fluid" /></span>
-      <span class="fs-4 ms-4 d-none d-sm-inline">{{ title }}</span>
-    </RouterLink>
-  </li>
-</template>

package/src/sidebar/SideSection.vue

@@ -1,5 +0,0 @@
-<template>
-  <ul class="nav nav-pill flex-column">
-    <slot />
-  </ul>
-</template>