From 924f152ab7bf36f0c3259d8dd35cf5939fd8ec30 Mon Sep 17 00:00:00 2001
From: Samuel Lorch <sam@soontm.de>
Date: Mon, 13 Mar 2023 00:02:38 +0100
Subject: [PATCH] install lib, fix css, small test

---
 client/package.json                     |  1 +
 client/pnpm-lock.yaml                   |  7 +++++++
 client/src/global-styles/components.css |  6 +++++-
 client/src/pages/index.vue              | 12 +++++++++---
 4 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/client/package.json b/client/package.json
index 8a358fb..6d78959 100644
--- a/client/package.json
+++ b/client/package.json
@@ -23,6 +23,7 @@
     "simple-jsonrpc-js": "^1.2.0",
     "vue": "^3.2.45",
     "vue-i18n": "9",
+    "vue-multiselect": "3.0.0-beta.1",
     "vue-router": "4",
     "ws": "^8.13.0"
   },
diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml
index 2ad3418..fb791fb 100644
--- a/client/pnpm-lock.yaml
+++ b/client/pnpm-lock.yaml
@@ -30,6 +30,7 @@ specifiers:
   vite-plugin-vue-markdown: ^0.22.4
   vue: ^3.2.45
   vue-i18n: '9'
+  vue-multiselect: 3.0.0-beta.1
   vue-router: '4'
   vue-tsc: ^1.0.24
   ws: ^8.13.0
@@ -47,6 +48,7 @@ dependencies:
   simple-jsonrpc-js: 1.2.0
   vue: 3.2.47
   vue-i18n: 9.2.2_vue@3.2.47
+  vue-multiselect: 3.0.0-beta.1
   vue-router: 4.1.6_vue@3.2.47
   ws: 8.13.0
 
@@ -3829,6 +3831,11 @@ packages:
       vue: 3.2.47
     dev: false
 
+  /vue-multiselect/3.0.0-beta.1:
+    resolution: {integrity: sha512-V+jpydtjyHcQ+yjHsEWEBrDAopOx/pufNkSAXNVDAGQ+ESDEJ7wYejNd9H1RiCnFOYK4yf1XSGqE+Mp3HJXmdg==}
+    engines: {node: '>= 4.0.0', npm: '>= 3.0.0'}
+    dev: false
+
   /vue-router/4.1.6_vue@3.2.47:
     resolution: {integrity: sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==}
     peerDependencies:
diff --git a/client/src/global-styles/components.css b/client/src/global-styles/components.css
index e584a06..9c8bd96 100644
--- a/client/src/global-styles/components.css
+++ b/client/src/global-styles/components.css
@@ -72,4 +72,8 @@ tbody tr:nth-child(even) {
   background-color: var(--cl-bg-low);
   color: inherit;
   border: 1px solid var(--cl-fg);
-}
\ No newline at end of file
+}
+
+.multiselect, .multiselect * {
+  all: initial;
+}
diff --git a/client/src/pages/index.vue b/client/src/pages/index.vue
index 5c692f1..63d767c 100644
--- a/client/src/pages/index.vue
+++ b/client/src/pages/index.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
 import { apiCall } from "../api";
+import Multiselect from 'vue-multiselect';
 
 async function doShit(){
   apiCall("Firewall.GetForwardRules", {});
 }
+let value = $ref("");
+let options = [{ name: 'Vue.js', code: 'vu' },
+  { name: 'Javascript', code: 'js' },
+  { name: 'Open Source', code: 'os' }];
 
 </script>
 
@@ -12,7 +17,8 @@ async function doShit(){
     <PageHeader title="Dashboard">
       <button @click="doShit">Example Buttons</button>
     </PageHeader>
-
-    This is the main page, currently written in markdown because that's *pog*.
+    <multiselect v-model="value" placeholder="Search" label="name" track-by="code" :options="options" :multiple="true"></multiselect>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
\ No newline at end of file