Modal

import MtModal from '@/components/overlay/mt-modal/mt-modal.vue';
import MtModalRoot from '@/components/overlay/mt-modal/sub-components/mt-modal-root.vue';
import MtModalTrigger from '@/components/overlay/mt-modal/sub-components/mt-modal-trigger.vue';
import MtModalAction from '@/components/overlay/mt-modal/sub-components/mt-modal-action.vue';

<template>
  <mt-modal-root :isOpen="isModalOpen" :closable="true">
    <mt-modal-trigger :as="MtButton">
      <mt-button variant="primary">Open Modal</mt-button>
    </mt-modal-trigger>

    <mt-modal title="Welcome" subtitle="Get started with your setup">
      <template #default>
        <mt-text>This is the modal content area.</mt-text>
      </template>

      <template #footer>
        <div style="display: flex; justify-content: flex-end; gap: 8px;">
          <mt-modal-close :as="MtButton">
            <mt-button variant="secondary">Cancel</mt-button>
          </mt-modal-close>
          <mt-button variant="primary">Continue</mt-button>
        </div>
      </template>
    </mt-modal>
  </mt-modal-root>
</template>

<script setup>
import { ref } from 'vue';

const isModalOpen = ref(false);
</script>

<template>
  <mt-modal-root :isOpen="isOpen">
    <mt-modal title="Settings" width="l">
      <template #header-left>
        <mt-icon name="solid-cog" />
      </template>

      <template #title-after>
        <mt-badge variant="info">Beta</mt-badge>
      </template>

      <template #default>
        <!-- Modal content -->
      </template>

      <template #footer>
        <mt-button variant="primary">Save Changes</mt-button>
      </template>
    </mt-modal>
  </mt-modal-root>
</template>

<template>
  <mt-modal-root :isOpen="isOpen">
    <mt-modal title="Product Gallery" width="xl" :inset="true">
      <template #default>
        <img src="/product-image.jpg" style="width: 100%; height: auto;" />
      </template>
    </mt-modal>
  </mt-modal-root>
</template>

<template>
  <mt-modal-root :isOpen="isOpen" :closable="isClosable" @change="handleModalChange">
    <mt-modal title="Processing...">
      <template #default>
        <mt-text>Please wait while we process your request.</mt-text>
        <mt-progress :value="progress" />
      </template>
    </mt-modal>
  </mt-modal-root>
</template>

<script setup>
import { ref } from 'vue';

const isOpen = ref(false);
const isClosable = ref(false);
const progress = ref(0);

function handleModalChange(state) {
  console.log('Modal state changed:', state);
}

function startProcess() {
  isOpen.value = true;
  isClosable.value = false;
  // Simulate progress
  const interval = setInterval(() => {
    progress.value += 10;
    if (progress.value >= 100) {
      clearInterval(interval);
      isClosable.value = true;
    }
  }, 500);
}
</script>