<template>
  <v-app>
    <v-container :max-width="650" class="space-y-6">
      <div class="d-flex ga-6">
        <v-switch hide-details color="primary" v-model="dense" label="compact" />
        <v-switch hide-details color="primary" v-model="prominent" label="prominent" />
        <v-switch hide-details color="primary" v-model="closable" label="closable" />
      </div>

      <v-alert v-bind='alertConfigWithTitle' />
      <v-alert v-bind='alertConfigWithTitleAndText' />
      <v-alert v-bind='alertConfigWithShortText' />
      <v-alert v-bind='alertConfigWithLongText' />

      <v-number-input hide-details class="mt-6" density="compact" variant="outlined" v-model="iconSize" label="icon size" max-width="200" suffix="px" />

      <v-alert v-bind='alertConfigWithTitle' :icon-size="iconSize" />
      <v-alert v-bind='alertConfigWithTitleAndText' :icon-size="iconSize" />
      <v-alert v-bind='alertConfigWithShortText' :icon-size="iconSize" />
      <v-alert v-bind='alertConfigWithLongText' :icon-size="iconSize" />

    </v-container>
  </v-app>
</template>

<script setup>
  import { computed, ref } from 'vue'
  const dense = ref(false)
  const closable = ref(false)
  const prominent = ref(false)
  const iconSize = ref(24)

  const alertConfig = computed(() => ({
    icon: 'mdi-adjust',
    density: dense.value ? 'compact' : undefined,
    closable: closable.value,
    prominent: prominent.value
  }))
  const alertConfigWithTitle = computed(() => ({
    ...alertConfig.value,
    title: 'Past date not allowed',
  }))
  const alertConfigWithTitleAndText = computed(() => ({
    ...alertConfigWithTitle.value,
    text: 'You requested date that is in the past. Please adjust your selection.',
  }))
  const alertConfigWithShortText = computed(() => ({
    ...alertConfig.value,
    text: 'You requested date that is in the past. Please adjust your selection.',
  }))
  const alertConfigWithLongText = computed(() => ({
    ...alertConfig.value,
    text: 'You requested date that is in the past. Please adjust your selection. More text more text more text.',
  }))
</script>

<style>
  .space-y-6 > * + * {
    margin-top: 24px
  }
  /* outline to help us see alignment */
  .v-alert .v-alert__prepend {
    position: relative;
  }
  .v-alert .v-alert__prepend:after {
    pointer-events: none;
    position: absolute;
    display: block;
    content: '';
    inset: 0;
    width: 999px;
    border: 1px #0008 dashed;
  }
</style>