Add example custom settings set

client/src/structs/settings/settingscategory.js

@@ -116,7 +116,7 @@ export default class SettingsCategory {
         this.settings.splice(index, 0, setting);
 
         const event = {
-            category, category_id: category.id,
+            category: this, category_id: this.id,
             setting, setting_id: setting.id,
             at_index: index
         };

client/src/ui/modals.js

@@ -20,14 +20,16 @@ import PermissionModal from './components/bd/modals/PermissionModal.vue';
 class Modal extends AsyncEventEmitter {
     constructor(_modal, component) {
         super();
-        Object.assign(this, _modal);
+
+        for (let key in _modal)
+            this[key] = _modal[key];
 
         const modal = this;
         this.component = this.component || {
             template: '<custom-modal :modal="modal" />',
             components: { 'custom-modal': component },
             data() { return { modal }; },
-            created() {
+            mounted() {
                 modal.vueInstance = this;
                 modal.vue = this.$children[0];
             }

tests/plugins/Example 4/index.js

@@ -1,10 +1,38 @@
-module.exports = (Plugin, { Logger }) => class extends Plugin {
-	onstart() {
+module.exports = (Plugin, { Logger, Settings }) => class extends Plugin {
+	async onstart() {
 		// Some array event examples
 		const arraySetting = this.settings.getSetting('default', 'array-1');
 		Logger.log('Array setting', arraySetting);
 		arraySetting.on('item-added', event => Logger.log('Item', event.item, 'was added to the array setting'));
 		arraySetting.on('item-updated', event => Logger.log('Item', event.item, 'of the array setting was updated', event));
 		arraySetting.on('item-removed', event => Logger.log('Item', event.item, 'removed from the array setting'));
+
+        // Create a new settings set and show it in a modal
+        const set = Settings.createSet({});
+        const category = await set.addCategory({ id: 'default' });
+
+        const setting = await category.addSetting({
+            id: 'test',
+            type: 'text',
+            text: 'Enter some text',
+            multiline: true // Works better now
+        });
+
+        setting.on('setting-updated', event => Logger.log('Setting was changed to', event.value));
+
+        const scheme = await set.addScheme({
+            id: 'scheme-1',
+            name: 'Test scheme',
+            icon_url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Cow_female_black_white.jpg/220px-Cow_female_black_white.jpg',
+            settings: [{ category: 'default', settings: [{ id: 'test', value: 'Some\npresent\n\nmultiline\n\ntext' }] }]
+        });
+
+        set.on('settings-updated', async updatedSettings => {
+            Logger.log('Updated settings', updatedSettings);
+            await new Promise(resolve => setTimeout(resolve, 500));
+            set.setSaved();
+        })
+
+        set.showModal('Custom settings panel');
 	}
 };