From f97c94832a640174a22bf681729cfdffa48268e3 Mon Sep 17 00:00:00 2001
From: "Adrian O.V" <83074853+CodexAdrian@users.noreply.github.com>
Date: Fri, 24 Mar 2023 15:15:55 -0400
Subject: [PATCH] Toggles (#24)

* Toggles!

* Toggle component

* Ran prettier
---
 docs/.vitepress/config.js      |  1 +
 docs/components/toggle.md      | 20 ++++++++++++++++++
 lib/components/base/Toggle.vue | 37 ++++++++++++++++++++++++++++++++++
 lib/components/index.js        |  1 +
 4 files changed, 59 insertions(+)
 create mode 100644 docs/components/toggle.md
 create mode 100644 lib/components/base/Toggle.vue

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index e6738f6fe..61b1e5f4e 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -36,6 +36,7 @@ export default {
           { text: 'Slider', link: '/components/slider' },
           { text: 'Text Inputs', link: '/components/text-inputs' },
           { text: 'Search Filter', link: '/components/search-filter' },
+          { text: 'Toggle', link: '/components/toggle' },
         ],
       },
     ],
diff --git a/docs/components/toggle.md b/docs/components/toggle.md
new file mode 100644
index 000000000..1d0768ff6
--- /dev/null
+++ b/docs/components/toggle.md
@@ -0,0 +1,20 @@
+# Toggle
+
+<script setup>
+import { ref } from "vue"; 
+
+const value = ref(true)
+</script>
+<DemoContainer>
+  <Toggle v-model="value" checked="true" />
+</DemoContainer>
+
+```vue
+<script setup>
+import { ref } from "vue"; 
+
+const value = ref(true)
+</script>
+
+<Toggle v-model="value" />
+```
diff --git a/lib/components/base/Toggle.vue b/lib/components/base/Toggle.vue
new file mode 100644
index 000000000..779285f1e
--- /dev/null
+++ b/lib/components/base/Toggle.vue
@@ -0,0 +1,37 @@
+<template>
+  <input
+    :id="id"
+    type="checkbox"
+    class="switch stylized-toggle"
+    :checked="checked"
+    @change="toggle"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+    modelValue: {
+      type: Boolean,
+    },
+    checked: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  emits: ['update:modelValue'],
+  methods: {
+    toggle() {
+      if (!this.disabled) {
+        this.$emit('update:modelValue', !this.modelValue)
+      }
+    },
+  },
+}
+</script>
+
+<style scoped></style>
diff --git a/lib/components/index.js b/lib/components/index.js
index d087808f0..194db707f 100644
--- a/lib/components/index.js
+++ b/lib/components/index.js
@@ -16,6 +16,7 @@ export { default as EnvironmentIndicator } from './base/EnvironmentIndicator.vue
 export { default as DropdownSelect } from './base/DropdownSelect.vue'
 export { default as FileInput } from './base/FileInput.vue'
 export { default as DropArea } from './base/DropArea.vue'
+export { default as Toggle } from './base/Toggle.vue'
 
 export { default as Categories } from './search/Categories.vue'
 export { default as SearchFilter } from './search/SearchFilter.vue'