Последняя версия с сервера прошлого разработчика

resources/js/Shared/Form/Toggle.vue

@@ -0,0 +1,50 @@
+<template>
+  <SwitchGroup as="div" :class="{'pointer-events-none': disabled}"
+               class="flex items-center"
+               @click="clicked"
+  >
+    <Switch v-model="enabled" :class="[enabled ? 'bg-orange' : 'bg-indigo-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500']">
+      <!-- <span class="sr-only">Use setting</span> -->
+      <span aria-hidden="true" :class="[enabled ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200']" />
+    </Switch>
+    <SwitchLabel as="span" class="ml-3">
+      <span v-show="!enabled" class="text-sm text-white">{{ textin }}</span>
+      <span v-show="enabled" class="text-sm text-white">{{ textout }}</span>
+    </SwitchLabel>
+  </SwitchGroup>
+</template>
+
+<script>
+import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue'
+
+export default {
+    components: {
+        Switch,
+        SwitchGroup,
+        SwitchLabel,
+    },
+    props: {
+        textin: String,
+        textout: String,
+        user_id: Number,
+        enabled: {
+            type: Boolean,
+            default: false
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+    },
+    emits: ['clicked', 'prohibited'],
+    methods: {
+        clicked(){
+            if(this.disabled === false){
+                this.$emit('clicked', this.user_id)
+            }else{
+                this.$emit('prohibited')
+            }
+        }
+    }
+}
+</script>