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

Data Display Components

Name: tessl/npm-buefy
Author: tessl

Components for displaying structured data, content, and feedback messages with consistent styling and functionality.

Table Components

Advanced data table with sorting, pagination, and selection features.

export const BTable: Component<{
  data?: Object[];
  columns?: ITableColumn[];
  selected?: Object | Object[];
  focusable?: boolean;
  hoverable?: boolean;
  striped?: boolean;
  narrowed?: boolean;
  loading?: boolean;
  detailed?: boolean;
  checkable?: boolean;
  checkboxPosition?: 'left' | 'right';
  headerCheckable?: boolean;
  checkedRows?: Object[];
  isRowCheckable?: (row: Object, index: number) => boolean;
  mobileCursor?: boolean;
  customIsChecked?: (a: Object, b: Object) => boolean;
  isRowSelectable?: (row: Object, index: number) => boolean;
  sortIcon?: string;
  sortIconSize?: string;
  sortIconAsc?: string;
  sortIconDesc?: string;
  defaultSort?: string | string[];
  defaultSortDirection?: 'asc' | 'desc';
  sortMultiple?: boolean;
  sortMultipleData?: Object[];
  sortMultipleKey?: string;
  paginated?: boolean;
  currentPage?: number;
  perPage?: number;
  showDetailIcon?: boolean;
  detailIcon?: string;
  detailTransition?: string;
  customDetailRow?: boolean;
  openedDetailed?: Object[];
  hasDetailedVisible?: (row: Object) => boolean;
  detailKey?: string;
  customRowKey?: string;
  draggable?: boolean;
  draggedOverRow?: Object;
  ariaNextLabel?: string;
  ariaPreviousLabel?: string;
  ariaPageLabel?: string;
  ariaCurrentLabel?: string;
}>;

export const BTableColumn: Component<{
  label?: string;
  customKey?: string;
  field?: string;
  meta?: any;
  width?: string | number;
  customSort?: (a: any, b: any, isAsc: boolean) => number;
  sortable?: boolean;
  visible?: boolean;
  position?: 'left' | 'centered' | 'right';
  searchable?: boolean;
  subheading?: string;
  customSearch?: (row: Object, input: string) => boolean;
  sticky?: boolean;
  headerSelectable?: boolean;
  headerClass?: string;
  headerStyle?: string;
  cellClass?: string;
  cellStyle?: string;
}>;

Usage example:

import { BTable, BTableColumn } from "buefy";

// Basic table
<BTable :data="users" :hoverable="true">
  <BTableColumn field="name" label="Name" v-slot="props">
    {{ props.row.name }}
  </BTableColumn>
  <BTableColumn field="email" label="Email" v-slot="props">
    {{ props.row.email }}
  </BTableColumn>
</BTable>

// Table with selection and pagination
<BTable 
  :data="users" 
  :checkable="true" 
  :paginated="true" 
  :per-page="10"
  v-model:checked-rows="checkedRows"
>
  <BTableColumn field="id" label="ID" numeric v-slot="props">
    {{ props.row.id }}
  </BTableColumn>
  <BTableColumn field="name" label="Name" sortable v-slot="props">
    {{ props.row.name }}
  </BTableColumn>
</BTable>

Table Types

export interface ITableColumn {
  field?: string;
  label?: string;
  width?: string | number;
  customSort?: (a: any, b: any, isAsc: boolean) => number;
  sortable?: boolean;
  visible?: boolean;
  position?: 'left' | 'centered' | 'right';
  searchable?: boolean;
  subheading?: string;
  meta?: any;
}

export type ModifierKeys = {
  altKey?: boolean;
  ctrlKey?: boolean;
  metaKey?: boolean;
  shiftKey?: boolean;
};

export type TableColumnOrder = 'asc' | 'desc';

export interface TableColumnDragEvent {
  column: ITableColumn;
  index: number;
}

export interface TableRow {
  [key: string]: any;
}

