package-lock.json

@@ -334,9 +334,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.15.8",
+      "version": "7.14.4",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.8.tgz",
+      "resolved": "https://registry.nlark.com/@babel/parser/download/@babel/parser-7.14.4.tgz",
-      "integrity": "sha512-BRYa3wcQnjS/nqI8Ac94pYYpJfojHVvVXJ97+IDCImX4Jc8W8Xv1+47enbruk+q1etOpsQNwnfFcNGw+gtPGxA==",
+      "integrity": "sha1-pcVg1tts2ObtNCNo3qgDkjLLqxg=",
       "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -1807,54 +1807,73 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.2.20",
+      "version": "3.0.11",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.20.tgz",
+      "resolved": "https://registry.nlark.com/@vue/compiler-core/download/@vue/compiler-core-3.0.11.tgz",
-      "integrity": "sha512-vcEXlKXoPwBXFP5aUTHN9GTZaDfwCofa9Yu9bbW2C5O/QSa9Esdt7OG4+0RRd3EHEMxUvEdj4RZrd/KpQeiJbA==",
+      "integrity": "sha1-XvV55G17M2uHNSKHWNHCxQWq5po=",
       "dev": true,
       "dependencies": {
-        "@babel/parser": "^7.15.0",
+        "@babel/parser": "^7.12.0",
-        "@vue/shared": "3.2.20",
+        "@babel/types": "^7.12.0",
-        "estree-walker": "^2.0.2",
+        "@vue/shared": "3.0.11",
+        "estree-walker": "^2.0.1",
         "source-map": "^0.6.1"
       }
     },
     "node_modules/@vue/compiler-core/node_modules/source-map": {
       "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
       "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.2.20",
+      "version": "3.0.11",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.20.tgz",
+      "resolved": "https://registry.nlark.com/@vue/compiler-dom/download/@vue/compiler-dom-3.0.11.tgz",
-      "integrity": "sha512-QnI77ec/JtV7R0YBbcVayYTDCRcI9OCbxiUQK6izVyqQO0658n0zQuoNwe+bYgtqnvGAIqTR3FShTd5y4oOjdg==",
+      "integrity": "sha1-sV/ByQk3H9ZxdGAgulW12rSnMO4=",
       "dev": true,
       "dependencies": {
-        "@vue/compiler-core": "3.2.20",
+        "@vue/compiler-core": "3.0.11",
-        "@vue/shared": "3.2.20"
+        "@vue/shared": "3.0.11"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.2.20",
+      "version": "3.0.11",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.20.tgz",
+      "resolved": "https://registry.nlark.com/@vue/compiler-sfc/download/@vue/compiler-sfc-3.0.11.tgz",
-      "integrity": "sha512-03aZo+6tQKiFLfunHKSPZvdK4Jsn/ftRCyaro8AQIWkuxJbvSosbKK6HTTn+D2c3nPScG155akJoxKENw7rftQ==",
+      "integrity": "sha1-zYyiFUuIlntSH1rTsQ9fi2tmVnk=",
       "dev": true,
       "dependencies": {
-        "@babel/parser": "^7.15.0",
+        "@babel/parser": "^7.13.9",
-        "@vue/compiler-core": "3.2.20",
+        "@babel/types": "^7.13.0",
-        "@vue/compiler-dom": "3.2.20",
+        "@vue/compiler-core": "3.0.11",
-        "@vue/compiler-ssr": "3.2.20",
+        "@vue/compiler-dom": "3.0.11",
-        "@vue/ref-transform": "3.2.20",
+        "@vue/compiler-ssr": "3.0.11",
-        "@vue/shared": "3.2.20",
+        "@vue/shared": "3.0.11",
-        "estree-walker": "^2.0.2",
+        "consolidate": "^0.16.0",
+        "estree-walker": "^2.0.1",
+        "hash-sum": "^2.0.0",
+        "lru-cache": "^5.1.1",
         "magic-string": "^0.25.7",
+        "merge-source-map": "^1.1.0",
         "postcss": "^8.1.10",
+        "postcss-modules": "^4.0.0",
+        "postcss-selector-parser": "^6.0.4",
         "source-map": "^0.6.1"
       }
     },
+    "node_modules/@vue/compiler-sfc/node_modules/consolidate": {
+      "version": "0.16.0",
+      "resolved": "https://registry.npm.taobao.org/consolidate/download/consolidate-0.16.0.tgz?cache=0&sync_timestamp=1599596658886&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fconsolidate%2Fdownload%2Fconsolidate-0.16.0.tgz",
+      "integrity": "sha1-oRhkdokw8vGUMWYKZZBmaPX73BY=",
+      "dev": true,
+      "dependencies": {
+        "bluebird": "^3.7.2"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
     "node_modules/@vue/compiler-sfc/node_modules/postcss": {
       "version": "8.3.0",
       "resolved": "https://registry.nlark.com/postcss/download/postcss-8.3.0.tgz?cache=0&sync_timestamp=1621568932145&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fpostcss%2Fdownload%2Fpostcss-8.3.0.tgz",
@@ -1879,13 +1898,13 @@
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.2.20",
+      "version": "3.0.11",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.20.tgz",
+      "resolved": "https://registry.nlark.com/@vue/compiler-ssr/download/@vue/compiler-ssr-3.0.11.tgz",
-      "integrity": "sha512-rzzVVYivm+EjbfiGQvNeyiYZWzr6Hkej97RZLZvcumacQlnKv9176Xo9rRyeWwFbBlxmtNdrVMslRXtipMXk2w==",
+      "integrity": "sha1-rFoF/RJXQS+mYHnII9ggO2qImhM=",
       "dev": true,
       "dependencies": {
-        "@vue/compiler-dom": "3.2.20",
+        "@vue/compiler-dom": "3.0.11",
-        "@vue/shared": "3.2.20"
+        "@vue/shared": "3.0.11"
       }
     },
     "node_modules/@vue/component-compiler-utils": {
@@ -1954,65 +1973,39 @@
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.2.20",
+      "version": "3.0.11",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.20.tgz",
+      "resolved": "https://registry.nlark.com/@vue/reactivity/download/@vue/reactivity-3.0.11.tgz",
-      "integrity": "sha512-nSmoLojUTk+H8HNTAkrUduB4+yIUBK2HPihJo2uXVSH4Spry6oqN6lFzE5zpLK+F27Sja+UqR9R1+/kIOsHV5w==",
+      "integrity": "sha1-B7WINJ/QViaxfzUAy+99S9tNvQs=",
       "dev": true,
       "dependencies": {
-        "@vue/shared": "3.2.20"
+        "@vue/shared": "3.0.11"
-      }
-    },
-    "node_modules/@vue/ref-transform": {
-      "version": "3.2.20",
-      "resolved": "https://registry.npmjs.org/@vue/ref-transform/-/ref-transform-3.2.20.tgz",
-      "integrity": "sha512-Y42d3PGlYZ1lXcF3dbd3+qU/C/a3wYEZ949fyOI5ptzkjDWlkfU6vn74fmOjsLjEcjs10BXK2qO99FqQIK2r1Q==",
-      "dev": true,
-      "dependencies": {
-        "@babel/parser": "^7.15.0",
-        "@vue/compiler-core": "3.2.20",
-        "@vue/shared": "3.2.20",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.25.7"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.2.20",
+      "version": "3.0.11",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.20.tgz",
+      "resolved": "https://registry.nlark.com/@vue/runtime-core/download/@vue/runtime-core-3.0.11.tgz",
-      "integrity": "sha512-d1xfUGhZPfiZzAN7SatStD4vRtT8deJSXib2+Cz3x0brjMWKxe32asQc154FF1E2fFgMCHtnfd4A90bQEzV4GQ==",
+      "integrity": "sha1-xS38as8yFUk2I1UsHCkZCAxWLkQ=",
       "dev": true,
       "dependencies": {
-        "@vue/reactivity": "3.2.20",
+        "@vue/reactivity": "3.0.11",
-        "@vue/shared": "3.2.20"
+        "@vue/shared": "3.0.11"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.2.20",
+      "version": "3.0.11",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.20.tgz",
+      "resolved": "https://registry.nlark.com/@vue/runtime-dom/download/@vue/runtime-dom-3.0.11.tgz",
-      "integrity": "sha512-4TCvZMLhESWCFHFYgqN4QmMA/onnINAlUovhopjlS8ST27G1A8Z0tyxPzLoXLa+b5JrOpbMPheEMPvdKExTJig==",
+      "integrity": "sha1-elUt8hkHlCch/raWHEGOIippkzc=",
       "dev": true,
       "dependencies": {
-        "@vue/runtime-core": "3.2.20",
+        "@vue/runtime-core": "3.0.11",
-        "@vue/shared": "3.2.20",
+        "@vue/shared": "3.0.11",
         "csstype": "^2.6.8"
       }
     },
-    "node_modules/@vue/server-renderer": {
-      "version": "3.2.20",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.20.tgz",
-      "integrity": "sha512-viIbZGep9XabnrRcaxWIi00cOh1x21QYm2upIL5W0zqzTJ54VdTzpI+zi1osNp+VfRQDTHpV2U7H3Kn4ljYJvg==",
-      "dev": true,
-      "dependencies": {
-        "@vue/compiler-ssr": "3.2.20",
-        "@vue/shared": "3.2.20"
-      },
-      "peerDependencies": {
-        "vue": "3.2.20"
-      }
-    },
     "node_modules/@vue/shared": {
-      "version": "3.2.20",
+      "version": "3.0.11",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.20.tgz",
+      "resolved": "https://registry.nlark.com/@vue/shared/download/@vue/shared-3.0.11.tgz",
-      "integrity": "sha512-FbpX+hD5BvXCQerEYO7jtAGHlhAkhTQ4KIV73kmLWNlawWhTiVuQxizgVb0BOkX5oG9cIRZ42EG++d/k/Efp0w==",
+      "integrity": "sha1-INIt0Np9NYuyHBf5vehigVJkLHc=",
       "dev": true
     },
     "node_modules/@vue/web-component-wrapper": {
@@ -4542,9 +4535,9 @@
       }
     },
     "node_modules/csstype": {
-      "version": "2.6.18",
+      "version": "2.6.17",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.18.tgz",
+      "resolved": "https://registry.nlark.com/csstype/download/csstype-2.6.17.tgz",
-      "integrity": "sha512-RSU6Hyeg14am3Ah4VZEmeX8H7kLwEEirXe6aU2IPfKNvhXwTflK5HQRDNI0ypQXoqmm+QPyG2IaPuQE5zMwSIQ==",
+      "integrity": "sha1-TPMOuH4dGgBdi2UQ+VKSQT9qHA4=",
       "dev": true
     },
     "node_modules/cyclist": {
@@ -5574,8 +5567,8 @@
     },
     "node_modules/estree-walker": {
       "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "resolved": "https://registry.npm.taobao.org/estree-walker/download/estree-walker-2.0.2.tgz?cache=0&sync_timestamp=1611955458899&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Festree-walker%2Fdownload%2Festree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "integrity": "sha1-UvAQF4wqTBF6d1fP6UKtt9LaTKw=",
       "dev": true
     },
     "node_modules/esutils": {
@@ -6338,6 +6331,15 @@
       "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
       "dev": true
     },
+    "node_modules/generic-names": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npm.taobao.org/generic-names/download/generic-names-2.0.1.tgz?cache=0&sync_timestamp=1603542442076&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fgeneric-names%2Fdownload%2Fgeneric-names-2.0.1.tgz",
+      "integrity": "sha1-+KN46tLMqno08DF7BVVIMq5BuHI=",
+      "dev": true,
+      "dependencies": {
+        "loader-utils": "^1.1.0"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npm.taobao.org/gensync/download/gensync-1.0.0-beta.2.tgz?cache=0&sync_timestamp=1603829716561&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fgensync%2Fdownload%2Fgensync-1.0.0-beta.2.tgz",
@@ -7007,6 +7009,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/icss-replace-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npm.taobao.org/icss-replace-symbols/download/icss-replace-symbols-1.1.0.tgz",
+      "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=",
+      "dev": true
+    },
     "node_modules/icss-utils": {
       "version": "4.1.1",
       "resolved": "https://registry.npm.taobao.org/icss-utils/download/icss-utils-4.1.1.tgz?cache=0&sync_timestamp=1605801506037&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ficss-utils%2Fdownload%2Ficss-utils-4.1.1.tgz",
@@ -8116,6 +8124,12 @@
       "integrity": "sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw=",
       "dev": true
     },
+    "node_modules/lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npm.taobao.org/lodash.camelcase/download/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
+      "dev": true
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.nlark.com/lodash.debounce/download/lodash.debounce-4.0.8.tgz",
@@ -9888,6 +9902,22 @@
         "node": ">=8"
       }
     },
+    "node_modules/postcss-modules": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npm.taobao.org/postcss-modules/download/postcss-modules-4.0.0.tgz?cache=0&sync_timestamp=1606641138659&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-modules%2Fdownload%2Fpostcss-modules-4.0.0.tgz",
+      "integrity": "sha1-K8fydquI8/Gw+t9svXdy1DtfO5s=",
+      "dev": true,
+      "dependencies": {
+        "generic-names": "^2.0.1",
+        "icss-replace-symbols": "^1.1.0",
+        "lodash.camelcase": "^4.3.0",
+        "postcss-modules-extract-imports": "^3.0.0",
+        "postcss-modules-local-by-default": "^4.0.0",
+        "postcss-modules-scope": "^3.0.0",
+        "postcss-modules-values": "^4.0.0",
+        "string-hash": "^1.1.1"
+      }
+    },
     "node_modules/postcss-modules-extract-imports": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/postcss-modules-extract-imports/download/postcss-modules-extract-imports-2.0.0.tgz?cache=0&sync_timestamp=1602588177787&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-modules-extract-imports%2Fdownload%2Fpostcss-modules-extract-imports-2.0.0.tgz",
@@ -9938,6 +9968,62 @@
         "postcss": "^7.0.6"
       }
     },
