82 lines
4.2 KiB
Vue
82 lines
4.2 KiB
Vue
/**
|
|
* BetterDiscord Setting Array 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-form-settingsarray" :class="{'bd-form-settingsarray-inline': setting.inline}">
|
|
<div class="bd-title">
|
|
<h3>{{ setting.text }}</h3>
|
|
<button class="bd-button bd-button-primary" :class="{'bd-disabled': setting.disabled || setting.max && setting.items.length >= setting.max}" @click="() => addItem(!setting.inline)">Add</button>
|
|
</div>
|
|
<div class="bd-hint">{{ setting.hint }}</div>
|
|
<div class="bd-settingsarray-items">
|
|
<div class="bd-settingsarray-item" v-for="(item, index) in setting.items">
|
|
<div class="bd-settingsarray-item-marker">{{ index + 1 }}</div>
|
|
|
|
<SettingsPanel class="bd-settingsarray-item-contents" v-if="setting.inline" :settings="item.settings" :change="(c, s, v) => changeInItem(item, c, s, v)" />
|
|
<div class="bd-settingsarray-item-contents" v-else>
|
|
<div class="bd-settingsarray-item-hint">
|
|
<span v-if="item.settings[0] && item.settings[0].settings[0]">{{ item.settings[0].settings[0].text }}: {{ item.settings[0].settings[0].value }}</span><span v-if="item.settings[0] && item.settings[0].settings[1]">, {{ item.settings[0].settings[1].text }}: {{ item.settings[0].settings[1].value }}</span><span v-if="item.settings[0] && item.settings[0].settings[2] || item.settings[1] && item.settings[1].settings[0]">, ...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bd-settingsarray-item-controls">
|
|
<span class="bd-settingsarray-open" v-if="typeof setting.allow_external !== 'undefined' ? setting.allow_external || !setting.inline : true" @click="() => showModal(item, index)"><MiOpenInNew v-if="setting.inline" /><MiSettings v-else /></span>
|
|
<span class="bd-settingsarray-remove" :class="{'bd-disabled': setting.disabled || setting.min && setting.items.length <= setting.min}" @click="() => removeItem(item)"><MiMinus /></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { shell } from 'electron';
|
|
import { Utils, ClientIPC } from 'common';
|
|
import { MiSettings, MiOpenInNew, MiMinus } from '../../common';
|
|
import { Modals } from 'ui';
|
|
import SettingsPanel from '../SettingsPanel.vue';
|
|
|
|
export default {
|
|
props: ['setting', 'change'],
|
|
components: {
|
|
MiSettings, MiOpenInNew, MiMinus
|
|
},
|
|
methods: {
|
|
addItem(openModal) {
|
|
if (this.setting.disabled || this.setting.max && this.setting.items.length >= this.setting.max) return;
|
|
const item = this.setting.addItem();
|
|
if (openModal) this.showModal(item, this.setting.items.length);
|
|
},
|
|
removeItem(item) {
|
|
if (this.setting.disabled || this.setting.min && this.setting.items.length <= this.setting.min) return;
|
|
this.setting.removeItem(item);
|
|
},
|
|
changeInItem(item, category_id, setting_id, value) {
|
|
console.log('Setting', item, category_id, setting_id, 'to', value);
|
|
|
|
const category = item.settings.find(c => c.category === category_id);
|
|
if (!category) return;
|
|
|
|
const setting = category.settings.find(s => s.id === setting_id);
|
|
if (!setting || Utils.compare(setting.value, value)) return;
|
|
|
|
setting.value = value;
|
|
setting.changed = !Utils.compare(setting.value, setting.old_value);
|
|
},
|
|
showModal(item, index) {
|
|
Modals.settings(item, this.setting.headertext ? this.setting.headertext.replace(/%n/, index + 1) : this.setting.text + ` #${index + 1}`);
|
|
}
|
|
},
|
|
beforeCreate() {
|
|
// https://vuejs.org/v2/guide/components.html#Circular-References-Between-Components
|
|
this.$options.components.SettingsPanel = SettingsPanel;
|
|
}
|
|
}
|
|
</script>
|