Export PopoutCommunity Asset

<script lang="ts" setup>
import type { FileFormatType } from '~/models/fileFormat.js'

function handleExport(filename: string, format: FileFormatType) {
  alert(`Exporting ${filename} in ${format.toUpperCase()} format`)
}
</script>

<template>
  <div class="n-stack n-gap-m">
    <p class="n-typescale-s">
      This example demonstrates the basic usage of the ExportPopout component.
      It shows how to configure available export formats and handle export
      events.
    </p>

    <div>
      <nord-button
        id="export-button"
        aria-controls="export-popout"
        aria-haspopup="true"
      >
        Export
        <nord-icon slot="end" name="interface-download" />
      </nord-button>
    </div>
    <UiExportPopout id="export-popout" @export="handleExport" />
  </div>
</template>

<script lang="ts" setup>
import { FileFormat, type FileFormatType } from '~/models/fileFormat.js'

const formats = [FileFormat.CSV, FileFormat.Excel]
const filename = 'custom-export'

function handleExport(filename: string, format: FileFormatType) {
  alert(`Exporting ${filename} in ${format.toUpperCase()} format`)
}
</script>

<template>
  <div class="n-stack n-gap-m">
    <p class="n-typescale-s">
      This example shows how to customize the ExportPopout component with custom
      slots, controlled visibility, and custom positioning.
    </p>

    <div>
      <nord-button
        id="export-button"
        aria-controls="export-popout"
        aria-haspopup="true"
      >
        Download Report
        <nord-icon slot="end" name="interface-download" />
      </nord-button>
    </div>

    <UiExportPopout
      id="export-popout"
      position="inline-end"
      anchor="export-button"
      :formats
      :filename
      @export="handleExport"
    >
      <template #header>
        <div class="n-stack-horizontal n-gap-s n-items-center">
          <h3 class="n-font-size-m n-font-weight-active">
            Export Custom Report
          </h3>
          <nord-icon name="interface-download" size="s" />
        </div>
      </template>

      <template #csv>
        <div class="n-stack n-gap-s">
          <BaseButton @click="handleExport(filename, FileFormat.CSV)">
            Download as CSV
            <nord-icon slot="end" name="interface-download" />
          </BaseButton>
          <p>
            This is content included through a slot, specifically for the CSV
            format.
          </p>
          <p class="n-typescale-s">
            CSV format is best for importing into spreadsheet software.
          </p>
        </div>
      </template>

      <template #excel>
        <div class="n-stack n-gap-s">
          <BaseButton @click="handleExport(filename, FileFormat.Excel)">
            Download as Excel
            <nord-icon slot="end" name="interface-download" />
          </BaseButton>
          <p>
            This is content included through a slot, specifically for the Excel
            format.
          </p>
          <p class="n-typescale-s">
            Excel format includes additional formatting and formulas.
          </p>
        </div>
      </template>

      <template #description>
        <div class="n-stack n-gap-s">
          <p class="n-typescale-s">Choose your preferred export format:</p>
          <ul class="n-typescale-s">
            <li>CSV - Simple, universal format</li>
            <li>Excel - Rich formatting and calculations</li>
          </ul>
        </div>
      </template>
    </UiExportPopout>
  </div>
</template>