Export button
The dashboard header's Export action, which gates itself on the export feature flag.
<script setup lang="ts">
import SaExportButton from '@shared/components/common/SaExportButton.vue'
</script>
<template>
<SaExportButton />
</template>Usage
No props, no events. Drop it into a dashboard header and it looks after itself.
It exists because of the flag. The button reaches a dashboard through a slot, so the parent owns it, and thirteen dashboards each hand-rolling their own is thirteen chances to forget features.exportSystem. Putting the check inside the component makes forgetting impossible.
It owns no export implementation. The dashboards have no table behind them, so the action raises a toast that says it is demo only. Where there is a table, DataTable has a real export that writes CSV, Excel or PDF.
The flag
features.exportSystem off removes the button from the DOM. It is not disabled and not hidden: a feature that is off should leave no trace of itself to puzzle over.
<script setup lang="ts">
import { useConfig } from '@core/config/useConfig'
import SaExportButton from '@shared/components/common/SaExportButton.vue'
import { Switch } from '@shared/components/ui/switch'
const cfg = useConfig()
</script>
<template>
<div class="flex flex-wrap items-center gap-4">
<label class="flex items-center gap-2 text-sm">
<Switch
:model-value="cfg.config.features.exportSystem"
@update:model-value="(v: boolean) => cfg.setFeature('exportSystem', v)"
/>
features.exportSystem
</label>
<SaExportButton />
<span v-if="!cfg.config.features.exportSystem" class="text-sm text-muted-foreground">
The button is gone, not disabled.
</span>
</div>
</template>The same flag gates DataTable's export menu. printable is separate. See Global config.
API
Source: src/shared/components/common/SaExportButton.vue
Props
None.
Emits
None.
Slots
None.
Accessibility
- It is an ordinary button with a visible label beside the icon, not an icon alone.
- The toast it raises is announced by the toaster's live region, so the outcome is not only visual.