50 lines
1.1 KiB
Vue
50 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import { Networks } from '@/config/networks';
|
|
import type { NetworkConfig } from '@/model/NetworkEnum';
|
|
import { getNetworkImage } from '@/utils/imagesPath';
|
|
import Dropdown, { type DropdownItem } from './Dropdown.vue';
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
modelValue: NetworkConfig;
|
|
disabled?: boolean;
|
|
size?: 'sm' | 'md' | 'lg';
|
|
availableNetworks?: NetworkConfig[];
|
|
}>(),
|
|
{
|
|
disabled: false,
|
|
size: 'md',
|
|
},
|
|
);
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: NetworkConfig];
|
|
change: [value: NetworkConfig];
|
|
}>();
|
|
|
|
const networkItems = computed((): DropdownItem<NetworkConfig>[] => {
|
|
return Object.values(Networks).map((network) => ({
|
|
value: network,
|
|
label: network.name,
|
|
icon: getNetworkImage(network.name),
|
|
}));
|
|
});
|
|
|
|
const handleChange = (value: NetworkConfig) => {
|
|
emit('update:modelValue', value);
|
|
emit('change', value);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Dropdown
|
|
:model-value="modelValue"
|
|
:items="networkItems"
|
|
:disabled="disabled"
|
|
:size="size"
|
|
:show-icon="true"
|
|
@update:model-value="handleChange"
|
|
/>
|
|
</template>
|