File size: 1,912 Bytes
4d70170 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<script lang="ts">
import EmptyPane from '@front/features/layout/EmptyPane.vue'
import type { PropType } from 'vue'
import { computed, defineComponent } from 'vue'
import { getPluginDefaultSettings, getPluginSettings, setPluginSettings } from '@vue-devtools/shared-utils'
import cloneDeep from 'lodash/cloneDeep'
import { BridgeEvents } from '@vue-devtools/shared-utils/src'
import { getBridge } from '../bridge'
import PluginSettingsItem from './PluginSettingsItem.vue'
import type { Plugin } from '.'
export default defineComponent({
components: {
EmptyPane,
PluginSettingsItem,
},
props: {
plugin: {
type: Object as PropType<Plugin>,
required: true,
},
},
setup(props) {
const defaultValues = computed(() => getPluginDefaultSettings(props.plugin.settingsSchema))
const currentValues = computed(() => getPluginSettings(props.plugin.id, defaultValues.value))
function updateValue(id: string, value: any) {
const oldValue = cloneDeep(currentValues.value[id])
setPluginSettings(props.plugin.id, {
...currentValues.value,
[id]: value,
})
getBridge().send(BridgeEvents.TO_BACK_DEVTOOLS_PLUGIN_SETTING_UPDATED, { pluginId: props.plugin.id, key: id, newValue: value, oldValue })
}
return {
currentValues,
updateValue,
}
},
})
</script>
<template>
<EmptyPane
v-if="!plugin.settingsSchema || !Object.keys(plugin.settingsSchema).length"
icon="settings_applications"
>
No settings found for this plugin
</EmptyPane>
<div v-else>
<h2 class="px-6 pt-4 pb-2 text-gray-500">
Plugin settings
</h2>
<PluginSettingsItem
v-for="(schema, id) in plugin.settingsSchema"
:id="id"
:key="id"
:schema="schema"
:plugin="plugin"
:value="currentValues[id]"
@update:value="value => updateValue(id, value)"
/>
</div>
</template>
|