Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@wyxos/vision

wyxos340MIT2.0.1TypeScript support: included

A collection of Vue utilities and components for building web applications

vue, vue3, helper functions, helper components, form builder, listing, data table, pagination, error handling, utilities

readme

@wyxos/vision

A lightweight Vue.js utility library that provides essential form handling, listing, and error display utilities for Vue applications.

Features

  • Form Handling: Powerful form building, validation, and submission utilities
  • Listing and Pagination: Comprehensive tools for creating data tables with filtering, pagination, and sorting
  • Error Handling: Built-in error handling and validation utilities

Installation

npm install @wyxos/vision

Requirements

This package has the following dependencies:

  • Vue 3.x
  • axios
  • moment
  • query-string
  • vue-router

Usage

Basic Setup

You can use Vision in two ways:

import { createApp } from 'vue'
import App from './App.vue'
import Vision from '@wyxos/vision'

const app = createApp(App)

// Register all Vision components at once
app.use(Vision)

app.mount('#app')

This will register all components with both their full names (e.g., WyxosForm) and shorthand names (e.g., WForm).

Option 2: Import Components Individually

import { createApp } from 'vue'
import App from './App.vue'
import { FormBuilder, Listing, WyxosError, WyxosForm, WyxosListing } from '@wyxos/vision'

const app = createApp(App)

// Register components as needed
app.component('WyxosError', WyxosError)
app.component('WyxosForm', WyxosForm)
app.component('WyxosListing', WyxosListing)

app.mount('#app')

Components

Vision provides various components to simplify common UI tasks. See the Components documentation for details on:

  • WyxosError - Error display component for form validation errors
  • WyxosForm - Form component that creates and customizes a FormBuilder instance
  • WyxosListing - Listing component that creates and customizes a Listing instance
  • WyxosSubmit - Submit button component that integrates with FormBuilder for form submission. Can be disabled via the disabled prop.

Utilities

Vision provides utility classes to simplify common tasks. See the Utilities documentation for details on:

  • FormBuilder - Form handling with validation, submission, and state management
  • Listing - Comprehensive listing and pagination utility with filtering, searching, and state management
  • Filter - Query filtering utility used by the Listing module
  • FormErrors - Form error handling utility

License

MIT