KVP Component

client/src/data/user.settings.default.json

@@ -178,7 +178,14 @@
                 "id": "e2eedb",
                 "name": "E2EE Database",
                 "type": "drawer",
-                "settings": []
+                "settings": [
+                    {
+                        "id": "kvp0",
+                        "type": "kvp",
+                        "text": "",
+                        "value": { "key": "kvpKey", "value":  "kvpValue" }
+                    }
+                ]
             }
         ]
     }

client/src/structs/settings/setting.js

@@ -19,6 +19,7 @@ import KeybindSetting from './types/keybind';
 import FileSetting from './types/file';
 import GuildSetting from './types/guild';
 import ArraySetting from './types/array';
+import KvpSetting from './types/kvp';
 import CustomSetting from './types/custom';
 
 export default class Setting {
@@ -40,6 +41,7 @@ export default class Setting {
         else if (args.type === 'guild') return new GuildSetting(args, ...merge);
         else if (args.type === 'array') return new ArraySetting(args, ...merge);
         else if (args.type === 'custom') return new CustomSetting(args, ...merge);
+        else if (args.type === 'kvp') return new KvpSetting(args, ...merge);
         else throw {message: `Setting type ${args.type} unknown`};
     }
 

client/src/structs/settings/types/index.js

@@ -9,4 +9,5 @@ export { default as KeybindSetting } from './keybind';
 export { default as FileSetting } from './file';
 export { default as GuildSetting } from './guild';
 export { default as ArraySetting } from './array';
+export { default as KvpSetting } from './kvp';
 export { default as CustomSetting } from './custom';

client/src/structs/settings/types/kvp.js

@@ -0,0 +1,21 @@
+/**
+ * BetterDiscord String Setting Struct
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import Setting from './basesetting';
+
+export default class KvpSetting extends Setting {
+
+    /**
+     * The value to use when the setting doesn't have a value.
+     */
+    get defaultValue() {
+        return { key: 'Channel ID', value: 'Encryption Key' };
+    }
+}

client/src/styles/partials/bdsettings/index.scss

@@ -7,3 +7,4 @@
 @import './settings-schemes.scss';
 @import './updater.scss';
 @import './window-preferences';
+@import './kvp';

client/src/styles/partials/bdsettings/kvp.scss

@@ -0,0 +1,22 @@
+.bd-formKvp {
+    display: flex;
+
+    .bd-formKvpDetails {
+        display: flex;
+        flex: 1 0 auto;
+
+        .bd-inputWrapper {
+            flex: 1 0 auto;
+            margin-right: 15px;
+
+            input {
+                width: 100%;
+                padding: 5px;
+            }
+
+            &:first-child {
+                max-width: 150px;
+            }
+        }
+    }
+}

client/src/ui/components/bd/setting/KeyValuePair.vue

@@ -0,0 +1,31 @@
+/**
+ * BetterDiscord Setting Key Value Pair Component
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+*/
+
+<template>
+    <div class="bd-formKvp">
+        <div class="bd-formKvpDetails">
+            <div class="bd-inputWrapper">
+                <input type="text" class="bd-textInput" :value="setting.value.key" />
+            </div>
+            <div class="bd-inputWrapper">
+                <input type="text" class="bd-textInput" :value="setting.value.value" />
+            </div>
+                <!-- using a text field is temporary -->
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: ['setting'],
+        methods: {},
+        mounted() {console.log('setting', this.setting)}
+    }
+</script>

client/src/ui/components/bd/setting/Setting.vue

@@ -22,6 +22,7 @@
         <FileSetting v-if="setting.type === 'file'" :setting="setting" />
         <GuildSetting v-if="setting.type === 'guild'" :setting="setting" />
         <ArraySetting v-if="setting.type === 'array'" :setting="setting" />
+        <KeyValuePair v-if="setting.type === 'kvp'" :setting="setting"/>
         <CustomSetting v-if="setting.type === 'custom'" :setting="setting" />
         <div class="bd-form-divider"></div>
     </div>
@@ -41,6 +42,7 @@
     import FileSetting from './File.vue';
     import GuildSetting from './Guild.vue';
     import ArraySetting from './Array.vue';
+    import KeyValuePair from './KeyValuePair.vue';
     import CustomSetting from './Custom.vue';
 
     export default {
@@ -60,6 +62,7 @@
             FileSetting,
             GuildSetting,
             ArraySetting,
+            KeyValuePair,
             CustomSetting
         },
         computed: {