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)

License

MIT @xiaoluoboding