62 lines
3.2 KiB
Vue
62 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
defineProps<{ enabled: boolean }>();
|
|
|
|
const emit = defineEmits<{
|
|
'update:enabled': [value: boolean];
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<Dropdown dropdownClass="text-sm" placement="top">
|
|
<template #default="{ toggle, setRef }">
|
|
<button :ref="setRef" @click="toggle"
|
|
class="flex items-center justify-center h-8.5 w-8.5 @hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
|
<span class="pointer-events-none i-tabler-world text-5 transition-colors duration-200"
|
|
:class="enabled ? 'text-[var(--color-accent)]' : 'text-[var(--text-secondary)]'"></span>
|
|
</button>
|
|
</template>
|
|
|
|
<template #dropdown>
|
|
<div class="flex flex-col gap-1 p-1">
|
|
<button @click="emit('update:enabled', false)"
|
|
class="flex items-start gap-3 rounded-xl px-3 py-2.5 text-left transition-colors duration-150"
|
|
:class="!enabled
|
|
? 'bg-[var(--color-active)]'
|
|
: '@hover:bg-[var(--color-hover)]'">
|
|
<span class="i-tabler-world-off text-5 mt-0.5 shrink-0"
|
|
:class="!enabled ? 'text-[var(--text-primary)]' : 'text-[var(--text-dim)]'"></span>
|
|
<div class="flex flex-col gap-0.5">
|
|
<span class="text-sm font-medium"
|
|
:class="!enabled ? 'text-[var(--text-primary)]' : 'text-[var(--text-secondary)]'">
|
|
Off
|
|
</span>
|
|
<span class="text-xs leading-snug"
|
|
:class="!enabled ? 'text-[var(--text-secondary)]' : 'text-[var(--text-dim)]'">
|
|
Disable web access
|
|
</span>
|
|
</div>
|
|
</button>
|
|
|
|
<button @click="emit('update:enabled', true)"
|
|
class="flex items-start gap-3 rounded-xl px-3 py-2.5 text-left transition-colors duration-150"
|
|
:class="enabled
|
|
? 'bg-[var(--color-active)]'
|
|
: '@hover:bg-[var(--color-hover)]'">
|
|
<span class="i-tabler-world text-5 mt-0.5 shrink-0"
|
|
:class="enabled ? 'text-[var(--color-accent)]' : 'text-[var(--text-dim)]'"></span>
|
|
<div class="flex flex-col gap-0.5">
|
|
<span class="text-sm font-medium"
|
|
:class="enabled ? 'text-[var(--text-primary)]' : 'text-[var(--text-secondary)]'">
|
|
Auto
|
|
</span>
|
|
<span class="text-xs leading-snug"
|
|
:class="enabled ? 'text-[var(--text-secondary)]' : 'text-[var(--text-dim)]'">
|
|
Search the web and fetch URLs when needed
|
|
</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</Dropdown>
|
|
</template>
|