47 lines
1.1 KiB
Vue
47 lines
1.1 KiB
Vue
<template>
|
|
<div class="flex items-center gap-2 text-sm">
|
|
<span class="text-gray-600 dark:text-gray-400">{{ label }}:</span>
|
|
<UButtonGroup size="xs">
|
|
<UButton
|
|
:variant="modelValue === 'public' ? 'solid' : 'ghost'"
|
|
:color="modelValue === 'public' ? 'blue' : 'gray'"
|
|
@click="updateValue('public')"
|
|
>
|
|
Public
|
|
</UButton>
|
|
<UButton
|
|
:variant="modelValue === 'members' ? 'solid' : 'ghost'"
|
|
:color="modelValue === 'members' ? 'blue' : 'gray'"
|
|
@click="updateValue('members')"
|
|
>
|
|
Members
|
|
</UButton>
|
|
<UButton
|
|
:variant="modelValue === 'private' ? 'solid' : 'ghost'"
|
|
:color="modelValue === 'private' ? 'blue' : 'gray'"
|
|
@click="updateValue('private')"
|
|
>
|
|
Private
|
|
</UButton>
|
|
</UButtonGroup>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: String,
|
|
default: 'members'
|
|
},
|
|
label: {
|
|
type: String,
|
|
default: 'Privacy'
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
|
const updateValue = (value) => {
|
|
emit('update:modelValue', value)
|
|
}
|
|
</script>
|