feat: Switch Input component

src/streamsync/core.py

@@ -632,6 +632,10 @@ def _transform_options_change(self, ev: StreamsyncEvent) -> Optional[List[str]]:
             raise ValueError("Unauthorised option")
         return payload
 
+    def _transform_toggle(self, ev: StreamsyncEvent) -> bool:
+        payload = bool(ev.payload)
+        return payload
+
     def _transform_keydown(self, ev) -> Dict:
         payload = ev.payload
         key = str(payload.get("key"))

ui/src/core/templateMap.ts

@@ -25,6 +25,7 @@ import CoreSliderInput from "../core_components/input/CoreSliderInput.vue";
 import CoreTextInput from "../core_components/input/CoreTextInput.vue";
 import CoreTextareaInput from "../core_components/input/CoreTextareaInput.vue";
 import CoreRating from "../core_components/input/CoreRatingInput.vue";
+import CoreSwitchInput from "../core_components/input/CoreSwitchInput.vue";
 // layout
 import CoreColumn from "../core_components/layout/CoreColumn.vue";
 import CoreColumns from "../core_components/layout/CoreColumns.vue";
@@ -104,7 +105,8 @@ const templateMap = {
 	chat: CoreChat,
 	step: CoreStep,
 	steps: CoreSteps,
-	ratinginput: CoreRating
+	ratinginput: CoreRating,
+	switchinput: CoreSwitchInput,
 };
 
 if (STREAMSYNC_LIVE_CCT === "yes") {

ui/src/core_components/input/CoreSwitchInput.vue

@@ -0,0 +1,127 @@
+<template>
+	<div ref="rootEl" class="CoreSwitchInput">
+		<div
+			class="switch"
+			:class="{ on: toggleValue }"
+			@click="handleToggle"
+			tabindex="0"
+			role="switch"
+			@keydown.enter.space="handleToggle"
+			:aria-checked="toggleValue"
+		>
+			<div class="toggle"></div>
+		</div>
+		<label @click="handleToggle">
+			{{ fields.label.value }}
+		</label>
+	</div>
+</template>
+
+<script lang="ts">
+import { computed, inject, Ref } from "vue";
+import { ref } from "vue";
+import { FieldCategory, FieldType } from "../../streamsyncTypes";
+import {
+	accentColor,
+	primaryTextColor,
+	separatorColor,
+	cssClasses,
+} from "../../renderer/sharedStyleFields";
+
+const description = "A user input component with a simple on/off status.";
+
+const onToggleHandlerStub = `
+def handle_toggle(state, payload):
+
+	# The payload will be a bool 
+
+	state["its_on"] = payload`;
+
+export default {
+	streamsync: {
+		name: "Switch Input",
+		description,
+		category: "Input",
+		fields: {
+			label: {
+				name: "Label",
+				init: "Input Label",
+				type: FieldType.Text,
+			},
+			accentColor,
+			primaryTextColor,
+			separatorColor,
+			cssClasses,
+		},
+		events: {
+			"ss-toggle": {
+				desc: "Sent when the switch is toggled.",
+				stub: onToggleHandlerStub.trim(),
+				bindable: true,
+			},
+		},
+	},
+};
+</script>
+
+<script setup lang="ts">
+import injectionKeys from "../../injectionKeys";
+import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+
+const fields = inject(injectionKeys.evaluatedFields);
+const rootEl: Ref<HTMLElement> = ref(null);
+const ss = inject(injectionKeys.core);
+const instancePath = inject(injectionKeys.instancePath);
+const flattenedInstancePath = inject(injectionKeys.flattenedInstancePath);
+const { formValue, handleInput } = useFormValueBroker(ss, instancePath, rootEl);
+const toggleValue = ref(false);
+
+function handleToggle() {
+	toggleValue.value = !toggleValue.value;
+	handleInput(toggleValue.value, "ss-toggle");
+}
+</script>
+
+<style scoped>
+@import "../../renderer/sharedStyles.css";
+.CoreSwitchInput {
+	display: flex;
+	gap: 8px;
+	align-items: center;
+}
+
+.switch {
+	background: var(--separatorColor);
+	width: 32px;
+	height: 16px;
+	padding: 1px;
+	border-radius: 8px;
+	cursor: pointer;
+	box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.2) inset;
+	overflow: hidden;
+}
+
+.switch:focus-visible {
+	outline: 1px solid var(--primaryTextColor);
+}
+
+.switch.on {
+	background: var(--accentColor);
+}
+
+.toggle {
+	width: 14px;
+	height: 14px;
+	background: var(--containerBackgroundColor);
+	border-radius: 8px;
+	transition: 0.2s margin ease-in-out;
+}
+
+.switch.on .toggle {
+	margin-left: 16px;
+}
+
+label {
+	cursor: pointer;
+}
+</style>