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

Advanced Input Components

Name: tessl/npm-buefy
Author: tessl

Sophisticated input components for complex data entry scenarios including autocomplete, color selection, tags, and file uploads.

Autocomplete Component

Input with dropdown suggestions and customizable filtering.

export const BAutocomplete: Component<{
  modelValue?: string;
  data?: any[];
  field?: string;
  keepFirst?: boolean;
  clearOnSelect?: boolean;
  openOnFocus?: boolean;
  customFormatter?: (option: any) => string;
  checkInfiniteScroll?: boolean;
  keepOpen?: boolean;
  selectOnClickOutside?: boolean;
  maxHeight?: string | number;
  dropdown?: boolean;
  groupField?: string;
  groupOptions?: string;
  iconRight?: string;
  iconRightClickable?: boolean;
  confirmKeys?: string[];
  size?: 'is-small' | 'is-medium' | 'is-large';
  expanded?: boolean;
  loading?: boolean;
  icon?: string;
  iconPack?: string;
  placeholder?: string;
  disabled?: boolean;
  readonly?: boolean;
  maxlength?: number;
  appendToBody?: boolean;
  teleported?: boolean;
}>;

Usage example:

import { BAutocomplete } from "buefy";

// Basic autocomplete
<BAutocomplete 
  v-model="selectedUser" 
  :data="filteredUsers"
  placeholder="Search users..."
  field="name"
  @input="filterUsers"
/>

// Grouped autocomplete
<BAutocomplete 
  v-model="selectedItem"
  :data="groupedData"
  group-field="category"
  group-options="items"
  field="name"
  placeholder="Search by category..."
/>

// Custom formatting
<BAutocomplete 
  v-model="selectedProduct"
  :data="products"
  :custom-formatter="formatProduct"
  placeholder="Search products..."
/>

Colorpicker Component

Color selection component with various input modes and format support.

export const BColorpicker: Component<{
  modelValue?: string;
  alpha?: boolean;
  inline?: boolean;
  disabled?: boolean;
  horizontalColorVariants?: boolean;
  icon?: string;
  iconPack?: string;
  placeholder?: string;
  size?: 'is-small' | 'is-medium' | 'is-large';
  expanded?: boolean;
}>;

Usage example:

import { BColorpicker } from "buefy";

// Basic color picker
<BColorpicker 
  v-model="selectedColor" 
  placeholder="Select color"
/>

// With alpha channel
<BColorpicker 
  v-model="colorWithAlpha" 
  :alpha="true"
  placeholder="Select color with opacity"
/>

// Inline color picker
<BColorpicker 
  v-model="themeColor" 
  :inline="true"
/>

Taginput Component

Input for creating and managing multiple tags with autocomplete support.

export const BTaginput: Component<{
  modelValue?: string[];
  data?: string[];
  type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 
         'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
  rounded?: boolean;
  attached?: boolean;
  maxtags?: number;
  hasCounter?: boolean;
  field?: string;
  autocomplete?: boolean;
  nativeAutocomplete?: string;
  disabled?: boolean;
  ellipsis?: boolean;
  openOnFocus?: boolean;
  keepFirst?: boolean;
  confirmKeyCodes?: number[];
  removeOnKeys?: number[];
  allowNew?: boolean;
  allowDuplicates?: boolean;
  onPasteSeparators?: string[];
  beforeAdding?: (tag: any) => boolean;
  size?: 'is-small' | 'is-medium' | 'is-large';
  placeholder?: string;
  icon?: string;
  iconPack?: string;
  expanded?: boolean;
  checkInfiniteScroll?: boolean;
  groupField?: string;
  groupOptions?: string;
  appendToBody?: boolean;
  createTag?: (tag: string) => any;
  customFormatter?: (option: any) => string;
}>;

Usage example:

import { BTaginput } from "buefy";

// Basic tag input
<BTaginput 
  v-model="tags" 
  placeholder="Add tags"
  :allow-new="true"
/>

// Tag input with autocomplete
<BTaginput 
  v-model="selectedTags"
  :data="availableTags"
  :autocomplete="true"
  placeholder="Search and select tags..."
  field="name"
/>

// Limited tags with counter
<BTaginput 
  v-model="limitedTags"
  :maxtags="5"
  :has-counter="true"
  placeholder="Add up to 5 tags"
/>

Numberinput Component

Numeric input with increment/decrement controls and validation.

export const BNumberinput: Component<{
  modelValue?: number;
  min?: number;
  max?: number;
  step?: number;
  disabled?: 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';
  expanded?: boolean;
  placeholder?: string;
  editable?: boolean;
  controls?: boolean;
  controlsAlignment?: 'right' | 'left';
  controlsPosition?: 'compact';
  controlsRounded?: boolean;
  lazyFormatter?: boolean;
  ariaMinusLabel?: string;
  ariaPlusLabel?: string;
  exponential?: boolean | number;
  trapFocus?: boolean;
  mobileNative?: boolean;
  customFormatter?: (value: number) => string;
  customParser?: (value: string) => number;
}>;

