Laravel EnsoLaravel Enso
Guide
Back End
Front End
GitHub
Guide
Back End
Front End
GitHub
  • Front End

    • Accessories
    • Addresses
    • Algolia
    • Audits
    • Auth
    • Bookmarks
    • Calendar
    • Card
    • Cargo Partner
    • Categories
    • Charts
    • Checkbox
    • Clipboard
    • Comments
    • Commercial
    • Companies
    • Confirmation
    • Currencies
    • Data Import
    • Date
    • Datepicker
    • Directives
    • Discounts
    • Divider
    • Documents
    • Dropdown
    • Dropdown Indicator
    • Eav
    • Emag
    • Emails
    • Enums
    • ERD
    • Facebook
    • Files
    • Filters
    • Financials
    • Forms
    • Frisbo
    • Google
    • Holidays
    • How to
    • Interactions
    • Inventory
    • IO
    • Laravel Validation
    • Loader
    • Localisation
    • Logs
    • Measurement Units
    • Meili Search
    • Menus
    • Mixins
    • Modal
    • Money
    • Monitored Emails
    • Notifications
    • Orderable Trees
    • Packaging Units
    • Pagination
    • People
    • Permissions
    • Product Lots
    • Products
    • Progress Bar
    • Progress Circle
    • Progress Indicator
    • Questionnaires
    • Quick View
    • Range Slider
    • Rating
    • Roles
    • Route Mapper
    • Sale Channels
    • Scroll to Top
    • Search Mode
    • Select
    • Sentry
    • Services
    • Smart Bill
    • SMS Advert
    • Strings
    • Switch
    • Tables
    • Tabs
    • Tasks
    • Teams
    • Textarea
    • Themes
    • Ticketing
    • Toastr
    • Transitions
    • Tree View
    • Tutorials
    • Typeahead
    • Typesense
    • UI
    • Uploader
    • UPS
    • User Groups
    • Users
    • Virtual Call Center
    • Vouchers
    • Webshop
    • WYSIWYG

IO

LicenseStableDownloadsVueJavaScriptSCSSnpmIssuesMerge Requests

Description

IO tracks long-running imports, exports, and tasks and renders them inside the Enso navbar.

Installation

Install the package:

yarn add @enso-ui/io

The package is also available through the full enso-ui workspace bundle.

Features

  • exports a renderless core navbar controller and Bulma navbar presentation components
  • groups import, export, and task operations into a single reactive navbar entry
  • subscribes to websocket channels and keeps operation state synchronized in real time
  • supports cancellation, progress display, elapsed and remaining time, and owner avatars

Usage

import IO from '@enso-ui/io/src/bulma/components/navbar/IO.vue';
import registerIO from '@enso-ui/io/src/bulma/register.js';

API

Bulma components

Common imports:

  • @enso-ui/io/src/bulma/components/navbar/IO.vue
  • @enso-ui/io/src/bulma/components/navbar/io/Import.vue
  • @enso-ui/io/src/bulma/components/navbar/io/Export.vue
  • @enso-ui/io/src/bulma/components/navbar/io/Task.vue
  • @enso-ui/io/src/bulma/components/navbar/io/Operation.vue
  • @enso-ui/io/src/bulma/register.js

Core controller

  • @enso-ui/io/src/core/components/navbar/IO.vue is renderless and exposes the default slot payload { count, events, exports, imports, tasks }.
  • It owns websocket subscription, bag management, cancellation, and type normalization.

Operation

Core props:

  • cancellable: boolean = false
  • operation: object

Emits:

  • cancel

Presentation components

  • Import renders file, sheet, success, and failure counters.
  • Export renders export totals and processed entries.
  • Task renders step counters for queued task-style operations.
  • register.js registers the Bulma navbar widget on the host app.

Companion Backend Package

  • laravel-enso/io ↗

Depends On

  • @enso-ui/directives ↗
  • @enso-ui/mixins ↗
  • @enso-ui/ui ↗
  • @enso-ui/users ↗

Contributions

are welcome. Pull requests are great, but issues are good too.

Thank you to all the people who already contributed to Enso!

License

MIT

Edit this page on GitHub
Last Updated: 4/21/2026, 12:26:50 PM
Prev
Inventory
Next
Laravel Validation