File size: 1,142 Bytes
4d70170 |
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 55 56 57 |
<script lang="ts">
import type { Ref } from 'vue'
import { computed, defineComponent, inject, watch } from 'vue'
export default defineComponent({
name: 'VueGroupButton',
props: {
value: {
type: [String, Object],
required: true,
},
flat: {
type: Boolean,
default: false,
},
},
emits: ['selected', 'click'],
setup(props, { emit }) {
const { data, setValue } = inject<{
data: Ref<string | Record<string, unknown>>
setValue: (value: string | Record<string, unknown>) => void
}>('VueGroup')
const selected = computed(() => props.value === data.value)
watch(selected, (value, oldValue) => {
if (value !== oldValue) {
emit('selected', value)
}
})
const handleClick = () => {
emit('click')
setValue(props.value)
}
return {
selected,
handleClick,
}
},
})
</script>
<template>
<VueButton
class="vue-ui-group-button"
:class="{
selected,
flat: flat && !selected,
}"
:aria-selected="selected ? true : null"
@click="handleClick"
>
<slot />
</VueButton>
</template>
|