Usage example:

import { BNumberinput } from "buefy";

// Basic number input
<BNumberinput 
  v-model="quantity" 
  :min="1" 
  :max="100"
  placeholder="Enter quantity"
/>

// Currency input with custom formatting
<BNumberinput 
  v-model="price"
  :step="0.01"
  :custom-formatter="formatCurrency"
  :custom-parser="parseCurrency"
  placeholder="0.00"
/>

// Compact controls
<BNumberinput 
  v-model="rating"
  :min="0"
  :max="5"
  :step="0.1"
  controls-position="compact"
/>

Slider Component

Range slider for numeric value selection with customizable appearance.

export const BSlider: Component<{
  modelValue?: number | number[];
  min?: number;
  max?: number;
  step?: number;
  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';
  ticks?: boolean;
  tooltip?: boolean;
  tooltipType?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 
               'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
  rounded?: boolean;
  disabled?: boolean;
  lazy?: boolean;
  customFormatter?: (value: number) => string;
  ariaLabel?: string | string[];
  biggerSliderFocus?: boolean;
  indicator?: boolean;
}>;

export const BSliderTick: Component<{
  value?: number;
  label?: string;
}>;

Usage example:

import { BSlider } from "buefy";

// Basic slider
<BSlider 
  v-model="volume" 
  :min="0" 
  :max="100"
  type="is-primary"
/>

// Range slider
<BSlider 
  v-model="priceRange" 
  :min="0" 
  :max="1000"
  :tooltip="true"
  type="is-info"
/>

// Slider with ticks
<BSlider 
  v-model="rating"
  :min="1"
  :max="5"
  :step="1"
  :ticks="true"
  :custom-formatter="formatRating"
/>

Rate Component

Star rating component for user feedback and rating display.

export const BRate: Component<{
  modelValue?: number;
  max?: number;
  icon?: string;
  iconPack?: string;
  hasHalf?: boolean;
  hasText?: boolean;
  showText?: boolean;
  showScore?: boolean;
  customText?: string;
  texts?: string[];
  size?: 'is-small' | 'is-medium' | 'is-large';
  spaced?: boolean;
  rtl?: boolean;
  disabled?: boolean;
  locale?: string | string[];
}>;

Usage example:

import { BRate } from "buefy";

// Basic rating
<BRate 
  v-model="userRating" 
  :max="5"
  icon="star"
/>

// Rating with half stars and text
<BRate 
  v-model="productRating"
  :has-half="true"
  :show-text="true"
  :texts="['Terrible', 'Bad', 'OK', 'Good', 'Excellent']"
/>

// Read-only rating display
<BRate 
  :value="averageRating" 
  :disabled="true"
  :show-score="true"
/>

Upload Component

File upload component with drag-and-drop support and progress indication.

export const BUpload: Component<{
  modelValue?: File | File[];
  multiple?: boolean;
  disabled?: boolean;
  accept?: string;
  dragDrop?: boolean;
  native?: boolean;
  expanded?: boolean;
  rounded?: boolean;
}>;

Usage example:

import { BUpload } from "buefy";

// Basic file upload
<BUpload v-model="selectedFile" drag-drop>
  <section class="section">
    <div class="content has-text-centered">
      <p>
        <BIcon icon="upload" size="is-large" />
      </p>
      <p>Drop your file here or click to upload</p>
    </div>
  </section>
</BUpload>

// Multiple file upload
<BUpload 
  v-model="selectedFiles" 
  :multiple="true"
  accept="image/*"
  @input="handleFiles"
>
  <BButton type="is-primary" icon-left="upload">
    Choose Images
  </BButton>
</BUpload>

// Upload with preview
<BUpload v-model="imageFile" @input="previewImage">
  <figure class="image is-128x128" v-if="previewUrl">
    <img :src="previewUrl" alt="Preview">
  </figure>
  <BButton v-else type="is-primary">
    Select Image
  </BButton>
</BUpload>

Form Integration

Advanced inputs integrate seamlessly with form validation:

// Complete form example
<form @submit.prevent="submitForm">
  <BField label="Product Name">
    <BAutocomplete 
      v-model="product.name"
      :data="productSuggestions"
      @input="searchProducts"
    />
  </BField>

  <BField label="Price">
    <BNumberinput 
      v-model="product.price"
      :min="0"
      :step="0.01"
      :custom-formatter="formatPrice"
    />
  </BField>

  <BField label="Category Tags">
    <BTaginput 
      v-model="product.tags"
      :data="availableTags"
      :autocomplete="true"
    />
  </BField>

  <BField label="Rating">
    <BSlider 
      v-model="product.rating"
      :min="1"
      :max="5"
      :step="0.5"
    />
  </BField>

  <BField label="Product Images">
    <BUpload 
      v-model="product.images"
      :multiple="true"
      accept="image/*"
      drag-drop
    />
  </BField>

  <BButton type="is-primary" native-type="submit">
    Save Product
  </BButton>
</form>

Install with Tessl CLI