70 lines
2 KiB
Vue
70 lines
2 KiB
Vue
<template>
|
|
<div class="flex items-center gap-3 text-sm">
|
|
<span class="text-stone-300 font-medium">{{ label }}:</span>
|
|
<UButtonGroup size="sm" class="privacy-toggle-group">
|
|
<UButton
|
|
:variant="modelValue === 'members' ? 'solid' : 'outline'"
|
|
:color="modelValue === 'members' ? 'blue' : 'neutral'"
|
|
@click="updateValue('members')"
|
|
class="privacy-toggle-btn"
|
|
:class="{ 'is-selected': modelValue === 'members' }"
|
|
>
|
|
Members
|
|
</UButton>
|
|
<UButton
|
|
:variant="modelValue === 'private' ? 'solid' : 'outline'"
|
|
:color="modelValue === 'private' ? 'blue' : 'neutral'"
|
|
@click="updateValue('private')"
|
|
class="privacy-toggle-btn"
|
|
:class="{ 'is-selected': modelValue === '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>
|
|
|
|
<style scoped>
|
|
/* Unselected buttons - lighter background for visibility */
|
|
:deep(.privacy-toggle-btn:not(.is-selected)) {
|
|
background-color: rgb(68 64 60) !important; /* stone-700 */
|
|
border-color: rgb(87 83 78) !important; /* stone-600 */
|
|
color: rgb(214 211 209) !important; /* stone-300 */
|
|
}
|
|
|
|
:deep(.privacy-toggle-btn:not(.is-selected):hover) {
|
|
background-color: rgb(87 83 78) !important; /* stone-600 */
|
|
border-color: rgb(120 113 108) !important; /* stone-500 */
|
|
}
|
|
|
|
/* Selected buttons - bright blue to stand out */
|
|
:deep(.privacy-toggle-btn.is-selected) {
|
|
background-color: rgb(59 130 246) !important; /* blue-500 */
|
|
border-color: rgb(59 130 246) !important; /* blue-500 */
|
|
color: white !important;
|
|
}
|
|
|
|
:deep(.privacy-toggle-btn.is-selected:hover) {
|
|
background-color: rgb(37 99 235) !important; /* blue-600 */
|
|
border-color: rgb(37 99 235) !important; /* blue-600 */
|
|
}
|
|
</style>
|