2017-11-13 01:23:39 -05:00
|
|
|
<template lang="html">
|
2018-03-30 17:58:56 -04:00
|
|
|
<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">
|
2019-10-04 14:57:13 -04:00
|
|
|
{{ t(item.i18n_key, item.title) }}
|
2019-05-03 22:36:26 -04:00
|
|
|
<span v-if="unseen" class="tw-pill">{{ t('setting.new', 'New') }}</span>
|
2018-03-30 17:58:56 -04:00
|
|
|
</label>
|
2017-11-13 01:23:39 -05:00
|
|
|
|
2018-03-30 17:58:56 -04:00
|
|
|
<select
|
|
|
|
:id="item.full_key"
|
2019-06-20 15:15:54 -04:00
|
|
|
ref="control"
|
2018-06-29 19:45:33 -04:00
|
|
|
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"
|
2018-03-30 17:58:56 -04:00
|
|
|
@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
|
|
|
|
2019-11-14 19:52:35 -05:00
|
|
|
<component
|
|
|
|
:is="item.buttons"
|
|
|
|
v-if="item.buttons"
|
|
|
|
:context="context"
|
|
|
|
:item="item"
|
|
|
|
:value="value"
|
|
|
|
/>
|
|
|
|
|
2018-03-30 17:58:56 -04:00
|
|
|
<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
|
|
|
|
2018-03-30 17:58:56 -04: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
|
|
|
|
2018-03-30 17:58:56 -04:00
|
|
|
<section
|
|
|
|
v-if="item.description"
|
|
|
|
class="tw-c-text-alt-2"
|
2018-10-01 15:36:38 -04:00
|
|
|
>
|
2019-10-04 14:57:13 -04:00
|
|
|
<markdown :source="t(item.desc_i18n_key || `${item.i18n_key}.description`, item.description)" />
|
2018-10-01 15:36:38 -04:00
|
|
|
</section>
|
2019-09-12 13:11:08 -04:00
|
|
|
<section v-if="item.extra">
|
|
|
|
<component :is="item.extra.component" :context="context" :item="item" />
|
|
|
|
</section>
|
2018-03-30 17:58:56 -04:00
|
|
|
</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>
|