app/components/Layout/Parameters/Website/ActivationSwitch.vue

<template>
  <div>
    <v-switch
      :model-value="modelValue"
      :label="$t('activateOpentalentSiteWeb')"
      inset
      :color="color"
      :base-color="color"
      false-icon="fas fa-xmark"
      true-icon="fas fa-check"
      hide-details
      @update:modelValue="onUpdate"
    />

    <LazyLayoutDialog :show="showWebsiteDeactivationDialog" theme="warning">
      <template #dialogTitle>
        {{ $t('please_confirm') }}
      </template>
      <template #dialogText>
        <v-col>
          <div>
            {{
              $t(
                'yourOpentalentWebsiteWillBeDeactivatedOnceYouLlHaveSaved',
              )
            }}.
          </div>
          <span>{{ $t('doYouWantToContinue') }} ?</span>
        </v-col>
      </template>
      <template #dialogBtn>
        <v-btn
          class="theme-neutral-soft mr-4"
          @click="onDialogNoBtnClick"
        >
          {{ $t('cancel') }}
        </v-btn>

        <v-btn class="theme-primary" @click="onDialogYesBtnClick">
          {{ $t('yes') }}
        </v-btn>
      </template>
    </LazyLayoutDialog>
  </div>
</template>

<script setup lang="ts">

import {useTheme} from 'vuetify';
import type {Ref} from 'vue';

const theme = useTheme()

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

const i18n = useI18n()

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true,
  }
})

const color = computed(() => props.modelValue ?
  theme.current.value.colors['success'] :
  theme.current.value.colors['danger']
)

const showWebsiteDeactivationDialog: Ref<boolean> = ref(false)

const onUpdate = (value: boolean) => {
  if (!value) {
    showWebsiteDeactivationDialog.value = true
  } else {
    emit('update:modelValue', value)
  }
}

const onDialogYesBtnClick = () => {
  showWebsiteDeactivationDialog.value = false
  emit('update:modelValue', false)
}

const onDialogNoBtnClick = () => {
  showWebsiteDeactivationDialog.value = false
  props.modelValue = true
}
</script>

<style scoped lang="scss">

</style>