Dialog

<script lang="ts" setup>
const openDialog = ref(false)

const selectItems = [
  { name: 'Example 1', value: 1, disabled: false },
  { name: 'Example 2', value: 2, disabled: true },
  { name: 'Example 3', value: 3, disabled: false },
]

const selectedVal = ref<number>()
</script>

<template>
  <CButton @click="openDialog = true">
    Open dialog
  </CButton>
  <CDialog v-model="openDialog">
    <template #title>
      Example
    </template>
    <template #subtitle>
      This is an example dialog subtitle
    </template>
    Body content here
    <CSelect
      v-model="selectedVal"
      :options="selectItems"
      placeholder="Example select"
      by="value"
      label="Example select"
      class="min-w-50 w-auto"
    >
      <template #selected="{ selected }">
        {{ selected?.name }}
      </template>
      <template #default="{ items, selected }">
        <CSelectItem
          v-for="item in items"
          :key="item.name"
          :selected="item.value === selected?.value"
          :value="item.value"
          :disabled="item.disabled"
        >
          {{ item.name }}
        </CSelectItem>
      </template>
    </CSelect>
    <template #footer>
      <CButton @click="openDialog = false">
        Close
      </CButton>
    </template>
  </CDialog>
</template>

<script lang="ts" setup>
const openDialog = ref(false)
</script>

<template>
  <CButton @click="openDialog = true">
    Open XL dialog
  </CButton>
  <CDialog
    v-model="openDialog"
    size="xl"
  >
    <template #title>
      Example xl dialog
    </template>
    <template #subtitle>
      This is an example dialog subtitle
    </template>
    Body content here
    <template #footer>
      <CButton @click="openDialog = false">
        Close
      </CButton>
    </template>
  </CDialog>
</template>