@xyziovue/design-system NPM

xyz.io Vue Design System (xyziovue-design-system)

Installation

npm install @xyziovue/design-system --save

Overview

The Design System was created to provide easy and harmonious development of the UI of the customer application and modules. It work will ultimately resemble Vue Storefront or AWS Amplify Framework.

Quasar was used as UI framework.
Stylus was preferred as CSS preprocessor.

Components

DSHome

The Home component is a wrapper for pages that the login user can access. The pages to be accessed should be placed under Home route nested in the routes configuration.

{
  "home": {
    "name": "",
    "component": "views/DSHome",
    "meta": { "authenticated": true },
    "children": {
      "default-home-view": {
        "path": "",
        "name": "home",
        "redirect": { "name": "dashboard" }
      },
      "dashboard": {
        "path": "dashboard",
        "component": "views/Dashboard"
      }
    }
  }
}

DSLayout

The DSLayout component based on QLayout contains the elements that wrap application's content:

AppBar: Application bar shown on top of the page - can be overriden using the header slot
SideNav : A left side navigation panel (which is shown alongside page content on wide screens) - can be overriden using the left slot
RightPanel : A right side panel (which can be shown alongside page content on wide screens) - can be overriden using the right slot
TabBar: A navigation with QTabs
Fab: An action button based on a Quasar Floating Action Button at the bottom right corner of the page
SearchBar: a global search bar
Page Content: The embedded content of the page

The DSLayout component is usually wrapped using the Home component that simply load it depending on the authentication state of the user.
Some layout components are fixed for the entire application lifecycle. The application developer can customize using the layout configuration in config folder.

Forms

The Form is a generic form component capable of building HTML forms from of a JSON Schema. Moreover Form validates that the data is conformed to the schema using AJV validator.

A schema must have the following convention:

\$id: Specifying the id of the schema. It is mainly used by AJV to cache the schema.
title: Specifying the title of the form. It is used by the Editors.
description: Providing a brief description of the usage of the schema
type: Must be object
properties: Define the list of the fields of the form. To each object is assigned a field. The name of the field is the name of the object and the properties are used to provide the characteristics of the field. A field sub-object provides the UI characteristic to assign to the field: the component to be used for the rendering as well as the properties to apply to this component.
required: To define the required fields. You must specify the name of the fields.