40 lines
No EOL
1.1 KiB
Vue
40 lines
No EOL
1.1 KiB
Vue
<template>
|
|
<USelectMenu
|
|
v-model="selectedCurrency"
|
|
:items="selectOptions"
|
|
value-key="value"
|
|
:ui="{
|
|
trigger: 'flex items-center gap-1.5 text-sm px-2.5 py-1.5 bg-white dark:bg-neutral-950 border border-neutral-200 dark:border-neutral-800 rounded-md hover:bg-neutral-50 dark:hover:bg-neutral-900 transition-colors',
|
|
width: 'w-auto min-w-[120px]'
|
|
}"
|
|
size="xs"
|
|
variant="ghost"
|
|
color="neutral"
|
|
>
|
|
<template #label>
|
|
<span class="text-xs font-mono">{{ getCurrencySymbol(selectedCurrency) }} {{ selectedCurrency }}</span>
|
|
</template>
|
|
</USelectMenu>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { currencyOptions, getCurrencySymbol } from '~/utils/currency'
|
|
|
|
const { currency } = useCoopBuilder()
|
|
|
|
// Create options for USelectMenu
|
|
const selectOptions = computed(() =>
|
|
currencyOptions.map((curr) => ({
|
|
label: `${curr.symbol} ${curr.code}`,
|
|
value: curr.code,
|
|
}))
|
|
)
|
|
|
|
// Two-way binding with the store
|
|
const selectedCurrency = computed({
|
|
get: () => currency.value,
|
|
set: (value: string) => {
|
|
currency.value = value
|
|
}
|
|
})
|
|
</script> |