remove, multiselect, test form

client/package.json

@@ -21,9 +21,9 @@
     "markdown-it-link-attributes": "^4.0.1",
     "markdown-it-shiki": "^0.8.0",
     "simple-jsonrpc-js": "^1.2.0",
+    "vee-validate": "^4.8.4",
     "vue": "^3.2.45",
     "vue-i18n": "9",
-    "vue-multiselect": "3.0.0-beta.1",
     "vue-router": "4",
     "ws": "^8.13.0"
   },

client/pnpm-lock.yaml

@@ -25,12 +25,12 @@ specifiers:
   unplugin-icons: ^0.15.3
   unplugin-vue-components: ^0.24.0
   unplugin-vue-macros: ^1.9.1
+  vee-validate: ^4.8.4
   vite: ^4.1.0
   vite-plugin-pages: ^0.28.0
   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
@@ -46,9 +46,9 @@ dependencies:
   markdown-it-link-attributes: 4.0.1
   markdown-it-shiki: 0.8.0
   simple-jsonrpc-js: 1.2.0
+  vee-validate: 4.8.4_vue@3.2.47
   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
 
@@ -565,8 +565,8 @@ packages:
       vue-i18n:
         optional: true
     dependencies:
-      '@intlify/message-compiler': 9.3.0-beta.16
+      '@intlify/message-compiler': 9.3.0-beta.17
-      '@intlify/shared': 9.3.0-beta.16
+      '@intlify/shared': 9.3.0-beta.17
       jsonc-eslint-parser: 1.4.1
       source-map: 0.6.1
       vue-i18n: 9.2.2_vue@3.2.47
@@ -598,11 +598,11 @@ packages:
       source-map: 0.6.1
     dev: false
 
-  /@intlify/message-compiler/9.3.0-beta.16:
+  /@intlify/message-compiler/9.3.0-beta.17:
-    resolution: {integrity: sha512-CGQI3xRcs1ET75eDQ0DUy3MRYOqTauRIIgaMoISKiF83gqRWg93FqN8lGMKcpBqaF4tI0JhsfosCaGiBL9+dnw==}
+    resolution: {integrity: sha512-i7hvVIRk1Ax2uKa9xLRJCT57to08OhFMhFXXjWN07rmx5pWQYQ23MfX1xgggv9drnWTNhqEiD+u4EJeHoS5+Ww==}
     engines: {node: '>= 14'}
     dependencies:
-      '@intlify/shared': 9.3.0-beta.16
+      '@intlify/shared': 9.3.0-beta.17
       source-map: 0.6.1
     dev: false
 
@@ -611,8 +611,8 @@ packages:
     engines: {node: '>= 14'}
     dev: false
 
-  /@intlify/shared/9.3.0-beta.16:
+  /@intlify/shared/9.3.0-beta.17:
-    resolution: {integrity: sha512-kXbm4svALe3lX+EjdJxfnabOphqS4yQ1Ge/iIlR8tvUiYRCoNz3hig1M4336iY++Dfx5ytEQJPNjIcknNIuvig==}
+    resolution: {integrity: sha512-mscf7RQsUTOil35jTij4KGW1RC9SWQjYScwLxP53Ns6g24iEd5HN7ksbt9O6FvTmlQuX77u+MXpBdfJsGqizLQ==}
     engines: {node: '>= 14'}
     dev: false
 
@@ -632,7 +632,7 @@ packages:
         optional: true
     dependencies:
       '@intlify/bundle-utils': 4.0.0_vue-i18n@9.2.2
-      '@intlify/shared': 9.3.0-beta.16
+      '@intlify/shared': 9.3.0-beta.17
       '@rollup/pluginutils': 4.2.1
       '@vue/compiler-sfc': 3.2.47
       debug: 4.3.4
@@ -3705,6 +3705,15 @@ packages:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
     dev: true
 
+  /vee-validate/4.8.4_vue@3.2.47:
+    resolution: {integrity: sha512-wlLBy50t4EMEin5oqxS2mxpqW02TkIsk0H3LcivLztNJKKLW17hpPSQtQnn8wjDLoWWZ/CVOfep6aw77aCAavg==}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      '@vue/devtools-api': 6.5.0
+      vue: 3.2.47
+    dev: false
+
   /vite-plugin-pages/0.28.0_vite@4.1.4:
     resolution: {integrity: sha512-yncDncFVnjUzhqJnwCgGDZoZ/wO6MEOMe93f2MQjplKXm1MpmHCrTkFCPnQyYGZTVKPAN+y7BQcIpNWPFLQ4+w==}
     peerDependencies:
@@ -3831,11 +3840,6 @@ 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:

client/src/global-styles/components.css

@@ -29,6 +29,9 @@ form {
 form > :is(button, .button, h1) {
   grid-column: 1 / 3;
 }
+form > :is(label) {
+  grid-column: 1;
+}
 
 table {
   width: 100%;
@@ -68,7 +71,7 @@ button, .button {
   background-color: var(--cl-bg-hl);
 }
 
-input {
+input, textarea {
   background-color: var(--cl-bg-hl);
   border: 1px solid var(--cl-fg);
 }

client/src/pages/index.vue

@@ -1,14 +1,13 @@
 <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' },
+let name = $ref("");
-  { name: 'Javascript', code: 'js' },
+let comment = $ref("");
-  { name: 'Open Source', code: 'os' }];
+let counter = $ref(false);
 
 </script>
 
@@ -17,478 +16,18 @@ let options = [{ name: 'Vue.js', code: 'vu' },
     <PageHeader title="Dashboard">
       <button @click="doShit">Example Buttons</button>
     </PageHeader>
-    <multiselect v-model="value" placeholder="Search" label="name" track-by="code" :options="options" :multiple="true"></multiselect>
+    <form class="cl-secondary">
+      <h3>Create Rule</h3>
+      <label for="name" v-text="'Name'"/>
+      <input name="name" v-model="name"/>
+      <label for="counter" v-text="'Counter'"/>
+      <input name="counter" type="checkbox" v-model="counter"/>
+      <label for="comment" v-text="'Comment'"/>
+      <textarea name="comment" v-model="comment"></textarea>
+      <button>Submit</button>
+    </form>
   </div>
 </template>
 
 <style>
-.multiselect, .multiselect * {
-    all: initial;
-}
-
-fieldset[disabled] .multiselect {
-    pointer-events: none
-}
-
-.multiselect__spinner {
-    position: absolute;
-    right: 1px;
-    top: 1px;
-    width: 48px;
-    height: 35px;
-    background: var(--cl-bg-el);
-    display: block
-}
-
-.multiselect__spinner:after,
-.multiselect__spinner:before {
-    position: absolute;
-    content: "";
-    top: 50%;
-    left: 50%;
-    margin: -8px 0 0 -8px;
-    width: 16px;
-    height: 16px;
-    border-radius: 100%;
-    border: 2px solid transparent;
-    border-top-color: #41b883;
-    box-shadow: 0 0 0 1px transparent
-}
-
-.multiselect__spinner:before {
-    animation: spinning 2.4s cubic-bezier(.41, .26, .2, .62);
-    animation-iteration-count: infinite
-}
-
-.multiselect__spinner:after {
-    animation: spinning 2.4s cubic-bezier(.51, .09, .21, .8);
-    animation-iteration-count: infinite
-}
-
-.multiselect__loading-enter-active,
-.multiselect__loading-leave-active {
-    transition: opacity .4s ease-in-out;
-    opacity: 1
-}
-
-.multiselect__loading-enter,
-.multiselect__loading-leave-active {
-    opacity: 0
-}
-
-.multiselect,
-.multiselect__input,
-.multiselect__single {
-    font-family: inherit;
-    font-size: 16px;
-    -ms-touch-action: manipulation;
-    touch-action: manipulation
-}
-
-.multiselect {
-    box-sizing: content-box;
-    display: block;
-    position: relative;
-    width: 100%;
-    min-height: 40px;
-    text-align: left;
-    color: #35495e
-}
-
-.multiselect * {
-    box-sizing: border-box
-}
-
-.multiselect:focus {
-    outline: none
-}
-
-.multiselect--disabled {
-    background: #ededed;
-    pointer-events: none;
-    opacity: .6
-}
-
-.multiselect--active {
-    z-index: 50
-}
-
-.multiselect--active:not(.multiselect--above) .multiselect__current,
-.multiselect--active:not(.multiselect--above) .multiselect__input,
-.multiselect--active:not(.multiselect--above) .multiselect__tags {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0
-}
-
-.multiselect--active .multiselect__select {
-    transform: rotate(180deg)
-}
-
-.multiselect--above.multiselect--active .multiselect__current,
-.multiselect--above.multiselect--active .multiselect__input,
-.multiselect--above.multiselect--active .multiselect__tags {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0
-}
-
-.multiselect__input,
-.multiselect__single {
-    position: relative;
-    display: inline-block;
-    min-height: 20px;
-    line-height: 20px;
-    border: none;
-    border-radius: 5px;
-    background: var(--cl-bg-el);
-    padding: 0 0 0 5px;
-    width: 100%;
-    transition: border .1s ease;
-    box-sizing: border-box;
-    margin-bottom: 8px;
-    vertical-align: top
-}
-
-.multiselect__input:-ms-input-placeholder {
-    color: #35495e
-}
-
-.multiselect__input::placeholder {
-    color: #35495e
-}
-
-.multiselect__tag~.multiselect__input,
-.multiselect__tag~.multiselect__single {
-    width: auto
-}
-
-.multiselect__input:hover,
-.multiselect__single:hover {
-    border-color: #cfcfcf
-}
-
-.multiselect__input:focus,
-.multiselect__single:focus {
-    border-color: #a8a8a8;
-    outline: none
-}
-
-.multiselect__single {
-    padding-left: 5px;
-    margin-bottom: 8px
-}
-
-.multiselect__tags-wrap {
-    display: inline
-}
-
-.multiselect__tags {
-    min-height: 40px;
-    display: block;
-    padding: 8px 40px 0 8px;
-    border-radius: 5px;
-    border: 1px solid #e8e8e8;
-    background: var(--cl-bg-el);
-    font-size: 14px
-}
-
-.multiselect__tag {
-    position: relative;
-    display: inline-block;
-    padding: 4px 26px 4px 10px;
-    border-radius: 5px;
-    margin-right: 10px;
-    color: var(--cl-fg);
-    line-height: 1;
-    background: var(--cl-bg);
-    margin-bottom: 5px;
-    white-space: nowrap;
-    overflow: hidden;
-    max-width: 100%;
-    text-overflow: ellipsis
-}
-
-.multiselect__tag-icon {
-    cursor: pointer;
-    margin-left: 7px;
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    font-weight: 700;
-    font-style: normal;
-    width: 22px;
-    text-align: center;
-    line-height: 22px;
-    transition: all .2s ease;
-    border-radius: 5px
-}
-
-.multiselect__tag-icon:after {
-    content: "\D7";
-    color: #266d4d;
-    font-size: 14px
-}
-
-.multiselect__tag-icon:focus,
-.multiselect__tag-icon:hover {
-    background: #369a6e
-}
-
-.multiselect__tag-icon:focus:after,
-.multiselect__tag-icon:hover:after {
-    color: var(--cl-bg-el);
-}
-
-.multiselect__current {
-    min-height: 40px;
-    overflow: hidden;
-    padding: 8px 30px 0 12px;
-    white-space: nowrap;
-    border-radius: 5px;
-    border: 1px solid #e8e8e8
-}
-
-.multiselect__current,
-.multiselect__select {
-    line-height: 16px;
-    box-sizing: border-box;
-    display: block;
-    margin: 0;
-    text-decoration: none;
-    cursor: pointer
-}
-
-.multiselect__select {
-    position: absolute;
-    width: 40px;
-    height: 38px;
-    right: 1px;
-    top: 1px;
-    padding: 4px 8px;
-    text-align: center;
-    transition: transform .2s ease
-}
-
-.multiselect__select:before {
-    position: relative;
-    right: 0;
-    top: 65%;
-    color: #999;
-    margin-top: 4px;
-    border-color: #999 transparent transparent;
-    border-style: solid;
-    border-width: 5px 5px 0;
-    content: ""
-}
-
-.multiselect__placeholder {
-    color: #adadad;
-    display: inline-block;
-    margin-bottom: 10px;
-    padding-top: 2px
-}
-
-.multiselect--active .multiselect__placeholder {
-    display: none
-}
-
-.multiselect__content-wrapper {
-    position: absolute;
-    display: block;
-    background: var(--cl-bg-el);
-    width: 100%;
-    max-height: 240px;
-    overflow: auto;
-    border: 1px solid #e8e8e8;
-    border-top: none;
-    border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 5px;
-    z-index: 50;
-    -webkit-overflow-scrolling: touch
-}
-
-.multiselect__content {
-    list-style: none;
-    display: inline-block;
-    padding: 0;
-    margin: 0;
-    min-width: 100%;
-    vertical-align: top
-}
-
-.multiselect--above .multiselect__content-wrapper {
-    bottom: 100%;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-    border-bottom: none;
-    border-top: 1px solid #e8e8e8
-}
-
-.multiselect__content::webkit-scrollbar {
-    display: none
-}
-
-.multiselect__element {
-    display: block
-}
-
-.multiselect__option {
-    display: block;
-    padding: 12px;
-    min-height: 40px;
-    line-height: 16px;
-    text-decoration: none;
-    text-transform: none;
-    vertical-align: middle;
-    position: relative;
-    cursor: pointer;
-    white-space: nowrap
-}
-
-.multiselect__option:after {
-    top: 0;
-    right: 0;
-    position: absolute;
-    line-height: 40px;
-    padding-right: 12px;
-    padding-left: 20px;
-    font-size: 13px
-}
-
-.multiselect__option--highlight {
-    background: #41b883;
-    outline: none;
-    color: var(--cl-bg-el);
-}
-
-.multiselect__option--highlight:after {
-    content: attr(data-select);
-    background: #41b883;
-    color: var(--cl-bg-el);
-}
-
-.multiselect__option--selected {
-    background: #f3f3f3;
-    color: #35495e;
-    font-weight: 700
-}
-
-.multiselect__option--selected:after {
-    content: attr(data-selected);
-    color: silver
-}
-
-.multiselect__option--selected.multiselect__option--highlight {
-    background: #ff6a6a;
-    color: var(--cl-bg-el);
-}
-
-.multiselect__option--selected.multiselect__option--highlight:after {
-    background: #ff6a6a;
-    content: attr(data-deselect);
-    color: var(--cl-bg-el);
-}
-
-.multiselect--disabled .multiselect__current,
-.multiselect--disabled .multiselect__select {
-    background: #ededed;
-    color: #a6a6a6
-}
-
-.multiselect__option--disabled {
-    background: #ededed !important;
-    color: #a6a6a6 !important;
-    cursor: text;
-    pointer-events: none
-}
-
-.multiselect__option--group {
-    background: #ededed;
-    color: #35495e
-}
-
-.multiselect__option--group.multiselect__option--highlight {
-    background: #35495e;
-    color: var(--cl-bg-el);
-}
-
-.multiselect__option--group.multiselect__option--highlight:after {
-    background: #35495e
-}
-
-.multiselect__option--disabled.multiselect__option--highlight {
-    background: #dedede
-}
-
-.multiselect__option--group-selected.multiselect__option--highlight {
-    background: #ff6a6a;
-    color: var(--cl-bg-el);
-}
-
-.multiselect__option--group-selected.multiselect__option--highlight:after {
-    background: #ff6a6a;
-    content: attr(data-deselect);
-    color: var(--cl-bg-el);
-}
-
-.multiselect-enter-active,
-.multiselect-leave-active {
-    transition: all .15s ease
-}
-
-.multiselect-enter,
-.multiselect-leave-active {
-    opacity: 0
-}
-
-.multiselect__strong {
-    margin-bottom: 8px;
-    line-height: 20px;
-    display: inline-block;
-    vertical-align: top
-}
-
-[dir=rtl] .multiselect {
-    text-align: right
-}
-
-[dir=rtl] .multiselect__select {
-    right: auto;
-    left: 1px
-}
-
-[dir=rtl] .multiselect__tags {
-    padding: 8px 8px 0 40px
-}
-
-[dir=rtl] .multiselect__content {
-    text-align: right
-}
-
-[dir=rtl] .multiselect__option:after {
-    right: auto;
-    left: 0
-}
-
-[dir=rtl] .multiselect__clear {
-    right: auto;
-    left: 12px
-}
-
-[dir=rtl] .multiselect__spinner {
-    right: auto;
-    left: 1px
-}
-
-@keyframes spinning {
-    0% {
-        transform: rotate(0)
-    }
-
-    to {
-        transform: rotate(2turn)
-    }
-}
 </style>