+    "node_modules/postcss-modules/node_modules/icss-utils": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npm.taobao.org/icss-utils/download/icss-utils-5.1.0.tgz?cache=0&sync_timestamp=1605801506037&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ficss-utils%2Fdownload%2Ficss-utils-5.1.0.tgz",
+      "integrity": "sha1-xr5oWKvQE9do6YNmrkfiXViHsa4=",
+      "dev": true,
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      }
+    },
+    "node_modules/postcss-modules/node_modules/postcss-modules-extract-imports": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npm.taobao.org/postcss-modules-extract-imports/download/postcss-modules-extract-imports-3.0.0.tgz?cache=0&sync_timestamp=1602588177787&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-modules-extract-imports%2Fdownload%2Fpostcss-modules-extract-imports-3.0.0.tgz",
+      "integrity": "sha1-zaHwR8CugMl9vijD52pDuIAldB0=",
+      "dev": true,
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      }
+    },
+    "node_modules/postcss-modules/node_modules/postcss-modules-local-by-default": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npm.taobao.org/postcss-modules-local-by-default/download/postcss-modules-local-by-default-4.0.0.tgz?cache=0&sync_timestamp=1602587565462&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-modules-local-by-default%2Fdownload%2Fpostcss-modules-local-by-default-4.0.0.tgz",
+      "integrity": "sha1-67tU+uFZjuz99pGgKz/zs5ClpRw=",
+      "dev": true,
+      "dependencies": {
+        "icss-utils": "^5.0.0",
+        "postcss-selector-parser": "^6.0.2",
+        "postcss-value-parser": "^4.1.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      }
+    },
+    "node_modules/postcss-modules/node_modules/postcss-modules-scope": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npm.taobao.org/postcss-modules-scope/download/postcss-modules-scope-3.0.0.tgz?cache=0&sync_timestamp=1602593177072&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-modules-scope%2Fdownload%2Fpostcss-modules-scope-3.0.0.tgz",
+      "integrity": "sha1-nvMVFFbTu/oSDKRImN/Kby+gHwY=",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.4"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      }
+    },
+    "node_modules/postcss-modules/node_modules/postcss-modules-values": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npm.taobao.org/postcss-modules-values/download/postcss-modules-values-4.0.0.tgz?cache=0&sync_timestamp=1602586198892&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-modules-values%2Fdownload%2Fpostcss-modules-values-4.0.0.tgz",
+      "integrity": "sha1-18Xn5ow7s8myfL9Iyguz/7RgLJw=",
+      "dev": true,
+      "dependencies": {
+        "icss-utils": "^5.0.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      }
+    },
     "node_modules/postcss-normalize-charset": {
       "version": "4.0.1",
       "resolved": "https://registry.nlark.com/postcss-normalize-charset/download/postcss-normalize-charset-4.0.1.tgz?cache=0&sync_timestamp=1621449638213&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fpostcss-normalize-charset%2Fdownload%2Fpostcss-normalize-charset-4.0.1.tgz",
@@ -11994,6 +12080,12 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/string-hash": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npm.taobao.org/string-hash/download/string-hash-1.1.3.tgz",
+      "integrity": "sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=",
+      "dev": true
+    },
     "node_modules/string-width": {
       "version": "2.1.1",
       "resolved": "https://registry.npm.taobao.org/string-width/download/string-width-2.1.1.tgz?cache=0&sync_timestamp=1618558856477&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fstring-width%2Fdownload%2Fstring-width-2.1.1.tgz",
@@ -13060,16 +13152,14 @@
       "dev": true
     },
     "node_modules/vue": {
-      "version": "3.2.20",
+      "version": "3.0.11",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.20.tgz",
+      "resolved": "https://registry.nlark.com/vue/download/vue-3.0.11.tgz?cache=0&sync_timestamp=1622235952885&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue%2Fdownload%2Fvue-3.0.11.tgz",
-      "integrity": "sha512-81JjEP4OGk9oO8+CU0h2nFPGgJBm9mNa3kdCX2k6FuRdrWrC+CNe+tOnuIeTg8EWwQuI+wwdra5Q7vSzp7p4Iw==",
+      "integrity": "sha1-yC+VlMv03MhpJB1MjdPgjZqPS18=",
       "dev": true,
       "dependencies": {
-        "@vue/compiler-dom": "3.2.20",
+        "@vue/compiler-dom": "3.0.11",
-        "@vue/compiler-sfc": "3.2.20",
+        "@vue/runtime-dom": "3.0.11",
-        "@vue/runtime-dom": "3.2.20",
+        "@vue/shared": "3.0.11"
-        "@vue/server-renderer": "3.2.20",
-        "@vue/shared": "3.2.20"
       }
     },
     "node_modules/vue-eslint-parser": {
@@ -14709,9 +14799,9 @@
       }
     },
     "@babel/parser": {
-      "version": "7.15.8",
+      "version": "7.14.4",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.8.tgz",
+      "resolved": "https://registry.nlark.com/@babel/parser/download/@babel/parser-7.14.4.tgz",
-      "integrity": "sha512-BRYa3wcQnjS/nqI8Ac94pYYpJfojHVvVXJ97+IDCImX4Jc8W8Xv1+47enbruk+q1etOpsQNwnfFcNGw+gtPGxA==",
+      "integrity": "sha1-pcVg1tts2ObtNCNo3qgDkjLLqxg=",
       "dev": true
     },
     "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
