forked from didirus/AstralRinth
0a8f489234
* Refactor search page, migrate to /discover/ * Add NormalPage component for common layouts, refactor Collections page as an example, misc ui pkg cleanup * intl:extract * lint * lint * remove old components * Refactor search page, migrate to /discover/ * Add NormalPage component for common layouts, refactor Collections page as an example, misc ui pkg cleanup * intl:extract * lint * lint * remove old components
49 lines
1.2 KiB
Vue
49 lines
1.2 KiB
Vue
<template>
|
|
<div class="flex flex-col gap-1">
|
|
<button
|
|
v-for="(item, index) in items"
|
|
:key="`radio-button-${index}`"
|
|
class="p-0 py-2 px-2 w-fit border-0 font-medium flex gap-2 transition-all items-center cursor-pointer active:scale-95 hover:bg-button-bg rounded-xl"
|
|
:class="{
|
|
'text-contrast bg-button-bg': selected === item,
|
|
'text-primary bg-transparent': selected !== item,
|
|
}"
|
|
@click="selected = item"
|
|
>
|
|
<RadioButtonCheckedIcon v-if="selected === item" class="text-brand h-5 w-5" />
|
|
<RadioButtonIcon v-else class="h-5 w-5" />
|
|
<slot :item="item" />
|
|
</button>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts" generic="T">
|
|
import { RadioButtonCheckedIcon, RadioButtonIcon } from '@modrinth/assets'
|
|
import { computed } from 'vue'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
modelValue: T
|
|
items: T[]
|
|
forceSelection?: boolean
|
|
}>(),
|
|
{
|
|
forceSelection: false,
|
|
},
|
|
)
|
|
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
|
const selected = computed({
|
|
get() {
|
|
return props.modelValue
|
|
},
|
|
set(value) {
|
|
emit('update:modelValue', value)
|
|
},
|
|
})
|
|
|
|
if (props.items.length > 0 && props.forceSelection && !props.modelValue) {
|
|
selected.value = props.items[0]
|
|
}
|
|
</script>
|