Spaces:
Running
Running
File size: 1,766 Bytes
c795e9d dbe8e96 c795e9d dbe8e96 452e071 c795e9d dbe8e96 c795e9d dbe8e96 c795e9d cc14f28 dbe8e96 c795e9d dbe8e96 c795e9d cc14f28 dbe8e96 c795e9d dbe8e96 c795e9d b07747b dbe8e96 b07747b |
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 |
<template>
<div class="flex gap-2 flex-wrap">
<button
v-for="code in orderedAssets" :key="code"
class="px-3 py-1 rounded-full border flex items-center gap-2"
:class="code===modelValue ? 'bg-black text-white' : 'bg-white'"
@click="$emit('update:modelValue', code)"
>
<img :src="iconFor(code)" alt="" class="asset-icon" decoding="async" loading="lazy" @error="hide($event)" />
<span>{{ code }}</span>
</button>
</div>
</template>
<script setup>
import { computed } from 'vue'
import { dataService } from '../lib/dataService'
const props = defineProps({
modelValue: { type: String, default: '' },
preferredOrder: {
type: Array,
default: () => ['BTC','ETH','SOL','BNB','DOGE','XRP','AAPL','MSFT','BMRN','MRNA','TSLA']
}
})
const emit = defineEmits(['update:modelValue'])
// same pattern as your AssetsFilter.vue
const iconFor = (assetCode) =>
new URL(`../assets/images/assets_images/${assetCode}.png`, import.meta.url).href
const hide = (e) => { e.target.style.display = 'none' }
const available = computed(() => {
const rows = Array.isArray(dataService.tableRows) ? dataService.tableRows : []
return Array.from(new Set(rows.map(r => r.asset)))
})
const orderedAssets = computed(() => {
const present = new Set(available.value)
const primary = props.preferredOrder.filter(a => present.has(a))
const extras = [...present].filter(a => !props.preferredOrder.includes(a)).sort()
const list = [...primary, ...extras]
if (!list.includes(props.modelValue) && list.length) emit('update:modelValue', list[0])
return list
})
</script>
<style scoped>
.asset-icon{
width: 18px; height: 18px; flex: 0 0 18px;
object-fit: contain; display: inline-block; vertical-align: middle;
}
</style>
|