@@ -16139,53 +16229,69 @@
       }
     },
     "@vue/compiler-core": {
-      "version": "3.2.20",
+      "version": "3.0.11",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.20.tgz",
+      "resolved": "https://registry.nlark.com/@vue/compiler-core/download/@vue/compiler-core-3.0.11.tgz",
-      "integrity": "sha512-vcEXlKXoPwBXFP5aUTHN9GTZaDfwCofa9Yu9bbW2C5O/QSa9Esdt7OG4+0RRd3EHEMxUvEdj4RZrd/KpQeiJbA==",
+      "integrity": "sha1-XvV55G17M2uHNSKHWNHCxQWq5po=",
       "dev": true,
       "requires": {
-        "@babel/parser": "^7.15.0",
+        "@babel/parser": "^7.12.0",
-        "@vue/shared": "3.2.20",
+        "@babel/types": "^7.12.0",
-        "estree-walker": "^2.0.2",
+        "@vue/shared": "3.0.11",
+        "estree-walker": "^2.0.1",
         "source-map": "^0.6.1"
       },
       "dependencies": {
         "source-map": {
           "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
           "dev": true
         }
       }
     },
     "@vue/compiler-dom": {
-      "version": "3.2.20",
+      "version": "3.0.11",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.20.tgz",
+      "resolved": "https://registry.nlark.com/@vue/compiler-dom/download/@vue/compiler-dom-3.0.11.tgz",
-      "integrity": "sha512-QnI77ec/JtV7R0YBbcVayYTDCRcI9OCbxiUQK6izVyqQO0658n0zQuoNwe+bYgtqnvGAIqTR3FShTd5y4oOjdg==",
+      "integrity": "sha1-sV/ByQk3H9ZxdGAgulW12rSnMO4=",
       "dev": true,
       "requires": {
-        "@vue/compiler-core": "3.2.20",
+        "@vue/compiler-core": "3.0.11",
-        "@vue/shared": "3.2.20"
+        "@vue/shared": "3.0.11"
       }
     },
     "@vue/compiler-sfc": {
-      "version": "3.2.20",
+      "version": "3.0.11",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.20.tgz",
+      "resolved": "https://registry.nlark.com/@vue/compiler-sfc/download/@vue/compiler-sfc-3.0.11.tgz",
-      "integrity": "sha512-03aZo+6tQKiFLfunHKSPZvdK4Jsn/ftRCyaro8AQIWkuxJbvSosbKK6HTTn+D2c3nPScG155akJoxKENw7rftQ==",
+      "integrity": "sha1-zYyiFUuIlntSH1rTsQ9fi2tmVnk=",
       "dev": true,
       "requires": {
-        "@babel/parser": "^7.15.0",
+        "@babel/parser": "^7.13.9",
-        "@vue/compiler-core": "3.2.20",
+        "@babel/types": "^7.13.0",
-        "@vue/compiler-dom": "3.2.20",
+        "@vue/compiler-core": "3.0.11",
-        "@vue/compiler-ssr": "3.2.20",
+        "@vue/compiler-dom": "3.0.11",
-        "@vue/ref-transform": "3.2.20",
+        "@vue/compiler-ssr": "3.0.11",
-        "@vue/shared": "3.2.20",
+        "@vue/shared": "3.0.11",
-        "estree-walker": "^2.0.2",
+        "consolidate": "^0.16.0",
+        "estree-walker": "^2.0.1",
+        "hash-sum": "^2.0.0",
+        "lru-cache": "^5.1.1",
         "magic-string": "^0.25.7",
+        "merge-source-map": "^1.1.0",
         "postcss": "^8.1.10",
+        "postcss-modules": "^4.0.0",
+        "postcss-selector-parser": "^6.0.4",
         "source-map": "^0.6.1"
       },
       "dependencies": {
+        "consolidate": {
+          "version": "0.16.0",
+          "resolved": "https://registry.npm.taobao.org/consolidate/download/consolidate-0.16.0.tgz?cache=0&sync_timestamp=1599596658886&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fconsolidate%2Fdownload%2Fconsolidate-0.16.0.tgz",
+          "integrity": "sha1-oRhkdokw8vGUMWYKZZBmaPX73BY=",
+          "dev": true,
+          "requires": {
+            "bluebird": "^3.7.2"
+          }
+        },
         "postcss": {
           "version": "8.3.0",
           "resolved": "https://registry.nlark.com/postcss/download/postcss-8.3.0.tgz?cache=0&sync_timestamp=1621568932145&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fpostcss%2Fdownload%2Fpostcss-8.3.0.tgz",
@@ -16206,13 +16312,13 @@
       }
     },
     "@vue/compiler-ssr": {
-      "version": "3.2.20",
+      "version": "3.0.11",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.20.tgz",
+      "resolved": "https://registry.nlark.com/@vue/compiler-ssr/download/@vue/compiler-ssr-3.0.11.tgz",
-      "integrity": "sha512-rzzVVYivm+EjbfiGQvNeyiYZWzr6Hkej97RZLZvcumacQlnKv9176Xo9rRyeWwFbBlxmtNdrVMslRXtipMXk2w==",
+      "integrity": "sha1-rFoF/RJXQS+mYHnII9ggO2qImhM=",
       "dev": true,
       "requires": {
-        "@vue/compiler-dom": "3.2.20",
+        "@vue/compiler-dom": "3.0.11",
-        "@vue/shared": "3.2.20"
+        "@vue/shared": "3.0.11"
       }
     },
     "@vue/component-compiler-utils": {
@@ -16275,62 +16381,39 @@
       "dev": true
     },
     "@vue/reactivity": {
-      "version": "3.2.20",
+      "version": "3.0.11",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.20.tgz",
+      "resolved": "https://registry.nlark.com/@vue/reactivity/download/@vue/reactivity-3.0.11.tgz",
-      "integrity": "sha512-nSmoLojUTk+H8HNTAkrUduB4+yIUBK2HPihJo2uXVSH4Spry6oqN6lFzE5zpLK+F27Sja+UqR9R1+/kIOsHV5w==",
+      "integrity": "sha1-B7WINJ/QViaxfzUAy+99S9tNvQs=",
       "dev": true,
       "requires": {
-        "@vue/shared": "3.2.20"
+        "@vue/shared": "3.0.11"
-      }
-    },
-    "@vue/ref-transform": {
-      "version": "3.2.20",
-      "resolved": "https://registry.npmjs.org/@vue/ref-transform/-/ref-transform-3.2.20.tgz",
-      "integrity": "sha512-Y42d3PGlYZ1lXcF3dbd3+qU/C/a3wYEZ949fyOI5ptzkjDWlkfU6vn74fmOjsLjEcjs10BXK2qO99FqQIK2r1Q==",
-      "dev": true,
-      "requires": {
-        "@babel/parser": "^7.15.0",
-        "@vue/compiler-core": "3.2.20",
-        "@vue/shared": "3.2.20",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.25.7"
       }
     },
     "@vue/runtime-core": {
-      "version": "3.2.20",
+      "version": "3.0.11",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.20.tgz",
+      "resolved": "https://registry.nlark.com/@vue/runtime-core/download/@vue/runtime-core-3.0.11.tgz",
-      "integrity": "sha512-d1xfUGhZPfiZzAN7SatStD4vRtT8deJSXib2+Cz3x0brjMWKxe32asQc154FF1E2fFgMCHtnfd4A90bQEzV4GQ==",
+      "integrity": "sha1-xS38as8yFUk2I1UsHCkZCAxWLkQ=",
       "dev": true,
       "requires": {
-        "@vue/reactivity": "3.2.20",
+        "@vue/reactivity": "3.0.11",
-        "@vue/shared": "3.2.20"
+        "@vue/shared": "3.0.11"
       }
     },
     "@vue/runtime-dom": {
-      "version": "3.2.20",
+      "version": "3.0.11",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.20.tgz",
+      "resolved": "https://registry.nlark.com/@vue/runtime-dom/download/@vue/runtime-dom-3.0.11.tgz",
-      "integrity": "sha512-4TCvZMLhESWCFHFYgqN4QmMA/onnINAlUovhopjlS8ST27G1A8Z0tyxPzLoXLa+b5JrOpbMPheEMPvdKExTJig==",
+      "integrity": "sha1-elUt8hkHlCch/raWHEGOIippkzc=",
       "dev": true,
       "requires": {
-        "@vue/runtime-core": "3.2.20",
+        "@vue/runtime-core": "3.0.11",
-        "@vue/shared": "3.2.20",
+        "@vue/shared": "3.0.11",
         "csstype": "^2.6.8"
       }
     },
-    "@vue/server-renderer": {
-      "version": "3.2.20",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.20.tgz",
-      "integrity": "sha512-viIbZGep9XabnrRcaxWIi00cOh1x21QYm2upIL5W0zqzTJ54VdTzpI+zi1osNp+VfRQDTHpV2U7H3Kn4ljYJvg==",
-      "dev": true,
-      "requires": {
-        "@vue/compiler-ssr": "3.2.20",
-        "@vue/shared": "3.2.20"
-      }
-    },
     "@vue/shared": {
-      "version": "3.2.20",
+      "version": "3.0.11",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.20.tgz",
+      "resolved": "https://registry.nlark.com/@vue/shared/download/@vue/shared-3.0.11.tgz",
-      "integrity": "sha512-FbpX+hD5BvXCQerEYO7jtAGHlhAkhTQ4KIV73kmLWNlawWhTiVuQxizgVb0BOkX5oG9cIRZ42EG++d/k/Efp0w==",
+      "integrity": "sha1-INIt0Np9NYuyHBf5vehigVJkLHc=",
       "dev": true
     },
     "@vue/web-component-wrapper": {
@@ -18503,9 +18586,9 @@
       }
     },
     "csstype": {
-      "version": "2.6.18",
+      "version": "2.6.17",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.18.tgz",
+      "resolved": "https://registry.nlark.com/csstype/download/csstype-2.6.17.tgz",
-      "integrity": "sha512-RSU6Hyeg14am3Ah4VZEmeX8H7kLwEEirXe6aU2IPfKNvhXwTflK5HQRDNI0ypQXoqmm+QPyG2IaPuQE5zMwSIQ==",
+      "integrity": "sha1-TPMOuH4dGgBdi2UQ+VKSQT9qHA4=",
       "dev": true
     },
     "cyclist": {
@@ -19363,8 +19446,8 @@
     },
     "estree-walker": {
       "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "resolved": "https://registry.npm.taobao.org/estree-walker/download/estree-walker-2.0.2.tgz?cache=0&sync_timestamp=1611955458899&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Festree-walker%2Fdownload%2Festree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "integrity": "sha1-UvAQF4wqTBF6d1fP6UKtt9LaTKw=",
       "dev": true
     },
     "esutils": {
@@ -19996,6 +20079,15 @@
       "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
       "dev": true
     },
