<script setup lang="ts">
import KsButton from './KsButton.vue'
export interface CommandBarAction { id: string; label: string; severity?: 'primary'|'secondary'|'success'|'info'|'warning'|'danger'; disabled?: boolean; busy?: boolean }
const props = defineProps<{ actions: readonly CommandBarAction[]; ariaLabel?: string }>()
const emit = defineEmits<{ execute: [actionId: string] }>()

function execute(action: CommandBarAction): void {
  if (action.disabled || action.busy) return
  emit('execute', action.id)
}
</script>
<template><nav class="ks-command-bar" :aria-label="ariaLabel ?? 'Page actions'" :aria-busy="actions.some(action => action.busy) || undefined"><KsButton v-for="action in actions" :key="action.id" :label="action.label" :severity="action.severity" :disabled="action.disabled" :loading="action.busy" @click="execute(action)" /></nav></template>
<style scoped>.ks-command-bar{display:flex;gap:var(--ks-space-2);flex-wrap:wrap;justify-content:flex-end}</style>
