Vue-smart-widget NPM

vue-smart-widget

Smart widget is a flexible and extensible content container component. It includes header and body part, and widget body includes editbox、content、footer. If you use with grid, it also have a draggable and resizable grid layout, base on Vue2.5.+ & vue-grid-layout.

Both Support Vue 2/Vue 3

Vue 2 | Vue 3

Installation

Vue 2

npm i vue-smart-widget -S

Vue 3

npm i vue-smart-widget@next -S

Import

Install all the components:

import Vue from 'vue'
import VueSmartWidget from 'vue-smart-widget'

Vue.use(VueSmartWidget)

Use widget only:

import Vue from 'vue'
import { SmartWidget } from 'vue-smart-widget'

Vue.component('SmartWidget', SmartWidget)

Usage

The SmartWidget is heavily base on vue-grid-layout, you can know about vue-grid-layout first, maybe you already use in your project.

Use widget only

Html

<smart-widget title="Default Widget">
  <p>
    It's default widget.
  </p>
</smart-widget>

Use widget with grid

import Vue from 'vue'
import { SmartWidgetGrid } from 'vue-smart-widget'

Vue.component('SmartWidgetGrid', SmartWidgetGrid)

Script

new Vue({
  data () {
    return {
      layout: [
        { x: 0, y: 0, w: 4, h: 4, i: '0' },
        { x: 4, y: 0, w: 4, h: 4, i: '1' },
        { x: 8, y: 0, w: 4, h: 4, i: '2' }
      ]
    }
  }
})

Html

<smart-widget-grid :layout="layout">
  <smart-widget slot="0" simple>
    <div class="layout-center">
      <h3>Simple Widget Without Header</h3>
    </div>
  </smart-widget>
  <smart-widget slot="1" title="Default Widget">
    <div class="layout-center">
      <h3>Default Widget With Header</h3>
    </div>
  </smart-widget>
  <smart-widget slot="2" title="Full Screen" fullscreen>
    <div class="layout-center">
      <h3>Make any widget full screen</h3>
    </div>
  </smart-widget>
</smart-widget-grid>

SmartWidget Props

Attribute	Description	Type	Accepted values	Default
slot	Widget slot, the unique identifier of the widget. refer to `SmartWidgetGrid Props`	String	-	-
title	Widget Header Title	String	-	-
subTitle	Widget Header Sub Title	String	-	-
padding	padding in Widget Body	Number, Array	-	`[12, 20]`
simple	Widget without Header	Boolean	`true` or `false`	`false`
loading	determine whether it's loading	Boolean	`true` or `false`	`false`
fullscreen	determine whether have fullscreen button	Boolean	`true` or `false`	`false`
collapse	determine whether have collapse button, only support `smart-widget`	Boolean	`true` or `false`	`false`
refresh	determine whether have refresh button	Boolean	`true` or `false`	`false`
fixedHeight	determine whether widget body's height is fixed, only support `smart-widget`	Boolean	`true` or `false`	`false`
shadow	when to show card shadows	String	`always`、`hover`、`never`	`always`
translateY	the length of vertically transform	Number	-	0
isActived	determine whether widget is actived	Boolean	`true` or `false`	`false`
activedColor	the actived widget `box-shadow` color, usually used with `isActived` attribute	String	hex color	#0076db
headerHeight	Widget Header Height(px)	Number	-	48

SmartWidget Methods

Name	Description	Parameters
move	Every time an item is being moved and changes position	`(i, newX, newY)`
moved	Every time an item is finished being moved and changes position	`(i, newX, newY)`
resize	Every time an item is being resized and changes size	`(i, newH, newW, newHPx, newWPx)`
resized	Every time an item is finished being moved and changes position	`(i, newH, newW, newHPx, newWPx)`
container-resized	Every time the grid item/layout container changes size (browser window or other)	`(i, newH, newW, newHPx, newWPx)`
on-refresh	Used when the widget need fetching data from ajax methods, usually used with `loading` attribute	-
before-fullscreen	Used when the widget before fullscreen, usually used with `fullscreen` attribute	`true` or `false`
on-fullscreen	Used when the widget is already fullscreen, usually used with `fullscreen` attribute	`true` or `false`

CSS Selector in SmartWidget

Name	Description
`.smartwidget`	The main selector in SmartWidget
`.is-actived`	The state of widget is actived
`.vue-grid-item.vue-grid-placeholder`	The default css for the placeholder

SmartWidgetGrid Props

It's similar with vue-grid-layout. Care about the attribute layout, The value of layout must be an Array of Object items. Each item must have i, x, y, w and h proprties. especially, the i proprties, it's the unique identifier of the widget item, euqal with widget slot.

Attribute	Description	Type	Accepted values	Default
layout	This is the initial layout of the grid.	Array	-	`required`
responsiveLayouts	This is the initial layouts of the grid per breakpoint if responsive is set to true.	Object	-	`{}`
colNum	Says how many columns the grid has.	Number	-	`12`
rowHeight	Says what is a height of a single row in pixels.	Number	-	`48`
maxRows	Says what is a maximal number of rows in the grid.	Number	-	`Infinity`
margin	Says what are the margins of elements inside the grid.	Array	-	`[10, 10]`
draggable	Says if the grids items are draggable.	Boolean	`true` or `false`	`true`
resizable	Says if the grids items are resizable.	Boolean	`true` or `false`	`true`
isMirrored	Says if the RTL/LTR should be reversed.	Boolean	`true` or `false`	`false`
autoSize	Says if the container height should swells and contracts to fit contents.	Boolean	`true` or `false`	`true`
verticalCompact	Says if the layout should be compact vertically.	Boolean	`true` or `false`	`true`
preventCollision	Says if grid items will move when being dragged over.	Boolean	`true` or `false`	`false`
responsive	Says if the layout should be responsive to window width.	Boolean	`true` or `false`	`false`
breakpoints	Breakpoints defined for responsive layout. Sets widths on wich column number changes.	Object	-	`{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }`
cols	Defines number of columns for each breakpoint.	Object	-	`{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }`
isStatic	Control all widgets won't be draggable, resizable or moved	Boolean	`true` or `false`	`false`

Slot scopes

Each widget in the grid is resizable, slot-scope provide the widget attribute to the children component.

Name	Description	Type
contentH	Provide the widget body content(`widget-body__content`) height	Number

SmartWidgetGrid Methods

Name	Description	Parameters
layout-created	Emited on the component created lifecycle hook	`newLayout`
layout-before-mount	Emited on the component beforeMount lifecycle hook	`newLayout`
layout-mounted	Emited on the component mounted lifecycle hook	`newLayout`
layout-ready	Emited when all the operations on the mount hook finish	`newLayout`
layout-updated	Every time the layout has finished updating and positions of all grid-items are recalculated	`newLayout`
breakpoint-changed	Every time the breakpoint value changes due to window resize	`(newBreakpoint, newLayout)`