<template>
  <VSwitch
    v-model="enabled"
    label="Enable notifications"
  />
</template>

<script setup>
import { ref } from 'vue'

const enabled = ref(false)
</script>

<template>
  <div>
    <VSwitch
      v-model="switch1"
      label="Primary"
      color="primary"
    />
    
    <VSwitch
      v-model="switch2"
      label="Success"
      color="success"
    />
    
    <VSwitch
      v-model="switch3"
      label="Error"
      color="error"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const switch1 = ref(true)
const switch2 = ref(true)
const switch3 = ref(true)
</script>

<template>
  <VSwitch
    v-model="enabled"
    label="Inset switch"
    inset
    color="primary"
  />
</template>

<script setup>
import { ref } from 'vue'

const enabled = ref(true)
</script>

<template>
  <div>
    <VSwitch
      v-model="switch1"
      label="Default loading color"
      loading
    />
    
    <VSwitch
      v-model="switch2"
      label="Custom loading color"
      loading="purple"
    />
    
    <VSwitch
      v-model="saving"
      label="Save changes"
      :loading="isSaving"
      @update:model-value="saveChanges"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const switch1 = ref(true)
const switch2 = ref(true)
const saving = ref(false)
const isSaving = ref(false)

async function saveChanges(value) {
  isSaving.value = true
  try {
    await new Promise(resolve => setTimeout(resolve, 2000))
    console.log('Saved:', value)
  } finally {
    isSaving.value = false
  }
}
</script>

<template>
  <div>
    <VSwitch
      v-model="notifications"
      label="Notifications"
      true-icon="mdi-bell"
      false-icon="mdi-bell-off"
      color="primary"
    />
    
    <VSwitch
      v-model="darkMode"
      label="Dark mode"
      true-icon="mdi-weather-night"
      false-icon="mdi-weather-sunny"
      color="purple"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const notifications = ref(true)
const darkMode = ref(false)
</script>

<template>
  <div>
    <VSwitch
      v-model="status"
      label="Status"
      :true-value="'active'"
      :false-value="'inactive'"
    />
    <p>Current status: {{ status }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const status = ref('inactive')
</script>

<template>
  <div>
    <VSwitch
      v-model="selectAll"
      :indeterminate="indeterminate"
      label="Select all"
      @click="toggleAll"
    />
    
    <VSwitch
      v-for="item in items"
      :key="item.id"
      v-model="selected"
      :value="item.id"
      :label="item.name"
    />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const items = [
  { id: 1, name: 'Feature 1' },
  { id: 2, name: 'Feature 2' },
  { id: 3, name: 'Feature 3' },
]

const selected = ref([])
const selectAll = computed({
  get: () => selected.value.length === items.length,
  set: (value) => {
    if (value) {
      selected.value = items.map(item => item.id)
    } else {
      selected.value = []
    }
  }
})

const indeterminate = computed(() => 
  selected.value.length > 0 && selected.value.length < items.length
)

function toggleAll() {
  if (selected.value.length === items.length) {
    selected.value = []
  } else {
    selected.value = items.map(item => item.id)
  }
}
</script>

<template>
  <VForm>
    <VSwitch
      v-model="agreed"
      label="I agree to the terms and conditions"
      :rules="[v => !!v || 'You must agree to continue']"
      color="primary"
    />
  </VForm>
</template>

<script setup>
import { ref } from 'vue'

const agreed = ref(false)
</script>