diff options
| author | Leonardo Bishop <me@leonardobishop.com> | 2024-03-10 01:31:42 +0000 |
|---|---|---|
| committer | Leonardo Bishop <me@leonardobishop.com> | 2024-03-10 01:31:42 +0000 |
| commit | 71e4ad2c71efea471923ea47f01bfda841387f81 (patch) | |
| tree | f08293fdc56b4eb2e3d0e520b79b4d8aad78924c /components/Control/TrueFalseSwitch.vue | |
| parent | 4495c02c41b95ce6df0c34dbf6ac62f7addae7a3 (diff) | |
Use nuxt auto import magic
Diffstat (limited to 'components/Control/TrueFalseSwitch.vue')
| -rw-r--r-- | components/Control/TrueFalseSwitch.vue | 54 |
1 files changed, 0 insertions, 54 deletions
diff --git a/components/Control/TrueFalseSwitch.vue b/components/Control/TrueFalseSwitch.vue deleted file mode 100644 index a0a3392..0000000 --- a/components/Control/TrueFalseSwitch.vue +++ /dev/null @@ -1,54 +0,0 @@ -<script setup lang="ts"> -import { ref } from 'vue'; - -const props = defineProps<{ - value: boolean; -}>(); -const emit = defineEmits(['update']); - -const value = ref(props.value); - -const invert = () => { - value.value = !value.value; - emit('update', value.value); -}; -</script> - -<template> - <div class="switch" @click="invert"> - <span v-if="value" class="true"><font-awesome-icon :icon="['fas', 'fa-check']" /> True</span> - <span v-else class="false"><font-awesome-icon :icon="['fas', 'fa-xmark']" /> False</span> - </div> -</template> - -<style scoped> -.switch { - display: flex; - width: 100%; - height: 100%; - cursor: pointer; - align-items: center; - padding: 0.5rem; - user-select: none; - transition: background-color 0.3s; - background-color: var(--color-background-soft); - - span { - font-family: monospace; - font-size: 0.8rem; - } - - .true { - color: var(--color-text-primary); - } - - .false { - color: var(--color-false); - } - - &:hover { - background-color: var(--color-hover); - } -} - -</style>
\ No newline at end of file |
