mirror of
https://github.com/vastxie/99AI.git
synced 2026-04-07 10:54:29 +08:00
39 lines
1.3 KiB
Vue
39 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { Switch } from '@headlessui/vue';
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
disabled?: boolean;
|
|
onIcon?: string;
|
|
offIcon?: string;
|
|
}>(),
|
|
{
|
|
disabled: false,
|
|
},
|
|
);
|
|
|
|
const enabled = defineModel<boolean>();
|
|
</script>
|
|
|
|
<template>
|
|
<Switch
|
|
v-model="enabled"
|
|
:disabled="disabled"
|
|
class="relative h-5 w-10 inline-flex flex-shrink-0 cursor-pointer border-2 border-transparent rounded-full p-0 vertical-middle disabled-cursor-not-allowed disabled-opacity-50 focus-outline-none focus-visible-ring-2 focus-visible-ring-offset-2 focus-visible-ring-offset-white dark-focus-visible-ring-offset-gray-900"
|
|
:class="[enabled ? 'bg-ui-primary' : 'bg-stone-3 dark-bg-stone-7']"
|
|
>
|
|
<span
|
|
class="pointer-events-none relative inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out dark-bg-dark"
|
|
:class="[enabled ? 'translate-x-5' : 'translate-x-0']"
|
|
>
|
|
<span class="absolute inset-0 h-full w-full flex items-center justify-center">
|
|
<SvgIcon
|
|
v-if="(enabled && onIcon) || (!enabled && offIcon)"
|
|
:name="(enabled ? onIcon : offIcon) as string"
|
|
class="h-3 w-3 text-stone-7 dark-text-stone-3"
|
|
/>
|
|
</span>
|
|
</span>
|
|
</Switch>
|
|
</template>
|