mitlist/fe/src/components/valerie/VToggleSwitch.vue

<template>
  <div class="switch-container" :class="{ 'disabled': disabled }">
    <input
      type="checkbox"
      role="switch"
      :checked="modelValue"
      :disabled="disabled"
      :id="componentId"
      @change="handleChange"
      class="sr-only-input"
    />
    <label :for="componentId" class="switch">
      <span class="sr-only">{{ label || 'Toggle Switch' }}</span>
      <!-- The visual track and thumb are typically created via ::before and ::after on .switch (the label) -->
      <!-- Text like onText/offText could be positioned absolutely within .switch if design requires -->
      <span v-if="onText && modelValue" class="switch-text switch-text-on">{{ onText }}</span>
      <span v-if="offText && !modelValue" class="switch-text switch-text-off">{{ offText }}</span>
    </label>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  id: {
    type: String,
    default: null,
  },
  label: { // For accessibility, visually hidden
    type: String,
    default: 'Toggle Switch', // Default accessible name if not provided
  },
  onText: { // Optional text for 'on' state
    type: String,
    default: null,
  },
  offText: { // Optional text for 'off' state
    type: String,
    default: null,
  },
});

const emit = defineEmits(['update:modelValue']);

const componentId = computed(() => {
  return props.id || `v-toggle-switch-${Math.random().toString(36).substring(2, 9)}`;
});

const handleChange = (event: Event) => {
  const target = event.target as HTMLInputElement;
  emit('update:modelValue', target.checked);
};

</script>

<style lang="scss" scoped>
// Base styles should align with valerie-ui.scss's .switch definition
// Assuming .sr-only is globally defined (position: absolute; width: 1px; height: 1px; ...)
// If not, it needs to be defined here or imported.
.sr-only-input { // Class for the actual input to be hidden
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.sr-only { // For the accessible label text inside the visual label
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}


.switch-container {
  display: inline-flex; // Or block, depending on desired layout flow
  align-items: center;
  position: relative; // For positioning text if needed

  &.disabled {
    opacity: 0.7;
    cursor: not-allowed;

    .switch {
      cursor: not-allowed;
    }
  }
}

.switch {
  // These styles are from the provided valerie-ui.scss
  // They create the visual appearance of the switch.
  position: relative;
  display: inline-block;
  width: 36px; // var(--switch-width, 36px)
  height: 20px; // var(--switch-height, 20px)
  background-color: var(--switch-bg-off, #adb5bd); // Off state background
  border-radius: 20px; // var(--switch-height, 20px) / 2 for pill shape
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;

  // The thumb (circle)
  &::before {
    content: "";
    position: absolute;
    top: 2px; // var(--switch-thumb-offset, 2px)
    left: 2px; // var(--switch-thumb-offset, 2px)
    width: 16px; // var(--switch-thumb-size, 16px) -> height - 2*offset
    height: 16px; // var(--switch-thumb-size, 16px)
    background-color: white;
    border-radius: 50%;
    transition: transform 0.2s ease-in-out;
  }
}

// Styling based on the hidden input's state using sibling selector (+)
// This is a common and effective pattern for custom form controls.
.sr-only-input:checked + .switch {
  background-color: var(--switch-bg-on, #007bff); // On state background (e.g., primary color)
}

.sr-only-input:checked + .switch::before {
  transform: translateX(16px); // var(--switch-width) - var(--switch-thumb-size) - 2 * var(--switch-thumb-offset)
                               // 36px - 16px - 2*2px = 16px
}

// Focus state for accessibility (applied to the label acting as switch)
.sr-only-input:focus-visible + .switch {
  outline: 2px solid var(--switch-focus-ring-color, #007bff);
  outline-offset: 2px;
  // Or use box-shadow for a softer focus ring:
  // box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.35);
}


// Optional: Styles for onText/offText if they are part of the design
// This is a basic example; exact positioning would depend on desired look.
.switch-text {
  position: absolute;
  font-size: 0.7rem;
  font-weight: 500;
  top: 50%;
  transform: translateY(-50%);
  user-select: none;
  color: white; // Assuming text is on the colored part of the switch
}
.switch-text-on {
  // Example: position onText to the left of the thumb when 'on'
  left: 6px;
  // visibility: hidden; // Shown by input:checked + .switch .switch-text-on
}
.switch-text-off {
  // Example: position offText to the right of the thumb when 'off'
  right: 6px;
  // visibility: visible;
}

// Show/hide text based on state
// This is a simple way; could also use v-if/v-else in template if preferred.
// .sr-only-input:checked + .switch .switch-text-on { visibility: visible; }
// .sr-only-input:not(:checked) + .switch .switch-text-off { visibility: visible; }
// .sr-only-input:checked + .switch .switch-text-off { visibility: hidden; }
// .sr-only-input:not(:checked) + .switch .switch-text-on { visibility: hidden; }
// The v-if in the template is more Vue-idiomatic and cleaner for this.
</style>