+    "generic-names": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npm.taobao.org/generic-names/download/generic-names-2.0.1.tgz?cache=0&sync_timestamp=1603542442076&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fgeneric-names%2Fdownload%2Fgeneric-names-2.0.1.tgz",
+      "integrity": "sha1-+KN46tLMqno08DF7BVVIMq5BuHI=",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.1.0"
+      }
+    },
     "gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npm.taobao.org/gensync/download/gensync-1.0.0-beta.2.tgz?cache=0&sync_timestamp=1603829716561&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fgensync%2Fdownload%2Fgensync-1.0.0-beta.2.tgz",
@@ -20555,6 +20647,12 @@
         "safer-buffer": ">= 2.1.2 < 3"
       }
     },
+    "icss-replace-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npm.taobao.org/icss-replace-symbols/download/icss-replace-symbols-1.1.0.tgz",
+      "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=",
+      "dev": true
+    },
     "icss-utils": {
       "version": "4.1.1",
       "resolved": "https://registry.npm.taobao.org/icss-utils/download/icss-utils-4.1.1.tgz?cache=0&sync_timestamp=1605801506037&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ficss-utils%2Fdownload%2Ficss-utils-4.1.1.tgz",
@@ -21436,6 +21534,12 @@
       "integrity": "sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw=",
       "dev": true
     },
