51 lines
1.1 KiB
Vue
51 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>
|
|
|