Sing App Vue v5.0.0

  1. Charts
  2. Forms
  3. UI
  4. Grid
  5. Maps
  6. Tables

Charts

Flot Charts

Built with Flot JS. Required libs:

import 'imports-loader?jQuery=jquery,this=>window!flot';

Interactive Sparklines

Built with jqeruy.sparkline.

import 'imports-loader?jQuery=jquery,this=>window!jquery-sparkline';

Rickshaw

Realtime chart is based on Rickshaw realtime example.

import Rickshaw from 'rickshaw';

Sparkline Pie Charts

Same as interactive sparklines based on jqeruy.sparkline.

Morris Charts

Built with Morris JS.

import 'imports-loader?jQuery=jquery,this=>window!webpack-raphael/raphael';
import 'imports-loader?jQuery=jquery,this=>window!govpredict-morris/morris';

Easy Pie Charts

Built with Easy Pie Chart.

import 'imports-loader?jQuery=jquery,this=>window!easy-pie-chart/dist/jquery.easypiechart.js';

Flot Bars

Same as Flot Charts built with Flot. A bit different dependencies:

import 'imports-loader?jQuery=jquery,this=>window!jquery.flot.animator/jquery.flot.animator';
import 'imports-loader?jQuery=jquery,this=>window!flot';
import 'imports-loader?jQuery=jquery,this=>window!flot/jquery.flot.time';

Form Elements

Form Elements are bootsrap components imported from bootsrap-vue

Inputs

Bootstrap styles input by default, so there is no need to add any classes to inputs. Just use them. Don't forget to include input type.

Bootstrap has a great documentation about forms.

Input Sizing

Any input can be sized by wrapping in <Col sm="*" xs="*"> component. For vertical sizing size="lg" and size="sm" props are available.

Textareas

Auto-growing textarea uses Textarea Autosize to increase area size dynamically. Imports:

import VueTextareaAutosize from 'vue-textarea-autosize';
Vue.use(VueTextareaAutosize);

Wysiwyg editor is based on Trumbowyg. Imports:

import trumbowyg from 'vue-trumbowyg';
Vue.use(trumbowyg);

Markdown editor is built with Mavon Editor. Imports:

import mavonEditor from 'mavon-editor';
Vue.use(mavonEditor);

Selects

Two different type of selects avaiables in Sing template:

Bootstrap Select code example:

<v-select
    id="default-select"
    v-model="defaultSelect"
    :options="['Large Magellanic Cloud', 'Andromeda Galaxy', 'SextansA']"
/>

Checkboxes and Radio

To style default checkboxes and radio buttons Awesome Bootstrap Checkbox library is used. This lib was written specially for Sing, so in case you find some bugs or want some features - let us know.

Button-like checkboxes

Bootstrap has a great api to handle button states - bootstrap button, so using it to imitate checkbox or radio buttons.

iOS-like switches

Usage:

<b-form-group class="display-inline-block checkbox-ios">
    <label for="checkbox-ios1" class="switch  form-control-label">
        <input type="checkbox" id="checkbox-ios1" class="ios form-check-input" value="off">
         <i></i>
    </label>
</b-form-group>

Pickers

Any field may have either vue2-datepicker or vue-color attached.

Masked Inputs

To make any input accept only formatted values there is a great plugin to use - MaskedInput.

Sliders

Sing sliders are styled version of vue-bootstrap-slider.

import { bFormSlider } from 'vue-bootstrap-slider';

Dropzone

Dead simple file upload plugin with image preview vue-dropzone.

Validation

Sing App have a good validation component directive. 

import VeeValidate from 'vee-validate';

Components

This page contain Sing-y styled versions of Bootstrap (bootstrap-vue) All components styles are in bootstrap-override.scss.

For progress bars there is a small Sing extension which allows you to change progress bars sizes by adding className: class="progress-xs", class="progress-sm".

Notifications

Sing App uses HubSpot's Messenger library. It's a client-side growl-like notifications with actions and auto-retry.

Read more at Messenger website.

Font Awesome Icons

Font Awesome is iconic font originally designed for Bootstrap (Font Awesome works great with all frameworks). It contains 439 icons in pictographic font form.

Read more at Font Awesome website.

Glyphicons Icons

200 icons in pictographic font form provided by Glyphicons.

Buttons

To create button you can style any html element with .btn class or use <v-button> component. Sing App replaces default bootstrap colors with theme specific and adds two more: color="gray" and color="inverse".

You can read more at bootstrap-vue buttons page.

Tabs

Tabs component may be placed both inside of .widget element or directly into main .content.

Usage example:

<b-tabs>
  <b-tab title="first" active>
    <br>I'm the first fading tab
  </b-tab>
  <b-tab title="second" >
    <br>I'm the second tab content
  </b-tab>
  <b-tab title="disabled" disabled>
    <br>Disabled tab!
  </b-tab>
</b-tabs>

For more info check bootstrap-vue tabs.

Accordion

Same as Tabs Accordion may be placed both as a widget inside .content or inside of .widget. Sing's accordion is a styled version of >bootstrap-vue vollapse component.

Grouped Lists

Sing App grouped lists is a styled version of jQuery UI vue-draggable-nested-tree.

List Groups

This nestable draggable lists are built with vuedgraggable .

Grid System

Sing App inherits 12-column grid system from Bootstrap's great one with bootstrap-vue.

Widget Controls

For one of our previous works we have developed a custom component called Widget based on Widgster which provides an easy way to handle basic widget functions like collapsing, closing, refreshing & fullsreening.

import Widget from '@/components/Widget/Widget';

Options

Actions

Google maps

To embed Google Maps into Sing App great package is used - vue-google-maps 

import * as VueGoogleMaps from 'vue2-google-maps';
Vue.use(VueGoogleMaps, {
  load: {
    key: 'your key',
  },
});

Vector maps

Sometimes you need to use just simplified version of map. Jvectormap does a great job in such cases.

import 'imports-loader?jQuery=jquery,this=>window!jvectormap/jquery-jvectormap.min.js';

Static Tables

Sing App tables are based on Bootstrap-vue tables with additional styling.

Tables aviable in different sizes: size="sm" and size="lg".

Also, don't forget about responsive prop which adds horizontal scrollbar to tables for small screens.

Usage example:

<template>
  <b-table striped hover :items="items"></b-table>
</template>

<script>
const items = [
  { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
  { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
  { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
  { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
]

export default {
  data () {
    return {
      items: items
    }
  }
}
</script>

Dynamic Tables

Dynamic tables built with fully custamizable vue-tables-2.