49 lines
1017 B
Vue
49 lines
1017 B
Vue
<template>
|
|
<div
|
|
:class="[cn.b(), cn.is('selected', selected), cn.is('disabled', disabled)]"
|
|
:tabindex="disabled ? -1 : 0"
|
|
@click="$emit('click')"
|
|
@keydown.space="$emit('click')"
|
|
@keydown.enter="$emit('click')"
|
|
>
|
|
<slot>
|
|
<!-- <UiCoin v-if="coin" :name="coin" :class="cn.e('coin')" circle /> -->
|
|
|
|
<span :class="[cn.e('label')]">{{ label }}</span>
|
|
|
|
<UiIconSCheck
|
|
v-if="multiple"
|
|
:class="cn.e('checkbox')"
|
|
/>
|
|
</slot>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import useClassname from '../../composables/use-classname'
|
|
|
|
// import UiCoin from 'alfabit-ui/components/coin/coin.vue';
|
|
|
|
export interface Props {
|
|
label: string
|
|
disabled?: boolean
|
|
selected?: boolean
|
|
multiple?: boolean
|
|
coin?: string
|
|
}
|
|
|
|
defineOptions({
|
|
name: 'UiSelectOption',
|
|
})
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
disabled: false,
|
|
selected: false,
|
|
multiple: false,
|
|
})
|
|
|
|
defineEmits(['click'])
|
|
|
|
const cn = useClassname('ui-select-option')
|
|
</script>
|