tessl/npm-buefy

Lightweight UI components for Vue.js (v3) based on Bulma

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Programmatic APIs

Name: tessl/npm-buefy
Author: tessl

Programmatic APIs allow you to create and control overlay components (dialogs, toasts, notifications, etc.) dynamically from JavaScript without requiring template declarations.

Dialog API

Create alert, confirm, and prompt dialogs programmatically.

class DialogProgrammatic {
  alert(params: string | DialogOpenParams): Promise<any> | DialogProgrammaticInstance;
  confirm(params: DialogOpenParams): Promise<any> | DialogProgrammaticInstance;
  prompt(params: DialogOpenParams): Promise<any> | DialogProgrammaticInstance;
}

interface DialogOpenParams {
  title?: string;
  message?: string | VNode | (string | VNode)[];
  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[];
  onConfirm?: (value: string, dialog: DialogInstance) => void;
  onCancel?: (method: ModalCancellableOption) => void;
  hasInput?: boolean;
  inputAttrs?: object;
  trapFocus?: boolean;
  autoFocus?: boolean;
  container?: string;
}

interface DialogProgrammaticInstance {
  close(): void;
}

Usage example:

import { DialogProgrammatic } from "buefy";

// Simple alert
DialogProgrammatic.alert('Operation completed successfully!');

// Confirmation dialog
DialogProgrammatic.confirm({
  title: 'Delete Item',
  message: 'Are you sure you want to delete this item?',
  type: 'is-danger',
  onConfirm: () => {
    // Handle confirmation
    deleteItem();
  }
});

// Prompt dialog
DialogProgrammatic.prompt({
  title: 'Enter Name',
  message: 'What is your name?',
  inputAttrs: {
    placeholder: 'Your name',
    maxlength: 50
  },
  onConfirm: (value) => {
    console.log('Name entered:', value);
  }
});

// With promise handling (if configured)
const result = await DialogProgrammatic.confirm({
  message: 'Save changes?'
});
if (result) {
  saveChanges();
}

Toast API

Display temporary notification messages.

class ToastProgrammatic {
  open(params: string | ToastOpenParams): ToastProgrammaticInstance;
}

interface ToastOpenParams {
  message?: string | VNode | (string | VNode)[];
  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;
}

interface ToastProgrammaticInstance {
  close(): void;
}

Usage example:

import { ToastProgrammatic } from "buefy";

// Simple toast
ToastProgrammatic.open('Data saved successfully!');

// Custom toast
ToastProgrammatic.open({
  message: 'Upload completed',
  type: 'is-success',
  duration: 4000,
  position: 'is-top-right',
  onClose: () => {
    console.log('Toast closed');
  }
});

// Indefinite toast (manual close)
const toast = ToastProgrammatic.open({
  message: 'Processing...',
  type: 'is-info',
  indefinite: true
});

// Close programmatically
setTimeout(() => {
  toast.close();
}, 5000);

Modal API

Create modal dialogs with custom content.

class ModalProgrammatic {
  open(params: string | ModalOpenParams): ModalProgrammaticInstance;
}

interface ModalOpenParams {
  content?: string | VNode | (string | VNode)[];
  component?: Component;
  props?: object;
  events?: object;
  width?: string | number;
  hasModalCard?: boolean;
  animation?: string;
  canCancel?: boolean | string[];
  scroll?: ModalScrollBehavior;
  fullScreen?: boolean;
  trapFocus?: boolean;
  autoFocus?: boolean;
  customClass?: string;
  container?: string;
  onCancel?: (method: ModalCancellableOption) => void;
}

interface ModalProgrammaticInstance {
  close(): void;
}

Usage example:

import { ModalProgrammatic } from "buefy";

// Simple content modal
ModalProgrammatic.open({
  content: '<p>This is modal content!</p>',
  hasModalCard: true
});

// Component modal
ModalProgrammatic.open({
  component: MyCustomComponent,
  props: {
    title: 'Custom Modal',
    data: someData
  },
  events: {
    confirm: (result) => {
      console.log('Modal confirmed:', result);
    }
  },
  trapFocus: true
});

Notification API

Display persistent notification messages with actions.

class NotificationProgrammatic {
  open(params: string | NotificationOpenParams): NotificationProgrammaticInstance;
}

interface NotificationOpenParams {
  message?: string | VNode | (string | VNode)[];
  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;
  hasIcon?: boolean;
  icon?: string;
  iconPack?: string;
  autoClose?: boolean;
  container?: string;
  onClose?: () => void;
}

interface NotificationProgrammaticInstance {
  close(): void;
}

Usage example:

import { NotificationProgrammatic } from "buefy";

// Success notification
NotificationProgrammatic.open({
  message: 'Profile updated successfully!',
  type: 'is-success',
  hasIcon: true,
  duration: 4000
});

// Error notification with manual close
NotificationProgrammatic.open({
  message: 'Failed to save changes. Please try again.',
  type: 'is-danger',
  indefinite: true,
  hasIcon: true
});

Snackbar API

Display brief messages with optional actions.

class SnackbarProgrammatic {
  open(params: string | SnackbarOpenParams): SnackbarProgrammaticInstance;
}

interface SnackbarOpenParams {
  message?: string | VNode | (string | VNode)[];
  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;
}

interface SnackbarProgrammaticInstance {
  close(): void;
}

Usage example:

import { SnackbarProgrammatic } from "buefy";

// Simple snackbar
SnackbarProgrammatic.open('Item deleted');

// Snackbar with action
SnackbarProgrammatic.open({
  message: 'Item deleted',
  actionText: 'Undo',
  onAction: () => {
    restoreItem();
  },
  duration: 6000
});

Loading API

Display full-screen or container loading overlays.

class LoadingProgrammatic {
  open(params?: LoadingOpenParams): LoadingProgrammaticInstance;
}

interface LoadingOpenParams {
  container?: HTMLElement | string;
  isFullPage?: boolean;
  animation?: string;
  canCancel?: boolean;
  onCancel?: () => void;
}

interface LoadingProgrammaticInstance {
  close(): void;
}

Usage example:

import { LoadingProgrammatic } from "buefy";

// Full-page loading
const loading = LoadingProgrammatic.open({
  isFullPage: true
});

// Close after operation
performAsyncOperation().finally(() => {
  loading.close();
});

// Container-specific loading
const containerLoading = LoadingProgrammatic.open({
  container: '#my-container',
  isFullPage: false
});

Global Configuration

Programmatic components respect global configuration options:

// Configure default behavior
app.use(Buefy, {
  defaultProgrammaticPromise: true, // Enable promise-based APIs
  defaultToastPosition: 'is-bottom-right',
  defaultNotificationPosition: 'is-top-right',
  defaultToastDuration: 4000,
  defaultNotificationDuration: 5000
});

Access via Vue Instance

Programmatic APIs are available through the Vue instance:

// In a component
export default {
  methods: {
    showAlert() {
      this.$buefy.dialog.alert('Hello World!');
    },
    showToast() {
      this.$buefy.toast.open('Operation successful');
    }
  }
}

Install with Tessl CLI