1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-08-02 16:08:31 +00:00
FrankerFaceZ/src/modules/main_menu/components/setting-select-box.vue

82 lines
2 KiB
Vue
Raw Normal View History

2017-11-13 01:23:39 -05:00
<template lang="html">
<div
:class="{inherits: isInherited, default: isDefault}"
class="ffz--widget ffz--select-box"
>
<div class="tw-flex tw-align-items-center">
<label :for="item.full_key">
{{ t(item.i18n_key, item.title) }}
<span v-if="unseen" class="tw-pill">{{ t('setting.new', 'New') }}</span>
</label>
2017-11-13 01:23:39 -05:00
<select
:id="item.full_key"
ref="control"
class="tw-border-radius-medium tw-font-size-6 tw-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-05"
@change="onChange"
>
<option
v-for="i in data"
:key="i.value"
:selected="i.value === value"
>
{{ i.i18n_key ? t(i.i18n_key, i.title, i) : i.title }}
</option>
</select>
2017-11-13 01:23:39 -05:00
<component
:is="item.buttons"
v-if="item.buttons"
:context="context"
:item="item"
:value="value"
/>
<button
v-if="source && source !== profile"
class="tw-mg-l-05 tw-button tw-button--text"
@click="context.currentProfile = source"
>
<span class="tw-button__text ffz-i-right-dir">
{{ sourceDisplay }}
</span>
</button>
2017-11-13 01:23:39 -05:00
<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text tw-tooltip-wrapper" @click="clear">
<span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.reset', 'Reset to Default') }}
</div>
</button>
</div>
2017-11-13 01:23:39 -05:00
<section
v-if="item.description"
class="tw-c-text-alt-2"
>
<markdown :source="t(item.desc_i18n_key || `${item.i18n_key}.description`, item.description)" />
</section>
<section v-if="item.extra">
<component :is="item.extra.component" :context="context" :item="item" />
</section>
</div>
2017-11-13 01:23:39 -05:00
</template>
<script>
import SettingMixin from '../setting-mixin';
export default {
mixins: [SettingMixin],
props: ['item', 'context'],
methods: {
onChange() {
const idx = this.$refs.control.selectedIndex,
raw_value = this.data[idx];
if ( raw_value )
this.set(raw_value.value);
}
}
}
</script>