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.

Installation

npm i vue-smart-widget -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

Swifly / vue-smart-widget

vue-smart-widget

Installation

Import

Usage

Use widget only

Use widget with grid

SmartWidget Props

SmartWidget Methods

CSS Selector in SmartWidget

SmartWidgetGrid Props

Slot scopes

SmartWidgetGrid Methods

License

简介

发行版

贡献者

近期动态

Swifly / vue-smart-widget .gitee-modal { width: 500px !important; }

vue-smart-widget

Installation

Import

Usage

Use widget only

Use widget with grid

SmartWidget Props

SmartWidget Methods

CSS Selector in SmartWidget

SmartWidgetGrid Props

Slot scopes

SmartWidgetGrid Methods

License

简介

发行版

贡献者

近期动态

搜索帮助

Swifly / vue-smart-widget