mirror of
https://github.com/tiny-craft/tiny-rdm.git
synced 2025-04-10 07:58:04 +08:00
113 lines
3.3 KiB
Vue
113 lines
3.3 KiB
Vue
<script setup>
|
|
import { decodeTypes, formatTypes } from '@/consts/value_view_type.js'
|
|
import Code from '@/components/icons/Code.vue'
|
|
import Conversion from '@/components/icons/Conversion.vue'
|
|
import DropdownSelector from '@/components/common/DropdownSelector.vue'
|
|
import { includes, isEmpty, map, pull, some, values } from 'lodash'
|
|
import { computed } from 'vue'
|
|
import usePreferencesStore from 'stores/preferences.js'
|
|
import useDialogStore from 'stores/dialog.js'
|
|
|
|
const props = defineProps({
|
|
decode: {
|
|
type: String,
|
|
default: decodeTypes.NONE,
|
|
},
|
|
format: {
|
|
type: String,
|
|
default: formatTypes.RAW,
|
|
},
|
|
disabled: Boolean,
|
|
})
|
|
|
|
const prefStore = usePreferencesStore()
|
|
const dialogStore = useDialogStore()
|
|
|
|
const formatTypeOption = computed(() => {
|
|
return map(formatTypes, (t) => t)
|
|
})
|
|
|
|
const decodeTypeOption = computed(() => {
|
|
const buildinTypes = [decodeTypes.NONE],
|
|
customTypes = []
|
|
const typs = values(decodeTypes)
|
|
// build-in decoder
|
|
for (const typ of typs) {
|
|
if (includes(prefStore.buildInDecoder, typ)) {
|
|
buildinTypes.push(typ)
|
|
}
|
|
}
|
|
// custom decoder
|
|
if (!isEmpty(prefStore.decoder)) {
|
|
for (const decoder of prefStore.decoder) {
|
|
// replace build-in decoder if name conflicted
|
|
pull(buildinTypes, decoder.name)
|
|
customTypes.push(decoder.name)
|
|
}
|
|
}
|
|
return [buildinTypes, customTypes]
|
|
})
|
|
|
|
const decodeMenuOption = computed(() => {
|
|
return [
|
|
{
|
|
key: 'new_rdm_decoder',
|
|
label: 'interface.custom_decoder',
|
|
},
|
|
]
|
|
})
|
|
|
|
const emit = defineEmits(['formatChanged', 'update:decode', 'update:format'])
|
|
const onFormatChanged = (selDecode, selFormat) => {
|
|
const [buildin, external] = decodeTypeOption.value
|
|
if (!some([...buildin, ...external], (val) => val === selDecode)) {
|
|
selDecode = decodeTypes.NONE
|
|
}
|
|
if (!some(formatTypes, (val) => val === selFormat)) {
|
|
// set to auto chose format
|
|
selFormat = ''
|
|
}
|
|
emit('formatChanged', selDecode, selFormat)
|
|
if (selDecode !== props.decode) {
|
|
emit('update:decode', selDecode)
|
|
}
|
|
if (selFormat !== props.format) {
|
|
emit('update:format', selFormat)
|
|
}
|
|
}
|
|
|
|
const onDecodeMenu = (key) => {
|
|
switch (key) {
|
|
case 'new_rdm_decoder':
|
|
dialogStore.openPreferencesDialog('decoder')
|
|
break
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<n-space :size="0" :wrap="false" :wrap-item="false" align="center" justify="start">
|
|
<dropdown-selector
|
|
:default="formatTypes.RAW"
|
|
:disabled="props.disabled"
|
|
:icon="Code"
|
|
:options="formatTypeOption"
|
|
:tooltip="$t('interface.view_as')"
|
|
:value="props.format"
|
|
@update:value="(f) => onFormatChanged(props.decode, f)" />
|
|
<n-divider vertical />
|
|
<dropdown-selector
|
|
:default="decodeTypes.NONE"
|
|
:disabled="props.disabled"
|
|
:icon="Conversion"
|
|
:menu-option="decodeMenuOption"
|
|
:options="decodeTypeOption"
|
|
:tooltip="$t('interface.decode_with')"
|
|
:value="props.decode"
|
|
@menu="onDecodeMenu"
|
|
@update:value="(d) => onFormatChanged(d, '')" />
|
|
</n-space>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|