+    "lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npm.taobao.org/lodash.camelcase/download/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
+      "dev": true
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.nlark.com/lodash.debounce/download/lodash.debounce-4.0.8.tgz",
@@ -22943,6 +23047,65 @@
         }
       }
     },
+    "postcss-modules": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npm.taobao.org/postcss-modules/download/postcss-modules-4.0.0.tgz?cache=0&sync_timestamp=1606641138659&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-modules%2Fdownload%2Fpostcss-modules-4.0.0.tgz",
+      "integrity": "sha1-K8fydquI8/Gw+t9svXdy1DtfO5s=",
+      "dev": true,
+      "requires": {
+        "generic-names": "^2.0.1",
+        "icss-replace-symbols": "^1.1.0",
+        "lodash.camelcase": "^4.3.0",
+        "postcss-modules-extract-imports": "^3.0.0",
+        "postcss-modules-local-by-default": "^4.0.0",
+        "postcss-modules-scope": "^3.0.0",
+        "postcss-modules-values": "^4.0.0",
+        "string-hash": "^1.1.1"
+      },
+      "dependencies": {
+        "icss-utils": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npm.taobao.org/icss-utils/download/icss-utils-5.1.0.tgz?cache=0&sync_timestamp=1605801506037&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ficss-utils%2Fdownload%2Ficss-utils-5.1.0.tgz",
+          "integrity": "sha1-xr5oWKvQE9do6YNmrkfiXViHsa4=",
+          "dev": true
+        },
+        "postcss-modules-extract-imports": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npm.taobao.org/postcss-modules-extract-imports/download/postcss-modules-extract-imports-3.0.0.tgz?cache=0&sync_timestamp=1602588177787&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-modules-extract-imports%2Fdownload%2Fpostcss-modules-extract-imports-3.0.0.tgz",
+          "integrity": "sha1-zaHwR8CugMl9vijD52pDuIAldB0=",
+          "dev": true
+        },
+        "postcss-modules-local-by-default": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npm.taobao.org/postcss-modules-local-by-default/download/postcss-modules-local-by-default-4.0.0.tgz?cache=0&sync_timestamp=1602587565462&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-modules-local-by-default%2Fdownload%2Fpostcss-modules-local-by-default-4.0.0.tgz",
+          "integrity": "sha1-67tU+uFZjuz99pGgKz/zs5ClpRw=",
+          "dev": true,
+          "requires": {
+            "icss-utils": "^5.0.0",
+            "postcss-selector-parser": "^6.0.2",
+            "postcss-value-parser": "^4.1.0"
+          }
+        },
+        "postcss-modules-scope": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npm.taobao.org/postcss-modules-scope/download/postcss-modules-scope-3.0.0.tgz?cache=0&sync_timestamp=1602593177072&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-modules-scope%2Fdownload%2Fpostcss-modules-scope-3.0.0.tgz",
+          "integrity": "sha1-nvMVFFbTu/oSDKRImN/Kby+gHwY=",
+          "dev": true,
+          "requires": {
+            "postcss-selector-parser": "^6.0.4"
+          }
+        },
+        "postcss-modules-values": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npm.taobao.org/postcss-modules-values/download/postcss-modules-values-4.0.0.tgz?cache=0&sync_timestamp=1602586198892&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-modules-values%2Fdownload%2Fpostcss-modules-values-4.0.0.tgz",
+          "integrity": "sha1-18Xn5ow7s8myfL9Iyguz/7RgLJw=",
+          "dev": true,
+          "requires": {
+            "icss-utils": "^5.0.0"
+          }
+        }
+      }
+    },
     "postcss-modules-extract-imports": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/postcss-modules-extract-imports/download/postcss-modules-extract-imports-2.0.0.tgz?cache=0&sync_timestamp=1602588177787&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-modules-extract-imports%2Fdownload%2Fpostcss-modules-extract-imports-2.0.0.tgz",