export interface TableRowDragEvent {
  row: TableRow;
  index: number;
}

Message Component

Display informational messages with various types and closable functionality.

export const BMessage: Component<{
  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';
  title?: string;
  closable?: boolean;
  hasIcon?: boolean;
  icon?: string;
  iconPack?: string;
  iconSize?: string;
  autoClose?: boolean;
  duration?: number;
}>;

Usage example:

import { BMessage } from "buefy";

// Basic message
<BMessage type="is-info" title="Information">
  This is an informational message.
</BMessage>

// Closable message with icon
<BMessage 
  type="is-success" 
  :has-icon="true" 
  :closable="true"
>
  Operation completed successfully!
</BMessage>

Tag Components

Display labels, badges, and removable tags.

export const BTag: Component<{
  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-normal' | 'is-medium' | 'is-large';
  rounded?: boolean;
  closable?: boolean;
  attached?: boolean;
  ellipsis?: boolean;
  tabstop?: boolean;
  disabled?: boolean;
}>;

export const BTaglist: Component<{
  attached?: boolean;
}>;

Usage example:

import { BTag, BTaglist } from "buefy";

// Single tags
<BTag type="is-primary">Primary Tag</BTag>
<BTag type="is-success" :closable="true" @close="removeTag">
  Removable Tag
</BTag>

// Tag list
<BTaglist>
  <BTag v-for="tag in tags" :key="tag.id" type="is-info">
    {{ tag.name }}
  </BTag>
</BTaglist>

Progress Component

Display progress bars for loading states and task completion.

export const BProgress: Component<{
  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';
  value?: number;
  max?: number;
  showValue?: boolean;
  format?: 'default' | 'percent';
  precision?: number;
  keepTrailingZeroes?: boolean;
}>;

export const BProgressBar: Component<{
  type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 
         'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
  value?: number;
  showValue?: boolean;
}>;

Usage example:

import { BProgress } from "buefy";

// Basic progress bar
<BProgress :value="progress" :max="100" type="is-primary" />

// Progress with value display
<BProgress 
  :value="75" 
  :max="100" 
  :show-value="true" 
  format="percent"
  type="is-success"
/>

Image Component

Responsive image component with lazy loading and WebP fallback support.

export const BImage: Component<{
  src?: string;
  alt?: string;
  ratio?: '1by1' | '5by4' | '4by3' | '3by2' | '5by3' | '16by9' | '2by1' | '3by1' | 
           '4by5' | '3by4' | '2by3' | '3by5' | '9by16' | '1by2' | '1by3';
  srcFallback?: string;
  webpFallback?: string;
  lazy?: boolean;
  responsive?: boolean;
  rounded?: boolean;
}>;

Usage example:

import { BImage } from "buefy";

// Responsive image with ratio
<BImage 
  :src="imageUrl" 
  ratio="16by9" 
  :responsive="true"
  alt="Description"
/>

// Lazy loaded image with fallback
<BImage 
  :src="highResImage" 
  :src-fallback="lowResImage" 
  :lazy="true" 
  :rounded="true"
/>

Skeleton Component

Loading placeholder component for content that is being fetched.

export const BSkeleton: Component<{
  active?: boolean;
  animated?: boolean;
  width?: string | number;
  height?: string | number;
  circle?: boolean;
  rounded?: boolean;
  count?: number;
  position?: 'is-centered' | 'is-right';
  size?: 'is-small' | 'is-medium' | 'is-large';
}>;

Usage example:

import { BSkeleton } from "buefy";

// Basic skeleton
<BSkeleton :active="loading" :animated="true" />

// Multiple skeletons
<BSkeleton 
  :active="loading" 
  :count="3" 
  height="20px"
/>

// Circular skeleton for avatars
<BSkeleton 
  :active="loading" 
  :circle="true" 
  width="50px" 
  height="50px"
/>

Install with Tessl CLI