Overlay Components

export const BDialog: Component<{
  active?: boolean;
  title?: string;
  message?: string;
  icon?: string;
  iconPack?: string;
  hasIcon?: boolean;
  type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 
         'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
  size?: 'is-small' | 'is-medium' | 'is-large';
  confirmText?: string;
  cancelText?: string;
  canCancel?: boolean | string[];
  hasInput?: boolean;
  inputAttrs?: object;
  inputValue?: string;
  trapFocus?: boolean;
  autoFocus?: boolean;
  container?: string;
  programmatic?: boolean;
  onConfirm?: (value?: string) => void;
  onCancel?: () => void;
}>;

import { BDialog } from "buefy";

// Template usage
<BDialog 
  v-model:active="showDialog"
  title="Confirm Action"
  message="Are you sure you want to delete this item?"
  type="is-danger"
  :has-icon="true"
  icon="alert-circle"
  @confirm="handleConfirm"
  @cancel="handleCancel"
/>

// Programmatic usage (see Programmatic APIs section)

export const BModal: Component<{
  active?: boolean;
  component?: Component;
  content?: string;
  programmatic?: boolean;
  props?: object;
  events?: object;
  width?: string | number;
  hasModalCard?: boolean;
  animation?: string;
  canCancel?: boolean | string[];
  scroll?: 'clip' | 'keep';
  fullScreen?: boolean;
  trapFocus?: boolean;
  autoFocus?: boolean;
  customClass?: string;
  ariaRole?: string;
  ariaModal?: boolean;
  ariaLabel?: string;
  destroyOnHide?: boolean;
  container?: string;
  onCancel?: () => void;
}>;

import { BModal } from "buefy";

// Basic modal
<BModal v-model:active="showModal" :width="640" scroll="keep">
  <div class="modal-card" style="width: auto">
    <header class="modal-card-head">
      <p class="modal-card-title">Custom Modal</p>
    </header>
    <section class="modal-card-body">
      <p>Modal content goes here</p>
    </section>
    <footer class="modal-card-foot">
      <BButton @click="showModal = false">Close</BButton>
    </footer>
  </div>
</BModal>

// Component modal
<BModal 
  v-model:active="showComponentModal"
  :component="CustomComponent"
  :props="{ title: 'Dynamic Title' }"
  :events="{ save: onSave }"
/>

export const BToast: Component<{
  active?: boolean;
  message?: string;
  type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 
         'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
  position?: NoticePosition;
  duration?: number;
  queue?: boolean;
  indefinite?: boolean;
  pauseOnHover?: boolean;
  container?: string;
  onClose?: () => void;
}>;

export const BNotification: Component<{
  active?: boolean;
  type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 
         'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
  message?: string;
  duration?: number;
  indefinite?: boolean;
  pauseOnHover?: boolean;
  hasIcon?: boolean;
  icon?: string;
  iconPack?: string;
  iconSize?: string;
  autoClose?: boolean;
  queue?: boolean;
  position?: NoticePosition;
  container?: string;
  onClose?: () => void;
}>;

export const BSnackbar: Component<{
  active?: boolean;
  message?: string;
  type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 
         'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
  position?: NoticePosition;
  duration?: number;
  queue?: boolean;
  indefinite?: boolean;
  pauseOnHover?: boolean;
  actionText?: string;
  container?: string;
  onAction?: () => void;
  onClose?: () => void;
}>;

export const BLoading: Component<{
  active?: boolean;
  programmatic?: boolean;
  container?: HTMLElement | string;
  isFullPage?: boolean;
  animation?: string;
  canCancel?: boolean;
  onCancel?: () => void;
}>;

export const BTooltip: Component<{
  label?: string;
  type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 
         'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
  size?: 'is-small' | 'is-medium' | 'is-large';
  position?: 'is-top' | 'is-bottom' | 'is-left' | 'is-right';
  always?: boolean;
  animated?: boolean;
  square?: boolean;
  dashed?: boolean;
  multilined?: boolean;
  delay?: number;
  appendToBody?: boolean;
  triggers?: string[];
}>;

import { 
  BToast, 
  BNotification, 
  BSnackbar, 
  BLoading, 
  BTooltip 
} from "buefy";

// Toast notification
<BToast 
  v-model:active="showToast"
  message="Operation completed!"
  type="is-success"
  position="is-top-right"
/>

// Persistent notification
<BNotification 
  v-model:active="showNotification"
  type="is-info"
  :has-icon="true"
  message="New updates available"
/>

// Snackbar with action
<BSnackbar 
  v-model:active="showSnackbar"
  message="Item deleted"
  action-text="Undo"
  @action="undoDelete"
/>

// Loading overlay
<BLoading v-model:active="isLoading" :is-full-page="true" />

// Tooltip
<BTooltip label="This is helpful information" position="is-top">
  <BButton>Hover me</BButton>
</BTooltip>

import { 
  DialogProgrammatic, 
  ToastProgrammatic, 
  ModalProgrammatic, 
  NotificationProgrammatic, 
  SnackbarProgrammatic, 
  LoadingProgrammatic 
} from "buefy";

// Programmatic toast
ToastProgrammatic.open({
  message: 'Hello World!',
  type: 'is-success',
  duration: 4000
});

// Programmatic dialog
const result = await DialogProgrammatic.confirm({
  title: 'Confirm',
  message: 'Are you sure?',
  type: 'is-danger'
});

// Programmatic modal
ModalProgrammatic.open({
  component: MyComponent,
  props: { data: someData },
  events: { close: onModalClose }
});

// Programmatic loading
const loading = LoadingProgrammatic.open();
await someAsyncOperation();
loading.close();

app.use(Buefy, {
  defaultToastPosition: 'is-bottom-right',
  defaultNotificationPosition: 'is-top-right',
  defaultToastDuration: 4000,
  defaultNotificationDuration: 5000,
  defaultModalCanCancel: ['escape', 'x', 'outside'],
  defaultModalScroll: 'keep',
  defaultProgrammaticPromise: true
});