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:model-value="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
  emit('update:modelValue', true)
}
</script>

<style scoped lang="scss"></style>