Bespoke toggle button component

Author: murrant

resources/js/components/ToggleButton.vue

@@ -0,0 +1,81 @@
+<!--
+  - ToggleButton.vue
+  -
+  - Description-
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU General Public License as published by
+  - the Free Software Foundation, either version 3 of the License, or
+  - (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.See the
+  - GNU General Public License for more details.
+  -
+  - You should have received a copy of the GNU General Public License
+  - along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -
+  - @link       https://www.librenms.org
+  -
+  - @copyright  2025 Tony Murray
+  - @author     Tony Murray <murraytony@gmail.com>
+  -->
+
+<template>
+    <label
+        class="tw:relative tw:inline-block tw:w-20 tw:h-10 tw:align-middle"
+        :class="{ 'tw:opacity-60 tw:cursor-not-allowed': disabled }"
+    >
+        <input
+            type="checkbox"
+            class="tw:absolute tw:opacity-0 tw:w-0 tw:h-0 tw:peer"
+            :name="name"
+            :checked="checked"
+            :required="required"
+            :disabled="disabled"
+            @change="onChange"
+        />
+        <span
+            class="tw:absolute tw:cursor-pointer tw:inset-0 tw:bg-gray-300 tw:dark:bg-gray-600 tw:transition-colors tw:duration-200 tw:rounded-full tw:peer-checked:bg-green-500 tw:dark:peer-checked:bg-green-400 tw:*:absolute tw:*:content-empty tw:*:size-8 tw:*:top-1 tw:*:left-1 tw:*:bg-white tw:*:transition-transform tw:*:duration-200 tw:*:rounded-full tw:*:shadow-md tw:peer-checked:*:translate-x-10"
+            :class="{ 'tw:cursor-not-allowed': disabled }"
+            aria-hidden="true"
+        >
+      <span></span>
+    </span>
+    </label>
+</template>
+
+<script>
+export default {
+    name: 'ToggleButton',
+    props: {
+        modelValue: { type: Boolean, default: undefined },
+        value: { type: Boolean, default: undefined }, // legacy
+        name: { type: String, default: undefined },
+        required: { type: Boolean, default: false },
+        disabled: { type: Boolean, default: false },
+        // legacy prop from vue-js-toggle-button, ignored but accepted to prevent warnings
+        sync: { type: [Boolean, String], default: undefined },
+    },
+    emits: ['update:modelValue', 'change'],
+    computed: {
+        checked() {
+            // Prefer v-model if provided, otherwise fall back to legacy value
+            if (this.modelValue !== undefined) {
+                return !!this.modelValue;
+            }
+            return !!this.value;
+        },
+    },
+    methods: {
+        onChange(e) {
+            const newVal = e.target.checked;
+            // v-model support
+            this.$emit('update:modelValue', newVal);
+            // backward compatible change event structure
+            this.$emit('change', { value: newVal });
+        },
+    },
+};
+</script>