@@ -24741,6 +24904,12 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "string-hash": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npm.taobao.org/string-hash/download/string-hash-1.1.3.tgz",
+      "integrity": "sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=",
+      "dev": true
+    },
     "string-width": {
       "version": "2.1.1",
       "resolved": "https://registry.npm.taobao.org/string-width/download/string-width-2.1.1.tgz?cache=0&sync_timestamp=1618558856477&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fstring-width%2Fdownload%2Fstring-width-2.1.1.tgz",
@@ -25623,16 +25792,14 @@
       "dev": true
     },
     "vue": {
-      "version": "3.2.20",
+      "version": "3.0.11",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.20.tgz",
+      "resolved": "https://registry.nlark.com/vue/download/vue-3.0.11.tgz?cache=0&sync_timestamp=1622235952885&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue%2Fdownload%2Fvue-3.0.11.tgz",
-      "integrity": "sha512-81JjEP4OGk9oO8+CU0h2nFPGgJBm9mNa3kdCX2k6FuRdrWrC+CNe+tOnuIeTg8EWwQuI+wwdra5Q7vSzp7p4Iw==",
+      "integrity": "sha1-yC+VlMv03MhpJB1MjdPgjZqPS18=",
       "dev": true,
       "requires": {
-        "@vue/compiler-dom": "3.2.20",
+        "@vue/compiler-dom": "3.0.11",
-        "@vue/compiler-sfc": "3.2.20",
+        "@vue/runtime-dom": "3.0.11",
-        "@vue/runtime-dom": "3.2.20",
+        "@vue/shared": "3.0.11"
-        "@vue/server-renderer": "3.2.20",
-        "@vue/shared": "3.2.20"
       }
     },
     "vue-eslint-parser": {

src/components/AutoComplete.vue

@@ -5,25 +5,17 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <template>
-  <profile-list
+  <div>
-    :values="values"
+    <label for="searchText" class="form-label fw-bold">{{ label }}</label>
-    :type="type"
+    <div class="row mb-2">
-    :editable="true"
-    @remove-value="removeValue($event)"
-    @update-values="this.$emit('update-values', this.values)"
-  >
-  </profile-list>
-  <div v-bind="$attrs" class="card-body">
-    <div class="row">
       <div class="col">
         <input
           autocomplete="off"
           type="text"
           class="form-control"
           id="searchText"
-          maxlength="25"
           v-model="searchText"
-          @input="search()"
+          @keyup="search()"
           @keyup.enter="addResult()"
         />
       </div>
@@ -40,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         </button>
       </div>
     </div>
-    <div v-if="searchResults">
+    <div class="" v-if="searchResults">
       <ul class="list-group">
         <li
           class="list-group-item"
@@ -52,16 +44,24 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         </li>
       </ul>
     </div>
+    <profile-list
+      :values="values"
+      :type="type"
+      :editable="true"
+      @remove-value="removeValue($event)"
+      @update-values="this.$emit('update-values', this.values)"
+    >
+    </profile-list>
   </div>
 </template>
 <script>
 import { mapState } from 'vuex'
 
-import RequestMixin from '@/mixins/request.mixin'
+import RequestMixin from "@/mixins/request.mixin"
-import ProfileList from '@/components/ProfileList';
+import ProfileList from "@/components/ProfileList";
 
 export default {
-  name: 'AutoComplete',
+  name: "AutoComplete",
   mixins: [RequestMixin],
   components: {
     ProfileList,
@@ -80,7 +80,7 @@ export default {
   data() {
     return {
       iconUrl: this.apiUrl,
-      searchText: '',
+      searchText: "",
       searchResults: [],
       showErrorMessage: false,
     };
@@ -91,7 +91,6 @@ export default {
   methods: {
     addResult(result = false) {
       if (!result) result = this.searchResults[0];
-
       if (
         this.values.map((item) => item[this.type].name).includes(result.name)
       ) {
@@ -102,19 +101,16 @@ export default {
       let newValue = {
         profile_id: this.currentUserId,
       };
-
+      if (this.type != "contacttype") {
-      if (this.type != 'contacttype') {
         newValue.level = 1;
       } else {
-        newValue.content = '';
+        newValue.content = "";
       }
-
       newValue[this.type] = result;
       changeValues.unshift(newValue);
-
+      this.searchText = "";
-      this.searchText = '';
       this.searchResults = [];
-      this.$emit('update-values', changeValues);
+      this.$emit("update-values", changeValues);
     },
     removeValue(valueName) {
       const newValues = this.values.filter((value) => {
@@ -124,7 +120,7 @@ export default {
           return true;
         }
       });
-      this.$emit('update-values', newValues);
+      this.$emit("update-values", newValues);
     },
   },
 };

src/components/ProfileList.vue

@@ -5,29 +5,24 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <template>
-  <ul class="list-group list-group-flush">
+  <ul>
-    <li
+    <li v-for="(value, valueKey) in values" :key="value.id">
-      class="list-group-item"
+      <div class="row m-1">
-      v-for="(value, valueKey) in values"
+        <div class="col">
-      :key="value.id"
+          <img
-    >
+            style="max-width: 64px"
-      <div class="row">
-        <div class="col d-flex align-items-center">
-          <div
-            class="list-icon me-1"
-            :style="{ backgroundImage: `url('${iconBaseUrl + value[type].icon_url}'` }"
             v-if="value[type].icon_url"
+            :src="iconUrl + value[type].icon_url"
+            :alt="`${value[type].name} Logo`"
           />
-          <div>
           {{ value[type].name }}
         </div>
-        </div>
         <div class="col">
           <div v-if="type == 'skill'">
             <div v-if="editable">
               <select
                 v-if="editableValues[valueKey]"
-                class="form-select form-select-sm"
+                class="form-select"
                 aria-label="Selektiere dein Level"
                 v-model="editableValues[valueKey].level"
                 @input="$emit('update-values', editableValues)"
@@ -48,7 +43,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
               <div v-if="editable">
               <select
                 v-if="editableValues[valueKey]"
-                  class="form-select form-select-sm"
+                class="form-select"
                 aria-label="Selektiere dein Level"
                 v-model="editableValues[valueKey].level"
                 @input="$emit('update-values', editableValues)"
@@ -67,11 +62,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
           </div>
           <div v-else-if="type == 'contacttype'">
             <div v-if="editable">
-              <input 
+              <input class="form-control" v-model="editableValues[valueKey].content"/>
-                class="form-control form-control-sm" 
-                maxlength="200" 
-                v-model="editableValues[valueKey].content"
-              />
             </div>
             <div v-else>
               <span v-if="value[type].name === 'E-Mail'">
@@ -83,15 +74,15 @@ SPDX-License-Identifier: AGPL-3.0-or-later
             </div>
           </div>
         </div>
-        <div class="col text-end">
+        <div class="col">
           <button
             v-if="editable"
             type="button"
-            class="btn btn-sm btn-light"
+            class="btn btn-outline-danger"
             aria-label="Löschen"
             @click="$emit('removeValue', value[type].name)"
           >
-            <i class="text-danger bi bi-x-circle"></i>
+            <i class="bi-trash"></i>
           </button>
         </div>
       </div>
@@ -119,7 +110,7 @@ export default {
   },
   data() {
     return {
-      iconBaseUrl: this.apiUrl,
+      iconUrl: this.apiUrl,
       levelSelection: levelJson,
       languagesSelection: languagesJson,
       editableValues: this.values,
@@ -132,13 +123,3 @@ export default {
   },
 };
 </script>
-
-<style scope>
-.list-icon {
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: contain;
-  height: 32px;
-  width: 32px;
-}
-</style>

src/components/profile/Section.vue

@@ -10,11 +10,9 @@ SPDX-License-Identifier: AGPL-3.0-or-later
       {{ title }}
     </h3>
     <div class="card w-100">
-      <slot name="card-body">
       <div class="card-body">
         <slot></slot>
       </div>
-      </slot>
     </div>
   </div>
 </template>

src/mixins/request.mixin.js

@@ -37,11 +37,6 @@ export default {
       }
     },
     async search() {
-      if (!this.searchText) {
-        this.searchResults = []
-        return
-      }
-
       try {
         const response = await fetch(`${this.apiUrl}/${this.type}s?search=${this.searchText}`, {
             headers: {
@@ -57,16 +52,15 @@ export default {
         }
 
         const responseData = await response.json()
-        const searchResults = responseData[`${this.type}s`];
+        this.searchResults = responseData[`${this.type}s`];
 
         if (
-          !searchResults.map((item) => item.name.toLowerCase())
+          !this.values
+          .map((item) => item[this.type].name.toLowerCase())
           .includes(this.searchText.toLowerCase())
         ) {
-          searchResults.unshift({ name: this.searchText });
+          this.searchResults.unshift({ name: this.searchText });
         }
-
-        this.searchResults = searchResults
       } catch (error) {
         console.error();
         this.showErrorMessage = true;

src/views/profile/Edit.vue

@@ -5,124 +5,98 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <template>
-  <div>
-    <div class="bg-wtf py-3 mb-4">
-      <div class="container">
-        <h3 class="text-white text-center mb-0">Profil bearbeiten</h3>
-      </div>
-    </div>
   <div class="container">
+    <h1>Profil bearbeiten</h1>
     <form @submit.prevent="submitFormEdit()">
-        <Section title="Grunddaten">
+      <div class="row">
-          <div class="mb-4">
+        <div class="col">
-            <div class="form-check form-switch">
           <input
-                class="form-check-input"
+            type="radio"
-                type="checkbox"
+            id="false"
-                role="switch"
+            :value="false"
             v-model="profile.visible"
-                id="visibility"
+            class="mr-2"
-              >
+          />
-              <label
+          <label for="false" class="m-2 fw-bold"> Nicht öffentlich</label>
-                class="form-check-label"
+        </div>
-                for="visibility">
+        <div class="col">
-                Profil für angemeldete Benutzer sichtbar
+          <input
-              </label>
+            type="radio"
+            id="true"
+            :value="true"
+            v-model="profile.visible"
+          />
+          <label for="true" class="m-2 fw-bold"> Öffentlich</label>
         </div>
       </div>
-
+      <div id="visibilityHelp" class="form-text">
-          <div class="row mb-4">
+        Erst wenn du dein Profil Öffentlich stellst, können andere Genoss:innen
-            <div class="col-6 mb-3">
+        darauf zugreifen oder es in der Suche finden.
-              <label class="form-label">Nickname</label>
+      </div>
+      <div class="row">
+        <div class="col-6 col-xs-12">
+          <label for="nickname" class="form-label fw-bold">Nickname:</label>
           <input
             type="text"
             class="form-control"
             id="nickname"
-                maxlength="25"
             v-model="profile.nickname"
             required
           />
         </div>
-            <div class="col-6 mb-3">
+        <div class="col-6 col-xs-12">
-              <label class="form-label">
+          <label for="pronouns" class="form-label fw-bold">Pronomen:</label>
-                Pronomen
-                <i class="bi bi-info-circle" title="ToDo: Tooltip"></i>
-              </label>
           <input
             type="text"
             class="form-control"
             id="pronouns"
-                maxlength="25"
             v-model="profile.pronouns"
           />
+          <div for="pronouns" class="form-text">
+            Z.B.: Er/Ihn, Sie/Ihr, Es etc..
+          </div>
         </div>
       </div>
-
-          <label class="form-label">Anschrift</label>
       <div class="row">
-            <div class="col-4">
+        <div class="col-12 col-xs-12">
-              <input
+          <label for="freetext" class="form-label fw-bold">Vorstellung:</label>
-                type="text"
+          <textarea
             class="form-control"
-                id="postcode"
+            id="freetext"
-                maxlength="10"
+            rows="3"
-                placeholder="Postleitzahl"
+            v-model="profile.freetext"
-                v-model="profile.address.postcode"
+          ></textarea>
-              />
         </div>
-            <div class="col-4">
+        <div class="col-12 col-xs-12">
-              <input
+          <label for="volunteerwork" class="form-label fw-bold"
-                type="text"
+            >Ehrenamtliche Arbeit:</label
+          >
+          <textarea
             class="form-control"
-                id="city"
+            id="volunteerwork"
-                maxlength="25"
+            rows="3"
-                placeholder="Ort"
+            v-model="profile.volunteerwork"
-                v-model="profile.address.city"
+          ></textarea>
-              />
-            </div>
-            <div class="col-4">
-              <input
-                type="text"
-                class="form-control"
-                id="country"
-                maxlength="25"
-                placeholder="Land"
-                v-model="profile.address.country"
-              />
         </div>
       </div>
-        </Section>
-
-        <Section title="Meine Fähigkeiten">
-          <template v-slot:card-body>
       <auto-complete
         type="skill"
+        label="Deine Fähigkeiten"
         :values="profile.skills"
         @update-values="profile.skills = $event"
       ></auto-complete>
-          </template>
-        </Section>
-
-        <Section title="Meine Sprachkenntnisse">
-          <template v-slot:card-body>
       <auto-complete
         type="language"
+        label="Deine Sprachen"
         :values="profile.languages"
         @update-values="profile.languages = $event"
       ></auto-complete>
-          </template>
-      </Section>
-
-        <Section title="Ich suche">
-          <template v-slot:card-body>
       <auto-complete
         type="skill"
         label="Ich suche"
         :values="profile.searchtopics"
         @update-values="profile.searchtopics = $event"
       ></auto-complete>
-          </template>
-        </Section>
 
       <Section title="Verfügbarkeit">
         <div class="form-check mb-3">
@@ -142,8 +116,6 @@ SPDX-License-Identifier: AGPL-3.0-or-later
           <input 
             v-model="profile.availability_hours_per_week" 
             type="number" 
-                min="0"
-                max="168"
             class="form-control">
         </div>
         <label for="availability" class="form-label">
@@ -157,63 +129,61 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         ></textarea>
       </Section>
 
-            <Section title="Meine Kontaktmöglichkeiten">
-              <template v-slot:card-body>
       <auto-complete
         type="contacttype"
+        label="Kontaktmöglichkeiten"
         :values="profile.contacts"
         @update-values="profile.contacts = $event"
       ></auto-complete>
-              </template>
-            </Section>
 
-            <Section title="Sonstiges">
+      <div class="row">
-              <div class="mb-3">
+        <div class="col">
-                <label class="form-label">Über mich</label>
+          <label for="pzl" class="form-label fw-bold">PLZ</label>
-                <textarea
+          <input
+            type="text"
             class="form-control"
-                  rows="3"
+            id="pzl"
-                  maxlength="4000"
+            v-model="profile.address.postcode"
-                  v-model="profile.freetext"
           />
         </div>
-              <div>
+        <div class="col">
-                <label class="form-label">Ehrenamtliche Arbeit</label>
+          <label for="city" class="form-label fw-bold">Stadt</label>
-                <textarea
+          <input
+            type="text"
             class="form-control"
-                  rows="3"
+            id="city"
-                  maxlength="4000"
+            v-model="profile.address.city"
-                  v-model="profile.volunteerwork"
           />
         </div>
-            </Section>
+        <div class="col">
-            <input type="submit" class="d-none">
+          <label for="country" class="form-label fw-bold">Land</label>
-          </form>
+          <input
+            type="text"
+            class="form-control"
+            id="country"
+            v-model="profile.address.country"
+          />
         </div>
-        <div class="savebar bg-white border-top py-3">
-          <div class="container d-flex align-items-center justify-content-end">
-            <div
-              class="text-danger"
-              v-if="showErrorMessage"
-            >
-              <i class="bi bi-bug"></i>
-              Beim Speichern ist ein Fehler aufgetreten.
       </div>
-            <div
+
-              class="text-success"
+      <button type="submit" class="btn btn-outline-success mb-4 mt-4 col-12">
-              v-if="showSuccessMessage"
-            >
-              <i class="bi bi-check-lg"></i>
-              Gespeichert
-            </div>
-            <button
-              class="btn btn-primary ms-3"
-              @click="submitFormEdit()"
-            >
         Speichern
       </button>
+      <div
+        class="alert alert-danger mb-4 mt-4"
+        role="alert"
+        v-if="showErrorMessage"
+      >
+        Es ist Fehler aufgetreten
       </div>
+      <div
+        class="alert alert-success mb-4 mt-4"
+        role="alert"
+        v-if="showSuccessMessage"
+      >
+        Deine Änderungen wurden erfolgreich gespeichert
       </div>
+    </form>
   </div>
 </template>
 <script>
@@ -233,7 +203,6 @@ export default {
     return {
       showErrorMessage: false,
       showSuccessMessage: false,
-      clearMessagesHandle: null,
       profile: {
         visible: false,
         nickname: "",
@@ -258,40 +227,5 @@ export default {
   async created() {
     await this.initEditPage();
   },
-  unmounted() {
-    this.cancelClearMessages()
-  },
-  methods: {
-    cancelClearMessages() {
-      if (this.clearMessagesHandle) {
-        window.clearTimeout(this.clearMessagesHandle)
-      }
-    },
-    scheduleClearMessages() {
-      this.cancelClearMessages()
-      this.clearMessagesHandle = window.setTimeout(() => {
-        this.showErrorMessage = false
-        this.showSuccessMessage = false
-      }, 2500)
-    }
-  },
-  watch: {
-    showErrorMessage(curr) {
-      if (curr) {
-        this.scheduleClearMessages()
-      }
-    },
-    showSuccessMessage(curr) {
-      if (curr) {
-        this.scheduleClearMessages()
-      }
-    }
-  }
 };
 </script>
-<style scoped>
-.savebar {
-  bottom: 0;
-  position: sticky;
-}
-</style>