vca-widget-base v0.1.5

vca-widget-base

Implements different visualizations for a user.

Widgets

This package implements the following widgets. These are mostly widgets supporting the consistent user interface of Viva con Aguas Pool².

VcA Frame

The frame describes the base of a Pool² page. Content is organized in VcA Boxes and these boxes are part of the VcA Columns which are positioned by the VcA Frame. Additionally, it is possible to add a title.

You can use it that way (the : as prefix of an attribute is a vue.js syntax to parse the value as numeric or boolean):

<VcAFrame title="Page Frame" :hasContainer="true">
    ...
</VcAFrame>

Slot	Position	Description
default		Contains all columns of the page.

VcA Column

Columns organize the VcA boxes in a vertical order.

You can use it that way:

<VcAColumn size="90%">
    ...
</VcAColumn>

VcA Box

Boxes contain the main content of a Pool² page. They can be used for any kind of content and help you to cluster your information and functions. Please try to develop a small concept how you want to use these boxes, since the usage of boxes will influence the usability of your microservice and thus, of the whole Pool².

You can use it that way (all attribute values are random examples):

<VcABox :first="true" title="Headline" :expand="true" className="vca-blue-background vca-more-shadow">
    <template slot="header">
        ...
    </template>
    ...
</VcABox>

Slot	Position	Description
default		Contains the main content
header		Could be used for small additional information (e.g. tags) or important functions

VcA Info Box

This box will be used to raise the users attention and inform the user about important facts.

You can use it that way:

<VcAInfoBox>
    ...
</VcAInfoBox>

There are no parameters for this widget

VcA Filter Tag

Tags can be used to display key-value structured information. For example, it is used in Drops to show the selected search criteria of the user search (user model attribute and the search key).

You can use it that way (all attribute values are random examples):

<VcAFilterTag field="Filter Tag">
    With Value
</VcAFilterTag>

As an alternative you can also pass the value as attribute

<VcAFilterTag field="Filter Tag" value="With Value" />

Slot	Position	Description
default		Could be used to pass the value.

Installation

npm install --save vca-widget-base

Quick Start

Vue.js

import Vue from 'vue'
import { VcAFrame, VcAColumn, VcABox, VcAInfoBox, VcAFilterTag } from 'vca-widget-base'
import 'vca-widget-base/dist/vca-widget-base.css'

export default {
  name: 'App',
  components: { VcAFrame, VcAColumn, VcABox, VcAInfoBox, VcAFilterTag }
}

Inside your template:

<template>
  <div id="app">
    <VcAFrame title="VcA Page">
        <VcAColumn size="90%">
            <VcABox title="First Box" :first="true">
              <template slot="header">
                Additional Information
              </template>
                Example content
            </VcABox>
            <VcABox title="Second Box">
                <div style="display:flex;flex-direction:row">
                    <VcAFilterTag field="Filter Tag" value="With Value" />
                    <VcAFilterTag field="No Value" />
                </div>
            </VcABox>
        </VcAColumn>
        <VcAColumn>
            <VcABox title="Third Box" :first="true">Another content</VcABox>
            <VcABox title="Fourth Box">
                <VcAInfoBox>VcA Info Box</VcAInfoBox>
            </VcABox>
        </VcAColumn>
    </VcAFrame>
  </div>
</template>

Browser

You can also use the widget without Vue.js.

<!-- Include after Vue -->
<!-- Local files -->
<link rel="stylesheet" href="vca-widget-base/dist/vca-widget-base.css"></link>
<script src="vca-widget-base/dist/vca-widget-base.js"></script>

<!-- From CDN -->
<link rel="stylesheet" href="https://unpkg.com/vca-widget-base/dist/vca-widget-base.css"></link>
<script src="https://unpkg.com/vca-widget-base"></script>

Development

Launch visual tests

npm run serve

Build

Bundle the js and css of to the dist folder:

npm run lib

Publishing

The prepublish hook will ensure dist files are created before publishing. This way you don't need to commit them in your repository.

# Bump the version first
# It'll also commit it and create a tag
npm version
# Push the bumped package and tags
git push --follow-tags
# Ship it 🚀
npm publish

License